@klippa/ngx-enhancy-forms 12.0.0 → 12.1.0

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -1840,6 +1840,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
+var Orientation;
+(function (Orientation) {
+    Orientation["COLUMN"] = "column";
+    Orientation["ROW"] = "row";
+})(Orientation || (Orientation = {}));
+class RadioComponent extends ValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.orientation = Orientation.ROW;
+        this.variant = 'classic';
+    }
+}
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [class]=\"orientation\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t</div>\n\t\t\t<div>{{option.name}}</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.column{flex-direction:column}.componentContainer.column .optionContainer{margin-bottom:.3125rem}.componentContainer.column .optionContainer:last-child{margin-bottom:0}.componentContainer.row{flex-direction:row}.componentContainer.row .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.row .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{display:flex;flex-direction:row;margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [class]=\"orientation\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t</div>\n\t\t\t<div>{{option.name}}</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.column{flex-direction:column}.componentContainer.column .optionContainer{margin-bottom:.3125rem}.componentContainer.column .optionContainer:last-child{margin-bottom:0}.componentContainer.row{flex-direction:row}.componentContainer.row .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.row .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{display:flex;flex-direction:row;margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
 class NgxEnhancyFormsModule {
 }
 NgxEnhancyFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1867,7 +1892,8 @@ NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FormSubmitButtonComponent,
         FormComponent,
         SubFormDirective,
-        HourMinuteInputComponent], imports: [CommonModule,
+        HourMinuteInputComponent,
+        RadioComponent], imports: [CommonModule,
         FormsModule,
         NgSelectModule,
         SortablejsModule,
@@ -1895,7 +1921,8 @@ NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FormSubmitButtonComponent,
         FormComponent,
         SubFormDirective,
-        HourMinuteInputComponent] });
+        HourMinuteInputComponent,
+        RadioComponent] });
 NgxEnhancyFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, imports: [CommonModule,
         FormsModule,
         NgSelectModule,
@@ -1936,7 +1963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         FormSubmitButtonComponent,
                         FormComponent,
                         SubFormDirective,
-                        HourMinuteInputComponent
+                        HourMinuteInputComponent,
+                        RadioComponent
                     ],
                     exports: [
                         ValueAccessorBase,
@@ -1963,7 +1991,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         FormSubmitButtonComponent,
                         FormComponent,
                         SubFormDirective,
-                        HourMinuteInputComponent
+                        HourMinuteInputComponent,
+                        RadioComponent
                     ]
                 }]
         }] });
@@ -1976,5 +2005,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, HourMinuteInputComponent, KLP_DATE_FORMATS, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, PasswordFieldComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, HourMinuteInputComponent, KLP_DATE_FORMATS, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
 //# sourceMappingURL=klippa-ngx-enhancy-forms.mjs.map