feat(link): disabled style changed to attribute (#44)

positive-js · Sep 4, 2018 · d5466ea · d5466ea
1 parent 0b2cea7
commit d5466ea
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/src/lib-dev/link/template.html b/src/lib-dev/link/template.html
@@ -4,62 +4,62 @@
         <td>Normal</td>
     </tr>
     <tr>
-        <td><a class="mc-link mc-disabled" tabindex="-1" href=""><span class="mc-link__text">Сохранить</span></a></td>
-        <td><a class="mc-link" tabindex="0"><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link" [disabled]="true" href=""><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link"><span class="mc-link__text">Сохранить</span></a></td>
     </tr>
     <tr>
-        <td><a class="mc-link mc-link_dashed mc-disabled" tabindex="-1" href=""><span class="mc-link__text">Сохранить</span></a></td>
-        <td><a class="mc-link mc-link_dashed" tabindex="0"><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link mc-link_dashed" [disabled]="true" href=""><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link mc-link_dashed"><span class="mc-link__text">Сохранить</span></a></td>
     </tr>
     <tr>
         <td>
-            <a class="mc-link mc-link_underlined mc-disabled" tabindex="-1" href="">
+            <a class="mc-link mc-link_underlined" [disabled]="true" href="">
                 <span class="mc-link__text">Сохранить</span>
             </a>
         </td>
         <td>
-            <a class="mc-link mc-link_underlined" tabindex="0" href="">
+            <a class="mc-link mc-link_underlined" href="">
                 <span class="mc-link__text">Сохранить</span>
             </a>
         </td>
 
     </tr>
     <tr>
         <td>
-            <a class="mc-link mc-disabled" tabindex="-1" href="">
+            <a class="mc-link" [disabled]="true" href="">
                 <span class="mc-link__text">Сохранить</span>
                 <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
             </a>
         </td>
         <td>
-            <a class="mc-link" tabindex="0">
+            <a class="mc-link">
                 <span class="mc-link__text">Сохранить</span>
                 <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
             </a>
         </td>
     </tr>
     <tr>
         <td>
-            <a class="mc-link mc-link_dashed mc-disabled" tabindex="-1" href="">
+            <a class="mc-link mc-link_dashed" [disabled]="true" href="">
                 <span class="mc-link__text ">Сохранить</span>
                 <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
             </a>
         </td>
         <td>
-            <a class="mc-link mc-link_dashed" tabindex="0">
+            <a class="mc-link mc-link_dashed">
                 <span class="mc-link__text">Сохранить</span>
                 <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
             </a>
         </td>
     </tr>
     <tr>
-        <td><a class="mc-link mc-link_dashed mc-disabled" tabindex="-1" href="">
+        <td><a class="mc-link mc-link_dashed" [disabled]="true" href="">
             <i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
             <span class="mc-link__text">Сохранить</span>
             <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
         </a>
         </td>
-        <td><a class="mc-link mc-link_dashed" tabindex="0">
+        <td><a class="mc-link mc-link_dashed" >
             <i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
             <span class="mc-link__text">Сохранить</span>
             <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>

diff --git a/src/lib/link/_link-theme.scss b/src/lib/link/_link-theme.scss
@@ -51,7 +51,6 @@
             box-shadow: 0 0 0 2px mc-color($link, 500);
         }
 
-        &.mc-disabled,
         &[disabled] {
             color: $link-disabled !important;
             box-shadow: none;
@@ -87,7 +86,6 @@
                 }
             }
 
-            &.mc-disabled,
             &[disabled] {
                 & > .mc-link__text {
                     @include _mc-link-dashes_mixin($link-disabled, 100%, 0.32*0.3);
@@ -119,7 +117,6 @@
                 }
             }
 
-            &.mc-disabled,
             &[disabled] {
                 & > .mc-link__text {
                     @include _mc-link-dashes_mixin($link-disabled, 66%, 0.32*0.3);

diff --git a/src/lib/link/link.component.ts b/src/lib/link/link.component.ts
@@ -1,16 +1,25 @@
-import { Component, ElementRef, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, OnDestroy, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 
 import { FocusMonitor } from '@ptsecurity/cdk/a11y';
 
 
 @Component({
     selector: 'a.mc-link',
     template: `<ng-content></ng-content>`,
+    changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    styleUrls: ['./link.css']
+    styleUrls: ['./link.css'],
+    inputs: ['disabled', 'tabindex'],
+    host: {
+        '[attr.disabled]': 'disabled || null',
+        '[attr.tabindex]': 'disabled ? -1 : tabindex ? tabindex : 0'
+    }
 })
 
 export class McLink implements OnDestroy {
+    disabled: boolean;
+    tabindex: number;
+
     constructor(private elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
 
         this._focusMonitor.monitor(elementRef.nativeElement, true);

diff --git a/src/lib/link/link.scss b/src/lib/link/link.scss
@@ -35,7 +35,6 @@
         border-radius: $link-border-radius;
     }
 
-    &.mc-disabled,
     &[disabled] {
         pointer-events: none;
         cursor: $link-cursor-disabled;