feat(router-item, password): add input variables for ion-item includi…

…ng color disabled

projects/core/src/lib/loading-button/loading-button.component.scss

@@ -1,4 +1,3 @@
-
 :host(.button-disabled) {
   pointer-events: none;
 }

projects/core/src/lib/password/password.component.html

@@ -1,5 +1,5 @@
-<ion-item>
-    <ion-label *ngIf="placeholder" [position]="position">{{ placeholder }}</ion-label>
-    <ion-input [type]="show ? 'text' : 'password'" [(ngModel)]="passwordValue" [clearOnEdit]="clearOnEdit" (ionBlur)="blur()"></ion-input>
-    <ion-icon slot="end" [name]="show ? hideIcon : showIcon" (click)="toggleShowPassword()"></ion-icon>
-  </ion-item>
+<ion-item [color]="color" [disabled]="disabled" [lines]="lines">
+  <ion-label *ngIf="placeholder" [position]="position">{{ placeholder }}</ion-label>
+  <ion-input [type]="show ? 'text' : 'password'" [(ngModel)]="passwordValue" [clearOnEdit]="clearOnEdit" (ionBlur)="blur()"></ion-input>
+  <ion-icon slot="end" [name]="show ? hideIcon : showIcon" (click)="toggleShowPassword()"></ion-icon>
+</ion-item>

projects/core/src/lib/password/password.component.scss

@@ -0,0 +1,3 @@
+:host(.password-disabled) {
+  pointer-events: none;
+}

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: () => {};

projects/core/src/lib/router-item/router-item.component.html

@@ -1,4 +1,4 @@
-<ion-item>
+<ion-item [color]="color" [detail]="detail" [detailIcon]="detailIcon" [disabled]="disabled" [lines]="lines">
     <fiv-icon [name]="icon"></fiv-icon>
     <ion-label>{{text}}</ion-label>
 </ion-item>

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);
-}
+  cursor: pointer;
+  --background: rgb(240, 240, 240);
+}
+
+:host(.router-item-disabled) {
+  pointer-events: none;
+}

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() {