From 1951ae8cdd36fd7a22d38b12fd28add441015208 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 31 Mar 2022 16:39:17 +0300 Subject: [PATCH] Add static placeholder and hint in input --- sharedComponents/input/input.component.css | 148 ---------------- sharedComponents/input/input.component.ts | 186 ++++++++++++--------- 2 files changed, 105 insertions(+), 229 deletions(-) delete mode 100644 sharedComponents/input/input.component.css diff --git a/sharedComponents/input/input.component.css b/sharedComponents/input/input.component.css deleted file mode 100644 index b0c5db9c..00000000 --- a/sharedComponents/input/input.component.css +++ /dev/null @@ -1,148 +0,0 @@ -:host { - --input-placeholder-color: var(--placeholder-color); - --input-background: transparent; - --input-shadow: none; - --input-padding: 20px; - --input-border: none; - --input-color: var(--grey-color); - --input-color-disabled: var(--disable-color); - --input-background-disabled: var(--muted-color); - --input-danger-color: #BB121A; -} - -/** Input wrapper*/ -.input-wrapper { - box-shadow: var(--input-shadow); - border: var(--input-border); - background: var(--input-background); - border-radius: 6px; - position: relative; - padding: var(--input-padding) 0 var(--input-padding) var(--input-padding); - cursor: text; - color: var(--input-color); -} - -.input-wrapper.danger { - border: 1px solid var(--input-danger-color); -} - -.input-wrapper.select { - cursor: pointer; -} - -.input-wrapper.disabled { - cursor: not-allowed !important; - user-select: none; - background-color: var(--input-background-disabled); - color: var(--input-color-disabled); -} - -/** Placeholder */ -.input-wrapper > .placeholder { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - overflow: hidden; - pointer-events: none; - color: var(--input-placeholder-color); - padding: var(--input-padding); -} - -.input-wrapper.danger > .placeholder { - color: var(--input-danger-color); -} - -.input-wrapper.disabled > .placeholder { - color: var(--input-color-disabled); -} - -.input-wrapper > .placeholder > label { - position: absolute; - font-size: 16px; - line-height: 24px; - top: calc(var(--input-padding) + 15px); - transform: translateY(-50%); - transition: all 0.5s ease 0s; -} - -.input-wrapper.focused > .placeholder > label { - top: 15px; - font-size: 12px; - line-height: 18px; -} - -/* Icon */ -.input-wrapper.danger .icon { - color: var(--input-danger-color); -} - -/** Input */ -.input-wrapper .input { - outline: 0 none !important; - box-shadow: none; - border-radius: 0; - border: 0 none; - padding: 0 var(--input-padding) 0 0; - background: transparent !important; - color: inherit; - width: 100%; - min-height: 32px; - font-size: inherit; - line-height: inherit; - resize: none; - cursor: inherit; - display: flex; - flex-direction: column; - justify-content: center; -} - -.input-wrapper .uk-grid .input { - min-height: 27px; - margin-top: 5px; -} - -.input-wrapper .input:disabled { - background: transparent; -} - -.input-wrapper:not(.focused) .input.search { - opacity: 0; -} - -/* Tools */ -.input-wrapper > .tools { - padding-right: var(--input-padding); -} - -/* Options */ -.uk-dropdown.options { - max-height: 200px; - overflow: auto; -} - -/* Chips */ -.input-wrapper .chip { - max-width: calc(100% - var(--input-padding)); - margin-top: 5px; -} - -.input-wrapper .chip .uk-label { - padding: 5px 20px; -} - -/** Modifiers */ -.inner { - --input-shadow: var(--shadow-inset); - --input-background: var(--default-color); - --input-options-background: transparent; - --input-options-border: none; -} - -.flat { - --input-background: var(--light-color); - --input-border: 1px solid var(--muted-color); - --input-options-background: transparent; - --input-options-border: none; -} diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 955b2d33..8a451fc4 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -25,6 +25,11 @@ export interface Option { label: string } +export interface Placeholder { + label: string, + static?: boolean +} + declare var UIkit; /** @@ -34,71 +39,79 @@ declare var UIkit; @Component({ selector: '[dashboard-input], [input]', template: ` -
-
- -
-
- - - - - - - -
{{getLabel(formControl.value)}}
- - -
-
-
- {{getLabel(formControl.value)}} - +
+
+ +
+
+ + + + + + + +
{{getLabel(formControl.value)}}
+ + +
+
+
{{getLabel(formControl.value)}}
+
+
+
-
- -
-
- - -
-
-
- {{getLabel(chip.value)}} - + + +
+
+
+ {{getLabel(chip.value)}} + +
+
+
+
-
- -
+ +
+ + + + + +
- -
- - - +
+
+
-
- -
-
+
{{formControl.errors.error}} - Please provide a valid URL (e.g. https://example.com) + Please provide a valid URL (e.g. https://example.com) @@ -114,30 +127,12 @@ declare var UIkit; - `, - styleUrls: ['input.component.css'] + ` }) export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { - /** Basic information */ - @Input('formInput') formControl: AbstractControl; - @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips' = 'text'; - @Input() value: any | any[]; - @Output() valueChange = new EventEmitter(); + /** Deprecated options*/ /** @deprecated */ @Input('label') label: string; - /** Text */ - @ViewChild('input') input: ElementRef; - /** Textarea options */ - @ViewChild('textArea') textArea: ElementRef; - @Input('rows') rows: number = 3; - /** Select | chips available options */ - @Input('options') options: Option[] = []; - /** @deprecated */ - @Input('hint') hint = null; - @Input('placeholder') placeholder = ''; - @Input('staticPlaceholder') staticPlaceholder: boolean = false; - @Input() inputClass: string = 'inner'; - /** Extra element Right or Left of the input */ /** @deprecated */ @Input() extraLeft: boolean = true; /** @deprecated */ @@ -146,16 +141,39 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() hideControl: boolean = false; /** @deprecated */ @Input() flex: 'middle' | 'top' | 'bottom' = 'middle'; - /** Icon on the input */ - @Input() icon: string = null; /** @deprecated */ @Input() iconLeft: boolean = false; - /** Chip options */ + /** @deprecated */ @Input() removable: boolean = true; - @Input() addExtraChips: boolean = false; + /** @deprecated */ @Input() smallChip: boolean = false; + /** @deprecated */ @Input() panelWidth: number = 300; + /** @deprecated */ @Input() panelClass: string = null; + /** Basic information */ + @Input('formInput') formControl: AbstractControl; + @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips' = 'text'; + @Input() value: any | any[]; + @Output() valueChange = new EventEmitter(); + @Input('hint') hint: string; + /** Text */ + @ViewChild('input') input: ElementRef; + /** Textarea options */ + @ViewChild('textArea') textArea: ElementRef; + @Input('rows') rows: number = 3; + /** Select | Autocomplete | chips available options */ + @Input('options') options: Option[] = []; + @Input() tooltip: boolean = false; + /** Chips && Autocomplete*/ + public filteredOptions: Option[] = []; + public searchControl: FormControl; + /** Use modifier's class(es) to change view of your Input */ + @Input() inputClass: string = 'inner'; + /** Icon on the input */ + @Input() icon: string = null; + /** Chip options */ + @Input() addExtraChips: boolean = false; @Input() showOptionsOnEmpty: boolean = true; @Input() validators: ValidatorFn[] | ValidatorFn; @Input() disabled: boolean = false; @@ -163,20 +181,30 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang /** LogoUrl information */ public secure: boolean = true; /** Internal basic information */ + public placeholderInfo: Placeholder = {label: '', static: true}; public required: boolean = false; public focused: boolean = false; public opened: boolean = false; public properties: EnvProperties = properties; private initValue: any; private subscriptions: any[] = []; - /** Chips && Autocomplete*/ - public filteredOptions: Option[] = []; - public searchControl: FormControl; - @Input() tooltip: boolean = true; @ViewChild('inputBox') inputBox: ElementRef; @ViewChild('optionBox') optionBox: ElementRef; @ViewChild('searchInput') searchInput: ElementRef; + @Input() + set placeholder(placeholder: string | Placeholder) { + if(typeof placeholder === 'string') { + this.placeholderInfo = {label: placeholder, static: false}; + } else { + if(placeholder.static && (this.type === 'select' || this.type === 'autocomplete' || this.type === 'chips' || this.hint)) { + placeholder.static = false; + console.debug('Static placeholder is not available in this type of input and if hint is available.'); + } + this.placeholderInfo = placeholder; + } + } + constructor(private elementRef: ElementRef) { if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") { console.warn("'dashboard-input' selector is deprecated; use 'input' instead."); @@ -235,10 +263,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } - get hasPlaceholder() { - return this.staticPlaceholder && this.type !== 'select'; - } - reset() { this.secure = true; this.unsubscribe();