@ifsworld/granite-components 3.0.0-beta.3 → 3.0.0-beta.4

package/bundles/ifsworld-granite-components.umd.js

@@ -2917,6 +2917,110 @@
                 },] }
     ];
 
+    var GraniteCheckboxComponent = /** @class */ (function () {
+        function GraniteCheckboxComponent(_focusMonitor) {
+            this._focusMonitor = _focusMonitor;
+            this.id = null;
+            this.checked = false;
+            this.disabled = false;
+            this.readonly = false;
+            this.labelPosition = 'after';
+            this.ariaLabel = null;
+            this.ariaLabelledby = null;
+            this.valueChange = new core.EventEmitter();
+            this.checkboxChange = new core.EventEmitter();
+            // eslint-disable-next-line @angular-eslint/no-output-native
+            this.blur = new core.EventEmitter();
+            this._positionBefore = false;
+            this._checkboxDisabled = false;
+            this._unchecked = false;
+        }
+        GraniteCheckboxComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.checked) {
+                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
+            }
+            if (changes.disabled) {
+                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
+            }
+            if (changes.readonly) {
+                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
+            }
+            if (changes.labelPosition != null) {
+                this._positionBefore =
+                    changes.labelPosition.currentValue != null &&
+                        changes.labelPosition.currentValue === 'before';
+            }
+            if ((changes.disabled || changes.readonly) &&
+                (this.disabled || this.readonly)) {
+                this._checkboxDisabled = true;
+            }
+        };
+        GraniteCheckboxComponent.prototype.focus = function (origin, options) {
+            if (origin === void 0) { origin = 'program'; }
+            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+        };
+        GraniteCheckboxComponent.prototype._onBlur = function () {
+            this.blur.emit();
+        };
+        GraniteCheckboxComponent.prototype._checkboxChange = function () {
+            this._unchecked = this.checked ? true : false;
+            this.checked = this._getInputElement().checked;
+            this.valueChange.emit(this.checked);
+        };
+        GraniteCheckboxComponent.prototype._checkboxClick = function () {
+            this.checkboxChange.emit();
+        };
+        GraniteCheckboxComponent.prototype._getInputElement = function () {
+            return this._inputElement.nativeElement;
+        };
+        return GraniteCheckboxComponent;
+    }());
+    GraniteCheckboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-checkbox',
+                    exportAs: 'graniteCheckbox',
+                    host: {
+                        class: 'granite-checkbox',
+                        '[class.granite-checkbox-checked]': 'checked',
+                        '[class.granite-checkbox-disabled]': 'disabled',
+                        '[class.granite-checkbox-readonly]': 'readonly',
+                        '[class.granite-checkbox-label-before]': '_positionBefore',
+                        '[class.granite-checkbox-unchecked]': '_unchecked',
+                    },
+                    template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"switch\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box:hover{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box:hover{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{-webkit-animation:fadeInAnimation .2s;animation:fadeInAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-unchecked) .granite-checkbox-box{-webkit-animation:fadeOutAnimation .2s;animation:fadeOutAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *,:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-tiny);padding-inline-end:var(--granite-spacing-tiny)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-checkbox-box{width:var(--granite-spacing-small);height:var(--granite-spacing-small);border:solid var(--granite-color-background-inactive);border-width:calc(var(--granite-spacing-micro) / 4);border-radius:var(--granite-spacing-micro);display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:calc(var(--granite-spacing-micro) / 4) solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:calc(var(--granite-spacing-tiny) + (var(--granite-spacing-micro) / 4));height:calc(var(--granite-spacing-micro) + (var(--granite-spacing-micro) / 4));background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-micro);border-left-width:calc(var(--granite-spacing-micro) / 2);border-bottom-width:calc(var(--granite-spacing-micro) / 2);border-right-width:0;border-top-width:0}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-tiny);padding-inline-start:var(--granite-spacing-tiny)}.granite-checkbox-text:empty{display:none}@-webkit-keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}"]
+                },] }
+    ];
+    GraniteCheckboxComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor }
+    ]; };
+    GraniteCheckboxComponent.propDecorators = {
+        id: [{ type: core.Input }],
+        checked: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        labelPosition: [{ type: core.Input }],
+        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
+        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
+        valueChange: [{ type: core.Output }],
+        checkboxChange: [{ type: core.Output }],
+        blur: [{ type: core.Output }],
+        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
+    };
+
+    var GraniteCheckboxModule = /** @class */ (function () {
+        function GraniteCheckboxModule() {
+        }
+        return GraniteCheckboxModule;
+    }());
+    GraniteCheckboxModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [GraniteCheckboxComponent],
+                    exports: [GraniteCheckboxComponent],
+                },] }
+    ];
+
     var ɵ0 = deviceDesktop.output;
     /**
      * Directive used to tell components and their sub components that client output
@@ -3051,6 +3155,8 @@
     exports.GraniteBadgeModule = GraniteBadgeModule;
     exports.GraniteButtonComponent = GraniteButtonComponent;
     exports.GraniteButtonModule = GraniteButtonModule;
+    exports.GraniteCheckboxComponent = GraniteCheckboxComponent;
+    exports.GraniteCheckboxModule = GraniteCheckboxModule;
     exports.GraniteCoreModule = GraniteCoreModule;
     exports.GraniteDividerDirective = GraniteDividerDirective;
     exports.GraniteGridComponent = GraniteGridComponent;