Add Stylelint Config & Clear Button in SearchBox

Add Stylelint Config & Clear Button in SearchBox

.vscode/settings.json

@@ -8,5 +8,8 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "css.validate": false,
+"less.validate": false,
+"scss.validate": false
 }

apps/domain/crm/src/lib/crm.component.spec.ts

@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CrmComponent } from './crm.component';
-
-describe('CrmComponent', () => {
-  let component: CrmComponent;
-  let fixture: ComponentFixture<CrmComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [CrmComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CrmComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

apps/domain/crm/src/lib/crm.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'crm-crm',
-  template: `
-    <p>
-      crm works!
-    </p>
-  `,
-  styles: [],
-})
-export class CrmComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

apps/domain/crm/src/lib/crm.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { CrmService } from './crm.service';
-
-describe('CrmService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: CrmService = TestBed.inject(CrmService);
-    expect(service).toBeTruthy();
-  });
-});

apps/domain/crm/src/lib/crm.service.ts

@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class CrmService {
-  constructor() {}
-}

apps/page/customer/src/lib/customer-search/customer-search.component.html

@@ -8,17 +8,41 @@
     Ihre E-Mail-Adresse?
   </p>
   <ui-searchbox>
-    <input type="text" uiSearchboxInput placeholder="Name, E-Mail, Kundennummer, ..." />
+    <input
+      #input
+      (input)="onChange(input.value)"
+      type="text"
+      uiSearchboxInput
+      placeholder="Name, E-Mail, Kundennummer, ..."
+    />
     <ui-searchbox-warning>
-      Keine Sucherbnisse
+      Keine Suchergebnisse
     </ui-searchbox-warning>
-    <button type="submit" uiSearchboxSearchButton (click)="autocomplete.toggle()">
+    <button
+      *ngIf="input?.value?.length"
+      type="reset"
+      uiSearchboxClearButton
+      (click)="input.value = ''"
+    >
+      <ui-icon icon="close" size="22px"></ui-icon>
+    </button>
+    <button
+      type="submit"
+      uiSearchboxSearchButton
+      (click)="autocomplete.toggle()"
+    >
       <ui-icon icon="search" size="24px"></ui-icon>
     </button>
     <ui-searchbox-autocomplete #autocomplete>
-      <button uiSearchboxAutocompleteOption value="Hans Wernder">Hans Wernder</button>
-      <button uiSearchboxAutocompleteOption value="Hans Müller">Hans Müller</button>
-      <button uiSearchboxAutocompleteOption value="Hans Bauer">Hans Bauer</button>
+      <button uiSearchboxAutocompleteOption value="Hans Wernder">
+        Hans Wernder
+      </button>
+      <button uiSearchboxAutocompleteOption value="Hans Müller">
+        Hans Müller
+      </button>
+      <button uiSearchboxAutocompleteOption value="Hans Bauer">
+        Hans Bauer
+      </button>
     </ui-searchbox-autocomplete>
   </ui-searchbox>
 </div>

apps/page/customer/src/lib/customer-search/customer-search.component.scss

@@ -13,6 +13,7 @@
 .card-create-customer,
 .card-search-customer {
   @apply bg-white rounded p-4 text-center;
+
   box-shadow: 0 -2px 24px 0 #dce2e9;
 }
 
@@ -30,4 +31,8 @@ ui-searchbox {
   [uiSearchboxSearchButton] {
     @apply bg-brand text-white;
   }
+
+  [uiSearchboxClearButton] {
+    @apply text-inactive-customer;
+  }
 }

apps/page/customer/src/lib/customer-search/customer-search.component.ts

@@ -1,4 +1,8 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 
 @Component({
   selector: 'page-customer-search',
@@ -7,5 +11,11 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomerSearchComponent {
-  constructor() {}
+  constructor(public cdr: ChangeDetectorRef) {}
+
+  onChange(queryString: string) {
+    console.log({ queryString });
+    this.cdr.detectChanges();
+    // handle autocompete, etc.
+  }
 }

apps/sales/src/app/modules/cart/components/delivery-cart-row/delivery-cart-row.component.scss

@@ -1,4 +1,4 @@
-:host() {
+:host {
   position: relative;
   height: 100%;
   display: flex;
@@ -100,6 +100,7 @@ img {
   margin-left: auto;
   min-width: 170px;
   margin-right: 20px;
+
   span {
     font-family: 'Open Sans';
     font-size: 14px;
@@ -113,7 +114,7 @@ img {
   padding-left: 40px;
 }
 
-/* 
+/*
   ##Device = Big Desktops
 */
 @media (min-width: 1281px) {
@@ -130,7 +131,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Laptops, Desktops, Ipad pro
 */
 @media (min-width: 1025px) and (max-width: 1280px) {
@@ -147,7 +148,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Tablets, Ipads
 */
 @media (min-width: 768px) and (max-width: 1024px) {

apps/sales/src/app/modules/cart/components/download-cart-row/download-cart-row.component.scss

@@ -1,4 +1,4 @@
-:host() {
+:host {
   position: relative;
   height: 100%;
   display: flex;
@@ -101,6 +101,7 @@ img {
   margin-left: auto;
   min-width: 170px;
   margin-right: 20px;
+
   span {
     font-family: 'Open Sans';
     font-size: 14px;
@@ -110,7 +111,7 @@ img {
   }
 }
 
-/* 
+/*
     ##Device = Big Desktops
   */
 @media (min-width: 1281px) {
@@ -127,7 +128,7 @@ img {
   }
 }
 
-/* 
+/*
     ##Device = Laptops, Desktops, Ipad pro
   */
 @media (min-width: 1025px) and (max-width: 1280px) {
@@ -144,7 +145,7 @@ img {
   }
 }
 
-/* 
+/*
     ##Device = Tablets, Ipads
   */
 @media (min-width: 768px) and (max-width: 1024px) {

apps/sales/src/app/modules/cart/components/pick-up-cart-row/pick-up-cart-row.component.scss

@@ -1,6 +1,5 @@
-:host() {
+:host {
   position: relative;
-  height: 100%;
   display: flex;
   flex-direction: row;
   height: 80px;
@@ -113,7 +112,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Big Desktops
 */
 @media (min-width: 1281px) {
@@ -130,7 +129,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Laptops, Desktops, Ipad pro
 */
 @media (min-width: 1025px) and (max-width: 1280px) {
@@ -147,7 +146,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Tablets, Ipads
 */
 @media (min-width: 768px) and (max-width: 1024px) {

apps/sales/src/app/modules/cart/components/take-now-cart-row/take-now-cart-row.component.scss

@@ -1,6 +1,5 @@
-:host() {
+:host {
   position: relative;
-  height: 100%;
   display: flex;
   flex-direction: row;
   height: 80px;
@@ -113,7 +112,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Big Desktops
 */
 @media (min-width: 1281px) {
@@ -130,7 +129,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Laptops, Desktops, Ipad pro
 */
 @media (min-width: 1025px) and (max-width: 1280px) {
@@ -147,7 +146,7 @@ img {
   }
 }
 
-/* 
+/*
   ##Device = Tablets, Ipads
 */
 @media (min-width: 768px) and (max-width: 1024px) {

apps/sales/src/app/modules/goods-in/components/goods-in-order-tag/goods-in-order-tag.component.scss

@@ -1,4 +1,4 @@
-:host() {
+:host {
   display: block;
   position: relative;
   width: 69px;

apps/sales/src/app/modules/shelf/components/order-tag/order-tag.component.scss

@@ -1,4 +1,4 @@
-:host() {
+:host {
   display: block;
   position: relative;
   width: 69px;

apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.ts

@@ -1,4 +1,11 @@
-import { Component, ChangeDetectionStrategy, ContentChildren, QueryList, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { UiSearchboxAutocompleteOptionDirective } from './ui-searchbox-autocomplete-option.directive';
 
 @Component({
@@ -8,9 +15,11 @@ import { UiSearchboxAutocompleteOptionDirective } from './ui-searchbox-autocompl
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UiSearchboxAutocompleteComponent implements AfterContentInit {
-  protected show = false;
+  public show = false;
 
-  @ContentChildren(UiSearchboxAutocompleteOptionDirective, { read: UiSearchboxAutocompleteOptionDirective })
+  @ContentChildren(UiSearchboxAutocompleteOptionDirective, {
+    read: UiSearchboxAutocompleteOptionDirective,
+  })
   options: QueryList<UiSearchboxAutocompleteOptionDirective>;
 
   onSelect = (value: string) => {};
@@ -27,7 +36,9 @@ export class UiSearchboxAutocompleteComponent implements AfterContentInit {
   }
 
   registerOptionOnSelect() {
-    this.options.forEach((option) => option.registerOnSelect((value) => this.selectValue(value)));
+    this.options.forEach((option) =>
+      option.registerOnSelect((value) => this.selectValue(value))
+    );
   }
 
   registerOnSelect(fn: any) {

apps/ui/searchbox/src/lib/ui-searchbox.component.html

@@ -1,8 +1,12 @@
-<div class="ui-searchbox-wrapper" [class.autocomplete-visible]="autocomplete?.show">
+<div
+  class="ui-searchbox-wrapper"
+  [class.autocomplete-visible]="autocomplete?.show"
+>
   <div class="ui-searchbox-input-wrapper">
     <ng-content select="[uiSearchboxInput]"></ng-content>
     <ng-content select="ui-searchbox-warning"></ng-content>
   </div>
+  <ng-content select="[uiSearchboxClearButton]"></ng-content>
   <ng-content select="[uiSearchboxSearchButton]"></ng-content>
 </div>
 <ng-content select="ui-searchbox-autocomplete"></ng-content>

apps/ui/searchbox/src/lib/ui-searchbox.component.scss

@@ -4,6 +4,7 @@
 
 .ui-searchbox-wrapper {
   @apply flex flex-row rounded-autocomplete bg-white shadow-input;
+
   height: 60px;
 
   &.autocomplete-visible {
@@ -32,12 +33,18 @@
   }
 }
 
-.ui-searchbox-wrapper ::ng-deep [uiSearchboxSearchButton] {
+.ui-searchbox-wrapper ::ng-deep [uiSearchboxSearchButton],
+.ui-searchbox-wrapper ::ng-deep [uiSearchboxClearButton] {
   @apply flex flex-row justify-center items-center rounded-full border-0 text-center bg-white;
   height: 60px;
   width: 60px;
 }
 
+.ui-searchbox-wrapper ::ng-deep [uiSearchboxClearButton] {
+  @apply mr-2;
+  width: auto;
+}
+
 :host ::ng-deep ui-searchbox-autocomplete {
   @apply absolute left-0 right-0 z-dropdown;
   top: 60px;

libs/ui/src/lib/loading/loading.component.scss

@@ -1,4 +1,4 @@
-:host() {
+:host {
   display: flex;
   position: relative;
   width: 100%;
@@ -7,6 +7,7 @@
   justify-content: center;
   margin-top: 30%;
 }
+
 span {
   margin-top: 16px;
   font-family: 'Open Sans';
@@ -14,6 +15,7 @@ span {
   font-size: 16px;
   color: rgba(90, 114, 138, 1);
 }
+
 .rotate {
   margin-top: 10px;
   animation: spin 1.5s linear infinite;

package.json

@@ -109,6 +109,8 @@
     "prettier": "2.0.1",
     "pretty-quick": "^2.0.1",
     "protractor": "~7.0.0",
+    "stylelint": "^13.7.2",
+    "stylelint-config-standard": "^20.0.0",
     "tailwindcss": "^1.6.3",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",

stylelint.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  //extends: ['stylelint-config-standard'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+        ],
+      },
+    ],
+    'declaration-block-trailing-semicolon': null,
+    'no-descending-specificity': null,
+  },
+};