@ascentgl/ads-ui 0.0.52 → 0.0.55
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.
|
@@ -362,36 +362,28 @@ class BreadcrumbVisualProcessor {
|
|
|
362
362
|
|
|
363
363
|
class AdsIconButtonComponent {
|
|
364
364
|
constructor() {
|
|
365
|
+
/** Whether the button is a smaller version */
|
|
366
|
+
this.size = input('xl-5');
|
|
365
367
|
/**
|
|
366
|
-
*
|
|
368
|
+
* aria-label for the button
|
|
367
369
|
*/
|
|
368
|
-
this.
|
|
370
|
+
this.ariaLabel = input('');
|
|
369
371
|
/**
|
|
370
|
-
*
|
|
372
|
+
* The unique ID for the icon button
|
|
371
373
|
*/
|
|
372
|
-
this.
|
|
374
|
+
this.id = input();
|
|
373
375
|
/**
|
|
374
|
-
*
|
|
376
|
+
* Whether the button is disabled
|
|
375
377
|
*/
|
|
376
|
-
this.
|
|
378
|
+
this.disabled = input(false);
|
|
377
379
|
}
|
|
378
380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
379
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: AdsIconButtonComponent, isStandalone: false, selector: "ads-icon-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ads-icon-btn\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id\"\n [ngClass]=\"[size()]\"\n>\n <span class=\"icon-wrapper\">\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [".ads-icon-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;border-radius:50%;cursor:pointer;line-height:50%;outline:0;text-align:center;background-color:var(--color-primary)}.ads-icon-btn:hover{background-color:var(--color-primary-hover)}.ads-icon-btn:active,.ads-icon-btn:focus{background-color:var(--color-primary-pressed)}.ads-icon-btn.xl-5 ::ng-deep ads-icon{width:28.8px!important;height:28.8px!important}.ads-icon-btn.xl-5 ::ng-deep ads-icon svg{width:28.8px!important;height:28.8px!important}.ads-icon-btn.xl{width:20px;height:20px}.ads-icon-btn.xl ::ng-deep ads-icon{width:12px!important;height:12px!important}.ads-icon-btn.xl ::ng-deep ads-icon svg{width:12px!important;height:12px!important}.ads-icon-btn.sm{width:14px;height:14px}.ads-icon-btn.sm ::ng-deep ads-icon{width:8px!important;height:8px!important}.ads-icon-btn.sm ::ng-deep ads-icon svg{width:8px!important;height:8px!important}.ads-icon-btn:disabled{background-color:var(--color-medium-50);cursor:default}.ads-icon-btn:disabled>*{pointer-events:none}.ads-icon-btn .icon-wrapper{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
380
382
|
}
|
|
381
383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsIconButtonComponent, decorators: [{
|
|
382
384
|
type: Component,
|
|
383
|
-
args: [{ selector: 'ads-icon-button', standalone: false, template: "<button\n type=\"button\"\n class=\"ads-icon-btn\"\n [
|
|
384
|
-
}]
|
|
385
|
-
type: Input
|
|
386
|
-
}], id: [{
|
|
387
|
-
type: Input
|
|
388
|
-
}], theme: [{
|
|
389
|
-
type: Input
|
|
390
|
-
}], disabled: [{
|
|
391
|
-
type: Input
|
|
392
|
-
}], type: [{
|
|
393
|
-
type: Input
|
|
394
|
-
}] } });
|
|
385
|
+
args: [{ selector: 'ads-icon-button', standalone: false, template: "<button\n type=\"button\"\n class=\"ads-icon-btn\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id\"\n [ngClass]=\"[size()]\"\n>\n <span class=\"icon-wrapper\">\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [".ads-icon-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;border-radius:50%;cursor:pointer;line-height:50%;outline:0;text-align:center;background-color:var(--color-primary)}.ads-icon-btn:hover{background-color:var(--color-primary-hover)}.ads-icon-btn:active,.ads-icon-btn:focus{background-color:var(--color-primary-pressed)}.ads-icon-btn.xl-5 ::ng-deep ads-icon{width:28.8px!important;height:28.8px!important}.ads-icon-btn.xl-5 ::ng-deep ads-icon svg{width:28.8px!important;height:28.8px!important}.ads-icon-btn.xl{width:20px;height:20px}.ads-icon-btn.xl ::ng-deep ads-icon{width:12px!important;height:12px!important}.ads-icon-btn.xl ::ng-deep ads-icon svg{width:12px!important;height:12px!important}.ads-icon-btn.sm{width:14px;height:14px}.ads-icon-btn.sm ::ng-deep ads-icon{width:8px!important;height:8px!important}.ads-icon-btn.sm ::ng-deep ads-icon svg{width:8px!important;height:8px!important}.ads-icon-btn:disabled{background-color:var(--color-medium-50);cursor:default}.ads-icon-btn:disabled>*{pointer-events:none}.ads-icon-btn .icon-wrapper{display:inline-block}\n"] }]
|
|
386
|
+
}] });
|
|
395
387
|
|
|
396
388
|
class AdsBreadcrumbComponent {
|
|
397
389
|
/** @ignore */
|
|
@@ -430,11 +422,11 @@ class AdsBreadcrumbComponent {
|
|
|
430
422
|
this.visualProcessor?.onScrollRight();
|
|
431
423
|
}
|
|
432
424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsBreadcrumbComponent, deps: [{ token: i1.AdsIconRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsBreadcrumbComponent, isStandalone: false, selector: "ads-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (breadcrumbs().length > 1 && visualProcessor?.canScrollLeft()) {\n <div class=\"scroller-wrapper\">\n <ads-icon-button
|
|
425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsBreadcrumbComponent, isStandalone: false, selector: "ads-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (breadcrumbs().length > 1 && visualProcessor?.canScrollLeft()) {\n <div class=\"scroller-wrapper\">\n <ads-icon-button class=\"scroller left\" [size]=\"'xl'\" (click)=\"scrollLeft()\">\n <ads-icon [name]=\"'chevron_left'\" [theme]=\"'primary'\" />\n </ads-icon-button>\n </div>\n}\n<div\n class=\"container\"\n #container\n [ngClass]=\"{\n 'can-scroll-left': visualProcessor?.canScrollLeft(),\n 'can-scroll-right': visualProcessor?.canScrollRight(),\n }\"\n>\n <div class=\"list\" #list>\n @for (breadcrumb of breadcrumbs(); track $index) {\n @if (!$last) {\n <a class=\"breadcrumb\" [routerLink]=\"breadcrumb.url\">\n <span>{{ breadcrumb.label }}</span>\n </a>\n } @else {\n <div class=\"breadcrumb active\">\n <span>{{ breadcrumb.label }}</span>\n </div>\n }\n @if (!$last) {\n <ads-icon class=\"separator\" [name]=\"'chevron_right'\" [size]=\"'xxxxs'\" />\n }\n }\n </div>\n</div>\n@if (breadcrumbs().length > 1 && visualProcessor?.canScrollRight()) {\n <div class=\"scroller-wrapper right\">\n <ads-icon-button class=\"scroller\" [size]=\"'xl'\" (click)=\"scrollRight()\">\n <ads-icon [name]=\"'chevron_right'\" [theme]=\"'primary'\" />\n </ads-icon-button>\n </div>\n}\n", styles: [":host{display:flex;align-items:center;position:relative;min-width:192px;height:24px}.container{display:flex;overflow:hidden;position:relative}.container.can-scroll-left{mask:linear-gradient(to right,transparent 28px,black 72px)}.container.can-scroll-right{mask:linear-gradient(to left,transparent 28px,black 72px)}.container.can-scroll-left.can-scroll-right{mask:linear-gradient(to right,transparent 28px,black 72px,black calc(100% - 72px),transparent calc(100% - 28px))}.scroller-wrapper{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:32px;display:flex}.scroller-wrapper.left{left:0;justify-content:flex-start}.scroller-wrapper.right{right:0;justify-content:flex-end}.scroller{cursor:pointer}.scroller:hover ::ng-deep button{transition:box-shadow linear .1s;box-shadow:0 3px 3px #6c49ac40}.scroller ::ng-deep button{width:24px;height:24px;box-shadow:0 3px 3px #6c49ac1a}.list{display:flex;align-items:center;gap:12px;white-space:nowrap;position:relative;left:0}.list .separator{fill:var(--color-dark-50)}.list .breadcrumb{text-decoration:unset;padding:4px;color:var(--color-link);cursor:pointer;font-size:12px;font-weight:400;line-height:12px;border-radius:5px}.list .breadcrumb:not(.active):hover{color:var(--color-link-hover);background-color:var(--color-light-30)}.list .breadcrumb:not(.active):active{color:var(--color-link-pressed);background-color:var(--color-light)}.list .breadcrumb.active{color:var(--color-dark);cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsIconButtonComponent, selector: "ads-icon-button", inputs: ["size", "ariaLabel", "id", "disabled"] }] }); }
|
|
434
426
|
}
|
|
435
427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsBreadcrumbComponent, decorators: [{
|
|
436
428
|
type: Component,
|
|
437
|
-
args: [{ selector: 'ads-breadcrumb', standalone: false, template: "@if (breadcrumbs().length > 1 && visualProcessor?.canScrollLeft()) {\n <div class=\"scroller-wrapper\">\n <ads-icon-button
|
|
429
|
+
args: [{ selector: 'ads-breadcrumb', standalone: false, template: "@if (breadcrumbs().length > 1 && visualProcessor?.canScrollLeft()) {\n <div class=\"scroller-wrapper\">\n <ads-icon-button class=\"scroller left\" [size]=\"'xl'\" (click)=\"scrollLeft()\">\n <ads-icon [name]=\"'chevron_left'\" [theme]=\"'primary'\" />\n </ads-icon-button>\n </div>\n}\n<div\n class=\"container\"\n #container\n [ngClass]=\"{\n 'can-scroll-left': visualProcessor?.canScrollLeft(),\n 'can-scroll-right': visualProcessor?.canScrollRight(),\n }\"\n>\n <div class=\"list\" #list>\n @for (breadcrumb of breadcrumbs(); track $index) {\n @if (!$last) {\n <a class=\"breadcrumb\" [routerLink]=\"breadcrumb.url\">\n <span>{{ breadcrumb.label }}</span>\n </a>\n } @else {\n <div class=\"breadcrumb active\">\n <span>{{ breadcrumb.label }}</span>\n </div>\n }\n @if (!$last) {\n <ads-icon class=\"separator\" [name]=\"'chevron_right'\" [size]=\"'xxxxs'\" />\n }\n }\n </div>\n</div>\n@if (breadcrumbs().length > 1 && visualProcessor?.canScrollRight()) {\n <div class=\"scroller-wrapper right\">\n <ads-icon-button class=\"scroller\" [size]=\"'xl'\" (click)=\"scrollRight()\">\n <ads-icon [name]=\"'chevron_right'\" [theme]=\"'primary'\" />\n </ads-icon-button>\n </div>\n}\n", styles: [":host{display:flex;align-items:center;position:relative;min-width:192px;height:24px}.container{display:flex;overflow:hidden;position:relative}.container.can-scroll-left{mask:linear-gradient(to right,transparent 28px,black 72px)}.container.can-scroll-right{mask:linear-gradient(to left,transparent 28px,black 72px)}.container.can-scroll-left.can-scroll-right{mask:linear-gradient(to right,transparent 28px,black 72px,black calc(100% - 72px),transparent calc(100% - 28px))}.scroller-wrapper{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:32px;display:flex}.scroller-wrapper.left{left:0;justify-content:flex-start}.scroller-wrapper.right{right:0;justify-content:flex-end}.scroller{cursor:pointer}.scroller:hover ::ng-deep button{transition:box-shadow linear .1s;box-shadow:0 3px 3px #6c49ac40}.scroller ::ng-deep button{width:24px;height:24px;box-shadow:0 3px 3px #6c49ac1a}.list{display:flex;align-items:center;gap:12px;white-space:nowrap;position:relative;left:0}.list .separator{fill:var(--color-dark-50)}.list .breadcrumb{text-decoration:unset;padding:4px;color:var(--color-link);cursor:pointer;font-size:12px;font-weight:400;line-height:12px;border-radius:5px}.list .breadcrumb:not(.active):hover{color:var(--color-link-hover);background-color:var(--color-light-30)}.list .breadcrumb:not(.active):active{color:var(--color-link-pressed);background-color:var(--color-light)}.list .breadcrumb.active{color:var(--color-dark);cursor:default}\n"] }]
|
|
438
430
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ChangeDetectorRef }], propDecorators: { resize: [{
|
|
439
431
|
type: HostListener,
|
|
440
432
|
args: ['window:resize']
|
|
@@ -5440,6 +5432,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
5440
5432
|
class AdsSlideToggleComponent extends AbstractBaseComponent {
|
|
5441
5433
|
constructor() {
|
|
5442
5434
|
super(...arguments);
|
|
5435
|
+
/** Set to "true" to make the toggle title "Yes" or "No" */
|
|
5436
|
+
this.enableYesOrNo = false;
|
|
5443
5437
|
/** @ignore */
|
|
5444
5438
|
this.valueControl = new FormControl();
|
|
5445
5439
|
/** Optional "label" attribute for slide toggle field */
|
|
@@ -5469,13 +5463,20 @@ class AdsSlideToggleComponent extends AbstractBaseComponent {
|
|
|
5469
5463
|
return;
|
|
5470
5464
|
this.valueControl.setValue(!this.valueControl.value);
|
|
5471
5465
|
}
|
|
5466
|
+
/** @ignore */
|
|
5467
|
+
getTitle(enabled) {
|
|
5468
|
+
const titles = this.enableYesOrNo ? ['Yes', 'No'] : ['On', 'Off'];
|
|
5469
|
+
return enabled ? titles[0] : titles[1];
|
|
5470
|
+
}
|
|
5472
5471
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5473
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsSlideToggleComponent, isStandalone: false, selector: "ads-slide-toggle", inputs: { control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\">{{ valueControl.value
|
|
5472
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsSlideToggleComponent, isStandalone: false, selector: "ads-slide-toggle", inputs: { enableYesOrNo: "enableYesOrNo", control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\" [class.checked]=\"valueControl.value\" [class.enable-yes-no]=\"enableYesOrNo\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\"> {{ getTitle(valueControl.value) }} </span>\n </div>\n <div class=\"toggle-handle\"></div>\n </div>\n\n @if (label) {\n <span class=\"label\"> {{ label }} </span>\n }\n</div>\n@if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n}\n", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container.checked.enable-yes-no .toggle-track{transform:translate(-16px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle:not(.disabled) .toggle-container.enable-yes-no{width:42px}.ads-toggle:not(.disabled) .toggle-container.enable-yes-no .toggle-track{right:6px}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
5474
5473
|
}
|
|
5475
5474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSlideToggleComponent, decorators: [{
|
|
5476
5475
|
type: Component,
|
|
5477
|
-
args: [{ selector: 'ads-slide-toggle', standalone: false, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\">{{ valueControl.value
|
|
5478
|
-
}], propDecorators: {
|
|
5476
|
+
args: [{ selector: 'ads-slide-toggle', standalone: false, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\" [class.checked]=\"valueControl.value\" [class.enable-yes-no]=\"enableYesOrNo\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\"> {{ getTitle(valueControl.value) }} </span>\n </div>\n <div class=\"toggle-handle\"></div>\n </div>\n\n @if (label) {\n <span class=\"label\"> {{ label }} </span>\n }\n</div>\n@if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n}\n", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container.checked.enable-yes-no .toggle-track{transform:translate(-16px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle:not(.disabled) .toggle-container.enable-yes-no{width:42px}.ads-toggle:not(.disabled) .toggle-container.enable-yes-no .toggle-track{right:6px}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:20px}\n"] }]
|
|
5477
|
+
}], propDecorators: { enableYesOrNo: [{
|
|
5478
|
+
type: Input
|
|
5479
|
+
}], control: [{
|
|
5479
5480
|
type: Input
|
|
5480
5481
|
}], label: [{
|
|
5481
5482
|
type: Input
|