@obliczeniowo/elementary
Version:
Library made in Angular version 20
401 lines (392 loc) • 33.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, HostBinding, Directive, Injectable, input, Component, EventEmitter, Output, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i4 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i3$1 from '@obliczeniowo/elementary/animations';
import { AnimationsModule } from '@obliczeniowo/elementary/animations';
import * as i7 from '@obliczeniowo/elementary/text-pipes';
import { TextPipesModule } from '@obliczeniowo/elementary/text-pipes';
import { keysValues } from '@obliczeniowo/elementary/objects';
import * as i1 from '@obliczeniowo/elementary/ssr';
class TextAreaDirective {
outlined;
noResize;
constructor(renderer, elementRef) {
renderer.addClass(elementRef.nativeElement, 'obl-text-area');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: TextAreaDirective, isStandalone: false, selector: "textarea[oblTextArea]", inputs: { outlined: "outlined", noResize: "noResize" }, host: { properties: { "class.obl-text-area-outline": "this.outlined", "class.obl-text-area-no-resize": "this.noResize" } }, exportAs: ["oblTextArea"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TextAreaDirective, decorators: [{
type: Directive,
args: [{
selector: 'textarea[oblTextArea]',
exportAs: 'oblTextArea',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { outlined: [{
type: Input
}, {
type: HostBinding,
args: ['class.obl-text-area-outline']
}], noResize: [{
type: Input
}, {
type: HostBinding,
args: ['class.obl-text-area-no-resize']
}] } });
class InputWrappersDefaultSettingsService {
labelAnimation = {
inputWrapper: false,
editInput: false,
select: false,
filters: false,
sort: false
};
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputWrappersDefaultSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputWrappersDefaultSettingsService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputWrappersDefaultSettingsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class TextAreaWrapperComponent {
elementRef;
settings;
/**
* Label text to display
*/
label = input();
/**
* Style of displayed input
*/
display = input('outlined');
/**
* reference to textarea element
*/
textArea;
/**
* Enable type text animation for label
*/
labelAnimation = false;
constructor(elementRef, settings) {
this.elementRef = elementRef;
this.settings = settings;
this.labelAnimation = this.settings.labelAnimation.inputWrapper;
}
ngAfterContentInit() {
this.textArea = this.elementRef.nativeElement.querySelector('textarea');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TextAreaWrapperComponent, deps: [{ token: i0.ElementRef }, { token: InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: TextAreaWrapperComponent, isStandalone: false, selector: "obl-textarea-wrapper", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, labelAnimation: { classPropertyName: "labelAnimation", publicName: "labelAnimation", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fieldset\n [ngClass]=\"{\n label: label(),\n outlined: display() === 'outlined',\n underlined: display() === 'underlined',\n none: display() === 'none',\n }\"\n>\n @if (label()) {\n <legend>\n @if (labelAnimation) {\n <obl-type-text [text]=\"label() || ''\" [interval]=\"40\"></obl-type-text>\n } @else {\n {{ label() }}\n }\n </legend>\n }\n <ng-content></ng-content>\n</fieldset>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}fieldset{display:flex;flex-grow:1;align-items:center;padding:5px}fieldset.label{padding:0 5px 5px}fieldset.outlined{border:1px solid var(--default-border-color);border-radius:5px}fieldset.outlined.invalid{border:1px solid var(--obl-default-error-color)}fieldset.underlined{border:1px solid transparent;border-bottom:1px solid var(--default-border-color);margin-bottom:1px}fieldset.underlined.invalid{border-bottom:1px solid var(--obl-default-error-color)}fieldset.underlined:hover{margin-bottom:0}fieldset legend{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.TypeTextComponent, selector: "obl-type-text", inputs: ["text", "interval"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TextAreaWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-textarea-wrapper', standalone: false, template: "<fieldset\n [ngClass]=\"{\n label: label(),\n outlined: display() === 'outlined',\n underlined: display() === 'underlined',\n none: display() === 'none',\n }\"\n>\n @if (label()) {\n <legend>\n @if (labelAnimation) {\n <obl-type-text [text]=\"label() || ''\" [interval]=\"40\"></obl-type-text>\n } @else {\n {{ label() }}\n }\n </legend>\n }\n <ng-content></ng-content>\n</fieldset>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}fieldset{display:flex;flex-grow:1;align-items:center;padding:5px}fieldset.label{padding:0 5px 5px}fieldset.outlined{border:1px solid var(--default-border-color);border-radius:5px}fieldset.outlined.invalid{border:1px solid var(--obl-default-error-color)}fieldset.underlined{border:1px solid transparent;border-bottom:1px solid var(--default-border-color);margin-bottom:1px}fieldset.underlined.invalid{border-bottom:1px solid var(--obl-default-error-color)}fieldset.underlined:hover{margin-bottom:0}fieldset legend{font-size:12px}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: InputWrappersDefaultSettingsService }], propDecorators: { labelAnimation: [{
type: Input
}] } });
class InputDirective {
outlined;
constructor(renderer, elementRef) {
renderer.addClass(elementRef.nativeElement, 'obl-input');
renderer.setStyle(elementRef.nativeElement, 'display', 'flex');
renderer.setStyle(elementRef.nativeElement, 'width', '100%');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: InputDirective, isStandalone: false, selector: "input[oblInput]", inputs: { outlined: "outlined" }, host: { properties: { "class.obl-input-outline": "this.outlined" } }, exportAs: ["oblInput"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[oblInput]',
exportAs: 'oblInput',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { outlined: [{
type: Input
}, {
type: HostBinding,
args: ['class.obl-input-outline']
}] } });
class InputWrapperComponent {
elementRef;
ssr;
settings;
files = [];
/**
* Label text to display
*/
label = input();
/**
* Style of displayed input
*/
display = input('outlined');
/**
* If you want to display button for clear input (only for input:not([type=file]))
*/
cancellable = input(false);
/**
* step for numeric only
*/
step = input();
/**
* errors keys from form control
*/
errors = null;
/**
* translations
*/
translations = input({});
/**
* Enable type text animation for label
*/
labelAnimation = false;
small;
disable;
/**
* Emit array of files when it's change, work only with input[type=file]
*/
loaded = new EventEmitter();
input;
observer;
get touched() {
return this.input?.classList.contains('ng-touched');
}
get invalid() {
return this.input?.classList.contains('ng-invalid');
}
constructor(elementRef, ssr, settings) {
this.elementRef = elementRef;
this.ssr = ssr;
this.settings = settings;
this.labelAnimation = this.settings.labelAnimation.inputWrapper;
}
onBlur = () => this.input?.classList.add('ng-touched');
ngAfterContentInit() {
this.input = this.elementRef.nativeElement.querySelector('input');
if (this.input?.type === 'file') {
this.input.style.display = 'none';
this.input.onchange = this.onChange;
}
if (this.input) {
this.input.addEventListener('blur', this.onBlur);
}
if (this.ssr.isBrowser()) {
if (!this.observer) {
this.observer = new MutationObserver((list) => {
list.forEach((mutation) => {
if (mutation.type === 'attributes' &&
mutation?.attributeName === 'disabled') {
this.disable = this.input?.disabled || undefined;
}
});
});
}
if (this.input) {
this.disable = this.input.disabled || undefined;
this.observer.observe(this.input, {
childList: true,
subtree: true,
attributes: true,
characterData: false,
});
}
else {
this.observer.disconnect();
}
}
}
ngOnDestroy() {
this.observer?.disconnect();
}
onChange = () => {
this.input?.classList.add('ng-touched');
this.files = Array.from(this.input?.files || []);
this.loaded.emit(this.files);
};
stepUp() {
if (this.input) {
this.input.classList.add('ng-touched');
this.input.classList.remove('ng-untouched');
const step = this.step();
if (!step) {
this.input.stepUp();
}
else {
this.input.valueAsNumber += step;
}
this.input.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true,
}));
this.input.dispatchEvent(new Event('change', {
bubbles: true,
cancelable: true,
}));
}
}
stepDown() {
if (this.input) {
this.input.classList.add('ng-touched');
this.input.classList.remove('ng-untouched');
const step = this.step();
if (!step) {
this.input.stepDown();
}
else {
this.input.valueAsNumber -= step;
}
this.input.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true,
}));
this.input.dispatchEvent(new Event('change', {
bubbles: true,
cancelable: true,
}));
}
}
type() {
return this.input?.type;
}
min() {
return (this.input?.min !== undefined && +this.input?.min) || undefined;
}
max() {
return (this.input?.max !== undefined && +this.input?.max) || undefined;
}
inputStep() {
return this.input?.step;
}
disabled() {
return this.input?.disabled || undefined;
}
checkErrors() {
return keysValues(this.errors || {}).some(keyValue => keyValue[1]);
}
valid() {
if (this.ssr.isServer()) {
return undefined;
}
if (!this.touched) {
return true;
}
if (this.checkErrors()) {
return false;
}
if (this.type() === 'number') {
const min = this.min();
const max = this.max();
if (min && min > +this.getValue()) {
return false;
}
if (max && max < +this.getValue()) {
return false;
}
return true;
}
return this.input?.checkValidity();
}
reset() {
if (this.input) {
this.input.value = '';
this.input.classList.remove('ng-touched');
this.input.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true,
}));
this.input.dispatchEvent(new Event('change', {
bubbles: true,
cancelable: true,
}));
}
}
getValue() {
return this.input?.value || '';
}
clicked() {
this.input?.click();
}
delete(index) {
this.files = this.files.filter((_, i) => i !== index);
this.loaded.emit(this.files);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputWrapperComponent, deps: [{ token: i0.ElementRef }, { token: i1.SsrService }, { token: InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: InputWrapperComponent, isStandalone: false, selector: "obl-input-wrapper", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, cancellable: { classPropertyName: "cancellable", publicName: "cancellable", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, labelAnimation: { classPropertyName: "labelAnimation", publicName: "labelAnimation", isSignal: false, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded" }, host: { properties: { "attr.small": "this.small", "attr.disabled": "this.disable" } }, ngImport: i0, template: "<fieldset\n [ngClass]=\"{\n label: label(),\n outlined: display() === 'outlined',\n underlined: display() === 'underlined',\n none: display() === 'none',\n invalid: !valid() || ((checkErrors() || invalid) && this.touched),\n file: input?.type === 'file'\n }\"\n>\n @if (label()) {\n <legend>\n @if (labelAnimation) {\n <obl-type-text [text]=\"label() || ''\" [interval]=\"40\"></obl-type-text>\n } @else {\n {{ label() }}\n }\n </legend>\n }\n\n @if (type() === 'search') {\n <obl-icon [width]=\"20\" name=\"search\"></obl-icon>\n }\n\n <ng-content select=\"[prefix]\"></ng-content>\n\n <ng-content></ng-content>\n\n <ng-content select=\"[suffix]\"></ng-content>\n\n @if (type() === 'number' && (inputStep() !== 'any' || step())) {\n <button class=\"btn-text\" [attr.small]=\"small\" oblButton [attr.disabled]=\"disabled()\" (click)=\"stepUp()\">\n <obl-icon [width]=\"20\" name=\"add\"></obl-icon>\n </button>\n <button class=\"btn-text\" [attr.small]=\"small\" oblButton [attr.disabled]=\"disabled()\" (click)=\"stepDown()\">\n <obl-icon [width]=\"20\" name=\"subtract\"></obl-icon>\n </button>\n }\n @if (cancellable() && getValue().length) {\n <button class=\"btn-text\" [attr.small]=\"small\" oblButton [attr.disabled]=\"disabled()\" (click)=\"reset()\">\n <obl-icon [width]=\"15\" name=\"cancel\"></obl-icon>\n </button>\n }\n\n @if (type() === 'file') {\n <button oblButton [attr.small]=\"small\" [attr.disabled]=\"disabled()\" (click)=\"clicked()\">{{ translations()['Browse'] || 'Browse' }}</button>\n @for (file of files; track $index) {\n <button class=\"file\" oblButton [attr.small]=\"small\">\n {{file.name}}\n <button oblButton [attr.disabled]=\"disabled()\" (click)=\"delete($index)\">\n <obl-icon name=\"cancel\" [width]=\"10\"></obl-icon>\n </button>\n </button>\n }\n }\n</fieldset>\n\n@if (errors && !valid()) {\n <div class=\"errors\">\n @for (error of errors | keyvalue; track error.key) {\n @if (error.value) {\n <div class=\"error\">\n <obl-type-text [text]=\"error.key | oblTranslation : translations() : (error.value !== true ? error.value : undefined)\" [interval]=\"30\"></obl-type-text>\n </div>\n }\n }\n </div>\n}", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:flex;flex-direction:column}:host[small=true]{font-size:small}:host fieldset{display:flex;flex-grow:1;align-items:center;padding:5px;box-sizing:border-box}:host fieldset.file{flex-wrap:wrap}:host fieldset.label{padding:0 5px 5px}:host fieldset.invalid legend{color:var(--obl-default-error-color)}:host fieldset.outlined{border:1px solid var(--default-border-color);border-radius:5px}:host fieldset.outlined.invalid{border:1px solid var(--obl-default-error-color)}:host fieldset.underlined{border:1px solid transparent;border-bottom:1px solid var(--default-border-color);margin-bottom:1px}:host fieldset.underlined.invalid{border-bottom:1px solid var(--obl-default-error-color)}:host fieldset.none{border:none}:host[disabled] fieldset{border-color:var(--obl-disabled-border-color, #a5a5a5);color:var(--disabled-color)}legend{font-size:12px}.btn-text{width:30px;height:30px;font-weight:bolder;padding:5px 10px}.btn-text[small=true]{height:25px}.btn-text:first-of-type{border-top-left-radius:30px;border-bottom-left-radius:30px}.btn-text:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}button.file{margin:5px;border-radius:50px;padding:5px 15px 5px 20px}button.file button{padding:5px;margin:0 0 0 5px}button.file button obl-icon{margin:0}.errors{display:flex;flex-direction:column;gap:10px;align-items:center;padding:5px 10px;font-size:small;color:var(--obl-default-error-color)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: i5.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }, { kind: "component", type: i3$1.TypeTextComponent, selector: "obl-type-text", inputs: ["text", "interval"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i7.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-input-wrapper', standalone: false, template: "<fieldset\n [ngClass]=\"{\n label: label(),\n outlined: display() === 'outlined',\n underlined: display() === 'underlined',\n none: display() === 'none',\n invalid: !valid() || ((checkErrors() || invalid) && this.touched),\n file: input?.type === 'file'\n }\"\n>\n @if (label()) {\n <legend>\n @if (labelAnimation) {\n <obl-type-text [text]=\"label() || ''\" [interval]=\"40\"></obl-type-text>\n } @else {\n {{ label() }}\n }\n </legend>\n }\n\n @if (type() === 'search') {\n <obl-icon [width]=\"20\" name=\"search\"></obl-icon>\n }\n\n <ng-content select=\"[prefix]\"></ng-content>\n\n <ng-content></ng-content>\n\n <ng-content select=\"[suffix]\"></ng-content>\n\n @if (type() === 'number' && (inputStep() !== 'any' || step())) {\n <button class=\"btn-text\" [attr.small]=\"small\" oblButton [attr.disabled]=\"disabled()\" (click)=\"stepUp()\">\n <obl-icon [width]=\"20\" name=\"add\"></obl-icon>\n </button>\n <button class=\"btn-text\" [attr.small]=\"small\" oblButton [attr.disabled]=\"disabled()\" (click)=\"stepDown()\">\n <obl-icon [width]=\"20\" name=\"subtract\"></obl-icon>\n </button>\n }\n @if (cancellable() && getValue().length) {\n <button class=\"btn-text\" [attr.small]=\"small\" oblButton [attr.disabled]=\"disabled()\" (click)=\"reset()\">\n <obl-icon [width]=\"15\" name=\"cancel\"></obl-icon>\n </button>\n }\n\n @if (type() === 'file') {\n <button oblButton [attr.small]=\"small\" [attr.disabled]=\"disabled()\" (click)=\"clicked()\">{{ translations()['Browse'] || 'Browse' }}</button>\n @for (file of files; track $index) {\n <button class=\"file\" oblButton [attr.small]=\"small\">\n {{file.name}}\n <button oblButton [attr.disabled]=\"disabled()\" (click)=\"delete($index)\">\n <obl-icon name=\"cancel\" [width]=\"10\"></obl-icon>\n </button>\n </button>\n }\n }\n</fieldset>\n\n@if (errors && !valid()) {\n <div class=\"errors\">\n @for (error of errors | keyvalue; track error.key) {\n @if (error.value) {\n <div class=\"error\">\n <obl-type-text [text]=\"error.key | oblTranslation : translations() : (error.value !== true ? error.value : undefined)\" [interval]=\"30\"></obl-type-text>\n </div>\n }\n }\n </div>\n}", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:flex;flex-direction:column}:host[small=true]{font-size:small}:host fieldset{display:flex;flex-grow:1;align-items:center;padding:5px;box-sizing:border-box}:host fieldset.file{flex-wrap:wrap}:host fieldset.label{padding:0 5px 5px}:host fieldset.invalid legend{color:var(--obl-default-error-color)}:host fieldset.outlined{border:1px solid var(--default-border-color);border-radius:5px}:host fieldset.outlined.invalid{border:1px solid var(--obl-default-error-color)}:host fieldset.underlined{border:1px solid transparent;border-bottom:1px solid var(--default-border-color);margin-bottom:1px}:host fieldset.underlined.invalid{border-bottom:1px solid var(--obl-default-error-color)}:host fieldset.none{border:none}:host[disabled] fieldset{border-color:var(--obl-disabled-border-color, #a5a5a5);color:var(--disabled-color)}legend{font-size:12px}.btn-text{width:30px;height:30px;font-weight:bolder;padding:5px 10px}.btn-text[small=true]{height:25px}.btn-text:first-of-type{border-top-left-radius:30px;border-bottom-left-radius:30px}.btn-text:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}button.file{margin:5px;border-radius:50px;padding:5px 15px 5px 20px}button.file button{padding:5px;margin:0 0 0 5px}button.file button obl-icon{margin:0}.errors{display:flex;flex-direction:column;gap:10px;align-items:center;padding:5px 10px;font-size:small;color:var(--obl-default-error-color)}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SsrService }, { type: InputWrappersDefaultSettingsService }], propDecorators: { errors: [{
type: Input
}], labelAnimation: [{
type: Input
}], small: [{
type: Input
}, {
type: HostBinding,
args: ['attr.small']
}], disable: [{
type: HostBinding,
args: ['attr.disabled']
}], loaded: [{
type: Output
}] } });
class InputModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: InputModule, declarations: [InputDirective,
InputWrapperComponent,
TextAreaDirective,
TextAreaWrapperComponent], imports: [CommonModule,
ButtonsModule,
IconsModule,
AnimationsModule,
AnimationsModule,
TextPipesModule], exports: [InputDirective,
TextAreaDirective,
InputWrapperComponent,
TextAreaWrapperComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputModule, imports: [CommonModule,
ButtonsModule,
IconsModule,
AnimationsModule,
AnimationsModule,
TextPipesModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: InputModule, decorators: [{
type: NgModule,
args: [{
declarations: [
InputDirective,
InputWrapperComponent,
TextAreaDirective,
TextAreaWrapperComponent
],
imports: [
CommonModule,
ButtonsModule,
IconsModule,
AnimationsModule,
AnimationsModule,
TextPipesModule,
],
exports: [
InputDirective,
TextAreaDirective,
InputWrapperComponent,
TextAreaWrapperComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { InputDirective, InputModule, InputWrapperComponent, InputWrappersDefaultSettingsService, TextAreaDirective, TextAreaWrapperComponent };
//# sourceMappingURL=obliczeniowo-elementary-input.mjs.map