@ifsworld/granite-components 3.5.2 → 3.6.0

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

@@ -2753,6 +2753,7 @@
                         '[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)\"\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",
+                    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(.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:.0625rem 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:.0625rem 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:.0625rem 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:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;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)}}"]
                 },] }
     ];
@@ -2776,6 +2777,43 @@
         _inputElement: [{ type: core.ViewChild, args: ['input',] }]
     };
 
+    var GraniteRadioCheckboxBase = /** @class */ (function () {
+        function GraniteRadioCheckboxBase() {
+            this.layout = 'horizontal';
+            this.ariaLabelledby = null;
+        }
+        return GraniteRadioCheckboxBase;
+    }());
+    GraniteRadioCheckboxBase.decorators = [
+        { type: core.Directive }
+    ];
+    GraniteRadioCheckboxBase.propDecorators = {
+        layout: [{ type: core.Input }],
+        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }]
+    };
+
+    var GraniteRadioGroupComponent = /** @class */ (function (_super) {
+        __extends(GraniteRadioGroupComponent, _super);
+        function GraniteRadioGroupComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return GraniteRadioGroupComponent;
+    }(GraniteRadioCheckboxBase));
+    GraniteRadioGroupComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-radio-group',
+                    host: {
+                        class: 'granite-radio-group',
+                        '[attr.role]': '"radiogroup"',
+                        '[attr.aria-labelledby]': 'ariaLabelledby',
+                        '[class.granite-radio-group-layout-horizontal]': 'layout === "horizontal"',
+                    },
+                    template: "<ng-content></ng-content>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host(.granite-radio-group-layout-horizontal){display:flex;align-items:flex-start}"]
+                },] }
+    ];
+
     var GraniteRadioButtonModule = /** @class */ (function () {
         function GraniteRadioButtonModule() {
         }
@@ -2783,8 +2821,8 @@
     }());
     GraniteRadioButtonModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [GraniteRadioButtonComponent],
-                    exports: [GraniteRadioButtonComponent],
+                    declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
+                    exports: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
                 },] }
     ];
 
@@ -3498,6 +3536,7 @@
     exports.GraniteMenuTriggerForDirective = GraniteMenuTriggerForDirective;
     exports.GraniteRadioButtonComponent = GraniteRadioButtonComponent;
     exports.GraniteRadioButtonModule = GraniteRadioButtonModule;
+    exports.GraniteRadioGroupComponent = GraniteRadioGroupComponent;
     exports.GraniteTableColumnDirective = GraniteTableColumnDirective;
     exports.GraniteTableComponent = GraniteTableComponent;
     exports.GraniteTableModule = GraniteTableModule;
@@ -3513,11 +3552,12 @@
     exports.ɵa = GRANITE_MENU_PANEL;
     exports.ɵc = getEaseOutSteep;
     exports.ɵd = getEaseLinear;
-    exports.ɵe = GraniteTableDataCellComponent;
-    exports.ɵf = GraniteCell;
-    exports.ɵg = GraniteTableHeaderCellComponent;
-    exports.ɵh = PurePipesModule;
-    exports.ɵi = GraniteTitlePipe;
+    exports.ɵe = GraniteRadioCheckboxBase;
+    exports.ɵf = GraniteTableDataCellComponent;
+    exports.ɵg = GraniteCell;
+    exports.ɵh = GraniteTableHeaderCellComponent;
+    exports.ɵi = PurePipesModule;
+    exports.ɵj = GraniteTitlePipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });