@ifsworld/granite-components 4.2.0 → 4.3.0

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

@@ -2855,11 +2855,11 @@
                         class: 'granite-radio-group',
                         '[attr.role]': '"radiogroup"',
                         '[attr.aria-labelledby]': 'ariaLabelledby',
-                        '[class.granite-radio-group-layout-horizontal]': 'layout === "horizontal"',
+                        '[class.granite-radio-checkbox-base-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}"]
+                    styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
                 },] }
     ];
 
@@ -2943,7 +2943,7 @@
                     },
                     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=\"checkbox\"\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-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{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(:not(.granite-checkbox-checked)) .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-s);padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.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}}"]
+                    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-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{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(:not(.granite-checkbox-checked)) .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-s);padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-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)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.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 [
@@ -2963,6 +2963,28 @@
         _inputElement: [{ type: core.ViewChild, args: ['input',] }]
     };
 
+    var GraniteCheckboxGroupComponent = /** @class */ (function (_super) {
+        __extends(GraniteCheckboxGroupComponent, _super);
+        function GraniteCheckboxGroupComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return GraniteCheckboxGroupComponent;
+    }(GraniteRadioCheckboxBase));
+    GraniteCheckboxGroupComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-checkbox-group',
+                    host: {
+                        class: 'granite-checkbox-group',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-labelledby]': 'ariaLabelledby',
+                        '[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
+                    },
+                    template: "<ng-content></ng-content>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}"]
+                },] }
+    ];
+
     var GraniteCheckboxModule = /** @class */ (function () {
         function GraniteCheckboxModule() {
         }
@@ -2970,8 +2992,8 @@
     }());
     GraniteCheckboxModule.decorators = [
         { type: core.NgModule, args: [{
-                    declarations: [GraniteCheckboxComponent],
-                    exports: [GraniteCheckboxComponent],
+                    declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
+                    exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
                 },] }
     ];
 
@@ -3576,6 +3598,7 @@
     exports.GraniteButtonComponent = GraniteButtonComponent;
     exports.GraniteButtonModule = GraniteButtonModule;
     exports.GraniteCheckboxComponent = GraniteCheckboxComponent;
+    exports.GraniteCheckboxGroupComponent = GraniteCheckboxGroupComponent;
     exports.GraniteCheckboxModule = GraniteCheckboxModule;
     exports.GraniteCoreModule = GraniteCoreModule;
     exports.GraniteDividerDirective = GraniteDividerDirective;