@ifsworld/granite-components 3.0.0 → 3.1.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform')) :
-    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform));
-}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/cdk/collections')) :
+    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/cdk/collections'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform, global.ng.cdk.collections));
+}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform, collections) { 'use strict';
 
     var GraniteArrangeGridItemComponent = /** @class */ (function () {
         function GraniteArrangeGridItemComponent(element) {
@@ -2659,6 +2659,126 @@
                 },] }
     ];
 
+    var GraniteRadioButtonComponent = /** @class */ (function () {
+        function GraniteRadioButtonComponent(_focusMonitor, _radioDispatcher) {
+            var _this = this;
+            this._focusMonitor = _focusMonitor;
+            this._radioDispatcher = _radioDispatcher;
+            this.id = null;
+            this.checked = false;
+            this.required = false;
+            this.disabled = false;
+            this.readonly = false;
+            this.labelPosition = 'after';
+            this.ariaLabel = null;
+            this.ariaLabelledby = null;
+            this.radioChange = new core.EventEmitter();
+            this.radioBlur = new core.EventEmitter();
+            this._positionBefore = false;
+            this._radioDisabled = false;
+            this._removeUniqueSelectionListener = function () {
+                // Function used to deregister listener
+            };
+            this._removeUniqueSelectionListener = _radioDispatcher.listen(function (id, name) {
+                if (id !== _this.id && name === _this.name) {
+                    _this.checked = false;
+                }
+            });
+        }
+        GraniteRadioButtonComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.checked) {
+                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
+            }
+            if (changes.required) {
+                this.required = coercion.coerceBooleanProperty(changes.required.currentValue);
+            }
+            if (changes.readonly) {
+                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
+            }
+            if (changes.disabled) {
+                this.disabled = coercion.coerceBooleanProperty(changes.disabled.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._radioDisabled = true;
+            }
+        };
+        GraniteRadioButtonComponent.prototype.ngOnDestroy = function () {
+            this._removeUniqueSelectionListener();
+        };
+        // Focuses the radio button.
+        GraniteRadioButtonComponent.prototype.focus = function (origin, options) {
+            if (origin === void 0) { origin = 'program'; }
+            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+        };
+        GraniteRadioButtonComponent.prototype._radioClick = function (targetValue) {
+            this.radioChange.emit(targetValue);
+        };
+        GraniteRadioButtonComponent.prototype._radioChange = function () {
+            this.checked = this._getInputElement().checked;
+            // Notify all radio buttons with the same name to un-check
+            this._radioDispatcher.notify(this.id, this.name);
+        };
+        GraniteRadioButtonComponent.prototype._onBlur = function () {
+            this.radioBlur.emit();
+        };
+        GraniteRadioButtonComponent.prototype._getInputElement = function () {
+            return this._inputElement.nativeElement;
+        };
+        return GraniteRadioButtonComponent;
+    }());
+    GraniteRadioButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-radio-button',
+                    exportAs: 'graniteRadioButton',
+                    host: {
+                        class: 'granite-radio-button',
+                        '[class.granite-radio-button-disabled]': 'disabled',
+                        '[class.granite-radio-button-label-before]': '_positionBefore',
+                        '[class.granite-radio-button-checked]': 'checked',
+                        '[class.granite-radio-button-readonly]': 'readonly',
+                    },
+                    template: "<label class=\"granite-radio-button-label\">\n  <div class=\"granite-radio-button-outer-circle\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-radio-button-input cdk-visually-hidden\"\n      type=\"radio\"\n      [attr.name]=\"name\"\n      [disabled]=\"_radioDisabled\"\n      [checked]=\"checked\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [value]=\"value\"\n      (click)=\"_radioClick($event.target.value)\"\n      (change)=\"_radioChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-radio-button-inner-circle\"></div>\n  </div>\n  <span class=\"granite-radio-button-text\">\n    <ng-content></ng-content>\n  </span>\n</label>\n",
+                    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(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:1px solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;-webkit-animation:growAnimation .1s;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:1px solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:1px solid var(--granite-color-text)}.granite-radio-button-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-margin-end:var(--granite-spacing-xl);margin-inline-end:var(--granite-spacing-xl)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:var(--granite-spacing-m);width:var(--granite-spacing-m);border-radius:50%;box-sizing:border-box;border:1px solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:calc(var(--granite-spacing-s) * 1.25);height:calc(var(--granite-spacing-s) * 1.25);visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@-webkit-keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}"]
+                },] }
+    ];
+    GraniteRadioButtonComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor },
+        { type: collections.UniqueSelectionDispatcher }
+    ]; };
+    GraniteRadioButtonComponent.propDecorators = {
+        value: [{ type: core.Input }],
+        id: [{ type: core.Input }],
+        name: [{ type: core.Input }],
+        checked: [{ type: core.Input }],
+        required: [{ 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',] }],
+        radioChange: [{ type: core.Output }],
+        radioBlur: [{ type: core.Output }],
+        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
+    };
+
+    var GraniteRadioButtonModule = /** @class */ (function () {
+        function GraniteRadioButtonModule() {
+        }
+        return GraniteRadioButtonModule;
+    }());
+    GraniteRadioButtonModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [GraniteRadioButtonComponent],
+                    exports: [GraniteRadioButtonComponent],
+                },] }
+    ];
+
     var disabledMixin = function (Base) {
         if (Base === void 0) { Base = /** @class */ (function () {
             function class_1() {
@@ -2954,6 +3074,8 @@
     exports.GraniteMenuTouchCloseComponent = GraniteMenuTouchCloseComponent;
     exports.GraniteMenuTouchTitleItemComponent = GraniteMenuTouchTitleItemComponent;
     exports.GraniteMenuTriggerForDirective = GraniteMenuTriggerForDirective;
+    exports.GraniteRadioButtonComponent = GraniteRadioButtonComponent;
+    exports.GraniteRadioButtonModule = GraniteRadioButtonModule;
     exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
     exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
     exports._MenuBaseComponent = _MenuBaseComponent;