@softheon/armature 10.40.0 → 10.40.2

package/bundles/softheon-armature.umd.js

@@ -4682,6 +4682,8 @@
             this.buttonData = {};
             /** The tooltip data */
             this.tooltipData = {};
+            /** The layout align input for styling */
+            this.layoutAlign = {};
             /** Emits toggle change event */
             this.toggleChange = new i0.EventEmitter();
             /** The toggle value */
@@ -4707,21 +4709,17 @@
         /** Component on init lifecycle method */
         SofButtonToggleGroupComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             // Set default tooltip values
             this.tooltipData.position = (_a = this.tooltipData.position) !== null && _a !== void 0 ? _a : 'right';
             this.tooltipData.color = (_b = this.tooltipData.color) !== null && _b !== void 0 ? _b : 'primary';
+            // Set default layout aligns
+            this.layoutAlign.label = (_c = this.layoutAlign.label) !== null && _c !== void 0 ? _c : 'start center';
+            this.layoutAlign.toggle = (_d = this.layoutAlign.toggle) !== null && _d !== void 0 ? _d : 'start center';
+            this.setIsRequired();
             // Subscribe to form control's validation
-            this.subscription.add((_e = (_d = (_c = this.control) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.valueChanges) === null || _e === void 0 ? void 0 : _e.subscribe(function () {
-                var controlValidator = _this.control.control.validator;
-                //  Set the required state false when no control validator function is provided
-                if (!controlValidator) {
-                    _this.isRequired = false;
-                    return;
-                }
-                //  Set the required state of the validator
-                var validator = controlValidator({}) || {};
-                _this.isRequired = validator && validator.required;
+            this.subscription.add((_g = (_f = (_e = this.control) === null || _e === void 0 ? void 0 : _e.control) === null || _f === void 0 ? void 0 : _f.valueChanges) === null || _g === void 0 ? void 0 : _g.subscribe(function () {
+                _this.setIsRequired();
             }));
         };
         /** Component on destroy lifecycle method */
@@ -4768,12 +4766,28 @@
         SofButtonToggleGroupComponent.prototype.setDisabledState = function (isDisabled) {
             this.isDisabled = isDisabled;
         };
+        /** Updates the isRequired field based on the control */
+        SofButtonToggleGroupComponent.prototype.setIsRequired = function () {
+            var _a;
+            // Only update if a control is available
+            if ((_a = this.control) === null || _a === void 0 ? void 0 : _a.control) {
+                var controlValidator = this.control.control.validator;
+                //  Set the required state false when no control validator function is provided
+                if (!controlValidator) {
+                    this.isRequired = false;
+                    return;
+                }
+                //  Set the required state of the validator
+                var validator = controlValidator({}) || {};
+                this.isRequired = validator && validator.required;
+            }
+        };
         return SofButtonToggleGroupComponent;
     }());
     SofButtonToggleGroupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-button-toggle-group',
-                    template: "<p fxLayoutAlign=\"start center\">\r\n    <span [class]=\"labelClass\">{{ labelText | translate }} {{ isRequired ? '*' : '' }}</span>\r\n    <mat-icon p-l-5 *ngIf=\"tooltipData.text\" [matTooltip]=\"tooltipData.text | translate\" matTooltipPosition=\"{{tooltipData.position}}\" color=\"{{tooltipData.color}}\">\r\n        <i class=\"fa-regular fa-circle-info info-icon\"></i>\r\n    </mat-icon>\r\n</p>\r\n<div fxLayout=\"row wrap\">\r\n    <mat-button-toggle-group #group=\"matButtonToggleGroup\" name=\"{{controlName}}\" class=\"sof-toggle-group\" [value]=\"value\" [disabled]=\"isDisabled\" (click)=\"valueSelected(group.value)\" ngDefaultControl>\r\n        <mat-button-toggle id=\"left-toggle-{{controlName}}\" *ngIf=\"buttonData.left\" class=\"toggle-left\" [value]=\"buttonData.left.value\" [disableRipple]=\"true\">\r\n        {{ buttonData.left.text | translate}}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle id=\"middle-toggle-{{controlName}}\" *ngIf=\"buttonData.middle\" class=\"toggle-middle\" [value]=\"buttonData.middle.value\" [disableRipple]=\"true\">\r\n            {{ buttonData.middle.text| translate}}\r\n            </mat-button-toggle>\r\n        <mat-button-toggle id=\"right-toggle-{{controlName}}\" *ngIf=\"buttonData.right\" class=\"toggle-right\" [value]=\"buttonData.right.value\" [disableRipple]=\"true\">\r\n        {{ buttonData.right.text | translate}}\r\n        </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n</div>",
+                    template: "<p fxLayoutAlign=\"{{layoutAlign.label}}\">\r\n    <span [class]=\"labelClass\" [innerHtml]=\"(labelText | translate) + (isRequired ? ' *' : '')\"></span>\r\n    <mat-icon p-l-5 *ngIf=\"tooltipData.text\" [matTooltip]=\"tooltipData.text | translate\" matTooltipPosition=\"{{tooltipData.position}}\" color=\"{{tooltipData.color}}\">\r\n        <i class=\"fa-regular fa-circle-info info-icon\"></i>\r\n    </mat-icon>\r\n</p>\r\n<div fxLayout=\"row wrap\" fxLayoutAlign=\"{{layoutAlign.toggle}}\">\r\n    <mat-button-toggle-group #group=\"matButtonToggleGroup\" name=\"{{controlName}}\" class=\"sof-toggle-group\" [value]=\"value\" [disabled]=\"isDisabled\" (click)=\"valueSelected(group.value)\" ngDefaultControl>\r\n        <mat-button-toggle id=\"left-toggle-{{controlName}}\" *ngIf=\"buttonData.left\" class=\"toggle-left\" [value]=\"buttonData.left.value\" [disableRipple]=\"true\">\r\n        {{ buttonData.left.text | translate}}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle id=\"middle-toggle-{{controlName}}\" *ngIf=\"buttonData.middle\" class=\"toggle-middle\" [value]=\"buttonData.middle.value\" [disableRipple]=\"true\">\r\n            {{ buttonData.middle.text| translate}}\r\n            </mat-button-toggle>\r\n        <mat-button-toggle id=\"right-toggle-{{controlName}}\" *ngIf=\"buttonData.right\" class=\"toggle-right\" [value]=\"buttonData.right.value\" [disableRipple]=\"true\">\r\n        {{ buttonData.right.text | translate}}\r\n        </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n</div>",
                     styles: [""]
                 },] }
     ];
@@ -4786,6 +4800,7 @@
         isRequired: [{ type: i0.Input }],
         buttonData: [{ type: i0.Input }],
         tooltipData: [{ type: i0.Input }],
+        layoutAlign: [{ type: i0.Input }],
         toggleChange: [{ type: i0.Output }]
     };