UNPKG

@koalarx/ui

Version:

Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.

1 lines 5.23 kB
{"version":3,"file":"koalarx-ui-shared-components-input-field-switcher.mjs","sources":["../../projects/koala-ui/shared/components/input-field/switcher/switcher.ts","../../projects/koala-ui/shared/components/input-field/switcher/switcher.html","../../projects/koala-ui/shared/components/input-field/switcher/koalarx-ui-shared-components-input-field-switcher.ts"],"sourcesContent":["import { Component, effect, ElementRef, input, viewChild } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\n\nexport type SwitcherColor =\n | 'neutral'\n | 'primary'\n | 'secondary'\n | 'accent'\n | 'info'\n | 'success'\n | 'warning'\n | 'error'\n | 'ghost';\n\nexport type SwitcherSize =\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n\n@Component({\n selector: 'kl-switcher',\n templateUrl: './switcher.html',\n imports: [ReactiveFormsModule],\n})\nexport class Switcher extends InputFieldBase {\n private readonly switcherElement =\n viewChild<ElementRef<HTMLInputElement>>('inputSwitcher');\n\n color = input<SwitcherColor>();\n size = input<SwitcherSize>();\n\n private getColorClass(): string {\n switch (this.color()) {\n case 'neutral':\n return 'toggle-neutral';\n case 'primary':\n return 'toggle-primary';\n case 'secondary':\n return 'toggle-secondary';\n case 'accent':\n return 'toggle-accent';\n case 'info':\n return 'toggle-info';\n case 'success':\n return 'toggle-success';\n case 'warning':\n return 'toggle-warning';\n case 'error':\n return 'toggle-error';\n case 'ghost':\n return 'toggle-ghost';\n default:\n return 'toggle';\n }\n }\n\n private getSizeClass(): string {\n switch (this.size()) {\n case 'extraSmall':\n return 'toggle-xs';\n case 'small':\n return 'toggle-sm';\n case 'medium':\n return 'toggle-md';\n case 'large':\n return 'toggle-lg';\n case 'extraLarge':\n return 'toggle-xl';\n default:\n return 'toggle';\n }\n }\n\n constructor() {\n super();\n\n effect(() => {\n const input = this.switcherElement()?.nativeElement;\n\n if (input) {\n input.classList.add(this.getColorClass());\n }\n });\n\n effect(() => {\n const input = this.switcherElement()?.nativeElement;\n\n if (input) {\n input.classList.add(this.getSizeClass());\n }\n });\n }\n\n toggle(event: Event) {\n const target = event.target as HTMLInputElement;\n this.control().setValue(target.checked);\n }\n}\n","<input #inputSwitcher\n type=\"checkbox\"\n class=\"toggle\"\n [checked]=\"control().value\"\n [disabled]=\"disabled()\"\n (change)=\"toggle($event)\"\n/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}