@biit-solutions/wizardry-theme 1.22.6 → 1.22.8
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/esm2020/inputs/biit-slider-option-vertical/biit-slider-option-vertical.component.mjs +2 -2
- package/esm2020/inputs/biit-toggle/biit-toggle.component.mjs +8 -5
- package/esm2020/login/biit-login/biit-login.component.mjs +1 -1
- package/esm2020/table/biit-table/biit-table.component.mjs +5 -2
- package/fesm2015/biit-solutions-wizardry-theme-inputs.mjs +7 -5
- package/fesm2015/biit-solutions-wizardry-theme-inputs.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-login.mjs +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-login.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs +3 -0
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs +7 -5
- package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-login.mjs +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-login.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs +3 -0
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/inputs/biit-toggle/biit-toggle.component.d.ts +2 -1
- package/package.json +1 -1
- package/table/biit-table/biit-table.component.d.ts +2 -1
|
@@ -911,13 +911,13 @@ class BiitToggleComponent {
|
|
|
911
911
|
}
|
|
912
912
|
}
|
|
913
913
|
BiitToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
914
|
-
BiitToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleComponent, selector: "biit-toggle", inputs: { disabled: "disabled" }, providers: [
|
|
914
|
+
BiitToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleComponent, selector: "biit-toggle", inputs: { disabled: "disabled", description: "description" }, providers: [
|
|
915
915
|
{
|
|
916
916
|
provide: NG_VALUE_ACCESSOR,
|
|
917
917
|
useExisting: forwardRef(() => BiitToggleComponent),
|
|
918
918
|
multi: true
|
|
919
919
|
}
|
|
920
|
-
], ngImport: i0, template: "<label class=\"toggle-base\">\n <input type=\"checkbox\" id=\"checkbox\"\n [ngModel]=\"checked\"\n (ngModelChange)=\"onToggle($event)\"\n [disabled]=\"disabled\"/>\n <div class=\"toggle-switch\" id=\"switch\">\n <div class=\"toggle-trail\"></div>\n <div class=\"toggle-box\"></div>\n </div>\n <a class=\"toggle-label\">\n <ng-content></ng-content>\n </a>\n</label>\n", styles: ["input[type=checkbox]{appearance:none;background-color:#fff;margin:0;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;cursor:pointer;font-size:inherit}.toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box{transform:rotate(15deg) translate(.1em);border:.25em solid var(--main-color)}.toggle-base:has(input:checked) .toggle-trail{background:var(--selected-color)}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:var(--trail-color)}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid var(--main-background);background:none}.toggle-base:has(input:disabled) .toggle-label{color:var(--main-background)}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:var(--main-background)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--trail-color);z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid var(--component-color);box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}@-moz-document url-prefix(){input:checked~.toggle-switch .toggle-trail{background:var(--selected-color)}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid var(--main-color);background:var(--main-color)}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:var(--trail-color)}input:disabled~.toggle-switch .toggle-box{border:.25em solid var(--main-background);background:none}input:disabled~.toggle-switch .toggle-label{color:var(--main-background)}input:checked:disabled~.toggle-switch .toggle-box{background:var(--main-background)}}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
920
|
+
], ngImport: i0, template: "<label class=\"toggle-base\">\n <input type=\"checkbox\" id=\"checkbox\"\n [ngModel]=\"checked\"\n (ngModelChange)=\"onToggle($event)\"\n [disabled]=\"disabled\"/>\n <div class=\"toggle-switch\" id=\"switch\">\n <div class=\"toggle-trail\"></div>\n <div class=\"toggle-box\"></div>\n </div>\n <a class=\"toggle-label\">\n <ng-content></ng-content>\n </a>\n <span *ngIf=\"description\" id=\"description\" class=\"toggle-description\">\n {{ description }}\n </span>\n</label>\n", styles: ["input[type=checkbox]{appearance:none;background-color:#fff;margin:0;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;cursor:pointer;font-size:inherit}.toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box{transform:rotate(15deg) translate(.1em);border:.25em solid var(--main-color)}.toggle-base:has(input:checked) .toggle-trail{background:var(--selected-color)}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:var(--trail-color)}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid var(--main-background);background:none}.toggle-base:has(input:disabled) .toggle-label{color:var(--main-background)}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:var(--main-background)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--trail-color);z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid var(--component-color);box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}.toggle-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.toggle-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){input:checked~.toggle-switch .toggle-trail{background:var(--selected-color)}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid var(--main-color);background:var(--main-color)}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:var(--trail-color)}input:disabled~.toggle-switch .toggle-box{border:.25em solid var(--main-background);background:none}input:disabled~.toggle-switch .toggle-label{color:var(--main-background)}input:checked:disabled~.toggle-switch .toggle-box{background:var(--main-background)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
921
921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleComponent, decorators: [{
|
|
922
922
|
type: Component,
|
|
923
923
|
args: [{ selector: 'biit-toggle', providers: [
|
|
@@ -926,9 +926,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
926
926
|
useExisting: forwardRef(() => BiitToggleComponent),
|
|
927
927
|
multi: true
|
|
928
928
|
}
|
|
929
|
-
], template: "<label class=\"toggle-base\">\n <input type=\"checkbox\" id=\"checkbox\"\n [ngModel]=\"checked\"\n (ngModelChange)=\"onToggle($event)\"\n [disabled]=\"disabled\"/>\n <div class=\"toggle-switch\" id=\"switch\">\n <div class=\"toggle-trail\"></div>\n <div class=\"toggle-box\"></div>\n </div>\n <a class=\"toggle-label\">\n <ng-content></ng-content>\n </a>\n</label>\n", styles: ["input[type=checkbox]{appearance:none;background-color:#fff;margin:0;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;cursor:pointer;font-size:inherit}.toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box{transform:rotate(15deg) translate(.1em);border:.25em solid var(--main-color)}.toggle-base:has(input:checked) .toggle-trail{background:var(--selected-color)}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:var(--trail-color)}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid var(--main-background);background:none}.toggle-base:has(input:disabled) .toggle-label{color:var(--main-background)}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:var(--main-background)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--trail-color);z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid var(--component-color);box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}@-moz-document url-prefix(){input:checked~.toggle-switch .toggle-trail{background:var(--selected-color)}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid var(--main-color);background:var(--main-color)}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:var(--trail-color)}input:disabled~.toggle-switch .toggle-box{border:.25em solid var(--main-background);background:none}input:disabled~.toggle-switch .toggle-label{color:var(--main-background)}input:checked:disabled~.toggle-switch .toggle-box{background:var(--main-background)}}\n"] }]
|
|
929
|
+
], template: "<label class=\"toggle-base\">\n <input type=\"checkbox\" id=\"checkbox\"\n [ngModel]=\"checked\"\n (ngModelChange)=\"onToggle($event)\"\n [disabled]=\"disabled\"/>\n <div class=\"toggle-switch\" id=\"switch\">\n <div class=\"toggle-trail\"></div>\n <div class=\"toggle-box\"></div>\n </div>\n <a class=\"toggle-label\">\n <ng-content></ng-content>\n </a>\n <span *ngIf=\"description\" id=\"description\" class=\"toggle-description\">\n {{ description }}\n </span>\n</label>\n", styles: ["input[type=checkbox]{appearance:none;background-color:#fff;margin:0;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;cursor:pointer;font-size:inherit}.toggle-base{display:flex;align-items:flex-start;width:-moz-fit-content;width:fit-content;min-height:1.2em;cursor:pointer;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-base:hover .toggle-box{transform:rotate(15deg) translate(.1em);border:.25em solid var(--main-color)}.toggle-base:has(input:checked) .toggle-trail{background:var(--selected-color)}.toggle-base:has(input:checked) .toggle-box{transform:translate(.7em) rotate(45deg);border:.25em solid var(--main-color);background:var(--main-color)}.toggle-base:has(input:disabled){pointer-events:none;cursor:default}.toggle-base:has(input:disabled) .toggle-trail{background:var(--trail-color)}.toggle-base:has(input:disabled) .toggle-box{border:.25em solid var(--main-background);background:none}.toggle-base:has(input:disabled) .toggle-label{color:var(--main-background)}.toggle-base:has(input:disabled):has(input:checked) .toggle-box{background:var(--main-background)}.toggle-switch{display:flex;align-items:center;position:relative;height:1.2em}.toggle-trail{display:inline-flex;width:1.4em;height:.25em;background:var(--trail-color);z-index:0;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-box{position:absolute;display:inline-flex;height:.7em;width:.7em;border:.25em solid var(--component-color);box-sizing:border-box;z-index:1;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label{margin-left:.7em;cursor:inherit;line-height:1.2em;-webkit-user-select:none;user-select:none;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.toggle-label:empty{display:none}.toggle-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.toggle-description a{display:block;line-height:1.1em}@-moz-document url-prefix(){input:checked~.toggle-switch .toggle-trail{background:var(--selected-color)}input:checked~.toggle-switch .toggle-box{transform:translate(.7em) rotate(45deg)!important;border:.25em solid var(--main-color);background:var(--main-color)}input:disabled~.toggle-switch{pointer-events:none;cursor:default}input:disabled~.toggle-switch .toggle-trail{background:var(--trail-color)}input:disabled~.toggle-switch .toggle-box{border:.25em solid var(--main-background);background:none}input:disabled~.toggle-switch .toggle-label{color:var(--main-background)}input:checked:disabled~.toggle-switch .toggle-box{background:var(--main-background)}}\n"] }]
|
|
930
930
|
}], propDecorators: { disabled: [{
|
|
931
931
|
type: Input
|
|
932
|
+
}], description: [{
|
|
933
|
+
type: Input
|
|
932
934
|
}] } });
|
|
933
935
|
|
|
934
936
|
class BiitToggleModule {
|
|
@@ -2187,7 +2189,7 @@ BiitSliderOptionVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
|
|
|
2187
2189
|
useExisting: forwardRef(() => BiitSliderOptionVerticalComponent),
|
|
2188
2190
|
multi: true
|
|
2189
2191
|
}
|
|
2190
|
-
], viewQueries: [{ propertyName: "slider", first: true, predicate: ["rangerVer"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div class=\"slider-vertical\">\n <input #rangerVer type=\"range\"\n orient=\"vertical\"\n class=\"vertical\"\n [class.inverted]=\"inverted\"\n [ngModel]=\"index\"\n (ngModelChange)=\"onChange(this.data[rangerVer.value].value);\"\n [min]=\"0\"\n [max]=\"data.length - 1\"\n [step]=\"1\"\n (input)=\"progressScript()\"\n (pointerdown)=\"tooltipBoxVisible = true\"\n (pointerup)=\"tooltipBoxVisible = false\"\n >\n\n <div class=\"ticks vertical\">\n <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n <div *ngFor=\"let tick of $any(data); index as i; count as c\"\n class=\"tick\"\n [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\"\n >\n <span></span>\n <div class=\"label\" [class.show-desc]=\"showDescription\"\n (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n <span>\n {{(!inverted ? data[i] : data[c-i-1]).label}}\n </span>\n <span class=\"description\" *ngIf=\"showDescription\">\n {{(!inverted ? data[i] : data[c-i-1]).description}}\n </span>\n <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description && !showDescription\"\n [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n ></biit-tooltip-icon>\n </div>\n </div>\n </div>\n</div>\n", styles: [".slider-vertical{position:relative;flex:1;width:inherit;height:inherit;display:flex}.slider-vertical input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;background:var(--light-background);height:inherit;width:.3em;writing-mode:vertical-lr;direction:rtl}.slider-vertical input[type=range].inverted{direction:ltr}.slider-vertical input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical .ticks{display:flex;justify-content:space-between;padding:0 0 0 3px;margin-top:5px;position:relative}.slider-vertical .ticks .tick{display:flex;flex:3.5;align-items:center;padding-left:5px;gap:3px}.slider-vertical .ticks .tick:nth-child(2){align-items:end;flex:2}.slider-vertical .ticks .tick:last-child{align-items:start;flex:2}.slider-vertical .ticks .tick.hide-tick{display:none}.slider-vertical .ticks .tick .label{display:flex;font-weight:500;flex:1;cursor:pointer;gap:.5em}.slider-vertical .ticks .tick .label.show-desc{flex-direction:column}.slider-vertical .ticks .tick .label span{line-height:120%}.slider-vertical .ticks .tick .label .description{font-size:.75em;color:
|
|
2192
|
+
], viewQueries: [{ propertyName: "slider", first: true, predicate: ["rangerVer"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div class=\"slider-vertical\">\n <input #rangerVer type=\"range\"\n orient=\"vertical\"\n class=\"vertical\"\n [class.inverted]=\"inverted\"\n [ngModel]=\"index\"\n (ngModelChange)=\"onChange(this.data[rangerVer.value].value);\"\n [min]=\"0\"\n [max]=\"data.length - 1\"\n [step]=\"1\"\n (input)=\"progressScript()\"\n (pointerdown)=\"tooltipBoxVisible = true\"\n (pointerup)=\"tooltipBoxVisible = false\"\n >\n\n <div class=\"ticks vertical\">\n <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n <div *ngFor=\"let tick of $any(data); index as i; count as c\"\n class=\"tick\"\n [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\"\n >\n <span></span>\n <div class=\"label\" [class.show-desc]=\"showDescription\"\n (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n <span>\n {{(!inverted ? data[i] : data[c-i-1]).label}}\n </span>\n <span class=\"description\" *ngIf=\"showDescription\">\n {{(!inverted ? data[i] : data[c-i-1]).description}}\n </span>\n <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description && !showDescription\"\n [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n ></biit-tooltip-icon>\n </div>\n </div>\n </div>\n</div>\n", styles: [".slider-vertical{position:relative;flex:1;width:inherit;height:inherit;display:flex}.slider-vertical input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;background:var(--light-background);height:inherit;width:.3em;writing-mode:vertical-lr;direction:rtl}.slider-vertical input[type=range].inverted{direction:ltr}.slider-vertical input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical .ticks{display:flex;justify-content:space-between;padding:0 0 0 3px;margin-top:5px;position:relative}.slider-vertical .ticks .tick{display:flex;flex:3.5;align-items:center;padding-left:5px;gap:3px}.slider-vertical .ticks .tick:nth-child(2){align-items:end;flex:2}.slider-vertical .ticks .tick:last-child{align-items:start;flex:2}.slider-vertical .ticks .tick.hide-tick{display:none}.slider-vertical .ticks .tick .label{display:flex;font-weight:500;flex:1;cursor:pointer;gap:.5em}.slider-vertical .ticks .tick .label.show-desc{flex-direction:column}.slider-vertical .ticks .tick .label span{line-height:120%}.slider-vertical .ticks .tick .label .description{font-size:.75em;color:var(--secondary-color);line-height:120%;font-style:italic;font-weight:400}.slider-vertical .ticks .tick>span{display:flex;justify-content:center;width:14px;height:16px;padding:7px 2px;background-color:var(--component-color);font-weight:500;box-sizing:border-box;background-clip:content-box;font-size:1em}.slider-vertical .ticks .tick>span>span{position:absolute;top:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center;display:flex;justify-content:center;gap:5px}.slider-vertical .ticks .tick>span>span>span{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center}.slider-vertical .ticks .tick>span>span biit-tooltip-icon{margin:3px}.slider-vertical .ticks .tick>span:nth-child(2)>span{left:0;text-align:left;justify-content:start}.slider-vertical .ticks .tick>span:last-child>span{right:0;text-align:right;justify-content:end}.slider-vertical .ticks.vertical{flex-direction:column-reverse;flex:1;height:inherit;margin:2px;padding:0}.slider-vertical .ticks.vertical>span{width:20px;height:14px;padding:6px}.slider-vertical .tooltip-slider{position:absolute;bottom:4.7em;transition:opacity .2s ease-in-out;pointer-events:none}.slider-vertical .tooltip-slider ::ng-deep span{font-size:1em;background:white;padding:.1em .2em;border:1px solid var(--component-color);display:block;position:relative;min-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
|
|
2191
2193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalComponent, decorators: [{
|
|
2192
2194
|
type: Component,
|
|
2193
2195
|
args: [{ selector: 'biit-slider-option-vertical', providers: [
|
|
@@ -2196,7 +2198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2196
2198
|
useExisting: forwardRef(() => BiitSliderOptionVerticalComponent),
|
|
2197
2199
|
multi: true
|
|
2198
2200
|
}
|
|
2199
|
-
], template: "<div class=\"slider-vertical\">\n <input #rangerVer type=\"range\"\n orient=\"vertical\"\n class=\"vertical\"\n [class.inverted]=\"inverted\"\n [ngModel]=\"index\"\n (ngModelChange)=\"onChange(this.data[rangerVer.value].value);\"\n [min]=\"0\"\n [max]=\"data.length - 1\"\n [step]=\"1\"\n (input)=\"progressScript()\"\n (pointerdown)=\"tooltipBoxVisible = true\"\n (pointerup)=\"tooltipBoxVisible = false\"\n >\n\n <div class=\"ticks vertical\">\n <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n <div *ngFor=\"let tick of $any(data); index as i; count as c\"\n class=\"tick\"\n [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\"\n >\n <span></span>\n <div class=\"label\" [class.show-desc]=\"showDescription\"\n (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n <span>\n {{(!inverted ? data[i] : data[c-i-1]).label}}\n </span>\n <span class=\"description\" *ngIf=\"showDescription\">\n {{(!inverted ? data[i] : data[c-i-1]).description}}\n </span>\n <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description && !showDescription\"\n [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n ></biit-tooltip-icon>\n </div>\n </div>\n </div>\n</div>\n", styles: [".slider-vertical{position:relative;flex:1;width:inherit;height:inherit;display:flex}.slider-vertical input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;background:var(--light-background);height:inherit;width:.3em;writing-mode:vertical-lr;direction:rtl}.slider-vertical input[type=range].inverted{direction:ltr}.slider-vertical input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical .ticks{display:flex;justify-content:space-between;padding:0 0 0 3px;margin-top:5px;position:relative}.slider-vertical .ticks .tick{display:flex;flex:3.5;align-items:center;padding-left:5px;gap:3px}.slider-vertical .ticks .tick:nth-child(2){align-items:end;flex:2}.slider-vertical .ticks .tick:last-child{align-items:start;flex:2}.slider-vertical .ticks .tick.hide-tick{display:none}.slider-vertical .ticks .tick .label{display:flex;font-weight:500;flex:1;cursor:pointer;gap:.5em}.slider-vertical .ticks .tick .label.show-desc{flex-direction:column}.slider-vertical .ticks .tick .label span{line-height:120%}.slider-vertical .ticks .tick .label .description{font-size:.75em;color:
|
|
2201
|
+
], template: "<div class=\"slider-vertical\">\n <input #rangerVer type=\"range\"\n orient=\"vertical\"\n class=\"vertical\"\n [class.inverted]=\"inverted\"\n [ngModel]=\"index\"\n (ngModelChange)=\"onChange(this.data[rangerVer.value].value);\"\n [min]=\"0\"\n [max]=\"data.length - 1\"\n [step]=\"1\"\n (input)=\"progressScript()\"\n (pointerdown)=\"tooltipBoxVisible = true\"\n (pointerup)=\"tooltipBoxVisible = false\"\n >\n\n <div class=\"ticks vertical\">\n <div #tooltip class=\"tooltip-slider\" [style.opacity]=\"tooltipBoxVisible && showTooltip ? '100%' : '0%'\"></div>\n <div *ngFor=\"let tick of $any(data); index as i; count as c\"\n class=\"tick\"\n [class.hide-tick]=\"!(!inverted ? data[i] : data[c-i-1]).label\"\n >\n <span></span>\n <div class=\"label\" [class.show-desc]=\"showDescription\"\n (click)=\"value = (!inverted ? data[i] : data[c-i-1]).value; onChange((!inverted ? data[i] : data[c-i-1]).value)\">\n <span>\n {{(!inverted ? data[i] : data[c-i-1]).label}}\n </span>\n <span class=\"description\" *ngIf=\"showDescription\">\n {{(!inverted ? data[i] : data[c-i-1]).description}}\n </span>\n <biit-tooltip-icon *ngIf=\"(!inverted ? data[i] : data[c-i-1]).description && !showDescription\"\n [text]=\"(!inverted ? data[i] : data[c-i-1]).description\"\n ></biit-tooltip-icon>\n </div>\n </div>\n </div>\n</div>\n", styles: [".slider-vertical{position:relative;flex:1;width:inherit;height:inherit;display:flex}.slider-vertical input[type=range]{font-size:1em;appearance:none;cursor:pointer;border:none;outline:none;background:var(--light-background);height:inherit;width:.3em;writing-mode:vertical-lr;direction:rtl}.slider-vertical input[type=range].inverted{direction:ltr}.slider-vertical input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-webkit-slider-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-webkit-slider-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;height:.9em;width:.9em;background-color:var(--light-background);border:.3em solid var(--component-color);border-radius:0;-moz-transition:.2s ease-in-out;transition:.2s ease-in-out}.slider-vertical input[type=range]::-moz-range-thumb:hover{background-color:var(--main-color)}.slider-vertical input[type=range]:active::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical input[type=range]:focus::-moz-range-thumb{background-color:var(--main-color)}.slider-vertical .ticks{display:flex;justify-content:space-between;padding:0 0 0 3px;margin-top:5px;position:relative}.slider-vertical .ticks .tick{display:flex;flex:3.5;align-items:center;padding-left:5px;gap:3px}.slider-vertical .ticks .tick:nth-child(2){align-items:end;flex:2}.slider-vertical .ticks .tick:last-child{align-items:start;flex:2}.slider-vertical .ticks .tick.hide-tick{display:none}.slider-vertical .ticks .tick .label{display:flex;font-weight:500;flex:1;cursor:pointer;gap:.5em}.slider-vertical .ticks .tick .label.show-desc{flex-direction:column}.slider-vertical .ticks .tick .label span{line-height:120%}.slider-vertical .ticks .tick .label .description{font-size:.75em;color:var(--secondary-color);line-height:120%;font-style:italic;font-weight:400}.slider-vertical .ticks .tick>span{display:flex;justify-content:center;width:14px;height:16px;padding:7px 2px;background-color:var(--component-color);font-weight:500;box-sizing:border-box;background-clip:content-box;font-size:1em}.slider-vertical .ticks .tick>span>span{position:absolute;top:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center;display:flex;justify-content:center;gap:5px}.slider-vertical .ticks .tick>span>span>span{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-align:center}.slider-vertical .ticks .tick>span>span biit-tooltip-icon{margin:3px}.slider-vertical .ticks .tick>span:nth-child(2)>span{left:0;text-align:left;justify-content:start}.slider-vertical .ticks .tick>span:last-child>span{right:0;text-align:right;justify-content:end}.slider-vertical .ticks.vertical{flex-direction:column-reverse;flex:1;height:inherit;margin:2px;padding:0}.slider-vertical .ticks.vertical>span{width:20px;height:14px;padding:6px}.slider-vertical .tooltip-slider{position:absolute;bottom:4.7em;transition:opacity .2s ease-in-out;pointer-events:none}.slider-vertical .tooltip-slider ::ng-deep span{font-size:1em;background:white;padding:.1em .2em;border:1px solid var(--component-color);display:block;position:relative;min-width:max-content}\n"] }]
|
|
2200
2202
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
2201
2203
|
type: Input
|
|
2202
2204
|
}], inverted: [{
|