@wizishop/angular-components 19.0.0-beta.2 → 19.0.0

package/README.md

@@ -1,24 +1,87 @@
-# AngularComponents
+# Wizi Angular Components Module
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.12.
+## 1 - Dependencies
 
-## Code scaffolding
+- Run `npm i @wizishop/angular-components`.
 
-Run `ng generate component component-name --project angular-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-components`.
-> Note: Don't forget to add `--project angular-components` or else it will be added to the default project in your `angular.json` file. 
+- Then install all the lib dependencies & peerDenpendencies.
+You can find the list, in the `package.json` file in `node_modules/@wizishop/angular-components`.
 
-## Build
+Run `npm i nameOfTheDependency`.
 
-Run `ng build angular-components` to build the project. The build artifacts will be stored in the `dist/` directory.
+## 2 - Module & Translation system
 
-## Publishing
+In `app.module.ts` file :
 
-After building your library with `ng build angular-components`, go to the dist folder `cd dist/angular-components` and run `npm publish`.
+```
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
-## Running unit tests
+import { WiziComponentsModule } from 'angular-components';
 
-Run `ng test angular-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/angular-components/i18n/', '.json');
+}
 
-## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+@NgModule({
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    ...
+    HttpClientModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'fr',
+      loader: {
+          provide: TranslateLoader,
+          useFactory: (HttpLoaderFactory),
+          deps: [HttpClient]
+      }
+    }),
+    WiziComponentsModule
+  ]
+  ...
+})
+
+```
+
+If you already use ngx-translate, maybe you should use [@ngx-translate/multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader) in order to load multiple translation source file.
+
+
+## 3 - Integration / Assets & Styles
+
+- In `angular.json` file add a link to the module assets and a link to calendar script :
+
+```
+assets": [
+              ...
+              {
+                "glob": "**/*",
+                "input": "node_modules/@wizishop/angular-components/assets/",
+                "output": "./assets/angular-components/"
+              }
+            ],
+...
+"scripts": [
+              "node_modules/bulma-calendar/dist/js/bulma-calendar.js"
+            ]
+```
+
+- Add `<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" />` in your `index.html` file.
+
+- Copy/paste the following folder in your app project.
+
+[Github link with all scss files to import](https://gitlab.wizishop.com/wizi/angular-components/-/tree/master/projects/showcase/src/scss/includes)
+
+- Make the import of the `import.scss` file in your main scss file :
+
+`@import '@wizishop/angular-components/angular-components';`
+
+
+## 4 - Use components from this module !
+
+All the components of this module starts with `wac-` prefix like `<wac-button>`.

package/angular-components.scss

@@ -814,6 +814,25 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
     }
   }
 }
+wac-block {
+  .wac-block {
+    background-color: $white;
+    @include padding(1.875rem);
+    box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.05);
+    @include simple_transition();
+    height: 100%;
+    border-radius: var(--wac-block-border-radius);
+
+    @include media('<tablet') {
+      @include padding(1.25rem);
+    }
+
+    &:hover {
+      box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
+    }
+  }
+}
+
 .block-with-checkbox {
   width: 100%;
   display: flex;
@@ -954,26 +973,154 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
     margin-right: 0;
   }
 }
-wac-block {
-  .wac-block {
-    background-color: $white;
-    @include padding(1.875rem);
-    box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.05);
-    @include simple_transition();
-    height: 100%;
-    border-radius: var(--wac-block-border-radius);
+.w-border-picker {
+  display: flex;
+  flex-direction: column;
 
-    @include media('<tablet') {
-      @include padding(1.25rem);
+  .bp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    width: 100%;
+    min-width: 305px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 8px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+    position: relative;
+
+    @include media ('<tablet') {
+      min-width: 250px;
     }
 
-    &:hover {
-      box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
+    .border-preview {
+      position: relative;
+      width: 100%;
+      max-width: 24px;
+      height: 24px;
+      border: 2px solid #1d2a3b;
+      border-radius: 3px;
+
+      .mask1, .mask2 {
+        background: #fff;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .mask1 {
+        width: 30px;
+        height: 5px;
+      }
+
+      .mask2 {
+        width: 5px;
+        height: 30px;
+      }
+      
     }
-  }
-}
 
-.wac-breadcrumbs {
+    .bp-range {
+      width: 100%;
+      max-width: 202px;
+      height: 4px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      -webkit-appearance: none;
+      appearance: none;
+      margin: 0;
+      cursor: pointer;
+      
+      &::-webkit-slider-runnable-track {
+        height: 4px;
+        background: #dee2ed;
+        border-radius: 20px;
+      }
+      
+      &::-moz-range-track {
+        height: 4px;
+        background: #dee2ed;
+        border-radius: 20px;
+      }
+      
+      &::-ms-track {
+        height: 4px;
+        background: #dee2ed;
+        border-radius: 20px;
+        border-color: transparent;
+        color: transparent;
+      }
+      
+      // Thumb style
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #3BA6EC;
+        margin-top: -6px; // Centrer verticalement (height of track - height of thumb) / 2
+        border: 2px solid white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        transition: all 0.2s ease;
+      }
+      
+      &::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #3BA6EC;
+        border: 2px solid white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        transition: all 0.2s ease;
+      }
+      
+      &::-ms-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #3BA6EC;
+        border: 2px solid white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        transition: all 0.2s ease;
+      }
+      
+      // Active/hover state
+      &:active::-webkit-slider-thumb,
+      &:hover::-webkit-slider-thumb {
+        transform: scale(1.1);
+      }
+      
+      &:active::-moz-range-thumb,
+      &:hover::-moz-range-thumb {
+        transform: scale(1.1);
+      }
+      
+      // Fill color before thumb (optional)
+      &::-webkit-slider-runnable-track {
+        background: linear-gradient(to right, #3BA6EC 0%, #3BA6EC var(--slider-percentage, 0%), #dee2ed var(--slider-percentage, 0%), #dee2ed 100%);
+      }
+    }
+
+    .bp-input {
+      width: 100%;
+      max-width: 45px;
+      height: 100%;
+      padding: 0;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+    }
+
+  }
+}.wac-breadcrumbs {
   width: 100%;
   display: flex;
   align-items: center;
@@ -2636,154 +2783,7 @@ wac-block {
     }
   }
 }
-.w-border-picker {
-  display: flex;
-  flex-direction: column;
-
-  .bp-label {
-    font-weight: 500;
-  }
-
-  .w-input {
-    width: 100%;
-    min-width: 305px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 8px;
-    border: 1px solid #dee2ed;
-    border-radius: 3px;
-    position: relative;
-
-    @include media ('<tablet') {
-      min-width: 250px;
-    }
-
-    .border-preview {
-      position: relative;
-      width: 100%;
-      max-width: 24px;
-      height: 24px;
-      border: 2px solid #1d2a3b;
-      border-radius: 3px;
-
-      .mask1, .mask2 {
-        background: #fff;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      .mask1 {
-        width: 30px;
-        height: 5px;
-      }
-
-      .mask2 {
-        width: 5px;
-        height: 30px;
-      }
-      
-    }
-
-    .bp-range {
-      width: 100%;
-      max-width: 202px;
-      height: 4px;
-      padding: 0;
-      border: none;
-      background: transparent;
-      -webkit-appearance: none;
-      appearance: none;
-      margin: 0;
-      cursor: pointer;
-      
-      &::-webkit-slider-runnable-track {
-        height: 4px;
-        background: #dee2ed;
-        border-radius: 20px;
-      }
-      
-      &::-moz-range-track {
-        height: 4px;
-        background: #dee2ed;
-        border-radius: 20px;
-      }
-      
-      &::-ms-track {
-        height: 4px;
-        background: #dee2ed;
-        border-radius: 20px;
-        border-color: transparent;
-        color: transparent;
-      }
-      
-      // Thumb style
-      &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #3BA6EC;
-        margin-top: -6px; // Centrer verticalement (height of track - height of thumb) / 2
-        border: 2px solid white;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-        transition: all 0.2s ease;
-      }
-      
-      &::-moz-range-thumb {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #3BA6EC;
-        border: 2px solid white;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-        transition: all 0.2s ease;
-      }
-      
-      &::-ms-thumb {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #3BA6EC;
-        border: 2px solid white;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-        transition: all 0.2s ease;
-      }
-      
-      // Active/hover state
-      &:active::-webkit-slider-thumb,
-      &:hover::-webkit-slider-thumb {
-        transform: scale(1.1);
-      }
-      
-      &:active::-moz-range-thumb,
-      &:hover::-moz-range-thumb {
-        transform: scale(1.1);
-      }
-      
-      // Fill color before thumb (optional)
-      &::-webkit-slider-runnable-track {
-        background: linear-gradient(to right, #3BA6EC 0%, #3BA6EC var(--slider-percentage, 0%), #dee2ed var(--slider-percentage, 0%), #dee2ed 100%);
-      }
-    }
-
-    .bp-input {
-      width: 100%;
-      max-width: 45px;
-      height: 100%;
-      padding: 0;
-      border: none;
-      font-size: 14px;
-      color: #1d2a3b;
-      font-weight: 400;
-    }
-
-  }
-}wac-calendar {
+wac-calendar {
   &.ng-touched.ng-invalid {
     .wac-calendar__wrapper__select, .wac-calendar__wrapper__editInPlace, .wac-calendar__wrapper__select {
       border-color: $wac-form-control-touched-and-invalid-border;
@@ -3656,7 +3656,51 @@ wac-block {
     font-weight: 400;
   }
 }
-.wac-field-checkbox {
+.w-color-picker {
+  display: flex;
+  flex-direction: column;
+
+  .cp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    position: relative;
+    width: 210px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+
+    .color-preview {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #dee2ed;
+      border-radius: 3px;
+    }
+
+    .color-picker {
+      left: 0 !important;
+
+      .arrow-bottom {
+        left: 14px !important;
+      }
+    }
+    
+    .cp-input {
+      width: 70%;
+      height: 100%;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+      padding: 0 !important;
+    }
+  }
+}.wac-field-checkbox {
   &.disable-wt {
     .wac-field-checkbox__row {
       display: flex;
@@ -3859,51 +3903,7 @@ wac-block {
     }
   }
 }
-.w-color-picker {
-  display: flex;
-  flex-direction: column;
-
-  .cp-label {
-    font-weight: 500;
-  }
-
-  .w-input {
-    position: relative;
-    width: 210px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 5px;
-    border: 1px solid #dee2ed;
-    border-radius: 3px;
-
-    .color-preview {
-      width: 30px;
-      height: 30px;
-      border: 1px solid #dee2ed;
-      border-radius: 3px;
-    }
-
-    .color-picker {
-      left: 0 !important;
-
-      .arrow-bottom {
-        left: 14px !important;
-      }
-    }
-    
-    .cp-input {
-      width: 70%;
-      height: 100%;
-      border: none;
-      font-size: 14px;
-      color: #1d2a3b;
-      font-weight: 400;
-      padding: 0 !important;
-    }
-  }
-}.wac-confirm-delete {
+.wac-confirm-delete {
   position: absolute;
   right: 0;
   top: 0;
@@ -4806,7 +4806,7 @@ wac-block {
   }
 }
 
-.wac-free-popin  .ps-content > * {
+.wac-free-popin ::ng-deep .ng-scroll-content > * {
   padding-right: 15px;
 }
 .wac-google-preview {
@@ -6410,7 +6410,7 @@ wac-optional-disable-container {
   }
 }
 
-.wac-free .ps-content > * {
+.wac-free ::ng-deep .ng-scroll-content > * {
   padding-right: 15px;
 }
 @mixin flex-col-start {
@@ -7424,8 +7424,9 @@ wac-optional-disable-container {
         transition: 0s;
       }
     }
-    .ps {
+    ng-scrollbar {
       max-height: 240px;
+      width: 100%;
     }
     &.open,
     &.open.hidden {
@@ -10900,8 +10901,9 @@ div.wac-field-input-search {
         transition: 0s;
       }
     }
-    .ps {
+    ng-scrollbar {
       max-height: 240px;
+      width: 100%;
     }
     &.open,
     &.open.hidden {
@@ -10985,6 +10987,12 @@ div.wac-field-input-search {
 
 }
 
+.wac-option {
+  &__placeholder {
+    pointer-events: none;
+  }
+}
+
 .wac-select-seacrh-trigger {
     position: relative;
     top: 0;

package/index.d.ts

@@ -3,4 +3,3 @@
  */
 /// <amd-module name="@wizishop/angular-components" />
 export * from './public-api';
-//# sourceMappingURL=wizishop-angular-components.d.ts.map

package/lib/animations/in-out/in-out-x.animation.d.ts

@@ -1,2 +1 @@
 export declare const inOutX: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=in-out-x.animation.d.ts.map

package/lib/animations/in-out/in-out-y.animation.d.ts

@@ -1,2 +1 @@
 export declare const inOutY: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=in-out-y.animation.d.ts.map

package/lib/animations/list/animate-list-from-bottom.animation.d.ts

@@ -1,2 +1 @@
 export declare function animateListFromBottom(passedTime?: string): import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=animate-list-from-bottom.animation.d.ts.map

package/lib/animations/list/animate-list-from-left.animation.d.ts

@@ -1,2 +1 @@
 export declare function animateListFromLeft(passedTime?: string): import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=animate-list-from-left.animation.d.ts.map

package/lib/animations/list/animate-list-from-right.animation.d.ts

@@ -1,2 +1 @@
 export declare function animateListFromRight(passedTime?: string, staggerTime?: string): import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=animate-list-from-right.animation.d.ts.map

package/lib/animations/list/animate-list-from-top.animation.d.ts

@@ -1,2 +1 @@
 export declare function animateListFromTop(passedTime?: string): import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=animate-list-from-top.animation.d.ts.map

package/lib/animations/show/opacity.animation.d.ts

@@ -1,2 +1 @@
 export declare const opacityAnimation: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=opacity.animation.d.ts.map

package/lib/animations/show/show-from-bottom.animation.d.ts

@@ -1,2 +1 @@
 export declare const showFromBottom: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=show-from-bottom.animation.d.ts.map

package/lib/animations/show/show-from-left.animation.d.ts

@@ -1,2 +1 @@
 export declare const showFromLeft: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=show-from-left.animation.d.ts.map

package/lib/animations/show/show-from-right.animation.d.ts

@@ -1,2 +1 @@
 export declare const showFromRight: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=show-from-right.animation.d.ts.map

package/lib/animations/show/show-from-top.animation.d.ts

@@ -1,2 +1 @@
 export declare const showFromTop: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=show-from-top.animation.d.ts.map

package/lib/animations/switch/switch-in-out.animation.d.ts

@@ -1,2 +1 @@
 export declare const switchInOut: import("@angular/animations").AnimationTriggerMetadata;
-//# sourceMappingURL=switch-in-out.animation.d.ts.map

package/lib/components/ai-express/ai-express.component.d.ts

@@ -26,4 +26,3 @@ export declare class AiExpressComponent implements OnInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<AiExpressComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AiExpressComponent, "wac-ai-express", never, { "top": { "alias": "top"; "required": false; }; "right": { "alias": "right"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wordingTop": { "alias": "wordingTop"; "required": false; }; "wordingToken": { "alias": "wordingToken"; "required": false; }; "wordingTokenLeft": { "alias": "wordingTokenLeft"; "required": false; }; "wordingRegisterTop": { "alias": "wordingRegisterTop"; "required": false; }; "wordingRegisterBtn": { "alias": "wordingRegisterBtn"; "required": false; }; "wordingDisabled": { "alias": "wordingDisabled"; "required": false; }; "tokenCost": { "alias": "tokenCost"; "required": false; }; "tokenLeft": { "alias": "tokenLeft"; "required": false; }; "tokenCount": { "alias": "tokenCount"; "required": false; }; "isRegister": { "alias": "isRegister"; "required": false; }; }, { "validAction": "validAction"; }, never, ["*"], false, never>;
 }
-//# sourceMappingURL=ai-express.component.d.ts.map

package/lib/components/alert/alert.component.d.ts

@@ -15,4 +15,3 @@ export declare class AlertComponent implements OnInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "wac-alert", never, { "icon": { "alias": "icon"; "required": false; }; "warning": { "alias": "warning"; "required": false; }; "success": { "alias": "success"; "required": false; }; "alert": { "alias": "alert"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "closeButton": { "alias": "closeButton"; "required": false; }; }, { "isCloseChange": "isCloseChange"; }, never, ["*"], false, never>;
 }
-//# sourceMappingURL=alert.component.d.ts.map

package/lib/components/alert-popup/alert-popup-module.d.ts

@@ -6,4 +6,3 @@ export declare class AlertPopupModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<AlertPopupModule, [typeof i1.AlertPopupComponent], [typeof i2.CommonModule], [typeof i1.AlertPopupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AlertPopupModule>;
 }
-//# sourceMappingURL=alert-popup-module.d.ts.map

package/lib/components/alert-popup/alert-popup.component.d.ts

@@ -17,4 +17,3 @@ export declare class AlertPopupComponent implements AfterViewInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertPopupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AlertPopupComponent, "wac-alert-popup", never, {}, {}, never, never, false, never>;
 }
-//# sourceMappingURL=alert-popup.component.d.ts.map