@masterteam/components 0.0.163 → 0.0.164

package/fesm2022/masterteam-components-field-validation.mjs

@@ -1,44 +1,45 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, booleanAttribute, Component } from '@angular/core';
+import { inject, Pipe, input, booleanAttribute, Component } from '@angular/core';
 import { Message } from 'primeng/message';
+import { TranslocoService } from '@jsverse/transloco';
 import { isInvalid } from '@masterteam/components';
 
 class ErrorMessagePipe {
+    translocoService = inject(TranslocoService);
     transform(errors) {
         if (!errors) {
             return '';
         }
-        // Handle standard Angular validator errors first
+        const t = (key, params) => this.translocoService.translate(`components.validation.${key}`, params);
         if (errors['required']) {
-            return 'This field is required';
+            return t('required');
         }
         if (errors['email']) {
-            return 'Please enter a valid email address';
+            return t('email');
         }
         if (errors['minlength']) {
-            const { requiredLength, actualLength } = errors['minlength'];
-            return `Minimum length is ${requiredLength} characters (current: ${actualLength})`;
+            const { requiredLength } = errors['minlength'];
+            return t('minLength', { requiredLength });
         }
         if (errors['maxlength']) {
-            const { requiredLength, actualLength } = errors['maxlength'];
-            return `Maximum length is ${requiredLength} characters (current: ${actualLength})`;
+            const { requiredLength } = errors['maxlength'];
+            return t('maxLength', { requiredLength });
         }
         if (errors['min']) {
-            const { min, actual } = errors['min'];
-            return `Minimum value is ${min} (current: ${actual})`;
+            const { min } = errors['min'];
+            return t('min', { min });
         }
         if (errors['max']) {
-            const { max, actual } = errors['max'];
-            return `Maximum value is ${max} (current: ${actual})`;
+            const { max } = errors['max'];
+            return t('max', { max });
         }
         if (errors['pattern']) {
-            return 'The format is invalid';
+            return t('pattern');
         }
         if (errors['fileSizeLimited']) {
-            return 'File size exceeds the limit';
+            return t('fileSizeLimited');
         }
         // Handle custom errors that provide their own message
-        // This looks for an error structured like: { myCustomError: { message: '...' } }
         for (const key in errors) {
             const errorValue = errors[key];
             if (errorValue && typeof errorValue === 'object' && errorValue.message) {
@@ -47,17 +48,17 @@ class ErrorMessagePipe {
         }
         // Fallback for any other error
         const firstErrorKey = Object.keys(errors)[0];
-        return `Invalid field: ${firstErrorKey}`;
+        return t('invalid', { key: firstErrorKey });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage", pure: false });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'errorMessage',
                     standalone: true,
-                    pure: true,
+                    pure: false,
                 }]
         }] });
 

package/fesm2022/masterteam-components-field-validation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-field-validation.mjs","sources":["../../../../packages/masterteam/components/field-validation/error-message.pipe.ts","../../../../packages/masterteam/components/field-validation/field-validation.ts","../../../../packages/masterteam/components/field-validation/masterteam-components-field-validation.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\nimport { ValidationErrors } from '@angular/forms';\r\n\r\n@Pipe({\r\n  name: 'errorMessage',\r\n  standalone: true,\r\n  pure: true,\r\n})\r\nexport class ErrorMessagePipe implements PipeTransform {\r\n  transform(errors: ValidationErrors | null): string {\r\n    if (!errors) {\r\n      return '';\r\n    }\r\n\r\n    // Handle standard Angular validator errors first\r\n    if (errors['required']) {\r\n      return 'This field is required';\r\n    }\r\n    if (errors['email']) {\r\n      return 'Please enter a valid email address';\r\n    }\r\n    if (errors['minlength']) {\r\n      const { requiredLength, actualLength } = errors['minlength'];\r\n      return `Minimum length is ${requiredLength} characters (current: ${actualLength})`;\r\n    }\r\n    if (errors['maxlength']) {\r\n      const { requiredLength, actualLength } = errors['maxlength'];\r\n      return `Maximum length is ${requiredLength} characters (current: ${actualLength})`;\r\n    }\r\n    if (errors['min']) {\r\n      const { min, actual } = errors['min'];\r\n      return `Minimum value is ${min} (current: ${actual})`;\r\n    }\r\n    if (errors['max']) {\r\n      const { max, actual } = errors['max'];\r\n      return `Maximum value is ${max} (current: ${actual})`;\r\n    }\r\n    if (errors['pattern']) {\r\n      return 'The format is invalid';\r\n    }\r\n    if (errors['fileSizeLimited']) {\r\n      return 'File size exceeds the limit';\r\n    }\r\n\r\n    // Handle custom errors that provide their own message\r\n    // This looks for an error structured like: { myCustomError: { message: '...' } }\r\n    for (const key in errors) {\r\n      const errorValue = errors[key];\r\n      if (errorValue && typeof errorValue === 'object' && errorValue.message) {\r\n        return errorValue.message;\r\n      }\r\n    }\r\n\r\n    // Fallback for any other error\r\n    const firstErrorKey = Object.keys(errors)[0];\r\n    return `Invalid field: ${firstErrorKey}`;\r\n  }\r\n}\r\n","import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { Message } from 'primeng/message';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { ErrorMessagePipe } from './error-message.pipe';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-field-validation',\r\n  standalone: true,\r\n  imports: [Message, ErrorMessagePipe],\r\n  template: `\r\n    @if (isInvalid(control())) {\r\n      <p-message\r\n        severity=\"error\"\r\n        variant=\"simple\"\r\n        size=\"small\"\r\n        [text]=\"control().errors | errorMessage\"\r\n      >\r\n      </p-message>\r\n    }\r\n  `,\r\n  host: {\r\n    '[class.hidden]': '!isInvalid(control())',\r\n  },\r\n  styles: [],\r\n})\r\nexport class FieldValidation {\r\n  readonly control = input<AbstractControl | null>(null);\r\n  readonly touched = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n\r\n  isInvalid = isInvalid;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-field-validation.mjs","sources":["../../../../packages/masterteam/components/field-validation/error-message.pipe.ts","../../../../packages/masterteam/components/field-validation/field-validation.ts","../../../../packages/masterteam/components/field-validation/masterteam-components-field-validation.ts"],"sourcesContent":["import { inject, Pipe, PipeTransform } from '@angular/core';\r\nimport { ValidationErrors } from '@angular/forms';\r\nimport { TranslocoService } from '@jsverse/transloco';\r\n\r\n@Pipe({\r\n  name: 'errorMessage',\r\n  standalone: true,\r\n  pure: false,\r\n})\r\nexport class ErrorMessagePipe implements PipeTransform {\r\n  private readonly translocoService = inject(TranslocoService);\r\n\r\n  transform(errors: ValidationErrors | null): string {\r\n    if (!errors) {\r\n      return '';\r\n    }\r\n\r\n    const t = (key: string, params?: object) =>\r\n      this.translocoService.translate(`components.validation.${key}`, params);\r\n\r\n    if (errors['required']) {\r\n      return t('required');\r\n    }\r\n    if (errors['email']) {\r\n      return t('email');\r\n    }\r\n    if (errors['minlength']) {\r\n      const { requiredLength } = errors['minlength'];\r\n      return t('minLength', { requiredLength });\r\n    }\r\n    if (errors['maxlength']) {\r\n      const { requiredLength } = errors['maxlength'];\r\n      return t('maxLength', { requiredLength });\r\n    }\r\n    if (errors['min']) {\r\n      const { min } = errors['min'];\r\n      return t('min', { min });\r\n    }\r\n    if (errors['max']) {\r\n      const { max } = errors['max'];\r\n      return t('max', { max });\r\n    }\r\n    if (errors['pattern']) {\r\n      return t('pattern');\r\n    }\r\n    if (errors['fileSizeLimited']) {\r\n      return t('fileSizeLimited');\r\n    }\r\n\r\n    // Handle custom errors that provide their own message\r\n    for (const key in errors) {\r\n      const errorValue = errors[key];\r\n      if (errorValue && typeof errorValue === 'object' && errorValue.message) {\r\n        return errorValue.message;\r\n      }\r\n    }\r\n\r\n    // Fallback for any other error\r\n    const firstErrorKey = Object.keys(errors)[0];\r\n    return t('invalid', { key: firstErrorKey });\r\n  }\r\n}\r\n","import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { Message } from 'primeng/message';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { ErrorMessagePipe } from './error-message.pipe';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-field-validation',\r\n  standalone: true,\r\n  imports: [Message, ErrorMessagePipe],\r\n  template: `\r\n    @if (isInvalid(control())) {\r\n      <p-message\r\n        severity=\"error\"\r\n        variant=\"simple\"\r\n        size=\"small\"\r\n        [text]=\"control().errors | errorMessage\"\r\n      >\r\n      </p-message>\r\n    }\r\n  `,\r\n  host: {\r\n    '[class.hidden]': '!isInvalid(control())',\r\n  },\r\n  styles: [],\r\n})\r\nexport class FieldValidation {\r\n  readonly control = input<AbstractControl | null>(null);\r\n  readonly touched = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n\r\n  isInvalid = isInvalid;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-sidebar.mjs

@@ -21,11 +21,11 @@ class Sidebar {
         this.expandedChange.emit(this.expanded());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Sidebar, isStandalone: true, selector: "mt-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, iconsColor: { classPropertyName: "iconsColor", publicName: "iconsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '18rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          [style.--mt-icon-prev-width]=\"'20px'\"\r\n          [style.--mt-icon-prev-height]=\"'20px'\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-md overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon\r\n              [icon]=\"item.icon\"\r\n              class=\"shrink-0\"\r\n              [style.--mt-icon-prev-width]=\"'20px'\"\r\n              [style.--mt-icon-prev-height]=\"'20px'\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Sidebar, isStandalone: true, selector: "mt-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, iconsColor: { classPropertyName: "iconsColor", publicName: "iconsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '18rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n    [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          [style.--mt-icon-prev-width]=\"'20px'\"\r\n          [style.--mt-icon-prev-height]=\"'20px'\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-md overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon\r\n              [icon]=\"item.icon\"\r\n              class=\"shrink-0\"\r\n              [style.--mt-icon-prev-width]=\"'20px'\"\r\n              [style.--mt-icon-prev-height]=\"'20px'\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Sidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-sidebar', standalone: true, imports: [RouterLinkActive, RouterLink, Icon, Tooltip], template: "<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '18rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          [style.--mt-icon-prev-width]=\"'20px'\"\r\n          [style.--mt-icon-prev-height]=\"'20px'\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-md overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon\r\n              [icon]=\"item.icon\"\r\n              class=\"shrink-0\"\r\n              [style.--mt-icon-prev-width]=\"'20px'\"\r\n              [style.--mt-icon-prev-height]=\"'20px'\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"] }]
+            args: [{ selector: 'mt-sidebar', standalone: true, imports: [RouterLinkActive, RouterLink, Icon, Tooltip], template: "<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '18rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n    [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          [style.--mt-icon-prev-width]=\"'20px'\"\r\n          [style.--mt-icon-prev-height]=\"'20px'\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-md overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon\r\n              [icon]=\"item.icon\"\r\n              class=\"shrink-0\"\r\n              [style.--mt-icon-prev-width]=\"'20px'\"\r\n              [style.--mt-icon-prev-height]=\"'20px'\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], iconsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsColor", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 /**

package/fesm2022/masterteam-components-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-sidebar.mjs","sources":["../../../../packages/masterteam/components/sidebar/sidebar.ts","../../../../packages/masterteam/components/sidebar/sidebar.html","../../../../packages/masterteam/components/sidebar/masterteam-components-sidebar.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\n\r\nexport interface SidebarItem {\r\n  id: string | number;\r\n  title: string;\r\n  icon?: MTIcon;\r\n  routerLink?: any[] | string;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-sidebar',\r\n  standalone: true,\r\n  imports: [RouterLinkActive, RouterLink, Icon, Tooltip],\r\n  templateUrl: './sidebar.html',\r\n  styles: [\r\n    `\r\n      :host {\r\n        display: block;\r\n        height: 100%;\r\n        min-height: 0;\r\n      }\r\n\r\n      .mt-sidebar-menu {\r\n        scrollbar-width: thin;\r\n        scrollbar-color: var(--p-surface-400) transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar {\r\n        width: 6px;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-track {\r\n        background: transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-thumb {\r\n        border-radius: 9999px;\r\n        background: color-mix(in srgb, var(--p-surface-500) 58%, transparent);\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-thumb:hover {\r\n        background: color-mix(in srgb, var(--p-surface-600) 72%, transparent);\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed {\r\n        scrollbar-color: var(--p-surface-500) transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed::-webkit-scrollbar {\r\n        width: 2px;\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb {\r\n        background: color-mix(in srgb, var(--p-surface-600) 82%, transparent);\r\n      }\r\n    `,\r\n  ],\r\n})\r\nexport class Sidebar {\r\n  items = input<SidebarItem[]>([]);\r\n\r\n  logo = input<string>();\r\n  logoLink = input<string | any[]>();\r\n  title = input<string>();\r\n  subTitle = input<string>();\r\n\r\n  bgColor = input<string>();\r\n  bgImage = input<string>();\r\n  bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  iconsColor = input<string>('var(--p-text-color)');\r\n\r\n  expanded = signal(false);\r\n  expandedChange = output<boolean>();\r\n\r\n  toggleSidebar(): void {\r\n    this.expanded.update((v) => !v);\r\n    this.expandedChange.emit(this.expanded());\r\n  }\r\n}\r\n","<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '18rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          [style.--mt-icon-prev-width]=\"'20px'\"\r\n          [style.--mt-icon-prev-height]=\"'20px'\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-md overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon\r\n              [icon]=\"item.icon\"\r\n              class=\"shrink-0\"\r\n              [style.--mt-icon-prev-width]=\"'20px'\"\r\n              [style.--mt-icon-prev-height]=\"'20px'\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-sidebar.mjs","sources":["../../../../packages/masterteam/components/sidebar/sidebar.ts","../../../../packages/masterteam/components/sidebar/sidebar.html","../../../../packages/masterteam/components/sidebar/masterteam-components-sidebar.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\n\r\nexport interface SidebarItem {\r\n  id: string | number;\r\n  title: string;\r\n  icon?: MTIcon;\r\n  routerLink?: any[] | string;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-sidebar',\r\n  standalone: true,\r\n  imports: [RouterLinkActive, RouterLink, Icon, Tooltip],\r\n  templateUrl: './sidebar.html',\r\n  styles: [\r\n    `\r\n      :host {\r\n        display: block;\r\n        height: 100%;\r\n        min-height: 0;\r\n      }\r\n\r\n      .mt-sidebar-menu {\r\n        scrollbar-width: thin;\r\n        scrollbar-color: var(--p-surface-400) transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar {\r\n        width: 6px;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-track {\r\n        background: transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-thumb {\r\n        border-radius: 9999px;\r\n        background: color-mix(in srgb, var(--p-surface-500) 58%, transparent);\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-thumb:hover {\r\n        background: color-mix(in srgb, var(--p-surface-600) 72%, transparent);\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed {\r\n        scrollbar-color: var(--p-surface-500) transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed::-webkit-scrollbar {\r\n        width: 2px;\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb {\r\n        background: color-mix(in srgb, var(--p-surface-600) 82%, transparent);\r\n      }\r\n    `,\r\n  ],\r\n})\r\nexport class Sidebar {\r\n  items = input<SidebarItem[]>([]);\r\n\r\n  logo = input<string>();\r\n  logoLink = input<string | any[]>();\r\n  title = input<string>();\r\n  subTitle = input<string>();\r\n\r\n  bgColor = input<string>();\r\n  bgImage = input<string>();\r\n  bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  iconsColor = input<string>('var(--p-text-color)');\r\n\r\n  expanded = signal(false);\r\n  expandedChange = output<boolean>();\r\n\r\n  toggleSidebar(): void {\r\n    this.expanded.update((v) => !v);\r\n    this.expandedChange.emit(this.expanded());\r\n  }\r\n}\r\n","<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '18rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n    [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n          [style.--mt-icon-prev-width]=\"'20px'\"\r\n          [style.--mt-icon-prev-height]=\"'20px'\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-md overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon\r\n              [icon]=\"item.icon\"\r\n              class=\"shrink-0\"\r\n              [style.--mt-icon-prev-width]=\"'20px'\"\r\n              [style.--mt-icon-prev-height]=\"'20px'\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-text-field.mjs

@@ -1,25 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, input, signal, computed, effect, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, signal, computed, inject, effect, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i1 from '@angular/forms';
 import { Validators, NgControl, FormsModule } from '@angular/forms';
-import * as i3 from 'primeng/inputgroup';
-import { InputGroupModule } from 'primeng/inputgroup';
-import * as i4 from 'primeng/inputgroupaddon';
-import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { Tooltip } from '@masterteam/components/tooltip';
-import { InputIcon } from 'primeng/inputicon';
-import { IconField } from 'primeng/iconfield';
 import { FieldValidation } from '@masterteam/components/field-validation';
 import { isInvalid } from '@masterteam/components';
 import { Icon } from '@masterteam/icons';
-import { NgTemplateOutlet } from '@angular/common';
-import { Directionality } from '@angular/cdk/bidi';
 
 // TODO: text stuck when reset
 class TextField {
-    dir = inject(Directionality, { optional: true });
     inputText;
     field = input(true, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -38,14 +29,17 @@ class TextField {
     requiredValidator = Validators.required;
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    iconPos = computed(() => {
-        if (this.iconPosition() === 'start') {
-            return this.dir?.value === 'rtl' ? 'right' : 'left';
-        }
-        else {
-            return this.dir?.value === 'rtl' ? 'left' : 'right';
-        }
-    }, ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
+    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
+    isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
+    inputType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    hasStartIcon = computed(() => Boolean(this.icon()) && this.iconPosition() === 'start', ...(ngDevMode ? [{ debugName: "hasStartIcon" }] : /* istanbul ignore next */ []));
+    hasEndIcon = computed(() => this.isPasswordField() ||
+        (Boolean(this.icon()) && this.iconPosition() === 'end'), ...(ngDevMode ? [{ debugName: "hasEndIcon" }] : /* istanbul ignore next */ []));
+    hasHint = computed(() => Boolean(this.hint()), ...(ngDevMode ? [{ debugName: "hasHint" }] : /* istanbul ignore next */ []));
+    hasEndActions = computed(() => this.hasEndIcon() || this.hasHint(), ...(ngDevMode ? [{ debugName: "hasEndActions" }] : /* istanbul ignore next */ []));
+    hasTwoEndActions = computed(() => this.hasEndIcon() && this.hasHint(), ...(ngDevMode ? [{ debugName: "hasTwoEndActions" }] : /* istanbul ignore next */ []));
+    passwordToggleIcon = computed(() => this.passwordVisible() ? 'general.eye-off' : 'general.eye', ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []));
+    passwordToggleLabel = computed(() => this.passwordVisible() ? 'Hide password' : 'Show password', ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : /* istanbul ignore next */ []));
     alphaNum = /[\u0621-\u064A\u0660-\u0669a-z0-9\s]/i;
     onTouched = () => { };
     onModelChange = () => { };
@@ -96,6 +90,12 @@ class TextField {
         this.onModelChange(value);
         this.onTouched();
     }
+    togglePasswordVisibility() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.passwordVisible.update((visible) => !visible);
+    }
     ngOnChanges(changes) {
         if (changes['pInputs']) {
             this.applyInputsToInputText();
@@ -114,7 +114,7 @@ class TextField {
         this.disabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n@if (!hint()) {\r\n  <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n} @else {\r\n  <p-inputgroup>\r\n    <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n    <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n      <mt-icon icon=\"general.help-circle\" />\r\n    </p-inputgroup-addon>\r\n  </p-inputgroup>\r\n}\r\n\r\n<ng-template #inputTemp>\r\n  @if (!icon()) {\r\n    <input\r\n      #inputText=\"\"\r\n      pInputText=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [type]=\"type()\"\r\n      [id]=\"ngControl?.name || label()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n      (blur)=\"onTouched()\"\r\n      placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n      class=\"w-full\"\r\n    />\r\n  } @else {\r\n    <p-iconfield iconPosition=\"iconPos()\">\r\n      <p-inputicon>\r\n        <mt-icon [icon]=\"icon()\" />\r\n      </p-inputicon>\r\n      <input\r\n        #inputText=\"\"\r\n        pInputText=\"\"\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [type]=\"type()\"\r\n        [id]=\"ngControl?.name || label()\"\r\n        [invalid]=\"isInvalid(ngControl?.control)\"\r\n        (blur)=\"onTouched()\"\r\n        placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n        class=\"w-full\"\r\n      />\r\n    </p-iconfield>\r\n  }\r\n</ng-template>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n\r\n<div\r\n  class=\"mt-text-field__input\"\r\n  [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n  [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n  [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n  @if (icon() && iconPosition() === \"start\") {\r\n    <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n      <mt-icon [icon]=\"icon()\" />\r\n    </span>\r\n  }\r\n\r\n  <input\r\n    #inputText=\"\"\r\n    pInputText=\"\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [type]=\"inputType()\"\r\n    [id]=\"ngControl?.name || label()\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    (blur)=\"onTouched()\"\r\n    placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n    class=\"w-full\"\r\n  />\r\n\r\n  @if (isPasswordField()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"mt-text-field__action\"\r\n      [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [attr.aria-label]=\"passwordToggleLabel()\"\r\n      [mtTooltip]=\"passwordToggleLabel()\"\r\n      tooltipPosition=\"top\"\r\n      (click)=\"togglePasswordVisibility()\"\r\n    >\r\n      <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n    </button>\r\n  } @else if (icon() && iconPosition() === \"end\") {\r\n    <span\r\n      class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n      [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n    >\r\n      <mt-icon [icon]=\"icon()\" />\r\n    </span>\r\n  }\r\n\r\n  @if (hint()) {\r\n    <span\r\n      class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n      [mtTooltip]=\"hint()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <mt-icon icon=\"general.info-circle\" />\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: 
                 // INFO: if we need this filter uncomment the import, and next line and add this to the template input
                 //[pKeyFilter]="
                 //   pKeyFilter()
@@ -124,15 +124,13 @@ class TextField {
                 //     : null
                 // "
                 // KeyFilterModule,
-                Tooltip, selector: "[mtTooltip]" }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextField, decorators: [{
             type: Component,
             args: [{ selector: 'mt-text-field', standalone: true, imports: [
                         FormsModule,
                         InputTextModule,
-                        InputIcon,
-                        IconField,
                         // INFO: if we need this filter uncomment the import, and next line and add this to the template input
                         //[pKeyFilter]="
                         //   pKeyFilter()
@@ -143,14 +141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         // "
                         // KeyFilterModule,
                         Tooltip,
-                        InputGroupModule,
-                        InputGroupAddonModule,
                         FieldValidation,
                         Icon,
-                        NgTemplateOutlet,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'grid gap-1',
-                    }, template: "@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n@if (!hint()) {\r\n  <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n} @else {\r\n  <p-inputgroup>\r\n    <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n    <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n      <mt-icon icon=\"general.help-circle\" />\r\n    </p-inputgroup-addon>\r\n  </p-inputgroup>\r\n}\r\n\r\n<ng-template #inputTemp>\r\n  @if (!icon()) {\r\n    <input\r\n      #inputText=\"\"\r\n      pInputText=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [type]=\"type()\"\r\n      [id]=\"ngControl?.name || label()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n      (blur)=\"onTouched()\"\r\n      placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n      class=\"w-full\"\r\n    />\r\n  } @else {\r\n    <p-iconfield iconPosition=\"iconPos()\">\r\n      <p-inputicon>\r\n        <mt-icon [icon]=\"icon()\" />\r\n      </p-inputicon>\r\n      <input\r\n        #inputText=\"\"\r\n        pInputText=\"\"\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [type]=\"type()\"\r\n        [id]=\"ngControl?.name || label()\"\r\n        [invalid]=\"isInvalid(ngControl?.control)\"\r\n        (blur)=\"onTouched()\"\r\n        placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n        class=\"w-full\"\r\n      />\r\n    </p-iconfield>\r\n  }\r\n</ng-template>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
+                    }, template: "@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n\r\n<div\r\n  class=\"mt-text-field__input\"\r\n  [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n  [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n  [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n  @if (icon() && iconPosition() === \"start\") {\r\n    <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n      <mt-icon [icon]=\"icon()\" />\r\n    </span>\r\n  }\r\n\r\n  <input\r\n    #inputText=\"\"\r\n    pInputText=\"\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [type]=\"inputType()\"\r\n    [id]=\"ngControl?.name || label()\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    (blur)=\"onTouched()\"\r\n    placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n    class=\"w-full\"\r\n  />\r\n\r\n  @if (isPasswordField()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"mt-text-field__action\"\r\n      [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [attr.aria-label]=\"passwordToggleLabel()\"\r\n      [mtTooltip]=\"passwordToggleLabel()\"\r\n      tooltipPosition=\"top\"\r\n      (click)=\"togglePasswordVisibility()\"\r\n    >\r\n      <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n    </button>\r\n  } @else if (icon() && iconPosition() === \"end\") {\r\n    <span\r\n      class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n      [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n    >\r\n      <mt-icon [icon]=\"icon()\" />\r\n    </span>\r\n  }\r\n\r\n  @if (hint()) {\r\n    <span\r\n      class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n      [mtTooltip]=\"hint()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <mt-icon icon=\"general.info-circle\" />\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputText: [{
                 type: ViewChild,
                 args: ['inputText', { static: true }]

package/fesm2022/masterteam-components-text-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-text-field.mjs","sources":["../../../../packages/masterteam/components/text-field/text-field.ts","../../../../packages/masterteam/components/text-field/text-field.html","../../../../packages/masterteam/components/text-field/masterteam-components-text-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  HostBinding,\r\n  SimpleChanges,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  OnInit,\r\n  OnChanges,\r\n  inject,\r\n  ChangeDetectionStrategy,\r\n  effect,\r\n  computed,\r\n} from '@angular/core';\r\nimport { InputTextModule } from 'primeng/inputtext';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\n// import { KeyFilterModule, KeyFilterPattern } from 'primeng/keyfilter';\r\nimport { InputGroupModule } from 'primeng/inputgroup';\r\nimport { InputGroupAddonModule } from 'primeng/inputgroupaddon';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { InputIcon } from 'primeng/inputicon';\r\nimport { IconField } from 'primeng/iconfield';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\n\r\n// TODO: text stuck when reset\r\n@Component({\r\n  selector: 'mt-text-field',\r\n  standalone: true,\r\n  imports: [\r\n    FormsModule,\r\n    InputTextModule,\r\n    InputIcon,\r\n    IconField,\r\n    // INFO: if we need this filter uncomment the import, and next line and add this to the template input\r\n    //[pKeyFilter]=\"\r\n    //   pKeyFilter()\r\n    //     ? pKeyFilter() === 'alphanum'\r\n    //       ? alphaNum\r\n    //       : pKeyFilter()\r\n    //     : null\r\n    // \"\r\n    // KeyFilterModule,\r\n    Tooltip,\r\n    InputGroupModule,\r\n    InputGroupAddonModule,\r\n    FieldValidation,\r\n    Icon,\r\n    NgTemplateOutlet,\r\n  ],\r\n  templateUrl: './text-field.html',\r\n  styleUrls: ['./text-field.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'grid gap-1',\r\n  },\r\n})\r\nexport class TextField implements ControlValueAccessor, OnInit, OnChanges {\r\n  private dir = inject(Directionality, { optional: true });\r\n\r\n  @ViewChild('inputText', { static: true })\r\n  inputText: HTMLInputElement;\r\n\r\n  readonly field = input<boolean>(true);\r\n  readonly hint = input<string>();\r\n  readonly label = input<string>();\r\n  readonly placeholder = input<string>();\r\n  readonly class = input<string>('');\r\n  readonly type = input<string>('text');\r\n  readonly readonly = input<boolean>(false);\r\n  readonly pInputs = input<Partial<HTMLInputElement>>();\r\n  // readonly pKeyFilter = input<KeyFilterPattern | RegExp>();\r\n  readonly required = input<boolean>(false);\r\n  readonly icon = input<MTIcon>();\r\n  readonly iconPosition = input<'start' | 'end'>('start');\r\n  // readonly externalControl = input<any>(null);\r\n\r\n  @HostBinding('class') styleClass: string;\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<string | null>(null);\r\n  disabled = signal<boolean>(false);\r\n  iconPos = computed(() => {\r\n    if (this.iconPosition() === 'start') {\r\n      return this.dir?.value === 'rtl' ? 'right' : 'left';\r\n    } else {\r\n      return this.dir?.value === 'rtl' ? 'left' : 'right';\r\n    }\r\n  });\r\n\r\n  alphaNum: RegExp = /[\\u0621-\\u064A\\u0660-\\u0669a-z0-9\\s]/i;\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: any) => void = () => {};\r\n\r\n  public ngControl: NgControl | null = null;\r\n\r\n  isInvalid = isInvalid;\r\n\r\n  constructor() {\r\n    try {\r\n      // Try to inject NgControl if available\r\n      this.ngControl = inject(NgControl, { self: true, optional: true });\r\n      if (this.ngControl) {\r\n        this.ngControl.valueAccessor = this;\r\n      }\r\n    } catch (_e) {\r\n      // If injection fails, ngControl will remain null\r\n      this.ngControl = null;\r\n    }\r\n    effect(() => {\r\n      if (this.ngControl?.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity();\r\n      }\r\n    });\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.styleClass = this.class();\r\n    // if (this.externalControl()) {\r\n    //   debugger\r\n    //   this.ngControl = this.externalControl();\r\n    // }\r\n\r\n    if (this.pInputs()) {\r\n      this.applyInputsToInputText();\r\n    }\r\n  }\r\n\r\n  applyInputsToInputText() {\r\n    Object.assign(this.inputText, this.pInputs());\r\n  }\r\n\r\n  onValueChange(value: any) {\r\n    this.value.set(value);\r\n\r\n    const control = this.ngControl?.control;\r\n    if (control) {\r\n      control.setValue(value);\r\n      control.markAsDirty();\r\n      control.markAsTouched();\r\n      control.updateValueAndValidity({ emitEvent: false });\r\n      return;\r\n    }\r\n\r\n    this.onModelChange(value);\r\n    this.onTouched();\r\n  }\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes['pInputs']) {\r\n      this.applyInputsToInputText();\r\n    }\r\n  }\r\n\r\n  writeValue(value: string) {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: any) {\r\n    this.onModelChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any) {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean) {\r\n    this.disabled.set(disabled);\r\n  }\r\n}\r\n","@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n@if (!hint()) {\r\n  <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n} @else {\r\n  <p-inputgroup>\r\n    <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n    <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n      <mt-icon icon=\"general.help-circle\" />\r\n    </p-inputgroup-addon>\r\n  </p-inputgroup>\r\n}\r\n\r\n<ng-template #inputTemp>\r\n  @if (!icon()) {\r\n    <input\r\n      #inputText=\"\"\r\n      pInputText=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [type]=\"type()\"\r\n      [id]=\"ngControl?.name || label()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n      (blur)=\"onTouched()\"\r\n      placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n      class=\"w-full\"\r\n    />\r\n  } @else {\r\n    <p-iconfield iconPosition=\"iconPos()\">\r\n      <p-inputicon>\r\n        <mt-icon [icon]=\"icon()\" />\r\n      </p-inputicon>\r\n      <input\r\n        #inputText=\"\"\r\n        pInputText=\"\"\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [type]=\"type()\"\r\n        [id]=\"ngControl?.name || label()\"\r\n        [invalid]=\"isInvalid(ngControl?.control)\"\r\n        (blur)=\"onTouched()\"\r\n        placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n        class=\"w-full\"\r\n      />\r\n    </p-iconfield>\r\n  }\r\n</ng-template>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-text-field.mjs","sources":["../../../../packages/masterteam/components/text-field/text-field.ts","../../../../packages/masterteam/components/text-field/text-field.html","../../../../packages/masterteam/components/text-field/masterteam-components-text-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  HostBinding,\r\n  SimpleChanges,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  OnInit,\r\n  OnChanges,\r\n  inject,\r\n  ChangeDetectionStrategy,\r\n  effect,\r\n  computed,\r\n} from '@angular/core';\r\nimport { InputTextModule } from 'primeng/inputtext';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\n// import { KeyFilterModule, KeyFilterPattern } from 'primeng/keyfilter';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\n\r\n// TODO: text stuck when reset\r\n@Component({\r\n  selector: 'mt-text-field',\r\n  standalone: true,\r\n  imports: [\r\n    FormsModule,\r\n    InputTextModule,\r\n    // INFO: if we need this filter uncomment the import, and next line and add this to the template input\r\n    //[pKeyFilter]=\"\r\n    //   pKeyFilter()\r\n    //     ? pKeyFilter() === 'alphanum'\r\n    //       ? alphaNum\r\n    //       : pKeyFilter()\r\n    //     : null\r\n    // \"\r\n    // KeyFilterModule,\r\n    Tooltip,\r\n    FieldValidation,\r\n    Icon,\r\n  ],\r\n  templateUrl: './text-field.html',\r\n  styleUrls: ['./text-field.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'grid gap-1',\r\n  },\r\n})\r\nexport class TextField implements ControlValueAccessor, OnInit, OnChanges {\r\n  @ViewChild('inputText', { static: true })\r\n  inputText: HTMLInputElement;\r\n\r\n  readonly field = input<boolean>(true);\r\n  readonly hint = input<string>();\r\n  readonly label = input<string>();\r\n  readonly placeholder = input<string>();\r\n  readonly class = input<string>('');\r\n  readonly type = input<string>('text');\r\n  readonly readonly = input<boolean>(false);\r\n  readonly pInputs = input<Partial<HTMLInputElement>>();\r\n  // readonly pKeyFilter = input<KeyFilterPattern | RegExp>();\r\n  readonly required = input<boolean>(false);\r\n  readonly icon = input<MTIcon>();\r\n  readonly iconPosition = input<'start' | 'end'>('start');\r\n  // readonly externalControl = input<any>(null);\r\n\r\n  @HostBinding('class') styleClass: string;\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<string | null>(null);\r\n  disabled = signal<boolean>(false);\r\n  passwordVisible = signal<boolean>(false);\r\n  isPasswordField = computed(() => this.type() === 'password');\r\n  inputType = computed(() =>\r\n    this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(),\r\n  );\r\n  hasStartIcon = computed(\r\n    () => Boolean(this.icon()) && this.iconPosition() === 'start',\r\n  );\r\n  hasEndIcon = computed(\r\n    () =>\r\n      this.isPasswordField() ||\r\n      (Boolean(this.icon()) && this.iconPosition() === 'end'),\r\n  );\r\n  hasHint = computed(() => Boolean(this.hint()));\r\n  hasEndActions = computed(() => this.hasEndIcon() || this.hasHint());\r\n  hasTwoEndActions = computed(() => this.hasEndIcon() && this.hasHint());\r\n  passwordToggleIcon = computed<MTIcon>(() =>\r\n    this.passwordVisible() ? 'general.eye-off' : 'general.eye',\r\n  );\r\n  passwordToggleLabel = computed(() =>\r\n    this.passwordVisible() ? 'Hide password' : 'Show password',\r\n  );\r\n\r\n  alphaNum: RegExp = /[\\u0621-\\u064A\\u0660-\\u0669a-z0-9\\s]/i;\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: any) => void = () => {};\r\n\r\n  public ngControl: NgControl | null = null;\r\n\r\n  isInvalid = isInvalid;\r\n\r\n  constructor() {\r\n    try {\r\n      // Try to inject NgControl if available\r\n      this.ngControl = inject(NgControl, { self: true, optional: true });\r\n      if (this.ngControl) {\r\n        this.ngControl.valueAccessor = this;\r\n      }\r\n    } catch (_e) {\r\n      // If injection fails, ngControl will remain null\r\n      this.ngControl = null;\r\n    }\r\n    effect(() => {\r\n      if (this.ngControl?.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity();\r\n      }\r\n    });\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.styleClass = this.class();\r\n    // if (this.externalControl()) {\r\n    //   debugger\r\n    //   this.ngControl = this.externalControl();\r\n    // }\r\n\r\n    if (this.pInputs()) {\r\n      this.applyInputsToInputText();\r\n    }\r\n  }\r\n\r\n  applyInputsToInputText() {\r\n    Object.assign(this.inputText, this.pInputs());\r\n  }\r\n\r\n  onValueChange(value: any) {\r\n    this.value.set(value);\r\n\r\n    const control = this.ngControl?.control;\r\n    if (control) {\r\n      control.setValue(value);\r\n      control.markAsDirty();\r\n      control.markAsTouched();\r\n      control.updateValueAndValidity({ emitEvent: false });\r\n      return;\r\n    }\r\n\r\n    this.onModelChange(value);\r\n    this.onTouched();\r\n  }\r\n\r\n  togglePasswordVisibility() {\r\n    if (this.disabled() || this.readonly()) {\r\n      return;\r\n    }\r\n\r\n    this.passwordVisible.update((visible) => !visible);\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes['pInputs']) {\r\n      this.applyInputsToInputText();\r\n    }\r\n  }\r\n\r\n  writeValue(value: string) {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: any) {\r\n    this.onModelChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any) {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean) {\r\n    this.disabled.set(disabled);\r\n  }\r\n}\r\n","@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n\r\n<div\r\n  class=\"mt-text-field__input\"\r\n  [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n  [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n  [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n  @if (icon() && iconPosition() === \"start\") {\r\n    <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n      <mt-icon [icon]=\"icon()\" />\r\n    </span>\r\n  }\r\n\r\n  <input\r\n    #inputText=\"\"\r\n    pInputText=\"\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [type]=\"inputType()\"\r\n    [id]=\"ngControl?.name || label()\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    (blur)=\"onTouched()\"\r\n    placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n    class=\"w-full\"\r\n  />\r\n\r\n  @if (isPasswordField()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"mt-text-field__action\"\r\n      [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [attr.aria-label]=\"passwordToggleLabel()\"\r\n      [mtTooltip]=\"passwordToggleLabel()\"\r\n      tooltipPosition=\"top\"\r\n      (click)=\"togglePasswordVisibility()\"\r\n    >\r\n      <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n    </button>\r\n  } @else if (icon() && iconPosition() === \"end\") {\r\n    <span\r\n      class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n      [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n    >\r\n      <mt-icon [icon]=\"icon()\" />\r\n    </span>\r\n  }\r\n\r\n  @if (hint()) {\r\n    <span\r\n      class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n      [mtTooltip]=\"hint()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <mt-icon icon=\"general.info-circle\" />\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA;MA2Ba,SAAS,CAAA;AAEpB,IAAA,SAAS;AAEA,IAAA,KAAK,GAAG,KAAK,CAAU,IAAI,4EAAC;IAC5B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IACtB,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IACvB,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAC7B,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AACzB,IAAA,IAAI,GAAG,KAAK,CAAS,MAAM,2EAAC;AAC5B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;IAChC,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA6B;;AAE5C,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;IAChC,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AACtB,IAAA,YAAY,GAAG,KAAK,CAAkB,OAAO,mFAAC;;AAGjC,IAAA,UAAU;AAEhC,IAAA,iBAAiB,GAAG,UAAU,CAAC,QAAQ;AACvC,IAAA,KAAK,GAAG,MAAM,CAAgB,IAAI,4EAAC;AACnC,IAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,+EAAC;AACjC,IAAA,eAAe,GAAG,MAAM,CAAU,KAAK,sFAAC;AACxC,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,KAAK,UAAU,sFAAC;IAC5D,SAAS,GAAG,QAAQ,CAAC,MACnB,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACxE;IACD,YAAY,GAAG,QAAQ,CACrB,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,OAAO,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC9D;IACD,UAAU,GAAG,QAAQ,CACnB,MACE,IAAI,CAAC,eAAe,EAAE;AACtB,SAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,KAAK,CAAC,iFAC1D;AACD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,8EAAC;AAC9C,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,oFAAC;AACnE,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,uFAAC;AACtE,IAAA,kBAAkB,GAAG,QAAQ,CAAS,MACpC,IAAI,CAAC,eAAe,EAAE,GAAG,iBAAiB,GAAG,aAAa,yFAC3D;AACD,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAC7B,IAAI,CAAC,eAAe,EAAE,GAAG,eAAe,GAAG,eAAe,0FAC3D;IAED,QAAQ,GAAW,uCAAuC;AAE1D,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAChC,IAAA,aAAa,GAAyB,MAAK,EAAE,CAAC;IAEvC,SAAS,GAAqB,IAAI;IAEzC,SAAS,GAAG,SAAS;AAErB,IAAA,WAAA,GAAA;AACE,QAAA,IAAI;;AAEF,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAClE,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;YACrC;QACF;QAAE,OAAO,EAAE,EAAE;;AAEX,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACvB;QACA,MAAM,CAAC,MAAK;YACV,IAAI,IAAI,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;gBAC9C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,sBAAsB,EAAE;YACjD;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;;;;;AAM9B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAClB,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;IAEA,sBAAsB,GAAA;AACpB,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IAC/C;AAEA,IAAA,aAAa,CAAC,KAAU,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AAErB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO;QACvC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;YACvB,OAAO,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,aAAa,EAAE;YACvB,OAAO,CAAC,sBAAsB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YACpD;QACF;AAEA,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE;IAClB;IAEA,wBAAwB,GAAA;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC;QACF;AAEA,QAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC;IACpD;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;YACtB,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;AAEA,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;IACzB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC7B;uGAtIW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtDtB,6nEAoEA,EAAA,MAAA,EAAA,CAAA,q0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDpCI,WAAW,8mBACX,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;;;;;;;;;gBAUf,OAAO,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,eAAe,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,IAAI,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FASK,SAAS,EAAA,UAAA,EAAA,CAAA;kBA1BrB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP;wBACP,WAAW;wBACX,eAAe;;;;;;;;;;wBAUf,OAAO;wBACP,eAAe;wBACf,IAAI;qBACL,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,YAAY;AACpB,qBAAA,EAAA,QAAA,EAAA,6nEAAA,EAAA,MAAA,EAAA,CAAA,q0BAAA,CAAA,EAAA;;sBAGA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAiBvC,WAAW;uBAAC,OAAO;;;AExEtB;;AAEG;;;;"}

package/fesm2022/masterteam-components-toast.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, inject, Injectable } from '@angular/core';
 import * as i1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
+import { TranslocoService } from '@jsverse/transloco';
 import { MessageService } from 'primeng/api';
 
 class Toast {
@@ -17,7 +18,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class ToastService {
     messageService = inject(MessageService);
-    // translateService = inject(TranslateService);
+    translocoService = inject(TranslocoService);
     add(message) {
         this.messageService.add(message);
     }
@@ -27,34 +28,38 @@ class ToastService {
     clear(key) {
         this.messageService.clear(key);
     }
-    success(detail = '', 
-    // summary: string = this.translateService.instant('success')
-    summary = 'Success') {
-        this.messageService.add({ severity: 'success', summary, detail });
+    success(detail = '', summary) {
+        this.messageService.add({
+            severity: 'success',
+            summary: summary ?? this.translocoService.translate('components.toast.success'),
+            detail,
+        });
     }
-    warn(detail = '', 
-    // summary: string = this.translateService.instant('error')
-    summary = 'Warning') {
-        this.messageService.add({ severity: 'warn', summary, detail });
+    warn(detail = '', summary) {
+        this.messageService.add({
+            severity: 'warn',
+            summary: summary ?? this.translocoService.translate('components.toast.warning'),
+            detail,
+        });
     }
-    error(detail = '', 
-    // summary: string = this.translateService.instant('error')
-    summary = 'Error') {
-        this.messageService.add({ severity: 'error', summary, detail });
+    error(detail = '', summary) {
+        this.messageService.add({
+            severity: 'error',
+            summary: summary ?? this.translocoService.translate('components.toast.error'),
+            detail,
+        });
     }
-    info(detail = '', 
-    // summary: string = this.translateService.instant('info')
-    summary = 'Info') {
-        this.messageService.add({ severity: 'info', summary, detail });
+    info(detail = '', summary) {
+        this.messageService.add({
+            severity: 'info',
+            summary: summary ?? this.translocoService.translate('components.toast.info'),
+            detail,
+        });
     }
-    secondary(detail = '', 
-    // summary: string = this.translateService.instant('info')
-    summary = '') {
+    secondary(detail = '', summary = '') {
         this.messageService.add({ severity: 'secondary', summary, detail });
     }
-    contrast(detail = '', 
-    // summary: string = this.translateService.instant('info')
-    summary = '') {
+    contrast(detail = '', summary = '') {
         this.messageService.add({ severity: 'contrast', summary, detail });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });