@wlcm/angular 17.1.10 → 17.3.0

package/forms/lib/forms/components/select/select.component.d.ts

@@ -1,25 +1,32 @@
-import { ChangeDetectorRef } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormControl } from '@angular/forms';
-import { MatSelect, MatSelectChange } from '@angular/material/select';
+import { ChangeDetectorRef, InputSignal, OutputEmitterRef, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, FormControl, ValidationErrors, Validator } from '@angular/forms';
+import { MatOption, MatSelect, MatSelectChange } from '@angular/material/select';
 import { WlcmIconName, WlcmOption } from '@wlcm/angular/core';
 import { WlcmFormControl, WlcmFormField, WlcmFormFieldInput } from '../../models/_index';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/select-input-binder.directive";
 type SelectValue = string[] | string;
-export declare class WlcmSelectComponent implements WlcmFormFieldInput, ControlValueAccessor {
+type OptionTemplateContext = TemplateRef<{
+    $implicit: WlcmOption;
+}>;
+export declare class WlcmSelectComponent implements WlcmFormFieldInput, ControlValueAccessor, Validator {
     private changeDetectorRef;
     private formField;
     private parentFormMember;
     multiple: boolean;
     placeholder: string;
     options: WlcmOption[];
+    optionTemplate: InputSignal<TemplateRef<OptionTemplateContext> | null>;
+    triggerTemplate: InputSignal<TemplateRef<MatOption<any> | MatOption<any>[]> | null>;
+    selectionChange: OutputEmitterRef<MatSelectChange>;
     readonly control: FormControl;
     readonly WlcmIconName: typeof WlcmIconName;
     private _changed?;
     private _touched?;
     private _validatorChanged?;
     matSelect: MatSelect;
+    openPanel(): void;
     private readonly _focusStream$;
     private readonly _blurStream$;
     focus$: Observable<unknown>;
@@ -29,18 +36,17 @@ export declare class WlcmSelectComponent implements WlcmFormFieldInput, ControlV
     focus: () => void;
     isFocused: () => boolean;
     select(event: MatSelectChange): void;
-    openPanel(): void;
     closePanel(): void;
     panelOpened(): void;
     writeValue(value: SelectValue): void;
     registerOnChange(callback: (value: WlcmOption) => void): void;
     registerOnTouched(callback: () => void): void;
     registerOnValidatorChange(callback: () => void): void;
-    validate(control: AbstractControl): void;
+    validate(): ValidationErrors | null;
     get isOpen(): boolean;
     private handleStateChange;
     private handleClickOutside;
     static ɵfac: i0.ɵɵFactoryDeclaration<WlcmSelectComponent, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WlcmSelectComponent, "wlcm-select", never, { "multiple": { "alias": "multiple"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.WlcmSelectInputBinderDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WlcmSelectComponent, "wlcm-select", never, { "multiple": { "alias": "multiple"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; "triggerTemplate": { "alias": "triggerTemplate"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, [{ directive: typeof i1.WlcmSelectInputBinderDirective; inputs: {}; outputs: {}; }]>;
 }
 export {};

package/forms/lib/forms/constants/form-field.constants.d.ts

@@ -0,0 +1 @@
+export declare const WLCM_FORM_FIELD_INPUT_CLASS: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wlcm/angular",
-  "version": "17.1.10",
+  "version": "17.3.0",
   "license": "MIT",
   "type": "module",
   "module": "./index.mjs",
@@ -66,10 +66,14 @@
     "@ngneat/until-destroy": "^10.0.0",
     "@nx/angular": "18.3.2",
     "@rx-angular/template": "^17.1.0",
+    "countries-list": "^3.1.0",
     "date-fns": "^3.6.0",
+    "imask": "^7.6.1",
+    "libphonenumber-js": "^1.11.3",
     "moment": "^2.30.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "uuid": "^9.0.1",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {}

package/styles/components/forms/_checkbox.scss

@@ -20,7 +20,7 @@
       box-sizing: border-box;
       top: 0 !important;
       left: 0 !important;
-      background: transparent !important;
+      background: #ffffff !important;
       border: 1px solid map-get($theme, field-outline-color) !important;
       border-radius: 4px;
 

package/styles/components/phone-input/_country-code-select.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-country-code-select {
+    cursor: pointer;
+
+    .wlcm-select-arrow {
+      margin-left: 8px;
+    }
+
+    .wlcm-country-code-select-trigger {
+      font-size: 14px;
+    }
+  }
+}

package/styles/components/phone-input/_phone-input-container.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-phone-input-container {
+    width: 100%;
+    height: 18px;
+    display: flex;
+    align-items: center;
+  }
+
+  .wlcm-phone-input-container-divider {
+    width: 1.5px;
+    height: 100%;
+    margin: 0 12px;
+    background: map-get($theme, field-outline-color);
+  }
+}

package/styles/components/phone-input/indes.scss

@@ -0,0 +1,7 @@
+@use './phone-input-container' as container;
+@use './country-code-select' as countryCode;
+
+@mixin theme($theme-config) {
+  @include container.theme($theme-config);
+  @include countryCode.theme($theme-config);
+}

package/styles/components/table/_table-head-data.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-table-head-data,
+  .wlcm-table-head-actions {
+    min-width: min-content;
+    display: table-cell;
+    vertical-align: inherit;
+    unicode-bidi: isolate;
+    background: #eceff1;
+    white-space: nowrap;
+    font-family: map-get($theme, regular-font-family);
+    color: map-get($theme, placeholder-color);
+    font-size: 14px;
+    height: 32px;
+
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  .wlcm-table-head-data {
+    padding: 0px 16px;
+  }
+
+  .wlcm-table-head-actions {
+    width: 16px;
+    padding: 0px 8px;
+
+    & + .wlcm-table-head-data {
+      padding-left: 0px;
+    }
+  }
+}

package/styles/components/table/_table-head.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-table-head {
+    display: table-header-group;
+    vertical-align: middle;
+    unicode-bidi: isolate;
+    border-color: inherit;
+  }
+}

package/styles/components/table/_table-row-data.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-table-row-data,
+  .wlcm-table-row-actions {
+    display: table-cell;
+    white-space: nowrap;
+    min-width: min-content;
+    vertical-align: inherit;
+    unicode-bidi: isolate;
+    box-sizing: border-box;
+    background: #ffffff;
+    font-size: 16px;
+
+    &:first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  .wlcm-table-row-data {
+    padding: 16px;
+  }
+
+  .wlcm-table-row-actions {
+    width: 16px;
+    padding: 16px 8px;
+
+    & + .wlcm-table-row-data {
+      padding-left: 0px;
+    }
+  }
+
+  .wlcm-table-row-selected {
+    .wlcm-table-row-data {
+      color: map-get($theme, primary-color);
+    }
+  }
+}

package/styles/components/table/_table-row.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-table-row {
+    display: table-row;
+    vertical-align: inherit;
+    unicode-bidi: isolate;
+    border-color: inherit;
+  }
+
+  .wlcm-table-row-spacer {
+    display: table-row;
+    vertical-align: inherit;
+    unicode-bidi: isolate;
+    border-color: inherit;
+    height: 12px;
+  }
+}

package/styles/components/table/_table.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '../../core/utils' as utils;
+
+@mixin theme($theme-config) {
+  $theme: utils.using-theme($theme_config);
+
+  .wlcm-table {
+    width: 100%;
+    display: table;
+    border-collapse: collapse;
+    table-layout: auto;
+    box-sizing: border-box;
+    text-indent: initial;
+    unicode-bidi: isolate;
+  }
+
+  .wlcm-scrollable-table-container {
+    position: relative;
+    overflow-y: auto;
+
+    .wlcm-table-head {
+      .wlcm-table-head-data,
+      .wlcm-table-head-actions {
+        top: 0;
+        position: sticky;
+        z-index: 1;
+      }
+    }
+  }
+}

package/styles/components/table/index.scss

@@ -0,0 +1,13 @@
+@use './table' as table;
+@use './table-head' as tableHead;
+@use './table-head-data' as tableHeadData;
+@use './table-row-data' as tableRowData;
+@use './table-row' as tableRow;
+
+@mixin theme($theme-config) {
+  @include table.theme($theme-config);
+  @include tableHead.theme($theme-config);
+  @include tableHeadData.theme($theme-config);
+  @include tableRowData.theme($theme-config);
+  @include tableRow.theme($theme-config);
+}

package/styles/core/_all-theme.scss

@@ -6,6 +6,8 @@
 @use '../components/button/index' as button;
 @use '../components/search-field/index' as searchField;
 @use '../components/date-range-picker/index' as dateRangePicker;
+@use '../components/phone-input/indes.scss' as phoneInput;
+@use '../components/table/index.scss' as table;
 
 @mixin all-component-themes($theme-config) {
   @include common.theme($theme-config);
@@ -14,4 +16,6 @@
   @include button.theme($theme-config);
   @include searchField.theme($theme-config);
   @include dateRangePicker.theme($theme-config);
+  @include phoneInput.theme($theme-config);
+  @include table.theme($theme-config);
 }