@biit-solutions/wizardry-theme 1.22.5 → 1.22.7
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/button/biit-button/biit-button.component.d.ts +6 -0
- package/button/biit-button/biit-button.module.d.ts +1 -1
- package/esm2020/button/biit-action-button/biit-action-button.component.mjs +2 -2
- package/esm2020/button/biit-button/biit-button.component.mjs +17 -3
- package/esm2020/button/biit-button/biit-button.module.mjs +10 -6
- 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 +3 -3
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs +27 -9
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- 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 +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs +27 -9
- package/fesm2020/biit-solutions-wizardry-theme-button.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 +2 -2
- 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
|
@@ -17,6 +17,12 @@ export declare class BiitButtonTertiaryDirective {
|
|
|
17
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<BiitButtonTertiaryDirective, never>;
|
|
18
18
|
static ɵdir: i0.ɵɵDirectiveDeclaration<BiitButtonTertiaryDirective, "[tertiary]", never, {}, {}, never, never, false, never>;
|
|
19
19
|
}
|
|
20
|
+
export declare class BiitButtonQuaternaryDirective {
|
|
21
|
+
private parent;
|
|
22
|
+
constructor(parent: BiitButtonComponent);
|
|
23
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BiitButtonQuaternaryDirective, never>;
|
|
24
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BiitButtonQuaternaryDirective, "[quaternary]", never, {}, {}, never, never, false, never>;
|
|
25
|
+
}
|
|
20
26
|
export declare class BiitButtonComponent {
|
|
21
27
|
color: string;
|
|
22
28
|
constructor();
|
|
@@ -4,6 +4,6 @@ import * as i2 from "@angular/common";
|
|
|
4
4
|
import * as i3 from "@angular/forms";
|
|
5
5
|
export declare class BiitButtonModule {
|
|
6
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<BiitButtonModule, never>;
|
|
7
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<BiitButtonModule, [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective], [typeof i2.CommonModule, typeof i3.FormsModule], [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective]>;
|
|
7
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<BiitButtonModule, [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective, typeof i1.BiitButtonQuaternaryDirective], [typeof i2.CommonModule, typeof i3.FormsModule], [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective, typeof i1.BiitButtonQuaternaryDirective]>;
|
|
8
8
|
static ɵinj: i0.ɵɵInjectorDeclaration<BiitButtonModule>;
|
|
9
9
|
}
|
|
@@ -51,10 +51,10 @@ export class BiitActionButtonComponent {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
BiitActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--text-hover-color: #5A6473;--selected-color: #FBAEC9;--popup-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
54
|
+
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--popup-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
55
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
|
-
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--text-hover-color: #5A6473;--selected-color: #FBAEC9;--popup-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"] }]
|
|
57
|
+
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--popup-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"] }]
|
|
58
58
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { position: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], additionalX: [{
|
|
@@ -43,15 +43,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
43
43
|
selector: '[tertiary]'
|
|
44
44
|
}]
|
|
45
45
|
}], ctorParameters: function () { return [{ type: BiitButtonComponent }]; } });
|
|
46
|
+
export class BiitButtonQuaternaryDirective {
|
|
47
|
+
constructor(parent) {
|
|
48
|
+
this.parent = parent;
|
|
49
|
+
parent.color = 'quaternary';
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
BiitButtonQuaternaryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonQuaternaryDirective, deps: [{ token: BiitButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
53
|
+
BiitButtonQuaternaryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitButtonQuaternaryDirective, selector: "[quaternary]", ngImport: i0 });
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonQuaternaryDirective, decorators: [{
|
|
55
|
+
type: Directive,
|
|
56
|
+
args: [{
|
|
57
|
+
selector: '[quaternary]'
|
|
58
|
+
}]
|
|
59
|
+
}], ctorParameters: function () { return [{ type: BiitButtonComponent }]; } });
|
|
46
60
|
export class BiitButtonComponent {
|
|
47
61
|
constructor() {
|
|
48
62
|
this.color = 'primary';
|
|
49
63
|
}
|
|
50
64
|
}
|
|
51
65
|
BiitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
BiitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitButtonComponent, selector: "button[biit-button]", ngImport: i0, template: "<div class=\"button-base prevent-select {{color}}\">\n <div class=\"button-content\">\n <span #text>\n <ng-content></ng-content>\n </span>\n <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:
|
|
66
|
+
BiitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitButtonComponent, selector: "button[biit-button]", ngImport: i0, template: "<div class=\"button-base prevent-select {{color}}\">\n <div class=\"button-content\">\n <span #text>\n <ng-content></ng-content>\n </span>\n <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary:active{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary .button-content{background:var(--main-color)}:host .button-base:not(.tertiary).secondary{color:var(--secondary-button-color);background:var(--secondary-button-background-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).secondary:hover .button-content,:host .button-base:not(.tertiary).secondary :focus-visible .button-content{background:var(--secondary-button-hover-background)}:host .button-base:not(.tertiary).secondary:active .button-content{background:var(--secondary-button-active-background)}:host .button-base:not(.tertiary).quaternary{color:var(--quaternary-button-color);background:var(--quaternary-button-background-color);border:3px solid var(--quaternary-button-background-color)}:host .button-base:not(.tertiary).quaternary:hover{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:hover .button-content,:host .button-base:not(.tertiary).quaternary:hover :focus-visible .button-content{background:var(--quaternary-button-hover-background)}:host .button-base:not(.tertiary).quaternary:active{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:active .button-content{background:var(--quaternary-button-active-background)}:host .button-base:not(.tertiary).quaternary .button-content{background:var(--quaternary-button-background-color)}:host .button-base.tertiary{color:var(--main-color);border:0}:host .button-base.tertiary:hover .bar,:host .button-base.tertiary :focus-visible .bar{top:.15em}:host .button-base.tertiary:active .bar{top:0}:host:focus-visible:not(.disabled) .primary{background:transparent;border:3px solid var(--component-color)}:host:focus-visible:not(.disabled) .secondary .button-content{background:var(--disabled-secondary-color)}:host:focus-visible:not(.disabled) .tertiary .bar{top:.15em}:host:focus-visible:not(.disabled) .quaternary .button-content{background:var(--quaternary-button-background-color);border:3px solid var(--component-color)}:host:disabled{pointer-events:none}:host:disabled .primary{border:3px solid var(--disabled-secondary-color)}:host:disabled .primary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}:host:disabled .secondary{border:3px solid var(--disabled-secondary-color)!important;color:var(--disabled-secondary-color)}:host:disabled .tertiary{color:var(--disabled-secondary-color)}:host:disabled .tertiary .bar{background:var(--disabled-secondary-color)}:host:disabled .quaternary{border:3px solid var(--disabled-secondary-color)}:host:disabled .quaternary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}.prevent-select{-webkit-user-select:none;user-select:none}.button-content{width:-moz-fit-content;width:fit-content;text-transform:uppercase;font-weight:700;text-align:center}.bar{width:100%;height:.15em;background:var(--main-color);position:relative;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
53
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonComponent, decorators: [{
|
|
54
68
|
type: Component,
|
|
55
|
-
args: [{ selector: 'button[biit-button]', template: "<div class=\"button-base prevent-select {{color}}\">\n <div class=\"button-content\">\n <span #text>\n <ng-content></ng-content>\n </span>\n <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:
|
|
69
|
+
args: [{ selector: 'button[biit-button]', template: "<div class=\"button-base prevent-select {{color}}\">\n <div class=\"button-content\">\n <span #text>\n <ng-content></ng-content>\n </span>\n <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary:active{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary .button-content{background:var(--main-color)}:host .button-base:not(.tertiary).secondary{color:var(--secondary-button-color);background:var(--secondary-button-background-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).secondary:hover .button-content,:host .button-base:not(.tertiary).secondary :focus-visible .button-content{background:var(--secondary-button-hover-background)}:host .button-base:not(.tertiary).secondary:active .button-content{background:var(--secondary-button-active-background)}:host .button-base:not(.tertiary).quaternary{color:var(--quaternary-button-color);background:var(--quaternary-button-background-color);border:3px solid var(--quaternary-button-background-color)}:host .button-base:not(.tertiary).quaternary:hover{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:hover .button-content,:host .button-base:not(.tertiary).quaternary:hover :focus-visible .button-content{background:var(--quaternary-button-hover-background)}:host .button-base:not(.tertiary).quaternary:active{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:active .button-content{background:var(--quaternary-button-active-background)}:host .button-base:not(.tertiary).quaternary .button-content{background:var(--quaternary-button-background-color)}:host .button-base.tertiary{color:var(--main-color);border:0}:host .button-base.tertiary:hover .bar,:host .button-base.tertiary :focus-visible .bar{top:.15em}:host .button-base.tertiary:active .bar{top:0}:host:focus-visible:not(.disabled) .primary{background:transparent;border:3px solid var(--component-color)}:host:focus-visible:not(.disabled) .secondary .button-content{background:var(--disabled-secondary-color)}:host:focus-visible:not(.disabled) .tertiary .bar{top:.15em}:host:focus-visible:not(.disabled) .quaternary .button-content{background:var(--quaternary-button-background-color);border:3px solid var(--component-color)}:host:disabled{pointer-events:none}:host:disabled .primary{border:3px solid var(--disabled-secondary-color)}:host:disabled .primary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}:host:disabled .secondary{border:3px solid var(--disabled-secondary-color)!important;color:var(--disabled-secondary-color)}:host:disabled .tertiary{color:var(--disabled-secondary-color)}:host:disabled .tertiary .bar{background:var(--disabled-secondary-color)}:host:disabled .quaternary{border:3px solid var(--disabled-secondary-color)}:host:disabled .quaternary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}.prevent-select{-webkit-user-select:none;user-select:none}.button-content{width:-moz-fit-content;width:fit-content;text-transform:uppercase;font-weight:700;text-align:center}.bar{width:100%;height:.15em;background:var(--main-color);position:relative;margin:0 auto}\n"] }]
|
|
56
70
|
}], ctorParameters: function () { return []; } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvYnV0dG9uL3NyYy9iaWl0LWJ1dHRvbi9iaWl0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93aXphcmRyeS10aGVtZS9idXR0b24vc3JjL2JpaXQtYnV0dG9uL2JpaXQtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7QUFLbkQsTUFBTSxPQUFPLDBCQUEwQjtJQUNyQyxZQUFvQixNQUEyQjtRQUEzQixXQUFNLEdBQU4sTUFBTSxDQUFxQjtRQUM3QyxNQUFNLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQztJQUMzQixDQUFDOzt3SEFIVSwwQkFBMEI7NEdBQTFCLDBCQUEwQjs0RkFBMUIsMEJBQTBCO2tCQUh0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO2lCQUN0Qjs7QUFVRCxNQUFNLE9BQU8sNEJBQTRCO0lBQ3ZDLFlBQW9CLE1BQTJCO1FBQTNCLFdBQU0sR0FBTixNQUFNLENBQXFCO1FBQzdDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDO0lBQzdCLENBQUM7OzBIQUhVLDRCQUE0Qjs4R0FBNUIsNEJBQTRCOzRGQUE1Qiw0QkFBNEI7a0JBSHhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7aUJBQ3hCOztBQVVELE1BQU0sT0FBTywyQkFBMkI7SUFDdEMsWUFBb0IsTUFBMkI7UUFBM0IsV0FBTSxHQUFOLE1BQU0sQ0FBcUI7UUFDN0MsTUFBTSxDQUFDLEtBQUssR0FBRyxVQUFVLENBQUM7SUFDNUIsQ0FBQzs7eUhBSFUsMkJBQTJCOzZHQUEzQiwyQkFBMkI7NEZBQTNCLDJCQUEyQjtrQkFIdkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtpQkFDdkI7O0FBVUQsTUFBTSxPQUFPLDZCQUE2QjtJQUN4QyxZQUFvQixNQUEyQjtRQUEzQixXQUFNLEdBQU4sTUFBTSxDQUFxQjtRQUM3QyxNQUFNLENBQUMsS0FBSyxHQUFHLFlBQVksQ0FBQztJQUM5QixDQUFDOzsySEFIVSw2QkFBNkI7K0dBQTdCLDZCQUE2Qjs0RkFBN0IsNkJBQTZCO2tCQUh6QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO2lCQUN6Qjs7QUFhRCxNQUFNLE9BQU8sbUJBQW1CO0lBRzlCO1FBRkEsVUFBSyxHQUFHLFNBQVMsQ0FBQztJQUVGLENBQUM7O2lIQUhOLG1CQUFtQjtxR0FBbkIsbUJBQW1CLDJEQzVDaEMsdVJBUUE7NEZEb0NhLG1CQUFtQjtrQkFOL0IsU0FBUzsrQkFDRSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRGlyZWN0aXZlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3ByaW1hcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uUHJpbWFyeURpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcGFyZW50OiBCaWl0QnV0dG9uQ29tcG9uZW50KSB7XG4gICAgcGFyZW50LmNvbG9yID0gJ3ByaW1hcnknO1xuICB9XG59XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzZWNvbmRhcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uU2Vjb25kYXJ5RGlyZWN0aXZlIHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBwYXJlbnQ6IEJpaXRCdXR0b25Db21wb25lbnQpIHtcbiAgICBwYXJlbnQuY29sb3IgPSAnc2Vjb25kYXJ5JztcbiAgfVxufVxuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbdGVydGlhcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uVGVydGlhcnlEaXJlY3RpdmUge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHBhcmVudDogQmlpdEJ1dHRvbkNvbXBvbmVudCkge1xuICAgIHBhcmVudC5jb2xvciA9ICd0ZXJ0aWFyeSc7XG4gIH1cbn1cblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3F1YXRlcm5hcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uUXVhdGVybmFyeURpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcGFyZW50OiBCaWl0QnV0dG9uQ29tcG9uZW50KSB7XG4gICAgcGFyZW50LmNvbG9yID0gJ3F1YXRlcm5hcnknO1xuICB9XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2J1dHRvbltiaWl0LWJ1dHRvbl0nLFxuICB0ZW1wbGF0ZVVybDogJ2JpaXQtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2JpaXQtYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvbkNvbXBvbmVudCB7XG4gIGNvbG9yID0gJ3ByaW1hcnknO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYnV0dG9uLWJhc2UgcHJldmVudC1zZWxlY3Qge3tjb2xvcn19XCI+XG4gIDxkaXYgY2xhc3M9XCJidXR0b24tY29udGVudFwiPlxuICAgIDxzcGFuICN0ZXh0PlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvc3Bhbj5cbiAgICA8ZGl2ICpuZ0lmPVwiY29sb3IgPT0gJ3RlcnRpYXJ5J1wiIGNsYXNzPVwiYmFyXCIgW25nU3R5bGVdPVwieyd3aWR0aC5weCc6IHRleHQub2Zmc2V0V2lkdGggfVwiPjwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NgModule } from '@angular/core';
|
|
2
|
-
import { BiitButtonComponent, BiitButtonPrimaryDirective, BiitButtonSecondaryDirective, BiitButtonTertiaryDirective } from './biit-button.component';
|
|
2
|
+
import { BiitButtonComponent, BiitButtonPrimaryDirective, BiitButtonQuaternaryDirective, BiitButtonSecondaryDirective, BiitButtonTertiaryDirective } from './biit-button.component';
|
|
3
3
|
import { CommonModule } from "@angular/common";
|
|
4
4
|
import { FormsModule } from '@angular/forms';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
@@ -9,11 +9,13 @@ BiitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
|
|
|
9
9
|
BiitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonModule, declarations: [BiitButtonComponent,
|
|
10
10
|
BiitButtonPrimaryDirective,
|
|
11
11
|
BiitButtonSecondaryDirective,
|
|
12
|
-
BiitButtonTertiaryDirective
|
|
12
|
+
BiitButtonTertiaryDirective,
|
|
13
|
+
BiitButtonQuaternaryDirective], imports: [CommonModule,
|
|
13
14
|
FormsModule], exports: [BiitButtonComponent,
|
|
14
15
|
BiitButtonPrimaryDirective,
|
|
15
16
|
BiitButtonSecondaryDirective,
|
|
16
|
-
BiitButtonTertiaryDirective
|
|
17
|
+
BiitButtonTertiaryDirective,
|
|
18
|
+
BiitButtonQuaternaryDirective] });
|
|
17
19
|
BiitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonModule, imports: [CommonModule,
|
|
18
20
|
FormsModule] });
|
|
19
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonModule, decorators: [{
|
|
@@ -23,7 +25,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
23
25
|
BiitButtonComponent,
|
|
24
26
|
BiitButtonPrimaryDirective,
|
|
25
27
|
BiitButtonSecondaryDirective,
|
|
26
|
-
BiitButtonTertiaryDirective
|
|
28
|
+
BiitButtonTertiaryDirective,
|
|
29
|
+
BiitButtonQuaternaryDirective
|
|
27
30
|
],
|
|
28
31
|
imports: [
|
|
29
32
|
CommonModule,
|
|
@@ -33,8 +36,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
33
36
|
BiitButtonComponent,
|
|
34
37
|
BiitButtonPrimaryDirective,
|
|
35
38
|
BiitButtonSecondaryDirective,
|
|
36
|
-
BiitButtonTertiaryDirective
|
|
39
|
+
BiitButtonTertiaryDirective,
|
|
40
|
+
BiitButtonQuaternaryDirective
|
|
37
41
|
]
|
|
38
42
|
}]
|
|
39
43
|
}] });
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1idXR0b24ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvYnV0dG9uL3NyYy9iaWl0LWJ1dHRvbi9iaWl0LWJ1dHRvbi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLDBCQUEwQixFQUFFLDZCQUE2QixFQUN6RCw0QkFBNEIsRUFDNUIsMkJBQTJCLEVBQzVCLE1BQU0seUJBQXlCLENBQUM7QUFDakMsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFzQjNDLE1BQU0sT0FBTyxnQkFBZ0I7OzhHQUFoQixnQkFBZ0I7K0dBQWhCLGdCQUFnQixpQkFsQnpCLG1CQUFtQjtRQUNuQiwwQkFBMEI7UUFDMUIsNEJBQTRCO1FBQzVCLDJCQUEyQjtRQUMzQiw2QkFBNkIsYUFHN0IsWUFBWTtRQUNaLFdBQVcsYUFHWCxtQkFBbUI7UUFDbkIsMEJBQTBCO1FBQzFCLDRCQUE0QjtRQUM1QiwyQkFBMkI7UUFDM0IsNkJBQTZCOytHQUdwQixnQkFBZ0IsWUFYekIsWUFBWTtRQUNaLFdBQVc7NEZBVUYsZ0JBQWdCO2tCQXBCNUIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osbUJBQW1CO3dCQUNuQiwwQkFBMEI7d0JBQzFCLDRCQUE0Qjt3QkFDNUIsMkJBQTJCO3dCQUMzQiw2QkFBNkI7cUJBQzlCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7cUJBQ1o7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLG1CQUFtQjt3QkFDbkIsMEJBQTBCO3dCQUMxQiw0QkFBNEI7d0JBQzVCLDJCQUEyQjt3QkFDM0IsNkJBQTZCO3FCQUM5QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQmlpdEJ1dHRvbkNvbXBvbmVudCxcbiAgQmlpdEJ1dHRvblByaW1hcnlEaXJlY3RpdmUsIEJpaXRCdXR0b25RdWF0ZXJuYXJ5RGlyZWN0aXZlLFxuICBCaWl0QnV0dG9uU2Vjb25kYXJ5RGlyZWN0aXZlLFxuICBCaWl0QnV0dG9uVGVydGlhcnlEaXJlY3RpdmVcbn0gZnJvbSAnLi9iaWl0LWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHtDb21tb25Nb2R1bGV9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQmlpdEJ1dHRvbkNvbXBvbmVudCxcbiAgICBCaWl0QnV0dG9uUHJpbWFyeURpcmVjdGl2ZSxcbiAgICBCaWl0QnV0dG9uU2Vjb25kYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25UZXJ0aWFyeURpcmVjdGl2ZSxcbiAgICBCaWl0QnV0dG9uUXVhdGVybmFyeURpcmVjdGl2ZVxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBCaWl0QnV0dG9uQ29tcG9uZW50LFxuICAgIEJpaXRCdXR0b25QcmltYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25TZWNvbmRhcnlEaXJlY3RpdmUsXG4gICAgQmlpdEJ1dHRvblRlcnRpYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25RdWF0ZXJuYXJ5RGlyZWN0aXZlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvbk1vZHVsZSB7IH1cbiJdfQ==
|
package/esm2020/inputs/biit-slider-option-vertical/biit-slider-option-vertical.component.mjs
CHANGED
|
@@ -69,7 +69,7 @@ BiitSliderOptionVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
|
|
|
69
69
|
useExisting: forwardRef(() => BiitSliderOptionVerticalComponent),
|
|
70
70
|
multi: true
|
|
71
71
|
}
|
|
72
|
-
], 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:
|
|
72
|
+
], 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.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
|
|
73
73
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitSliderOptionVerticalComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
75
|
args: [{ selector: 'biit-slider-option-vertical', providers: [
|
|
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
78
78
|
useExisting: forwardRef(() => BiitSliderOptionVerticalComponent),
|
|
79
79
|
multi: true
|
|
80
80
|
}
|
|
81
|
-
], 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:
|
|
81
|
+
], 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"] }]
|
|
82
82
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
83
83
|
type: Input
|
|
84
84
|
}], inverted: [{
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Component, Input, forwardRef } from '@angular/core';
|
|
2
2
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@angular/
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
import * as i2 from "@angular/forms";
|
|
5
6
|
export class BiitToggleComponent {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.disabled = false;
|
|
@@ -23,13 +24,13 @@ export class BiitToggleComponent {
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
BiitToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
BiitToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleComponent, selector: "biit-toggle", inputs: { disabled: "disabled" }, providers: [
|
|
27
|
+
BiitToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitToggleComponent, selector: "biit-toggle", inputs: { disabled: "disabled", description: "description" }, providers: [
|
|
27
28
|
{
|
|
28
29
|
provide: NG_VALUE_ACCESSOR,
|
|
29
30
|
useExisting: forwardRef(() => BiitToggleComponent),
|
|
30
31
|
multi: true
|
|
31
32
|
}
|
|
32
|
-
], 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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type:
|
|
33
|
+
], 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"] }] });
|
|
33
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitToggleComponent, decorators: [{
|
|
34
35
|
type: Component,
|
|
35
36
|
args: [{ selector: 'biit-toggle', providers: [
|
|
@@ -38,8 +39,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
38
39
|
useExisting: forwardRef(() => BiitToggleComponent),
|
|
39
40
|
multi: true
|
|
40
41
|
}
|
|
41
|
-
], 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"] }]
|
|
42
|
+
], 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"] }]
|
|
42
43
|
}], propDecorators: { disabled: [{
|
|
43
44
|
type: Input
|
|
45
|
+
}], description: [{
|
|
46
|
+
type: Input
|
|
44
47
|
}] } });
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC10b2dnbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvaW5wdXRzL3NyYy9iaWl0LXRvZ2dsZS9iaWl0LXRvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93aXphcmRyeS10aGVtZS9pbnB1dHMvc3JjL2JpaXQtdG9nZ2xlL2JpaXQtdG9nZ2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMzRCxPQUFPLEVBQXVCLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFjdkUsTUFBTSxPQUFPLG1CQUFtQjtJQVpoQztRQWFXLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFJMUIsYUFBUSxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDOUIsY0FBUyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztLQWtCdEI7SUFoQkMsUUFBUSxDQUFDLElBQWE7UUFDcEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFVBQVUsQ0FBQyxHQUFZO1FBQ3JCLElBQUksQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO0lBQ3JCLENBQUM7O2lIQXZCVSxtQkFBbUI7cUdBQW5CLG1CQUFtQixvR0FSbkI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztZQUNsRCxLQUFLLEVBQUUsSUFBSTtTQUNaO0tBQ0YsMEJDYkgsNGdCQWdCQTs0RkREYSxtQkFBbUI7a0JBWi9CLFNBQVM7K0JBQ0UsYUFBYSxhQUdaO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLG9CQUFvQixDQUFDOzRCQUNsRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjs4QkFHUSxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXQsIGZvcndhcmRSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmlpdC10b2dnbGUnLFxuICB0ZW1wbGF0ZVVybDogJ2JpaXQtdG9nZ2xlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2JpaXQtdG9nZ2xlLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQmlpdFRvZ2dsZUNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBCaWl0VG9nZ2xlQ29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbjogc3RyaW5nO1xuICBjaGVja2VkOiBib29sZWFuO1xuXG4gIG9uQ2hhbmdlID0gKHZhbHVlOiBhbnkpID0+IHt9O1xuICBvblRvdWNoZWQgPSAoKSA9PiB7fTtcblxuICBvblRvZ2dsZShpdGVtOiBib29sZWFuKSB7XG4gICAgdGhpcy5jaGVja2VkID0gaXRlbTtcbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMuY2hlY2tlZCk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHdyaXRlVmFsdWUob2JqOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5jaGVja2VkID0gb2JqO1xuICB9XG59XG4iLCI8bGFiZWwgY2xhc3M9XCJ0b2dnbGUtYmFzZVwiPlxuICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgaWQ9XCJjaGVja2JveFwiXG4gICAgICAgICBbbmdNb2RlbF09XCJjaGVja2VkXCJcbiAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uVG9nZ2xlKCRldmVudClcIlxuICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIvPlxuICA8ZGl2IGNsYXNzPVwidG9nZ2xlLXN3aXRjaFwiIGlkPVwic3dpdGNoXCI+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZS10cmFpbFwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtYm94XCI+PC9kaXY+XG4gIDwvZGl2PlxuICA8YSBjbGFzcz1cInRvZ2dsZS1sYWJlbFwiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9hPlxuICA8c3BhbiAqbmdJZj1cImRlc2NyaXB0aW9uXCIgaWQ9XCJkZXNjcmlwdGlvblwiIGNsYXNzPVwidG9nZ2xlLWRlc2NyaXB0aW9uXCI+XG4gICAgICB7eyBkZXNjcmlwdGlvbiB9fVxuICAgIDwvc3Bhbj5cbjwvbGFiZWw+XG4iXX0=
|
|
@@ -197,7 +197,7 @@ BiitLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
197
197
|
provide: TRANSLOCO_SCOPE,
|
|
198
198
|
useValue: { scope: 'wizardry-theme/login-welcome', alias: "login-welcome" },
|
|
199
199
|
multi: true
|
|
200
|
-
}], ngImport: i0, template: "<biit-popup no-header *transloco=\"let t\">\n <div id=\"login-tabs\"\n *ngIf=\"allowSignUp && !resetView\"\n class=\"tab-buttons\"\n >\n <div id=\"tab-login\"\n [class.selected]=\"!signUpView\"\n (click)=\"signUpView = false\"\n >\n {{ t('login.log_in') }}\n </div>\n <div id=\"tab-signup\"\n [class.selected]=\"signUpView\"\n (click)=\"signUpView = true\"\n >\n {{ t('login.sign_up') }}\n </div>\n </div>\n <div class=\"login-container\" [class.allow-signup]=\"allowSignUp\">\n <div class=\"login-column\">\n <div class=\"login-icon-square\">\n <div class=\"login-keyring\"></div>\n <biit-icon [name]=\"$any('key_' + keyId)\" class=\"login-key-icon\"></biit-icon>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"resetView ? resetForm : signUpView ? signUpForm : loginForm\"></ng-container>\n </div>\n</biit-popup>\n\n<ng-template #loginForm>\n <div id=\"login-column\" class=\"login-column\" *transloco=\"let t\">\n <biit-input-text id=\"login-username\" [(ngModel)]=\"login.username\" fieldName=\"username\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.USERNAME)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.username')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"login-password\" [(ngModel)]=\"login.password\" fieldName=\"password\"\n [error]=\"this.loginErrors.get(LoginError.PASSWORD)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.password')}}\" [type]=\"Type.PASSWORD\" class=\"login-input\"></biit-input-text>\n <biit-toggle\n class=\"margin-vertical-14\"\n [(ngModel)]=\"login.remember\">\n {{ t('login.remember') }}\n </biit-toggle>\n <div class=\"margin-top-18 centered\">\n <button id=\"login-button\" biit-button primary\n (click)=\"performLogin()\"\n >\n {{ t('login.take_me_in') }}\n </button>\n </div>\n <div class=\"margin-top-18 centered\">\n <button biit-button tertiary *ngIf=\"allowResetPassword\"\n (click)=\"resetView = true\"\n class=\"smaller-text\"\n >\n {{ t('login.forgot') }}\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resetForm>\n <div class=\"login-column-expanded\" *transloco=\"let t\">\n <span class=\"title\">\n {{ t('login.reset_password_title') }}\n </span>\n <span class=\"subtitle\"\n style=\"margin-top: 1em;\">\n {{ t('login.reset_password_subtitle') }}\n </span>\n <span class=\"body\"\n style=\"margin-top: 0.5em\">\n {{ t('login.reset_password_body') }}\n </span>\n <biit-input-text [(ngModel)]=\"resetEmail\" fieldName=\"email\" [type]=\"Type.EMAIL\"\n [error]=\"this.loginErrors.get(LoginError.EMAIL)\"\n (keyup.enter)=\"performResetPassword()\" style=\"margin-top: 2em; margin-bottom: 2.5em\"\n placeholder=\"{{t('login.email')}}\" class=\"login-input\"></biit-input-text>\n <div class=\"buttons\">\n <button biit-button (click)=\"performResetPassword()\">\n {{ t('login.reset') }}\n </button>\n <button biit-button tertiary (click)=\"restartView()\" class=\"smaller-text\">\n {{ t('login.i_remember') }}\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #signUpForm>\n <div id=\"signup-column\" class=\"login-column\" *transloco=\"let t\">\n <biit-input-text id=\"signup-username\" [(ngModel)]=\"signUpData.username\" fieldName=\"username\"\n *ngIf=\"!signUpGeneratedUsername\"\n [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.USERNAME)\"\n (keyup.enter)=\"performLogin()\"\n (ngModelChange)=\"usernameSearch.next($event)\"\n placeholder=\"{{t('login.username')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"signup-name\" [(ngModel)]=\"signUpData.name\" fieldName=\"name\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.NAME)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.name')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"signup-lastname\" [(ngModel)]=\"signUpData.lastname\" fieldName=\"lastname\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.LASTNAME)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.lastname')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"signup-email\" [(ngModel)]=\"signUpData.email\" fieldName=\"email\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.EMAIL)\" [required]=\"true\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.email')}}\" class=\"login-input\"></biit-input-text>\n <biit-dropdown\n *ngIf=\"teams && teams.length\"\n [(ngModel)]=\"dumbTeam\"\n [required]=\"true\"\n [data]=\"teams\"\n value=\"key\"\n label=\"label\"\n title=\"{{t('login.team')}}\" class=\"login-input\"/>\n <biit-input-text id=\"signup-password\" [(ngModel)]=\"signUpData.password\" fieldName=\"password\"\n [error]=\"this.loginErrors.get(LoginError.PASSWORD)\"\n (keyup.enter)=\"performLogin()\" *ngIf=\"!signUpGeneratedPassword\"\n placeholder=\"{{t('login.password')}}\" [type]=\"Type.PASSWORD\" class=\"login-input\"></biit-input-text>\n <div class=\"margin-top-18 centered\">\n <button id=\"signup-button\" biit-button primary\n (click)=\"performSignUp()\"\n >\n {{ t('login.sign_me_up') }}\n </button>\n </div>\n </div>\n <div *transloco=\"let t\">\n <biit-popup *ngIf=\"notification && showNotification\" id=\"warning-popup\"\n [title]=\"t('login-welcome.warning_window.tittle')\"\n closable\n (onClosed)=\"showNotification = false\">\n <div [innerHTML]=\"t('login-welcome.warning_window.content')\"></div>\n </biit-popup>\n </div>\n</ng-template>\n", styles: [".login-container{display:flex;font-size:inherit;column-gap:4.2rem}.login-container.allow-signup{padding:.5rem}.login-column{width:12.8em;display:inline-flex;flex-direction:column}.login-column-expanded{width:20em;display:inline-flex;flex-direction:column}.login-key-icon{position:absolute;margin-top:1em;rotate:90deg;height:12.8em;width:12.8em}.login-keyring{width:1.1em;background:var(--main-color);height:2.85em}.login-icon-square{display:inline-flex;border:solid .175em var(--component-color);width:12.8em;height:12.8em;box-sizing:border-box;flex-direction:column;align-items:center}.login-input{margin-top:1.05em;margin-bottom:1.05em}.margin-vertical-14{margin:.7em 0}.margin-top-18{margin-top:.9em}.centered{display:inline-flex;justify-content:center}.smaller-text{font-size:.9em}.title{font-size:1.5em;font-weight:700}.subtitle{font-size:1em;font-weight:700}.body{font-size:.85em}.buttons{display:flex;align-items:center;gap:2.5em}.tab-buttons{position:absolute;right:0;top:0;width:50%;height:calc(2rem + 3px);display:flex}.tab-buttons div{display:flex;flex-grow:1;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;background:transparent;color:var(--disabled-primary-color)}.tab-buttons div:hover{border-bottom:3px solid var(--disabled-primary-color)}.tab-buttons div.selected{background:transparent;color:#262626;border-bottom:3px solid var(--active-color)}@media (max-width: 600px){::ng-deep .popup-canvas{min-width:auto!important}::ng-deep .popup-canvas .login-container{flex-direction:column-reverse;gap:1.5rem}::ng-deep .popup-canvas .login-column-expanded{min-width:12.8em}.buttons{gap:1.5em;flex-wrap:wrap}.tab-buttons{width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.BiitPopupComponent, selector: "biit-popup", inputs: ["title", "mouseEvent"], outputs: ["onClosed"] }, { kind: "directive", type: i3.BiitPopupNoHeaderDirective, selector: "[no-header]" }, { kind: "directive", type: i3.BiitPopupClosableDirective, selector: "[closable]" }, { kind: "component", type: i4.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i5.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.BiitToggleComponent, selector: "biit-toggle", inputs: ["disabled"] }, { kind: "component", type: i7.BiitButtonComponent, selector: "button[biit-button]" }, { kind: "directive", type: i7.BiitButtonPrimaryDirective, selector: "[primary]" }, { kind: "directive", type: i7.BiitButtonTertiaryDirective, selector: "[tertiary]" }, { kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i5.BiitDropdownComponent, selector: "biit-dropdown", inputs: ["title", "label", "value", "descriptionLabel", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc", "icon"] }] });
|
|
200
|
+
}], ngImport: i0, template: "<biit-popup no-header *transloco=\"let t\">\n <div id=\"login-tabs\"\n *ngIf=\"allowSignUp && !resetView\"\n class=\"tab-buttons\"\n >\n <div id=\"tab-login\"\n [class.selected]=\"!signUpView\"\n (click)=\"signUpView = false\"\n >\n {{ t('login.log_in') }}\n </div>\n <div id=\"tab-signup\"\n [class.selected]=\"signUpView\"\n (click)=\"signUpView = true\"\n >\n {{ t('login.sign_up') }}\n </div>\n </div>\n <div class=\"login-container\" [class.allow-signup]=\"allowSignUp\">\n <div class=\"login-column\">\n <div class=\"login-icon-square\">\n <div class=\"login-keyring\"></div>\n <biit-icon [name]=\"$any('key_' + keyId)\" class=\"login-key-icon\"></biit-icon>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"resetView ? resetForm : signUpView ? signUpForm : loginForm\"></ng-container>\n </div>\n</biit-popup>\n\n<ng-template #loginForm>\n <div id=\"login-column\" class=\"login-column\" *transloco=\"let t\">\n <biit-input-text id=\"login-username\" [(ngModel)]=\"login.username\" fieldName=\"username\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.USERNAME)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.username')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"login-password\" [(ngModel)]=\"login.password\" fieldName=\"password\"\n [error]=\"this.loginErrors.get(LoginError.PASSWORD)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.password')}}\" [type]=\"Type.PASSWORD\" class=\"login-input\"></biit-input-text>\n <biit-toggle\n class=\"margin-vertical-14\"\n [(ngModel)]=\"login.remember\">\n {{ t('login.remember') }}\n </biit-toggle>\n <div class=\"margin-top-18 centered\">\n <button id=\"login-button\" biit-button primary\n (click)=\"performLogin()\"\n >\n {{ t('login.take_me_in') }}\n </button>\n </div>\n <div class=\"margin-top-18 centered\">\n <button biit-button tertiary *ngIf=\"allowResetPassword\"\n (click)=\"resetView = true\"\n class=\"smaller-text\"\n >\n {{ t('login.forgot') }}\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resetForm>\n <div class=\"login-column-expanded\" *transloco=\"let t\">\n <span class=\"title\">\n {{ t('login.reset_password_title') }}\n </span>\n <span class=\"subtitle\"\n style=\"margin-top: 1em;\">\n {{ t('login.reset_password_subtitle') }}\n </span>\n <span class=\"body\"\n style=\"margin-top: 0.5em\">\n {{ t('login.reset_password_body') }}\n </span>\n <biit-input-text [(ngModel)]=\"resetEmail\" fieldName=\"email\" [type]=\"Type.EMAIL\"\n [error]=\"this.loginErrors.get(LoginError.EMAIL)\"\n (keyup.enter)=\"performResetPassword()\" style=\"margin-top: 2em; margin-bottom: 2.5em\"\n placeholder=\"{{t('login.email')}}\" class=\"login-input\"></biit-input-text>\n <div class=\"buttons\">\n <button biit-button (click)=\"performResetPassword()\">\n {{ t('login.reset') }}\n </button>\n <button biit-button tertiary (click)=\"restartView()\" class=\"smaller-text\">\n {{ t('login.i_remember') }}\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #signUpForm>\n <div id=\"signup-column\" class=\"login-column\" *transloco=\"let t\">\n <biit-input-text id=\"signup-username\" [(ngModel)]=\"signUpData.username\" fieldName=\"username\"\n *ngIf=\"!signUpGeneratedUsername\"\n [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.USERNAME)\"\n (keyup.enter)=\"performLogin()\"\n (ngModelChange)=\"usernameSearch.next($event)\"\n placeholder=\"{{t('login.username')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"signup-name\" [(ngModel)]=\"signUpData.name\" fieldName=\"name\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.NAME)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.name')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"signup-lastname\" [(ngModel)]=\"signUpData.lastname\" fieldName=\"lastname\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.LASTNAME)\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.lastname')}}\" class=\"login-input\"></biit-input-text>\n <biit-input-text id=\"signup-email\" [(ngModel)]=\"signUpData.email\" fieldName=\"email\" [type]=\"Type.TEXT\"\n [error]=\"this.loginErrors.get(LoginError.EMAIL)\" [required]=\"true\"\n (keyup.enter)=\"performLogin()\"\n placeholder=\"{{t('login.email')}}\" class=\"login-input\"></biit-input-text>\n <biit-dropdown\n *ngIf=\"teams && teams.length\"\n [(ngModel)]=\"dumbTeam\"\n [required]=\"true\"\n [data]=\"teams\"\n value=\"key\"\n label=\"label\"\n title=\"{{t('login.team')}}\" class=\"login-input\"/>\n <biit-input-text id=\"signup-password\" [(ngModel)]=\"signUpData.password\" fieldName=\"password\"\n [error]=\"this.loginErrors.get(LoginError.PASSWORD)\"\n (keyup.enter)=\"performLogin()\" *ngIf=\"!signUpGeneratedPassword\"\n placeholder=\"{{t('login.password')}}\" [type]=\"Type.PASSWORD\" class=\"login-input\"></biit-input-text>\n <div class=\"margin-top-18 centered\">\n <button id=\"signup-button\" biit-button primary\n (click)=\"performSignUp()\"\n >\n {{ t('login.sign_me_up') }}\n </button>\n </div>\n </div>\n <div *transloco=\"let t\">\n <biit-popup *ngIf=\"notification && showNotification\" id=\"warning-popup\"\n [title]=\"t('login-welcome.warning_window.tittle')\"\n closable\n (onClosed)=\"showNotification = false\">\n <div [innerHTML]=\"t('login-welcome.warning_window.content')\"></div>\n </biit-popup>\n </div>\n</ng-template>\n", styles: [".login-container{display:flex;font-size:inherit;column-gap:4.2rem}.login-container.allow-signup{padding:.5rem}.login-column{width:12.8em;display:inline-flex;flex-direction:column}.login-column-expanded{width:20em;display:inline-flex;flex-direction:column}.login-key-icon{position:absolute;margin-top:1em;rotate:90deg;height:12.8em;width:12.8em}.login-keyring{width:1.1em;background:var(--main-color);height:2.85em}.login-icon-square{display:inline-flex;border:solid .175em var(--component-color);width:12.8em;height:12.8em;box-sizing:border-box;flex-direction:column;align-items:center}.login-input{margin-top:1.05em;margin-bottom:1.05em}.margin-vertical-14{margin:.7em 0}.margin-top-18{margin-top:.9em}.centered{display:inline-flex;justify-content:center}.smaller-text{font-size:.9em}.title{font-size:1.5em;font-weight:700}.subtitle{font-size:1em;font-weight:700}.body{font-size:.85em}.buttons{display:flex;align-items:center;gap:2.5em}.tab-buttons{position:absolute;right:0;top:0;width:50%;height:calc(2rem + 3px);display:flex}.tab-buttons div{display:flex;flex-grow:1;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;background:transparent;color:var(--disabled-primary-color)}.tab-buttons div:hover{border-bottom:3px solid var(--disabled-primary-color)}.tab-buttons div.selected{background:transparent;color:#262626;border-bottom:3px solid var(--active-color)}@media (max-width: 600px){::ng-deep .popup-canvas{min-width:auto!important}::ng-deep .popup-canvas .login-container{flex-direction:column-reverse;gap:1.5rem}::ng-deep .popup-canvas .login-column-expanded{min-width:12.8em}.buttons{gap:1.5em;flex-wrap:wrap}.tab-buttons{width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.BiitPopupComponent, selector: "biit-popup", inputs: ["title", "mouseEvent"], outputs: ["onClosed"] }, { kind: "directive", type: i3.BiitPopupNoHeaderDirective, selector: "[no-header]" }, { kind: "directive", type: i3.BiitPopupClosableDirective, selector: "[closable]" }, { kind: "component", type: i4.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i5.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.BiitToggleComponent, selector: "biit-toggle", inputs: ["disabled", "description"] }, { kind: "component", type: i7.BiitButtonComponent, selector: "button[biit-button]" }, { kind: "directive", type: i7.BiitButtonPrimaryDirective, selector: "[primary]" }, { kind: "directive", type: i7.BiitButtonTertiaryDirective, selector: "[tertiary]" }, { kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i5.BiitDropdownComponent, selector: "biit-dropdown", inputs: ["title", "label", "value", "descriptionLabel", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc", "icon"] }] });
|
|
201
201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitLoginComponent, decorators: [{
|
|
202
202
|
type: Component,
|
|
203
203
|
args: [{ selector: 'biit-login', providers: [{
|