primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-toolbar.mjs

@@ -4,43 +4,23 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, ContentChildren, ContentChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
+import { style } from '@primeuix/styles/toolbar';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: ${dt('toolbar.padding')};
-    background: ${dt('toolbar.background')};
-    border: 1px solid ${dt('toolbar.border.color')};
-    color: ${dt('toolbar.color')};
-    border-radius: ${dt('toolbar.border.radius')};
-    gap: ${dt('toolbar.gap')};
-}
-
-.p-toolbar-start,
-.p-toolbar-center,
-.p-toolbar-end {
-    display: flex;
-    align-items: center;
-}
-`;
 const classes = {
-    root: 'p-toolbar p-component',
+    root: () => ['p-toolbar p-component'],
     start: 'p-toolbar-start',
     center: 'p-toolbar-center',
     end: 'p-toolbar-end'
 };
 class ToolbarStyle extends BaseStyle {
     name = 'toolbar';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToolbarStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToolbarStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToolbarStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToolbarStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToolbarStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToolbarStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -77,13 +57,9 @@ var ToolbarClasses;
  * @group Components
  */
 class Toolbar extends BaseComponent {
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -132,49 +108,50 @@ class Toolbar extends BaseComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Toolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: Toolbar, isStandalone: true, selector: "p-toolbar", inputs: { style: "style", styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy" }, providers: [ToolbarStyle], queries: [{ propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }, { propertyName: "centerTemplate", first: true, predicate: ["center"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
-        <div [ngClass]="'p-toolbar p-component'" [attr.aria-labelledby]="ariaLabelledBy" [ngStyle]="style" [class]="styleClass" role="toolbar" [attr.data-pc-name]="'toolbar'">
-            <ng-content></ng-content>
-            <div class="p-toolbar-start" *ngIf="startTemplate || _startTemplate" [attr.data-pc-section]="'start'">
-                <ng-container *ngTemplateOutlet="startTemplate || _startTemplate"></ng-container>
-            </div>
-            <div class="p-toolbar-center" *ngIf="centerTemplate || _centerTemplate" [attr.data-pc-section]="'center'">
-                <ng-container *ngTemplateOutlet="centerTemplate || _centerTemplate"></ng-container>
-            </div>
-            <div class="p-toolbar-end" *ngIf="endTemplate || _endTemplate" [attr.data-pc-section]="'end'">
-                <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
-            </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Toolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: Toolbar, isStandalone: true, selector: "p-toolbar", inputs: { styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy" }, host: { attributes: { "data-pc-section": "root", "data-pc-name": "toolbar", "role": "toolbar" }, properties: { "class": "cn(cx(\"root\"), styleClass)", "attr.aria-labelledby": "ariaLabelledBy" } }, providers: [ToolbarStyle], queries: [{ propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }, { propertyName: "centerTemplate", first: true, predicate: ["center"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+        <ng-content></ng-content>
+        <div [class]="cx('start')" *ngIf="startTemplate || _startTemplate" [attr.data-pc-section]="'start'">
+            <ng-container *ngTemplateOutlet="startTemplate || _startTemplate"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <div [class]="cx('center')" *ngIf="centerTemplate || _centerTemplate" [attr.data-pc-section]="'center'">
+            <ng-container *ngTemplateOutlet="centerTemplate || _centerTemplate"></ng-container>
+        </div>
+        <div [class]="cx('end')" *ngIf="endTemplate || _endTemplate" [attr.data-pc-section]="'end'">
+            <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Toolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Toolbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toolbar',
                     standalone: true,
                     imports: [CommonModule, SharedModule],
                     template: `
-        <div [ngClass]="'p-toolbar p-component'" [attr.aria-labelledby]="ariaLabelledBy" [ngStyle]="style" [class]="styleClass" role="toolbar" [attr.data-pc-name]="'toolbar'">
-            <ng-content></ng-content>
-            <div class="p-toolbar-start" *ngIf="startTemplate || _startTemplate" [attr.data-pc-section]="'start'">
-                <ng-container *ngTemplateOutlet="startTemplate || _startTemplate"></ng-container>
-            </div>
-            <div class="p-toolbar-center" *ngIf="centerTemplate || _centerTemplate" [attr.data-pc-section]="'center'">
-                <ng-container *ngTemplateOutlet="centerTemplate || _centerTemplate"></ng-container>
-            </div>
-            <div class="p-toolbar-end" *ngIf="endTemplate || _endTemplate" [attr.data-pc-section]="'end'">
-                <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
-            </div>
+        <ng-content></ng-content>
+        <div [class]="cx('start')" *ngIf="startTemplate || _startTemplate" [attr.data-pc-section]="'start'">
+            <ng-container *ngTemplateOutlet="startTemplate || _startTemplate"></ng-container>
+        </div>
+        <div [class]="cx('center')" *ngIf="centerTemplate || _centerTemplate" [attr.data-pc-section]="'center'">
+            <ng-container *ngTemplateOutlet="centerTemplate || _centerTemplate"></ng-container>
+        </div>
+        <div [class]="cx('end')" *ngIf="endTemplate || _endTemplate" [attr.data-pc-section]="'end'">
+            <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [ToolbarStyle]
+                    providers: [ToolbarStyle],
+                    host: {
+                        '[class]': 'cn(cx("root"), styleClass)',
+                        'data-pc-section': 'root',
+                        'data-pc-name': 'toolbar',
+                        role: 'toolbar',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy'
+                    }
                 }]
-        }], propDecorators: { style: [{
-                type: Input
-            }], styleClass: [{
+        }], propDecorators: { styleClass: [{
                 type: Input
             }], ariaLabelledBy: [{
                 type: Input
@@ -192,11 +169,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class ToolbarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: ToolbarModule, imports: [Toolbar, SharedModule], exports: [Toolbar, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToolbarModule, imports: [Toolbar, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: ToolbarModule, imports: [Toolbar, SharedModule], exports: [Toolbar, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToolbarModule, imports: [Toolbar, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Toolbar, SharedModule],

package/fesm2022/primeng-toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-toolbar.mjs","sources":["../../src/toolbar/style/toolbarstyle.ts","../../src/toolbar/toolbar.ts","../../src/toolbar/primeng-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    padding: ${dt('toolbar.padding')};\n    background: ${dt('toolbar.background')};\n    border: 1px solid ${dt('toolbar.border.color')};\n    color: ${dt('toolbar.color')};\n    border-radius: ${dt('toolbar.border.radius')};\n    gap: ${dt('toolbar.gap')};\n}\n\n.p-toolbar-start,\n.p-toolbar-center,\n.p-toolbar-end {\n    display: flex;\n    align-items: center;\n}\n`;\n\nconst classes = {\n    root: 'p-toolbar p-component',\n    start: 'p-toolbar-start',\n    center: 'p-toolbar-center',\n    end: 'p-toolbar-end'\n};\n\n@Injectable()\nexport class ToolbarStyle extends BaseStyle {\n    name = 'toolbar';\n\n    theme = theme;\n\n    classes = classes;\n}\n\n/**\n *\n * Toolbar is a grouping component for buttons and other content.\n *\n * [Live Demo](https://www.primeng.org/toolbar/)\n *\n * @module toolbarstyle\n *\n */\nexport enum ToolbarClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-toolbar',\n    /**\n     * Class name of the start element\n     */\n    start = 'p-toolbar-start',\n    /**\n     * Class name of the center element\n     */\n    center = 'p-toolbar-center',\n    /**\n     * Class name of the end element\n     */\n    end = 'p-toolbar-end'\n}\n\nexport interface ToolbarStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { ToolbarStyle } from './style/toolbarstyle';\n\n/**\n * Toolbar is a grouping component for buttons and other content.\n * @group Components\n */\n@Component({\n    selector: 'p-toolbar',\n    standalone: true,\n    imports: [CommonModule, SharedModule],\n    template: `\n        <div [ngClass]=\"'p-toolbar p-component'\" [attr.aria-labelledby]=\"ariaLabelledBy\" [ngStyle]=\"style\" [class]=\"styleClass\" role=\"toolbar\" [attr.data-pc-name]=\"'toolbar'\">\n            <ng-content></ng-content>\n            <div class=\"p-toolbar-start\" *ngIf=\"startTemplate || _startTemplate\" [attr.data-pc-section]=\"'start'\">\n                <ng-container *ngTemplateOutlet=\"startTemplate || _startTemplate\"></ng-container>\n            </div>\n            <div class=\"p-toolbar-center\" *ngIf=\"centerTemplate || _centerTemplate\" [attr.data-pc-section]=\"'center'\">\n                <ng-container *ngTemplateOutlet=\"centerTemplate || _centerTemplate\"></ng-container>\n            </div>\n            <div class=\"p-toolbar-end\" *ngIf=\"endTemplate || _endTemplate\" [attr.data-pc-section]=\"'end'\">\n                <ng-container *ngTemplateOutlet=\"endTemplate || _endTemplate\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [ToolbarStyle]\n})\nexport class Toolbar extends BaseComponent implements AfterContentInit, BlockableUI {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Defines a string value that labels an interactive element.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n\n    _componentStyle = inject(ToolbarStyle);\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n    /**\n     * Defines template option for start.\n     * @group Templates\n     */\n    @ContentChild('start', { descendants: false }) startTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Defines template option for end.\n     * @group Templates\n     */\n    @ContentChild('end', { descendants: false }) endTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Defines template option for center.\n     * @group Templates\n     */\n    @ContentChild('center', { descendants: false }) centerTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    _startTemplate: TemplateRef<any> | undefined;\n\n    _endTemplate: TemplateRef<any> | undefined;\n\n    _centerTemplate: TemplateRef<any> | undefined;\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'start':\n                case 'left':\n                    this._startTemplate = item.template;\n                    break;\n\n                case 'end':\n                case 'right':\n                    this._endTemplate = item.template;\n                    break;\n\n                case 'center':\n                    this._centerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [Toolbar, SharedModule],\n    exports: [Toolbar, SharedModule]\n})\nexport class ToolbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-toolbar.mjs","sources":["../../src/toolbar/style/toolbarstyle.ts","../../src/toolbar/toolbar.ts","../../src/toolbar/primeng-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/toolbar';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    root: () => ['p-toolbar p-component'],\n    start: 'p-toolbar-start',\n    center: 'p-toolbar-center',\n    end: 'p-toolbar-end'\n};\n\n@Injectable()\nexport class ToolbarStyle extends BaseStyle {\n    name = 'toolbar';\n\n    theme = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Toolbar is a grouping component for buttons and other content.\n *\n * [Live Demo](https://www.primeng.org/toolbar/)\n *\n * @module toolbarstyle\n *\n */\nexport enum ToolbarClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-toolbar',\n    /**\n     * Class name of the start element\n     */\n    start = 'p-toolbar-start',\n    /**\n     * Class name of the center element\n     */\n    center = 'p-toolbar-center',\n    /**\n     * Class name of the end element\n     */\n    end = 'p-toolbar-end'\n}\n\nexport interface ToolbarStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { ToolbarStyle } from './style/toolbarstyle';\n\n/**\n * Toolbar is a grouping component for buttons and other content.\n * @group Components\n */\n@Component({\n    selector: 'p-toolbar',\n    standalone: true,\n    imports: [CommonModule, SharedModule],\n    template: `\n        <ng-content></ng-content>\n        <div [class]=\"cx('start')\" *ngIf=\"startTemplate || _startTemplate\" [attr.data-pc-section]=\"'start'\">\n            <ng-container *ngTemplateOutlet=\"startTemplate || _startTemplate\"></ng-container>\n        </div>\n        <div [class]=\"cx('center')\" *ngIf=\"centerTemplate || _centerTemplate\" [attr.data-pc-section]=\"'center'\">\n            <ng-container *ngTemplateOutlet=\"centerTemplate || _centerTemplate\"></ng-container>\n        </div>\n        <div [class]=\"cx('end')\" *ngIf=\"endTemplate || _endTemplate\" [attr.data-pc-section]=\"'end'\">\n            <ng-container *ngTemplateOutlet=\"endTemplate || _endTemplate\"></ng-container>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [ToolbarStyle],\n    host: {\n        '[class]': 'cn(cx(\"root\"), styleClass)',\n        'data-pc-section': 'root',\n        'data-pc-name': 'toolbar',\n        role: 'toolbar',\n        '[attr.aria-labelledby]': 'ariaLabelledBy'\n    }\n})\nexport class Toolbar extends BaseComponent implements AfterContentInit, BlockableUI {\n    /**\n     * Style class of the component.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Defines a string value that labels an interactive element.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n\n    _componentStyle = inject(ToolbarStyle);\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n    /**\n     * Defines template option for start.\n     * @group Templates\n     */\n    @ContentChild('start', { descendants: false }) startTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Defines template option for end.\n     * @group Templates\n     */\n    @ContentChild('end', { descendants: false }) endTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Defines template option for center.\n     * @group Templates\n     */\n    @ContentChild('center', { descendants: false }) centerTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    _startTemplate: TemplateRef<any> | undefined;\n\n    _endTemplate: TemplateRef<any> | undefined;\n\n    _centerTemplate: TemplateRef<any> | undefined;\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'start':\n                case 'left':\n                    this._startTemplate = item.template;\n                    break;\n\n                case 'end':\n                case 'right':\n                    this._endTemplate = item.template;\n                    break;\n\n                case 'center':\n                    this._centerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [Toolbar, SharedModule],\n    exports: [Toolbar, SharedModule]\n})\nexport class ToolbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/primeng-tooltip.mjs

@@ -1,82 +1,13 @@
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, TemplateRef, booleanAttribute, numberAttribute, Input, Directive, NgModule } from '@angular/core';
+import { Injectable, input, computed, inject, TemplateRef, booleanAttribute, numberAttribute, Input, Directive, NgModule } from '@angular/core';
 import { uuid, hasClass, appendChild, fadeIn, getWindowScrollLeft, getWindowScrollTop, findSingle, getOuterWidth, getOuterHeight, getViewport, removeChild } from '@primeuix/utils';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/tooltip';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-tooltip {
-    position: absolute;
-    display: none;
-    max-width: ${dt('tooltip.max.width')};
-}
-
-.p-tooltip-right,
-.p-tooltip-left {
-    padding: 0 ${dt('tooltip.gutter')};
-}
-
-.p-tooltip-top,
-.p-tooltip-bottom {
-    padding: ${dt('tooltip.gutter')} 0;
-}
-
-.p-tooltip-text {
-    white-space: pre-line;
-    word-break: break-word;
-    background: ${dt('tooltip.background')};
-    color: ${dt('tooltip.color')};
-    padding: ${dt('tooltip.padding')};
-    box-shadow: ${dt('tooltip.shadow')};
-    border-radius: ${dt('tooltip.border.radius')};
-}
-
-.p-tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    scale: 2;
-}
-
-.p-tooltip-right .p-tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: calc(-1 * ${dt('tooltip.gutter')});
-    border-width: ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} 0;
-    border-right-color: ${dt('tooltip.background')};
-}
-
-.p-tooltip-left .p-tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: calc(-1 * ${dt('tooltip.gutter')});
-    border-width: ${dt('tooltip.gutter')} 0 ${dt('tooltip.gutter')} ${dt('tooltip.gutter')};
-    border-left-color: ${dt('tooltip.background')};
-}
-
-.p-tooltip-top .p-tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: calc(-1 * ${dt('tooltip.gutter')});
-    border-width: ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} 0 ${dt('tooltip.gutter')};
-    border-top-color: ${dt('tooltip.background')};
-    border-bottom-color: ${dt('tooltip.background')};
-}
-
-.p-tooltip-bottom .p-tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: calc(-1 * ${dt('tooltip.gutter')});
-    border-width: 0 ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} ${dt('tooltip.gutter')};
-    border-top-color: ${dt('tooltip.background')};
-    border-bottom-color: ${dt('tooltip.background')};
-}
-`;
 const classes = {
     root: 'p-tooltip p-component',
     arrow: 'p-tooltip-arrow',
@@ -84,12 +15,12 @@ const classes = {
 };
 class TooltipStyle extends BaseStyle {
     name = 'tooltip';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TooltipStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TooltipStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TooltipStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -134,11 +65,6 @@ class Tooltip extends BaseComponent {
      * @group Props
      */
     tooltipEvent = 'hover';
-    /**
-     *  Target element to attach the overlay, valid values are "body", "target" or a local ng-F variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
-     * @group Props
-     */
-    appendTo;
     /**
      * Type of CSS position.
      * @group Props
@@ -221,6 +147,13 @@ class Tooltip extends BaseComponent {
      * @group Props
      */
     tooltipOptions;
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined);
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     _tooltipOptions = {
         tooltipLabel: null,
         tooltipPosition: 'right',
@@ -450,6 +383,7 @@ class Tooltip extends BaseComponent {
         this.container.setAttribute('role', 'tooltip');
         let tooltipArrow = document.createElement('div');
         tooltipArrow.className = 'p-tooltip-arrow';
+        tooltipArrow.setAttribute('data-pc-section', 'arrow');
         this.container.appendChild(tooltipArrow);
         this.tooltipText = document.createElement('div');
         this.tooltipText.className = 'p-tooltip-text';
@@ -573,24 +507,53 @@ class Tooltip extends BaseComponent {
         const offsetLeft = getOuterWidth(el);
         const offsetTop = (getOuterHeight(el) - getOuterHeight(this.container)) / 2;
         this.alignTooltip(offsetLeft, offsetTop);
+        let arrowElement = this.getArrowElement();
+        arrowElement.style.top = '50%';
+        arrowElement.style.right = null;
+        arrowElement.style.bottom = null;
+        arrowElement.style.left = '0';
     }
     alignLeft() {
         this.preAlign('left');
+        let arrowElement = this.getArrowElement();
         let offsetLeft = getOuterWidth(this.container);
         let offsetTop = (getOuterHeight(this.el.nativeElement) - getOuterHeight(this.container)) / 2;
         this.alignTooltip(-offsetLeft, offsetTop);
+        arrowElement.style.top = '50%';
+        arrowElement.style.right = '0';
+        arrowElement.style.bottom = null;
+        arrowElement.style.left = null;
     }
     alignTop() {
         this.preAlign('top');
+        let arrowElement = this.getArrowElement();
+        let hostOffset = this.getHostOffset();
+        let elementWidth = getOuterWidth(this.container);
         let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
         let offsetTop = getOuterHeight(this.container);
         this.alignTooltip(offsetLeft, -offsetTop);
+        let elementRelativeCenter = hostOffset.left - this.getHostOffset().left + elementWidth / 2;
+        arrowElement.style.top = null;
+        arrowElement.style.right = null;
+        arrowElement.style.bottom = '0';
+        arrowElement.style.left = elementRelativeCenter + 'px';
+    }
+    getArrowElement() {
+        return findSingle(this.container, '[data-pc-section="arrow"]');
     }
     alignBottom() {
         this.preAlign('bottom');
+        let arrowElement = this.getArrowElement();
+        let elementWidth = getOuterWidth(this.container);
+        let hostOffset = this.getHostOffset();
         let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
         let offsetTop = getOuterHeight(this.el.nativeElement);
         this.alignTooltip(offsetLeft, offsetTop);
+        let elementRelativeCenter = hostOffset.left - this.getHostOffset().left + elementWidth / 2;
+        arrowElement.style.top = '0';
+        arrowElement.style.right = null;
+        arrowElement.style.bottom = null;
+        arrowElement.style.left = elementRelativeCenter + 'px';
     }
     alignTooltip(offsetLeft, offsetTop) {
         let hostOffset = this.getHostOffset();
@@ -717,10 +680,10 @@ class Tooltip extends BaseComponent {
             this.documentEscapeListener();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Tooltip, deps: [{ token: i0.NgZone }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: Tooltip, isStandalone: true, selector: "[pTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: ["escape", "escape", booleanAttribute], showDelay: ["showDelay", "showDelay", numberAttribute], hideDelay: ["hideDelay", "hideDelay", numberAttribute], life: ["life", "life", numberAttribute], positionTop: ["positionTop", "positionTop", numberAttribute], positionLeft: ["positionLeft", "positionLeft", numberAttribute], autoHide: ["autoHide", "autoHide", booleanAttribute], fitContent: ["fitContent", "fitContent", booleanAttribute], hideOnEscape: ["hideOnEscape", "hideOnEscape", booleanAttribute], content: ["pTooltip", "content"], disabled: ["tooltipDisabled", "disabled"], tooltipOptions: "tooltipOptions" }, providers: [TooltipStyle], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tooltip, deps: [{ token: i0.NgZone }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Tooltip, isStandalone: true, selector: "[pTooltip]", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, tooltipEvent: { classPropertyName: "tooltipEvent", publicName: "tooltipEvent", isSignal: false, isRequired: false, transformFunction: null }, positionStyle: { classPropertyName: "positionStyle", publicName: "positionStyle", isSignal: false, isRequired: false, transformFunction: null }, tooltipStyleClass: { classPropertyName: "tooltipStyleClass", publicName: "tooltipStyleClass", isSignal: false, isRequired: false, transformFunction: null }, tooltipZIndex: { classPropertyName: "tooltipZIndex", publicName: "tooltipZIndex", isSignal: false, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, life: { classPropertyName: "life", publicName: "life", isSignal: false, isRequired: false, transformFunction: numberAttribute }, positionTop: { classPropertyName: "positionTop", publicName: "positionTop", isSignal: false, isRequired: false, transformFunction: numberAttribute }, positionLeft: { classPropertyName: "positionLeft", publicName: "positionLeft", isSignal: false, isRequired: false, transformFunction: numberAttribute }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fitContent: { classPropertyName: "fitContent", publicName: "fitContent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideOnEscape: { classPropertyName: "hideOnEscape", publicName: "hideOnEscape", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, content: { classPropertyName: "content", publicName: "pTooltip", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tooltipDisabled", isSignal: false, isRequired: false, transformFunction: null }, tooltipOptions: { classPropertyName: "tooltipOptions", publicName: "tooltipOptions", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TooltipStyle], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Tooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pTooltip]',
@@ -731,8 +694,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], tooltipEvent: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
             }], positionStyle: [{
                 type: Input
             }], tooltipStyleClass: [{
@@ -776,11 +737,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }] } });
 class TooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: TooltipModule, imports: [Tooltip], exports: [Tooltip] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TooltipModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: TooltipModule, imports: [Tooltip], exports: [Tooltip] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tooltip],