ud-components 0.1.8 → 0.2.0
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.
|
@@ -2274,35 +2274,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2274
2274
|
}] } });
|
|
2275
2275
|
|
|
2276
2276
|
class ToggleComponent {
|
|
2277
|
+
/** Key of the control inside the parent FormGroup (alternative to ngModel/formControl) */
|
|
2278
|
+
controlName;
|
|
2277
2279
|
size = 'md';
|
|
2278
2280
|
label;
|
|
2279
2281
|
labelPosition = 'right';
|
|
2280
2282
|
ariaLabel;
|
|
2281
|
-
get isSm() {
|
|
2282
|
-
|
|
2283
|
-
}
|
|
2284
|
-
get isMd() {
|
|
2285
|
-
return this.size === 'md';
|
|
2286
|
-
}
|
|
2287
|
-
get isLg() {
|
|
2288
|
-
return this.size === 'lg';
|
|
2289
|
-
}
|
|
2283
|
+
get isSm() { return this.size === 'sm'; }
|
|
2284
|
+
get isMd() { return this.size === 'md'; }
|
|
2285
|
+
get isLg() { return this.size === 'lg'; }
|
|
2290
2286
|
checked = false;
|
|
2291
2287
|
isDisabled = false;
|
|
2292
|
-
|
|
2288
|
+
controlContainer = inject(ControlContainer, { optional: true, skipSelf: true });
|
|
2289
|
+
destroy$ = new Subject();
|
|
2290
|
+
onChange = new EventEmitter();
|
|
2291
|
+
_onChange = () => { };
|
|
2293
2292
|
onTouched = () => { };
|
|
2293
|
+
get formControl() {
|
|
2294
|
+
if (!this.controlName || !this.controlContainer?.control)
|
|
2295
|
+
return null;
|
|
2296
|
+
return this.controlContainer.control.get(this.controlName) ?? null;
|
|
2297
|
+
}
|
|
2298
|
+
ngOnInit() {
|
|
2299
|
+
const ctrl = this.formControl;
|
|
2300
|
+
if (!ctrl)
|
|
2301
|
+
return;
|
|
2302
|
+
ctrl.valueChanges
|
|
2303
|
+
.pipe(startWith(ctrl.value), takeUntil(this.destroy$))
|
|
2304
|
+
.subscribe((val) => {
|
|
2305
|
+
this.checked = !!val;
|
|
2306
|
+
this.isDisabled = ctrl.disabled;
|
|
2307
|
+
});
|
|
2308
|
+
}
|
|
2309
|
+
ngOnDestroy() {
|
|
2310
|
+
this.destroy$.next();
|
|
2311
|
+
this.destroy$.complete();
|
|
2312
|
+
}
|
|
2294
2313
|
toggle() {
|
|
2295
2314
|
if (this.isDisabled)
|
|
2296
2315
|
return;
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2316
|
+
const ctrl = this.formControl;
|
|
2317
|
+
if (ctrl) {
|
|
2318
|
+
ctrl.setValue(!this.checked);
|
|
2319
|
+
ctrl.markAsTouched();
|
|
2320
|
+
}
|
|
2321
|
+
else {
|
|
2322
|
+
this.checked = !this.checked;
|
|
2323
|
+
this._onChange(this.checked);
|
|
2324
|
+
this.onTouched();
|
|
2325
|
+
}
|
|
2326
|
+
this.onChange.emit(this.checked);
|
|
2300
2327
|
}
|
|
2301
2328
|
writeValue(value) {
|
|
2302
2329
|
this.checked = !!value;
|
|
2303
2330
|
}
|
|
2304
2331
|
registerOnChange(fn) {
|
|
2305
|
-
this.
|
|
2332
|
+
this._onChange = fn;
|
|
2306
2333
|
}
|
|
2307
2334
|
registerOnTouched(fn) {
|
|
2308
2335
|
this.onTouched = fn;
|
|
@@ -2311,13 +2338,18 @@ class ToggleComponent {
|
|
|
2311
2338
|
this.isDisabled = isDisabled;
|
|
2312
2339
|
}
|
|
2313
2340
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ToggleComponent, isStandalone: true, selector: "ud-toggle", inputs: { size: "size", label: "label", labelPosition: "labelPosition", ariaLabel: "ariaLabel" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
2341
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ToggleComponent, isStandalone: true, selector: "ud-toggle", inputs: { controlName: "controlName", size: "size", label: "label", labelPosition: "labelPosition", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
2315
2342
|
{
|
|
2316
2343
|
provide: NG_VALUE_ACCESSOR,
|
|
2317
2344
|
useExisting: forwardRef(() => ToggleComponent),
|
|
2318
2345
|
multi: true,
|
|
2319
2346
|
},
|
|
2320
|
-
], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ud-toggle\"\n [class.checked]=\"checked\"\n [class.disabled]=\"isDisabled\"\n [class.label-left]=\"labelPosition === 'left'\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n [disabled]=\"isDisabled || null\"\n (click)=\"toggle()\">\n @if (label && labelPosition === 'left') {\n <span class=\"toggle-label\">{{ label }}</span>\n }\n <span class=\"track\" aria-hidden=\"true\">\n <span class=\"thumb\">\n <span class=\"thumb-core\"></span>\n </span>\n </span>\n @if (label && labelPosition === 'right') {\n <span class=\"toggle-label\">{{ label }}</span>\n }\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap\";:host{display:inline-flex;align-items:center;--toggle-track-off: #d2d6de;--toggle-track-on: #1b2535;--toggle-thumb: #ffffff;--toggle-glow: rgba(27, 37, 53, .14);--toggle-label-color: #4a5568;--toggle-font: \"DM Sans\", system-ui, sans-serif;--toggle-duration: .3s;--toggle-spring: cubic-bezier(.34, 1.56, .64, 1)}:host(.size-sm){--track-w: 28px;--track-h: 16px;--thumb-d: 12px;--thumb-inset: 2px}:host(.size-md){--track-w: 44px;--track-h: 24px;--thumb-d: 18px;--thumb-inset: 3px}:host(.size-lg){--track-w: 56px;--track-h: 32px;--thumb-d: 24px;--thumb-inset: 4px}.ud-toggle{display:inline-flex;align-items:center;gap:.6rem;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}.ud-toggle:focus-visible .track{outline:2px solid var(--toggle-track-on);outline-offset:2px}.ud-toggle.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.track{position:relative;display:block;width:var(--track-w);height:var(--track-h);border-radius:999px;background:var(--toggle-track-off);box-shadow:inset 0 1px 3px #0000002e,inset 0 0 0 1px #0000000f;transition:background var(--toggle-duration) ease;flex-shrink:0}.ud-toggle.checked .track{background:var(--toggle-track-on);box-shadow:inset 0 1px 3px #0000004d,inset 0 0 0 1px #00000026}.thumb{position:absolute;top:50%;left:0;width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--toggle-thumb);transform:translateY(-50%) translate(var(--thumb-inset));box-shadow:0 1px 2px #00000038,0 2px 6px #00000024;transition:transform var(--toggle-duration) var(--toggle-spring),box-shadow .22s ease;display:flex;align-items:center;justify-content:center}.ud-toggle.checked .thumb{transform:translateY(-50%) translate(calc(var(--track-w) - var(--thumb-d) - var(--thumb-inset)));box-shadow:0 1px 2px #0000002e,0 2px 6px #0000001a,0 0 0 4px var(--toggle-glow)}.thumb-core{width:4px;height:4px;border-radius:50%;background:#0000001a;transition:opacity .2s ease,transform .3s var(--toggle-spring)}:host(.size-sm) .thumb-core{display:none}.ud-toggle.checked .thumb-core{background:#1b25352e;transform:scale(1.4)}.toggle-label{font-family:var(--toggle-font);font-size:.875rem;font-weight:500;color:var(--toggle-label-color);line-height:1;white-space:nowrap}:host(.size-sm) .toggle-label{font-size:.8rem}:host(.size-lg) .toggle-label{font-size:.95rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }]
|
|
2347
|
+
], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ud-toggle\"\n [class.checked]=\"checked\"\n [class.disabled]=\"isDisabled\"\n [class.label-left]=\"labelPosition === 'left'\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n [disabled]=\"isDisabled || null\"\n (click)=\"toggle()\">\n @if (label && labelPosition === 'left') {\n <span class=\"toggle-label\">{{ label }}</span>\n }\n <span class=\"track\" aria-hidden=\"true\">\n <span class=\"thumb\">\n <span class=\"thumb-core\"></span>\n </span>\n </span>\n @if (label && labelPosition === 'right') {\n <span class=\"toggle-label\">{{ label }}</span>\n }\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap\";:host{display:inline-flex;align-items:center;--toggle-track-off: #d2d6de;--toggle-track-on: #1b2535;--toggle-thumb: #ffffff;--toggle-glow: rgba(27, 37, 53, .14);--toggle-label-color: #4a5568;--toggle-font: \"DM Sans\", system-ui, sans-serif;--toggle-duration: .3s;--toggle-spring: cubic-bezier(.34, 1.56, .64, 1)}:host(.size-sm){--track-w: 28px;--track-h: 16px;--thumb-d: 12px;--thumb-inset: 2px}:host(.size-md){--track-w: 44px;--track-h: 24px;--thumb-d: 18px;--thumb-inset: 3px}:host(.size-lg){--track-w: 56px;--track-h: 32px;--thumb-d: 24px;--thumb-inset: 4px}.ud-toggle{display:inline-flex;align-items:center;gap:.6rem;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}.ud-toggle:focus-visible .track{outline:2px solid var(--toggle-track-on);outline-offset:2px}.ud-toggle.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.track{position:relative;display:block;width:var(--track-w);height:var(--track-h);border-radius:999px;background:var(--toggle-track-off);box-shadow:inset 0 1px 3px #0000002e,inset 0 0 0 1px #0000000f;transition:background var(--toggle-duration) ease;flex-shrink:0}.ud-toggle.checked .track{background:var(--toggle-track-on);box-shadow:inset 0 1px 3px #0000004d,inset 0 0 0 1px #00000026}.thumb{position:absolute;top:50%;left:0;width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--toggle-thumb);transform:translateY(-50%) translate(var(--thumb-inset));box-shadow:0 1px 2px #00000038,0 2px 6px #00000024;transition:transform var(--toggle-duration) var(--toggle-spring),box-shadow .22s ease;display:flex;align-items:center;justify-content:center}.ud-toggle.checked .thumb{transform:translateY(-50%) translate(calc(var(--track-w) - var(--thumb-d) - var(--thumb-inset)));box-shadow:0 1px 2px #0000002e,0 2px 6px #0000001a,0 0 0 4px var(--toggle-glow)}.thumb-core{width:4px;height:4px;border-radius:50%;background:#0000001a;transition:opacity .2s ease,transform .3s var(--toggle-spring)}:host(.size-sm) .thumb-core{display:none}.ud-toggle.checked .thumb-core{background:#1b25352e;transform:scale(1.4)}.toggle-label{font-family:var(--toggle-font);font-size:.875rem;font-weight:500;color:var(--toggle-label-color);line-height:1;white-space:nowrap}:host(.size-sm) .toggle-label{font-size:.8rem}:host(.size-lg) .toggle-label{font-size:.95rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], viewProviders: [
|
|
2348
|
+
{
|
|
2349
|
+
provide: ControlContainer,
|
|
2350
|
+
useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
|
|
2351
|
+
},
|
|
2352
|
+
] });
|
|
2321
2353
|
}
|
|
2322
2354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
2323
2355
|
type: Component,
|
|
@@ -2327,8 +2359,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2327
2359
|
useExisting: forwardRef(() => ToggleComponent),
|
|
2328
2360
|
multi: true,
|
|
2329
2361
|
},
|
|
2362
|
+
], viewProviders: [
|
|
2363
|
+
{
|
|
2364
|
+
provide: ControlContainer,
|
|
2365
|
+
useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
|
|
2366
|
+
},
|
|
2330
2367
|
], template: "<button\n type=\"button\"\n class=\"ud-toggle\"\n [class.checked]=\"checked\"\n [class.disabled]=\"isDisabled\"\n [class.label-left]=\"labelPosition === 'left'\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n [disabled]=\"isDisabled || null\"\n (click)=\"toggle()\">\n @if (label && labelPosition === 'left') {\n <span class=\"toggle-label\">{{ label }}</span>\n }\n <span class=\"track\" aria-hidden=\"true\">\n <span class=\"thumb\">\n <span class=\"thumb-core\"></span>\n </span>\n </span>\n @if (label && labelPosition === 'right') {\n <span class=\"toggle-label\">{{ label }}</span>\n }\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap\";:host{display:inline-flex;align-items:center;--toggle-track-off: #d2d6de;--toggle-track-on: #1b2535;--toggle-thumb: #ffffff;--toggle-glow: rgba(27, 37, 53, .14);--toggle-label-color: #4a5568;--toggle-font: \"DM Sans\", system-ui, sans-serif;--toggle-duration: .3s;--toggle-spring: cubic-bezier(.34, 1.56, .64, 1)}:host(.size-sm){--track-w: 28px;--track-h: 16px;--thumb-d: 12px;--thumb-inset: 2px}:host(.size-md){--track-w: 44px;--track-h: 24px;--thumb-d: 18px;--thumb-inset: 3px}:host(.size-lg){--track-w: 56px;--track-h: 32px;--thumb-d: 24px;--thumb-inset: 4px}.ud-toggle{display:inline-flex;align-items:center;gap:.6rem;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none}.ud-toggle:focus-visible .track{outline:2px solid var(--toggle-track-on);outline-offset:2px}.ud-toggle.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.track{position:relative;display:block;width:var(--track-w);height:var(--track-h);border-radius:999px;background:var(--toggle-track-off);box-shadow:inset 0 1px 3px #0000002e,inset 0 0 0 1px #0000000f;transition:background var(--toggle-duration) ease;flex-shrink:0}.ud-toggle.checked .track{background:var(--toggle-track-on);box-shadow:inset 0 1px 3px #0000004d,inset 0 0 0 1px #00000026}.thumb{position:absolute;top:50%;left:0;width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--toggle-thumb);transform:translateY(-50%) translate(var(--thumb-inset));box-shadow:0 1px 2px #00000038,0 2px 6px #00000024;transition:transform var(--toggle-duration) var(--toggle-spring),box-shadow .22s ease;display:flex;align-items:center;justify-content:center}.ud-toggle.checked .thumb{transform:translateY(-50%) translate(calc(var(--track-w) - var(--thumb-d) - var(--thumb-inset)));box-shadow:0 1px 2px #0000002e,0 2px 6px #0000001a,0 0 0 4px var(--toggle-glow)}.thumb-core{width:4px;height:4px;border-radius:50%;background:#0000001a;transition:opacity .2s ease,transform .3s var(--toggle-spring)}:host(.size-sm) .thumb-core{display:none}.ud-toggle.checked .thumb-core{background:#1b25352e;transform:scale(1.4)}.toggle-label{font-family:var(--toggle-font);font-size:.875rem;font-weight:500;color:var(--toggle-label-color);line-height:1;white-space:nowrap}:host(.size-sm) .toggle-label{font-size:.8rem}:host(.size-lg) .toggle-label{font-size:.95rem}\n"] }]
|
|
2331
|
-
}], propDecorators: {
|
|
2368
|
+
}], propDecorators: { controlName: [{
|
|
2369
|
+
type: Input
|
|
2370
|
+
}], size: [{
|
|
2332
2371
|
type: Input
|
|
2333
2372
|
}], label: [{
|
|
2334
2373
|
type: Input
|
|
@@ -2345,6 +2384,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2345
2384
|
}], isLg: [{
|
|
2346
2385
|
type: HostBinding,
|
|
2347
2386
|
args: ['class.size-lg']
|
|
2387
|
+
}], onChange: [{
|
|
2388
|
+
type: Output
|
|
2348
2389
|
}] } });
|
|
2349
2390
|
|
|
2350
2391
|
/*
|