@wizishop/angular-components 19.0.0-beta.1 → 19.0.0-beta.3

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

@@ -141,7 +141,22 @@ $wac-token-main: #1D2A3B!default;
 $wac-token-disabled: #EFF2F4!default;
 $wac-token-disabled-dark: #8A98B2!default;
 
-$wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
+$wac-tab-colunm-blue: #3ba6ec!default;
+
+// ---- Legacy variables used by library components (provided by consumer themes) ----
+// Defined with !default so they can be overridden by the consuming app
+$border-form: #C9D2D9 !default;
+$color-text-grey: #6b7881 !default;
+$disabled-button-text: #a6aec4 !default;
+$input-border: #C9D2D9 !default;
+$input-radio-border-color: #DEE2ED !default;
+$main-text: #1d2a3b !default;
+$placeholder-color: #b4bdd0 !default;
+$primary-button: #e95656 !default;
+$second-color: #526384 !default;
+$white: #ffffff !default;
+$wizishop-blue: #4baed0 !default;
+$wizishop-blue-button: #52aecd !default;.zindexToggle {
   z-index: 9!important;
   position: relative;
 }
@@ -489,6 +504,52 @@ $wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
     font-size: 1.25rem;
   }
 }
+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);
+    }
+  }
+}
+
+.wac-back {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    border: 1px solid $wac-border-light;
+    background-color: transparent;
+    transition: border-color 0.3s ease-in-out;
+
+    i {
+      color: $wac-second-color;
+      font-size: 11px;
+      line-height: 14px;
+    }
+
+    &:hover {
+      border-color: $wac-back-border-hover;
+      transition: border-color 0.3s ease-in-out;
+    }
+  }
+}
 .wac-alert-popup {
   .alert {
     z-index: 999999;
@@ -772,52 +833,6 @@ $wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
   }
 
 }
-.wac-back {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    border: 1px solid $wac-border-light;
-    background-color: transparent;
-    transition: border-color 0.3s ease-in-out;
-
-    i {
-      color: $wac-second-color;
-      font-size: 11px;
-      line-height: 14px;
-    }
-
-    &:hover {
-      border-color: $wac-back-border-hover;
-      transition: border-color 0.3s ease-in-out;
-    }
-  }
-}
-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;
@@ -958,154 +973,7 @@ wac-block {
     margin-right: 0;
   }
 }
-.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-breadcrumbs {
+.wac-breadcrumbs {
   width: 100%;
   display: flex;
   align-items: center;
@@ -2756,19 +2624,166 @@ wac-block {
         bottom: 100%;
       }
     }
-  }
+  }
+
+  &:hover, &:focus {
+    .wac-button {
+      &__tooltips {
+        visibility: visible;
+        opacity: .9;
+        transition: opacity .3s ease .05s, visibility 0s linear 0s;
+      }
+    }
+  }
+}
+.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%);
+      }
+    }
 
-  &:hover, &:focus {
-    .wac-button {
-      &__tooltips {
-        visibility: visible;
-        opacity: .9;
-        transition: opacity .3s ease .05s, visibility 0s linear 0s;
-      }
+    .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;
@@ -3597,6 +3612,50 @@ wac-calendar {
     }
   }
 }
+.wac-charging-bar {
+  width: 100%;
+  margin: 0 0 20px;
+  display: flex;
+  align-items: center;
+  &__wrapLine {
+    width: 100%;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    &__line {
+      width: 100%;
+      height: 6px;
+      border-radius: 43px;
+      background-color: $wac-charging-bar-background;
+      position: relative;
+      &__width {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        border-radius: 43px;
+        max-width: 0;
+        background-color: $wac-primary-button;
+        transition: .3s ease;
+        &.complete {
+          background-color: $wac-tag-success;
+        }
+      }
+    }
+  }
+  &__number {
+    width: 2.5rem;
+    min-width: 2.5rem;
+    margin: 0 0 0 0.625rem;
+    line-height: 1;
+    white-space: nowrap;
+    text-align: right;
+    font-size: 0.875rem;
+    color: $wac-main-text;
+    font-weight: 400;
+  }
+}
 .wac-field-checkbox {
   &.disable-wt {
     .wac-field-checkbox__row {
@@ -3800,50 +3859,6 @@ wac-calendar {
     }
   }
 }
-.wac-charging-bar {
-  width: 100%;
-  margin: 0 0 20px;
-  display: flex;
-  align-items: center;
-  &__wrapLine {
-    width: 100%;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    &__line {
-      width: 100%;
-      height: 6px;
-      border-radius: 43px;
-      background-color: $wac-charging-bar-background;
-      position: relative;
-      &__width {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 6px;
-        border-radius: 43px;
-        max-width: 0;
-        background-color: $wac-primary-button;
-        transition: .3s ease;
-        &.complete {
-          background-color: $wac-tag-success;
-        }
-      }
-    }
-  }
-  &__number {
-    width: 2.5rem;
-    min-width: 2.5rem;
-    margin: 0 0 0 0.625rem;
-    line-height: 1;
-    white-space: nowrap;
-    text-align: right;
-    font-size: 0.875rem;
-    color: $wac-main-text;
-    font-weight: 400;
-  }
-}
 .w-color-picker {
   display: flex;
   flex-direction: column;
@@ -4000,39 +4015,6 @@ wac-calendar {
    }
   }
 }
-.wac-delete {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    background-color: transparent;
-    transition: background-color 0.3s ease-in-out;
-    cursor: pointer;
-
-    i {
-      color: $wac-border-form;
-      font-size: 14px;
-      line-height: 23px;
-      transition: color 0.3s ease-in-out;
-    }
-
-    &:hover {
-      background-color: $wac-primary-button;
-      transition: background-color 0.3s ease-in-out;
-
-      i {
-        color: $wac-white;
-        transition: color 0.3s ease-in-out;
-      }
-    }
-  }
-}
 .wac-draganddrop-list {
   width: 100%;
   background-color: $wac-white;
@@ -4170,6 +4152,39 @@ wac-calendar {
 .wac-draganddrop-list__wrapper.cdk-drop-list-dragging .wac-draganddrop-list__wrapper__item:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+.wac-delete {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    background-color: transparent;
+    transition: background-color 0.3s ease-in-out;
+    cursor: pointer;
+
+    i {
+      color: $wac-border-form;
+      font-size: 14px;
+      line-height: 23px;
+      transition: color 0.3s ease-in-out;
+    }
+
+    &:hover {
+      background-color: $wac-primary-button;
+      transition: background-color 0.3s ease-in-out;
+
+      i {
+        color: $wac-white;
+        transition: color 0.3s ease-in-out;
+      }
+    }
+  }
+}
 .wac-dropdown {
   display: inline-block;
   width: 40px;
@@ -4480,7 +4495,41 @@ wac-calendar {
       }
     }
   }
-}.wac-expanded-panel {
+}@mixin flex-col-start {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.wac-faq-section {
+  width: 100%;
+  @include flex-col-start;
+  gap: 32px;
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 32px;
+    &__item {
+      width: calc(50% - 16px);
+      @include flex-col-start;
+      gap: 16px;
+      @include media('<tablet') {
+        width: 100%;
+      }
+      strong {
+        font-weight: 700;
+      }
+      p {
+        color: $second-color;
+      }
+    }
+  }
+}
+.wac-expanded-panel {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -4538,40 +4587,6 @@ wac-calendar {
     }
   }
 }
-@mixin flex-col-start {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.wac-faq-section {
-  width: 100%;
-  @include flex-col-start;
-  gap: 32px;
-  &__wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: 32px;
-    &__item {
-      width: calc(50% - 16px);
-      @include flex-col-start;
-      gap: 16px;
-      @include media('<tablet') {
-        width: 100%;
-      }
-      strong {
-        font-weight: 700;
-      }
-      p {
-        color: $second-color;
-      }
-    }
-  }
-}
 .wac-filters {
   width: 100%;
   &__wrapper {
@@ -4791,7 +4806,7 @@ wac-calendar {
   }
 }
 
-.wac-free-popin  .ps-content > * {
+.wac-free-popin ::ng-deep .ng-scroll-content > * {
   padding-right: 15px;
 }
 .wac-google-preview {
@@ -6395,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 {
@@ -7409,8 +7424,9 @@ wac-optional-disable-container {
         transition: 0s;
       }
     }
-    .ps {
+    ng-scrollbar {
       max-height: 240px;
+      width: 100%;
     }
     &.open,
     &.open.hidden {
@@ -10885,8 +10901,9 @@ div.wac-field-input-search {
         transition: 0s;
       }
     }
-    .ps {
+    ng-scrollbar {
       max-height: 240px;
+      width: 100%;
     }
     &.open,
     &.open.hidden {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/angular-components",
-  "version": "19.0.0-beta.1",
+  "version": "19.0.0-beta.3",
   "peerDependencies": {
     "@angular/animations": ">=19.0.0",
     "@angular/cdk": ">=19.0.0",