@bravobit/bb-foundation 0.16.1 → 0.16.2

package/fesm2020/bravobit-bb-foundation-controls.mjs

@@ -1,38 +1,117 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { coerceBooleanProperty } from '@bravobit/bb-foundation';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, forwardRef, ViewChild, Output, NgModule } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class BbiCheckboxGroup {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        // Inputs.
+        this.label = null; // TODO(Stan): Add template possibilities here.
+        this._grouped = false;
+        this._required = false;
+    }
+    // Grouped.
+    get grouped() { return this._grouped; }
+    set grouped(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.grouped) {
+            this._grouped = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    // Required.
+    get required() { return this._required; }
+    set required(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.required) {
+            this._required = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+}
+BbiCheckboxGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbiCheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiCheckboxGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: BbiCheckboxGroup, selector: "bbi-checkbox-group", inputs: { label: "label", grouped: "grouped", required: "required" }, host: { properties: { "class.grouped": "grouped", "class.required": "required" }, classAttribute: "bbi-checkbox-group" }, ngImport: i0, template: "<label *ngIf=\"label as label\"\n       class=\"bbi-checkbox-group-label\">\n    {{ label }}\n</label>\n\n<div class=\"bbi-checkbox-group-items\">\n    <ng-content select=\"bbi-checkbox\"></ng-content>\n</div>\n", styles: [".bbi-checkbox-group{display:block}.bbi-checkbox-group.grouped{margin-bottom:20px}.bbi-checkbox-group.required>.bbi-checkbox-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-checkbox-group-label{border:0;padding:0;line-height:1.33;margin-bottom:4px;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--checkbox-group-label-color, #525252);font-size:var(--checkbox-group-label-size, 14px);font-weight:var(--checkbox-group-label-weight, 400)}.bbi-checkbox-group-items{display:flex;flex-direction:column}.bbi-checkbox-group-items:not(:empty){margin-bottom:-4px}.bbi-checkbox-group-items>*{margin-bottom:4px}@media only screen and (min-width: 768px){.bbi-checkbox-group:not(.vertical)>.bbi-checkbox-group-items{flex-wrap:wrap;flex-direction:row}.bbi-checkbox-group:not(.vertical)>.bbi-checkbox-group-items>*:not(:last-child){margin-right:10px}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbiCheckboxGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbi-checkbox-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bbi-checkbox-group',
+                        '[class.grouped]': 'grouped',
+                        '[class.required]': 'required'
+                    }, preserveWhitespaces: false, template: "<label *ngIf=\"label as label\"\n       class=\"bbi-checkbox-group-label\">\n    {{ label }}\n</label>\n\n<div class=\"bbi-checkbox-group-items\">\n    <ng-content select=\"bbi-checkbox\"></ng-content>\n</div>\n", styles: [".bbi-checkbox-group{display:block}.bbi-checkbox-group.grouped{margin-bottom:20px}.bbi-checkbox-group.required>.bbi-checkbox-group-label:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5}.bbi-checkbox-group-label{border:0;padding:0;line-height:1.33;margin-bottom:4px;font-family:inherit;display:inline-block;box-sizing:border-box;vertical-align:initial;color:var(--checkbox-group-label-color, #525252);font-size:var(--checkbox-group-label-size, 14px);font-weight:var(--checkbox-group-label-weight, 400)}.bbi-checkbox-group-items{display:flex;flex-direction:column}.bbi-checkbox-group-items:not(:empty){margin-bottom:-4px}.bbi-checkbox-group-items>*{margin-bottom:4px}@media only screen and (min-width: 768px){.bbi-checkbox-group:not(.vertical)>.bbi-checkbox-group-items{flex-wrap:wrap;flex-direction:row}.bbi-checkbox-group:not(.vertical)>.bbi-checkbox-group-items>*:not(:last-child){margin-right:10px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
+                type: Input
+            }], grouped: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
 
 let nextUniqueId = 0;
 class BbiCheckbox {
-    constructor(_renderer) {
+    constructor(_renderer, _changeDetectorRef) {
         this._renderer = _renderer;
+        this._changeDetectorRef = _changeDetectorRef;
         // Readonly data.
         this.labelId = `bbi-checkbox-${nextUniqueId++}`;
+        // Outputs.
+        this.checkedChange = new EventEmitter();
+        this.indeterminateChange = new EventEmitter();
+        this._checked = false;
+        this._disabled = false;
+        this._grouped = false;
+        this._indeterminate = false;
+        this._required = false;
         // Methods.
         this.onChange = () => ({});
         this.onTouched = () => ({});
-        // State.
-        this._grouped = false;
-        this._disabled = false;
-        this._indeterminate = false;
     }
-    // Inputs.
+    // Checked.
+    get checked() { return this._checked; }
+    set checked(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.checked) {
+            this._checked = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    // Disabled.
+    get disabled() { return this._disabled; }
     set disabled(value) {
-        const disabled = coerceBooleanProperty(value);
-        this.setDisabledState(disabled);
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.disabled) {
+            this._disabled = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
     }
+    // Grouped.
+    get grouped() { return this._grouped; }
     set grouped(value) {
-        this._grouped = coerceBooleanProperty(value);
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.grouped) {
+            this._grouped = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
     }
+    // Indeterminate.
+    get indeterminate() { return this._indeterminate; }
     set indeterminate(value) {
-        const indeterminate = coerceBooleanProperty(value);
-        this.setIndeterminateState(indeterminate);
+        this._indeterminate = coerceBooleanProperty(value);
+        this.syncField('indeterminate', this._indeterminate);
+    }
+    // Required.
+    get required() { return this._required; }
+    set required(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this.required) {
+            this._required = newValue;
+            this._changeDetectorRef.markForCheck();
+        }
     }
-    ngOnInit() {
-        this.setDisabledState(this._disabled);
-        this.setIndeterminateState(this._indeterminate);
+    ngAfterViewInit() {
+        this.syncField('indeterminate', this._indeterminate);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -41,62 +120,95 @@ class BbiCheckbox {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        this.setProperty('disabled', this._disabled);
-    }
-    setIndeterminateState(indeterminate) {
-        this._indeterminate = indeterminate;
-        this.setProperty('indeterminate', this._indeterminate);
+        this.disabled = isDisabled;
     }
     writeValue(newValue) {
-        this.setProperty('checked', newValue);
+        this.checked = !!newValue;
+    }
+    toggle() {
+        this.checked = !this.checked;
+    }
+    onClickEvent(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        // When user manually click on the checkbox, `indeterminate` is set to false.
+        if (this.indeterminate) {
+            Promise.resolve().then(() => {
+                this._indeterminate = false;
+                this.indeterminateChange.emit(this._indeterminate);
+            });
+        }
+        this.toggle();
+        // 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();
     }
     onChangeEvent(event) {
-        this.onChange(event?.target?.checked);
+        // 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();
+    }
+    emitChangeEvent() {
+        this.onChange?.(this.checked);
+        this.checkedChange.emit(this.checked);
+        this.syncField('checked', this.checked);
     }
-    setProperty(key, value) {
+    syncField(field, value) {
         const element = this.inputElementRef?.nativeElement;
         if (!element) {
             return;
         }
-        this._renderer.setProperty(element, key, value);
+        this._renderer.setProperty(element, field, value);
     }
 }
-BbiCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbiCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-BbiCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: BbiCheckbox, selector: "bbi-checkbox", inputs: { grouped: "grouped", disabled: "disabled", indeterminate: "indeterminate" }, host: { properties: { "class.grouped": "_grouped", "class.indeterminate": "_indeterminate" }, classAttribute: "bbi-checkbox" }, providers: [
+BbiCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbiCheckbox, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbiCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: BbiCheckbox, selector: "bbi-checkbox", inputs: { checked: "checked", disabled: "disabled", grouped: "grouped", indeterminate: "indeterminate", required: "required" }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.grouped": "grouped", "class.indeterminate": "indeterminate", "class.required": "required" }, classAttribute: "bbi-checkbox" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiCheckbox), multi: true }
-    ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input #input\n       [id]=\"labelId\"\n       (change)=\"onChangeEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span class=\"bbi-checkbox-text\"\n          dir=\"auto\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-checkbox{display:block}.bbi-checkbox+.bbi-checkbox{margin-top:3px}.bbi-checkbox.grouped{margin-bottom:20px}.bbi-checkbox-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:before{border:1px solid #1565c0;background-color:#1565c0}.bbi-checkbox-input:checked+.bbi-checkbox-label:after,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{opacity:1;transform:scale(1) rotate(-45deg)}.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{top:-1px;left:5px;width:10px;border-left:0 solid white;border-bottom:2px solid white;transform:scale(1) rotate(0)}.bbi-checkbox-input:focus+.bbi-checkbox-label:before{outline-color:#1565c0}.bbi-checkbox-input:disabled+.bbi-checkbox-label{color:#c6c6c6;cursor:not-allowed}.bbi-checkbox-input:disabled+.bbi-checkbox-label:before{border-color:#c6c6c6}.bbi-checkbox-input:checked:disabled+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate:disabled+.bbi-checkbox-label:before{background-color:#c6c6c6}.bbi-checkbox-label{border:0;margin:0;display:flex;cursor:pointer;font-size:16px;font-weight:400;line-height:1.28;-webkit-user-select:none;user-select:none;position:relative;padding-left:20px;font-family:inherit;vertical-align:initial}.bbi-checkbox-label:before{left:0;width:20px;content:\"\";height:20px;position:absolute;border-radius:4px;outline-offset:1px;border:1px solid #111111;background-color:initial;outline:2px solid transparent;transition:outline-color .2s cubic-bezier(0,0,.2,1),background-color .18s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-label:after{left:4px;opacity:0;width:12px;height:6px;content:\"\";margin-top:6px;background:none;position:absolute;transform-origin:center;border-left:2px solid white;border-bottom:2px solid white;transform:scale(.85) rotate(-60deg);transition:opacity .12s cubic-bezier(0,0,.2,1),transform .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-text{padding-left:6px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span class=\"bbi-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-checkbox{display:block}.bbi-checkbox.grouped{margin-bottom:20px}.bbi-checkbox.required>.bbi-checkbox-label>.bbi-checkbox-text:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5;margin-left:3px}.bbi-checkbox-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:before{border:1px solid var(--checkbox-accent-color, #1565c0);background-color:var(--checkbox-accent-color, #1565c0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:after,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{opacity:1;transform:scale(1) rotate(-45deg)}.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{top:-1px;left:5px;width:10px;transform:scale(1) rotate(0);border-left:0 solid var(--checkbox-check-color, white);border-bottom:2px solid var(--checkbox-check-color, white)}.bbi-checkbox-input:focus+.bbi-checkbox-label:before{outline-color:var(--checkbox-accent-color, #1565c0)}.bbi-checkbox-input:disabled+.bbi-checkbox-label{cursor:not-allowed;color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label:before{border-color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label>.bbi-checkbox-text{color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-input:checked:disabled+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate:disabled+.bbi-checkbox-label:before{background-color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-label{border:0;margin:0;display:flex;cursor:pointer;font-size:16px;font-weight:400;line-height:1.28;-webkit-user-select:none;user-select:none;position:relative;padding-left:20px;font-family:inherit;vertical-align:initial}.bbi-checkbox-label:before{left:0;width:20px;content:\"\";height:20px;position:absolute;border-radius:4px;outline-offset:1px;background-color:initial;outline:2px solid transparent;border:1px solid var(--checkbox-border-color, #111111);transition:outline-color .2s cubic-bezier(0,0,.2,1),background-color .18s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-label:after{left:4px;opacity:0;width:12px;height:6px;content:\"\";margin-top:6px;background:none;position:absolute;transform-origin:center;transform:scale(.85) rotate(-60deg);border-left:2px solid var(--checkbox-check-color, white);border-bottom:2px solid var(--checkbox-check-color, white);transition:opacity .12s cubic-bezier(0,0,.2,1),transform .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-text{padding-left:6px;color:var(--checkbox-label-color, #111111)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbiCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'bbi-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiCheckbox), multi: true }
                     ], host: {
                         'class': 'bbi-checkbox',
-                        '[class.grouped]': '_grouped',
-                        '[class.indeterminate]': '_indeterminate'
-                    }, inputs: ['grouped'], preserveWhitespaces: false, template: "<input #input\n       [id]=\"labelId\"\n       (change)=\"onChangeEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span class=\"bbi-checkbox-text\"\n          dir=\"auto\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-checkbox{display:block}.bbi-checkbox+.bbi-checkbox{margin-top:3px}.bbi-checkbox.grouped{margin-bottom:20px}.bbi-checkbox-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:before{border:1px solid #1565c0;background-color:#1565c0}.bbi-checkbox-input:checked+.bbi-checkbox-label:after,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{opacity:1;transform:scale(1) rotate(-45deg)}.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{top:-1px;left:5px;width:10px;border-left:0 solid white;border-bottom:2px solid white;transform:scale(1) rotate(0)}.bbi-checkbox-input:focus+.bbi-checkbox-label:before{outline-color:#1565c0}.bbi-checkbox-input:disabled+.bbi-checkbox-label{color:#c6c6c6;cursor:not-allowed}.bbi-checkbox-input:disabled+.bbi-checkbox-label:before{border-color:#c6c6c6}.bbi-checkbox-input:checked:disabled+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate:disabled+.bbi-checkbox-label:before{background-color:#c6c6c6}.bbi-checkbox-label{border:0;margin:0;display:flex;cursor:pointer;font-size:16px;font-weight:400;line-height:1.28;-webkit-user-select:none;user-select:none;position:relative;padding-left:20px;font-family:inherit;vertical-align:initial}.bbi-checkbox-label:before{left:0;width:20px;content:\"\";height:20px;position:absolute;border-radius:4px;outline-offset:1px;border:1px solid #111111;background-color:initial;outline:2px solid transparent;transition:outline-color .2s cubic-bezier(0,0,.2,1),background-color .18s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-label:after{left:4px;opacity:0;width:12px;height:6px;content:\"\";margin-top:6px;background:none;position:absolute;transform-origin:center;border-left:2px solid white;border-bottom:2px solid white;transform:scale(.85) rotate(-60deg);transition:opacity .12s cubic-bezier(0,0,.2,1),transform .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-text{padding-left:6px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { inputElementRef: [{
+                        '[class.grouped]': 'grouped',
+                        '[class.indeterminate]': 'indeterminate',
+                        '[class.required]': 'required'
+                    }, preserveWhitespaces: false, template: "<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span class=\"bbi-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".bbi-checkbox{display:block}.bbi-checkbox.grouped{margin-bottom:20px}.bbi-checkbox.required>.bbi-checkbox-label>.bbi-checkbox-text:after{content:\"*\";color:#c23934;font-size:12px;line-height:1.5;margin-left:3px}.bbi-checkbox-input{border:0;width:1px;padding:0;height:1px;margin:-1px;overflow:hidden;position:absolute;visibility:inherit;white-space:nowrap;clip:rect(0,0,0,0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:before{border:1px solid var(--checkbox-accent-color, #1565c0);background-color:var(--checkbox-accent-color, #1565c0)}.bbi-checkbox-input:checked+.bbi-checkbox-label:after,.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{opacity:1;transform:scale(1) rotate(-45deg)}.bbi-checkbox-input:indeterminate+.bbi-checkbox-label:after{top:-1px;left:5px;width:10px;transform:scale(1) rotate(0);border-left:0 solid var(--checkbox-check-color, white);border-bottom:2px solid var(--checkbox-check-color, white)}.bbi-checkbox-input:focus+.bbi-checkbox-label:before{outline-color:var(--checkbox-accent-color, #1565c0)}.bbi-checkbox-input:disabled+.bbi-checkbox-label{cursor:not-allowed;color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label:before{border-color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-input:disabled+.bbi-checkbox-label>.bbi-checkbox-text{color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-input:checked:disabled+.bbi-checkbox-label:before,.bbi-checkbox-input:indeterminate:disabled+.bbi-checkbox-label:before{background-color:var(--checkbox-disabled-color, #c6c6c6)}.bbi-checkbox-label{border:0;margin:0;display:flex;cursor:pointer;font-size:16px;font-weight:400;line-height:1.28;-webkit-user-select:none;user-select:none;position:relative;padding-left:20px;font-family:inherit;vertical-align:initial}.bbi-checkbox-label:before{left:0;width:20px;content:\"\";height:20px;position:absolute;border-radius:4px;outline-offset:1px;background-color:initial;outline:2px solid transparent;border:1px solid var(--checkbox-border-color, #111111);transition:outline-color .2s cubic-bezier(0,0,.2,1),background-color .18s cubic-bezier(0,0,.2,1),border-color .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-label:after{left:4px;opacity:0;width:12px;height:6px;content:\"\";margin-top:6px;background:none;position:absolute;transform-origin:center;transform:scale(.85) rotate(-60deg);border-left:2px solid var(--checkbox-check-color, white);border-bottom:2px solid var(--checkbox-check-color, white);transition:opacity .12s cubic-bezier(0,0,.2,1),transform .18s cubic-bezier(0,0,.2,1)}.bbi-checkbox-text{padding-left:6px;color:var(--checkbox-label-color, #111111)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
+            }], checkedChange: [{
+                type: Output
+            }], indeterminateChange: [{
+                type: Output
+            }], checked: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], grouped: [{
                 type: Input
             }], indeterminate: [{
                 type: Input
+            }], required: [{
+                type: Input
             }] } });
 
 class CheckboxModule {
 }
 CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: CheckboxModule, declarations: [BbiCheckbox], imports: [CommonModule, ReactiveFormsModule], exports: [BbiCheckbox] });
-CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: CheckboxModule, imports: [[CommonModule, ReactiveFormsModule]] });
+CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: CheckboxModule, declarations: [BbiCheckbox, BbiCheckboxGroup], imports: [CommonModule], exports: [BbiCheckbox, BbiCheckboxGroup] });
+CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: CheckboxModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ReactiveFormsModule],
-                    declarations: [BbiCheckbox],
-                    exports: [BbiCheckbox]
+                    imports: [CommonModule],
+                    declarations: [BbiCheckbox, BbiCheckboxGroup],
+                    exports: [BbiCheckbox, BbiCheckboxGroup]
                 }]
         }] });
 
@@ -117,5 +229,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BbiCheckbox, CheckboxModule, ControlsModule };
+export { BbiCheckbox, BbiCheckboxGroup, CheckboxModule, ControlsModule };
 //# sourceMappingURL=bravobit-bb-foundation-controls.mjs.map

package/fesm2020/bravobit-bb-foundation-controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bravobit-bb-foundation-controls.mjs","sources":["../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox.component.ts","../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox.component.html","../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox.module.ts","../../../projects/bb-foundation/controls/src/lib/controls.module.ts","../../../projects/bb-foundation/controls/src/bravobit-bb-foundation-controls.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    forwardRef,\n    Input, OnInit,\n    Renderer2,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {coerceBooleanProperty} from '@bravobit/bb-foundation';\n\nlet nextUniqueId = 0;\n\n@Component({\n    selector: 'bbi-checkbox',\n    templateUrl: './checkbox.component.html',\n    styleUrls: ['./checkbox.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [\n        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiCheckbox), multi: true}\n    ],\n    host: {\n        'class': 'bbi-checkbox',\n        '[class.grouped]': '_grouped',\n        '[class.indeterminate]': '_indeterminate'\n    },\n    inputs: ['grouped'],\n    preserveWhitespaces: false\n})\nexport class BbiCheckbox implements ControlValueAccessor, OnInit {\n\n    // Readonly data.\n    readonly labelId = `bbi-checkbox-${nextUniqueId++}`;\n\n    // Views.\n    @ViewChild('input', {static: true}) inputElementRef: ElementRef<HTMLInputElement>;\n\n    // Inputs.\n    @Input() set disabled(value: unknown) {\n        const disabled = coerceBooleanProperty(value);\n        this.setDisabledState(disabled);\n    }\n\n    @Input() set grouped(value: unknown) {\n        this._grouped = coerceBooleanProperty(value);\n    }\n\n    @Input() set indeterminate(value: unknown) {\n        const indeterminate = coerceBooleanProperty(value);\n        this.setIndeterminateState(indeterminate);\n    }\n\n    // Methods.\n    onChange: (newValue: boolean) => void = () => ({});\n    onTouched: () => void = () => ({});\n\n    // State.\n    _grouped: boolean = false;\n    _disabled: boolean = false;\n    _indeterminate: boolean = false;\n\n    constructor(private _renderer: Renderer2) {\n    }\n\n    ngOnInit() {\n        this.setDisabledState(this._disabled);\n        this.setIndeterminateState(this._indeterminate);\n    }\n\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean) {\n        this._disabled = isDisabled;\n        this.setProperty('disabled', this._disabled);\n    }\n\n    setIndeterminateState(indeterminate: boolean) {\n        this._indeterminate = indeterminate;\n        this.setProperty('indeterminate', this._indeterminate);\n    }\n\n    writeValue(newValue: boolean) {\n        this.setProperty('checked', newValue);\n    }\n\n    onChangeEvent(event: Event) {\n        this.onChange((event?.target as HTMLInputElement)?.checked);\n    }\n\n    private setProperty(key: string, value: unknown) {\n        const element = this.inputElementRef?.nativeElement;\n        if (!element) {\n            return;\n        }\n        this._renderer.setProperty(element, key, value);\n    }\n\n}\n","<input #input\n       [id]=\"labelId\"\n       (change)=\"onChangeEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span class=\"bbi-checkbox-text\"\n          dir=\"auto\"><ng-content></ng-content></span>\n</label>\n","import {ReactiveFormsModule} from '@angular/forms';\nimport {BbiCheckbox} from './checkbox.component';\nimport {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\n\n@NgModule({\n    imports: [CommonModule, ReactiveFormsModule],\n    declarations: [BbiCheckbox],\n    exports: [BbiCheckbox]\n})\nexport class CheckboxModule {\n}\n","import {CheckboxModule} from './checkbox/checkbox.module';\nimport {NgModule} from '@angular/core';\n\n@NgModule({\n    imports: [CheckboxModule],\n    exports: [CheckboxModule]\n})\nexport class ControlsModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bravobit-bb-foundation-controls.mjs","sources":["../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox-group/checkbox-group.component.ts","../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox-group/checkbox-group.component.html","../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox/checkbox.component.ts","../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox/checkbox.component.html","../../../projects/bb-foundation/controls/src/lib/checkbox/checkbox.module.ts","../../../projects/bb-foundation/controls/src/lib/controls.module.ts","../../../projects/bb-foundation/controls/src/bravobit-bb-foundation-controls.ts"],"sourcesContent":["import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewEncapsulation} from '@angular/core';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\n\n@Component({\n    selector: 'bbi-checkbox-group',\n    templateUrl: './checkbox-group.component.html',\n    styleUrls: ['./checkbox-group.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        'class': 'bbi-checkbox-group',\n        '[class.grouped]': 'grouped',\n        '[class.required]': 'required'\n    },\n    preserveWhitespaces: false\n})\nexport class BbiCheckboxGroup {\n\n    // Inputs.\n    @Input() label: string | null = null; // TODO(Stan): Add template possibilities here.\n\n    // Grouped.\n    @Input()\n    get grouped() { return this._grouped; }\n\n    set grouped(value: unknown) {\n        const newValue = coerceBooleanProperty(value);\n        if (newValue !== this.grouped) {\n            this._grouped = newValue;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _grouped = false;\n\n    // Required.\n    @Input()\n    get required() { return this._required; }\n\n    set required(value: unknown) {\n        const newValue = coerceBooleanProperty(value);\n        if (newValue !== this.required) {\n            this._required = newValue;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _required = false;\n\n    constructor(private _changeDetectorRef: ChangeDetectorRef) {\n    }\n\n    // Required so that the template type checker can infer the type of the coerced inputs.\n    static ngAcceptInputType_grouped: BooleanInput;\n    static ngAcceptInputType_required: BooleanInput;\n\n}\n","<label *ngIf=\"label as label\"\n       class=\"bbi-checkbox-group-label\">\n    {{ label }}\n</label>\n\n<div class=\"bbi-checkbox-group-items\">\n    <ng-content select=\"bbi-checkbox\"></ng-content>\n</div>\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input, Output,\n    Renderer2,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\n\nlet nextUniqueId = 0;\n\n@Component({\n    selector: 'bbi-checkbox',\n    templateUrl: './checkbox.component.html',\n    styleUrls: ['./checkbox.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [\n        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbiCheckbox), multi: true}\n    ],\n    host: {\n        'class': 'bbi-checkbox',\n        '[class.grouped]': 'grouped',\n        '[class.indeterminate]': 'indeterminate',\n        '[class.required]': 'required'\n    },\n    preserveWhitespaces: false\n})\nexport class BbiCheckbox implements ControlValueAccessor, AfterViewInit {\n\n    // Readonly data.\n    readonly labelId = `bbi-checkbox-${nextUniqueId++}`;\n\n    // Views.\n    @ViewChild('input', {static: true}) inputElementRef: ElementRef<HTMLInputElement>;\n\n    // Outputs.\n    @Output() checkedChange = new EventEmitter<boolean>();\n    @Output() indeterminateChange = new EventEmitter<boolean>();\n\n    // Checked.\n    @Input()\n    get checked() { return this._checked;}\n\n    set checked(value: boolean) {\n        const newValue = coerceBooleanProperty(value);\n        if (newValue !== this.checked) {\n            this._checked = newValue;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _checked: boolean = false;\n\n    // Disabled.\n    @Input()\n    get disabled() { return this._disabled; }\n\n    set disabled(value: unknown) {\n        const newValue = coerceBooleanProperty(value);\n        if (newValue !== this.disabled) {\n            this._disabled = newValue;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _disabled = false;\n\n    // Grouped.\n    @Input()\n    get grouped() { return this._grouped; }\n\n    set grouped(value: unknown) {\n        const newValue = coerceBooleanProperty(value);\n        if (newValue !== this.grouped) {\n            this._grouped = newValue;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _grouped = false;\n\n    // Indeterminate.\n    @Input()\n    get indeterminate() { return this._indeterminate; }\n\n    set indeterminate(value: unknown) {\n        this._indeterminate = coerceBooleanProperty(value);\n        this.syncField('indeterminate', this._indeterminate);\n    }\n\n    private _indeterminate = false;\n\n    // Required.\n    @Input()\n    get required() { return this._required; }\n\n    set required(value: unknown) {\n        const newValue = coerceBooleanProperty(value);\n        if (newValue !== this.required) {\n            this._required = newValue;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _required = false;\n\n    // Methods.\n    onChange: (newValue: boolean) => void = () => ({});\n    onTouched: () => void = () => ({});\n\n    constructor(private _renderer: Renderer2,\n                private _changeDetectorRef: ChangeDetectorRef) {\n    }\n\n    ngAfterViewInit() {\n        this.syncField('indeterminate', this._indeterminate);\n    }\n\n    registerOnChange(fn: (newValue: boolean) => void) {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void) {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean) {\n        this.disabled = isDisabled;\n    }\n\n    writeValue(newValue: boolean) {\n        this.checked = !!newValue;\n    }\n\n    toggle() {\n        this.checked = !this.checked;\n    }\n\n    onClickEvent(event: Event) {\n        event.stopPropagation();\n        if (this.disabled) {\n            return;\n        }\n\n        // When user manually click on the checkbox, `indeterminate` is set to false.\n        if (this.indeterminate) {\n            Promise.resolve().then(() => {\n                this._indeterminate = false;\n                this.indeterminateChange.emit(this._indeterminate);\n            });\n        }\n\n        this.toggle();\n\n        // Emit our custom change event if the native input emitted one.\n        // It is important to only emit it, if the native input triggered one, because\n        // we don't want to trigger a change event, when the `checked` variable changes for example.\n        this.emitChangeEvent();\n    }\n\n    onChangeEvent(event: Event) {\n        // We always have to stop propagation on the change event.\n        // Otherwise the change event, from the input element, will bubble up and\n        // emit its event object to the `change` output.\n        event.stopPropagation();\n    }\n\n    private emitChangeEvent() {\n        this.onChange?.(this.checked);\n        this.checkedChange.emit(this.checked);\n        this.syncField('checked', this.checked);\n    }\n\n    private syncField(field: string, value: boolean) {\n        const element = this.inputElementRef?.nativeElement;\n        if (!element) {\n            return;\n        }\n        this._renderer.setProperty(element, field, value);\n    }\n\n    // Required so that the template type checker can infer the type of the coerced inputs.\n    static ngAcceptInputType_checked: BooleanInput;\n    static ngAcceptInputType_disabled: BooleanInput;\n    static ngAcceptInputType_required: BooleanInput;\n    static ngAcceptInputType_grouped: BooleanInput;\n    static ngAcceptInputType_indeterminate: BooleanInput;\n\n}\n","<input #input\n       [id]=\"labelId\"\n       [disabled]=\"disabled\"\n       [checked]=\"checked\"\n       (change)=\"onChangeEvent($event)\"\n       (click)=\"onClickEvent($event)\"\n       (blur)=\"onTouched()\"\n       class=\"bbi-checkbox-input\"\n       type=\"checkbox\">\n<label [attr.for]=\"labelId\"\n       class=\"bbi-checkbox-label\">\n    <span class=\"bbi-checkbox-text\"><ng-content></ng-content></span>\n</label>\n","import {BbiCheckboxGroup} from './checkbox-group/checkbox-group.component';\nimport {BbiCheckbox} from './checkbox/checkbox.component';\nimport {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\n\n@NgModule({\n    imports: [CommonModule],\n    declarations: [BbiCheckbox, BbiCheckboxGroup],\n    exports: [BbiCheckbox, BbiCheckboxGroup]\n})\nexport class CheckboxModule {\n}\n","import {CheckboxModule} from './checkbox/checkbox.module';\nimport {NgModule} from '@angular/core';\n\n@NgModule({\n    imports: [CheckboxModule],\n    exports: [CheckboxModule]\n})\nexport class ControlsModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/bravobit-bb-foundation-elements.mjs

@@ -5,13 +5,14 @@ import { BehaviorSubject, fromEvent, merge, EMPTY, combineLatest, of, Subscripti
 import * as i1 from '@angular/common';
 import { formatDate, DatePipe, CommonModule } from '@angular/common';
 import * as i1$1 from '@bravobit/bb-foundation';
-import { mixinDisabled, mixinLoad, mixinGrouped, mixinFocused, mixinReadonly, mixinRequired, mixinError, mixinHideErrors, coerceBooleanProperty } from '@bravobit/bb-foundation';
+import { mixinDisabled, mixinLoad, mixinGrouped, mixinFocused, mixinReadonly, mixinRequired, mixinError, mixinHideErrors } from '@bravobit/bb-foundation';
 import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, Validators, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { map, mapTo, startWith, distinctUntilChanged, shareReplay, tap, delay } from 'rxjs/operators';
 import * as i4 from '@bravobit/bb-foundation/localize';
 import { LocalizeModule } from '@bravobit/bb-foundation/localize';
 import * as i2 from '@angular/platform-browser';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class BbDropdown {
     constructor(_elementRef) {