ud-components 0.1.7 → 0.1.8

package/fesm2022/ud-components.mjs

@@ -1,9 +1,9 @@
 import * as i1$3 from '@angular/common';
 import { CommonModule, formatDate, NgClass, AsyncPipe, NgStyle, DatePipe, NgTemplateOutlet, NgSwitch } from '@angular/common';
 import * as i0 from '@angular/core';
-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';
+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';
 import * as i1 from '@angular/forms';
-import { FormsModule, FormGroup, FormControl, ReactiveFormsModule, ControlContainer } from '@angular/forms';
+import { FormsModule, FormGroup, FormControl, ReactiveFormsModule, ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { interval, map, of, debounceTime, distinctUntilChanged, switchMap, iif, isObservable, Subject, startWith, takeUntil } from 'rxjs';
@@ -2273,6 +2273,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
+class ToggleComponent {
+    size = 'md';
+    label;
+    labelPosition = 'right';
+    ariaLabel;
+    get isSm() {
+        return this.size === 'sm';
+    }
+    get isMd() {
+        return this.size === 'md';
+    }
+    get isLg() {
+        return this.size === 'lg';
+    }
+    checked = false;
+    isDisabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.checked = !this.checked;
+        this.onChange(this.checked);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.checked = !!value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ToggleComponent),
+                multi: true,
+            },
+        ], 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-toggle', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            multi: true,
+                        },
+                    ], 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"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], isSm: [{
+                type: HostBinding,
+                args: ['class.size-sm']
+            }], isMd: [{
+                type: HostBinding,
+                args: ['class.size-md']
+            }], isLg: [{
+                type: HostBinding,
+                args: ['class.size-lg']
+            }] } });
+
 /*
  * Public API Surface of ud-components
  */
@@ -2282,5 +2356,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=ud-components.mjs.map