@ascentgl/ads-ui 0.0.52 → 0.0.53
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.
|
@@ -5440,6 +5440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
5440
5440
|
class AdsSlideToggleComponent extends AbstractBaseComponent {
|
|
5441
5441
|
constructor() {
|
|
5442
5442
|
super(...arguments);
|
|
5443
|
+
/** Set to "true" to make the toggle title "Yes" or "No" */
|
|
5444
|
+
this.enableYesOrNo = false;
|
|
5443
5445
|
/** @ignore */
|
|
5444
5446
|
this.valueControl = new FormControl();
|
|
5445
5447
|
/** Optional "label" attribute for slide toggle field */
|
|
@@ -5469,13 +5471,20 @@ class AdsSlideToggleComponent extends AbstractBaseComponent {
|
|
|
5469
5471
|
return;
|
|
5470
5472
|
this.valueControl.setValue(!this.valueControl.value);
|
|
5471
5473
|
}
|
|
5474
|
+
/** @ignore */
|
|
5475
|
+
getTitle(enabled) {
|
|
5476
|
+
const titles = this.enableYesOrNo ? ['Yes', 'No'] : ['On', 'Off'];
|
|
5477
|
+
return enabled ? titles[0] : titles[1];
|
|
5478
|
+
}
|
|
5472
5479
|
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
|
|
5480
|
+
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
5481
|
}
|
|
5475
5482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSlideToggleComponent, decorators: [{
|
|
5476
5483
|
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: {
|
|
5484
|
+
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"] }]
|
|
5485
|
+
}], propDecorators: { enableYesOrNo: [{
|
|
5486
|
+
type: Input
|
|
5487
|
+
}], control: [{
|
|
5479
5488
|
type: Input
|
|
5480
5489
|
}], label: [{
|
|
5481
5490
|
type: Input
|