From 621656ffe1845f98867caa072320e1af089ffe2f Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann Date: Fri, 14 Dec 2018 11:20:34 +0100 Subject: [PATCH] feat(router-item, password): add input variables for ion-item including color disabled --- .../loading-button.component.scss | 1 - .../src/lib/password/password.component.html | 10 +- .../src/lib/password/password.component.scss | 3 + .../src/lib/password/password.component.ts | 17 +++- .../router-item/router-item.component.html | 2 +- .../router-item/router-item.component.scss | 95 ++++++++++--------- .../lib/router-item/router-item.component.ts | 26 ++++- 7 files changed, 95 insertions(+), 59 deletions(-) diff --git a/projects/core/src/lib/loading-button/loading-button.component.scss b/projects/core/src/lib/loading-button/loading-button.component.scss index b6012dc5..85d73fe8 100644 --- a/projects/core/src/lib/loading-button/loading-button.component.scss +++ b/projects/core/src/lib/loading-button/loading-button.component.scss @@ -1,4 +1,3 @@ - :host(.button-disabled) { pointer-events: none; } diff --git a/projects/core/src/lib/password/password.component.html b/projects/core/src/lib/password/password.component.html index d2b7c015..a88b1c17 100644 --- a/projects/core/src/lib/password/password.component.html +++ b/projects/core/src/lib/password/password.component.html @@ -1,5 +1,5 @@ - - {{ placeholder }} - - - \ No newline at end of file + + {{ placeholder }} + + + \ No newline at end of file diff --git a/projects/core/src/lib/password/password.component.scss b/projects/core/src/lib/password/password.component.scss index e69de29b..5b29d95f 100644 --- a/projects/core/src/lib/password/password.component.scss +++ b/projects/core/src/lib/password/password.component.scss @@ -0,0 +1,3 @@ +:host(.password-disabled) { + pointer-events: none; +} diff --git a/projects/core/src/lib/password/password.component.ts b/projects/core/src/lib/password/password.component.ts index 11d8872e..f7632729 100644 --- a/projects/core/src/lib/password/password.component.ts +++ b/projects/core/src/lib/password/password.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, Input, forwardRef } from '@angular/core'; +import { Component, OnInit, Input, forwardRef, HostBinding } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; +import { Color, Mode } from '@ionic/core'; export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -17,12 +18,24 @@ export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { }) export class PasswordComponent implements ControlValueAccessor, OnInit { + @Input() clearOnEdit = false; + + @Input() color: Color; + + @HostBinding('class.password-disabled') + @Input() disabled = false; + @Input() hideIcon = 'eye-off'; + + @Input() lines?: 'full' | 'inset' | 'none'; + @Input() placeholder: string; + @Input() position: 'floating' | 'inline' | 'fixed' | 'stacked' = 'floating'; + @Input() show: boolean; + @Input() showIcon = 'eye'; - @Input() clearOnEdit = false; private _passwordValue = ''; private onTouchedCallback: () => {}; diff --git a/projects/core/src/lib/router-item/router-item.component.html b/projects/core/src/lib/router-item/router-item.component.html index 3dfdd472..eb21feb3 100644 --- a/projects/core/src/lib/router-item/router-item.component.html +++ b/projects/core/src/lib/router-item/router-item.component.html @@ -1,4 +1,4 @@ - + {{text}} diff --git a/projects/core/src/lib/router-item/router-item.component.scss b/projects/core/src/lib/router-item/router-item.component.scss index 5e02c642..012439c1 100644 --- a/projects/core/src/lib/router-item/router-item.component.scss +++ b/projects/core/src/lib/router-item/router-item.component.scss @@ -1,106 +1,111 @@ :host { - display: block; - position: relative; - width: 100%; + display: block; + position: relative; + width: 100%; } :host.active { - --fiv-color-icon: var(--ion-color-primary); - ion-item{ - --color: var(--ion-color-primary); - } + --fiv-color-icon: var(--ion-color-primary); + ion-item { + --color: var(--ion-color-primary); + } } :host.active .dot { - display: block; + display: block; } :host.active .line { - background-color: var(--fiv-dot-color, var(--ion-color-primary)); - display: block; + background-color: var(--fiv-dot-color, var(--ion-color-primary)); + display: block; } :host.active.left .line { - width: 2px; - height: 100%; - top: 0; + width: 2px; + height: 100%; + top: 0; } :host.active.right .line { - width: 2px; - height: 100%; - top: 0; + width: 2px; + height: 100%; + top: 0; } :host.active.top .line { - width: calc(100% - 16px); - left: 8px; - height: 2px + width: calc(100% - 16px); + left: 8px; + height: 2px; } :host.active.bottom .line { - width: calc(100% - 16px); - height: 2px; - left: 8px; + width: calc(100% - 16px); + height: 2px; + left: 8px; } :host.active.dot.left { - padding-left: 24px; + padding-left: 24px; } .indicator { - position: absolute; + position: absolute; } // dot .dot { - width: var(--fiv-dot-width, 8px); - height: var(--fiv-dot-heigt, 8px); - background-color: var(--fiv-dot-color, var(--ion-color-primary)); - top: 50%; - border-radius: 100%; - transform: translateY(-50%); - right: 8px; - display: none; + width: var(--fiv-dot-width, 8px); + height: var(--fiv-dot-heigt, 8px); + background-color: var(--fiv-dot-color, var(--ion-color-primary)); + top: 50%; + border-radius: 100%; + transform: translateY(-50%); + right: 8px; + display: none; } .dot.left { - left: 8px; - right: unset; + left: 8px; + right: unset; } .dot.right { - right: 8px; + right: 8px; } // position .left { - left: 0; + left: 0; } .right { - right: 0; + right: 0; } .top { - top: 0; + top: 0; } .bottom { - bottom: 0; + bottom: 0; } -.outline {} +.outline { +} ion-item { - --border-style: none; + --border-style: none; } fiv-icon { - --fiv-padding-end: 8px; + --fiv-padding-end: 8px; } ion-item:hover { - cursor: pointer; - --background: rgb(240, 240, 240); -} \ No newline at end of file + cursor: pointer; + --background: rgb(240, 240, 240); +} + +:host(.router-item-disabled) { + pointer-events: none; +} diff --git a/projects/core/src/lib/router-item/router-item.component.ts b/projects/core/src/lib/router-item/router-item.component.ts index b7c87420..04d5452b 100644 --- a/projects/core/src/lib/router-item/router-item.component.ts +++ b/projects/core/src/lib/router-item/router-item.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit, Input, HostBinding, HostListener } from '@angular/core'; import { Router } from '@angular/router'; +import { Color, Mode } from '@ionic/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'fiv-router-item', @@ -10,13 +12,23 @@ export class RouterItemComponent implements OnInit { @Input() active = false; - @Input() navigate = true; + @Input() color?: Color; - @Input() pageUrl: string; + @Input() detail?: boolean; - @Input() icon: string; + @Input() detailIcon = 'ios-arrow-forward'; - @Input() text: string; + @Input() disabled = false; + + @Input() icon?: string; + + @Input() lines?: 'full' | 'inset' | 'none'; + + @Input() matchChildUrl = false; + + @Input() navigate = true; + + @Input() pageUrl: string; /** * The position of the active state. @@ -31,7 +43,7 @@ export class RouterItemComponent implements OnInit { */ @Input() shape: 'line' | 'dot' | string = 'line'; - @Input() matchChildUrl = false; + @Input() text: string; @HostListener('click') onclick() { if (this.navigate && this.pageUrl) { @@ -47,6 +59,10 @@ export class RouterItemComponent implements OnInit { return this.matchActiveUrl() || this.active; } + @HostBinding('class.router-item-disabled') get disabledClass() { + return this.disabled; + } + constructor(public router: Router) { } ngOnInit() {