@libs-ui/components-switch 0.2.356-9 → 0.2.357-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,33 +1,30 @@
|
|
|
1
1
|
# @libs-ui/components-switch
|
|
2
2
|
|
|
3
|
-
> Component chuyển đổi trạng thái
|
|
3
|
+
> Component chuyển đổi trạng thái Bật/Tắt (Toggle Switch) với hỗ trợ two-way binding Signal và xử lý async kèm cơ chế revert.
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsSwitchComponent` là một standalone Angular component cung cấp giao diện Switch Button. Component hỗ trợ 2 kích thước, trạng thái
|
|
7
|
+
`LibsUiComponentsSwitchComponent` là một standalone Angular component cung cấp giao diện Switch Button (Toggle). Component hỗ trợ 2 kích thước (`default` và `large`), trạng thái disabled, và sử dụng Signal Model cho two-way binding. Khi toggle, component tự động cập nhật state trước khi emit event, đồng thời cung cấp hàm `revert()` để hoàn tác nếu cần (ví dụ: API call thất bại).
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
10
|
|
|
11
|
-
- ✅
|
|
12
|
-
- ✅
|
|
13
|
-
- ✅
|
|
14
|
-
- ✅ Event output
|
|
15
|
-
- ✅
|
|
11
|
+
- ✅ Two-way binding với Angular Signal Model (`[(active)]`)
|
|
12
|
+
- ✅ 2 kích thước: `default` và `large`
|
|
13
|
+
- ✅ Trạng thái disabled (vô hiệu hóa tương tác)
|
|
14
|
+
- ✅ Event output `(outSwitch)` kèm hàm `revert()` để hoàn tác state
|
|
15
|
+
- ✅ Hỗ trợ xử lý async (chờ API response rồi quyết định giữ hay revert)
|
|
16
|
+
- ✅ Standalone component với `ChangeDetectionStrategy.OnPush`
|
|
16
17
|
|
|
17
18
|
## Khi nào sử dụng
|
|
18
19
|
|
|
19
|
-
- Khi người dùng cần
|
|
20
|
-
- Thay thế cho Checkbox
|
|
21
|
-
-
|
|
20
|
+
- Khi người dùng cần bật/tắt một tính năng và hành động có hiệu lực ngay lập tức.
|
|
21
|
+
- Thay thế cho Checkbox trong các màn hình cài đặt hệ thống, quản lý cấu hình.
|
|
22
|
+
- Khi cần xác nhận toggle qua API trước khi chính thức cập nhật state (dùng `revert()` nếu API lỗi).
|
|
22
23
|
|
|
23
24
|
## Cài đặt
|
|
24
25
|
|
|
25
26
|
```bash
|
|
26
|
-
# npm
|
|
27
27
|
npm install @libs-ui/components-switch
|
|
28
|
-
|
|
29
|
-
# yarn
|
|
30
|
-
yarn add @libs-ui/components-switch
|
|
31
28
|
```
|
|
32
29
|
|
|
33
30
|
## Import
|
|
@@ -40,87 +37,209 @@ import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
|
40
37
|
imports: [LibsUiComponentsSwitchComponent],
|
|
41
38
|
// ...
|
|
42
39
|
})
|
|
43
|
-
export class
|
|
40
|
+
export class MyComponent {}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Nếu cần dùng interface trong TypeScript:
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
import { LibsUiComponentsSwitchComponent, ISwitchEvent } from '@libs-ui/components-switch';
|
|
44
47
|
```
|
|
45
48
|
|
|
46
|
-
## Ví dụ
|
|
49
|
+
## Ví dụ sử dụng
|
|
47
50
|
|
|
48
|
-
### Basic
|
|
51
|
+
### 1. Basic — Two-way binding cơ bản
|
|
49
52
|
|
|
50
53
|
```html
|
|
51
|
-
|
|
54
|
+
<!-- template.html -->
|
|
55
|
+
<div class="flex items-center gap-3">
|
|
56
|
+
<libs_ui-components-switch [(active)]="isActive" />
|
|
57
|
+
<span class="text-sm text-gray-700">
|
|
58
|
+
Status: {{ isActive() ? 'ON' : 'OFF' }}
|
|
59
|
+
</span>
|
|
60
|
+
</div>
|
|
52
61
|
```
|
|
53
62
|
|
|
54
|
-
|
|
63
|
+
```typescript
|
|
64
|
+
// component.ts
|
|
65
|
+
import { Component, signal } from '@angular/core';
|
|
66
|
+
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
55
67
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
[
|
|
68
|
+
@Component({
|
|
69
|
+
standalone: true,
|
|
70
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
71
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
72
|
+
templateUrl: './my.component.html',
|
|
73
|
+
})
|
|
74
|
+
export class MyComponent {
|
|
75
|
+
protected isActive = signal(false);
|
|
76
|
+
}
|
|
60
77
|
```
|
|
61
78
|
|
|
62
|
-
###
|
|
79
|
+
### 2. Sizes — Kích thước Default và Large
|
|
63
80
|
|
|
64
81
|
```html
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
82
|
+
<!-- template.html -->
|
|
83
|
+
<div class="flex items-end gap-8">
|
|
84
|
+
<div class="flex flex-col items-center gap-2">
|
|
85
|
+
<span class="text-xs text-gray-500">Default</span>
|
|
86
|
+
<libs_ui-components-switch size="default" [(active)]="isActiveDefault" />
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="flex flex-col items-center gap-2">
|
|
90
|
+
<span class="text-xs text-gray-500">Large</span>
|
|
91
|
+
<libs_ui-components-switch size="large" [(active)]="isActiveLarge" />
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
68
94
|
```
|
|
69
95
|
|
|
70
|
-
|
|
96
|
+
```typescript
|
|
97
|
+
// component.ts
|
|
98
|
+
protected isActiveDefault = signal(false);
|
|
99
|
+
protected isActiveLarge = signal(true);
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### 3. Disabled State — Vô hiệu hóa tương tác
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<!-- template.html -->
|
|
106
|
+
<div class="flex gap-8">
|
|
107
|
+
<!-- Disabled & đang bật -->
|
|
108
|
+
<div class="flex flex-col items-center gap-2">
|
|
109
|
+
<span class="text-xs text-gray-500">Disabled (ON)</span>
|
|
110
|
+
<libs_ui-components-switch [disable]="true" [active]="true" />
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<!-- Disabled & đang tắt -->
|
|
114
|
+
<div class="flex flex-col items-center gap-2">
|
|
115
|
+
<span class="text-xs text-gray-500">Disabled (OFF)</span>
|
|
116
|
+
<libs_ui-components-switch [disable]="true" [active]="false" />
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
```
|
|
71
120
|
|
|
72
|
-
|
|
121
|
+
### 4. Async Handling — Xử lý API và revert nếu lỗi
|
|
73
122
|
|
|
74
123
|
```html
|
|
75
|
-
|
|
124
|
+
<!-- template.html -->
|
|
125
|
+
<div class="flex items-center gap-4">
|
|
126
|
+
<libs_ui-components-switch
|
|
127
|
+
[(active)]="isActiveAsync"
|
|
128
|
+
[disable]="isProcessing()"
|
|
129
|
+
(outSwitch)="handlerAsyncSwitch($event)" />
|
|
130
|
+
|
|
131
|
+
@if (isProcessing()) {
|
|
132
|
+
<span class="text-sm text-blue-500">Đang xử lý...</span>
|
|
133
|
+
}
|
|
134
|
+
</div>
|
|
76
135
|
```
|
|
77
136
|
|
|
78
137
|
```typescript
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
138
|
+
// component.ts
|
|
139
|
+
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
140
|
+
import { LibsUiComponentsSwitchComponent, ISwitchEvent } from '@libs-ui/components-switch';
|
|
141
|
+
|
|
142
|
+
@Component({
|
|
143
|
+
standalone: true,
|
|
144
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
145
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
146
|
+
templateUrl: './my.component.html',
|
|
147
|
+
})
|
|
148
|
+
export class MyComponent {
|
|
149
|
+
protected isActiveAsync = signal(false);
|
|
150
|
+
protected isProcessing = signal(false);
|
|
151
|
+
|
|
152
|
+
protected async handlerAsyncSwitch(event: ISwitchEvent): Promise<void> {
|
|
153
|
+
event.stopPropagation?.();
|
|
154
|
+
this.isProcessing.set(true);
|
|
155
|
+
|
|
156
|
+
try {
|
|
157
|
+
// Gọi API — ví dụ: lưu cài đặt thông báo
|
|
158
|
+
await this.settingsService.updateNotification(event.active).toPromise();
|
|
159
|
+
// Thành công: state giữ nguyên như đã toggle
|
|
160
|
+
} catch {
|
|
161
|
+
// Thất bại: revert lại state ban đầu
|
|
162
|
+
await event.revert();
|
|
163
|
+
} finally {
|
|
164
|
+
this.isProcessing.set(false);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
83
167
|
}
|
|
84
168
|
```
|
|
85
169
|
|
|
86
|
-
|
|
170
|
+
### 5. Lắng nghe sự kiện không dùng two-way binding
|
|
87
171
|
|
|
88
|
-
|
|
172
|
+
```html
|
|
173
|
+
<!-- template.html -->
|
|
174
|
+
<libs_ui-components-switch
|
|
175
|
+
[active]="isFeatureEnabled()"
|
|
176
|
+
(outSwitch)="handlerFeatureToggle($event)" />
|
|
177
|
+
```
|
|
89
178
|
|
|
90
|
-
|
|
179
|
+
```typescript
|
|
180
|
+
// component.ts
|
|
181
|
+
protected isFeatureEnabled = signal(false);
|
|
182
|
+
|
|
183
|
+
protected handlerFeatureToggle(event: ISwitchEvent): void {
|
|
184
|
+
event.stopPropagation?.();
|
|
185
|
+
console.log('Trạng thái mới:', event.active);
|
|
186
|
+
// Tự quản lý state ngoài, không dùng [(active)] two-way binding
|
|
187
|
+
this.isFeatureEnabled.set(event.active);
|
|
188
|
+
}
|
|
189
|
+
```
|
|
91
190
|
|
|
92
|
-
|
|
191
|
+
## @Input()
|
|
93
192
|
|
|
94
|
-
|
|
|
95
|
-
|
|
96
|
-
| `[
|
|
97
|
-
| `[
|
|
98
|
-
| `[
|
|
193
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
194
|
+
|---|---|---|---|---|
|
|
195
|
+
| `[(active)]` / `[active]` | `boolean` (Signal Model) | `false` | Trạng thái bật/tắt của switch. Hỗ trợ two-way binding với `[(active)]` hoặc one-way với `[active]`. | `[(active)]="isActive"` |
|
|
196
|
+
| `[size]` | `'default' \| 'large'` | `'default'` | Kích thước hiển thị của switch. | `size="large"` |
|
|
197
|
+
| `[disable]` | `boolean` | `undefined` (falsy) | Vô hiệu hóa switch — người dùng không thể click khi `true`. Thường dùng khi đang chờ API response. | `[disable]="isProcessing()"` |
|
|
99
198
|
|
|
100
|
-
|
|
199
|
+
## @Output()
|
|
101
200
|
|
|
102
|
-
|
|
|
103
|
-
|
|
104
|
-
| `(outSwitch)` | `ISwitchEvent` | Emit khi
|
|
201
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
202
|
+
|---|---|---|---|---|
|
|
203
|
+
| `(outSwitch)` | `ISwitchEvent` | Emit sau khi state đã được toggle. Cung cấp `active` (trạng thái mới) và `revert()` để hoàn tác về trạng thái trước đó. | `protected handlerSwitch(event: ISwitchEvent): void { event.stopPropagation?.(); ... }` | `(outSwitch)="handlerSwitch($event)"` |
|
|
105
204
|
|
|
106
|
-
|
|
205
|
+
## Types & Interfaces
|
|
107
206
|
|
|
108
|
-
|
|
207
|
+
```typescript
|
|
208
|
+
import { ISwitchEvent, ISwitch } from '@libs-ui/components-switch';
|
|
209
|
+
```
|
|
109
210
|
|
|
110
211
|
```typescript
|
|
212
|
+
/**
|
|
213
|
+
* Event emit khi người dùng click vào switch.
|
|
214
|
+
* State đã được toggle trước khi event này được emit.
|
|
215
|
+
*/
|
|
111
216
|
export interface ISwitchEvent {
|
|
112
|
-
|
|
113
|
-
|
|
217
|
+
/** Trạng thái mới sau khi toggle (true = ON, false = OFF) */
|
|
218
|
+
active: boolean;
|
|
219
|
+
/** Hàm async để hoàn tác state về trước khi toggle — dùng khi API call thất bại */
|
|
220
|
+
revert: () => Promise<void>;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Interface mô tả cấu hình của Switch component.
|
|
225
|
+
* Có thể dùng làm type cho object config truyền vào.
|
|
226
|
+
*/
|
|
227
|
+
export interface ISwitch {
|
|
228
|
+
disable?: boolean;
|
|
229
|
+
active?: boolean;
|
|
230
|
+
action?: (event: ISwitchEvent) => Promise<void>;
|
|
114
231
|
}
|
|
115
232
|
```
|
|
116
233
|
|
|
117
|
-
##
|
|
234
|
+
## Lưu ý quan trọng
|
|
235
|
+
|
|
236
|
+
⚠️ **State toggle trước khi emit event**: Component tự động toggle `active` state trước khi phát event `(outSwitch)`. Điều này có nghĩa là `event.active` trong handler đã là giá trị MỚI. Nếu muốn giữ nguyên state (chờ API xác nhận), hãy gọi `await event.revert()` trong khối `catch`.
|
|
237
|
+
|
|
238
|
+
⚠️ **Dùng `[disable]` khi đang xử lý async**: Để tránh user click nhiều lần trong khi API đang chạy, truyền `[disable]="isProcessing()"` vào component. Điều này khóa switch cho đến khi xử lý xong.
|
|
118
239
|
|
|
119
|
-
|
|
240
|
+
⚠️ **`[(active)]` vs `[active]`**: Dùng `[(active)]` (two-way binding với Signal Model) khi muốn component tự quản lý state. Dùng `[active]` (one-way) kết hợp với `(outSwitch)` khi cần kiểm soát state thủ công từ bên ngoài.
|
|
120
241
|
|
|
121
|
-
|
|
122
|
-
| ------------------------- | ---------------- | ------------------- |
|
|
123
|
-
| `--libs-ui-color-default` | `#226ff5` (Blue) | Màu nền khi active. |
|
|
242
|
+
⚠️ **Không truyền hàm vào template**: Tuân thủ convention dự án, tất cả logic xử lý event phải nằm trong handler method của component, không viết inline trên HTML.
|
|
124
243
|
|
|
125
244
|
## Demo
|
|
126
245
|
|
|
@@ -128,4 +247,4 @@ Component sử dụng CSS Variables để tùy biến màu sắc:
|
|
|
128
247
|
npx nx serve core-ui
|
|
129
248
|
```
|
|
130
249
|
|
|
131
|
-
Truy cập: `http://localhost:4500/switch`
|
|
250
|
+
Truy cập: `http://localhost:4500/components/switch`
|
|
@@ -20,13 +20,13 @@ export class LibsUiComponentsSwitchComponent {
|
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
22
|
async setActiveToggle() {
|
|
23
|
-
this.active.update((value) =>
|
|
23
|
+
this.active.update((value) => !value);
|
|
24
24
|
}
|
|
25
25
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsSwitchComponent, isStandalone: true, selector: "libs_ui-components-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", outSwitch: "outSwitch" }, ngImport: i0, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsSwitchComponent, isStandalone: true, selector: "libs_ui-components-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", outSwitch: "outSwitch" }, ngImport: i0, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSwitchComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
|
-
args: [{ selector: 'libs_ui-components-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"] }]
|
|
30
|
+
args: [{ selector: 'libs_ui-components-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"] }]
|
|
31
31
|
}] });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9zd2l0Y2gvc3JjL3N3aXRjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc3dpdGNoL3NyYy9zd2l0Y2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFXekYsTUFBTSxPQUFPLCtCQUErQjtJQUMxQyxtQkFBbUI7SUFDVixJQUFJLEdBQUcsS0FBSyxDQUFzQixTQUFTLENBQUMsQ0FBQztJQUM3QyxPQUFPLEdBQUcsS0FBSyxFQUFXLENBQUM7SUFDM0IsTUFBTSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUV4QyxpQkFBaUI7SUFDUixTQUFTLEdBQUcsTUFBTSxFQUFnQixDQUFDO0lBRTVDLGVBQWU7SUFDTCxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQVk7UUFDdkMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7WUFDbkIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUM7WUFDbEIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDckIsTUFBTSxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztTQUN4QyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sS0FBSyxDQUFDLGVBQWU7UUFDM0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEMsQ0FBQzt3R0F4QlUsK0JBQStCOzRGQUEvQiwrQkFBK0IsNGdCQ1g1Qyx1bkJBaUJBOzs0RkROYSwrQkFBK0I7a0JBUjNDLFNBQVM7K0JBRUUsMkJBQTJCLGNBR3pCLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0LCBtb2RlbCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU3dpdGNoRXZlbnQgfSBmcm9tICcuL2ludGVyZmFjZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtc3dpdGNoJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N3aXRjaC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N3aXRjaC5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c1N3aXRjaENvbXBvbmVudCB7XG4gIC8vICNyZWdpb24gUFJPUEVSVFlcbiAgcmVhZG9ubHkgc2l6ZSA9IGlucHV0PCdkZWZhdWx0JyB8ICdsYXJnZSc+KCdkZWZhdWx0Jyk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPigpO1xuICByZWFkb25seSBhY3RpdmUgPSBtb2RlbDxib29sZWFuPihmYWxzZSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0U3dpdGNoID0gb3V0cHV0PElTd2l0Y2hFdmVudD4oKTtcblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJDbGljayhldmVudDogRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBpZiAodGhpcy5kaXNhYmxlKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5zZXRBY3RpdmVUb2dnbGUoKTtcbiAgICB0aGlzLm91dFN3aXRjaC5lbWl0KHtcbiAgICAgIGFjdGl2ZTogdGhpcy5hY3RpdmUoKSxcbiAgICAgIHJldmVydDogdGhpcy5zZXRBY3RpdmVUb2dnbGUuYmluZCh0aGlzKSxcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgc2V0QWN0aXZlVG9nZ2xlKCkge1xuICAgIHRoaXMuYWN0aXZlLnVwZGF0ZSgodmFsdWUpID0+ICF2YWx1ZSk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgW2F0dHIuc2l6ZV09XCJzaXplKClcIlxuICBbY2xhc3MubGlicy11aS1zd2l0Y2gtY29udGFpbmVyXT1cInRydWVcIlxuICBbY2xhc3MucG9pbnRlci1ldmVudHMtbm9uZV09XCJkaXNhYmxlKClcIlxuICAoY2xpY2spPVwiaGFuZGxlckNsaWNrKCRldmVudClcIlxuICAoa2V5ZG93bi5lbnRlcik9XCJoYW5kbGVyQ2xpY2soJGV2ZW50KVwiPlxuICA8ZGl2XG4gICAgW2F0dHIuc2l6ZV09XCJzaXplKClcIlxuICAgIFtjbGFzcy5saWJzLXVpLXN3aXRjaC1iYXJdPVwidHJ1ZVwiXG4gICAgW2NsYXNzLmxpYnMtdWktc3dpdGNoLWJhci1hY3RpdmVdPVwiYWN0aXZlKClcIlxuICAgIFtjbGFzcy5saWJzLXVpLWRpc2FibGUtYmFja2dyb3VuZF09XCIhYWN0aXZlKCkgJiYgZGlzYWJsZSgpXCJcbiAgICBbY2xhc3MubGlicy11aS1kaXNhYmxlLWFjdGl2ZS1iYWNrZ3JvdW5kXT1cImFjdGl2ZSgpICYmIGRpc2FibGUoKVwiPjwvZGl2PlxuICA8ZGl2XG4gICAgW2F0dHIuc2l6ZV09XCJzaXplKClcIlxuICAgIFtjbGFzcy5saWJzLXVpLXN3aXRjaC1jaXJjbGVdPVwidHJ1ZVwiXG4gICAgW2NsYXNzLmxpYnMtdWktc3dpdGNoLWNpcmNsZS1hY3RpdmVdPVwiYWN0aXZlKClcIj48L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, output,
|
|
2
|
+
import { input, model, output, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class LibsUiComponentsSwitchComponent {
|
|
5
5
|
// #region PROPERTY
|
|
@@ -21,14 +21,14 @@ class LibsUiComponentsSwitchComponent {
|
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
23
|
async setActiveToggle() {
|
|
24
|
-
this.active.update((value) =>
|
|
24
|
+
this.active.update((value) => !value);
|
|
25
25
|
}
|
|
26
26
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsSwitchComponent, isStandalone: true, selector: "libs_ui-components-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", outSwitch: "outSwitch" }, ngImport: i0, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsSwitchComponent, isStandalone: true, selector: "libs_ui-components-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", outSwitch: "outSwitch" }, ngImport: i0, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28
28
|
}
|
|
29
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSwitchComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
|
-
args: [{ selector: 'libs_ui-components-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"] }]
|
|
31
|
+
args: [{ selector: 'libs_ui-components-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n", styles: [".libs-ui-switch-container{position:relative;cursor:pointer}.libs-ui-switch-container .libs-ui-switch-bar{width:30px;height:16px;border-radius:8px;background-color:#cdd0d6;transition:all .3s;-webkit-transition:all .3s}.libs-ui-switch-container .libs-ui-switch-bar[size=large]{width:45px;height:24px;border-radius:24px}.libs-ui-switch-container .libs-ui-switch-bar.libs-ui-switch-bar-active{background-color:var(--libs-ui-color-default, #226ff5)}.libs-ui-switch-container .libs-ui-switch-circle{height:12px;width:12px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;cursor:pointer;transition:left .3s;-webkit-transition:left .3s}.libs-ui-switch-container .libs-ui-switch-circle[size=large]{width:20px;height:20px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active{left:16px}.libs-ui-switch-container .libs-ui-switch-circle.libs-ui-switch-circle-active[size=large]{left:23px}.libs-ui-switch-container .libs-ui-disable-background{background-color:#e6e7ea!important}\n"] }]
|
|
32
32
|
}] });
|
|
33
33
|
|
|
34
34
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-switch.mjs","sources":["../../../../../libs-ui/components/switch/src/switch.component.ts","../../../../../libs-ui/components/switch/src/switch.component.html","../../../../../libs-ui/components/switch/src/libs-ui-components-switch.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { ISwitchEvent } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-switch',\n templateUrl: './switch.component.html',\n styleUrls: ['./switch.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsSwitchComponent {\n // #region PROPERTY\n readonly size = input<'default' | 'large'>('default');\n readonly disable = input<boolean>();\n readonly active = model<boolean>(false);\n\n // #region OUTPUT\n readonly outSwitch = output<ISwitchEvent>();\n\n /* FUNCTIONS */\n protected async handlerClick(event: Event) {\n event.stopPropagation();\n if (this.disable()) {\n return;\n }\n this.setActiveToggle();\n this.outSwitch.emit({\n active: this.active(),\n revert: this.setActiveToggle.bind(this),\n });\n }\n\n private async setActiveToggle() {\n this.active.update((value) =>
|
|
1
|
+
{"version":3,"file":"libs-ui-components-switch.mjs","sources":["../../../../../libs-ui/components/switch/src/switch.component.ts","../../../../../libs-ui/components/switch/src/switch.component.html","../../../../../libs-ui/components/switch/src/libs-ui-components-switch.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { ISwitchEvent } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-switch',\n templateUrl: './switch.component.html',\n styleUrls: ['./switch.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsSwitchComponent {\n // #region PROPERTY\n readonly size = input<'default' | 'large'>('default');\n readonly disable = input<boolean>();\n readonly active = model<boolean>(false);\n\n // #region OUTPUT\n readonly outSwitch = output<ISwitchEvent>();\n\n /* FUNCTIONS */\n protected async handlerClick(event: Event) {\n event.stopPropagation();\n if (this.disable()) {\n return;\n }\n this.setActiveToggle();\n this.outSwitch.emit({\n active: this.active(),\n revert: this.setActiveToggle.bind(this),\n });\n }\n\n private async setActiveToggle() {\n this.active.update((value) => !value);\n }\n}\n","<div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-container]=\"true\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-bar]=\"true\"\n [class.libs-ui-switch-bar-active]=\"active()\"\n [class.libs-ui-disable-background]=\"!active() && disable()\"\n [class.libs-ui-disable-active-background]=\"active() && disable()\"></div>\n <div\n [attr.size]=\"size()\"\n [class.libs-ui-switch-circle]=\"true\"\n [class.libs-ui-switch-circle-active]=\"active()\"></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAWa,+BAA+B,CAAA;;AAEjC,IAAA,IAAI,GAAG,KAAK,CAAsB,SAAS,CAAC,CAAC;IAC7C,OAAO,GAAG,KAAK,EAAW,CAAC;AAC3B,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;;IAG/B,SAAS,GAAG,MAAM,EAAgB,CAAC;;IAGlC,MAAM,YAAY,CAAC,KAAY,EAAA;QACvC,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAClB,OAAO;SACR;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;YACrB,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AACxC,SAAA,CAAC,CAAC;KACJ;AAEO,IAAA,MAAM,eAAe,GAAA;AAC3B,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC;KACvC;wGAxBU,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA/B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,+BAA+B,4gBCX5C,unBAiBA,EAAA,MAAA,EAAA,CAAA,2/BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDNa,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAR3C,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,EAGzB,UAAA,EAAA,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,unBAAA,EAAA,MAAA,EAAA,CAAA,2/BAAA,CAAA,EAAA,CAAA;;;AETjD;;AAEG;;;;"}
|