@libs-ui/components-switch 0.1.1-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 +163 -0
- package/esm2022/index.mjs +3 -0
- package/esm2022/interfaces/index.mjs +2 -0
- package/esm2022/interfaces/switch.interface.mjs +2 -0
- package/esm2022/libs-ui-components-switch.mjs +5 -0
- package/esm2022/switch.component.mjs +32 -0
- package/fesm2022/libs-ui-components-switch.mjs +39 -0
- package/fesm2022/libs-ui-components-switch.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/interfaces/index.d.ts +1 -0
- package/interfaces/switch.interface.d.ts +9 -0
- package/package.json +24 -0
- package/switch.component.d.ts +12 -0
package/README.md
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
# Switch
|
|
2
|
+
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-switch` là component Toggle Switch cho Angular, cho phép người dùng bật/tắt một tùy chọn với trạng thái hai chiều và sự kiện revert.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Kích thước: `'default'` | `'large'`
|
|
10
|
+
- Hỗ trợ vô hiệu hóa switch (`disable`)
|
|
11
|
+
- Two-way binding cho trạng thái `active`
|
|
12
|
+
- Phát ra sự kiện `outSwitch` với payload `{ active: boolean; revert: () => Promise<void> }`
|
|
13
|
+
|
|
14
|
+
## Cài đặt
|
|
15
|
+
|
|
16
|
+
### Yêu cầu
|
|
17
|
+
|
|
18
|
+
- Angular 18.0.0 trở lên
|
|
19
|
+
- Tailwind CSS 3.3.0 trở lên
|
|
20
|
+
|
|
21
|
+
Để cài đặt, sử dụng npm hoặc yarn:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @libs-ui/components-switch
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
hoặc
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @libs-ui/components-switch
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Sử dụng
|
|
34
|
+
|
|
35
|
+
### Inline Template
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { Component } from '@angular/core';
|
|
39
|
+
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
selector: 'app-example',
|
|
43
|
+
standalone: true,
|
|
44
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
45
|
+
template: `
|
|
46
|
+
<libs_ui-components-switch
|
|
47
|
+
[size]="'large'"
|
|
48
|
+
[disable]="false"
|
|
49
|
+
[(active)]="isOn"
|
|
50
|
+
(outSwitch)="onSwitch($event)"></libs_ui-components-switch>
|
|
51
|
+
`,
|
|
52
|
+
})
|
|
53
|
+
export class ExampleComponent {
|
|
54
|
+
isOn = false;
|
|
55
|
+
|
|
56
|
+
onSwitch(event: { active: boolean; revert: () => Promise<void> }) {
|
|
57
|
+
console.log('Switch toggled:', event.active);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### File HTML riêng
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import { Component } from '@angular/core';
|
|
66
|
+
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
67
|
+
|
|
68
|
+
@Component({
|
|
69
|
+
selector: 'app-example',
|
|
70
|
+
standalone: true,
|
|
71
|
+
imports: [LibsUiComponentsSwitchComponent],
|
|
72
|
+
templateUrl: './example.component.html',
|
|
73
|
+
})
|
|
74
|
+
export class ExampleComponent {
|
|
75
|
+
isOn = true;
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<libs_ui-components-switch
|
|
81
|
+
[size]="'default'"
|
|
82
|
+
[disable]="false"
|
|
83
|
+
[(active)]="isOn"
|
|
84
|
+
(outSwitch)="onSwitch($event)"></libs_ui-components-switch>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Công nghệ sử dụng
|
|
88
|
+
|
|
89
|
+
- **Angular 18**: standalone components, Signals
|
|
90
|
+
- **Tailwind CSS**: cho styling
|
|
91
|
+
|
|
92
|
+
## API Reference
|
|
93
|
+
|
|
94
|
+
### Inputs
|
|
95
|
+
|
|
96
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
97
|
+
| ------- | ---------------------- | ----------- | ------------------------------------ |
|
|
98
|
+
| size | `'default' \| 'large'` | `'default'` | Kích thước của switch |
|
|
99
|
+
| disable | `boolean` | `false` | Vô hiệu hóa switch |
|
|
100
|
+
| active | `boolean` | `false` | Trạng thái bật/tắt (two-way binding) |
|
|
101
|
+
|
|
102
|
+
### Outputs
|
|
103
|
+
|
|
104
|
+
| Tên | Kiểu | Mô tả |
|
|
105
|
+
| --------- | ------------------------------- | ----------------------------------------------------- |
|
|
106
|
+
| outSwitch | `(event: ISwitchEvent) => void` | Sự kiện khi toggle, trả về trạng thái và hàm `revert` |
|
|
107
|
+
|
|
108
|
+
### Interfaces
|
|
109
|
+
|
|
110
|
+
#### `ISwitch`
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
export interface ISwitch {
|
|
114
|
+
disable?: boolean;
|
|
115
|
+
active?: boolean;
|
|
116
|
+
action?: (event: ISwitchEvent) => Promise<void>;
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Mô tả cấu hình switch (inputs):
|
|
121
|
+
|
|
122
|
+
- `disable`: vô hiệu hóa switch.
|
|
123
|
+
- `active`: trạng thái bật/tắt.
|
|
124
|
+
- `action`: hàm xử lý khi toggle (tùy chọn).
|
|
125
|
+
|
|
126
|
+
#### `ISwitchEvent`
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
export interface ISwitchEvent {
|
|
130
|
+
active: boolean;
|
|
131
|
+
revert: () => Promise<void>;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Mô tả payload của sự kiện `outSwitch`:
|
|
136
|
+
|
|
137
|
+
- `active`: trạng thái mới.
|
|
138
|
+
- `revert`: hàm để hoàn nguyên về trạng thái trước đó.
|
|
139
|
+
|
|
140
|
+
## Demo
|
|
141
|
+
|
|
142
|
+
Để xem ví dụ tương tác về component Switch, bạn có thể sử dụng `LibsUiComponentsSwitchDemoComponent` trong ứng dụng của mình:
|
|
143
|
+
|
|
144
|
+
```typescript
|
|
145
|
+
import { Component } from '@angular/core';
|
|
146
|
+
import { LibsUiComponentsSwitchDemoComponent } from '@libs-ui/components-switch';
|
|
147
|
+
|
|
148
|
+
@Component({
|
|
149
|
+
selector: 'app-switch-demo',
|
|
150
|
+
standalone: true,
|
|
151
|
+
imports: [LibsUiComponentsSwitchDemoComponent],
|
|
152
|
+
template: `
|
|
153
|
+
<lib-switch-demo></lib-switch-demo>
|
|
154
|
+
`,
|
|
155
|
+
})
|
|
156
|
+
export class SwitchDemoComponent {}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Hoặc thêm trực tiếp trong template HTML:
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
<lib-switch-demo></lib-switch-demo>
|
|
163
|
+
```
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './switch.component';
|
|
2
|
+
export * from './interfaces';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc3dpdGNoL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9zd2l0Y2guY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcyc7XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './switch.interface';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc3dpdGNoL3NyYy9pbnRlcmZhY2VzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3N3aXRjaC5pbnRlcmZhY2UnO1xuIl19
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9zd2l0Y2gvc3JjL2ludGVyZmFjZXMvc3dpdGNoLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBJU3dpdGNoIHtcbiAgZGlzYWJsZT86IGJvb2xlYW47XG4gIGFjdGl2ZT86IGJvb2xlYW47XG4gIGFjdGlvbj86IChldmVudDogSVN3aXRjaEV2ZW50KSA9PiBQcm9taXNlPHZvaWQ+O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElTd2l0Y2hFdmVudCB7XG4gIGFjdGl2ZTogYm9vbGVhbjtcbiAgcmV2ZXJ0OiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xufVxuIl19
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './index';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLXN3aXRjaC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9zd2l0Y2gvc3JjL2xpYnMtdWktY29tcG9uZW50cy1zd2l0Y2gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class LibsUiComponentsSwitchComponent {
|
|
4
|
+
// #region PROPERTY
|
|
5
|
+
size = input('default');
|
|
6
|
+
disable = input();
|
|
7
|
+
active = model(false);
|
|
8
|
+
// #region OUTPUT
|
|
9
|
+
outSwitch = output();
|
|
10
|
+
/* FUNCTIONS */
|
|
11
|
+
async handlerClick(event) {
|
|
12
|
+
event.stopPropagation();
|
|
13
|
+
if (this.disable()) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
this.setActiveToggle();
|
|
17
|
+
this.outSwitch.emit({
|
|
18
|
+
active: this.active(),
|
|
19
|
+
revert: this.setActiveToggle.bind(this),
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
async setActiveToggle() {
|
|
23
|
+
this.active.update((value) => (value ? false : true));
|
|
24
|
+
}
|
|
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 });
|
|
27
|
+
}
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSwitchComponent, decorators: [{
|
|
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"] }]
|
|
31
|
+
}] });
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9zd2l0Y2gvc3JjL3N3aXRjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc3dpdGNoL3NyYy9zd2l0Y2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFXekYsTUFBTSxPQUFPLCtCQUErQjtJQUMxQyxtQkFBbUI7SUFDVixJQUFJLEdBQUcsS0FBSyxDQUFzQixTQUFTLENBQUMsQ0FBQztJQUM3QyxPQUFPLEdBQUcsS0FBSyxFQUFXLENBQUM7SUFDM0IsTUFBTSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUV4QyxpQkFBaUI7SUFDUixTQUFTLEdBQUcsTUFBTSxFQUFnQixDQUFDO0lBRTVDLGVBQWU7SUFDTCxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQVk7UUFDdkMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7WUFDbkIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUM7WUFDbEIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDckIsTUFBTSxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztTQUN4QyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sS0FBSyxDQUFDLGVBQWU7UUFDM0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDeEQsQ0FBQzt3R0F4QlUsK0JBQStCOzRGQUEvQiwrQkFBK0IsNGdCQ1g1Qywya0JBZ0JBOzs0RkRMYSwrQkFBK0I7a0JBUjNDLFNBQVM7K0JBRUUsMkJBQTJCLGNBR3pCLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0LCBtb2RlbCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJU3dpdGNoRXZlbnQgfSBmcm9tICcuL2ludGVyZmFjZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtc3dpdGNoJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N3aXRjaC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N3aXRjaC5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c1N3aXRjaENvbXBvbmVudCB7XG4gIC8vICNyZWdpb24gUFJPUEVSVFlcbiAgcmVhZG9ubHkgc2l6ZSA9IGlucHV0PCdkZWZhdWx0JyB8ICdsYXJnZSc+KCdkZWZhdWx0Jyk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPigpO1xuICByZWFkb25seSBhY3RpdmUgPSBtb2RlbDxib29sZWFuPihmYWxzZSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0U3dpdGNoID0gb3V0cHV0PElTd2l0Y2hFdmVudD4oKTtcblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJDbGljayhldmVudDogRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBpZiAodGhpcy5kaXNhYmxlKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5zZXRBY3RpdmVUb2dnbGUoKTtcbiAgICB0aGlzLm91dFN3aXRjaC5lbWl0KHtcbiAgICAgIGFjdGl2ZTogdGhpcy5hY3RpdmUoKSxcbiAgICAgIHJldmVydDogdGhpcy5zZXRBY3RpdmVUb2dnbGUuYmluZCh0aGlzKSxcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgc2V0QWN0aXZlVG9nZ2xlKCkge1xuICAgIHRoaXMuYWN0aXZlLnVwZGF0ZSgodmFsdWUpID0+ICh2YWx1ZSA/IGZhbHNlIDogdHJ1ZSkpO1xuICB9XG59XG4iLCI8ZGl2XG4gIFthdHRyLnNpemVdPVwic2l6ZSgpXCJcbiAgW2NsYXNzLmxpYnMtdWktc3dpdGNoLWNvbnRhaW5lcl09XCJ0cnVlXCJcbiAgW2NsYXNzLnBvaW50ZXItZXZlbnRzLW5vbmVdPVwiZGlzYWJsZSgpXCJcbiAgKGNsaWNrKT1cImhhbmRsZXJDbGljaygkZXZlbnQpXCI+XG4gIDxkaXZcbiAgICBbYXR0ci5zaXplXT1cInNpemUoKVwiXG4gICAgW2NsYXNzLmxpYnMtdWktc3dpdGNoLWJhcl09XCJ0cnVlXCJcbiAgICBbY2xhc3MubGlicy11aS1zd2l0Y2gtYmFyLWFjdGl2ZV09XCJhY3RpdmUoKVwiXG4gICAgW2NsYXNzLmxpYnMtdWktZGlzYWJsZS1iYWNrZ3JvdW5kXT1cIiFhY3RpdmUoKSAmJiBkaXNhYmxlKClcIlxuICAgIFtjbGFzcy5saWJzLXVpLWRpc2FibGUtYWN0aXZlLWJhY2tncm91bmRdPVwiYWN0aXZlKCkgJiYgZGlzYWJsZSgpXCI+PC9kaXY+XG4gIDxkaXZcbiAgICBbYXR0ci5zaXplXT1cInNpemUoKVwiXG4gICAgW2NsYXNzLmxpYnMtdWktc3dpdGNoLWNpcmNsZV09XCJ0cnVlXCJcbiAgICBbY2xhc3MubGlicy11aS1zd2l0Y2gtY2lyY2xlLWFjdGl2ZV09XCJhY3RpdmUoKVwiPjwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class LibsUiComponentsSwitchComponent {
|
|
5
|
+
// #region PROPERTY
|
|
6
|
+
size = input('default');
|
|
7
|
+
disable = input();
|
|
8
|
+
active = model(false);
|
|
9
|
+
// #region OUTPUT
|
|
10
|
+
outSwitch = output();
|
|
11
|
+
/* FUNCTIONS */
|
|
12
|
+
async handlerClick(event) {
|
|
13
|
+
event.stopPropagation();
|
|
14
|
+
if (this.disable()) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
this.setActiveToggle();
|
|
18
|
+
this.outSwitch.emit({
|
|
19
|
+
active: this.active(),
|
|
20
|
+
revert: this.setActiveToggle.bind(this),
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
async setActiveToggle() {
|
|
24
|
+
this.active.update((value) => (value ? false : true));
|
|
25
|
+
}
|
|
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 });
|
|
28
|
+
}
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSwitchComponent, decorators: [{
|
|
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"] }]
|
|
32
|
+
}] });
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Generated bundle index. Do not edit.
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
export { LibsUiComponentsSwitchComponent };
|
|
39
|
+
//# sourceMappingURL=libs-ui-components-switch.mjs.map
|
|
@@ -0,0 +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) => (value ? false : true));\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 <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;IAC5C,OAAO,GAAG,KAAK,EAAW;AAC1B,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,CAAC;;IAG9B,SAAS,GAAG,MAAM,EAAgB;;IAGjC,MAAM,YAAY,CAAC,KAAY,EAAA;QACvC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAClB;QACF;QACA,IAAI,CAAC,eAAe,EAAE;AACtB,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;IACJ;AAEQ,IAAA,MAAM,eAAe,GAAA;QAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;IACvD;wGAxBW,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,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,2kBAgBA,EAAA,MAAA,EAAA,CAAA,2/BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDLa,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAR3C,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,EAAA,UAAA,EAGzB,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2kBAAA,EAAA,MAAA,EAAA,CAAA,2/BAAA,CAAA,EAAA;;;AETjD;;AAEG;;;;"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './switch.interface';
|
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@libs-ui/components-switch",
|
|
3
|
+
"version": "0.1.1-1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/core": ">=18.0.0"
|
|
6
|
+
},
|
|
7
|
+
"sideEffects": false,
|
|
8
|
+
"module": "fesm2022/libs-ui-components-switch.mjs",
|
|
9
|
+
"typings": "index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
"./package.json": {
|
|
12
|
+
"default": "./package.json"
|
|
13
|
+
},
|
|
14
|
+
".": {
|
|
15
|
+
"types": "./index.d.ts",
|
|
16
|
+
"esm2022": "./esm2022/libs-ui-components-switch.mjs",
|
|
17
|
+
"esm": "./esm2022/libs-ui-components-switch.mjs",
|
|
18
|
+
"default": "./fesm2022/libs-ui-components-switch.mjs"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"tslib": "^2.3.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ISwitchEvent } from './interfaces';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class LibsUiComponentsSwitchComponent {
|
|
4
|
+
readonly size: import("@angular/core").InputSignal<"default" | "large">;
|
|
5
|
+
readonly disable: import("@angular/core").InputSignal<boolean | undefined>;
|
|
6
|
+
readonly active: import("@angular/core").ModelSignal<boolean>;
|
|
7
|
+
readonly outSwitch: import("@angular/core").OutputEmitterRef<ISwitchEvent>;
|
|
8
|
+
protected handlerClick(event: Event): Promise<void>;
|
|
9
|
+
private setActiveToggle;
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsSwitchComponent, never>;
|
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsSwitchComponent, "libs_ui-components-switch", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "outSwitch": "outSwitch"; }, never, never, true, never>;
|
|
12
|
+
}
|