ngx-opalbytes-components 1.25.0 → 1.26.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.
- package/README.md +329 -0
- package/fesm2022/ngx-opalbytes-components.mjs +626 -5
- package/fesm2022/ngx-opalbytes-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/shared/components/index.ts +3 -0
- package/src/lib/shared/components/radio/radio-button.component.css +95 -0
- package/src/lib/shared/components/radio/radio-button.component.html +32 -0
- package/src/lib/shared/components/radio/radio-button.component.ts +133 -0
- package/src/lib/shared/components/radio/radio-button.stories.ts +94 -0
- package/src/lib/shared/components/radio/radio-group.component.css +21 -0
- package/src/lib/shared/components/radio/radio-group.component.ts +216 -0
- package/src/lib/shared/components/radio/radio.component.spec.ts +128 -0
- package/src/lib/shared/components/radio/radio.stories.ts +128 -0
- package/src/lib/shared/components/slide-toggle/slide-toggle.component.css +135 -0
- package/src/lib/shared/components/slide-toggle/slide-toggle.component.html +48 -0
- package/src/lib/shared/components/slide-toggle/slide-toggle.component.spec.ts +155 -0
- package/src/lib/shared/components/slide-toggle/slide-toggle.component.ts +233 -0
- package/src/lib/shared/components/slide-toggle/slide-toggle.stories.ts +165 -0
- package/types/ngx-opalbytes-components.d.ts +161 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Injectable, output, DestroyRef } from '@angular/core';
|
|
4
|
+
import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Optional, Inject, Injectable, output, DestroyRef } from '@angular/core';
|
|
5
5
|
import * as i3 from '@angular/material/tooltip';
|
|
6
6
|
import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
|
|
7
7
|
import { LucideDynamicIcon } from '@lucide/angular';
|
|
@@ -2322,6 +2322,626 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2322
2322
|
args: ["checkbox"]
|
|
2323
2323
|
}] } });
|
|
2324
2324
|
|
|
2325
|
+
class CaoSlideToggleComponent {
|
|
2326
|
+
checked = false;
|
|
2327
|
+
isDisabled = false;
|
|
2328
|
+
label = "";
|
|
2329
|
+
labelPosition = "after";
|
|
2330
|
+
name = "";
|
|
2331
|
+
id = "";
|
|
2332
|
+
ariaLabel = "";
|
|
2333
|
+
dataCy = "";
|
|
2334
|
+
required = false;
|
|
2335
|
+
trackColor;
|
|
2336
|
+
trackCheckedColor;
|
|
2337
|
+
thumbColor;
|
|
2338
|
+
thumbCheckedColor;
|
|
2339
|
+
disabledTrackColor;
|
|
2340
|
+
disabledThumbColor;
|
|
2341
|
+
labelColor;
|
|
2342
|
+
disabledLabelColor;
|
|
2343
|
+
focusRingColor;
|
|
2344
|
+
trackWidth;
|
|
2345
|
+
trackHeight;
|
|
2346
|
+
thumbSize;
|
|
2347
|
+
animationDuration;
|
|
2348
|
+
thumbIcon = "";
|
|
2349
|
+
thumbCheckedIcon = "";
|
|
2350
|
+
isLucideThumbIcon = false;
|
|
2351
|
+
thumbIconColor = "";
|
|
2352
|
+
thumbCheckedIconColor = "";
|
|
2353
|
+
thumbIconSize = 12;
|
|
2354
|
+
thumbIconStrokeWidth = 2;
|
|
2355
|
+
set disabled(value) {
|
|
2356
|
+
this.isDisabled = value;
|
|
2357
|
+
this.cdr.markForCheck();
|
|
2358
|
+
}
|
|
2359
|
+
get disabled() {
|
|
2360
|
+
return this.isDisabled;
|
|
2361
|
+
}
|
|
2362
|
+
checkedChange = new EventEmitter();
|
|
2363
|
+
toggleChange = new EventEmitter();
|
|
2364
|
+
cdr = inject(ChangeDetectorRef);
|
|
2365
|
+
onChange = () => { };
|
|
2366
|
+
onTouched = () => { };
|
|
2367
|
+
get resolvedThumbIcon() {
|
|
2368
|
+
return this.checked && this.thumbCheckedIcon
|
|
2369
|
+
? this.thumbCheckedIcon
|
|
2370
|
+
: this.thumbIcon;
|
|
2371
|
+
}
|
|
2372
|
+
get resolvedThumbIconColor() {
|
|
2373
|
+
return this.checked
|
|
2374
|
+
? this.thumbCheckedIconColor || this.thumbIconColor
|
|
2375
|
+
: this.thumbIconColor;
|
|
2376
|
+
}
|
|
2377
|
+
get hostStyles() {
|
|
2378
|
+
const styles = {};
|
|
2379
|
+
if (this.trackColor) {
|
|
2380
|
+
styles["--cao-slide-toggle-track"] = this.trackColor;
|
|
2381
|
+
}
|
|
2382
|
+
if (this.trackCheckedColor) {
|
|
2383
|
+
styles["--cao-slide-toggle-track-checked"] = this.trackCheckedColor;
|
|
2384
|
+
}
|
|
2385
|
+
if (this.thumbColor) {
|
|
2386
|
+
styles["--cao-slide-toggle-thumb"] = this.thumbColor;
|
|
2387
|
+
}
|
|
2388
|
+
if (this.thumbCheckedColor) {
|
|
2389
|
+
styles["--cao-slide-toggle-thumb-checked"] = this.thumbCheckedColor;
|
|
2390
|
+
}
|
|
2391
|
+
if (this.disabledTrackColor) {
|
|
2392
|
+
styles["--cao-slide-toggle-track-disabled"] = this.disabledTrackColor;
|
|
2393
|
+
}
|
|
2394
|
+
if (this.disabledThumbColor) {
|
|
2395
|
+
styles["--cao-slide-toggle-thumb-disabled"] = this.disabledThumbColor;
|
|
2396
|
+
}
|
|
2397
|
+
if (this.labelColor) {
|
|
2398
|
+
styles["--cao-slide-toggle-label"] = this.labelColor;
|
|
2399
|
+
}
|
|
2400
|
+
if (this.disabledLabelColor) {
|
|
2401
|
+
styles["--cao-slide-toggle-label-disabled"] = this.disabledLabelColor;
|
|
2402
|
+
}
|
|
2403
|
+
if (this.focusRingColor) {
|
|
2404
|
+
styles["--cao-slide-toggle-focus-ring"] = this.focusRingColor;
|
|
2405
|
+
}
|
|
2406
|
+
if (this.trackWidth) {
|
|
2407
|
+
styles["--cao-slide-toggle-track-width"] = this.trackWidth;
|
|
2408
|
+
}
|
|
2409
|
+
if (this.trackHeight) {
|
|
2410
|
+
styles["--cao-slide-toggle-track-height"] = this.trackHeight;
|
|
2411
|
+
}
|
|
2412
|
+
if (this.thumbSize) {
|
|
2413
|
+
styles["--cao-slide-toggle-thumb-size"] = this.thumbSize;
|
|
2414
|
+
}
|
|
2415
|
+
if (this.animationDuration) {
|
|
2416
|
+
styles["--cao-slide-toggle-duration"] = this.animationDuration;
|
|
2417
|
+
}
|
|
2418
|
+
if (this.resolvedThumbIconColor) {
|
|
2419
|
+
styles["--cao-slide-toggle-thumb-icon-color"] = this.resolvedThumbIconColor;
|
|
2420
|
+
}
|
|
2421
|
+
styles["--cao-slide-toggle-thumb-icon-size"] = this.toCssLength(this.thumbIconSize);
|
|
2422
|
+
return styles;
|
|
2423
|
+
}
|
|
2424
|
+
toggle() {
|
|
2425
|
+
if (this.isDisabled) {
|
|
2426
|
+
return;
|
|
2427
|
+
}
|
|
2428
|
+
this.updateChecked(!this.checked, true);
|
|
2429
|
+
}
|
|
2430
|
+
setChecked(value) {
|
|
2431
|
+
if (this.isDisabled) {
|
|
2432
|
+
return;
|
|
2433
|
+
}
|
|
2434
|
+
this.updateChecked(value, true);
|
|
2435
|
+
}
|
|
2436
|
+
enable() {
|
|
2437
|
+
this.isDisabled = false;
|
|
2438
|
+
this.cdr.markForCheck();
|
|
2439
|
+
}
|
|
2440
|
+
disable() {
|
|
2441
|
+
this.isDisabled = true;
|
|
2442
|
+
this.cdr.markForCheck();
|
|
2443
|
+
}
|
|
2444
|
+
onInputChange(event) {
|
|
2445
|
+
const target = event.target;
|
|
2446
|
+
this.updateChecked(target.checked, true);
|
|
2447
|
+
}
|
|
2448
|
+
onEnter(event) {
|
|
2449
|
+
if (this.isDisabled) {
|
|
2450
|
+
return;
|
|
2451
|
+
}
|
|
2452
|
+
event.preventDefault();
|
|
2453
|
+
this.toggle();
|
|
2454
|
+
}
|
|
2455
|
+
onBlur() {
|
|
2456
|
+
this.onTouched();
|
|
2457
|
+
}
|
|
2458
|
+
writeValue(value) {
|
|
2459
|
+
this.checked = !!value;
|
|
2460
|
+
this.cdr.markForCheck();
|
|
2461
|
+
}
|
|
2462
|
+
registerOnChange(fn) {
|
|
2463
|
+
this.onChange = fn;
|
|
2464
|
+
}
|
|
2465
|
+
registerOnTouched(fn) {
|
|
2466
|
+
this.onTouched = fn;
|
|
2467
|
+
}
|
|
2468
|
+
setDisabledState(isDisabled) {
|
|
2469
|
+
this.isDisabled = isDisabled;
|
|
2470
|
+
this.cdr.markForCheck();
|
|
2471
|
+
}
|
|
2472
|
+
toCssLength(value) {
|
|
2473
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
2474
|
+
}
|
|
2475
|
+
updateChecked(value, emit) {
|
|
2476
|
+
if (this.isDisabled) {
|
|
2477
|
+
return;
|
|
2478
|
+
}
|
|
2479
|
+
this.checked = value;
|
|
2480
|
+
this.onChange(value);
|
|
2481
|
+
if (emit) {
|
|
2482
|
+
this.checkedChange.emit(value);
|
|
2483
|
+
this.toggleChange.emit({ checked: value, source: this });
|
|
2484
|
+
}
|
|
2485
|
+
this.cdr.markForCheck();
|
|
2486
|
+
}
|
|
2487
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2488
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoSlideToggleComponent, isStandalone: true, selector: "cao-slide-toggle", inputs: { checked: "checked", isDisabled: "isDisabled", label: "label", labelPosition: "labelPosition", name: "name", id: "id", ariaLabel: "ariaLabel", dataCy: "dataCy", required: "required", trackColor: "trackColor", trackCheckedColor: "trackCheckedColor", thumbColor: "thumbColor", thumbCheckedColor: "thumbCheckedColor", disabledTrackColor: "disabledTrackColor", disabledThumbColor: "disabledThumbColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", trackWidth: "trackWidth", trackHeight: "trackHeight", thumbSize: "thumbSize", animationDuration: "animationDuration", thumbIcon: "thumbIcon", thumbCheckedIcon: "thumbCheckedIcon", isLucideThumbIcon: "isLucideThumbIcon", thumbIconColor: "thumbIconColor", thumbCheckedIconColor: "thumbCheckedIconColor", thumbIconSize: "thumbIconSize", thumbIconStrokeWidth: "thumbIconStrokeWidth", disabled: "disabled" }, outputs: { checkedChange: "checkedChange", toggleChange: "toggleChange" }, host: { properties: { "style": "this.hostStyles" } }, providers: [
|
|
2489
|
+
{
|
|
2490
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2491
|
+
useExisting: forwardRef(() => CaoSlideToggleComponent),
|
|
2492
|
+
multi: true,
|
|
2493
|
+
},
|
|
2494
|
+
], ngImport: i0, template: "<label\n class=\"cao-slide-toggle\"\n [class.cao-slide-toggle--checked]=\"checked\"\n [class.cao-slide-toggle--disabled]=\"isDisabled\"\n [class.cao-slide-toggle--label-before]=\"labelPosition === 'before'\">\n <input\n #input\n class=\"cao-slide-toggle__input\"\n type=\"checkbox\"\n role=\"switch\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled\"\n [required]=\"required\"\n [attr.name]=\"name || null\"\n [attr.id]=\"id || null\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-cy]=\"dataCy || null\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter($event)\" />\n\n <span class=\"cao-slide-toggle__track\" aria-hidden=\"true\">\n <span class=\"cao-slide-toggle__thumb\">\n @if (resolvedThumbIcon) {\n @if (isLucideThumbIcon) {\n <svg\n class=\"cao-slide-toggle__thumb-icon\"\n [lucideIcon]=\"resolvedThumbIcon\"\n [size]=\"thumbIconSize\"\n [strokeWidth]=\"thumbIconStrokeWidth\"></svg>\n } @else {\n <img\n class=\"cao-slide-toggle__thumb-icon\"\n alt=\"\"\n [src]=\"resolvedThumbIcon\" />\n }\n }\n </span>\n </span>\n\n <span class=\"cao-slide-toggle__label\">\n @if (label) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n</label>\n", styles: [":host{--cao-slide-toggle-track: #d1d5db;--cao-slide-toggle-track-checked: #4f46e5;--cao-slide-toggle-thumb: #ffffff;--cao-slide-toggle-thumb-checked: #ffffff;--cao-slide-toggle-track-disabled: #e5e7eb;--cao-slide-toggle-thumb-disabled: #f3f4f6;--cao-slide-toggle-label: #111827;--cao-slide-toggle-label-disabled: #9ca3af;--cao-slide-toggle-focus-ring: rgba(79, 70, 229, .35);--cao-slide-toggle-track-width: 36px;--cao-slide-toggle-track-height: 20px;--cao-slide-toggle-thumb-size: 16px;--cao-slide-toggle-thumb-icon-size: 12px;--cao-slide-toggle-thumb-icon-color: currentColor;--cao-slide-toggle-duration: .2s;display:inline-flex}.cao-slide-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-slide-toggle--disabled{cursor:not-allowed}.cao-slide-toggle__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-slide-toggle__track{position:relative;flex:none;width:var(--cao-slide-toggle-track-width);height:var(--cao-slide-toggle-track-height);border-radius:999px;background-color:var(--cao-slide-toggle-track);transition:background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb{position:absolute;top:50%;left:2px;display:flex;align-items:center;justify-content:center;width:var(--cao-slide-toggle-thumb-size);height:var(--cao-slide-toggle-thumb-size);overflow:hidden;border-radius:50%;background-color:var(--cao-slide-toggle-thumb);transform:translateY(-50%);transition:transform var(--cao-slide-toggle-duration) ease,background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb-icon{flex:none;width:var(--cao-slide-toggle-thumb-icon-size);height:var(--cao-slide-toggle-thumb-icon-size);color:var(--cao-slide-toggle-thumb-icon-color);pointer-events:none;object-fit:contain}.cao-slide-toggle__label{color:var(--cao-slide-toggle-label);font-size:.875rem;line-height:1.25rem}.cao-slide-toggle__label:empty{display:none}.cao-slide-toggle--checked .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-checked)}.cao-slide-toggle--checked .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-checked);transform:translate(calc(var(--cao-slide-toggle-track-width) - var(--cao-slide-toggle-thumb-size) - 4px),-50%)}.cao-slide-toggle--disabled .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb-icon{opacity:.65}.cao-slide-toggle--disabled .cao-slide-toggle__label{color:var(--cao-slide-toggle-label-disabled)}.cao-slide-toggle__input:focus-visible+.cao-slide-toggle__track{box-shadow:0 0 0 3px var(--cao-slide-toggle-focus-ring)}.cao-slide-toggle--label-before .cao-slide-toggle__track{order:2}.cao-slide-toggle--label-before .cao-slide-toggle__label{order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2495
|
+
}
|
|
2496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoSlideToggleComponent, decorators: [{
|
|
2497
|
+
type: Component,
|
|
2498
|
+
args: [{ selector: "cao-slide-toggle", standalone: true, imports: [CommonModule, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2499
|
+
{
|
|
2500
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2501
|
+
useExisting: forwardRef(() => CaoSlideToggleComponent),
|
|
2502
|
+
multi: true,
|
|
2503
|
+
},
|
|
2504
|
+
], template: "<label\n class=\"cao-slide-toggle\"\n [class.cao-slide-toggle--checked]=\"checked\"\n [class.cao-slide-toggle--disabled]=\"isDisabled\"\n [class.cao-slide-toggle--label-before]=\"labelPosition === 'before'\">\n <input\n #input\n class=\"cao-slide-toggle__input\"\n type=\"checkbox\"\n role=\"switch\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled\"\n [required]=\"required\"\n [attr.name]=\"name || null\"\n [attr.id]=\"id || null\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-cy]=\"dataCy || null\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter($event)\" />\n\n <span class=\"cao-slide-toggle__track\" aria-hidden=\"true\">\n <span class=\"cao-slide-toggle__thumb\">\n @if (resolvedThumbIcon) {\n @if (isLucideThumbIcon) {\n <svg\n class=\"cao-slide-toggle__thumb-icon\"\n [lucideIcon]=\"resolvedThumbIcon\"\n [size]=\"thumbIconSize\"\n [strokeWidth]=\"thumbIconStrokeWidth\"></svg>\n } @else {\n <img\n class=\"cao-slide-toggle__thumb-icon\"\n alt=\"\"\n [src]=\"resolvedThumbIcon\" />\n }\n }\n </span>\n </span>\n\n <span class=\"cao-slide-toggle__label\">\n @if (label) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n</label>\n", styles: [":host{--cao-slide-toggle-track: #d1d5db;--cao-slide-toggle-track-checked: #4f46e5;--cao-slide-toggle-thumb: #ffffff;--cao-slide-toggle-thumb-checked: #ffffff;--cao-slide-toggle-track-disabled: #e5e7eb;--cao-slide-toggle-thumb-disabled: #f3f4f6;--cao-slide-toggle-label: #111827;--cao-slide-toggle-label-disabled: #9ca3af;--cao-slide-toggle-focus-ring: rgba(79, 70, 229, .35);--cao-slide-toggle-track-width: 36px;--cao-slide-toggle-track-height: 20px;--cao-slide-toggle-thumb-size: 16px;--cao-slide-toggle-thumb-icon-size: 12px;--cao-slide-toggle-thumb-icon-color: currentColor;--cao-slide-toggle-duration: .2s;display:inline-flex}.cao-slide-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-slide-toggle--disabled{cursor:not-allowed}.cao-slide-toggle__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-slide-toggle__track{position:relative;flex:none;width:var(--cao-slide-toggle-track-width);height:var(--cao-slide-toggle-track-height);border-radius:999px;background-color:var(--cao-slide-toggle-track);transition:background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb{position:absolute;top:50%;left:2px;display:flex;align-items:center;justify-content:center;width:var(--cao-slide-toggle-thumb-size);height:var(--cao-slide-toggle-thumb-size);overflow:hidden;border-radius:50%;background-color:var(--cao-slide-toggle-thumb);transform:translateY(-50%);transition:transform var(--cao-slide-toggle-duration) ease,background-color var(--cao-slide-toggle-duration) ease}.cao-slide-toggle__thumb-icon{flex:none;width:var(--cao-slide-toggle-thumb-icon-size);height:var(--cao-slide-toggle-thumb-icon-size);color:var(--cao-slide-toggle-thumb-icon-color);pointer-events:none;object-fit:contain}.cao-slide-toggle__label{color:var(--cao-slide-toggle-label);font-size:.875rem;line-height:1.25rem}.cao-slide-toggle__label:empty{display:none}.cao-slide-toggle--checked .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-checked)}.cao-slide-toggle--checked .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-checked);transform:translate(calc(var(--cao-slide-toggle-track-width) - var(--cao-slide-toggle-thumb-size) - 4px),-50%)}.cao-slide-toggle--disabled .cao-slide-toggle__track{background-color:var(--cao-slide-toggle-track-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb{background-color:var(--cao-slide-toggle-thumb-disabled)}.cao-slide-toggle--disabled .cao-slide-toggle__thumb-icon{opacity:.65}.cao-slide-toggle--disabled .cao-slide-toggle__label{color:var(--cao-slide-toggle-label-disabled)}.cao-slide-toggle__input:focus-visible+.cao-slide-toggle__track{box-shadow:0 0 0 3px var(--cao-slide-toggle-focus-ring)}.cao-slide-toggle--label-before .cao-slide-toggle__track{order:2}.cao-slide-toggle--label-before .cao-slide-toggle__label{order:1}\n"] }]
|
|
2505
|
+
}], propDecorators: { checked: [{
|
|
2506
|
+
type: Input
|
|
2507
|
+
}], isDisabled: [{
|
|
2508
|
+
type: Input
|
|
2509
|
+
}], label: [{
|
|
2510
|
+
type: Input
|
|
2511
|
+
}], labelPosition: [{
|
|
2512
|
+
type: Input
|
|
2513
|
+
}], name: [{
|
|
2514
|
+
type: Input
|
|
2515
|
+
}], id: [{
|
|
2516
|
+
type: Input
|
|
2517
|
+
}], ariaLabel: [{
|
|
2518
|
+
type: Input
|
|
2519
|
+
}], dataCy: [{
|
|
2520
|
+
type: Input
|
|
2521
|
+
}], required: [{
|
|
2522
|
+
type: Input
|
|
2523
|
+
}], trackColor: [{
|
|
2524
|
+
type: Input
|
|
2525
|
+
}], trackCheckedColor: [{
|
|
2526
|
+
type: Input
|
|
2527
|
+
}], thumbColor: [{
|
|
2528
|
+
type: Input
|
|
2529
|
+
}], thumbCheckedColor: [{
|
|
2530
|
+
type: Input
|
|
2531
|
+
}], disabledTrackColor: [{
|
|
2532
|
+
type: Input
|
|
2533
|
+
}], disabledThumbColor: [{
|
|
2534
|
+
type: Input
|
|
2535
|
+
}], labelColor: [{
|
|
2536
|
+
type: Input
|
|
2537
|
+
}], disabledLabelColor: [{
|
|
2538
|
+
type: Input
|
|
2539
|
+
}], focusRingColor: [{
|
|
2540
|
+
type: Input
|
|
2541
|
+
}], trackWidth: [{
|
|
2542
|
+
type: Input
|
|
2543
|
+
}], trackHeight: [{
|
|
2544
|
+
type: Input
|
|
2545
|
+
}], thumbSize: [{
|
|
2546
|
+
type: Input
|
|
2547
|
+
}], animationDuration: [{
|
|
2548
|
+
type: Input
|
|
2549
|
+
}], thumbIcon: [{
|
|
2550
|
+
type: Input
|
|
2551
|
+
}], thumbCheckedIcon: [{
|
|
2552
|
+
type: Input
|
|
2553
|
+
}], isLucideThumbIcon: [{
|
|
2554
|
+
type: Input
|
|
2555
|
+
}], thumbIconColor: [{
|
|
2556
|
+
type: Input
|
|
2557
|
+
}], thumbCheckedIconColor: [{
|
|
2558
|
+
type: Input
|
|
2559
|
+
}], thumbIconSize: [{
|
|
2560
|
+
type: Input
|
|
2561
|
+
}], thumbIconStrokeWidth: [{
|
|
2562
|
+
type: Input
|
|
2563
|
+
}], disabled: [{
|
|
2564
|
+
type: Input
|
|
2565
|
+
}], checkedChange: [{
|
|
2566
|
+
type: Output
|
|
2567
|
+
}], toggleChange: [{
|
|
2568
|
+
type: Output
|
|
2569
|
+
}], hostStyles: [{
|
|
2570
|
+
type: HostBinding,
|
|
2571
|
+
args: ["style"]
|
|
2572
|
+
}] } });
|
|
2573
|
+
|
|
2574
|
+
let nextRadioGroupId = 0;
|
|
2575
|
+
class CaoRadioGroupComponent {
|
|
2576
|
+
value = undefined;
|
|
2577
|
+
name = "";
|
|
2578
|
+
isDisabled = false;
|
|
2579
|
+
required = false;
|
|
2580
|
+
orientation = "vertical";
|
|
2581
|
+
labelPosition = "after";
|
|
2582
|
+
compareWith = (option, value) => option === value;
|
|
2583
|
+
color;
|
|
2584
|
+
unselectedColor;
|
|
2585
|
+
disabledColor;
|
|
2586
|
+
labelColor;
|
|
2587
|
+
disabledLabelColor;
|
|
2588
|
+
focusRingColor;
|
|
2589
|
+
size;
|
|
2590
|
+
animationDuration;
|
|
2591
|
+
gap;
|
|
2592
|
+
ariaLabel = "";
|
|
2593
|
+
ariaLabelledBy = "";
|
|
2594
|
+
dataCy = "";
|
|
2595
|
+
set disabled(value) {
|
|
2596
|
+
this.isDisabled = value;
|
|
2597
|
+
this.cdr.markForCheck();
|
|
2598
|
+
}
|
|
2599
|
+
get disabled() {
|
|
2600
|
+
return this.isDisabled;
|
|
2601
|
+
}
|
|
2602
|
+
valueChange = new EventEmitter();
|
|
2603
|
+
selectionChange = new EventEmitter();
|
|
2604
|
+
resolvedName = `cao-radio-group-${nextRadioGroupId++}`;
|
|
2605
|
+
cdr = inject(ChangeDetectorRef);
|
|
2606
|
+
formDisabled = false;
|
|
2607
|
+
onChange = () => { };
|
|
2608
|
+
onTouched = () => { };
|
|
2609
|
+
get isEffectivelyDisabled() {
|
|
2610
|
+
return this.isDisabled || this.formDisabled;
|
|
2611
|
+
}
|
|
2612
|
+
role = "radiogroup";
|
|
2613
|
+
get isHorizontal() {
|
|
2614
|
+
return this.orientation === "horizontal";
|
|
2615
|
+
}
|
|
2616
|
+
get isDisabledClass() {
|
|
2617
|
+
return this.isEffectivelyDisabled;
|
|
2618
|
+
}
|
|
2619
|
+
get ariaLabelAttr() {
|
|
2620
|
+
return this.ariaLabel || null;
|
|
2621
|
+
}
|
|
2622
|
+
get ariaLabelledByAttr() {
|
|
2623
|
+
return this.ariaLabelledBy || null;
|
|
2624
|
+
}
|
|
2625
|
+
get ariaDisabledAttr() {
|
|
2626
|
+
return this.isEffectivelyDisabled || null;
|
|
2627
|
+
}
|
|
2628
|
+
get ariaRequiredAttr() {
|
|
2629
|
+
return this.required || null;
|
|
2630
|
+
}
|
|
2631
|
+
get dataCyAttr() {
|
|
2632
|
+
return this.dataCy || null;
|
|
2633
|
+
}
|
|
2634
|
+
get hostStyles() {
|
|
2635
|
+
const styles = {};
|
|
2636
|
+
if (this.color) {
|
|
2637
|
+
styles["--cao-radio-color"] = this.color;
|
|
2638
|
+
}
|
|
2639
|
+
if (this.unselectedColor) {
|
|
2640
|
+
styles["--cao-radio-unselected"] = this.unselectedColor;
|
|
2641
|
+
}
|
|
2642
|
+
if (this.disabledColor) {
|
|
2643
|
+
styles["--cao-radio-disabled"] = this.disabledColor;
|
|
2644
|
+
}
|
|
2645
|
+
if (this.labelColor) {
|
|
2646
|
+
styles["--cao-radio-label"] = this.labelColor;
|
|
2647
|
+
}
|
|
2648
|
+
if (this.disabledLabelColor) {
|
|
2649
|
+
styles["--cao-radio-label-disabled"] = this.disabledLabelColor;
|
|
2650
|
+
}
|
|
2651
|
+
if (this.focusRingColor) {
|
|
2652
|
+
styles["--cao-radio-focus-ring"] = this.focusRingColor;
|
|
2653
|
+
}
|
|
2654
|
+
if (this.size) {
|
|
2655
|
+
styles["--cao-radio-size"] = this.size;
|
|
2656
|
+
}
|
|
2657
|
+
if (this.animationDuration) {
|
|
2658
|
+
styles["--cao-radio-duration"] = this.animationDuration;
|
|
2659
|
+
}
|
|
2660
|
+
if (this.gap) {
|
|
2661
|
+
styles["--cao-radio-gap"] = this.gap;
|
|
2662
|
+
}
|
|
2663
|
+
return styles;
|
|
2664
|
+
}
|
|
2665
|
+
get groupName() {
|
|
2666
|
+
return this.name || this.resolvedName;
|
|
2667
|
+
}
|
|
2668
|
+
isValueSelected(value) {
|
|
2669
|
+
return this.compareWith(this.value, value);
|
|
2670
|
+
}
|
|
2671
|
+
select(button) {
|
|
2672
|
+
if (this.isEffectivelyDisabled || button.effectiveDisabled) {
|
|
2673
|
+
return;
|
|
2674
|
+
}
|
|
2675
|
+
if (this.compareWith(this.value, button.value)) {
|
|
2676
|
+
this.markAsTouched();
|
|
2677
|
+
return;
|
|
2678
|
+
}
|
|
2679
|
+
this.value = button.value;
|
|
2680
|
+
this.onChange(this.value);
|
|
2681
|
+
this.valueChange.emit(this.value);
|
|
2682
|
+
this.selectionChange.emit({ value: this.value, source: button });
|
|
2683
|
+
this.markAsTouched();
|
|
2684
|
+
this.cdr.markForCheck();
|
|
2685
|
+
}
|
|
2686
|
+
markAsTouched() {
|
|
2687
|
+
this.onTouched();
|
|
2688
|
+
}
|
|
2689
|
+
enable() {
|
|
2690
|
+
this.isDisabled = false;
|
|
2691
|
+
this.cdr.markForCheck();
|
|
2692
|
+
}
|
|
2693
|
+
disable() {
|
|
2694
|
+
this.isDisabled = true;
|
|
2695
|
+
this.cdr.markForCheck();
|
|
2696
|
+
}
|
|
2697
|
+
writeValue(value) {
|
|
2698
|
+
this.value = value;
|
|
2699
|
+
this.cdr.markForCheck();
|
|
2700
|
+
}
|
|
2701
|
+
registerOnChange(fn) {
|
|
2702
|
+
this.onChange = fn;
|
|
2703
|
+
}
|
|
2704
|
+
registerOnTouched(fn) {
|
|
2705
|
+
this.onTouched = fn;
|
|
2706
|
+
}
|
|
2707
|
+
setDisabledState(isDisabled) {
|
|
2708
|
+
this.formDisabled = isDisabled;
|
|
2709
|
+
this.cdr.markForCheck();
|
|
2710
|
+
}
|
|
2711
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoRadioGroupComponent, isStandalone: true, selector: "cao-radio-group", inputs: { value: "value", name: "name", isDisabled: "isDisabled", required: "required", orientation: "orientation", labelPosition: "labelPosition", compareWith: "compareWith", color: "color", unselectedColor: "unselectedColor", disabledColor: "disabledColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", size: "size", animationDuration: "animationDuration", gap: "gap", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dataCy: "dataCy", disabled: "disabled" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "attr.role": "this.role", "class.cao-radio-group--horizontal": "this.isHorizontal", "class.cao-radio-group--disabled": "this.isDisabledClass", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-labelledby": "this.ariaLabelledByAttr", "attr.aria-disabled": "this.ariaDisabledAttr", "attr.aria-required": "this.ariaRequiredAttr", "attr.data-cy": "this.dataCyAttr", "style": "this.hostStyles" } }, providers: [
|
|
2713
|
+
{
|
|
2714
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2715
|
+
useExisting: forwardRef(() => CaoRadioGroupComponent),
|
|
2716
|
+
multi: true,
|
|
2717
|
+
},
|
|
2718
|
+
], ngImport: i0, template: "<ng-content />", isInline: true, styles: [":host{--cao-radio-color: #4f46e5;--cao-radio-unselected: #6b7280;--cao-radio-disabled: #d1d5db;--cao-radio-label: #111827;--cao-radio-label-disabled: #9ca3af;--cao-radio-focus-ring: rgba(79, 70, 229, .35);--cao-radio-size: 20px;--cao-radio-duration: .2s;--cao-radio-gap: 8px;display:flex;flex-direction:column;gap:var(--cao-radio-gap)}:host(.cao-radio-group--horizontal){flex-direction:row;flex-wrap:wrap;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2719
|
+
}
|
|
2720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioGroupComponent, decorators: [{
|
|
2721
|
+
type: Component,
|
|
2722
|
+
args: [{ selector: "cao-radio-group", standalone: true, template: "<ng-content />", providers: [
|
|
2723
|
+
{
|
|
2724
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2725
|
+
useExisting: forwardRef(() => CaoRadioGroupComponent),
|
|
2726
|
+
multi: true,
|
|
2727
|
+
},
|
|
2728
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--cao-radio-color: #4f46e5;--cao-radio-unselected: #6b7280;--cao-radio-disabled: #d1d5db;--cao-radio-label: #111827;--cao-radio-label-disabled: #9ca3af;--cao-radio-focus-ring: rgba(79, 70, 229, .35);--cao-radio-size: 20px;--cao-radio-duration: .2s;--cao-radio-gap: 8px;display:flex;flex-direction:column;gap:var(--cao-radio-gap)}:host(.cao-radio-group--horizontal){flex-direction:row;flex-wrap:wrap;align-items:center}\n"] }]
|
|
2729
|
+
}], propDecorators: { value: [{
|
|
2730
|
+
type: Input
|
|
2731
|
+
}], name: [{
|
|
2732
|
+
type: Input
|
|
2733
|
+
}], isDisabled: [{
|
|
2734
|
+
type: Input
|
|
2735
|
+
}], required: [{
|
|
2736
|
+
type: Input
|
|
2737
|
+
}], orientation: [{
|
|
2738
|
+
type: Input
|
|
2739
|
+
}], labelPosition: [{
|
|
2740
|
+
type: Input
|
|
2741
|
+
}], compareWith: [{
|
|
2742
|
+
type: Input
|
|
2743
|
+
}], color: [{
|
|
2744
|
+
type: Input
|
|
2745
|
+
}], unselectedColor: [{
|
|
2746
|
+
type: Input
|
|
2747
|
+
}], disabledColor: [{
|
|
2748
|
+
type: Input
|
|
2749
|
+
}], labelColor: [{
|
|
2750
|
+
type: Input
|
|
2751
|
+
}], disabledLabelColor: [{
|
|
2752
|
+
type: Input
|
|
2753
|
+
}], focusRingColor: [{
|
|
2754
|
+
type: Input
|
|
2755
|
+
}], size: [{
|
|
2756
|
+
type: Input
|
|
2757
|
+
}], animationDuration: [{
|
|
2758
|
+
type: Input
|
|
2759
|
+
}], gap: [{
|
|
2760
|
+
type: Input
|
|
2761
|
+
}], ariaLabel: [{
|
|
2762
|
+
type: Input
|
|
2763
|
+
}], ariaLabelledBy: [{
|
|
2764
|
+
type: Input
|
|
2765
|
+
}], dataCy: [{
|
|
2766
|
+
type: Input
|
|
2767
|
+
}], disabled: [{
|
|
2768
|
+
type: Input
|
|
2769
|
+
}], valueChange: [{
|
|
2770
|
+
type: Output
|
|
2771
|
+
}], selectionChange: [{
|
|
2772
|
+
type: Output
|
|
2773
|
+
}], role: [{
|
|
2774
|
+
type: HostBinding,
|
|
2775
|
+
args: ["attr.role"]
|
|
2776
|
+
}], isHorizontal: [{
|
|
2777
|
+
type: HostBinding,
|
|
2778
|
+
args: ["class.cao-radio-group--horizontal"]
|
|
2779
|
+
}], isDisabledClass: [{
|
|
2780
|
+
type: HostBinding,
|
|
2781
|
+
args: ["class.cao-radio-group--disabled"]
|
|
2782
|
+
}], ariaLabelAttr: [{
|
|
2783
|
+
type: HostBinding,
|
|
2784
|
+
args: ["attr.aria-label"]
|
|
2785
|
+
}], ariaLabelledByAttr: [{
|
|
2786
|
+
type: HostBinding,
|
|
2787
|
+
args: ["attr.aria-labelledby"]
|
|
2788
|
+
}], ariaDisabledAttr: [{
|
|
2789
|
+
type: HostBinding,
|
|
2790
|
+
args: ["attr.aria-disabled"]
|
|
2791
|
+
}], ariaRequiredAttr: [{
|
|
2792
|
+
type: HostBinding,
|
|
2793
|
+
args: ["attr.aria-required"]
|
|
2794
|
+
}], dataCyAttr: [{
|
|
2795
|
+
type: HostBinding,
|
|
2796
|
+
args: ["attr.data-cy"]
|
|
2797
|
+
}], hostStyles: [{
|
|
2798
|
+
type: HostBinding,
|
|
2799
|
+
args: ["style"]
|
|
2800
|
+
}] } });
|
|
2801
|
+
|
|
2802
|
+
let nextRadioId = 0;
|
|
2803
|
+
class CaoRadioButtonComponent {
|
|
2804
|
+
group;
|
|
2805
|
+
value = undefined;
|
|
2806
|
+
label = "";
|
|
2807
|
+
isDisabled = false;
|
|
2808
|
+
labelPosition;
|
|
2809
|
+
id = "";
|
|
2810
|
+
name = "";
|
|
2811
|
+
ariaLabel = "";
|
|
2812
|
+
ariaLabelledBy = "";
|
|
2813
|
+
dataCy = "";
|
|
2814
|
+
color;
|
|
2815
|
+
unselectedColor;
|
|
2816
|
+
disabledColor;
|
|
2817
|
+
labelColor;
|
|
2818
|
+
disabledLabelColor;
|
|
2819
|
+
focusRingColor;
|
|
2820
|
+
size;
|
|
2821
|
+
animationDuration;
|
|
2822
|
+
set disabled(value) {
|
|
2823
|
+
this.isDisabled = value;
|
|
2824
|
+
}
|
|
2825
|
+
get disabled() {
|
|
2826
|
+
return this.isDisabled;
|
|
2827
|
+
}
|
|
2828
|
+
uid = `cao-radio-${nextRadioId++}`;
|
|
2829
|
+
constructor(group) {
|
|
2830
|
+
this.group = group;
|
|
2831
|
+
}
|
|
2832
|
+
get effectiveDisabled() {
|
|
2833
|
+
return this.isDisabled || !!this.group?.isEffectivelyDisabled;
|
|
2834
|
+
}
|
|
2835
|
+
get effectiveLabelPosition() {
|
|
2836
|
+
return this.labelPosition ?? this.group?.labelPosition ?? "after";
|
|
2837
|
+
}
|
|
2838
|
+
get effectiveName() {
|
|
2839
|
+
return this.name || this.group?.groupName || this.uid;
|
|
2840
|
+
}
|
|
2841
|
+
get inputId() {
|
|
2842
|
+
return this.id || this.uid;
|
|
2843
|
+
}
|
|
2844
|
+
get isSelected() {
|
|
2845
|
+
return this.group?.isValueSelected(this.value) ?? false;
|
|
2846
|
+
}
|
|
2847
|
+
get isRequired() {
|
|
2848
|
+
return this.group?.required ?? false;
|
|
2849
|
+
}
|
|
2850
|
+
get hostStyles() {
|
|
2851
|
+
const styles = {};
|
|
2852
|
+
if (this.color) {
|
|
2853
|
+
styles["--cao-radio-color"] = this.color;
|
|
2854
|
+
}
|
|
2855
|
+
if (this.unselectedColor) {
|
|
2856
|
+
styles["--cao-radio-unselected"] = this.unselectedColor;
|
|
2857
|
+
}
|
|
2858
|
+
if (this.disabledColor) {
|
|
2859
|
+
styles["--cao-radio-disabled"] = this.disabledColor;
|
|
2860
|
+
}
|
|
2861
|
+
if (this.labelColor) {
|
|
2862
|
+
styles["--cao-radio-label"] = this.labelColor;
|
|
2863
|
+
}
|
|
2864
|
+
if (this.disabledLabelColor) {
|
|
2865
|
+
styles["--cao-radio-label-disabled"] = this.disabledLabelColor;
|
|
2866
|
+
}
|
|
2867
|
+
if (this.focusRingColor) {
|
|
2868
|
+
styles["--cao-radio-focus-ring"] = this.focusRingColor;
|
|
2869
|
+
}
|
|
2870
|
+
if (this.size) {
|
|
2871
|
+
styles["--cao-radio-size"] = this.size;
|
|
2872
|
+
}
|
|
2873
|
+
if (this.animationDuration) {
|
|
2874
|
+
styles["--cao-radio-duration"] = this.animationDuration;
|
|
2875
|
+
}
|
|
2876
|
+
return styles;
|
|
2877
|
+
}
|
|
2878
|
+
select() {
|
|
2879
|
+
if (this.effectiveDisabled) {
|
|
2880
|
+
return;
|
|
2881
|
+
}
|
|
2882
|
+
this.group?.select(this);
|
|
2883
|
+
}
|
|
2884
|
+
onBlur() {
|
|
2885
|
+
this.group?.markAsTouched();
|
|
2886
|
+
}
|
|
2887
|
+
enable() {
|
|
2888
|
+
this.isDisabled = false;
|
|
2889
|
+
}
|
|
2890
|
+
disable() {
|
|
2891
|
+
this.isDisabled = true;
|
|
2892
|
+
}
|
|
2893
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioButtonComponent, deps: [{ token: forwardRef(() => CaoRadioGroupComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoRadioButtonComponent, isStandalone: true, selector: "cao-radio-button", inputs: { value: "value", label: "label", isDisabled: "isDisabled", labelPosition: "labelPosition", id: "id", name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dataCy: "dataCy", color: "color", unselectedColor: "unselectedColor", disabledColor: "disabledColor", labelColor: "labelColor", disabledLabelColor: "disabledLabelColor", focusRingColor: "focusRingColor", size: "size", animationDuration: "animationDuration", disabled: "disabled" }, host: { properties: { "style": "this.hostStyles" } }, ngImport: i0, template: "<label\n class=\"cao-radio\"\n [class.cao-radio--checked]=\"isSelected\"\n [class.cao-radio--disabled]=\"effectiveDisabled\"\n [class.cao-radio--label-before]=\"effectiveLabelPosition === 'before'\">\n <input\n #input\n class=\"cao-radio__input\"\n type=\"radio\"\n [checked]=\"isSelected\"\n [disabled]=\"effectiveDisabled\"\n [required]=\"isRequired\"\n [attr.name]=\"effectiveName\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.data-cy]=\"dataCy || null\"\n (change)=\"select()\"\n (blur)=\"onBlur()\" />\n\n <span class=\"cao-radio__control\" aria-hidden=\"true\">\n <span class=\"cao-radio__dot\"></span>\n </span>\n\n <span class=\"cao-radio__label\">\n @if (label) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n</label>\n", styles: [":host{display:inline-flex}.cao-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-radio--disabled{cursor:not-allowed}.cao-radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-radio__control{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--cao-radio-size, 20px);height:var(--cao-radio-size, 20px);box-sizing:border-box;border:2px solid var(--cao-radio-unselected, #6b7280);border-radius:50%;transition:border-color var(--cao-radio-duration, .2s) ease}.cao-radio__dot{width:50%;height:50%;border-radius:50%;background-color:var(--cao-radio-color, #4f46e5);transform:scale(0);transition:transform var(--cao-radio-duration, .2s) ease,background-color var(--cao-radio-duration, .2s) ease}.cao-radio__label{color:var(--cao-radio-label, #111827);font-size:.875rem;line-height:1.25rem}.cao-radio__label:empty{display:none}.cao-radio:not(.cao-radio--disabled):hover .cao-radio__control,.cao-radio--checked .cao-radio__control{border-color:var(--cao-radio-color, #4f46e5)}.cao-radio--checked .cao-radio__dot{transform:scale(1)}.cao-radio--disabled .cao-radio__control{border-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__dot{background-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__label{color:var(--cao-radio-label-disabled, #9ca3af)}.cao-radio__input:focus-visible+.cao-radio__control{box-shadow:0 0 0 3px var(--cao-radio-focus-ring, rgba(79, 70, 229, .35))}.cao-radio--label-before .cao-radio__control{order:2}.cao-radio--label-before .cao-radio__label{order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2895
|
+
}
|
|
2896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoRadioButtonComponent, decorators: [{
|
|
2897
|
+
type: Component,
|
|
2898
|
+
args: [{ selector: "cao-radio-button", standalone: true, imports: [CommonModule], template: "<label\n class=\"cao-radio\"\n [class.cao-radio--checked]=\"isSelected\"\n [class.cao-radio--disabled]=\"effectiveDisabled\"\n [class.cao-radio--label-before]=\"effectiveLabelPosition === 'before'\">\n <input\n #input\n class=\"cao-radio__input\"\n type=\"radio\"\n [checked]=\"isSelected\"\n [disabled]=\"effectiveDisabled\"\n [required]=\"isRequired\"\n [attr.name]=\"effectiveName\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.data-cy]=\"dataCy || null\"\n (change)=\"select()\"\n (blur)=\"onBlur()\" />\n\n <span class=\"cao-radio__control\" aria-hidden=\"true\">\n <span class=\"cao-radio__dot\"></span>\n </span>\n\n <span class=\"cao-radio__label\">\n @if (label) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n</label>\n", styles: [":host{display:inline-flex}.cao-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.cao-radio--disabled{cursor:not-allowed}.cao-radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cao-radio__control{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--cao-radio-size, 20px);height:var(--cao-radio-size, 20px);box-sizing:border-box;border:2px solid var(--cao-radio-unselected, #6b7280);border-radius:50%;transition:border-color var(--cao-radio-duration, .2s) ease}.cao-radio__dot{width:50%;height:50%;border-radius:50%;background-color:var(--cao-radio-color, #4f46e5);transform:scale(0);transition:transform var(--cao-radio-duration, .2s) ease,background-color var(--cao-radio-duration, .2s) ease}.cao-radio__label{color:var(--cao-radio-label, #111827);font-size:.875rem;line-height:1.25rem}.cao-radio__label:empty{display:none}.cao-radio:not(.cao-radio--disabled):hover .cao-radio__control,.cao-radio--checked .cao-radio__control{border-color:var(--cao-radio-color, #4f46e5)}.cao-radio--checked .cao-radio__dot{transform:scale(1)}.cao-radio--disabled .cao-radio__control{border-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__dot{background-color:var(--cao-radio-disabled, #d1d5db)}.cao-radio--disabled .cao-radio__label{color:var(--cao-radio-label-disabled, #9ca3af)}.cao-radio__input:focus-visible+.cao-radio__control{box-shadow:0 0 0 3px var(--cao-radio-focus-ring, rgba(79, 70, 229, .35))}.cao-radio--label-before .cao-radio__control{order:2}.cao-radio--label-before .cao-radio__label{order:1}\n"] }]
|
|
2899
|
+
}], ctorParameters: () => [{ type: CaoRadioGroupComponent, decorators: [{
|
|
2900
|
+
type: Optional
|
|
2901
|
+
}, {
|
|
2902
|
+
type: Inject,
|
|
2903
|
+
args: [forwardRef(() => CaoRadioGroupComponent)]
|
|
2904
|
+
}] }], propDecorators: { value: [{
|
|
2905
|
+
type: Input
|
|
2906
|
+
}], label: [{
|
|
2907
|
+
type: Input
|
|
2908
|
+
}], isDisabled: [{
|
|
2909
|
+
type: Input
|
|
2910
|
+
}], labelPosition: [{
|
|
2911
|
+
type: Input
|
|
2912
|
+
}], id: [{
|
|
2913
|
+
type: Input
|
|
2914
|
+
}], name: [{
|
|
2915
|
+
type: Input
|
|
2916
|
+
}], ariaLabel: [{
|
|
2917
|
+
type: Input
|
|
2918
|
+
}], ariaLabelledBy: [{
|
|
2919
|
+
type: Input
|
|
2920
|
+
}], dataCy: [{
|
|
2921
|
+
type: Input
|
|
2922
|
+
}], color: [{
|
|
2923
|
+
type: Input
|
|
2924
|
+
}], unselectedColor: [{
|
|
2925
|
+
type: Input
|
|
2926
|
+
}], disabledColor: [{
|
|
2927
|
+
type: Input
|
|
2928
|
+
}], labelColor: [{
|
|
2929
|
+
type: Input
|
|
2930
|
+
}], disabledLabelColor: [{
|
|
2931
|
+
type: Input
|
|
2932
|
+
}], focusRingColor: [{
|
|
2933
|
+
type: Input
|
|
2934
|
+
}], size: [{
|
|
2935
|
+
type: Input
|
|
2936
|
+
}], animationDuration: [{
|
|
2937
|
+
type: Input
|
|
2938
|
+
}], disabled: [{
|
|
2939
|
+
type: Input
|
|
2940
|
+
}], hostStyles: [{
|
|
2941
|
+
type: HostBinding,
|
|
2942
|
+
args: ["style"]
|
|
2943
|
+
}] } });
|
|
2944
|
+
|
|
2325
2945
|
class BaseModalService {
|
|
2326
2946
|
constructor() { }
|
|
2327
2947
|
toggleModalEvent = new EventEmitter();
|
|
@@ -3531,6 +4151,7 @@ class CaoBaseWidgetComponent {
|
|
|
3531
4151
|
displaySaveButton = input(true, ...(ngDevMode ? [{ debugName: "displaySaveButton" }] : []));
|
|
3532
4152
|
displayCancelButton = input(true, ...(ngDevMode ? [{ debugName: "displayCancelButton" }] : []));
|
|
3533
4153
|
shouldCloseWhenCancel = input(true, ...(ngDevMode ? [{ debugName: "shouldCloseWhenCancel" }] : []));
|
|
4154
|
+
widgetDirection = input("right", ...(ngDevMode ? [{ debugName: "widgetDirection" }] : []));
|
|
3534
4155
|
typeCancel = input("cancel", ...(ngDevMode ? [{ debugName: "typeCancel" }] : []));
|
|
3535
4156
|
saveDisabled = input(false, ...(ngDevMode ? [{ debugName: "saveDisabled" }] : []));
|
|
3536
4157
|
saveIcon = input("arrow-right", ...(ngDevMode ? [{ debugName: "saveIcon" }] : []));
|
|
@@ -3608,12 +4229,12 @@ class CaoBaseWidgetComponent {
|
|
|
3608
4229
|
this.closeRequest.emit();
|
|
3609
4230
|
}
|
|
3610
4231
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3611
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoBaseWidgetComponent, isStandalone: true, selector: "cao-base-widget", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, widgetIcon: { classPropertyName: "widgetIcon", publicName: "widgetIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelTextButton: { classPropertyName: "cancelTextButton", publicName: "cancelTextButton", isSignal: true, isRequired: false, transformFunction: null }, saveTextButton: { classPropertyName: "saveTextButton", publicName: "saveTextButton", isSignal: true, isRequired: false, transformFunction: null }, displayActionButton: { classPropertyName: "displayActionButton", publicName: "displayActionButton", isSignal: true, isRequired: false, transformFunction: null }, displaySaveButton: { classPropertyName: "displaySaveButton", publicName: "displaySaveButton", isSignal: true, isRequired: false, transformFunction: null }, displayCancelButton: { classPropertyName: "displayCancelButton", publicName: "displayCancelButton", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseWhenCancel: { classPropertyName: "shouldCloseWhenCancel", publicName: "shouldCloseWhenCancel", isSignal: true, isRequired: false, transformFunction: null }, typeCancel: { classPropertyName: "typeCancel", publicName: "typeCancel", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveIcon: { classPropertyName: "saveIcon", publicName: "saveIcon", isSignal: true, isRequired: false, transformFunction: null }, saveIconPosition: { classPropertyName: "saveIconPosition", publicName: "saveIconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, confirmOnClose: { classPropertyName: "confirmOnClose", publicName: "confirmOnClose", isSignal: true, isRequired: false, transformFunction: null }, widgetData: { classPropertyName: "widgetData", publicName: "widgetData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", deleted: "deleted", cancelEvent: "cancelEvent", closeRequest: "closeRequest" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div\n class=\"widget-backdrop\"\n role=\"presentation\"\n tabindex=\"-1\"\n [class.widget-backdrop--closing]=\"closing()\"\n (mousedown)=\"onBackdropMouseDown($event)\"\n (mouseup)=\"onBackdropMouseUp($event)\"\n (animationend)=\"onAnimationEnd($event)\">\n <div\n class=\"widget-panel\"\n [class.widget-panel--closing]=\"closing()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\">\n <div class=\"widget-body\">\n <div class=\"widget-header\">\n <div class=\"widget-title\">\n <h1>{{ title() }}</h1>\n <h2>{{ subtitle() }}</h2>\n </div>\n <ng-content select=\"widget-title\" />\n </div>\n <div class=\"widget-scroll\">\n <ng-content />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--widget-animation-duration: .25s;display:block}.widget-backdrop{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background-color:#0006;animation:widget-fade-in var(--widget-animation-duration) ease-out}.widget-backdrop--closing{pointer-events:none;animation:widget-fade-out var(--widget-animation-duration) ease-out forwards}.widget-panel{position:relative;box-sizing:border-box;height:100%;width:90vh;max-width:520px;padding:20px;border-radius:.5rem 0 0 .5rem;background-color:var(--color-white, var(--white, #ffffff));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;animation:widget-slide-in-right var(--widget-animation-duration) ease-out}.widget-panel--closing{animation:widget-slide-out-right var(--widget-animation-duration) ease-out forwards}.widget-body{display:flex;flex-direction:column;justify-content:space-between;height:100%}.widget-header{display:flex;justify-content:space-between;align-items:start;flex-shrink:0}.widget-title{display:flex;flex-direction:column}.widget-scroll{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin}@keyframes widget-fade-in{0%{opacity:0}to{opacity:1}}@keyframes widget-fade-out{0%{opacity:1}to{opacity:0}}@keyframes widget-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes widget-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] });
|
|
4232
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoBaseWidgetComponent, isStandalone: true, selector: "cao-base-widget", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, widgetIcon: { classPropertyName: "widgetIcon", publicName: "widgetIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelTextButton: { classPropertyName: "cancelTextButton", publicName: "cancelTextButton", isSignal: true, isRequired: false, transformFunction: null }, saveTextButton: { classPropertyName: "saveTextButton", publicName: "saveTextButton", isSignal: true, isRequired: false, transformFunction: null }, displayActionButton: { classPropertyName: "displayActionButton", publicName: "displayActionButton", isSignal: true, isRequired: false, transformFunction: null }, displaySaveButton: { classPropertyName: "displaySaveButton", publicName: "displaySaveButton", isSignal: true, isRequired: false, transformFunction: null }, displayCancelButton: { classPropertyName: "displayCancelButton", publicName: "displayCancelButton", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseWhenCancel: { classPropertyName: "shouldCloseWhenCancel", publicName: "shouldCloseWhenCancel", isSignal: true, isRequired: false, transformFunction: null }, widgetDirection: { classPropertyName: "widgetDirection", publicName: "widgetDirection", isSignal: true, isRequired: false, transformFunction: null }, typeCancel: { classPropertyName: "typeCancel", publicName: "typeCancel", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveIcon: { classPropertyName: "saveIcon", publicName: "saveIcon", isSignal: true, isRequired: false, transformFunction: null }, saveIconPosition: { classPropertyName: "saveIconPosition", publicName: "saveIconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, confirmOnClose: { classPropertyName: "confirmOnClose", publicName: "confirmOnClose", isSignal: true, isRequired: false, transformFunction: null }, widgetData: { classPropertyName: "widgetData", publicName: "widgetData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", deleted: "deleted", cancelEvent: "cancelEvent", closeRequest: "closeRequest" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div\n class=\"widget-backdrop\"\n role=\"presentation\"\n tabindex=\"-1\"\n [ngClass]=\"widgetDirection()\"\n [class.widget-backdrop--closing]=\"closing()\"\n (mousedown)=\"onBackdropMouseDown($event)\"\n (mouseup)=\"onBackdropMouseUp($event)\"\n (animationend)=\"onAnimationEnd($event)\">\n <div\n class=\"widget-panel\"\n [class.widget-panel--closing]=\"closing()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\">\n <div class=\"widget-body\">\n <div class=\"widget-header\">\n <div class=\"widget-title\">\n <h1>{{ title() }}</h1>\n <h2>{{ subtitle() }}</h2>\n </div>\n <ng-content select=\"widget-title\" />\n </div>\n <div class=\"widget-scroll\">\n <ng-content />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--widget-animation-duration: .25s;display:block}.widget-backdrop{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background-color:#0006;animation:widget-fade-in var(--widget-animation-duration) ease-out}.widget-backdrop.right{justify-content:flex-end}.widget-backdrop.left{justify-content:flex-start}.widget-backdrop.top{align-items:flex-start}.widget-backdrop.bottom{align-items:flex-end}.widget-backdrop--closing{pointer-events:none;animation:widget-fade-out var(--widget-animation-duration) ease-out forwards}.widget-panel{position:relative;box-sizing:border-box;height:100%;width:90vh;max-width:520px;padding:20px;border-radius:.5rem 0 0 .5rem;background-color:var(--color-white, var(--white, #ffffff));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.widget-backdrop.left .widget-panel{border-radius:0 .5rem .5rem 0}.widget-backdrop.top .widget-panel,.widget-backdrop.bottom .widget-panel{width:100%;max-width:none;height:90vh}.widget-backdrop.top .widget-panel{border-radius:0 0 .5rem .5rem}.widget-backdrop.bottom .widget-panel{border-radius:.5rem .5rem 0 0}.widget-backdrop.right .widget-panel{animation:widget-slide-in-right var(--widget-animation-duration) ease-out}.widget-backdrop.left .widget-panel{animation:widget-slide-in-left var(--widget-animation-duration) ease-out}.widget-backdrop.top .widget-panel{animation:widget-slide-in-top var(--widget-animation-duration) ease-out}.widget-backdrop.bottom .widget-panel{animation:widget-slide-in-bottom var(--widget-animation-duration) ease-out}.widget-backdrop.right .widget-panel--closing{animation:widget-slide-out-right var(--widget-animation-duration) ease-out forwards}.widget-backdrop.left .widget-panel--closing{animation:widget-slide-out-left var(--widget-animation-duration) ease-out forwards}.widget-backdrop.top .widget-panel--closing{animation:widget-slide-out-top var(--widget-animation-duration) ease-out forwards}.widget-backdrop.bottom .widget-panel--closing{animation:widget-slide-out-bottom var(--widget-animation-duration) ease-out forwards}.widget-body{display:flex;flex-direction:column;justify-content:space-between;height:100%}.widget-header{display:flex;justify-content:space-between;align-items:start;flex-shrink:0}.widget-title{display:flex;flex-direction:column}.widget-scroll{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin}@keyframes widget-fade-in{0%{opacity:0}to{opacity:1}}@keyframes widget-fade-out{0%{opacity:1}to{opacity:0}}@keyframes widget-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes widget-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes widget-slide-in-top{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes widget-slide-in-bottom{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes widget-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes widget-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes widget-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes widget-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3612
4233
|
}
|
|
3613
4234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseWidgetComponent, decorators: [{
|
|
3614
4235
|
type: Component,
|
|
3615
|
-
args: [{ selector: "cao-base-widget", imports: [], template: "<div\n class=\"widget-backdrop\"\n role=\"presentation\"\n tabindex=\"-1\"\n [class.widget-backdrop--closing]=\"closing()\"\n (mousedown)=\"onBackdropMouseDown($event)\"\n (mouseup)=\"onBackdropMouseUp($event)\"\n (animationend)=\"onAnimationEnd($event)\">\n <div\n class=\"widget-panel\"\n [class.widget-panel--closing]=\"closing()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\">\n <div class=\"widget-body\">\n <div class=\"widget-header\">\n <div class=\"widget-title\">\n <h1>{{ title() }}</h1>\n <h2>{{ subtitle() }}</h2>\n </div>\n <ng-content select=\"widget-title\" />\n </div>\n <div class=\"widget-scroll\">\n <ng-content />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--widget-animation-duration: .25s;display:block}.widget-backdrop{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background-color:#0006;animation:widget-fade-in var(--widget-animation-duration) ease-out}.widget-backdrop--closing{pointer-events:none;animation:widget-fade-out var(--widget-animation-duration) ease-out forwards}.widget-panel{position:relative;box-sizing:border-box;height:100%;width:90vh;max-width:520px;padding:20px;border-radius:.5rem 0 0 .5rem;background-color:var(--color-white, var(--white, #ffffff));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;animation:widget-slide-in-right var(--widget-animation-duration) ease-out}.widget-panel--closing{animation:widget-slide-out-right var(--widget-animation-duration) ease-out forwards}.widget-body{display:flex;flex-direction:column;justify-content:space-between;height:100%}.widget-header{display:flex;justify-content:space-between;align-items:start;flex-shrink:0}.widget-title{display:flex;flex-direction:column}.widget-scroll{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin}@keyframes widget-fade-in{0%{opacity:0}to{opacity:1}}@keyframes widget-fade-out{0%{opacity:1}to{opacity:0}}@keyframes widget-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes widget-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] }]
|
|
3616
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], widgetIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetIcon", required: false }] }], cancelTextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelTextButton", required: false }] }], saveTextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveTextButton", required: false }] }], displayActionButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayActionButton", required: false }] }], displaySaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displaySaveButton", required: false }] }], displayCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayCancelButton", required: false }] }], shouldCloseWhenCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldCloseWhenCancel", required: false }] }], typeCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeCancel", required: false }] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], saveIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveIcon", required: false }] }], saveIconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveIconPosition", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], confirmOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmOnClose", required: false }] }], widgetData: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetData", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], onEscapeKey: [{
|
|
4236
|
+
args: [{ selector: "cao-base-widget", imports: [CommonModule], template: "<div\n class=\"widget-backdrop\"\n role=\"presentation\"\n tabindex=\"-1\"\n [ngClass]=\"widgetDirection()\"\n [class.widget-backdrop--closing]=\"closing()\"\n (mousedown)=\"onBackdropMouseDown($event)\"\n (mouseup)=\"onBackdropMouseUp($event)\"\n (animationend)=\"onAnimationEnd($event)\">\n <div\n class=\"widget-panel\"\n [class.widget-panel--closing]=\"closing()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\">\n <div class=\"widget-body\">\n <div class=\"widget-header\">\n <div class=\"widget-title\">\n <h1>{{ title() }}</h1>\n <h2>{{ subtitle() }}</h2>\n </div>\n <ng-content select=\"widget-title\" />\n </div>\n <div class=\"widget-scroll\">\n <ng-content />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--widget-animation-duration: .25s;display:block}.widget-backdrop{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background-color:#0006;animation:widget-fade-in var(--widget-animation-duration) ease-out}.widget-backdrop.right{justify-content:flex-end}.widget-backdrop.left{justify-content:flex-start}.widget-backdrop.top{align-items:flex-start}.widget-backdrop.bottom{align-items:flex-end}.widget-backdrop--closing{pointer-events:none;animation:widget-fade-out var(--widget-animation-duration) ease-out forwards}.widget-panel{position:relative;box-sizing:border-box;height:100%;width:90vh;max-width:520px;padding:20px;border-radius:.5rem 0 0 .5rem;background-color:var(--color-white, var(--white, #ffffff));box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.widget-backdrop.left .widget-panel{border-radius:0 .5rem .5rem 0}.widget-backdrop.top .widget-panel,.widget-backdrop.bottom .widget-panel{width:100%;max-width:none;height:90vh}.widget-backdrop.top .widget-panel{border-radius:0 0 .5rem .5rem}.widget-backdrop.bottom .widget-panel{border-radius:.5rem .5rem 0 0}.widget-backdrop.right .widget-panel{animation:widget-slide-in-right var(--widget-animation-duration) ease-out}.widget-backdrop.left .widget-panel{animation:widget-slide-in-left var(--widget-animation-duration) ease-out}.widget-backdrop.top .widget-panel{animation:widget-slide-in-top var(--widget-animation-duration) ease-out}.widget-backdrop.bottom .widget-panel{animation:widget-slide-in-bottom var(--widget-animation-duration) ease-out}.widget-backdrop.right .widget-panel--closing{animation:widget-slide-out-right var(--widget-animation-duration) ease-out forwards}.widget-backdrop.left .widget-panel--closing{animation:widget-slide-out-left var(--widget-animation-duration) ease-out forwards}.widget-backdrop.top .widget-panel--closing{animation:widget-slide-out-top var(--widget-animation-duration) ease-out forwards}.widget-backdrop.bottom .widget-panel--closing{animation:widget-slide-out-bottom var(--widget-animation-duration) ease-out forwards}.widget-body{display:flex;flex-direction:column;justify-content:space-between;height:100%}.widget-header{display:flex;justify-content:space-between;align-items:start;flex-shrink:0}.widget-title{display:flex;flex-direction:column}.widget-scroll{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:thin}@keyframes widget-fade-in{0%{opacity:0}to{opacity:1}}@keyframes widget-fade-out{0%{opacity:1}to{opacity:0}}@keyframes widget-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes widget-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes widget-slide-in-top{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes widget-slide-in-bottom{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes widget-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes widget-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes widget-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes widget-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(-100%)}}\n"] }]
|
|
4237
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], widgetIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetIcon", required: false }] }], cancelTextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelTextButton", required: false }] }], saveTextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveTextButton", required: false }] }], displayActionButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayActionButton", required: false }] }], displaySaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displaySaveButton", required: false }] }], displayCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayCancelButton", required: false }] }], shouldCloseWhenCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldCloseWhenCancel", required: false }] }], widgetDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetDirection", required: false }] }], typeCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeCancel", required: false }] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], saveIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveIcon", required: false }] }], saveIconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveIconPosition", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], confirmOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmOnClose", required: false }] }], widgetData: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetData", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], onEscapeKey: [{
|
|
3617
4238
|
type: HostListener,
|
|
3618
4239
|
args: ['document:keydown.escape']
|
|
3619
4240
|
}] } });
|
|
@@ -3622,5 +4243,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3622
4243
|
* Generated bundle index. Do not edit.
|
|
3623
4244
|
*/
|
|
3624
4245
|
|
|
3625
|
-
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoSkeletonComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
4246
|
+
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
3626
4247
|
//# sourceMappingURL=ngx-opalbytes-components.mjs.map
|