chrv-components 1.12.150 → 1.12.152
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.
|
Binary file
|
|
@@ -4653,11 +4653,11 @@ class ChrPasswordInputComponent extends ChrInputComponent {
|
|
|
4653
4653
|
};
|
|
4654
4654
|
}
|
|
4655
4655
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4656
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>", styles: [":host{display:
|
|
4656
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"], dependencies: [{ kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }] }); }
|
|
4657
4657
|
}
|
|
4658
4658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, decorators: [{
|
|
4659
4659
|
type: Component,
|
|
4660
|
-
args: [{ selector: 'chr-password-input', imports: [ChrInputComponent, ChrInputIndicators], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>", styles: [":host{display:
|
|
4660
|
+
args: [{ selector: 'chr-password-input', imports: [ChrInputComponent, ChrInputIndicators], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"] }]
|
|
4661
4661
|
}] });
|
|
4662
4662
|
|
|
4663
4663
|
class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
@@ -4811,11 +4811,11 @@ class ChrToggleInputComponent extends ChrInputComponent {
|
|
|
4811
4811
|
super.ngOnInit();
|
|
4812
4812
|
}
|
|
4813
4813
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:after{content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;padding-right:.125rem;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.
|
|
4814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:after{content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;padding-right:.125rem;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem;max-height:1.5rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }); }
|
|
4815
4815
|
}
|
|
4816
4816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, decorators: [{
|
|
4817
4817
|
type: Component,
|
|
4818
|
-
args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:after{content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;padding-right:.125rem;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.
|
|
4818
|
+
args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:after{content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;padding-right:.125rem;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem;max-height:1.5rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }]
|
|
4819
4819
|
}], ctorParameters: () => [] });
|
|
4820
4820
|
|
|
4821
4821
|
class ChrSearchbarComponent {
|
|
@@ -7858,7 +7858,7 @@ class MessageBanner {
|
|
|
7858
7858
|
...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
7859
7859
|
this.closable = input(false, /* @ts-ignore */
|
|
7860
7860
|
...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
|
|
7861
|
-
this.title = input
|
|
7861
|
+
this.title = input(null, /* @ts-ignore */
|
|
7862
7862
|
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
7863
7863
|
this.icon = input(null, /* @ts-ignore */
|
|
7864
7864
|
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
@@ -7871,12 +7871,12 @@ class MessageBanner {
|
|
|
7871
7871
|
};
|
|
7872
7872
|
}
|
|
7873
7873
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7874
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired:
|
|
7874
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n <div class=\"banner-header\">\r\n @if(icon()){\r\n <span class=\"mat-icon material-symbols banner-icon\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n\r\n }\r\n @if(title()){\r\n <strong class=\"banner-title\">{{title()}}</strong>\r\n }\r\n </div>\r\n <div class=\"message-content\">\r\n {{message()}}\r\n <ng-content></ng-content>\r\n </div>\r\n @if(closable()){\r\n <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n }\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{flex:1 1 auto;border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color);fill:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }); }
|
|
7875
7875
|
}
|
|
7876
7876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageBanner, decorators: [{
|
|
7877
7877
|
type: Component,
|
|
7878
|
-
args: [{ selector: 'chr-message-banner', imports: [],
|
|
7879
|
-
}], propDecorators: { closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required:
|
|
7878
|
+
args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n <div class=\"banner-header\">\r\n @if(icon()){\r\n <span class=\"mat-icon material-symbols banner-icon\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n\r\n }\r\n @if(title()){\r\n <strong class=\"banner-title\">{{title()}}</strong>\r\n }\r\n </div>\r\n <div class=\"message-content\">\r\n {{message()}}\r\n <ng-content></ng-content>\r\n </div>\r\n @if(closable()){\r\n <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n }\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{flex:1 1 auto;border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color);fill:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }]
|
|
7879
|
+
}], propDecorators: { closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
7880
7880
|
|
|
7881
7881
|
class Spinner {
|
|
7882
7882
|
constructor() {
|