ajout des composants drawer et backdrop

Author: mckenziearts

src/app/shared/components/buttons/primary.component.ts

@@ -7,8 +7,8 @@ import { Observable } from 'rxjs';
     <button
       [type]="type"
       [disabled]="loading$ | async"
-      class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md shadow-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150"
-      [ngClass]="class"
+      class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150"
+      [ngClass]="class + this.themeClass()"
       matRipple
       matRippleColor="primary">
       <span *ngIf="loading$ | async">
@@ -39,4 +39,21 @@ export class ButtonPrimaryComponent {
   @Input() loading$!: Observable<boolean>;
 
   @Input() class!: string;
+
+  @Input() theme: string = 'primary';
+
+  public themeClass(theme: string): string {
+    switch (theme) {
+      case 'primary':
+        return 'bg-primary-600 hover:bg-primary-700 focus:ring-primary-500';
+      case 'secondary':
+        return 'bg-secondary-600 hover:bg-secondary-700 focus:ring-secondary-500';
+      case 'success':
+        return 'bg-green-600 hover:bg-green-700 focus:ring-green-500';
+      case 'danger':
+        return 'bg-red-600 hover:bg-red-700 focus:ring-red-500';
+      default:
+        return 'bg-transparent hover:bg-slate-50 focus:ring-slate-900';
+    }
+  }
 }

src/app/shared/components/simple-drawer/button.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'drawer-button',
+  template: `
+    <button type="button" class="inline-flex items-center text-sm leading-5">
+      <ng-content></ng-content>
+    </button>
+  `,
+})
+export class ButtonDrawerComponent {}

src/app/shared/components/simple-drawer/simple-drawer.component.html

@@ -0,0 +1,39 @@
+<cosna-drawer-button (click)="open()">
+  <ng-content select="[slot=button]"></ng-content>
+</cosna-drawer-button>
+
+<mat-sidenav-container 
+  getElementRef
+  hasBackdrop="true"
+  (backdropClick)="sidenav.close()"
+>
+  <mat-sidenav
+    fixedBottomGap="10"
+    position="end"
+    mode="over"
+    #sidenav
+    disableClose
+    [ngClass]="class"
+    [(opened)]="opened"
+  >
+    <div class="flex flex-col h-full py-6 overflow-y-scroll bg-white shadow-xl">
+      <div class="px-4 sm:px-6">
+        <div class="flex items-start justify-between">
+          <h2 class="text-lg font-medium text-slate-900" id="slide-over-title">{{ title }}</h2>
+          <div class="flex items-center ml-3 h-7">
+            <button (click)="sidenav.close()" type="button" class="bg-white rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
+              <span class="sr-only">Close panel</span>
+              <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="relative flex-1 px-4 mt-6 sm:px-6">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </mat-sidenav>
+</mat-sidenav-container>
+    

src/app/shared/components/simple-drawer/simple-drawer.component.ts

@@ -0,0 +1,34 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+
+@Component({
+  selector: 'simple-drawer',
+  templateUrl: './simple-drawer.component.html',
+})
+export class SimpleDrawerComponent {
+  @ViewChild('sidenav') sidenav!: MatSidenav;
+
+  @Input() title!: string;
+
+  @Input() class!: string;
+
+  @Input() value?: any;
+
+  @Output() dispatchOnLoad: EventEmitter<any> = new EventEmitter<any>();
+
+  opened: boolean = false;
+
+  public open() {
+    this.sidenav.open();
+
+    if (this.value) {
+      this.dispatchOnLoad.emit(this.value);
+    }
+  }
+}

src/app/shared/components/skeletons/backdrop-loader.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'backdrop-loader',
+  template: `
+    <div
+      *ngIf="loading$ | async"
+      class="absolute inset-0 z-50 flex items-center justify-center rounded-lg backdrop-blur-sm bg-white/30">
+      <span>
+        <svg
+          class="w-5 h-5 mr-3 -ml-1 text-primary-500 animate-spin"
+          fill="none"
+          viewBox="0 0 24 24">
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4" />
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        </svg>
+      </span>
+    </div>
+  `,
+})
+export class BackdropLoaderComponent {
+  @Input() loading$!: Observable<boolean>;
+}