ud-components 0.1.7 → 0.1.9
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.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i1$3 from '@angular/common';
|
|
2
2
|
import { CommonModule, formatDate, NgClass, AsyncPipe, NgStyle, DatePipe, NgTemplateOutlet, NgSwitch } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, Injectable, inject, DestroyRef, EventEmitter, TemplateRef, ContentChild, Output, ViewContainerRef, Directive, ContentChildren, input, effect, ViewChildren } from '@angular/core';
|
|
4
|
+
import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, Injectable, inject, DestroyRef, EventEmitter, TemplateRef, ContentChild, Output, ViewContainerRef, Directive, ContentChildren, input, effect, ViewChildren, forwardRef, HostBinding } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
|
-
import { FormsModule, FormGroup, FormControl, ReactiveFormsModule, ControlContainer } from '@angular/forms';
|
|
6
|
+
import { FormsModule, FormGroup, FormControl, ReactiveFormsModule, ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import * as i1$1 from '@angular/material/snack-bar';
|
|
8
8
|
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
|
|
9
9
|
import { interval, map, of, debounceTime, distinctUntilChanged, switchMap, iif, isObservable, Subject, startWith, takeUntil } from 'rxjs';
|
|
@@ -2273,6 +2273,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2273
2273
|
type: Input
|
|
2274
2274
|
}] } });
|
|
2275
2275
|
|
|
2276
|
+
class ToggleComponent {
|
|
2277
|
+
/** Key of the control inside the parent FormGroup (alternative to ngModel/formControl) */
|
|
2278
|
+
controlName;
|
|
2279
|
+
size = 'md';
|
|
2280
|
+
label;
|
|
2281
|
+
labelPosition = 'right';
|
|
2282
|
+
ariaLabel;
|
|
2283
|
+
get isSm() { return this.size === 'sm'; }
|
|
2284
|
+
get isMd() { return this.size === 'md'; }
|
|
2285
|
+
get isLg() { return this.size === 'lg'; }
|
|
2286
|
+
checked = false;
|
|
2287
|
+
isDisabled = false;
|
|
2288
|
+
controlContainer = inject(ControlContainer, { optional: true, skipSelf: true });
|
|
2289
|
+
destroy$ = new Subject();
|
|
2290
|
+
onChange = () => { };
|
|
2291
|
+
onTouched = () => { };
|
|
2292
|
+
get formControl() {
|
|
2293
|
+
if (!this.controlName || !this.controlContainer?.control)
|
|
2294
|
+
return null;
|
|
2295
|
+
return this.controlContainer.control.get(this.controlName) ?? null;
|
|
2296
|
+
}
|
|
2297
|
+
ngOnInit() {
|
|
2298
|
+
const ctrl = this.formControl;
|
|
2299
|
+
if (!ctrl)
|
|
2300
|
+
return;
|
|
2301
|
+
ctrl.valueChanges
|
|
2302
|
+
.pipe(startWith(ctrl.value), takeUntil(this.destroy$))
|
|
2303
|
+
.subscribe((val) => {
|
|
2304
|
+
this.checked = !!val;
|
|
2305
|
+
this.isDisabled = ctrl.disabled;
|
|
2306
|
+
});
|
|
2307
|
+
}
|
|
2308
|
+
ngOnDestroy() {
|
|
2309
|
+
this.destroy$.next();
|
|
2310
|
+
this.destroy$.complete();
|
|
2311
|
+
}
|
|
2312
|
+
toggle() {
|
|
2313
|
+
if (this.isDisabled)
|
|
2314
|
+
return;
|
|
2315
|
+
const ctrl = this.formControl;
|
|
2316
|
+
if (ctrl) {
|
|
2317
|
+
ctrl.setValue(!this.checked);
|
|
2318
|
+
ctrl.markAsTouched();
|
|
2319
|
+
}
|
|
2320
|
+
else {
|
|
2321
|
+
this.checked = !this.checked;
|
|
2322
|
+
this.onChange(this.checked);
|
|
2323
|
+
this.onTouched();
|
|
2324
|
+
}
|
|
2325
|
+
}
|
|
2326
|
+
writeValue(value) {
|
|
2327
|
+
this.checked = !!value;
|
|
2328
|
+
}
|
|
2329
|
+
registerOnChange(fn) {
|
|
2330
|
+
this.onChange = fn;
|
|
2331
|
+
}
|
|
2332
|
+
registerOnTouched(fn) {
|
|
2333
|
+
this.onTouched = fn;
|
|
2334
|
+
}
|
|
2335
|
+
setDisabledState(isDisabled) {
|
|
2336
|
+
this.isDisabled = isDisabled;
|
|
2337
|
+
}
|
|
2338
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2339
|
+
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" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
2340
|
+
{
|
|
2341
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2342
|
+
useExisting: forwardRef(() => ToggleComponent),
|
|
2343
|
+
multi: true,
|
|
2344
|
+
},
|
|
2345
|
+
], 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: [
|
|
2346
|
+
{
|
|
2347
|
+
provide: ControlContainer,
|
|
2348
|
+
useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
|
|
2349
|
+
},
|
|
2350
|
+
] });
|
|
2351
|
+
}
|
|
2352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
2353
|
+
type: Component,
|
|
2354
|
+
args: [{ selector: 'ud-toggle', standalone: true, imports: [CommonModule], providers: [
|
|
2355
|
+
{
|
|
2356
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2357
|
+
useExisting: forwardRef(() => ToggleComponent),
|
|
2358
|
+
multi: true,
|
|
2359
|
+
},
|
|
2360
|
+
], viewProviders: [
|
|
2361
|
+
{
|
|
2362
|
+
provide: ControlContainer,
|
|
2363
|
+
useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
|
|
2364
|
+
},
|
|
2365
|
+
], 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"] }]
|
|
2366
|
+
}], propDecorators: { controlName: [{
|
|
2367
|
+
type: Input
|
|
2368
|
+
}], size: [{
|
|
2369
|
+
type: Input
|
|
2370
|
+
}], label: [{
|
|
2371
|
+
type: Input
|
|
2372
|
+
}], labelPosition: [{
|
|
2373
|
+
type: Input
|
|
2374
|
+
}], ariaLabel: [{
|
|
2375
|
+
type: Input
|
|
2376
|
+
}], isSm: [{
|
|
2377
|
+
type: HostBinding,
|
|
2378
|
+
args: ['class.size-sm']
|
|
2379
|
+
}], isMd: [{
|
|
2380
|
+
type: HostBinding,
|
|
2381
|
+
args: ['class.size-md']
|
|
2382
|
+
}], isLg: [{
|
|
2383
|
+
type: HostBinding,
|
|
2384
|
+
args: ['class.size-lg']
|
|
2385
|
+
}] } });
|
|
2386
|
+
|
|
2276
2387
|
/*
|
|
2277
2388
|
* Public API Surface of ud-components
|
|
2278
2389
|
*/
|
|
@@ -2282,5 +2393,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2282
2393
|
* Generated bundle index. Do not edit.
|
|
2283
2394
|
*/
|
|
2284
2395
|
|
|
2285
|
-
export { ActionType, ApplicationStatus, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateOperator, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
|
|
2396
|
+
export { ActionType, ApplicationStatus, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateOperator, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, ToggleComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
|
|
2286
2397
|
//# sourceMappingURL=ud-components.mjs.map
|