@indice/ng-components 0.2.167-beta.35 → 0.2.167-beta.37

package/fesm2020/indice-ng-components.mjs

@@ -2396,6 +2396,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }] } });
 
+class ToggleButtonComponent {
+    constructor() {
+        this.value = false;
+        this.disabled = false;
+        this.icon = true;
+        this.valueChange = new EventEmitter();
+        this.onChange$ = undefined;
+        this.onTouched$ = undefined;
+    }
+    ngOnInit() {
+    }
+    writeValue(obj) {
+        if (obj) {
+            this.value = obj || false;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange$ = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched$ = fn;
+    }
+    onBlur(event) {
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+    changeValue() {
+        this.value = !this.value;
+        this.valueChange.emit(this.value);
+        if (this.onChange$) {
+            this.onChange$(this.value);
+        }
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+}
+ToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: { value: "value", disabled: "disabled", icon: "icon", text: "text", textTrue: ["text-true", "textTrue"], textFalse: ["text-false", "textFalse"], description: "description", descriptionTrue: ["description-true", "descriptionTrue"], descriptionFalse: ["description-false", "descriptionFalse"] }, outputs: { valueChange: "valueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ToggleButtonComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\n<div class=\"flex items-center\">\n<button type=\"button\"\n    (click)=\"changeValue()\"\n    [disabled]=\"disabled\"\n    class=\"toggle-button-button\" \n    [class.toggle-button-bg-false] = \"!value\"\n    [class.toggle-button-bg-true] = \"value\"\n    [class.toggle-button-button-disabled]=\"disabled\"\n    role=\"switch\" \n    aria-checked=\"false\">\n    <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\n    <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\n    <span \n        class=\"toggle-button-icon-container\"\n        [class.toggle-button-icon-container-false] = \"!value\"\n        [class.toggle-button-icon-container-true] = \"value\">\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"value\"\n            [class.toggle-button-container-inner-false]=\"!value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\n                <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n        </span>\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"!value\"\n            [class.toggle-button-container-inner-false]=\"value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\n                <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\n            </svg>\n        </span>\n    </span>\n</button>\n<span class=\"ml-3\" id=\"toggle-button-labels\">\n    <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\n    <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\n    <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\n    <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\n</span>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toggle-button', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleButtonComponent),
+                            multi: true
+                        }
+                    ], template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\n<div class=\"flex items-center\">\n<button type=\"button\"\n    (click)=\"changeValue()\"\n    [disabled]=\"disabled\"\n    class=\"toggle-button-button\" \n    [class.toggle-button-bg-false] = \"!value\"\n    [class.toggle-button-bg-true] = \"value\"\n    [class.toggle-button-button-disabled]=\"disabled\"\n    role=\"switch\" \n    aria-checked=\"false\">\n    <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\n    <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\n    <span \n        class=\"toggle-button-icon-container\"\n        [class.toggle-button-icon-container-false] = \"!value\"\n        [class.toggle-button-icon-container-true] = \"value\">\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"value\"\n            [class.toggle-button-container-inner-false]=\"!value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\n                <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n        </span>\n        <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n        <span \n            [class.toggle-button-container-inner-true]=\"!value\"\n            [class.toggle-button-container-inner-false]=\"value\"\n            class=\"toggle-button-icon-container-inner\"\n            aria-hidden=\"true\">\n            <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\n                <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\n            </svg>\n        </span>\n    </span>\n</button>\n<span class=\"ml-3\" id=\"toggle-button-labels\">\n    <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\n    <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\n    <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\n    <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\n</span>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input,
+                args: ['text']
+            }], textTrue: [{
+                type: Input,
+                args: ['text-true']
+            }], textFalse: [{
+                type: Input,
+                args: ['text-false']
+            }], description: [{
+                type: Input,
+                args: ['description']
+            }], descriptionTrue: [{
+                type: Input,
+                args: ['description-true']
+            }], descriptionFalse: [{
+                type: Input,
+                args: ['description-false']
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class DynamicComponentHostDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -4381,7 +4464,8 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ToggleComponent,
         UnauthorizedComponent,
         UserProfileMenuComponent,
-        ViewLayoutComponent], imports: [CommonModule,
+        ViewLayoutComponent,
+        ToggleButtonComponent], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
         FormsModule], exports: [AddressPipe,
@@ -4424,7 +4508,8 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ToasterContainerComponent,
         ToggleComponent,
         UnauthorizedComponent,
-        ViewLayoutComponent] });
+        ViewLayoutComponent,
+        ToggleButtonComponent] });
 IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
@@ -4483,7 +4568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         ToggleComponent,
                         UnauthorizedComponent,
                         UserProfileMenuComponent,
-                        ViewLayoutComponent
+                        ViewLayoutComponent,
+                        ToggleButtonComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4532,7 +4618,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         ToasterContainerComponent,
                         ToggleComponent,
                         UnauthorizedComponent,
-                        ViewLayoutComponent
+                        ViewLayoutComponent,
+                        ToggleButtonComponent
                     ]
                 }]
         }] });
@@ -4543,5 +4630,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map