@masterteam/components 0.0.141 → 0.0.143

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

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-tooltip.mjs","sources":["../../../../packages/masterteam/components/tooltip/tooltip.ts","../../../../packages/masterteam/components/tooltip/truncate-tooltip.ts","../../../../packages/masterteam/components/tooltip/masterteam-components-tooltip.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\nimport { Tooltip as PrimeTooltip } from 'primeng/tooltip';\r\n\r\n@Directive({\r\n  selector: '[mtTooltip]',\r\n  standalone: true,\r\n  hostDirectives: [\r\n    {\r\n      directive: PrimeTooltip,\r\n      inputs: [\r\n        'pTooltip: mtTooltip',\r\n        'tooltipPosition',\r\n        'tooltipEvent',\r\n        'appendTo',\r\n        'tooltipStyleClass',\r\n        'escape',\r\n        'showDelay',\r\n        'hideDelay',\r\n        'life',\r\n        'positionTop',\r\n        'positionLeft',\r\n        'autoHide',\r\n        'fitContent',\r\n        'hideOnEscape',\r\n        'tooltipDisabled',\r\n      ],\r\n    },\r\n  ],\r\n})\r\nexport class Tooltip {}\r\n","import {\r\n  AfterViewInit,\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  NgZone,\r\n  inject,\r\n} from '@angular/core';\r\nimport { Tooltip as PrimeTooltip } from 'primeng/tooltip';\r\n\r\n@Directive({\r\n  selector: '[mtTruncateTooltip]',\r\n  host: {\r\n    '(mouseenter)': 'syncTooltipState()',\r\n    '(focusin)': 'syncTooltipState()',\r\n  },\r\n  hostDirectives: [\r\n    {\r\n      directive: PrimeTooltip,\r\n      inputs: [\r\n        'tooltipPosition',\r\n        'tooltipEvent',\r\n        'appendTo',\r\n        'tooltipStyleClass',\r\n        'escape',\r\n        'showDelay',\r\n        'hideDelay',\r\n        'life',\r\n        'positionTop',\r\n        'positionLeft',\r\n        'autoHide',\r\n        'fitContent',\r\n        'hideOnEscape',\r\n      ],\r\n    },\r\n  ],\r\n})\r\nexport class TruncateTooltip implements AfterViewInit {\r\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  private readonly zone = inject(NgZone);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n  private readonly tooltip = inject(PrimeTooltip);\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n  private mutationObserver?: MutationObserver;\r\n  private syncTimeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n  ngAfterViewInit(): void {\n    this.zone.runOutsideAngular(() => {\n      const element = this.elementRef.nativeElement;\n\n      this.tooltip.setOption({ showOnEllipsis: true });\n\n      if (typeof ResizeObserver !== 'undefined') {\n        this.resizeObserver = new ResizeObserver(() => this.queueSync());\n        this.resizeObserver.observe(element);\n      }\n\r\n      if (typeof MutationObserver !== 'undefined') {\r\n        this.mutationObserver = new MutationObserver(() => this.queueSync());\r\n        this.mutationObserver.observe(element, {\r\n          childList: true,\r\n          characterData: true,\r\n          subtree: true,\r\n          attributes: true,\r\n          attributeFilter: ['class', 'style'],\r\n        });\r\n      }\r\n\r\n      this.syncTooltip();\n    });\n\r\n    this.destroyRef.onDestroy(() => {\r\n      this.resizeObserver?.disconnect();\r\n      this.mutationObserver?.disconnect();\r\n\r\n      if (this.syncTimeout !== null) {\r\n        clearTimeout(this.syncTimeout);\r\n      }\r\n    });\r\n  }\r\n\r\n  syncTooltipState(): void {\n    this.syncTooltip();\n  }\n\r\n  private queueSync(): void {\r\n    if (this.syncTimeout !== null) {\r\n      return;\r\n    }\r\n\r\n    this.syncTimeout = setTimeout(() => {\r\n      this.syncTimeout = null;\r\n      this.syncTooltip();\r\n    });\r\n  }\r\n\r\n  private syncTooltip(): void {\n    const element = this.elementRef.nativeElement;\n    const text = element.textContent?.replace(/\\s+/g, ' ').trim() ?? '';\n    const isTruncated =\n      element.scrollWidth > element.clientWidth ||\n      element.scrollHeight > element.clientHeight;\n\n    this.tooltip.setOption({ tooltipLabel: text || null });\n\n    if (!this.tooltip.active) {\n      return;\n    }\n\n    if (!text || !isTruncated) {\n      this.tooltip.hide();\n      return;\n    }\n\n    if (!this.tooltip.container) {\n      this.tooltip.show();\n      return;\n    }\n\n    this.tooltip.updateText();\n    this.tooltip.align();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["PrimeTooltip"],"mappings":"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"}
+{"version":3,"file":"masterteam-components-tooltip.mjs","sources":["../../../../packages/masterteam/components/tooltip/tooltip.ts","../../../../packages/masterteam/components/tooltip/truncate-tooltip.ts","../../../../packages/masterteam/components/tooltip/masterteam-components-tooltip.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\nimport { Tooltip as PrimeTooltip } from 'primeng/tooltip';\r\n\r\n@Directive({\r\n  selector: '[mtTooltip]',\r\n  standalone: true,\r\n  hostDirectives: [\r\n    {\r\n      directive: PrimeTooltip,\r\n      inputs: [\r\n        'pTooltip: mtTooltip',\r\n        'tooltipPosition',\r\n        'tooltipEvent',\r\n        'appendTo',\r\n        'tooltipStyleClass',\r\n        'escape',\r\n        'showDelay',\r\n        'hideDelay',\r\n        'life',\r\n        'positionTop',\r\n        'positionLeft',\r\n        'autoHide',\r\n        'fitContent',\r\n        'hideOnEscape',\r\n        'tooltipDisabled',\r\n      ],\r\n    },\r\n  ],\r\n})\r\nexport class Tooltip {}\r\n","import {\r\n  AfterViewInit,\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  NgZone,\r\n  inject,\r\n} from '@angular/core';\r\nimport { Tooltip as PrimeTooltip } from 'primeng/tooltip';\r\n\r\n@Directive({\r\n  selector: '[mtTruncateTooltip]',\r\n  host: {\r\n    '(mouseenter)': 'syncTooltipState()',\r\n    '(focusin)': 'syncTooltipState()',\r\n  },\r\n  hostDirectives: [\r\n    {\r\n      directive: PrimeTooltip,\r\n      inputs: [\r\n        'tooltipPosition',\r\n        'tooltipEvent',\r\n        'appendTo',\r\n        'tooltipStyleClass',\r\n        'escape',\r\n        'showDelay',\r\n        'hideDelay',\r\n        'life',\r\n        'positionTop',\r\n        'positionLeft',\r\n        'autoHide',\r\n        'fitContent',\r\n        'hideOnEscape',\r\n      ],\r\n    },\r\n  ],\r\n})\r\nexport class TruncateTooltip implements AfterViewInit {\r\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  private readonly zone = inject(NgZone);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n  private readonly tooltip = inject(PrimeTooltip);\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n  private mutationObserver?: MutationObserver;\r\n  private syncTimeout: ReturnType<typeof setTimeout> | null = null;\r\n\r\n  ngAfterViewInit(): void {\r\n    this.zone.runOutsideAngular(() => {\r\n      const element = this.elementRef.nativeElement;\r\n\r\n      this.tooltip.setOption({ showOnEllipsis: true });\r\n\r\n      if (typeof ResizeObserver !== 'undefined') {\r\n        this.resizeObserver = new ResizeObserver(() => this.queueSync());\r\n        this.resizeObserver.observe(element);\r\n      }\r\n\r\n      if (typeof MutationObserver !== 'undefined') {\r\n        this.mutationObserver = new MutationObserver(() => this.queueSync());\r\n        this.mutationObserver.observe(element, {\r\n          childList: true,\r\n          characterData: true,\r\n          subtree: true,\r\n          attributes: true,\r\n          attributeFilter: ['class', 'style'],\r\n        });\r\n      }\r\n\r\n      this.syncTooltip();\r\n    });\r\n\r\n    this.destroyRef.onDestroy(() => {\r\n      this.resizeObserver?.disconnect();\r\n      this.mutationObserver?.disconnect();\r\n\r\n      if (this.syncTimeout !== null) {\r\n        clearTimeout(this.syncTimeout);\r\n      }\r\n    });\r\n  }\r\n\r\n  syncTooltipState(): void {\r\n    this.syncTooltip();\r\n  }\r\n\r\n  private queueSync(): void {\r\n    if (this.syncTimeout !== null) {\r\n      return;\r\n    }\r\n\r\n    this.syncTimeout = setTimeout(() => {\r\n      this.syncTimeout = null;\r\n      this.syncTooltip();\r\n    });\r\n  }\r\n\r\n  private syncTooltip(): void {\r\n    const element = this.elementRef.nativeElement;\r\n    const text = element.textContent?.replace(/\\s+/g, ' ').trim() ?? '';\r\n    const isTruncated =\r\n      element.scrollWidth > element.clientWidth ||\r\n      element.scrollHeight > element.clientHeight;\r\n\r\n    this.tooltip.setOption({ tooltipLabel: text || null });\r\n\r\n    if (!this.tooltip.active) {\r\n      return;\r\n    }\r\n\r\n    if (!text || !isTruncated) {\r\n      this.tooltip.hide();\r\n      return;\r\n    }\r\n\r\n    if (!this.tooltip.container) {\r\n      this.tooltip.show();\r\n      return;\r\n    }\r\n\r\n    this.tooltip.updateText();\r\n    this.tooltip.align();\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["PrimeTooltip"],"mappings":"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"}

package/fesm2022/masterteam-components-topbar.mjs

@@ -16,11 +16,11 @@ class Topbar {
     titleClass = input(...(ngDevMode ? [undefined, { debugName: "titleClass" }] : /* istanbul ignore next */ []));
     subTitleClass = input(...(ngDevMode ? [undefined, { debugName: "subTitleClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Topbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Topbar, isStandalone: true, selector: "mt-topbar", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", 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 }, textColor: { classPropertyName: "textColor", publicName: "textColor", 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 }, showBranding: { classPropertyName: "showBranding", publicName: "showBranding", isSignal: true, isRequired: false, transformFunction: null }, logoClass: { classPropertyName: "logoClass", publicName: "logoClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, subTitleClass: { classPropertyName: "subTitleClass", publicName: "subTitleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\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]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-4 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          alt=\"Logo\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-50\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Topbar, isStandalone: true, selector: "mt-topbar", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", 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 }, textColor: { classPropertyName: "textColor", publicName: "textColor", 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 }, showBranding: { classPropertyName: "showBranding", publicName: "showBranding", isSignal: true, isRequired: false, transformFunction: null }, logoClass: { classPropertyName: "logoClass", publicName: "logoClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, subTitleClass: { classPropertyName: "subTitleClass", publicName: "subTitleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\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]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          alt=\"Logo\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Topbar, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-topbar', standalone: true, imports: [RouterLink], template: "<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\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]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-4 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          alt=\"Logo\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-50\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-topbar', standalone: true, imports: [RouterLink], template: "<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\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]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          alt=\"Logo\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", 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 }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], showBranding: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBranding", required: false }] }], logoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoClass", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], subTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitleClass", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-topbar.mjs","sources":["../../../../packages/masterteam/components/topbar/topbar.ts","../../../../packages/masterteam/components/topbar/topbar.html","../../../../packages/masterteam/components/topbar/masterteam-components-topbar.ts"],"sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'mt-topbar',\r\n  standalone: true,\r\n  imports: [RouterLink],\r\n  templateUrl: './topbar.html',\r\n})\r\nexport class Topbar {\r\n  logo = input<string>();\r\n  logoLink = input<string | any[]>();\r\n  bgColor = input<string>('var(--p-primary-color)');\r\n  bgImage = input<string>();\r\n  bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  textColor = input<string>('var(--p-primary-contrast-color)');\r\n  title = input<string>();\r\n  subTitle = input<string>();\r\n  showBranding = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  logoClass = input<string>();\r\n  titleClass = input<string>();\r\n  subTitleClass = input<string>();\r\n}\r\n","<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\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]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-4 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          alt=\"Logo\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-50\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\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-topbar.mjs","sources":["../../../../packages/masterteam/components/topbar/topbar.ts","../../../../packages/masterteam/components/topbar/topbar.html","../../../../packages/masterteam/components/topbar/masterteam-components-topbar.ts"],"sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'mt-topbar',\r\n  standalone: true,\r\n  imports: [RouterLink],\r\n  templateUrl: './topbar.html',\r\n})\r\nexport class Topbar {\r\n  logo = input<string>();\r\n  logoLink = input<string | any[]>();\r\n  bgColor = input<string>('var(--p-primary-color)');\r\n  bgImage = input<string>();\r\n  bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  textColor = input<string>('var(--p-primary-contrast-color)');\r\n  title = input<string>();\r\n  subTitle = input<string>();\r\n  showBranding = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  logoClass = input<string>();\r\n  titleClass = input<string>();\r\n  subTitleClass = input<string>();\r\n}\r\n","<div\r\n  class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\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]=\"bgRepeat()\"\r\n>\r\n  <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n    <div\r\n      class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n      [class.max-w-0]=\"!showBranding()\"\r\n      [class.opacity-0]=\"!showBranding()\"\r\n      [class.max-w-lg]=\"showBranding()\"\r\n      [class.opacity-100]=\"showBranding()\"\r\n    >\r\n      @if (logo()) {\r\n        <img\r\n          [src]=\"logo()\"\r\n          alt=\"Logo\"\r\n          class=\"h-10 shrink-0\"\r\n          [class]=\"logoClass()\"\r\n          [routerLink]=\"logoLink()\"\r\n          [class.cursor-pointer]=\"logoLink()\"\r\n        />\r\n      }\r\n      @if (logo() && (title() || subTitle())) {\r\n        <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n      }\r\n      @if (title() || subTitle()) {\r\n        <div class=\"flex flex-col shrink-0\">\r\n          <h2\r\n            class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n            [class]=\"titleClass()\"\r\n          >\r\n            {{ title() }}\r\n          </h2>\r\n          <span\r\n            class=\"text-sm product-tagline whitespace-nowrap\"\r\n            [class]=\"subTitleClass()\"\r\n            >{{ subTitle() }}</span\r\n          >\r\n        </div>\r\n      }\r\n    </div>\r\n    <ng-content select=\"[start]\"></ng-content>\r\n  </div>\r\n  <div class=\"flex gap-2 items-center\">\r\n    <ng-content select=\"[actions]\"></ng-content>\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.mjs

@@ -281,6 +281,7 @@ const MTPreset = (themeOptions) => {
             togglebutton: {
                 root: {
                     padding: '1px',
+                    borderRadius: '{border.radius.sm}',
                 },
                 colorScheme: {
                     light: {
@@ -297,297 +298,134 @@ const MTPreset = (themeOptions) => {
             },
             button: {
                 root: {
-                    borderRadius: '0.425rem',
+                    borderRadius: '{border.radius.sm}',
                 },
             },
-            selectbutton: {
+            avatar: {
                 root: {
                     borderRadius: '{border.radius.md}',
                 },
             },
-            datatable: {
+            tooltip: {
+                css: () => `
+          .p-tooltip .p-tooltip-text {
+            font-size: 0.75rem;
+            line-height: 1.2;
+          }
+        `,
+            },
+            selectbutton: {
                 root: {
-                    borderColor: '{surface.200}',
-                    transitionDuration: '{transition.duration}',
-                },
-                header: {
-                    background: '{surface.0}',
-                    borderColor: '{surface.200}',
-                    color: '{surface.700}',
-                    borderWidth: '0 0 1px 0',
-                    padding: '1rem 1.25rem',
-                },
-                headerCell: {
-                    background: '{surface.50}',
-                    hoverBackground: '{surface.100}',
-                    selectedBackground: '{surface.100}',
-                    borderColor: '{surface.200}',
-                    color: '{surface.600}',
-                    hoverColor: '{surface.700}',
-                    selectedColor: '{surface.700}',
-                    gap: '0.5rem',
-                    padding: '0.875rem 1rem',
-                },
-                columnTitle: {
-                    fontWeight: '600',
-                },
-                row: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.50}',
-                    selectedBackground: '{surface.100}',
-                    color: '{surface.700}',
-                    hoverColor: '{surface.900}',
-                    selectedColor: '{surface.900}',
-                    stripedBackground: '{surface.50}',
-                },
-                bodyCell: {
-                    borderColor: '{surface.200}',
-                    padding: '0.875rem 1rem',
-                },
-                paginatorBottom: {
-                    borderColor: '{surface.200}',
-                    borderWidth: '1px 0 0 0',
-                },
-                colorScheme: {
-                    light: {
-                        root: {
-                            borderColor: '{surface.200}',
-                        },
-                        header: {
-                            background: '{surface.0}',
-                            borderColor: '{surface.200}',
-                            color: '{surface.700}',
-                        },
-                        headerCell: {
-                            background: '{surface.50}',
-                            hoverBackground: '{surface.100}',
-                            selectedBackground: '{surface.100}',
-                            borderColor: '{surface.200}',
-                            color: '{surface.600}',
-                            hoverColor: '{surface.700}',
-                            selectedColor: '{surface.700}',
-                        },
-                        row: {
-                            background: '{surface.0}',
-                            hoverBackground: '{surface.50}',
-                            selectedBackground: '{surface.100}',
-                            color: '{surface.700}',
-                            hoverColor: '{surface.900}',
-                            selectedColor: '{surface.900}',
-                            stripedBackground: '{surface.50}',
-                        },
-                        bodyCell: {
-                            selectedBorderColor: '{surface.200}',
-                        },
-                        paginatorBottom: {
-                            borderColor: '{surface.200}',
-                        },
-                    },
-                    dark: {
-                        root: {
-                            borderColor: '{surface.700}',
-                        },
-                        header: {
-                            background: '{surface.900}',
-                            borderColor: '{surface.700}',
-                            color: '{surface.100}',
-                        },
-                        headerCell: {
-                            background: '{surface.900}',
-                            hoverBackground: '{surface.800}',
-                            selectedBackground: '{surface.800}',
-                            borderColor: '{surface.700}',
-                            color: '{surface.200}',
-                            hoverColor: '{surface.0}',
-                            selectedColor: '{surface.0}',
-                        },
-                        row: {
-                            background: '{surface.950}',
-                            hoverBackground: '{surface.900}',
-                            selectedBackground: '{surface.800}',
-                            color: '{surface.100}',
-                            hoverColor: '{surface.0}',
-                            selectedColor: '{surface.0}',
-                            stripedBackground: '{surface.900}',
-                        },
-                        bodyCell: {
-                            selectedBorderColor: '{surface.700}',
-                        },
-                        paginatorBottom: {
-                            borderColor: '{surface.700}',
-                        },
-                    },
+                    borderRadius: '{border.radius.md}',
                 },
-                css: () => `
-          .p-datatable,
-          .p-datatable-table-container {
-            font-size: 0.875rem;
-            line-height: 1.25rem;
-            background: var(--p-surface-0);
-          }
-
-          .p-datatable-header {
-            background: var(--p-surface-0);
-          }
-
-          .p-datatable-table thead > tr > th {
-            font-size: 0.75rem;
-            letter-spacing: 0.04em;
-          }
-
-          .dark .p-datatable,
-          .dark .p-datatable-table-container,
-          .dark .p-datatable-header {
-            background: var(--p-surface-950);
-          }
-        `,
             },
             paginator: {
                 root: {
-                    background: '{surface.0}',
-                    borderRadius: '{border.radius.xl}',
-                    color: '{surface.600}',
-                    gap: '0.125rem',
-                    padding: '0.25rem',
+                    borderRadius: '{border.radius.md}',
+                    padding: '0',
                 },
                 navButton: {
-                    background: 'transparent',
-                    borderRadius: '{border.radius.lg}',
-                    color: '{surface.600}',
-                    hoverBackground: '{surface.100}',
-                    hoverColor: '{surface.700}',
-                    selectedBackground: '{surface.100}',
-                    selectedColor: '{surface.800}',
-                    width: '2.5rem',
-                    height: '2.5rem',
-                },
-                currentPageReport: {
-                    color: '{surface.500}',
+                    borderRadius: '{border.radius.sm}',
                 },
                 colorScheme: {
                     light: {
-                        root: {
-                            background: '{surface.0}',
-                            color: '{surface.600}',
-                        },
                         navButton: {
-                            color: '{surface.600}',
-                            hoverBackground: '{surface.100}',
-                            hoverColor: '{surface.700}',
-                            selectedBackground: '{surface.100}',
-                            selectedColor: '{surface.800}',
+                            color: '{surface.500}',
+                            hoverBackground: '{surface.50}',
+                            selectedBackground: '{primary.500}',
+                            selectedColor: '#ffffff',
                             focusRing: {
-                                color: '{surface.100}',
+                                color: '{primary.100}',
                             },
                         },
-                        currentPageReport: {
-                            color: '{surface.500}',
-                        },
                     },
                     dark: {
-                        root: {
-                            background: '{surface.900}',
-                            color: '{surface.200}',
-                        },
                         navButton: {
                             color: '{surface.200}',
-                            hoverBackground: '{surface.800}',
-                            hoverColor: '{surface.0}',
-                            selectedBackground: '{surface.800}',
-                            selectedColor: '{surface.0}',
+                            hoverBackground: 'transparent',
+                            selectedBackground: '{primary.500}',
+                            selectedColor: '#fff',
                             focusRing: {
-                                color: '{surface.700}',
+                                color: '{primary.500}',
                             },
                         },
-                        currentPageReport: {
-                            color: '{surface.400}',
-                        },
                     },
                 },
-                css: () => `
-          .p-paginator {
-            --p-paginator-gap: 0.125rem;
-            --p-paginator-nav-button-width: 2.5rem;
-            --p-paginator-nav-button-height: 2.5rem;
-            width: fit-content;
-            border: 1px solid var(--p-surface-200);
-            background: var(--p-surface-0);
-            box-shadow: 0 1px 2px color-mix(in srgb, var(--p-surface-950) 8%, transparent);
-            overflow: hidden;
-            font-size: 0.875rem;
-            line-height: 1.25rem;
-          }
-
-          .p-paginator .p-paginator-pages {
-            gap: 0.125rem;
-          }
-
-          .p-paginator-pages button,
-          .p-paginator-prev,
-          .p-paginator-next {
-            border-color: var(--p-surface-200);
-          }
-
-          .p-paginator-pages button {
-            border-style: solid;
-            border-width: 0 0 0 1px;
-          }
-
-          .p-paginator-pages button:first-child {
-            border-left: none;
-          }
-
-          .p-paginator-prev {
-            border-right: 1px solid var(--p-surface-200);
-          }
-
-          .p-paginator-next {
-            border-left: 1px solid var(--p-surface-200);
-          }
-
-          .p-paginator .p-select {
-            border: 0;
-            background: transparent;
-            min-width: auto;
-          }
-
-          .p-paginator .p-select .p-select-label {
-            padding: 0;
-          }
-
-          .p-paginator .p-select-label,
-          .p-paginator .p-select-dropdown,
-          .p-paginator .p-paginator-current,
-          .p-paginator .p-paginator-rpp-label {
-            font-size: 0.875rem;
-          }
-
-          .p-paginator .p-paginator-prev > div,
-          .p-paginator .p-paginator-next > div {
-            gap: 0.5rem;
-            color: inherit;
-          }
-
-          /* Dark Mode Styles */
-          .dark .p-paginator {
-            border-color: var(--p-surface-700);
-            background: var(--p-surface-900);
-            box-shadow: none;
-          }
-
-          .dark .p-paginator-pages button,
-          .dark .p-paginator-prev,
-          .dark .p-paginator-next {
-            border-color: var(--p-surface-700);
-          }
-
-          .dark .p-paginator-prev {
-            border-right-color: var(--p-surface-700);
-          }
-
-          .dark .p-paginator-next {
-            border-left-color: var(--p-surface-700);
-          }
+                css: () => `
+          .p-paginator {
+            --p-paginator-gap: 0.375rem;
+            --p-paginator-nav-button-width: 1.75rem;
+            --p-paginator-nav-button-height: 1.75rem;
+            width: fit-content;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            font-size: 0.875rem;
+          }
+
+          .p-paginator-pages {
+            display: flex;
+            gap: var(--p-paginator-gap);
+          }
+
+          .p-paginator-pages button,
+          .p-paginator-prev,
+          .p-paginator-next,
+          .p-paginator-first,
+          .p-paginator-last {
+            min-width: var(--p-paginator-nav-button-width);
+            height: var(--p-paginator-nav-button-height);
+            border: 1px solid var(--p-surface-200);
+            border-radius: 0.375rem;
+            background: #fff;
+            color: #667085;
+            box-shadow: none;
+          }
+
+          .p-paginator .p-paginator-page.p-paginator-page-selected {
+            border-color: var(--p-primary-color);
+            background: var(--p-primary-color);
+            color: #fff;
+            font-weight: 500;
+          }
+
+          .p-paginator-pages button:not(.p-paginator-page-selected):hover,
+          .p-paginator-prev:hover,
+          .p-paginator-next:hover,
+          .p-paginator-first:hover,
+          .p-paginator-last:hover {
+            background: var(--p-surface-50);
+          }
+
+          .p-paginator .p-select {
+            min-height: var(--p-paginator-nav-button-height);
+            margin-inline-start: 0.5rem;
+            border: 1px solid var(--p-surface-200);
+            border-radius: 0.5rem;
+            background: #fff;
+          }
+
+          .p-paginator .p-select .p-select-label {
+            padding: 0.375rem 0.625rem;
+            font-size: 0.875rem;
+          }
+
+          /* Dark Mode Styles */
+          .dark .p-paginator-pages button,
+          .dark .p-paginator-prev,
+          .dark .p-paginator-next,
+          .dark .p-paginator-first,
+          .dark .p-paginator-last,
+          .dark .p-paginator .p-select {
+            border-color: var(--p-surface-500);
+            background: var(--p-surface-900);
+          }
+
+          .dark .p-paginator .p-paginator-page.p-paginator-page-selected {
+            border-color: var(--p-primary-color);
+            background: var(--p-primary-color);
+            color: #fff;
+          }
         `,
             },
             toggleswitch: {