@kms-ngx-ui/presentational 20.5.0 → 20.8.0

package/fesm2022/kms-ngx-ui-presentational.mjs

@@ -1445,7 +1445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class CheckboxComponent {
     constructor() {
         this.infoText = '';
-        this.disabled = false;
+        this._disabled = false;
         /**
          * Internal description name. All checkboxes with the same name belong to the same group.
          * User can select none, one or all checkboxes with the same name.
@@ -1462,6 +1462,13 @@ class CheckboxComponent {
     get checked() {
         return this.innerControl.value ?? false;
     }
+    set disabled(value) {
+        this._disabled = value;
+        this.setDisabledState(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
     valueChanged(value) {
         this.onChange(value);
         this.innerControl.setValue(value, { emitEvent: false });
@@ -2269,6 +2276,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'kms-button', standalone: false, template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\n    'kms-button--basic-primary': color() === StylingTheme.PRIMARY,\n    'kms-button--basic-accent': color() === StylingTheme.SECONDARY,\n    'kms-button--basic-warn': color() === StylingTheme.WARN,\n    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\n    'kms-button--flat-primary': color() === StylingTheme.PRIMARY,\n    'kms-button--flat-accent': color() === StylingTheme.SECONDARY,\n    'kms-button--flat-warn': color() === StylingTheme.WARN,\n    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\n    'kms-button--raised-primary': color() === StylingTheme.PRIMARY,\n    'kms-button--raised-accent': color() === StylingTheme.SECONDARY,\n    'kms-button--raised-warn': color() === StylingTheme.WARN,\n    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if (loading()) {\n  <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n  } @if (icon()) {\n  <kms-icon\n    class=\"kms-button__icon\"\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n</ng-template>\n" }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
+class ButtonToggleGroupComponent {
+    constructor() {
+        this.options = [];
+        this.disabled = false;
+        this.rounded = false;
+        this.value = null;
+        this.ButtonAppearance = ButtonAppearance;
+        this.StylingTheme = StylingTheme;
+        this.onChange = (value) => {
+            this.value = value;
+        };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    select(option) {
+        if (this.disabled || option.Disabled)
+            return;
+        this.value = option.Value;
+        this.onChange(option.Value);
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonToggleGroupComponent, isStandalone: false, selector: "kms-button-toggle-group", inputs: { options: "options", disabled: "disabled", rounded: "rounded", value: "value" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ButtonToggleGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"kms-button-toggle-group\"\n  [class.kms-button-toggle-group--disabled]=\"disabled\"\n  [class.kms-button-toggle-group--rounded]=\"rounded\"\n>\n  @for (option of options; track option.Value) {\n    <kms-button\n      class=\"kms-button-toggle-group__item\"\n      [class.kms-button-toggle-group__item--active]=\"value === option.Value\"\n      [appearance]=\"ButtonAppearance.BASIC\"\n      [color]=\"StylingTheme.SECONDARY\"\n      [label]=\"option.Text\"\n      [icon]=\"option.Icon\"\n      [disabled]=\"disabled || option.Disabled\"\n      (buttonClick)=\"select(option)\"\n    ></kms-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "kms-button", inputs: ["color", "type", "appearance", "loading", "label", "icon", "disabled", "rounded"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonToggleGroupComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'kms-button-toggle-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ButtonToggleGroupComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"kms-button-toggle-group\"\n  [class.kms-button-toggle-group--disabled]=\"disabled\"\n  [class.kms-button-toggle-group--rounded]=\"rounded\"\n>\n  @for (option of options; track option.Value) {\n    <kms-button\n      class=\"kms-button-toggle-group__item\"\n      [class.kms-button-toggle-group__item--active]=\"value === option.Value\"\n      [appearance]=\"ButtonAppearance.BASIC\"\n      [color]=\"StylingTheme.SECONDARY\"\n      [label]=\"option.Text\"\n      [icon]=\"option.Icon\"\n      [disabled]=\"disabled || option.Disabled\"\n      (buttonClick)=\"select(option)\"\n    ></kms-button>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 class TooltipIconComponent {
     constructor() {
         this.tooltipText = input('', ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
@@ -5157,6 +5221,7 @@ class KmsUiPresentationalModule {
             SliderComponent,
             CardComponent,
             ButtonComponent,
+            ButtonToggleGroupComponent,
             NumericInputComponent,
             GenericFormComponent,
             FormSectionComponent,
@@ -5222,6 +5287,7 @@ class KmsUiPresentationalModule {
             SliderComponent,
             CardComponent,
             ButtonComponent,
+            ButtonToggleGroupComponent,
             NumericInputComponent,
             GenericFormComponent,
             FormSectionComponent,
@@ -5291,6 +5357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SliderComponent,
                         CardComponent,
                         ButtonComponent,
+                        ButtonToggleGroupComponent,
                         NumericInputComponent,
                         GenericFormComponent,
                         FormSectionComponent,
@@ -5362,6 +5429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SliderComponent,
                         CardComponent,
                         ButtonComponent,
+                        ButtonToggleGroupComponent,
                         NumericInputComponent,
                         GenericFormComponent,
                         FormSectionComponent,
@@ -5460,5 +5528,5 @@ var FormLayout;
  * Generated bundle index. Do not edit.
  */
 
-export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, ImageUploadComponent, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsTabContentDirective, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TabGroupComponent, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
+export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, ButtonToggleGroupComponent, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, ImageUploadComponent, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsTabContentDirective, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TabGroupComponent, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map