diff --git a/apps/showcase/package.json b/apps/showcase/package.json index cdf931e4e7a..ae9b35d2ecf 100644 --- a/apps/showcase/package.json +++ b/apps/showcase/package.json @@ -24,6 +24,7 @@ "@primeng/themes": "workspace:*", "@primeuix/styled": "catalog:", "@primeuix/utils": "catalog:", + "@angular/cdk": "catalog:angular18", "@stackblitz/sdk": "1.9.0", "@types/express": "^4.17.17", "@types/jasmine": "~4.3.1", diff --git a/apps/showcase/src/app/showcase/doc/button/buttondoc.module.ts b/apps/showcase/src/app/showcase/doc/button/buttondoc.module.ts index 5abcc03da90..593b054b1c0 100644 --- a/apps/showcase/src/app/showcase/doc/button/buttondoc.module.ts +++ b/apps/showcase/src/app/showcase/doc/button/buttondoc.module.ts @@ -1,14 +1,16 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { AppCodeModule } from '@layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { WindowMaximizeIcon } from '@primeng/icons'; import { ButtonModule } from 'primeng/button'; import { ButtonGroupModule } from 'primeng/buttongroup'; import { RippleModule } from 'primeng/ripple'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BadgeDoc } from './badgedoc'; import { BasicDoc } from './basicdoc'; +import { ButtonGroupDoc } from './buttongroupdoc'; import { ButtonsetDoc } from './buttonsetdoc'; import { DirectiveDoc } from './directivedoc'; import { DisabledDoc } from './disableddoc'; @@ -26,8 +28,6 @@ import { SizesDoc } from './sizesdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { TextDoc } from './textdoc'; -import { ButtonGroupDoc } from './buttongroupdoc'; -import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, ButtonModule, ButtonGroupModule, RippleModule, RouterModule, WindowMaximizeIcon], diff --git a/apps/showcase/tsconfig.json b/apps/showcase/tsconfig.json index 9748c1f915f..a4853d0c7dd 100644 --- a/apps/showcase/tsconfig.json +++ b/apps/showcase/tsconfig.json @@ -2,10 +2,16 @@ "extends": "../../tsconfig.json", "compilerOptions": { "baseUrl": "./", + "strict": false, "paths": { "@primeng/themes/*": ["../../packages/themes/src/presets/*"], "@primeng/themes": ["../../packages/themes/src/index.ts"], + "@primeng/icons/*": ["../../packages/icons/src/*/public_api"], + "@primeng/icons": ["../../packages/icons/src/public_api"], + "@primeng/core/*": ["../../packages/core/src/*/public_api"], + "@primeng/core": ["../../packages/core/src/public_api"], "primeng/*": ["../../packages/primeng/src/*/public_api"], + "@pages/*": ["src/app/showcase/pages/*"], "@data/*": ["src/assets/showcase/data/*"], "@doc/*": ["src/app/showcase/doc/*"], @@ -16,6 +22,9 @@ } }, "angularCompilerOptions": { + "disableTypeScriptVersionCheck": true, + "fullTemplateTypeCheck": false, + "annotateForClosureCompiler": false, "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": false, "strictInputAccessModifiers": false, diff --git a/packages/core/README.md b/packages/core/README.md new file mode 100644 index 00000000000..d20b481d195 --- /dev/null +++ b/packages/core/README.md @@ -0,0 +1 @@ +# PrimeNG Core diff --git a/packages/core/angular.json b/packages/core/angular.json new file mode 100644 index 00000000000..db0a9e58b0a --- /dev/null +++ b/packages/core/angular.json @@ -0,0 +1,20 @@ +{ + "$schema": "../../node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "primeng-core": { + "root": "src", + "projectType": "library", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "project": "src/ng-package.json", + "tsConfig": "src/tsconfig.lib.json" + } + } + } + } + } +} diff --git a/packages/core/package.json b/packages/core/package.json new file mode 100644 index 00000000000..e7fe1f91c95 --- /dev/null +++ b/packages/core/package.json @@ -0,0 +1,74 @@ +{ + "name": "@primeng/core", + "version": "4.2.1", + "author": "PrimeTek Informatics", + "description": "", + "homepage": "https://primeng.org/", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/primefaces/primeng.git", + "directory": "packages/core" + }, + "bugs": { + "url": "https://github.com/primefaces/primeng/issues" + }, + "main": "./src/index.js", + "module": "./src/index.js", + "types": "./src/index.d.ts", + "exports": { + "./api": "./src/api/Api.js", + "./base/style": "./src/base/style/BaseStyle.js", + "./base": "./src/base/Base.js", + "./basecomponent/style": "./src/basecomponent/style/BaseComponentStyle.js", + "./basecomponent": "./src/basecomponent/BaseComponent.vue", + "./basedirective": "./src/basedirective/BaseDirective.js", + "./baseeditableholder": "./src/baseeditableholder/BaseEditableHolder.vue", + "./baseinput": "./src/baseinput/BaseInput.vue", + "./config": "./src/config/PrimeVue.js", + "./service": "./src/service/PrimeVueService.js", + "./usestyle": "./src/usestyle/UseStyle.js", + "./utils": "./src/utils/Utils.js" + }, + "publishConfig": { + "main": "./index.mjs", + "module": "./index.mjs", + "types": "./index.d.ts", + "exports": { + ".": { + "types": "./index.d.ts", + "import": "./index.mjs", + "default": "./index.mjs" + }, + "./*": { + "types": "./*/index.d.ts", + "import": "./*/index.mjs", + "default": "./*/index.mjs" + } + }, + "directory": "dist", + "linkDirectory": false, + "access": "public" + }, + "scripts": { + "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package", + "build:package": "pnpm run build:prebuild && ng build primeng-core && pnpm run build:postbuild", + "build:prebuild": "node ./scripts/prebuild.mjs", + "build:postbuild": "node ./scripts/postbuild.mjs", + "dev:link": "pnpm link --global && npm link" + }, + "dependencies": { + "@primeuix/styled": "catalog:", + "@primeuix/utils": "catalog:" + }, + "devDependencies": { + "@angular/animations": "^17.0.0 || ^18.0.0", + "@angular/cdk": "^17.0.0 || ^18.0.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "@angular/router": "^17.0.0 || ^18.0.0", + "rxjs": "^6.0.0 || ^7.8.1", + "zone.js": "~0.14.0" + } +} diff --git a/packages/primeng/src/api/filtermatchmode.ts b/packages/core/src/api/filtermatchmode.ts similarity index 100% rename from packages/primeng/src/api/filtermatchmode.ts rename to packages/core/src/api/filtermatchmode.ts diff --git a/packages/primeng/src/api/filtermetadata.ts b/packages/core/src/api/filtermetadata.ts similarity index 100% rename from packages/primeng/src/api/filtermetadata.ts rename to packages/core/src/api/filtermetadata.ts diff --git a/packages/primeng/src/api/filteroperator.ts b/packages/core/src/api/filteroperator.ts similarity index 100% rename from packages/primeng/src/api/filteroperator.ts rename to packages/core/src/api/filteroperator.ts diff --git a/packages/primeng/src/api/filterservice.spec.ts b/packages/core/src/api/filterservice.spec.ts similarity index 99% rename from packages/primeng/src/api/filterservice.spec.ts rename to packages/core/src/api/filterservice.spec.ts index d2d8f5847fc..abd4af73a4a 100644 --- a/packages/primeng/src/api/filterservice.spec.ts +++ b/packages/core/src/api/filterservice.spec.ts @@ -1,4 +1,8 @@ +/* +@todo: Update the test suite below + import { FilterService } from './filterservice'; + describe('FilterService Suite', () => { let data: any = [ { brand: 'VW', year: 2012, color: { name: 'Orange' }, vin: 'dsad231ff', price: '1000.0' }, @@ -117,3 +121,4 @@ describe('FilterService Suite', () => { expect(filteredValue.length).toEqual(0); }); }); +*/ diff --git a/packages/primeng/src/api/filterservice.ts b/packages/core/src/api/filterservice.ts similarity index 84% rename from packages/primeng/src/api/filterservice.ts rename to packages/core/src/api/filterservice.ts index 7d97e0d3d66..ed9cb176cfe 100644 --- a/packages/primeng/src/api/filterservice.ts +++ b/packages/core/src/api/filterservice.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { ObjectUtils } from 'primeng/utils'; +import { equals, removeAccents, resolveFieldData } from '@primeuix/utils'; @Injectable({ providedIn: 'root' }) export class FilterService { @@ -9,7 +9,7 @@ export class FilterService { if (value) { for (let item of value) { for (let field of fields) { - let fieldValue = ObjectUtils.resolveFieldData(item, field); + let fieldValue = resolveFieldData(item, field); if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) { filteredItems.push(item); @@ -32,8 +32,8 @@ export class FilterService { return false; } - let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); - let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale); return stringValue.slice(0, filterValue.length) === filterValue; }, @@ -47,8 +47,8 @@ export class FilterService { return false; } - let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); - let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale); return stringValue.indexOf(filterValue) !== -1; }, @@ -62,8 +62,8 @@ export class FilterService { return false; } - let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); - let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale); return stringValue.indexOf(filterValue) === -1; }, @@ -77,8 +77,8 @@ export class FilterService { return false; } - let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); - let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); + let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale); return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1; }, @@ -94,7 +94,7 @@ export class FilterService { if (value.getTime && filter.getTime) return value.getTime() === filter.getTime(); else if (value == filter) return true; - else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + else return removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); }, notEquals: (value: any, filter: any, filterLocale?: any): boolean => { @@ -108,7 +108,7 @@ export class FilterService { if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime(); else if (value == filter) return false; - else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); + else return removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); }, in: (value: any, filter: any[]): boolean => { @@ -117,7 +117,7 @@ export class FilterService { } for (let i = 0; i < filter.length; i++) { - if (ObjectUtils.equals(value, filter[i])) { + if (equals(value, filter[i])) { return true; } } diff --git a/packages/primeng/src/base/ng-package.json b/packages/core/src/api/ng-package.json similarity index 100% rename from packages/primeng/src/base/ng-package.json rename to packages/core/src/api/ng-package.json diff --git a/packages/primeng/src/api/overlayoptions.ts b/packages/core/src/api/overlayoptions.ts similarity index 100% rename from packages/primeng/src/api/overlayoptions.ts rename to packages/core/src/api/overlayoptions.ts diff --git a/packages/primeng/src/api/overlayservice.ts b/packages/core/src/api/overlayservice.ts similarity index 68% rename from packages/primeng/src/api/overlayservice.ts rename to packages/core/src/api/overlayservice.ts index 8c85682c7aa..7e679bf4c68 100644 --- a/packages/primeng/src/api/overlayservice.ts +++ b/packages/core/src/api/overlayservice.ts @@ -1,10 +1,9 @@ import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; -import { ToastMessageOptions } from './toastmessage'; @Injectable({ providedIn: 'root' }) export class OverlayService { - private clickSource = new Subject(); + private clickSource = new Subject(); clickObservable = this.clickSource.asObservable(); diff --git a/packages/primeng/src/api/primeicons.ts b/packages/core/src/api/primeicons.ts similarity index 100% rename from packages/primeng/src/api/primeicons.ts rename to packages/core/src/api/primeicons.ts diff --git a/packages/core/src/api/public_api.ts b/packages/core/src/api/public_api.ts new file mode 100644 index 00000000000..4f890188f0f --- /dev/null +++ b/packages/core/src/api/public_api.ts @@ -0,0 +1,13 @@ +export * from './filtermatchmode'; +export * from './filtermetadata'; +export * from './filteroperator'; +export * from './filterservice'; +export * from './overlayoptions'; +export * from './overlayservice'; +export * from './primeicons'; +export * from './shared'; +export * from './sortevent'; +export * from './sortmeta'; +export * from './themeprovider'; +export * from './translation'; +export * from './translationkeys'; diff --git a/packages/primeng/src/api/shared.ts b/packages/core/src/api/shared.ts similarity index 100% rename from packages/primeng/src/api/shared.ts rename to packages/core/src/api/shared.ts diff --git a/packages/primeng/src/api/sortevent.ts b/packages/core/src/api/sortevent.ts similarity index 100% rename from packages/primeng/src/api/sortevent.ts rename to packages/core/src/api/sortevent.ts diff --git a/packages/primeng/src/api/sortmeta.ts b/packages/core/src/api/sortmeta.ts similarity index 100% rename from packages/primeng/src/api/sortmeta.ts rename to packages/core/src/api/sortmeta.ts diff --git a/packages/primeng/src/api/themeprovider.ts b/packages/core/src/api/themeprovider.ts similarity index 89% rename from packages/primeng/src/api/themeprovider.ts rename to packages/core/src/api/themeprovider.ts index b9585437e83..b40433bf6a4 100644 --- a/packages/primeng/src/api/themeprovider.ts +++ b/packages/core/src/api/themeprovider.ts @@ -1,8 +1,8 @@ import { DOCUMENT } from '@angular/common'; import { effect, inject, Inject, Injectable, signal, untracked } from '@angular/core'; +import { BaseStyle } from '@primeng/core/base'; +import { PRIME_NG_THEME, PrimeNgFeature } from '@primeng/core/config'; import { Theme, ThemeService } from '@primeuix/styled'; -import { BaseStyle } from 'primeng/base'; -import { PRIME_NG_CONFIG, PrimeNgConfigProps } from './provideprimengconfig'; @Injectable({ providedIn: 'root' }) export class ThemeProvider { @@ -15,7 +15,7 @@ export class ThemeProvider { baseStyle: BaseStyle = inject(BaseStyle); - constructor(@Inject(PRIME_NG_CONFIG) private config: PrimeNgConfigProps) { + constructor(@Inject(PRIME_NG_THEME) private config: PrimeNgFeature) { if (config.theme) { this.theme.set(config.theme); } @@ -56,8 +56,6 @@ export class ThemeProvider { } loadCommonTheme() { - if (this.theme() === 'none') return; - // common if (!Theme.isStyleNameLoaded('common')) { const { primitive, semantic } = this.baseStyle.getCommonTheme?.() || {}; diff --git a/packages/primeng/src/api/translation.ts b/packages/core/src/api/translation.ts similarity index 100% rename from packages/primeng/src/api/translation.ts rename to packages/core/src/api/translation.ts diff --git a/packages/primeng/src/api/translationkeys.ts b/packages/core/src/api/translationkeys.ts similarity index 100% rename from packages/primeng/src/api/translationkeys.ts rename to packages/core/src/api/translationkeys.ts diff --git a/packages/primeng/src/base/base.ts b/packages/core/src/base/base.ts similarity index 100% rename from packages/primeng/src/base/base.ts rename to packages/core/src/base/base.ts diff --git a/packages/primeng/src/basecomponent/ng-package.json b/packages/core/src/base/ng-package.json similarity index 100% rename from packages/primeng/src/basecomponent/ng-package.json rename to packages/core/src/base/ng-package.json diff --git a/packages/primeng/src/base/public_api.ts b/packages/core/src/base/public_api.ts similarity index 100% rename from packages/primeng/src/base/public_api.ts rename to packages/core/src/base/public_api.ts diff --git a/packages/primeng/src/base/style/basestyle.ts b/packages/core/src/base/style/basestyle.ts similarity index 90% rename from packages/primeng/src/base/style/basestyle.ts rename to packages/core/src/base/style/basestyle.ts index 192f22a7bb2..04b466a29f7 100644 --- a/packages/primeng/src/base/style/basestyle.ts +++ b/packages/core/src/base/style/basestyle.ts @@ -1,7 +1,7 @@ import { inject, Injectable } from '@angular/core'; +import { UseStyle } from '@primeng/core/usestyle'; import { dt, Theme } from '@primeuix/styled'; -import { UseStyle } from 'primeng/usestyle'; -import { ObjectUtils } from 'primeng/utils'; +import { minifyCSS, resolve } from '@primeuix/utils'; const theme = ({ dt }) => ` * { @@ -202,8 +202,8 @@ export class BaseStyle { inlineStyles = {}; load = (style, options = {}, transform = (cs) => cs) => { - const computedStyle = transform(ObjectUtils.getItemValue(style, { dt })); - return computedStyle ? this.useStyle.use(ObjectUtils.minifyCSS(computedStyle), { name: this.name, ...options }) : {}; + const computedStyle = transform(resolve(style, { dt })); + return computedStyle ? this.useStyle.use(minifyCSS(computedStyle), { name: this.name, ...options }) : {}; }; loadCSS = (options = {}) => { @@ -236,8 +236,8 @@ export class BaseStyle { getStyleSheet = (extendedCSS = '', props = {}) => { if (this.css) { - const _css = ObjectUtils.getItemValue(this.css, { dt }); - const _style = ObjectUtils.minifyCSS(`${_css}${extendedCSS}`); + const _css = resolve(this.css, { dt }); + const _style = minifyCSS(`${_css}${extendedCSS}`); const _props = Object.entries(props) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .join(' '); @@ -257,8 +257,8 @@ export class BaseStyle { if (this.theme) { const name = this.name === 'base' ? 'global-style' : `${this.name}-style`; - const _css = ObjectUtils.getItemValue(this.theme, { dt }); - const _style = ObjectUtils.minifyCSS(Theme.transformCSS(name, _css)); + const _css = resolve(this.theme, { dt }); + const _style = minifyCSS(Theme.transformCSS(name, _css)); const _props = Object.entries(props) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .join(' '); diff --git a/packages/primeng/src/basecomponent/basecomponent.ts b/packages/core/src/basecomponent/basecomponent.ts similarity index 96% rename from packages/primeng/src/basecomponent/basecomponent.ts rename to packages/core/src/basecomponent/basecomponent.ts index 66bbf34961e..aa170b07a59 100644 --- a/packages/primeng/src/basecomponent/basecomponent.ts +++ b/packages/core/src/basecomponent/basecomponent.ts @@ -1,10 +1,10 @@ import { DOCUMENT, isPlatformServer } from '@angular/common'; import { ChangeDetectorRef, ContentChildren, Directive, ElementRef, inject, Injector, Input, PLATFORM_ID, QueryList, Renderer2, SimpleChanges } from '@angular/core'; +import { PrimeTemplate } from '@primeng/core/api'; +import { Base, BaseStyle } from '@primeng/core/base'; +import { PrimeNGConfig } from '@primeng/core/config'; import { Theme, ThemeService } from '@primeuix/styled'; -import { getKeyValue } from '@primeuix/utils/object'; -import { PrimeNGConfig, PrimeTemplate } from 'primeng/api'; -import { Base, BaseStyle } from 'primeng/base'; -import { UniqueComponentId } from 'primeng/utils'; +import { getKeyValue, uuid } from '@primeuix/utils'; import { BaseComponentStyle } from './style/basecomponentstyle'; @Directive({ standalone: true, providers: [BaseComponentStyle, BaseStyle] }) @@ -45,7 +45,7 @@ export class BaseComponent { return this['_componentStyle']; } - attrSelector = UniqueComponentId('pc'); + attrSelector = uuid('pc'); _getHostInstance(instance) { if (instance) { diff --git a/packages/primeng/src/baseicon/ng-package.json b/packages/core/src/basecomponent/ng-package.json similarity index 100% rename from packages/primeng/src/baseicon/ng-package.json rename to packages/core/src/basecomponent/ng-package.json diff --git a/packages/primeng/src/basecomponent/public_api.ts b/packages/core/src/basecomponent/public_api.ts similarity index 100% rename from packages/primeng/src/basecomponent/public_api.ts rename to packages/core/src/basecomponent/public_api.ts diff --git a/packages/primeng/src/basecomponent/style/basecomponentstyle.ts b/packages/core/src/basecomponent/style/basecomponentstyle.ts similarity index 76% rename from packages/primeng/src/basecomponent/style/basecomponentstyle.ts rename to packages/core/src/basecomponent/style/basecomponentstyle.ts index 3862c259e02..f3672e9d345 100644 --- a/packages/primeng/src/basecomponent/style/basecomponentstyle.ts +++ b/packages/core/src/basecomponent/style/basecomponentstyle.ts @@ -1,5 +1,5 @@ -import { BaseStyle } from 'primeng/base'; import { Injectable } from '@angular/core'; +import { BaseStyle } from '@primeng/core/base'; @Injectable({ providedIn: 'root' }) export class BaseComponentStyle extends BaseStyle { diff --git a/packages/primeng/src/icons/angledoubledown/ng-package.json b/packages/core/src/config/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angledoubledown/ng-package.json rename to packages/core/src/config/ng-package.json diff --git a/packages/primeng/src/api/primeng.ts b/packages/core/src/config/primeng.ts similarity index 83% rename from packages/primeng/src/api/primeng.ts rename to packages/core/src/config/primeng.ts index 927b0264ee1..7183b2a229e 100644 --- a/packages/primeng/src/api/primeng.ts +++ b/packages/core/src/config/primeng.ts @@ -1,10 +1,6 @@ -import { Inject, inject, Injectable, PLATFORM_ID, signal } from '@angular/core'; +import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core'; +import { FilterMatchMode, OverlayOptions, ThemeProvider, Translation } from '@primeng/core/api'; import { Subject } from 'rxjs'; -import { FilterMatchMode } from './filtermatchmode'; -import { OverlayOptions } from './overlayoptions'; -import { Translation } from './translation'; -import { ThemeProvider } from './themeprovider'; -import { PRIME_NG_CONFIG, PrimeNgConfigProps } from './provideprimengconfig'; @Injectable({ providedIn: 'root' }) export class PrimeNG extends ThemeProvider { @@ -24,52 +20,7 @@ export class PrimeNG extends ThemeProvider { date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER] }; - public translation: Translation = initializeTranslation(); - - zIndex: ZIndex = { - modal: 1100, - overlay: 1000, - menu: 1000, - tooltip: 1100 - }; - - private translationSource = new Subject(); - - translationObserver = this.translationSource.asObservable(); - - constructor(@Inject(PRIME_NG_CONFIG) public _config: PrimeNgConfigProps) { - super(_config); - this.setConfig(_config); - } - - getTranslation(key: string): any { - return this.translation[key as keyof typeof this.translation]; - } - - setTranslation(value: Translation) { - this.translation = { ...this.translation, ...value }; - this.translationSource.next(this.translation); - } - - private setConfig(config: PrimeNgConfigProps): void { - const { csp, ripple, inputStyle } = config; - if (csp) this.csp.set(csp); - if (ripple) this.ripple.set(ripple); - if (inputStyle) this.inputStyle.set(inputStyle); - } -} - -// Type for zIndex -type ZIndex = { - modal: number; - overlay: number; - menu: number; - tooltip: number; -}; - -// Function to initialize translations -function initializeTranslation(): Translation { - return { + public translation: Translation = { startsWith: 'Starts with', contains: 'Contains', notContains: 'Not contains', @@ -133,12 +84,12 @@ function initializeTranslation(): Translation { strong: 'Strong', passwordPrompt: 'Enter a password', emptyMessage: 'No results found', - searchMessage: 'Search results are available', - selectionMessage: 'Items selected', + searchMessage: '{0} results are available', + selectionMessage: '{0} items selected', emptySelectionMessage: 'No selected item', emptySearchMessage: 'No results found', emptyFilterMessage: 'No results found', - fileChosenMessage: 'Files', + fileChosenMessage: '{0} files', noFileChosenMessage: 'No file chosen', aria: { trueLabel: 'True', @@ -197,4 +148,24 @@ function initializeTranslation(): Translation { maximizeLabel: 'Maximize' } }; + + zIndex: any = { + modal: 1100, + overlay: 1000, + menu: 1000, + tooltip: 1100 + }; + + private translationSource = new Subject(); + + translationObserver = this.translationSource.asObservable(); + + getTranslation(key: string): any { + return this.translation[key as keyof typeof this.translation]; + } + + setTranslation(value: Translation) { + this.translation = { ...this.translation, ...value }; + this.translationSource.next(this.translation); + } } diff --git a/packages/primeng/src/api/primengconfig.ts b/packages/core/src/config/primengconfig.ts similarity index 100% rename from packages/primeng/src/api/primengconfig.ts rename to packages/core/src/config/primengconfig.ts diff --git a/packages/core/src/config/provideprimengconfig.ts b/packages/core/src/config/provideprimengconfig.ts new file mode 100644 index 00000000000..2e9153445b1 --- /dev/null +++ b/packages/core/src/config/provideprimengconfig.ts @@ -0,0 +1,14 @@ +import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from '@angular/core'; + +export type PrimeNgFeature = { theme?: { preset: any }; ripple?: boolean; inputStyle?: 'outlined' | 'filled'; csp?: { nonce: string | undefined } }; + +export const PRIME_NG_THEME = new InjectionToken('PRIME_NG_THEME'); + +export function providePrimeNgConfig(...features: PrimeNgFeature[]): EnvironmentProviders { + const providers = features.map((feature) => ({ + provide: PRIME_NG_THEME, + useValue: feature + })); + + return makeEnvironmentProviders(providers); +} diff --git a/packages/core/src/config/public_api.ts b/packages/core/src/config/public_api.ts new file mode 100644 index 00000000000..97133806a7d --- /dev/null +++ b/packages/core/src/config/public_api.ts @@ -0,0 +1,3 @@ +export * from './primeng'; +export * from './primengconfig'; +export * from './provideprimengconfig'; diff --git a/packages/core/src/ng-package.json b/packages/core/src/ng-package.json new file mode 100644 index 00000000000..0aa5c12154d --- /dev/null +++ b/packages/core/src/ng-package.json @@ -0,0 +1,9 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../dist", + "deleteDestPath": true, + "lib": { + "entryFile": "public_api.ts" + }, + "allowedNonPeerDependencies": ["@primeuix/styled", "@primeuix/utils"] +} diff --git a/packages/core/src/package.json b/packages/core/src/package.json new file mode 100644 index 00000000000..aa11a49b5ef --- /dev/null +++ b/packages/core/src/package.json @@ -0,0 +1,54 @@ +{ + "name": "@primeng/core", + "version": "4.2.1", + "author": "PrimeTek Informatics", + "description": "PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.", + "homepage": "https://primeng.org/", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/primefaces/primeng.git", + "directory": "packages/core" + }, + "bugs": { + "url": "https://github.com/primefaces/primeng/issues" + }, + "keywords": ["primeng", "angular", "ui library", "component library", "material", "bootstrap", "fluent", "tailwind"], + "main": "./src/index.js", + "module": "./src/index.js", + "types": "./src/index.d.ts", + "publishConfig": { + "main": "./index.mjs", + "module": "./index.mjs", + "types": "./index.d.ts", + "exports": { + ".": { + "types": "./index.d.ts", + "import": "./index.mjs", + "default": "./index.mjs" + }, + "./*": { + "types": "./*/index.d.ts", + "import": "./*/index.mjs", + "default": "./*/index.mjs" + } + }, + "directory": "dist", + "linkDirectory": false, + "access": "public" + }, + "peerDependencies": { + "@angular/animations": "^17.0.0 || ^18.0.0", + "@angular/cdk": "^17.0.0 || ^18.0.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "@angular/router": "^17.0.0 || ^18.0.0", + "rxjs": "^6.0.0 || ^7.8.1", + "zone.js": "~0.14.0" + }, + "dependencies": { + "@primeuix/styled": "catalog:", + "@primeuix/utils": "catalog:" + } +} diff --git a/packages/core/src/public_api.ts b/packages/core/src/public_api.ts new file mode 100644 index 00000000000..6e0d5ad10be --- /dev/null +++ b/packages/core/src/public_api.ts @@ -0,0 +1,5 @@ +export * from '@primeng/core/api'; +export * from '@primeng/core/base'; +export * from '@primeng/core/basecomponent'; +export * from '@primeng/core/config'; +export * from '@primeng/core/usestyle'; diff --git a/packages/core/src/tsconfig.lib.json b/packages/core/src/tsconfig.lib.json new file mode 100644 index 00000000000..1e45a7474c5 --- /dev/null +++ b/packages/core/src/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "../../../tsconfig.json", + "angularCompilerOptions": { + "annotateForClosureCompiler": false, + "strictTemplates": false, + "strictMetadataEmit": true, + "skipTemplateCodegen": true, + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "flatModuleOutFile": "primeng-core.js", + "flatModuleId": "primeng-core" + } +} diff --git a/packages/primeng/src/icons/angledoubleleft/ng-package.json b/packages/core/src/usestyle/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angledoubleleft/ng-package.json rename to packages/core/src/usestyle/ng-package.json diff --git a/packages/primeng/src/usestyle/public_api.ts b/packages/core/src/usestyle/public_api.ts similarity index 100% rename from packages/primeng/src/usestyle/public_api.ts rename to packages/core/src/usestyle/public_api.ts diff --git a/packages/primeng/src/usestyle/usestyle.ts b/packages/core/src/usestyle/usestyle.ts similarity index 87% rename from packages/primeng/src/usestyle/usestyle.ts rename to packages/core/src/usestyle/usestyle.ts index 6eeb7fc267c..c694bb8732b 100644 --- a/packages/primeng/src/usestyle/usestyle.ts +++ b/packages/core/src/usestyle/usestyle.ts @@ -1,6 +1,6 @@ import { DOCUMENT } from '@angular/common'; import { Injectable, inject } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; +import { setAttribute, setAttributes } from '@primeuix/utils'; let _id = 0; @@ -20,14 +20,14 @@ export class UseStyle { if (!styleRef.isConnected) { cssRef = css; - DomHandler.setAttributes(styleRef, { + setAttributes(styleRef, { type: 'text/css', media, nonce }); first ? this.document.head.prepend(styleRef) : this.document.head.appendChild(styleRef); - DomHandler.setAttribute(styleRef, 'data-primeng-style-id', name); + setAttribute(styleRef, 'data-primeng-style-id', name); } if (styleRef.textContent !== cssRef) { diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json new file mode 100644 index 00000000000..b1709251ad0 --- /dev/null +++ b/packages/core/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.json", + "angularCompilerOptions": { + "disableTypeScriptVersionCheck": true, + "fullTemplateTypeCheck": false, + "annotateForClosureCompiler": false, + "strictTemplates": false, + "strictMetadataEmit": true, + "skipTemplateCodegen": true, + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "flatModuleOutFile": "primeng.js", + "flatModuleId": "primeng" + } +} diff --git a/packages/icons/README.md b/packages/icons/README.md new file mode 100644 index 00000000000..58e747cf481 --- /dev/null +++ b/packages/icons/README.md @@ -0,0 +1 @@ +# PrimeNG Icons diff --git a/packages/icons/angular.json b/packages/icons/angular.json new file mode 100644 index 00000000000..78715c47727 --- /dev/null +++ b/packages/icons/angular.json @@ -0,0 +1,20 @@ +{ + "$schema": "../../node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "primeng-icons": { + "root": "src", + "projectType": "library", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "project": "src/ng-package.json", + "tsConfig": "src/tsconfig.lib.json" + } + } + } + } + } +} diff --git a/packages/icons/package.json b/packages/icons/package.json new file mode 100644 index 00000000000..ec183ecc915 --- /dev/null +++ b/packages/icons/package.json @@ -0,0 +1,53 @@ +{ + "name": "@primeng/icons", + "version": "4.2.1", + "author": "PrimeTek Informatics", + "description": "", + "homepage": "https://primeng.org/", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/primefaces/primeng.git", + "directory": "packages/icons" + }, + "bugs": { + "url": "https://github.com/primefaces/primeng/issues" + }, + "main": "./src/index.js", + "module": "./src/index.js", + "types": "./src/index.d.ts", + "exports": { + "./*": "./*" + }, + "publishConfig": { + "main": "./index.mjs", + "module": "./index.mjs", + "types": "./index.d.ts", + "exports": { + ".": { + "types": "./index.d.ts", + "import": "./index.mjs", + "default": "./index.mjs" + }, + "./*": { + "types": "./*/index.d.ts", + "import": "./*/index.mjs", + "default": "./*/index.mjs" + } + }, + "directory": "dist", + "linkDirectory": false, + "access": "public" + }, + "scripts": { + "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package", + "build:package": "pnpm run build:prebuild && ng build primeng-icons && pnpm run build:postbuild", + "build:prebuild": "node ./scripts/prebuild.mjs", + "build:postbuild": "node ./scripts/postbuild.mjs", + "dev:link": "pnpm link --global && npm link" + }, + "dependencies": { + "@primeuix/utils": "catalog:", + "@primeng/core": "workspace:*" + } +} diff --git a/packages/primeng/src/icons/angledoubledown/angledoubledown.ts b/packages/icons/src/angledoubledown/angledoubledown.ts similarity index 97% rename from packages/primeng/src/icons/angledoubledown/angledoubledown.ts rename to packages/icons/src/angledoubledown/angledoubledown.ts index 431eb4c1bf4..35730d314a6 100644 --- a/packages/primeng/src/icons/angledoubledown/angledoubledown.ts +++ b/packages/icons/src/angledoubledown/angledoubledown.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleDoubleDownIcon', diff --git a/packages/primeng/src/icons/angledoubleright/ng-package.json b/packages/icons/src/angledoubledown/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angledoubleright/ng-package.json rename to packages/icons/src/angledoubledown/ng-package.json diff --git a/packages/primeng/src/icons/angledoubledown/public_api.ts b/packages/icons/src/angledoubledown/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angledoubledown/public_api.ts rename to packages/icons/src/angledoubledown/public_api.ts diff --git a/packages/primeng/src/icons/angledoubleleft/angledoubleleft.ts b/packages/icons/src/angledoubleleft/angledoubleleft.ts similarity index 97% rename from packages/primeng/src/icons/angledoubleleft/angledoubleleft.ts rename to packages/icons/src/angledoubleleft/angledoubleleft.ts index 88461cb2988..3ca1c745e61 100644 --- a/packages/primeng/src/icons/angledoubleleft/angledoubleleft.ts +++ b/packages/icons/src/angledoubleleft/angledoubleleft.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleDoubleLeftIcon', diff --git a/packages/primeng/src/icons/angledoubleup/ng-package.json b/packages/icons/src/angledoubleleft/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angledoubleup/ng-package.json rename to packages/icons/src/angledoubleleft/ng-package.json diff --git a/packages/primeng/src/icons/angledoubleleft/public_api.ts b/packages/icons/src/angledoubleleft/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angledoubleleft/public_api.ts rename to packages/icons/src/angledoubleleft/public_api.ts diff --git a/packages/primeng/src/icons/angledoubleright/angledoubleright.ts b/packages/icons/src/angledoubleright/angledoubleright.ts similarity index 97% rename from packages/primeng/src/icons/angledoubleright/angledoubleright.ts rename to packages/icons/src/angledoubleright/angledoubleright.ts index 4ddccdea28c..916bb7fdb29 100644 --- a/packages/primeng/src/icons/angledoubleright/angledoubleright.ts +++ b/packages/icons/src/angledoubleright/angledoubleright.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleDoubleRightIcon', diff --git a/packages/primeng/src/icons/angledown/ng-package.json b/packages/icons/src/angledoubleright/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angledown/ng-package.json rename to packages/icons/src/angledoubleright/ng-package.json diff --git a/packages/primeng/src/icons/angledoubleright/public_api.ts b/packages/icons/src/angledoubleright/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angledoubleright/public_api.ts rename to packages/icons/src/angledoubleright/public_api.ts diff --git a/packages/primeng/src/icons/angledoubleup/angledoubleup.ts b/packages/icons/src/angledoubleup/angledoubleup.ts similarity index 97% rename from packages/primeng/src/icons/angledoubleup/angledoubleup.ts rename to packages/icons/src/angledoubleup/angledoubleup.ts index db4bb955908..12429b53080 100644 --- a/packages/primeng/src/icons/angledoubleup/angledoubleup.ts +++ b/packages/icons/src/angledoubleup/angledoubleup.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleDoubleUpIcon', diff --git a/packages/primeng/src/icons/angleleft/ng-package.json b/packages/icons/src/angledoubleup/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angleleft/ng-package.json rename to packages/icons/src/angledoubleup/ng-package.json diff --git a/packages/primeng/src/icons/angledoubleup/public_api.ts b/packages/icons/src/angledoubleup/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angledoubleup/public_api.ts rename to packages/icons/src/angledoubleup/public_api.ts diff --git a/packages/primeng/src/icons/angledown/angledown.ts b/packages/icons/src/angledown/angledown.ts similarity index 95% rename from packages/primeng/src/icons/angledown/angledown.ts rename to packages/icons/src/angledown/angledown.ts index 0865e1125b3..95094d39135 100644 --- a/packages/primeng/src/icons/angledown/angledown.ts +++ b/packages/icons/src/angledown/angledown.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleDownIcon', diff --git a/packages/primeng/src/icons/angleright/ng-package.json b/packages/icons/src/angledown/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angleright/ng-package.json rename to packages/icons/src/angledown/ng-package.json diff --git a/packages/primeng/src/icons/angledown/public_api.ts b/packages/icons/src/angledown/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angledown/public_api.ts rename to packages/icons/src/angledown/public_api.ts diff --git a/packages/primeng/src/icons/angleleft/angleleft.ts b/packages/icons/src/angleleft/angleleft.ts similarity index 95% rename from packages/primeng/src/icons/angleleft/angleleft.ts rename to packages/icons/src/angleleft/angleleft.ts index 0e629d14e19..3b3302fb02a 100644 --- a/packages/primeng/src/icons/angleleft/angleleft.ts +++ b/packages/icons/src/angleleft/angleleft.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleLeftIcon', diff --git a/packages/primeng/src/icons/angleup/ng-package.json b/packages/icons/src/angleleft/ng-package.json similarity index 100% rename from packages/primeng/src/icons/angleup/ng-package.json rename to packages/icons/src/angleleft/ng-package.json diff --git a/packages/primeng/src/icons/angleleft/public_api.ts b/packages/icons/src/angleleft/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angleleft/public_api.ts rename to packages/icons/src/angleleft/public_api.ts diff --git a/packages/primeng/src/icons/angleright/angleright.ts b/packages/icons/src/angleright/angleright.ts similarity index 95% rename from packages/primeng/src/icons/angleright/angleright.ts rename to packages/icons/src/angleright/angleright.ts index 452de38a179..716a43f3dbd 100644 --- a/packages/primeng/src/icons/angleright/angleright.ts +++ b/packages/icons/src/angleright/angleright.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleRightIcon', diff --git a/packages/primeng/src/icons/arrowdown/ng-package.json b/packages/icons/src/angleright/ng-package.json similarity index 100% rename from packages/primeng/src/icons/arrowdown/ng-package.json rename to packages/icons/src/angleright/ng-package.json diff --git a/packages/primeng/src/icons/angleright/public_api.ts b/packages/icons/src/angleright/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angleright/public_api.ts rename to packages/icons/src/angleright/public_api.ts diff --git a/packages/primeng/src/icons/angleup/angleup.ts b/packages/icons/src/angleup/angleup.ts similarity index 95% rename from packages/primeng/src/icons/angleup/angleup.ts rename to packages/icons/src/angleup/angleup.ts index c104f14d649..785d96fe3bd 100644 --- a/packages/primeng/src/icons/angleup/angleup.ts +++ b/packages/icons/src/angleup/angleup.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'AngleUpIcon', diff --git a/packages/primeng/src/icons/arrowdownleft/ng-package.json b/packages/icons/src/angleup/ng-package.json similarity index 100% rename from packages/primeng/src/icons/arrowdownleft/ng-package.json rename to packages/icons/src/angleup/ng-package.json diff --git a/packages/primeng/src/icons/angleup/public_api.ts b/packages/icons/src/angleup/public_api.ts similarity index 100% rename from packages/primeng/src/icons/angleup/public_api.ts rename to packages/icons/src/angleup/public_api.ts diff --git a/packages/primeng/src/icons/arrowdown/arrowdown.ts b/packages/icons/src/arrowdown/arrowdown.ts similarity index 92% rename from packages/primeng/src/icons/arrowdown/arrowdown.ts rename to packages/icons/src/arrowdown/arrowdown.ts index e44daaaa067..be9101b17b4 100644 --- a/packages/primeng/src/icons/arrowdown/arrowdown.ts +++ b/packages/icons/src/arrowdown/arrowdown.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'ArrowDownIcon', @@ -27,6 +27,6 @@ export class ArrowDownIcon extends BaseIcon implements OnInit { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/arrowdownright/ng-package.json b/packages/icons/src/arrowdown/ng-package.json similarity index 100% rename from packages/primeng/src/icons/arrowdownright/ng-package.json rename to packages/icons/src/arrowdown/ng-package.json diff --git a/packages/primeng/src/icons/arrowdown/public_api.ts b/packages/icons/src/arrowdown/public_api.ts similarity index 100% rename from packages/primeng/src/icons/arrowdown/public_api.ts rename to packages/icons/src/arrowdown/public_api.ts diff --git a/packages/primeng/src/icons/arrowdownleft/arrowdownleft.ts b/packages/icons/src/arrowdownleft/arrowdownleft.ts similarity index 96% rename from packages/primeng/src/icons/arrowdownleft/arrowdownleft.ts rename to packages/icons/src/arrowdownleft/arrowdownleft.ts index e5248f9cff3..71c0ecf8c0e 100644 --- a/packages/primeng/src/icons/arrowdownleft/arrowdownleft.ts +++ b/packages/icons/src/arrowdownleft/arrowdownleft.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ArrowDownLeftIcon', diff --git a/packages/primeng/src/icons/arrowleft/ng-package.json b/packages/icons/src/arrowdownleft/ng-package.json similarity index 100% rename from packages/primeng/src/icons/arrowleft/ng-package.json rename to packages/icons/src/arrowdownleft/ng-package.json diff --git a/packages/primeng/src/icons/arrowdownleft/public_api.ts b/packages/icons/src/arrowdownleft/public_api.ts similarity index 100% rename from packages/primeng/src/icons/arrowdownleft/public_api.ts rename to packages/icons/src/arrowdownleft/public_api.ts diff --git a/packages/primeng/src/icons/arrowdownright/arrowdownright.ts b/packages/icons/src/arrowdownright/arrowdownright.ts similarity index 96% rename from packages/primeng/src/icons/arrowdownright/arrowdownright.ts rename to packages/icons/src/arrowdownright/arrowdownright.ts index d668875e94c..4acbcc15959 100644 --- a/packages/primeng/src/icons/arrowdownright/arrowdownright.ts +++ b/packages/icons/src/arrowdownright/arrowdownright.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ArrowDownRightIcon', diff --git a/packages/primeng/src/icons/arrowright/ng-package.json b/packages/icons/src/arrowdownright/ng-package.json similarity index 100% rename from packages/primeng/src/icons/arrowright/ng-package.json rename to packages/icons/src/arrowdownright/ng-package.json diff --git a/packages/primeng/src/icons/arrowdownright/public_api.ts b/packages/icons/src/arrowdownright/public_api.ts similarity index 100% rename from packages/primeng/src/icons/arrowdownright/public_api.ts rename to packages/icons/src/arrowdownright/public_api.ts diff --git a/packages/primeng/src/icons/arrowleft/arrowleft.ts b/packages/icons/src/arrowleft/arrowleft.ts similarity index 92% rename from packages/primeng/src/icons/arrowleft/arrowleft.ts rename to packages/icons/src/arrowleft/arrowleft.ts index 2f3fe3bf1bc..0f731eb1ba5 100644 --- a/packages/primeng/src/icons/arrowleft/arrowleft.ts +++ b/packages/icons/src/arrowleft/arrowleft.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'ArrowLeftIcon', @@ -27,6 +27,6 @@ export class ArrowLeftIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/arrowup/ng-package.json b/packages/icons/src/arrowleft/ng-package.json similarity index 100% rename from packages/primeng/src/icons/arrowup/ng-package.json rename to packages/icons/src/arrowleft/ng-package.json diff --git a/packages/primeng/src/icons/arrowleft/public_api.ts b/packages/icons/src/arrowleft/public_api.ts similarity index 100% rename from packages/primeng/src/icons/arrowleft/public_api.ts rename to packages/icons/src/arrowleft/public_api.ts diff --git a/packages/primeng/src/icons/arrowright/arrowright.ts b/packages/icons/src/arrowright/arrowright.ts similarity index 96% rename from packages/primeng/src/icons/arrowright/arrowright.ts rename to packages/icons/src/arrowright/arrowright.ts index b027631e8d8..0068c9ce2a1 100644 --- a/packages/primeng/src/icons/arrowright/arrowright.ts +++ b/packages/icons/src/arrowright/arrowright.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ArrowRightIcon', diff --git a/packages/primeng/src/icons/ban/ng-package.json b/packages/icons/src/arrowright/ng-package.json similarity index 100% rename from packages/primeng/src/icons/ban/ng-package.json rename to packages/icons/src/arrowright/ng-package.json diff --git a/packages/primeng/src/icons/arrowright/public_api.ts b/packages/icons/src/arrowright/public_api.ts similarity index 100% rename from packages/primeng/src/icons/arrowright/public_api.ts rename to packages/icons/src/arrowright/public_api.ts diff --git a/packages/primeng/src/icons/arrowup/arrowup.ts b/packages/icons/src/arrowup/arrowup.ts similarity index 92% rename from packages/primeng/src/icons/arrowup/arrowup.ts rename to packages/icons/src/arrowup/arrowup.ts index 1e5ba963112..ac74a5e2482 100644 --- a/packages/primeng/src/icons/arrowup/arrowup.ts +++ b/packages/icons/src/arrowup/arrowup.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'ArrowUpIcon', @@ -27,6 +27,6 @@ export class ArrowUpIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/bars/ng-package.json b/packages/icons/src/arrowup/ng-package.json similarity index 100% rename from packages/primeng/src/icons/bars/ng-package.json rename to packages/icons/src/arrowup/ng-package.json diff --git a/packages/primeng/src/icons/arrowup/public_api.ts b/packages/icons/src/arrowup/public_api.ts similarity index 100% rename from packages/primeng/src/icons/arrowup/public_api.ts rename to packages/icons/src/arrowup/public_api.ts diff --git a/packages/primeng/src/icons/ban/ban.ts b/packages/icons/src/ban/ban.ts similarity index 91% rename from packages/primeng/src/icons/ban/ban.ts rename to packages/icons/src/ban/ban.ts index d19b0c6db0b..5164971e4a9 100644 --- a/packages/primeng/src/icons/ban/ban.ts +++ b/packages/icons/src/ban/ban.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'BanIcon', @@ -25,6 +25,6 @@ export class BanIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/blank/ng-package.json b/packages/icons/src/ban/ng-package.json similarity index 100% rename from packages/primeng/src/icons/blank/ng-package.json rename to packages/icons/src/ban/ng-package.json diff --git a/packages/primeng/src/icons/ban/public_api.ts b/packages/icons/src/ban/public_api.ts similarity index 100% rename from packages/primeng/src/icons/ban/public_api.ts rename to packages/icons/src/ban/public_api.ts diff --git a/packages/primeng/src/icons/bars/bars.ts b/packages/icons/src/bars/bars.ts similarity index 97% rename from packages/primeng/src/icons/bars/bars.ts rename to packages/icons/src/bars/bars.ts index 0406dc39bf6..a0116c1d113 100644 --- a/packages/primeng/src/icons/bars/bars.ts +++ b/packages/icons/src/bars/bars.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'BarsIcon', diff --git a/packages/primeng/src/icons/calendar/ng-package.json b/packages/icons/src/bars/ng-package.json similarity index 100% rename from packages/primeng/src/icons/calendar/ng-package.json rename to packages/icons/src/bars/ng-package.json diff --git a/packages/primeng/src/icons/bars/public_api.ts b/packages/icons/src/bars/public_api.ts similarity index 100% rename from packages/primeng/src/icons/bars/public_api.ts rename to packages/icons/src/bars/public_api.ts diff --git a/packages/primeng/src/baseicon/baseicon.ts b/packages/icons/src/baseicon/baseicon.ts similarity index 87% rename from packages/primeng/src/baseicon/baseicon.ts rename to packages/icons/src/baseicon/baseicon.ts index 25d5039ad2b..df607b07f11 100644 --- a/packages/primeng/src/baseicon/baseicon.ts +++ b/packages/icons/src/baseicon/baseicon.ts @@ -1,6 +1,6 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; -import { ObjectUtils } from 'primeng/utils'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core/basecomponent'; +import { isEmpty } from '@primeuix/utils'; import { BaseIconStyle } from './style/baseiconstyle'; @Component({ @@ -32,7 +32,7 @@ export class BaseIcon extends BaseComponent implements OnInit { } getAttributes() { - const isLabelEmpty = ObjectUtils.isEmpty(this.label); + const isLabelEmpty = isEmpty(this.label); this.role = !isLabelEmpty ? 'img' : undefined; this.ariaLabel = !isLabelEmpty ? this.label : undefined; this.ariaHidden = isLabelEmpty; diff --git a/packages/primeng/src/icons/caretleft/ng-package.json b/packages/icons/src/baseicon/ng-package.json similarity index 100% rename from packages/primeng/src/icons/caretleft/ng-package.json rename to packages/icons/src/baseicon/ng-package.json diff --git a/packages/primeng/src/baseicon/public_api.ts b/packages/icons/src/baseicon/public_api.ts similarity index 100% rename from packages/primeng/src/baseicon/public_api.ts rename to packages/icons/src/baseicon/public_api.ts diff --git a/packages/primeng/src/baseicon/style/baseiconstyle.ts b/packages/icons/src/baseicon/style/baseiconstyle.ts similarity index 95% rename from packages/primeng/src/baseicon/style/baseiconstyle.ts rename to packages/icons/src/baseicon/style/baseiconstyle.ts index 0a9a7de2ac0..fbc6babf7a4 100644 --- a/packages/primeng/src/baseicon/style/baseiconstyle.ts +++ b/packages/icons/src/baseicon/style/baseiconstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const css = ` .p-icon { diff --git a/packages/primeng/src/icons/blank/blank.ts b/packages/icons/src/blank/blank.ts similarity index 87% rename from packages/primeng/src/icons/blank/blank.ts rename to packages/icons/src/blank/blank.ts index 9f2a38d5a0e..ff9a7bddc53 100644 --- a/packages/primeng/src/icons/blank/blank.ts +++ b/packages/icons/src/blank/blank.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'BlankIcon', diff --git a/packages/primeng/src/icons/caretright/ng-package.json b/packages/icons/src/blank/ng-package.json similarity index 100% rename from packages/primeng/src/icons/caretright/ng-package.json rename to packages/icons/src/blank/ng-package.json diff --git a/packages/primeng/src/icons/blank/public_api.ts b/packages/icons/src/blank/public_api.ts similarity index 100% rename from packages/primeng/src/icons/blank/public_api.ts rename to packages/icons/src/blank/public_api.ts diff --git a/packages/primeng/src/icons/calendar/calendar.ts b/packages/icons/src/calendar/calendar.ts similarity index 97% rename from packages/primeng/src/icons/calendar/calendar.ts rename to packages/icons/src/calendar/calendar.ts index 0fed5c97583..cadec047075 100644 --- a/packages/primeng/src/icons/calendar/calendar.ts +++ b/packages/icons/src/calendar/calendar.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'CalendarIcon', diff --git a/packages/primeng/src/icons/check/ng-package.json b/packages/icons/src/calendar/ng-package.json similarity index 100% rename from packages/primeng/src/icons/check/ng-package.json rename to packages/icons/src/calendar/ng-package.json diff --git a/packages/primeng/src/icons/calendar/public_api.ts b/packages/icons/src/calendar/public_api.ts similarity index 100% rename from packages/primeng/src/icons/calendar/public_api.ts rename to packages/icons/src/calendar/public_api.ts diff --git a/packages/primeng/src/icons/caretleft/caretleft.ts b/packages/icons/src/caretleft/caretleft.ts similarity index 95% rename from packages/primeng/src/icons/caretleft/caretleft.ts rename to packages/icons/src/caretleft/caretleft.ts index fcdae02fdeb..c6ee5280c80 100644 --- a/packages/primeng/src/icons/caretleft/caretleft.ts +++ b/packages/icons/src/caretleft/caretleft.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'CaretLeftIcon', diff --git a/packages/primeng/src/icons/chevrondown/ng-package.json b/packages/icons/src/caretleft/ng-package.json similarity index 100% rename from packages/primeng/src/icons/chevrondown/ng-package.json rename to packages/icons/src/caretleft/ng-package.json diff --git a/packages/primeng/src/icons/caretleft/public_api.ts b/packages/icons/src/caretleft/public_api.ts similarity index 100% rename from packages/primeng/src/icons/caretleft/public_api.ts rename to packages/icons/src/caretleft/public_api.ts diff --git a/packages/primeng/src/icons/caretright/caretright.ts b/packages/icons/src/caretright/caretright.ts similarity index 95% rename from packages/primeng/src/icons/caretright/caretright.ts rename to packages/icons/src/caretright/caretright.ts index ecffd58263f..e37b640f0e9 100644 --- a/packages/primeng/src/icons/caretright/caretright.ts +++ b/packages/icons/src/caretright/caretright.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'CaretRightIcon', diff --git a/packages/primeng/src/icons/chevronleft/ng-package.json b/packages/icons/src/caretright/ng-package.json similarity index 100% rename from packages/primeng/src/icons/chevronleft/ng-package.json rename to packages/icons/src/caretright/ng-package.json diff --git a/packages/primeng/src/icons/caretright/public_api.ts b/packages/icons/src/caretright/public_api.ts similarity index 100% rename from packages/primeng/src/icons/caretright/public_api.ts rename to packages/icons/src/caretright/public_api.ts diff --git a/packages/primeng/src/icons/check/check.ts b/packages/icons/src/check/check.ts similarity index 96% rename from packages/primeng/src/icons/check/check.ts rename to packages/icons/src/check/check.ts index 530c6bc638c..3ebc0df1270 100644 --- a/packages/primeng/src/icons/check/check.ts +++ b/packages/icons/src/check/check.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'CheckIcon', diff --git a/packages/primeng/src/icons/chevronright/ng-package.json b/packages/icons/src/check/ng-package.json similarity index 100% rename from packages/primeng/src/icons/chevronright/ng-package.json rename to packages/icons/src/check/ng-package.json diff --git a/packages/primeng/src/icons/check/public_api.ts b/packages/icons/src/check/public_api.ts similarity index 100% rename from packages/primeng/src/icons/check/public_api.ts rename to packages/icons/src/check/public_api.ts diff --git a/packages/primeng/src/icons/chevrondown/chevrondown.ts b/packages/icons/src/chevrondown/chevrondown.ts similarity index 95% rename from packages/primeng/src/icons/chevrondown/chevrondown.ts rename to packages/icons/src/chevrondown/chevrondown.ts index fd2549d05a1..36509f40939 100644 --- a/packages/primeng/src/icons/chevrondown/chevrondown.ts +++ b/packages/icons/src/chevrondown/chevrondown.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ChevronDownIcon', diff --git a/packages/primeng/src/icons/chevronup/ng-package.json b/packages/icons/src/chevrondown/ng-package.json similarity index 100% rename from packages/primeng/src/icons/chevronup/ng-package.json rename to packages/icons/src/chevrondown/ng-package.json diff --git a/packages/primeng/src/icons/chevrondown/public_api.ts b/packages/icons/src/chevrondown/public_api.ts similarity index 100% rename from packages/primeng/src/icons/chevrondown/public_api.ts rename to packages/icons/src/chevrondown/public_api.ts diff --git a/packages/primeng/src/icons/chevronleft/chevronleft.ts b/packages/icons/src/chevronleft/chevronleft.ts similarity index 95% rename from packages/primeng/src/icons/chevronleft/chevronleft.ts rename to packages/icons/src/chevronleft/chevronleft.ts index b5dd9e14a8f..086985520fd 100644 --- a/packages/primeng/src/icons/chevronleft/chevronleft.ts +++ b/packages/icons/src/chevronleft/chevronleft.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ChevronLeftIcon', diff --git a/packages/primeng/src/icons/exclamationtriangle/ng-package.json b/packages/icons/src/chevronleft/ng-package.json similarity index 100% rename from packages/primeng/src/icons/exclamationtriangle/ng-package.json rename to packages/icons/src/chevronleft/ng-package.json diff --git a/packages/primeng/src/icons/chevronleft/public_api.ts b/packages/icons/src/chevronleft/public_api.ts similarity index 100% rename from packages/primeng/src/icons/chevronleft/public_api.ts rename to packages/icons/src/chevronleft/public_api.ts diff --git a/packages/primeng/src/icons/chevronright/chevronright.ts b/packages/icons/src/chevronright/chevronright.ts similarity index 95% rename from packages/primeng/src/icons/chevronright/chevronright.ts rename to packages/icons/src/chevronright/chevronright.ts index 3f1185fe904..4fd134caef6 100644 --- a/packages/primeng/src/icons/chevronright/chevronright.ts +++ b/packages/icons/src/chevronright/chevronright.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ChevronRightIcon', diff --git a/packages/primeng/src/icons/eye/ng-package.json b/packages/icons/src/chevronright/ng-package.json similarity index 100% rename from packages/primeng/src/icons/eye/ng-package.json rename to packages/icons/src/chevronright/ng-package.json diff --git a/packages/primeng/src/icons/chevronright/public_api.ts b/packages/icons/src/chevronright/public_api.ts similarity index 100% rename from packages/primeng/src/icons/chevronright/public_api.ts rename to packages/icons/src/chevronright/public_api.ts diff --git a/packages/primeng/src/icons/chevronup/chevronup.ts b/packages/icons/src/chevronup/chevronup.ts similarity index 95% rename from packages/primeng/src/icons/chevronup/chevronup.ts rename to packages/icons/src/chevronup/chevronup.ts index 56001099c2f..57e4ba5c823 100644 --- a/packages/primeng/src/icons/chevronup/chevronup.ts +++ b/packages/icons/src/chevronup/chevronup.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'ChevronUpIcon', diff --git a/packages/primeng/src/icons/eyeslash/ng-package.json b/packages/icons/src/chevronup/ng-package.json similarity index 100% rename from packages/primeng/src/icons/eyeslash/ng-package.json rename to packages/icons/src/chevronup/ng-package.json diff --git a/packages/primeng/src/icons/chevronup/public_api.ts b/packages/icons/src/chevronup/public_api.ts similarity index 100% rename from packages/primeng/src/icons/chevronup/public_api.ts rename to packages/icons/src/chevronup/public_api.ts diff --git a/packages/primeng/src/icons/exclamationtriangle/exclamationtriangle.ts b/packages/icons/src/exclamationtriangle/exclamationtriangle.ts similarity index 94% rename from packages/primeng/src/icons/exclamationtriangle/exclamationtriangle.ts rename to packages/icons/src/exclamationtriangle/exclamationtriangle.ts index 0643a484170..6c10bbd9bbd 100644 --- a/packages/primeng/src/icons/exclamationtriangle/exclamationtriangle.ts +++ b/packages/icons/src/exclamationtriangle/exclamationtriangle.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'ExclamationTriangleIcon', @@ -33,6 +33,6 @@ export class ExclamationTriangleIcon extends BaseIcon implements OnInit { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/filter/ng-package.json b/packages/icons/src/exclamationtriangle/ng-package.json similarity index 100% rename from packages/primeng/src/icons/filter/ng-package.json rename to packages/icons/src/exclamationtriangle/ng-package.json diff --git a/packages/primeng/src/icons/exclamationtriangle/public_api.ts b/packages/icons/src/exclamationtriangle/public_api.ts similarity index 100% rename from packages/primeng/src/icons/exclamationtriangle/public_api.ts rename to packages/icons/src/exclamationtriangle/public_api.ts diff --git a/packages/primeng/src/icons/eye/eye.ts b/packages/icons/src/eye/eye.ts similarity index 97% rename from packages/primeng/src/icons/eye/eye.ts rename to packages/icons/src/eye/eye.ts index 06897b1a4c1..15accfe57c1 100644 --- a/packages/primeng/src/icons/eye/eye.ts +++ b/packages/icons/src/eye/eye.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'EyeIcon', diff --git a/packages/primeng/src/icons/filterslash/ng-package.json b/packages/icons/src/eye/ng-package.json similarity index 100% rename from packages/primeng/src/icons/filterslash/ng-package.json rename to packages/icons/src/eye/ng-package.json diff --git a/packages/primeng/src/icons/eye/public_api.ts b/packages/icons/src/eye/public_api.ts similarity index 100% rename from packages/primeng/src/icons/eye/public_api.ts rename to packages/icons/src/eye/public_api.ts diff --git a/packages/primeng/src/icons/eyeslash/eyeslash.ts b/packages/icons/src/eyeslash/eyeslash.ts similarity index 95% rename from packages/primeng/src/icons/eyeslash/eyeslash.ts rename to packages/icons/src/eyeslash/eyeslash.ts index 67709e06e23..993aa669496 100644 --- a/packages/primeng/src/icons/eyeslash/eyeslash.ts +++ b/packages/icons/src/eyeslash/eyeslash.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'EyeSlashIcon', @@ -27,6 +27,6 @@ export class EyeSlashIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/home/ng-package.json b/packages/icons/src/eyeslash/ng-package.json similarity index 100% rename from packages/primeng/src/icons/home/ng-package.json rename to packages/icons/src/eyeslash/ng-package.json diff --git a/packages/primeng/src/icons/eyeslash/public_api.ts b/packages/icons/src/eyeslash/public_api.ts similarity index 100% rename from packages/primeng/src/icons/eyeslash/public_api.ts rename to packages/icons/src/eyeslash/public_api.ts diff --git a/packages/primeng/src/icons/filter/filter.ts b/packages/icons/src/filter/filter.ts similarity index 91% rename from packages/primeng/src/icons/filter/filter.ts rename to packages/icons/src/filter/filter.ts index 99ac8558567..0447e02cc16 100644 --- a/packages/primeng/src/icons/filter/filter.ts +++ b/packages/icons/src/filter/filter.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'FilterIcon', @@ -25,6 +25,6 @@ export class FilterIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/infocircle/ng-package.json b/packages/icons/src/filter/ng-package.json similarity index 100% rename from packages/primeng/src/icons/infocircle/ng-package.json rename to packages/icons/src/filter/ng-package.json diff --git a/packages/primeng/src/icons/filter/public_api.ts b/packages/icons/src/filter/public_api.ts similarity index 100% rename from packages/primeng/src/icons/filter/public_api.ts rename to packages/icons/src/filter/public_api.ts diff --git a/packages/primeng/src/icons/filterslash/filterslash.ts b/packages/icons/src/filterslash/filterslash.ts similarity index 94% rename from packages/primeng/src/icons/filterslash/filterslash.ts rename to packages/icons/src/filterslash/filterslash.ts index 895692b89e5..44e2909463f 100644 --- a/packages/primeng/src/icons/filterslash/filterslash.ts +++ b/packages/icons/src/filterslash/filterslash.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'FilterSlashIcon', @@ -27,6 +27,6 @@ export class FilterSlashIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/minus/ng-package.json b/packages/icons/src/filterslash/ng-package.json similarity index 100% rename from packages/primeng/src/icons/minus/ng-package.json rename to packages/icons/src/filterslash/ng-package.json diff --git a/packages/primeng/src/icons/filterslash/public_api.ts b/packages/icons/src/filterslash/public_api.ts similarity index 100% rename from packages/primeng/src/icons/filterslash/public_api.ts rename to packages/icons/src/filterslash/public_api.ts diff --git a/packages/primeng/src/icons/home/home.ts b/packages/icons/src/home/home.ts similarity index 93% rename from packages/primeng/src/icons/home/home.ts rename to packages/icons/src/home/home.ts index 215d1dda343..b757e1cbcd3 100644 --- a/packages/primeng/src/icons/home/home.ts +++ b/packages/icons/src/home/home.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'HomeIcon', @@ -27,6 +27,6 @@ export class HomeIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/pencil/ng-package.json b/packages/icons/src/home/ng-package.json similarity index 100% rename from packages/primeng/src/icons/pencil/ng-package.json rename to packages/icons/src/home/ng-package.json diff --git a/packages/primeng/src/icons/home/public_api.ts b/packages/icons/src/home/public_api.ts similarity index 100% rename from packages/primeng/src/icons/home/public_api.ts rename to packages/icons/src/home/public_api.ts diff --git a/packages/primeng/src/icons/infocircle/infocircle.ts b/packages/icons/src/infocircle/infocircle.ts similarity index 94% rename from packages/primeng/src/icons/infocircle/infocircle.ts rename to packages/icons/src/infocircle/infocircle.ts index a395281e38e..2879485c5e8 100644 --- a/packages/primeng/src/icons/infocircle/infocircle.ts +++ b/packages/icons/src/infocircle/infocircle.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'InfoCircleIcon', @@ -27,6 +27,6 @@ export class InfoCircleIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/plus/ng-package.json b/packages/icons/src/infocircle/ng-package.json similarity index 100% rename from packages/primeng/src/icons/plus/ng-package.json rename to packages/icons/src/infocircle/ng-package.json diff --git a/packages/primeng/src/icons/infocircle/public_api.ts b/packages/icons/src/infocircle/public_api.ts similarity index 100% rename from packages/primeng/src/icons/infocircle/public_api.ts rename to packages/icons/src/infocircle/public_api.ts diff --git a/packages/primeng/src/icons/minus/minus.ts b/packages/icons/src/minus/minus.ts similarity index 94% rename from packages/primeng/src/icons/minus/minus.ts rename to packages/icons/src/minus/minus.ts index 282fa20949f..8d020e37503 100644 --- a/packages/primeng/src/icons/minus/minus.ts +++ b/packages/icons/src/minus/minus.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'MinusIcon', diff --git a/packages/primeng/src/icons/refresh/ng-package.json b/packages/icons/src/minus/ng-package.json similarity index 100% rename from packages/primeng/src/icons/refresh/ng-package.json rename to packages/icons/src/minus/ng-package.json diff --git a/packages/primeng/src/icons/minus/public_api.ts b/packages/icons/src/minus/public_api.ts similarity index 100% rename from packages/primeng/src/icons/minus/public_api.ts rename to packages/icons/src/minus/public_api.ts diff --git a/packages/icons/src/ng-package.json b/packages/icons/src/ng-package.json new file mode 100644 index 00000000000..25d1dcbae54 --- /dev/null +++ b/packages/icons/src/ng-package.json @@ -0,0 +1,9 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../dist", + "deleteDestPath": true, + "lib": { + "entryFile": "public_api.ts" + }, + "allowedNonPeerDependencies": ["@primeuix/utils"] +} diff --git a/packages/icons/src/package.json b/packages/icons/src/package.json new file mode 100644 index 00000000000..721543f4788 --- /dev/null +++ b/packages/icons/src/package.json @@ -0,0 +1,54 @@ +{ + "name": "primeng", + "version": "4.2.1", + "author": "PrimeTek Informatics", + "description": "PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.", + "homepage": "https://primeng.org/", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/primefaces/primeng.git", + "directory": "packages/primeng" + }, + "bugs": { + "url": "https://github.com/primefaces/primeng/issues" + }, + "keywords": ["primeng", "angular", "ui library", "component library", "material", "bootstrap", "fluent", "tailwind"], + "main": "./src/index.js", + "module": "./src/index.js", + "types": "./src/index.d.ts", + "publishConfig": { + "main": "./index.mjs", + "module": "./index.mjs", + "types": "./index.d.ts", + "exports": { + ".": { + "types": "./index.d.ts", + "import": "./index.mjs", + "default": "./index.mjs" + }, + "./*": { + "types": "./*/index.d.ts", + "import": "./*/index.mjs", + "default": "./*/index.mjs" + } + }, + "directory": "dist", + "linkDirectory": false, + "access": "public" + }, + "peerDependencies": { + "@angular/animations": "^17.0.0 || ^18.0.0", + "@angular/cdk": "^17.0.0 || ^18.0.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "@angular/router": "^17.0.0 || ^18.0.0", + "rxjs": "^6.0.0 || ^7.8.1", + "zone.js": "~0.14.0" + }, + "dependencies": { + "@primeuix/styled": "catalog:", + "@primeuix/utils": "catalog:" + } +} diff --git a/packages/primeng/src/icons/search/ng-package.json b/packages/icons/src/pencil/ng-package.json similarity index 100% rename from packages/primeng/src/icons/search/ng-package.json rename to packages/icons/src/pencil/ng-package.json diff --git a/packages/primeng/src/icons/pencil/pencil.ts b/packages/icons/src/pencil/pencil.ts similarity index 91% rename from packages/primeng/src/icons/pencil/pencil.ts rename to packages/icons/src/pencil/pencil.ts index b515b3e9532..99b0742ef44 100644 --- a/packages/primeng/src/icons/pencil/pencil.ts +++ b/packages/icons/src/pencil/pencil.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'PencilIcon', @@ -25,6 +25,6 @@ export class PencilIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/pencil/public_api.ts b/packages/icons/src/pencil/public_api.ts similarity index 100% rename from packages/primeng/src/icons/pencil/public_api.ts rename to packages/icons/src/pencil/public_api.ts diff --git a/packages/primeng/src/icons/searchminus/ng-package.json b/packages/icons/src/plus/ng-package.json similarity index 100% rename from packages/primeng/src/icons/searchminus/ng-package.json rename to packages/icons/src/plus/ng-package.json diff --git a/packages/primeng/src/icons/plus/plus.ts b/packages/icons/src/plus/plus.ts similarity index 91% rename from packages/primeng/src/icons/plus/plus.ts rename to packages/icons/src/plus/plus.ts index b9a4d8a25a3..ba28c971a72 100644 --- a/packages/primeng/src/icons/plus/plus.ts +++ b/packages/icons/src/plus/plus.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'PlusIcon', @@ -25,6 +25,6 @@ export class PlusIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/plus/public_api.ts b/packages/icons/src/plus/public_api.ts similarity index 100% rename from packages/primeng/src/icons/plus/public_api.ts rename to packages/icons/src/plus/public_api.ts diff --git a/packages/icons/src/public_api.ts b/packages/icons/src/public_api.ts new file mode 100644 index 00000000000..49de01498ea --- /dev/null +++ b/packages/icons/src/public_api.ts @@ -0,0 +1,48 @@ +export * from '@primeng/icons/angledoubledown'; +export * from '@primeng/icons/angledoubleleft'; +export * from '@primeng/icons/angledoubleright'; +export * from '@primeng/icons/angledoubleup'; +export * from '@primeng/icons/angledown'; +export * from '@primeng/icons/angleleft'; +export * from '@primeng/icons/angleright'; +export * from '@primeng/icons/angleup'; +export * from '@primeng/icons/arrowdown'; +export * from '@primeng/icons/arrowup'; +export * from '@primeng/icons/ban'; +export * from '@primeng/icons/bars'; +export * from '@primeng/icons/baseicon'; +export * from '@primeng/icons/blank'; +export * from '@primeng/icons/calendar'; +export * from '@primeng/icons/check'; +export * from '@primeng/icons/chevrondown'; +export * from '@primeng/icons/chevronleft'; +export * from '@primeng/icons/chevronright'; +export * from '@primeng/icons/chevronup'; +export * from '@primeng/icons/exclamationtriangle'; +export * from '@primeng/icons/eye'; +export * from '@primeng/icons/eyeslash'; +export * from '@primeng/icons/filter'; +export * from '@primeng/icons/filterslash'; +export * from '@primeng/icons/home'; +export * from '@primeng/icons/infocircle'; +export * from '@primeng/icons/minus'; +export * from '@primeng/icons/pencil'; +export * from '@primeng/icons/plus'; +export * from '@primeng/icons/refresh'; +export * from '@primeng/icons/search'; +export * from '@primeng/icons/searchminus'; +export * from '@primeng/icons/searchplus'; +export * from '@primeng/icons/sortalt'; +export * from '@primeng/icons/sortamountdown'; +export * from '@primeng/icons/sortamountupalt'; +export * from '@primeng/icons/spinner'; +export * from '@primeng/icons/star'; +export * from '@primeng/icons/starfill'; +export * from '@primeng/icons/thlarge'; +export * from '@primeng/icons/times'; +export * from '@primeng/icons/timescircle'; +export * from '@primeng/icons/trash'; +export * from '@primeng/icons/undo'; +export * from '@primeng/icons/upload'; +export * from '@primeng/icons/windowmaximize'; +export * from '@primeng/icons/windowminimize'; diff --git a/packages/primeng/src/icons/searchplus/ng-package.json b/packages/icons/src/refresh/ng-package.json similarity index 100% rename from packages/primeng/src/icons/searchplus/ng-package.json rename to packages/icons/src/refresh/ng-package.json diff --git a/packages/primeng/src/icons/refresh/public_api.ts b/packages/icons/src/refresh/public_api.ts similarity index 100% rename from packages/primeng/src/icons/refresh/public_api.ts rename to packages/icons/src/refresh/public_api.ts diff --git a/packages/primeng/src/icons/refresh/refresh.ts b/packages/icons/src/refresh/refresh.ts similarity index 94% rename from packages/primeng/src/icons/refresh/refresh.ts rename to packages/icons/src/refresh/refresh.ts index 6830115b9db..9371f5bb5c2 100644 --- a/packages/primeng/src/icons/refresh/refresh.ts +++ b/packages/icons/src/refresh/refresh.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'RefreshIcon', @@ -27,6 +27,6 @@ export class RefreshIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/sortalt/ng-package.json b/packages/icons/src/search/ng-package.json similarity index 100% rename from packages/primeng/src/icons/sortalt/ng-package.json rename to packages/icons/src/search/ng-package.json diff --git a/packages/primeng/src/icons/search/public_api.ts b/packages/icons/src/search/public_api.ts similarity index 100% rename from packages/primeng/src/icons/search/public_api.ts rename to packages/icons/src/search/public_api.ts diff --git a/packages/primeng/src/icons/search/search.ts b/packages/icons/src/search/search.ts similarity index 93% rename from packages/primeng/src/icons/search/search.ts rename to packages/icons/src/search/search.ts index d5b9dbf9a6f..fb41c32327f 100644 --- a/packages/primeng/src/icons/search/search.ts +++ b/packages/icons/src/search/search.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SearchIcon', @@ -27,6 +27,6 @@ export class SearchIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/sortamountdown/ng-package.json b/packages/icons/src/searchminus/ng-package.json similarity index 100% rename from packages/primeng/src/icons/sortamountdown/ng-package.json rename to packages/icons/src/searchminus/ng-package.json diff --git a/packages/primeng/src/icons/searchminus/public_api.ts b/packages/icons/src/searchminus/public_api.ts similarity index 100% rename from packages/primeng/src/icons/searchminus/public_api.ts rename to packages/icons/src/searchminus/public_api.ts diff --git a/packages/primeng/src/icons/searchminus/searchminus.ts b/packages/icons/src/searchminus/searchminus.ts similarity index 94% rename from packages/primeng/src/icons/searchminus/searchminus.ts rename to packages/icons/src/searchminus/searchminus.ts index b2ba16b1bea..8d423b6950e 100644 --- a/packages/primeng/src/icons/searchminus/searchminus.ts +++ b/packages/icons/src/searchminus/searchminus.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SearchMinusIcon', @@ -27,6 +27,6 @@ export class SearchMinusIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/sortamountupalt/ng-package.json b/packages/icons/src/searchplus/ng-package.json similarity index 100% rename from packages/primeng/src/icons/sortamountupalt/ng-package.json rename to packages/icons/src/searchplus/ng-package.json diff --git a/packages/primeng/src/icons/searchplus/public_api.ts b/packages/icons/src/searchplus/public_api.ts similarity index 100% rename from packages/primeng/src/icons/searchplus/public_api.ts rename to packages/icons/src/searchplus/public_api.ts diff --git a/packages/primeng/src/icons/searchplus/searchplus.ts b/packages/icons/src/searchplus/searchplus.ts similarity index 95% rename from packages/primeng/src/icons/searchplus/searchplus.ts rename to packages/icons/src/searchplus/searchplus.ts index 1875ebd4a0a..95e6931d696 100644 --- a/packages/primeng/src/icons/searchplus/searchplus.ts +++ b/packages/icons/src/searchplus/searchplus.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SearchPlusIcon', @@ -27,6 +27,6 @@ export class SearchPlusIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/spinner/ng-package.json b/packages/icons/src/sortalt/ng-package.json similarity index 100% rename from packages/primeng/src/icons/spinner/ng-package.json rename to packages/icons/src/sortalt/ng-package.json diff --git a/packages/primeng/src/icons/sortalt/public_api.ts b/packages/icons/src/sortalt/public_api.ts similarity index 100% rename from packages/primeng/src/icons/sortalt/public_api.ts rename to packages/icons/src/sortalt/public_api.ts diff --git a/packages/primeng/src/icons/sortalt/sortalt.ts b/packages/icons/src/sortalt/sortalt.ts similarity index 93% rename from packages/primeng/src/icons/sortalt/sortalt.ts rename to packages/icons/src/sortalt/sortalt.ts index f3172a8a29f..cc6e390909a 100644 --- a/packages/primeng/src/icons/sortalt/sortalt.ts +++ b/packages/icons/src/sortalt/sortalt.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SortAltIcon', @@ -31,6 +31,6 @@ export class SortAltIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/star/ng-package.json b/packages/icons/src/sortamountdown/ng-package.json similarity index 100% rename from packages/primeng/src/icons/star/ng-package.json rename to packages/icons/src/sortamountdown/ng-package.json diff --git a/packages/primeng/src/icons/sortamountdown/public_api.ts b/packages/icons/src/sortamountdown/public_api.ts similarity index 100% rename from packages/primeng/src/icons/sortamountdown/public_api.ts rename to packages/icons/src/sortamountdown/public_api.ts diff --git a/packages/primeng/src/icons/sortamountdown/sortamountdown.ts b/packages/icons/src/sortamountdown/sortamountdown.ts similarity index 93% rename from packages/primeng/src/icons/sortamountdown/sortamountdown.ts rename to packages/icons/src/sortamountdown/sortamountdown.ts index b141161f992..43b4fa71f67 100644 --- a/packages/primeng/src/icons/sortamountdown/sortamountdown.ts +++ b/packages/icons/src/sortamountdown/sortamountdown.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SortAmountDownIcon', @@ -25,6 +25,6 @@ export class SortAmountDownIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/starfill/ng-package.json b/packages/icons/src/sortamountupalt/ng-package.json similarity index 100% rename from packages/primeng/src/icons/starfill/ng-package.json rename to packages/icons/src/sortamountupalt/ng-package.json diff --git a/packages/primeng/src/icons/sortamountupalt/public_api.ts b/packages/icons/src/sortamountupalt/public_api.ts similarity index 100% rename from packages/primeng/src/icons/sortamountupalt/public_api.ts rename to packages/icons/src/sortamountupalt/public_api.ts diff --git a/packages/primeng/src/icons/sortamountupalt/sortamountupalt.ts b/packages/icons/src/sortamountupalt/sortamountupalt.ts similarity index 93% rename from packages/primeng/src/icons/sortamountupalt/sortamountupalt.ts rename to packages/icons/src/sortamountupalt/sortamountupalt.ts index b540de9114f..7cb786c25b8 100644 --- a/packages/primeng/src/icons/sortamountupalt/sortamountupalt.ts +++ b/packages/icons/src/sortamountupalt/sortamountupalt.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SortAmountUpAltIcon', @@ -25,6 +25,6 @@ export class SortAmountUpAltIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/thlarge/ng-package.json b/packages/icons/src/spinner/ng-package.json similarity index 100% rename from packages/primeng/src/icons/thlarge/ng-package.json rename to packages/icons/src/spinner/ng-package.json diff --git a/packages/primeng/src/icons/spinner/public_api.ts b/packages/icons/src/spinner/public_api.ts similarity index 100% rename from packages/primeng/src/icons/spinner/public_api.ts rename to packages/icons/src/spinner/public_api.ts diff --git a/packages/primeng/src/icons/spinner/spinner.ts b/packages/icons/src/spinner/spinner.ts similarity index 93% rename from packages/primeng/src/icons/spinner/spinner.ts rename to packages/icons/src/spinner/spinner.ts index dcc61ef17de..ace2f59ddef 100644 --- a/packages/primeng/src/icons/spinner/spinner.ts +++ b/packages/icons/src/spinner/spinner.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'SpinnerIcon', @@ -25,6 +25,6 @@ export class SpinnerIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/times/ng-package.json b/packages/icons/src/star/ng-package.json similarity index 100% rename from packages/primeng/src/icons/times/ng-package.json rename to packages/icons/src/star/ng-package.json diff --git a/packages/primeng/src/icons/star/public_api.ts b/packages/icons/src/star/public_api.ts similarity index 100% rename from packages/primeng/src/icons/star/public_api.ts rename to packages/icons/src/star/public_api.ts diff --git a/packages/primeng/src/icons/star/star.ts b/packages/icons/src/star/star.ts similarity index 94% rename from packages/primeng/src/icons/star/star.ts rename to packages/icons/src/star/star.ts index e688bb4f502..771fed4c37c 100644 --- a/packages/primeng/src/icons/star/star.ts +++ b/packages/icons/src/star/star.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'StarIcon', @@ -25,6 +25,6 @@ export class StarIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/timescircle/ng-package.json b/packages/icons/src/starfill/ng-package.json similarity index 100% rename from packages/primeng/src/icons/timescircle/ng-package.json rename to packages/icons/src/starfill/ng-package.json diff --git a/packages/primeng/src/icons/starfill/public_api.ts b/packages/icons/src/starfill/public_api.ts similarity index 100% rename from packages/primeng/src/icons/starfill/public_api.ts rename to packages/icons/src/starfill/public_api.ts diff --git a/packages/primeng/src/icons/starfill/starfill.ts b/packages/icons/src/starfill/starfill.ts similarity index 92% rename from packages/primeng/src/icons/starfill/starfill.ts rename to packages/icons/src/starfill/starfill.ts index 599b6ae2896..ef482e73271 100644 --- a/packages/primeng/src/icons/starfill/starfill.ts +++ b/packages/icons/src/starfill/starfill.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'StarFillIcon', @@ -25,6 +25,6 @@ export class StarFillIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/trash/ng-package.json b/packages/icons/src/thlarge/ng-package.json similarity index 100% rename from packages/primeng/src/icons/trash/ng-package.json rename to packages/icons/src/thlarge/ng-package.json diff --git a/packages/primeng/src/icons/thlarge/public_api.ts b/packages/icons/src/thlarge/public_api.ts similarity index 100% rename from packages/primeng/src/icons/thlarge/public_api.ts rename to packages/icons/src/thlarge/public_api.ts diff --git a/packages/primeng/src/icons/thlarge/thlarge.ts b/packages/icons/src/thlarge/thlarge.ts similarity index 96% rename from packages/primeng/src/icons/thlarge/thlarge.ts rename to packages/icons/src/thlarge/thlarge.ts index 2159b28ea66..03ce8aa4259 100644 --- a/packages/primeng/src/icons/thlarge/thlarge.ts +++ b/packages/icons/src/thlarge/thlarge.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'ThLargeIcon', @@ -27,6 +27,6 @@ export class ThLargeIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/undo/ng-package.json b/packages/icons/src/times/ng-package.json similarity index 100% rename from packages/primeng/src/icons/undo/ng-package.json rename to packages/icons/src/times/ng-package.json diff --git a/packages/primeng/src/icons/times/public_api.ts b/packages/icons/src/times/public_api.ts similarity index 100% rename from packages/primeng/src/icons/times/public_api.ts rename to packages/icons/src/times/public_api.ts diff --git a/packages/primeng/src/icons/times/times.ts b/packages/icons/src/times/times.ts similarity index 96% rename from packages/primeng/src/icons/times/times.ts rename to packages/icons/src/times/times.ts index 1cc1a0b0c39..dce27dd0101 100644 --- a/packages/primeng/src/icons/times/times.ts +++ b/packages/icons/src/times/times.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; +import { BaseIcon } from '@primeng/icons/baseicon'; @Component({ selector: 'TimesIcon', diff --git a/packages/primeng/src/icons/upload/ng-package.json b/packages/icons/src/timescircle/ng-package.json similarity index 100% rename from packages/primeng/src/icons/upload/ng-package.json rename to packages/icons/src/timescircle/ng-package.json diff --git a/packages/primeng/src/icons/timescircle/public_api.ts b/packages/icons/src/timescircle/public_api.ts similarity index 100% rename from packages/primeng/src/icons/timescircle/public_api.ts rename to packages/icons/src/timescircle/public_api.ts diff --git a/packages/primeng/src/icons/timescircle/timescircle.ts b/packages/icons/src/timescircle/timescircle.ts similarity index 94% rename from packages/primeng/src/icons/timescircle/timescircle.ts rename to packages/icons/src/timescircle/timescircle.ts index 243fef31b49..cee772f1618 100644 --- a/packages/primeng/src/icons/timescircle/timescircle.ts +++ b/packages/icons/src/timescircle/timescircle.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'TimesCircleIcon', @@ -27,6 +27,6 @@ export class TimesCircleIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/icons/windowmaximize/ng-package.json b/packages/icons/src/trash/ng-package.json similarity index 100% rename from packages/primeng/src/icons/windowmaximize/ng-package.json rename to packages/icons/src/trash/ng-package.json diff --git a/packages/primeng/src/icons/trash/public_api.ts b/packages/icons/src/trash/public_api.ts similarity index 100% rename from packages/primeng/src/icons/trash/public_api.ts rename to packages/icons/src/trash/public_api.ts diff --git a/packages/primeng/src/icons/trash/trash.ts b/packages/icons/src/trash/trash.ts similarity index 95% rename from packages/primeng/src/icons/trash/trash.ts rename to packages/icons/src/trash/trash.ts index 3e16f2fc4cc..b1194eb5829 100644 --- a/packages/primeng/src/icons/trash/trash.ts +++ b/packages/icons/src/trash/trash.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'TrashIcon', @@ -27,6 +27,6 @@ export class TrashIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/icons/src/tsconfig.lib.json b/packages/icons/src/tsconfig.lib.json new file mode 100644 index 00000000000..d18859fcd33 --- /dev/null +++ b/packages/icons/src/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "../../../tsconfig.json", + "angularCompilerOptions": { + "annotateForClosureCompiler": false, + "strictTemplates": false, + "strictMetadataEmit": true, + "skipTemplateCodegen": true, + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "flatModuleOutFile": "primeng-icons.js", + "flatModuleId": "primeng-icons" + } +} diff --git a/packages/primeng/src/icons/windowminimize/ng-package.json b/packages/icons/src/undo/ng-package.json similarity index 100% rename from packages/primeng/src/icons/windowminimize/ng-package.json rename to packages/icons/src/undo/ng-package.json diff --git a/packages/primeng/src/icons/undo/public_api.ts b/packages/icons/src/undo/public_api.ts similarity index 100% rename from packages/primeng/src/icons/undo/public_api.ts rename to packages/icons/src/undo/public_api.ts diff --git a/packages/primeng/src/icons/undo/undo.ts b/packages/icons/src/undo/undo.ts similarity index 94% rename from packages/primeng/src/icons/undo/undo.ts rename to packages/icons/src/undo/undo.ts index 69beb3d534e..43de3e06fa4 100644 --- a/packages/primeng/src/icons/undo/undo.ts +++ b/packages/icons/src/undo/undo.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'UndoIcon', @@ -27,6 +27,6 @@ export class UndoIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/primeng/src/usestyle/ng-package.json b/packages/icons/src/upload/ng-package.json similarity index 100% rename from packages/primeng/src/usestyle/ng-package.json rename to packages/icons/src/upload/ng-package.json diff --git a/packages/primeng/src/icons/upload/public_api.ts b/packages/icons/src/upload/public_api.ts similarity index 100% rename from packages/primeng/src/icons/upload/public_api.ts rename to packages/icons/src/upload/public_api.ts diff --git a/packages/primeng/src/icons/upload/upload.ts b/packages/icons/src/upload/upload.ts similarity index 94% rename from packages/primeng/src/icons/upload/upload.ts rename to packages/icons/src/upload/upload.ts index e70e5081086..06bff679027 100644 --- a/packages/primeng/src/icons/upload/upload.ts +++ b/packages/icons/src/upload/upload.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'UploadIcon', @@ -27,6 +27,6 @@ export class UploadIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/icons/src/windowmaximize/ng-package.json b/packages/icons/src/windowmaximize/ng-package.json new file mode 100644 index 00000000000..67d0bb09411 --- /dev/null +++ b/packages/icons/src/windowmaximize/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } +} diff --git a/packages/primeng/src/icons/windowmaximize/public_api.ts b/packages/icons/src/windowmaximize/public_api.ts similarity index 100% rename from packages/primeng/src/icons/windowmaximize/public_api.ts rename to packages/icons/src/windowmaximize/public_api.ts diff --git a/packages/primeng/src/icons/windowmaximize/windowmaximize.ts b/packages/icons/src/windowmaximize/windowmaximize.ts similarity index 95% rename from packages/primeng/src/icons/windowmaximize/windowmaximize.ts rename to packages/icons/src/windowmaximize/windowmaximize.ts index 29c7f01d8a8..2d6382d6f58 100644 --- a/packages/primeng/src/icons/windowmaximize/windowmaximize.ts +++ b/packages/icons/src/windowmaximize/windowmaximize.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'WindowMaximizeIcon', @@ -27,6 +27,6 @@ export class WindowMaximizeIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/icons/src/windowminimize/ng-package.json b/packages/icons/src/windowminimize/ng-package.json new file mode 100644 index 00000000000..67d0bb09411 --- /dev/null +++ b/packages/icons/src/windowminimize/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } +} diff --git a/packages/primeng/src/icons/windowminimize/public_api.ts b/packages/icons/src/windowminimize/public_api.ts similarity index 100% rename from packages/primeng/src/icons/windowminimize/public_api.ts rename to packages/icons/src/windowminimize/public_api.ts diff --git a/packages/primeng/src/icons/windowminimize/windowminimize.ts b/packages/icons/src/windowminimize/windowminimize.ts similarity index 95% rename from packages/primeng/src/icons/windowminimize/windowminimize.ts rename to packages/icons/src/windowminimize/windowminimize.ts index 7ced8316f1f..e272634937b 100644 --- a/packages/primeng/src/icons/windowminimize/windowminimize.ts +++ b/packages/icons/src/windowminimize/windowminimize.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BaseIcon } from 'primeng/baseicon'; -import { UniqueComponentId } from 'primeng/utils'; +import { BaseIcon } from '@primeng/icons/baseicon'; +import { uuid } from '@primeuix/utils'; @Component({ selector: 'WindowMinimizeIcon', @@ -27,6 +27,6 @@ export class WindowMinimizeIcon extends BaseIcon { pathId: string; ngOnInit() { - this.pathId = 'url(#' + UniqueComponentId() + ')'; + this.pathId = 'url(#' + uuid() + ')'; } } diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json new file mode 100644 index 00000000000..b1709251ad0 --- /dev/null +++ b/packages/icons/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.json", + "angularCompilerOptions": { + "disableTypeScriptVersionCheck": true, + "fullTemplateTypeCheck": false, + "annotateForClosureCompiler": false, + "strictTemplates": false, + "strictMetadataEmit": true, + "skipTemplateCodegen": true, + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "flatModuleOutFile": "primeng.js", + "flatModuleId": "primeng" + } +} diff --git a/packages/primeng/package.json b/packages/primeng/package.json index 42b532de0d7..76fc356aa09 100644 --- a/packages/primeng/package.json +++ b/packages/primeng/package.json @@ -71,6 +71,8 @@ }, "dependencies": { "@primeuix/styled": "catalog:", - "@primeuix/utils": "catalog:" + "@primeuix/utils": "catalog:", + "@primeng/core": "workspace:*", + "@primeng/icons": "workspace:*" } } diff --git a/packages/primeng/src/accordion/accordion.ts b/packages/primeng/src/accordion/accordion.ts index 30edc653a37..54b52d23245 100755 --- a/packages/primeng/src/accordion/accordion.ts +++ b/packages/primeng/src/accordion/accordion.ts @@ -26,13 +26,12 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, Header, SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; -import { DomHandler } from 'primeng/dom'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; +import { BaseComponent, Header, SharedModule } from '@primeng/core'; +import { ChevronDownIcon, ChevronUpIcon } from '@primeng/icons'; +import { findSingle, focus, getAttribute, uuid } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; import { Ripple } from 'primeng/ripple'; -import { transformToBoolean, UniqueComponentId } from 'primeng/utils'; +import { transformToBoolean } from 'primeng/utils'; import { Subscription } from 'rxjs'; import { AccordionStyle } from './style/accordionstyle'; @@ -229,19 +228,19 @@ export class AccordionHeader extends BaseComponent { } private findHeader(panelElement) { - return DomHandler.findSingle(panelElement, '[data-pc-name="accordionheader"]'); + return findSingle(panelElement, '[data-pc-name="accordionheader"]'); } private findNextPanel(panelElement, selfCheck = false) { const element = selfCheck ? panelElement : panelElement.nextElementSibling; - return element ? (DomHandler.getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null; + return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null; } private findPrevPanel(panelElement, selfCheck = false) { const element = selfCheck ? panelElement : panelElement.previousElementSibling; - return element ? (DomHandler.getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null; + return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null; } private findFirstPanel() { @@ -253,7 +252,7 @@ export class AccordionHeader extends BaseComponent { } private changeFocusedPanel(event, element) { - DomHandler.focus(element); + focus(element); } private arrowDownKey(event: KeyboardEvent) { @@ -449,7 +448,7 @@ export class AccordionTab extends BaseComponent implements AfterContentInit, OnD * Current id state as a string. * @group Props */ - @Input() id: string | undefined = UniqueComponentId(); + @Input() id: string | undefined = uuid('pn_id_'); /** * Used to define the header of the tab. * @group Props @@ -775,7 +774,7 @@ export class Accordion extends BaseComponent implements BlockableUI, AfterConten */ @Output() onOpen: EventEmitter = new EventEmitter(); - id = signal(UniqueComponentId()); + id = signal(uuid('pn_id_')); @ContentChildren(AccordionTab, { descendants: true }) tabList: QueryList | undefined; @@ -856,7 +855,7 @@ export class Accordion extends BaseComponent implements BlockableUI, AfterConten changeFocusedTab(element) { if (element) { - DomHandler.focus(element); + focus(element); if (this.selectOnFocus()) { this.tabs.forEach((tab, i) => { @@ -893,16 +892,16 @@ export class Accordion extends BaseComponent implements BlockableUI, AfterConten findNextHeaderAction(tabElement, selfCheck = false) { const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling; - const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="accordionheader"]'); + const headerElement = findSingle(nextTabElement, '[data-pc-section="accordionheader"]'); - return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null; + return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null; } findPrevHeaderAction(tabElement, selfCheck = false) { const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling; - const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="accordionheader"]'); + const headerElement = findSingle(prevTabElement, '[data-pc-section="accordionheader"]'); - return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null; + return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null; } findFirstHeaderAction() { diff --git a/packages/primeng/src/accordion/style/accordionstyle.ts b/packages/primeng/src/accordion/style/accordionstyle.ts index 08ac58a9682..33855880e0b 100644 --- a/packages/primeng/src/accordion/style/accordionstyle.ts +++ b/packages/primeng/src/accordion/style/accordionstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-accordionpanel { diff --git a/packages/primeng/src/animateonscroll/animateonscroll.ts b/packages/primeng/src/animateonscroll/animateonscroll.ts index bd68b2ea315..0b2a0b70859 100644 --- a/packages/primeng/src/animateonscroll/animateonscroll.ts +++ b/packages/primeng/src/animateonscroll/animateonscroll.ts @@ -1,7 +1,7 @@ import { isPlatformBrowser } from '@angular/common'; import { AfterViewInit, booleanAttribute, Directive, Input, NgModule, numberAttribute, OnInit } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent } from '@primeng/core'; +import { addClass, removeClass } from '@primeuix/utils'; interface AnimateOnScrollOptions { root?: HTMLElement; @@ -105,7 +105,7 @@ export class AnimateOnScroll extends BaseComponent implements OnInit, AfterViewI ([entry]) => { if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) { this.el.nativeElement.style.opacity = this.enterClass ? '0' : ''; - DomHandler.removeMultipleClasses(this.el.nativeElement, [this.enterClass, this.leaveClass]); + removeClass(this.el.nativeElement, [this.enterClass, this.leaveClass]); this.resetObserver.unobserve(this.el.nativeElement); } @@ -119,8 +119,8 @@ export class AnimateOnScroll extends BaseComponent implements OnInit, AfterViewI enter() { if (this.animationState !== 'enter' && this.enterClass) { this.el.nativeElement.style.opacity = ''; - DomHandler.removeMultipleClasses(this.el.nativeElement, this.leaveClass); - DomHandler.addMultipleClasses(this.el.nativeElement, this.enterClass); + removeClass(this.el.nativeElement, this.leaveClass); + addClass(this.el.nativeElement, this.enterClass); this.once && this.unbindIntersectionObserver(); @@ -132,8 +132,8 @@ export class AnimateOnScroll extends BaseComponent implements OnInit, AfterViewI leave() { if (this.animationState !== 'leave' && this.leaveClass) { this.el.nativeElement.style.opacity = this.enterClass ? '0' : ''; - DomHandler.removeMultipleClasses(this.el.nativeElement, this.enterClass); - DomHandler.addMultipleClasses(this.el.nativeElement, this.leaveClass); + removeClass(this.el.nativeElement, this.enterClass); + addClass(this.el.nativeElement, this.leaveClass); this.bindAnimationEvents(); this.animationState = 'leave'; @@ -143,7 +143,7 @@ export class AnimateOnScroll extends BaseComponent implements OnInit, AfterViewI bindAnimationEvents() { if (!this.animationEndListener) { this.animationEndListener = this.renderer.listen(this.el.nativeElement, 'animationend', () => { - DomHandler.removeMultipleClasses(this.el.nativeElement, [this.enterClass, this.leaveClass]); + removeClass(this.el.nativeElement, [this.enterClass, this.leaveClass]); !this.once && this.resetObserver.observe(this.el.nativeElement); this.unbindAnimationEvents(); }); diff --git a/packages/primeng/src/api/lazyloadevent.ts b/packages/primeng/src/api/lazyloadevent.ts index 31dc58169c6..c11db9225cb 100755 --- a/packages/primeng/src/api/lazyloadevent.ts +++ b/packages/primeng/src/api/lazyloadevent.ts @@ -1,5 +1,4 @@ -import { FilterMetadata } from './filtermetadata'; -import { SortMeta } from './sortmeta'; +import { FilterMetadata, SortMeta } from '@primeng/core'; /** * Represents an event object for lazy loading data. diff --git a/packages/primeng/src/api/lazyloadmeta.ts b/packages/primeng/src/api/lazyloadmeta.ts index 3d9496507fe..8833c9b5d36 100644 --- a/packages/primeng/src/api/lazyloadmeta.ts +++ b/packages/primeng/src/api/lazyloadmeta.ts @@ -1,5 +1,4 @@ -import { FilterMetadata } from './filtermetadata'; -import { SortMeta } from './sortmeta'; +import { SortMeta, FilterMetadata } from '@primeng/core/api'; /** * Meta data for lazy load event. * @group Interface diff --git a/packages/primeng/src/api/provideprimengconfig.ts b/packages/primeng/src/api/provideprimengconfig.ts deleted file mode 100644 index 78fb3cba6b0..00000000000 --- a/packages/primeng/src/api/provideprimengconfig.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from '@angular/core'; - -export type Theme = { preset: any; options: any } | 'none' | undefined; - -export type PrimeNgConfigProps = { theme?: Theme; ripple?: boolean; inputStyle?: 'outlined' | 'filled'; csp?: { nonce: string | undefined } }; - -export const PRIME_NG_CONFIG = new InjectionToken('PRIME_NG_CONFIG'); - -export function providePrimeNgConfig(...features: PrimeNgConfigProps[]): EnvironmentProviders { - const providers = features.map((feature) => ({ - provide: PRIME_NG_CONFIG, - useValue: feature - })); - - return makeEnvironmentProviders(providers); -} diff --git a/packages/primeng/src/api/public_api.ts b/packages/primeng/src/api/public_api.ts index d4bab49ac99..1355594c28a 100644 --- a/packages/primeng/src/api/public_api.ts +++ b/packages/primeng/src/api/public_api.ts @@ -3,33 +3,22 @@ export * from './confirmaeventtype'; export * from './confirmation'; export * from './confirmationservice'; export * from './contextmenuservice'; -export * from './filtermatchmode'; -export * from './filtermetadata'; -export * from './filteroperator'; -export * from './filterservice'; export * from './lazyloadevent'; export * from './lazyloadmeta'; export * from './megamenuitem'; export * from './menuitem'; export * from './messageservice'; -export * from './overlayoptions'; -export * from './overlayservice'; -export * from './primeicons'; -export * from './primeng'; -export * from './primengconfig'; export * from './scrolleroptions'; export * from './selectitem'; export * from './selectitemgroup'; -export * from './shared'; -export * from './sortevent'; -export * from './sortmeta'; export * from './tablestate'; export * from './toastmessage'; export * from './tooltipoptions'; -export * from './translation'; -export * from './translationkeys'; export * from './treedragdropservice'; export * from './treenode'; export * from './treenodedragevent'; export * from './treetablenode'; -export * from './provideprimengconfig'; + +// @todo: Remove +export * from '@primeng/core/api'; +export * from '@primeng/core/config'; diff --git a/packages/primeng/src/api/tablestate.ts b/packages/primeng/src/api/tablestate.ts index 5df62e3f1eb..37213fd2bbe 100755 --- a/packages/primeng/src/api/tablestate.ts +++ b/packages/primeng/src/api/tablestate.ts @@ -1,5 +1,4 @@ -import { FilterMetadata } from './filtermetadata'; -import { SortMeta } from './sortmeta'; +import { FilterMetadata, SortMeta } from '@primeng/core'; /** * Represents the state of a table component. diff --git a/packages/primeng/src/autocomplete/autocomplete.spec.ts b/packages/primeng/src/autocomplete/autocomplete.spec.ts index 1fa74fa39d9..43315ddce9b 100755 --- a/packages/primeng/src/autocomplete/autocomplete.spec.ts +++ b/packages/primeng/src/autocomplete/autocomplete.spec.ts @@ -4,11 +4,10 @@ import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { ChevronDownIcon, TimesCircleIcon } from '@primeng/icons'; import { ButtonModule } from 'primeng/button'; import { OverlayModule } from 'primeng/overlay'; import { AutoComplete } from './autocomplete'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; @Component({ template: ` diff --git a/packages/primeng/src/autocomplete/autocomplete.ts b/packages/primeng/src/autocomplete/autocomplete.ts index 2eba7ab8145..1465d5b45ee 100755 --- a/packages/primeng/src/autocomplete/autocomplete.ts +++ b/packages/primeng/src/autocomplete/autocomplete.ts @@ -26,24 +26,21 @@ import { ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, OverlayOptions, OverlayService, PrimeTemplate, SharedModule, TranslationKeys } from '@primeng/core'; +import { ChevronDownIcon, SpinnerIcon, TimesCircleIcon, TimesIcon } from '@primeng/icons'; +import { equals, findLastIndex, findSingle, focus, isEmpty, isNotEmpty, resolveFieldData, uuid } from '@primeuix/utils'; +import { ScrollerOptions } from 'primeng/api'; import { AutoFocus } from 'primeng/autofocus'; import { Button } from 'primeng/button'; -import { OverlayOptions, OverlayService, PrimeTemplate, ScrollerOptions, SharedModule, TranslationKeys } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { Chip } from 'primeng/chip'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { InputText } from 'primeng/inputtext'; import { Overlay } from 'primeng/overlay'; import { Ripple } from 'primeng/ripple'; import { Scroller } from 'primeng/scroller'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; -import { SpinnerIcon } from 'primeng/icons/spinner'; -import { TimesIcon } from 'primeng/icons/times'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; import { Nullable } from 'primeng/ts-helpers'; import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface'; -import { Chip } from 'primeng/chip'; import { AutoCompleteStyle } from './style/autocompletestyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -843,9 +840,9 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft inputValue = computed(() => { const modelValue = this.modelValue(); - const selectedOption = this.optionValueSelected ? (this.suggestions || []).find((item: any) => ObjectUtils.resolveFieldData(item, this.optionValue) === modelValue) : modelValue; + const selectedOption = this.optionValueSelected ? (this.suggestions || []).find((item: any) => resolveFieldData(item, this.optionValue) === modelValue) : modelValue; - if (ObjectUtils.isNotEmpty(modelValue)) { + if (isNotEmpty(modelValue)) { if (typeof modelValue === 'object' || this.optionValueSelected) { const label = this.getOptionLabel(selectedOption); @@ -890,7 +887,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } get searchResultMessageText() { - return ObjectUtils.isNotEmpty(this.visibleOptions()) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText; + return isNotEmpty(this.visibleOptions()) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText; } get searchMessageText() { @@ -948,13 +945,13 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft ) { super(); effect(() => { - this.filled = ObjectUtils.isNotEmpty(this.modelValue()); + this.filled = isNotEmpty(this.modelValue()); }); } ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.cd.detectChanges(); } @@ -1058,7 +1055,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } findLastOptionIndex() { - return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); + return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); } findFirstFocusedOptionIndex() { @@ -1089,7 +1086,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } findPrevOptionIndex(index) { - const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; + const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : index; } @@ -1103,14 +1100,14 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } isOptionDisabled(option) { - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false; } isSelected(option) { if (this.multiple) { - return this.unique ? this.modelValue()?.find((model) => ObjectUtils.equals(model, this.getOptionValue(option), this.equalityKey())) : false; + return this.unique ? this.modelValue()?.find((model) => equals(model, this.getOptionValue(option), this.equalityKey())) : false; } - return ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); + return equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); } isOptionMatched(option, value) { @@ -1133,7 +1130,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild?.nativeElement.contains(event.target)) { - DomHandler.focus(this.inputEL.nativeElement); + focus(this.inputEL.nativeElement); } } @@ -1143,7 +1140,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft if (this.overlayVisible) { this.hide(true); } else { - DomHandler.focus(this.inputEL.nativeElement); + focus(this.inputEL.nativeElement); query = this.inputEL.nativeElement.value; if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown'); @@ -1392,8 +1389,8 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft const target = event.currentTarget; this.focusedOptionIndex.set(-1); if (this.multiple) { - if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption()) { - DomHandler.focus(this.multiContainerEL.nativeElement); + if (isEmpty(target.value) && this.hasSelectedOption()) { + focus(this.multiContainerEL.nativeElement); this.focusedMultipleOptionIndex.set(this.modelValue().length); } else { event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method @@ -1472,7 +1469,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft onBackspaceKey(event) { if (this.multiple) { - if (ObjectUtils.isNotEmpty(this.modelValue()) && !this.inputEL.nativeElement.value) { + if (isNotEmpty(this.modelValue()) && !this.inputEL.nativeElement.value) { const removedValue = this.modelValue()[this.modelValue().length - 1]; const newValue = this.modelValue().slice(0, -1); this.updateModel(newValue); @@ -1499,7 +1496,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft this.focusedMultipleOptionIndex.set(optionIndex); if (optionIndex > this.modelValue().length - 1) { this.focusedMultipleOptionIndex.set(-1); - DomHandler.focus(this.inputEL.nativeElement); + focus(this.inputEL.nativeElement); } } @@ -1557,7 +1554,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft this.updateModel(value); this.onUnselect.emit({ originalEvent: event, value: removedOption }); - DomHandler.focus(this.inputEL.nativeElement); + focus(this.inputEL.nativeElement); } updateModel(value) { @@ -1589,7 +1586,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; if (this.itemsViewChild && this.itemsViewChild.nativeElement) { - const element = DomHandler.findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } else if (!this.virtualScrollerDisabled) { @@ -1616,9 +1613,9 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft this.overlayVisible = true; const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1; this.focusedOptionIndex.set(focusedOptionIndex); - isFocus && DomHandler.focus(this.inputEL.nativeElement); + isFocus && focus(this.inputEL.nativeElement); if (isFocus) { - DomHandler.focus(this.inputEL.nativeElement); + focus(this.inputEL.nativeElement); } this.onShow.emit(); this.cd.markForCheck(); @@ -1629,7 +1626,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft this.dirty = isFocus; this.overlayVisible = false; this.focusedOptionIndex.set(-1); - isFocus && DomHandler.focus(this.inputEL.nativeElement); + isFocus && focus(this.inputEL.nativeElement); this.onHide.emit(); this.cd.markForCheck(); }; @@ -1653,7 +1650,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } hasSelectedOption() { - return ObjectUtils.isNotEmpty(this.modelValue()); + return isNotEmpty(this.modelValue()); } getAriaPosInset(index) { @@ -1668,11 +1665,11 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } getOptionLabel(option: any) { - return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option; + return this.field || this.optionLabel ? resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option; } getOptionValue(option) { - return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option && option.value != undefined ? option.value : option; + return this.optionValue ? resolveFieldData(option, this.optionValue) : option && option.value != undefined ? option.value : option; } getOptionIndex(index, scrollerOptions) { @@ -1680,11 +1677,11 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft } getOptionGroupLabel(optionGroup: any) { - return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label != undefined ? optionGroup.label : optionGroup; + return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label != undefined ? optionGroup.label : optionGroup; } getOptionGroupChildren(optionGroup: any) { - return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; + return this.optionGroupChildren ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; } registerOnChange(fn: Function): void { @@ -1702,7 +1699,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft onOverlayAnimationStart(event: AnimationEvent) { if (event.toState === 'visible') { - this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel'); + this.itemsWrapper = findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel'); if (this.virtualScroll) { this.scroller?.setContentEl(this.itemsViewChild?.nativeElement); @@ -1716,7 +1713,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft this.scroller?.scrollToIndex(selectedIndex); } } else { - let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-autocomplete-item.p-highlight'); + let selectedListItem = findSingle(this.itemsWrapper, '.p-autocomplete-item.p-highlight'); if (selectedListItem) { selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' }); diff --git a/packages/primeng/src/autocomplete/style/autocompletestyle.ts b/packages/primeng/src/autocomplete/style/autocompletestyle.ts index 46251f9214e..16b7cec46c2 100644 --- a/packages/primeng/src/autocomplete/style/autocompletestyle.ts +++ b/packages/primeng/src/autocomplete/style/autocompletestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-autocomplete { diff --git a/packages/primeng/src/autofocus/autofocus.ts b/packages/primeng/src/autofocus/autofocus.ts index b069b9c915a..b43aedeca32 100644 --- a/packages/primeng/src/autofocus/autofocus.ts +++ b/packages/primeng/src/autofocus/autofocus.ts @@ -1,6 +1,6 @@ import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { booleanAttribute, Directive, ElementRef, inject, Input, NgModule, PLATFORM_ID } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; import { DomHandler } from 'primeng/dom'; /** diff --git a/packages/primeng/src/avatar/avatar.ts b/packages/primeng/src/avatar/avatar.ts index 74b8e267952..df72f7921fb 100755 --- a/packages/primeng/src/avatar/avatar.ts +++ b/packages/primeng/src/avatar/avatar.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, inject, Input, NgModule, Output, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { AvatarStyle } from './style/avatarstyle'; -import { SharedModule } from 'primeng/api'; /** * Avatar represents people using icons, labels and images. diff --git a/packages/primeng/src/avatar/style/avatarstyle.ts b/packages/primeng/src/avatar/style/avatarstyle.ts index 348a8ba721c..09aca8c0e8b 100644 --- a/packages/primeng/src/avatar/style/avatarstyle.ts +++ b/packages/primeng/src/avatar/style/avatarstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-avatar { diff --git a/packages/primeng/src/avatargroup/avatargroup.ts b/packages/primeng/src/avatargroup/avatargroup.ts index f2beefc7439..86956daa59e 100755 --- a/packages/primeng/src/avatargroup/avatargroup.ts +++ b/packages/primeng/src/avatargroup/avatargroup.ts @@ -1,8 +1,7 @@ -import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { AvatarGroupStyle } from './style/avatargroupstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { SharedModule } from 'primeng/api'; /** * AvatarGroup is a helper component for Avatar. diff --git a/packages/primeng/src/avatargroup/style/avatargroupstyle.ts b/packages/primeng/src/avatargroup/style/avatargroupstyle.ts index 159d5c7a8f1..67b54c2a035 100644 --- a/packages/primeng/src/avatargroup/style/avatargroupstyle.ts +++ b/packages/primeng/src/avatargroup/style/avatargroupstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const classes = { root: 'p-avatar-group p-component' diff --git a/packages/primeng/src/badge/badge.ts b/packages/primeng/src/badge/badge.ts index e867d348393..1d119d9f656 100755 --- a/packages/primeng/src/badge/badge.ts +++ b/packages/primeng/src/badge/badge.ts @@ -1,9 +1,7 @@ import { CommonModule } from '@angular/common'; import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, computed, Directive, inject, Input, input, NgModule, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { addClass, hasClass, isEmpty, isNotEmpty, removeClass, uuid } from '@primeuix/utils'; import { BadgeStyle } from './style/badgestyle'; /** @@ -90,7 +88,7 @@ export class BadgeDirective extends BaseComponent implements OnChanges, AfterVie } public ngAfterViewInit(): void { - this.id = UniqueComponentId() + '_badge'; + this.id = uuid('pn_id_') + '_badge'; this.renderBadgeContent(); } @@ -102,21 +100,21 @@ export class BadgeDirective extends BaseComponent implements OnChanges, AfterVie } if (this.value != null) { - if (DomHandler.hasClass(badge, 'p-badge-dot')) { - DomHandler.removeClass(badge, 'p-badge-dot'); + if (hasClass(badge, 'p-badge-dot')) { + removeClass(badge, 'p-badge-dot'); } if (this.value && String(this.value).length === 1) { - DomHandler.addClass(badge, 'p-badge-circle'); + addClass(badge, 'p-badge-circle'); } else { - DomHandler.removeClass(badge, 'p-badge-circle'); + removeClass(badge, 'p-badge-circle'); } } else { - if (!DomHandler.hasClass(badge, 'p-badge-dot')) { - DomHandler.addClass(badge, 'p-badge-dot'); + if (!hasClass(badge, 'p-badge-dot')) { + addClass(badge, 'p-badge-dot'); } - DomHandler.removeClass(badge, 'p-badge-circle'); + removeClass(badge, 'p-badge-circle'); } badge.innerHTML = ''; @@ -133,27 +131,27 @@ export class BadgeDirective extends BaseComponent implements OnChanges, AfterVie if (this.badgeSize) { if (this.badgeSize === 'large') { - DomHandler.addClass(badge, 'p-badge-lg'); - DomHandler.removeClass(badge, 'p-badge-xl'); + addClass(badge, 'p-badge-lg'); + removeClass(badge, 'p-badge-xl'); } if (this.badgeSize === 'xlarge') { - DomHandler.addClass(badge, 'p-badge-xl'); - DomHandler.removeClass(badge, 'p-badge-lg'); + addClass(badge, 'p-badge-xl'); + removeClass(badge, 'p-badge-lg'); } } else if (this.size && !this.badgeSize) { if (this.size === 'large') { - DomHandler.addClass(badge, 'p-badge-lg'); - DomHandler.removeClass(badge, 'p-badge-xl'); + addClass(badge, 'p-badge-lg'); + removeClass(badge, 'p-badge-xl'); } if (this.size === 'xlarge') { - DomHandler.addClass(badge, 'p-badge-xl'); - DomHandler.removeClass(badge, 'p-badge-lg'); + addClass(badge, 'p-badge-xl'); + removeClass(badge, 'p-badge-lg'); } } else { - DomHandler.removeClass(badge, 'p-badge-lg'); - DomHandler.removeClass(badge, 'p-badge-xl'); + removeClass(badge, 'p-badge-lg'); + removeClass(badge, 'p-badge-xl'); } } @@ -170,7 +168,7 @@ export class BadgeDirective extends BaseComponent implements OnChanges, AfterVie this.setSeverity(null, badge); this.setSizeClasses(badge); this.setValue(badge); - DomHandler.addClass(el, 'p-overlay-badge'); + addClass(el, 'p-overlay-badge'); this.renderer.appendChild(el, badge); } @@ -182,11 +180,11 @@ export class BadgeDirective extends BaseComponent implements OnChanges, AfterVie } if (this.severity) { - DomHandler.addClass(badge, `p-badge-${this.severity}`); + addClass(badge, `p-badge-${this.severity}`); } if (oldSeverity) { - DomHandler.removeClass(badge, `p-badge-${oldSeverity}`); + removeClass(badge, `p-badge-${oldSeverity}`); } } @@ -269,11 +267,11 @@ export class Badge extends BaseComponent { containerClass = computed<{ [klass: string]: any }>(() => { return { 'p-badge p-component': true, - 'p-badge-circle': ObjectUtils.isNotEmpty(this.value()) && String(this.value()).length === 1, + 'p-badge-circle': isNotEmpty(this.value()) && String(this.value()).length === 1, 'p-badge-lg': this.badgeSize() === 'large', 'p-badge-xl': this.badgeSize() === 'xlarge', 'p-badge-sm': this.badgeSize() === 'small', - 'p-badge-dot': ObjectUtils.isEmpty(this.value()), + 'p-badge-dot': isEmpty(this.value()), [`p-badge-${this.severity()}`]: this.severity() }; }); diff --git a/packages/primeng/src/badge/style/badgestyle.ts b/packages/primeng/src/badge/style/badgestyle.ts index 41c53c36fba..07fe662b800 100644 --- a/packages/primeng/src/badge/style/badgestyle.ts +++ b/packages/primeng/src/badge/style/badgestyle.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; -import { ObjectUtils } from 'primeng/utils'; +import { BaseStyle } from '@primeng/core/base'; +import { isEmpty, isNotEmpty } from '@primeuix/utils'; const theme = ({ dt }) => ` .p-badge { @@ -101,8 +101,8 @@ const classes = { root: ({ props, instance }) => [ 'p-badge p-component', { - 'p-badge-circle': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1, - 'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default, + 'p-badge-circle': isNotEmpty(props.value) && String(props.value).length === 1, + 'p-badge-dot': isEmpty(props.value) && !instance.$slots.default, 'p-badge-sm': props.size === 'small', 'p-badge-lg': props.size === 'large', 'p-badge-xl': props.size === 'xlarge', diff --git a/packages/primeng/src/blockui/blockui.ts b/packages/primeng/src/blockui/blockui.ts index ad5eef194cc..72d6151d4d8 100755 --- a/packages/primeng/src/blockui/blockui.ts +++ b/packages/primeng/src/blockui/blockui.ts @@ -1,10 +1,9 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, inject, Input, NgModule, numberAttribute, OnDestroy, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { addClass, blockBodyScroll, removeClass, unblockBodyScroll } from '@primeuix/utils'; import { ZIndexUtils } from 'primeng/utils'; -import { BaseComponent } from 'primeng/basecomponent'; import { BlockUiStyle } from './style/blockuistyle'; -import { SharedModule } from 'primeng/api'; /** * BlockUI can either block other components or the whole page. @@ -105,7 +104,7 @@ export class BlockUI extends BaseComponent implements AfterViewInit, OnDestroy { this.target.getBlockableElement().style.position = 'relative'; } else { this.renderer.appendChild(this.document.body, (this.mask as ElementRef).nativeElement); - DomHandler.blockBodyScroll(); + blockBodyScroll(); } if (this.autoZIndex) { @@ -119,7 +118,7 @@ export class BlockUI extends BaseComponent implements AfterViewInit, OnDestroy { // this.animationEndListener = this.renderer.listen(this.mask.nativeElement, 'animationend', this.destroyModal.bind(this)); // TODO Add animation this.destroyModal(); - DomHandler.addClass(this.mask.nativeElement, 'p-overlay-mask-leave'); + addClass(this.mask.nativeElement, 'p-overlay-mask-leave'); } } @@ -127,9 +126,9 @@ export class BlockUI extends BaseComponent implements AfterViewInit, OnDestroy { this._blocked = false; if (this.mask && isPlatformBrowser(this.platformId)) { ZIndexUtils.clear(this.mask.nativeElement); - DomHandler.removeClass(this.mask.nativeElement, 'p-overlay-mask-leave'); + removeClass(this.mask.nativeElement, 'p-overlay-mask-leave'); this.renderer.removeChild(this.el.nativeElement, this.mask.nativeElement); - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } this.unbindAnimationEndListener(); this.cd.markForCheck(); diff --git a/packages/primeng/src/blockui/style/blockuistyle.ts b/packages/primeng/src/blockui/style/blockuistyle.ts index 36092e0b790..4e798c9ff50 100644 --- a/packages/primeng/src/blockui/style/blockuistyle.ts +++ b/packages/primeng/src/blockui/style/blockuistyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-blockui { diff --git a/packages/primeng/src/breadcrumb/breadcrumb.ts b/packages/primeng/src/breadcrumb/breadcrumb.ts index 2da76b46486..2c756805ee7 100755 --- a/packages/primeng/src/breadcrumb/breadcrumb.ts +++ b/packages/primeng/src/breadcrumb/breadcrumb.ts @@ -1,10 +1,9 @@ import { CommonModule } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; import { Router, RouterModule } from '@angular/router'; -import { MenuItem, SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { HomeIcon } from 'primeng/icons/home'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { ChevronRightIcon, HomeIcon } from '@primeng/icons'; +import { MenuItem } from 'primeng/api'; import { TooltipModule } from 'primeng/tooltip'; import { BreadcrumbItemClickEvent } from './breadcrumb.interface'; import { BreadCrumbStyle } from './style/breadcrumbstyle'; diff --git a/packages/primeng/src/breadcrumb/style/breadcrumbstyle.ts b/packages/primeng/src/breadcrumb/style/breadcrumbstyle.ts index 9b269259baa..8c5e33d8eac 100644 --- a/packages/primeng/src/breadcrumb/style/breadcrumbstyle.ts +++ b/packages/primeng/src/breadcrumb/style/breadcrumbstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-breadcrumb { diff --git a/packages/primeng/src/button/button.ts b/packages/primeng/src/button/button.ts index 7cad0a7772e..881185f5988 100755 --- a/packages/primeng/src/button/button.ts +++ b/packages/primeng/src/button/button.ts @@ -20,16 +20,14 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { SpinnerIcon } from 'primeng/icons/spinner'; -import { Ripple } from 'primeng/ripple'; -import { ObjectUtils } from 'primeng/utils'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { SpinnerIcon } from '@primeng/icons'; +import { addClass, findSingle, isEmpty } from '@primeuix/utils'; import { AutoFocus } from 'primeng/autofocus'; -import { BaseComponent } from 'primeng/basecomponent'; -import { ButtonStyle } from './style/buttonstyle'; import { BadgeModule } from 'primeng/badge'; +import { Ripple } from 'primeng/ripple'; import { ButtonProps } from './button.interface'; +import { ButtonStyle } from './style/buttonstyle'; type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom'; @@ -244,7 +242,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD ngAfterViewInit() { super.ngAfterViewInit(); - DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' ')); + addClass(this.htmlElement, this.getStyleClass().join(' ')); this.createIcon(); this.createLabel(); @@ -268,7 +266,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD getStyleClass(): string[] { const styleClass: string[] = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component]; - if (this.icon && !this.label && ObjectUtils.isEmpty(this.htmlElement.textContent)) { + if (this.icon && !this.label && isEmpty(this.htmlElement.textContent)) { styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly); } @@ -279,7 +277,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly); } - if (this.icon && !this.label && !ObjectUtils.isEmpty(this.htmlElement.textContent)) { + if (this.icon && !this.label && !isEmpty(this.htmlElement.textContent)) { styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly); } } @@ -331,7 +329,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD const nativeElement = this.el.nativeElement; const fluidComponent = nativeElement.closest('p-fluid'); - return ObjectUtils.isEmpty(this.fluid) ? !!fluidComponent : this.fluid; + return isEmpty(this.fluid) ? !!fluidComponent : this.fluid; } setStyleClass() { @@ -341,7 +339,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD } createLabel() { - const created = DomHandler.findSingle(this.htmlElement, '.p-button-label'); + const created = findSingle(this.htmlElement, '.p-button-label'); if (!created && this.label) { let labelElement = this.document.createElement('span'); if (this.icon && !this.label) { @@ -356,7 +354,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD } createIcon() { - const created = DomHandler.findSingle(this.htmlElement, '.p-button-icon'); + const created = findSingle(this.htmlElement, '.p-button-icon'); if (!created && (this.icon || this.loading)) { let iconElement = this.document.createElement('span'); iconElement.className = 'p-button-icon'; @@ -364,13 +362,13 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null; if (iconPosClass) { - DomHandler.addClass(iconElement, iconPosClass); + addClass(iconElement, iconPosClass); } let iconClass = this.getIconClass(); if (iconClass) { - DomHandler.addMultipleClasses(iconElement, iconClass); + addClass(iconElement, iconClass); } if (!this.loadingIcon && this.loading) { @@ -382,7 +380,7 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD } updateLabel() { - let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label'); + let labelElement = findSingle(this.htmlElement, '.p-button-label'); if (!this.label) { labelElement && this.htmlElement.removeChild(labelElement); @@ -393,8 +391,8 @@ export class ButtonDirective extends BaseComponent implements AfterViewInit, OnD } updateIcon() { - let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon'); - let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label'); + let iconElement = findSingle(this.htmlElement, '.p-button-icon'); + let labelElement = findSingle(this.htmlElement, '.p-button-label'); if (this.loading && !this.loadingIcon && iconElement) { iconElement.innerHTML = this.spinnerIcon; @@ -654,7 +652,7 @@ export class Button extends BaseComponent implements AfterContentInit { const nativeElement = this.el.nativeElement; const fluidComponent = nativeElement.closest('p-fluid'); - return ObjectUtils.isEmpty(this.fluid) ? !!fluidComponent : this.fluid; + return isEmpty(this.fluid) ? !!fluidComponent : this.fluid; } _componentStyle = inject(ButtonStyle); diff --git a/packages/primeng/src/button/style/buttonstyle.ts b/packages/primeng/src/button/style/buttonstyle.ts index 4993a3b46fe..83425797d51 100644 --- a/packages/primeng/src/button/style/buttonstyle.ts +++ b/packages/primeng/src/button/style/buttonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-button { diff --git a/packages/primeng/src/buttongroup/buttongroup.ts b/packages/primeng/src/buttongroup/buttongroup.ts index 8d9bd76c194..938596825fb 100755 --- a/packages/primeng/src/buttongroup/buttongroup.ts +++ b/packages/primeng/src/buttongroup/buttongroup.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, NgModule, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; import { ButtonGroupStyle } from './style/buttongroupstyle'; @Component({ diff --git a/packages/primeng/src/buttongroup/style/buttongroupstyle.ts b/packages/primeng/src/buttongroup/style/buttongroupstyle.ts index cf389d599bb..16ce38244b2 100644 --- a/packages/primeng/src/buttongroup/style/buttongroupstyle.ts +++ b/packages/primeng/src/buttongroup/style/buttongroupstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-buttongroup .p-button { diff --git a/packages/primeng/src/calendar/calendar.spec.ts b/packages/primeng/src/calendar/calendar.spec.ts index c8d8d8e8a16..7643cbdca2c 100755 --- a/packages/primeng/src/calendar/calendar.spec.ts +++ b/packages/primeng/src/calendar/calendar.spec.ts @@ -3,7 +3,7 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { SharedModule } from 'primeng/api'; +import { SharedModule } from '@primeng/core'; import { ButtonModule } from 'primeng/button'; import { Calendar } from './calendar'; diff --git a/packages/primeng/src/calendar/calendar.ts b/packages/primeng/src/calendar/calendar.ts index 3c22082fe34..085a657fdb6 100644 --- a/packages/primeng/src/calendar/calendar.ts +++ b/packages/primeng/src/calendar/calendar.ts @@ -21,24 +21,37 @@ import { ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OverlayService, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, OverlayService, SharedModule, TranslationKeys } from '@primeng/core'; +import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, TimesIcon } from '@primeng/icons'; +import { + absolutePosition, + addClass, + appendChild, + blockBodyScroll, + find, + findSingle, + getFocusableElements, + getIndex, + getOuterWidth, + hasClass, + isDate, + isNotEmpty, + isTouchDevice, + relativePosition, + setAttribute, + unblockBodyScroll, + uuid +} from '@primeuix/utils'; +import { AutoFocus } from 'primeng/autofocus'; import { Button } from 'primeng/button'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; +import { InputText } from 'primeng/inputtext'; import { Ripple } from 'primeng/ripple'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; -import { Subscription } from 'rxjs'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { TimesIcon } from 'primeng/icons/times'; -import { CalendarIcon } from 'primeng/icons/calendar'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; +import { ZIndexUtils } from 'primeng/utils'; +import { Subscription } from 'rxjs'; import { CalendarMonthChangeEvent, CalendarResponsiveOptions, CalendarTypeView, CalendarYearChangeEvent, LocaleSettings, Month, NavigationState } from './calendar.interface'; -import { AutoFocus } from 'primeng/autofocus'; -import { InputText } from 'primeng/inputtext'; import { CalendarStyle } from './style/calendarstyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const CALENDAR_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -1277,7 +1290,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro ngOnInit() { console.log('Calendar component is deprecated as of v18, use DatePicker component instead.'); super.ngOnInit(); - this.attributeSelector = UniqueComponentId(); + this.attributeSelector = uuid('pn_id_'); this.panelId = this.attributeSelector + '_panel'; const date = this.defaultDate || new Date(); this.createResponsiveStyle(); @@ -1310,7 +1323,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro this.initFocusableCell(); if (this.numberOfMonths === 1) { if (this.contentViewChild && this.contentViewChild.nativeElement) { - this.contentViewChild.nativeElement.style.width = DomHandler.getOuterWidth(this.containerViewChild?.nativeElement) + 'px'; + this.contentViewChild.nativeElement.style.width = getOuterWidth(this.containerViewChild?.nativeElement) + 'px'; } } } @@ -1911,13 +1924,13 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } isDateEquals(value: any, dateMeta: any) { - if (value && ObjectUtils.isDate(value)) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year; + if (value && isDate(value)) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year; else return false; } isDateBetween(start: Date, end: Date, dateMeta: any) { let between: boolean = false; - if (ObjectUtils.isDate(start) && ObjectUtils.isDate(end)) { + if (isDate(start) && isDate(end)) { let date: Date = this.formatDateMetaToDate(dateMeta); return start.getTime() <= date.getTime() && end.getTime() >= date.getTime(); } @@ -2087,7 +2100,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro this.trapFocus(event); } if (this.inline) { - const headerElements = DomHandler.findSingle(this.containerViewChild?.nativeElement, '.p-datepicker-header'); + const headerElements = findSingle(this.containerViewChild?.nativeElement, '.p-datepicker-header'); const element = event.target; if (this.timeOnly) { return; @@ -2128,7 +2141,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro event.preventDefault(); } } else if (event.keyCode === 9 && this.contentViewChild) { - DomHandler.getFocusableElements(this.contentViewChild.nativeElement).forEach((el) => (el.tabIndex = '-1')); + getFocusableElements(this.contentViewChild.nativeElement).forEach((el: any) => (el.tabIndex = '-1')); if (this.overlayVisible) { this.overlayVisible = false; } @@ -2143,11 +2156,11 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro //down arrow case 40: { cellContent.tabIndex = '-1'; - let cellIndex = DomHandler.index(cell); + let cellIndex = getIndex(cell); let nextRow = cell.parentElement.nextElementSibling; if (nextRow) { let focusCell = nextRow.children[cellIndex].children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled')) { + if (hasClass(focusCell, 'p-disabled')) { this.navigationState = { backward: false }; this.navForward(event); } else { @@ -2165,11 +2178,11 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro //up arrow case 38: { cellContent.tabIndex = '-1'; - let cellIndex = DomHandler.index(cell); + let cellIndex = getIndex(cell); let prevRow = cell.parentElement.previousElementSibling; if (prevRow) { let focusCell = prevRow.children[cellIndex].children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled')) { + if (hasClass(focusCell, 'p-disabled')) { this.navigationState = { backward: true }; this.navBackward(event); } else { @@ -2190,7 +2203,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro let prevCell = cell.previousElementSibling; if (prevCell) { let focusCell = prevCell.children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled') || DomHandler.hasClass(focusCell.parentElement, 'p-datepicker-weeknumber')) { + if (hasClass(focusCell, 'p-disabled') || hasClass(focusCell.parentElement, 'p-datepicker-weeknumber')) { this.navigateToMonth(true, groupIndex); } else { focusCell.tabIndex = '0'; @@ -2209,7 +2222,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro let nextCell = cell.nextElementSibling; if (nextCell) { let focusCell = nextCell.children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled')) { + if (hasClass(focusCell, 'p-disabled')) { this.navigateToMonth(false, groupIndex); } else { focusCell.tabIndex = '0'; @@ -2272,7 +2285,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro cellContent.tabIndex = '-1'; const firstDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); const firstDayDateKey = this.formatDateKey(firstDayDate); - const firstDayCell = DomHandler.findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`); + const firstDayCell = findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`); if (firstDayCell) { firstDayCell.tabIndex = '0'; firstDayCell.focus(); @@ -2285,7 +2298,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro cellContent.tabIndex = '-1'; const lastDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); const lastDayDateKey = this.formatDateKey(lastDayDate); - const lastDayCell = DomHandler.findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`); + const lastDayCell = findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`); if (lastDayDate) { lastDayCell.tabIndex = '0'; lastDayCell.focus(); @@ -2307,7 +2320,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro case 40: { cell.tabIndex = '-1'; var cells = cell.parentElement.children; - var cellIndex = DomHandler.index(cell); + var cellIndex = getIndex(cell); let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3]; if (nextCell) { nextCell.tabIndex = '0'; @@ -2389,7 +2402,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro case 40: { cell.tabIndex = '-1'; var cells = cell.parentElement.children; - var cellIndex = DomHandler.index(cell); + var cellIndex = getIndex(cell); let nextCell = cells[event.which === 40 ? cellIndex + 2 : cellIndex - 2]; if (nextCell) { nextCell.tabIndex = '0'; @@ -2469,11 +2482,11 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } else { let prevMonthContainer = this.contentViewChild.nativeElement.children[groupIndex - 1]; if (focusKey) { - const firstDayCell = DomHandler.findSingle(prevMonthContainer, focusKey); + const firstDayCell = findSingle(prevMonthContainer, focusKey); firstDayCell.tabIndex = '0'; firstDayCell.focus(); } else { - let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + let cells = find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); let focusCell = cells[cells.length - 1]; focusCell.tabIndex = '0'; focusCell.focus(); @@ -2487,11 +2500,11 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } else { let nextMonthContainer = this.contentViewChild.nativeElement.children[groupIndex + 1]; if (focusKey) { - const firstDayCell = DomHandler.findSingle(nextMonthContainer, focusKey); + const firstDayCell = findSingle(nextMonthContainer, focusKey); firstDayCell.tabIndex = '0'; firstDayCell.focus(); } else { - let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + let focusCell = findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); focusCell.tabIndex = '0'; focusCell.focus(); } @@ -2506,18 +2519,18 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro if (this.navigationState.button) { this.initFocusableCell(); - if (this.navigationState.backward) DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev').focus(); - else DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next').focus(); + if (this.navigationState.backward) (findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev') as any).focus(); + else (findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next') as any).focus(); } else { if (this.navigationState.backward) { let cells; if (this.currentView === 'month') { - cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); + cells = find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); } else if (this.currentView === 'year') { - cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); + cells = find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); } else { - cells = DomHandler.find(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + cells = find(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); } if (cells && cells.length > 0) { @@ -2525,11 +2538,11 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } } else { if (this.currentView === 'month') { - cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); + cell = findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); } else if (this.currentView === 'year') { - cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); + cell = findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); } else { - cell = DomHandler.findSingle(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + cell = findSingle(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); } } @@ -2551,31 +2564,31 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro let cell!: any; if (this.currentView === 'month') { - let cells = DomHandler.find(contentEl, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); - let selectedCell = DomHandler.findSingle(contentEl, '.p-monthpicker .p-monthpicker-month.p-highlight'); + let cells = find(contentEl, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); + let selectedCell = findSingle(contentEl, '.p-monthpicker .p-monthpicker-month.p-highlight'); cells.forEach((cell) => (cell.tabIndex = -1)); cell = selectedCell || cells[0]; if (cells.length === 0) { - let disabledCells = DomHandler.find(contentEl, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]'); + let disabledCells = find(contentEl, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]'); disabledCells.forEach((cell) => (cell.tabIndex = -1)); } } else if (this.currentView === 'year') { - let cells = DomHandler.find(contentEl, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); - let selectedCell = DomHandler.findSingle(contentEl, '.p-yearpicker .p-yearpicker-year.p-highlight'); + let cells = find(contentEl, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); + let selectedCell = findSingle(contentEl, '.p-yearpicker .p-yearpicker-year.p-highlight'); cells.forEach((cell) => (cell.tabIndex = -1)); cell = selectedCell || cells[0]; if (cells.length === 0) { - let disabledCells = DomHandler.find(contentEl, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]'); + let disabledCells = find(contentEl, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]'); disabledCells.forEach((cell) => (cell.tabIndex = -1)); } } else { - cell = DomHandler.findSingle(contentEl, 'span.p-highlight'); + cell = findSingle(contentEl, 'span.p-highlight'); if (!cell) { - let todayCell = DomHandler.findSingle(contentEl, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)'); + let todayCell = findSingle(contentEl, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)'); if (todayCell) cell = todayCell; - else cell = DomHandler.findSingle(contentEl, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + else cell = findSingle(contentEl, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); } } @@ -2595,7 +2608,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } trapFocus(event: any) { - let focusableElements = DomHandler.getFocusableElements(this.contentViewChild.nativeElement); + let focusableElements = getFocusableElements(this.contentViewChild.nativeElement); if (focusableElements && focusableElements.length > 0) { if (!focusableElements[0].ownerDocument.activeElement) { @@ -3008,7 +3021,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } isValidDate(date: any) { - return ObjectUtils.isDate(date) && ObjectUtils.isNotEmpty(date); + return isDate(date) && isNotEmpty(date); } updateUI() { @@ -3113,7 +3126,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.document.body.appendChild(this.overlay); - else DomHandler.appendChild(this.overlay, this.appendTo); + else appendChild(this.overlay, this.appendTo); } } @@ -3129,15 +3142,15 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } else if (this.overlay) { if (this.appendTo) { if (this.view === 'date') { - this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px'; - this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; + this.overlay.style.width = getOuterWidth(this.overlay) + 'px'; + this.overlay.style.minWidth = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; } else { - this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; + this.overlay.style.width = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; } - DomHandler.absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement); + absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement); } else { - DomHandler.relativePosition(this.overlay, this.inputfieldViewChild?.nativeElement); + relativePosition(this.overlay, this.inputfieldViewChild?.nativeElement); } } } @@ -3147,20 +3160,20 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro this.mask = this.renderer.createElement('div'); this.renderer.setStyle(this.mask, 'zIndex', String(parseInt(element.style.zIndex) - 1)); let maskStyleClass = 'p-overlay-mask p-datepicker-mask p-datepicker-mask-scrollblocker p-overlay-mask p-overlay-mask-enter'; - DomHandler.addMultipleClasses(this.mask, maskStyleClass); + addClass(this.mask, maskStyleClass); this.maskClickListener = this.renderer.listen(this.mask, 'click', (event: any) => { this.disableModality(); this.overlayVisible = false; }); this.renderer.appendChild(this.document.body, this.mask); - DomHandler.blockBodyScroll(); + blockBodyScroll(); } } disableModality() { if (this.mask) { - DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); + addClass(this.mask, 'p-overlay-mask-leave'); if (!this.animationEndListener) { this.animationEndListener = this.renderer.listen(this.mask, 'animationend', this.destroyMask.bind(this)); } @@ -3176,14 +3189,14 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro let hasBlockerMasks!: boolean; for (let i = 0; i < bodyChildren.length; i++) { let bodyChild = bodyChildren[i]; - if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) { + if (hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) { hasBlockerMasks = true; break; } } if (!hasBlockerMasks) { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } this.unbindAnimationEndListener(); @@ -3635,7 +3648,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro } (this.responsiveStyleElement).innerHTML = innerHTML; - DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce); } } @@ -3707,14 +3720,12 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target))); } - isNavIconClicked(event: Event) { - return ( - DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon') || DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon') - ); + isNavIconClicked(event: any) { + return hasClass(event.target, 'p-datepicker-prev') || hasClass(event.target, 'p-datepicker-prev-icon') || hasClass(event.target, 'p-datepicker-next') || hasClass(event.target, 'p-datepicker-next-icon'); } onWindowResize() { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.hideOverlay(); } } diff --git a/packages/primeng/src/calendar/style/calendarstyle.ts b/packages/primeng/src/calendar/style/calendarstyle.ts index 1208cc3f5f1..2d9fad50918 100644 --- a/packages/primeng/src/calendar/style/calendarstyle.ts +++ b/packages/primeng/src/calendar/style/calendarstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-datepicker { diff --git a/packages/primeng/src/card/card.spec.ts b/packages/primeng/src/card/card.spec.ts index ec073f752f8..8b821db4450 100755 --- a/packages/primeng/src/card/card.spec.ts +++ b/packages/primeng/src/card/card.spec.ts @@ -1,10 +1,10 @@ -import { TestBed, ComponentFixture, async } from '@angular/core/testing'; +import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { Card } from './card'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; -import { Footer, Header } from 'primeng/api'; +import { Footer, Header } from '@primeng/core'; import { ButtonModule } from '../button/button'; +import { Card } from './card'; @Component({ template: ` diff --git a/packages/primeng/src/card/card.ts b/packages/primeng/src/card/card.ts index 54140c954d4..b74f6072709 100755 --- a/packages/primeng/src/card/card.ts +++ b/packages/primeng/src/card/card.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, inject, Input, NgModule, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, Footer, Header, SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; -import { ObjectUtils } from 'primeng/utils'; +import { BaseComponent, Footer, Header, SharedModule } from '@primeng/core'; +import { equals } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; import { CardStyle } from './style/cardstyle'; /** @@ -59,7 +59,7 @@ export class Card extends BaseComponent implements BlockableUI { * @group Props */ @Input() set style(value: { [klass: string]: any } | null | undefined) { - if (!ObjectUtils.equals(this._style(), value)) { + if (!equals(this._style(), value)) { this._style.set(value); } } diff --git a/packages/primeng/src/card/style/cardstyle.ts b/packages/primeng/src/card/style/cardstyle.ts index 1408a11cc0f..c68b7bcd29c 100644 --- a/packages/primeng/src/card/style/cardstyle.ts +++ b/packages/primeng/src/card/style/cardstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-card { diff --git a/packages/primeng/src/carousel/carousel.spec.ts b/packages/primeng/src/carousel/carousel.spec.ts index a695ac17f75..0a3a0c39f6d 100755 --- a/packages/primeng/src/carousel/carousel.spec.ts +++ b/packages/primeng/src/carousel/carousel.spec.ts @@ -1,9 +1,8 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { Carousel } from './carousel'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; +import { ChevronLeftIcon, ChevronRightIcon } from '@primeng/icons'; +import { Carousel } from './carousel'; describe('Carousel', () => { let carousel: Carousel; diff --git a/packages/primeng/src/carousel/carousel.ts b/packages/primeng/src/carousel/carousel.ts index d35738045a8..b038d26471f 100755 --- a/packages/primeng/src/carousel/carousel.ts +++ b/packages/primeng/src/carousel/carousel.ts @@ -19,18 +19,13 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { Footer, Header, SharedModule } from 'primeng/api'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; +import { BaseComponent, Footer, Header, SharedModule } from '@primeng/core'; +import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@primeng/icons'; +import { find, findSingle, getAttribute, setAttribute, uuid } from '@primeuix/utils'; +import { Button, ButtonProps } from 'primeng/button'; import { Ripple } from 'primeng/ripple'; -import { UniqueComponentId } from 'primeng/utils'; import { CarouselPageEvent, CarouselResponsiveOptions } from './carousel.interface'; -import { DomHandler } from 'primeng/dom'; -import { Button, ButtonProps } from 'primeng/button'; import { CarouselStyle } from './style/carouselstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Carousel is a content slider featuring various customization options. @@ -445,7 +440,7 @@ export class Carousel extends BaseComponent implements AfterContentInit { } ngAfterContentInit() { - this.id = UniqueComponentId(); + this.id = uuid('pn_id_'); if (isPlatformBrowser(this.platformId)) { this.allowAutoplay = !!this.autoplayInterval; @@ -543,7 +538,7 @@ export class Carousel extends BaseComponent implements AfterContentInit { if (!this.carouselStyle) { this.carouselStyle = this.renderer.createElement('style'); this.carouselStyle.type = 'text/css'; - DomHandler.setAttribute(this.carouselStyle, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.carouselStyle, 'nonce', this.config?.csp()?.nonce); this.renderer.appendChild(this.document.head, this.carouselStyle); } @@ -735,7 +730,7 @@ export class Carousel extends BaseComponent implements AfterContentInit { } onRightKey() { - const indicators = [...DomHandler.find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; + const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; const activeIndex = this.findFocusedIndicatorIndex(); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); @@ -754,17 +749,17 @@ export class Carousel extends BaseComponent implements AfterContentInit { } onEndKey() { - const indicators = [...DomHandler.find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]r')]; + const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]r')]; const activeIndex = this.findFocusedIndicatorIndex(); this.changedFocusedIndicator(activeIndex, indicators.length - 1); } onTabKey() { - const indicators = [...DomHandler.find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; - const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true); + const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; + const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-highlight') === true); - const activeIndicator = DomHandler.findSingle(this.indicatorContent.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]'); + const activeIndicator = findSingle(this.indicatorContent.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]'); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); indicators[activeIndex].children[0].tabIndex = '-1'; @@ -772,14 +767,14 @@ export class Carousel extends BaseComponent implements AfterContentInit { } findFocusedIndicatorIndex() { - const indicators = [...DomHandler.find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; - const activeIndicator = DomHandler.findSingle(this.indicatorContent.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]'); + const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; + const activeIndicator = findSingle(this.indicatorContent.nativeElement, '[data-pc-section="indicator"] > button[tabindex="0"]'); return indicators.findIndex((ind) => ind === activeIndicator.parentElement); } changedFocusedIndicator(prevInd, nextInd) { - const indicators = [...DomHandler.find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; + const indicators = [...find(this.indicatorContent.nativeElement, '[data-pc-section="indicator"]')]; indicators[prevInd].children[0].tabIndex = '-1'; indicators[nextInd].children[0].tabIndex = '0'; diff --git a/packages/primeng/src/carousel/style/carouselstyle.ts b/packages/primeng/src/carousel/style/carouselstyle.ts index dd46b4b9f07..214280a4ee6 100644 --- a/packages/primeng/src/carousel/style/carouselstyle.ts +++ b/packages/primeng/src/carousel/style/carouselstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-carousel { diff --git a/packages/primeng/src/cascadeselect/cascadeselect.ts b/packages/primeng/src/cascadeselect/cascadeselect.ts index 5063898d648..a38446298fe 100755 --- a/packages/primeng/src/cascadeselect/cascadeselect.ts +++ b/packages/primeng/src/cascadeselect/cascadeselect.ts @@ -22,19 +22,14 @@ import { ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OverlayOptions, OverlayService, SharedModule, TranslationKeys } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { AngleRightIcon } from 'primeng/icons/angleright'; +import { BaseComponent, OverlayOptions, OverlayService, SharedModule, TranslationKeys } from '@primeng/core'; +import { AngleRightIcon, ChevronDownIcon, TimesIcon } from '@primeng/icons'; +import { calculateScrollbarWidth, equals, findLastIndex, findSingle, focus, getHiddenElementOuterWidth, getOffset, getOuterWidth, getViewport, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData, uuid } from '@primeuix/utils'; import { AutoFocus } from 'primeng/autofocus'; - -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { TimesIcon } from 'primeng/icons/times'; import { Overlay } from 'primeng/overlay'; import { Ripple } from 'primeng/ripple'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { CascadeSelectBeforeHideEvent, CascadeSelectBeforeShowEvent, CascadeSelectChangeEvent, CascadeSelectHideEvent, CascadeSelectShowEvent } from './cascadeselect.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { CascadeSelectStyle } from './style/cascadeselectstyle'; export const CASCADESELECT_VALUE_ACCESSOR: any = { @@ -159,11 +154,11 @@ export class CascadeSelectSub extends BaseComponent implements OnInit { } getOptionLabel(processedOption) { - return this.optionLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option; + return this.optionLabel ? resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option; } getOptionValue(processedOption) { - return this.optionValue ? ObjectUtils.resolveFieldData(processedOption.option, this.optionValue) : processedOption.option; + return this.optionValue ? resolveFieldData(processedOption.option, this.optionValue) : processedOption.option; } getOptionLabelToRender(processedOption) { @@ -171,11 +166,11 @@ export class CascadeSelectSub extends BaseComponent implements OnInit { } isOptionDisabled(processedOption) { - return this.optionDisabled ? ObjectUtils.resolveFieldData(processedOption.option, this.optionDisabled) : false; + return this.optionDisabled ? resolveFieldData(processedOption.option, this.optionDisabled) : false; } getOptionGroupLabel(processedOption) { - return this.optionGroupLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionGroupLabel) : null; + return this.optionGroupLabel ? resolveFieldData(processedOption.option, this.optionGroupLabel) : null; } getOptionGroupChildren(processedOption) { @@ -183,7 +178,7 @@ export class CascadeSelectSub extends BaseComponent implements OnInit { } isOptionGroup(processedOption) { - return ObjectUtils.isNotEmpty(processedOption.children); + return isNotEmpty(processedOption.children); } isOptionSelected(processedOption) { @@ -211,11 +206,11 @@ export class CascadeSelectSub extends BaseComponent implements OnInit { position() { const parentItem = this.el.nativeElement.parentElement; - const containerOffset = DomHandler.getOffset(parentItem); - const viewport = DomHandler.getViewport(); - const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : DomHandler.getHiddenElementOuterWidth(this.el.nativeElement.children[0]); - const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]); - if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) { + const containerOffset = getOffset(parentItem); + const viewport = getViewport(); + const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : getHiddenElementOuterWidth(this.el.nativeElement.children[0]); + const itemOuterWidth = getOuterWidth(parentItem.children[0]); + if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - calculateScrollbarWidth()) { this.el.nativeElement.children[0].style.left = '-200%'; } } @@ -726,7 +721,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } get focusedOptionId() { - return this.focusedOptionInfo().index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo().parentKey) ? '_' + this.focusedOptionInfo().parentKey : ''}_${this.focusedOptionInfo().index}` : null; + return this.focusedOptionInfo().index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo().parentKey) ? '_' + this.focusedOptionInfo().parentKey : ''}_${this.focusedOptionInfo().index}` : null; } get filled(): boolean { @@ -736,7 +731,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } get searchResultMessageText() { - return ObjectUtils.isNotEmpty(this.visibleOptions()) ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText; + return isNotEmpty(this.visibleOptions()) ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText; } get searchMessageText() { @@ -774,7 +769,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { if (this.hasSelectedOption()) { const activeOptionPath = this.findOptionPathByValue(this.modelValue(), null); - const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null; + const processedOption = isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null; return processedOption ? this.getOptionLabel(processedOption.option) : label; } @@ -786,7 +781,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { if (this.hasSelectedOption()) { const activeOptionPath = this.findOptionPathByValue(this.modelValue(), null); - const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null; + const processedOption = isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null; return processedOption ? this.getOptionLabel(processedOption.option) : label; } @@ -802,7 +797,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } hasSelectedOption() { - return ObjectUtils.isNotEmpty(this.modelValue()); + return isNotEmpty(this.modelValue()); } createProcessedOptions(options, level = 0, parent = {}, parentKey = '') { @@ -908,7 +903,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { break; default: - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { !this.overlayVisible && this.show(); this.searchOptions(event, event.key); } @@ -952,7 +947,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { const processedOption = this.visibleOptions()[this.focusedOptionInfo().index]; const parentOption = this.activeOptionPath().find((p) => p.key === processedOption.parentKey); const matched = this.focusedOptionInfo().parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo().parentKey); - const root = ObjectUtils.isEmpty(processedOption.parent); + const root = isEmpty(processedOption.parent); if (matched) { const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== this.focusedOptionInfo().parentKey); @@ -1041,7 +1036,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } onBackspaceKey(event) { - if (ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear) { + if (isNotEmpty(this.modelValue()) && this.showClear) { this.clear(); } @@ -1078,7 +1073,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; - const element = DomHandler.findSingle(this.panelViewChild?.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.panelViewChild?.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); @@ -1136,7 +1131,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } isOptionDisabled(option) { - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false; } isValidOption(processedOption) { @@ -1155,12 +1150,12 @@ export class CascadeSelect extends BaseComponent implements OnInit { processedOptions = processedOptions || (level === 0 && this.processedOptions); if (!processedOptions) return null; - if (ObjectUtils.isEmpty(value)) return []; + if (isEmpty(value)) return []; for (let i = 0; i < processedOptions.length; i++) { const processedOption = processedOptions[i]; - if (ObjectUtils.equals(value, this.getOptionValue(processedOption.option), this.equalityKey())) { + if (equals(value, this.getOptionValue(processedOption.option), this.equalityKey())) { return [processedOption]; } @@ -1179,7 +1174,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } findLastOptionIndex() { - return ObjectUtils.findLastIndex(this.visibleOptions(), (processedOption) => this.isValidOption(processedOption)); + return findLastIndex(this.visibleOptions(), (processedOption) => this.isValidOption(processedOption)); } findNextOptionIndex(index) { @@ -1194,7 +1189,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } findPrevOptionIndex(index) { - const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1; + const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : index; } @@ -1266,7 +1261,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { this.activeOptionPath.set([]); this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' }); - isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement); + isFocus && focus(this.focusInputViewChild.nativeElement); this.onHide.emit(event); }; @@ -1282,7 +1277,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { this.activeOptionPath.set(activeOptionPath); let focusedOptionInfo; - if (this.hasSelectedOption() && ObjectUtils.isNotEmpty(this.activeOptionPath())) { + if (this.hasSelectedOption() && isNotEmpty(this.activeOptionPath())) { const processedOption = this.activeOptionPath()[this.activeOptionPath().length - 1]; focusedOptionInfo = { @@ -1296,11 +1291,11 @@ export class CascadeSelect extends BaseComponent implements OnInit { this.focusedOptionInfo.set(focusedOptionInfo); - isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement); + isFocus && focus(this.focusInputViewChild.nativeElement); } clear(event?: MouseEvent) { - if (ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear) { + if (isNotEmpty(this.modelValue()) && this.showClear) { this.updateModel(null); this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' }); this.activeOptionPath.set([]); @@ -1311,19 +1306,19 @@ export class CascadeSelect extends BaseComponent implements OnInit { } getOptionLabel(option) { - return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; + return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option; } getOptionValue(option) { - return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; + return this.optionValue ? resolveFieldData(option, this.optionValue) : option; } getOptionGroupLabel(optionGroup) { - return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : null; + return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : null; } getOptionGroupChildren(optionGroup, level) { - return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[level]); + return resolveFieldData(optionGroup, this.optionGroupChildren[level]); } isOptionGroup(option, level) { @@ -1331,7 +1326,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { } isProccessedOptionGroup(processedOption) { - return ObjectUtils.isNotEmpty(processedOption.children); + return isNotEmpty(processedOption.children); } getProccessedOptionLabel(processedOption) { @@ -1344,7 +1339,7 @@ export class CascadeSelect extends BaseComponent implements OnInit { super(); effect(() => { const activeOptionPath = this.activeOptionPath(); - if (ObjectUtils.isNotEmpty(activeOptionPath)) { + if (isNotEmpty(activeOptionPath)) { this.overlayViewChild.alignOverlay(); } }); @@ -1355,11 +1350,11 @@ export class CascadeSelect extends BaseComponent implements OnInit { onOptionChange(event) { const { originalEvent, value, isFocus, isHide } = event; - if (ObjectUtils.isEmpty(value)) return; + if (isEmpty(value)) return; const { index, level, parentKey, children, key } = value; - const grouped = ObjectUtils.isNotEmpty(children); + const grouped = isNotEmpty(children); const selected = this.isSelected(value); if (selected) { const activeOptionPath = this.activeOptionPath().filter((p) => key !== p.key && key.startsWith(p.key)); @@ -1386,12 +1381,12 @@ export class CascadeSelect extends BaseComponent implements OnInit { // grouped // ? this.onOptionGroupSelect({ originalEvent, value, isFocus: false }) // : this.onOptionSelect({ originalEvent, value, isFocus }); - isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement); + isFocus && focus(this.focusInputViewChild.nativeElement); } ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.autoUpdateModel(); this.bindMatchMediaListener(); } diff --git a/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts b/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts index e1b5efe6e52..a9c42ca0bdb 100644 --- a/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts +++ b/packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-cascadeselect { diff --git a/packages/primeng/src/chart/chart.ts b/packages/primeng/src/chart/chart.ts index ed73d646411..a8f64f9196b 100755 --- a/packages/primeng/src/chart/chart.ts +++ b/packages/primeng/src/chart/chart.ts @@ -1,7 +1,7 @@ -import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Inject, Input, NgModule, NgZone, OnDestroy, Output, PLATFORM_ID, ViewEncapsulation } from '@angular/core'; import { CommonModule, isPlatformBrowser } from '@angular/common'; +import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Inject, Input, NgModule, NgZone, OnDestroy, Output, PLATFORM_ID, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from '@primeng/core'; import Chart from 'chart.js/auto'; -import { SharedModule } from 'primeng/api'; /** * Chart groups a collection of contents in tabs. diff --git a/packages/primeng/src/chart/style/chartstyle.ts b/packages/primeng/src/chart/style/chartstyle.ts index b96ad3267a3..1784afdbccc 100644 --- a/packages/primeng/src/chart/style/chartstyle.ts +++ b/packages/primeng/src/chart/style/chartstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const inlineStyles = { root: { position: 'relative' } diff --git a/packages/primeng/src/checkbox/checkbox.spec.ts b/packages/primeng/src/checkbox/checkbox.spec.ts index 76a8770d86e..c82e503c45d 100755 --- a/packages/primeng/src/checkbox/checkbox.spec.ts +++ b/packages/primeng/src/checkbox/checkbox.spec.ts @@ -2,8 +2,8 @@ import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { CheckIcon } from '@primeng/icons'; import { Checkbox } from './checkbox'; -import { CheckIcon } from 'primeng/icons/check'; @Component({ template: ` ` diff --git a/packages/primeng/src/checkbox/checkbox.ts b/packages/primeng/src/checkbox/checkbox.ts index b7128fd7a10..187e5f15c2a 100755 --- a/packages/primeng/src/checkbox/checkbox.ts +++ b/packages/primeng/src/checkbox/checkbox.ts @@ -19,15 +19,13 @@ import { ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { CheckIcon, MinusIcon } from '@primeng/icons'; +import { contains, equals } from '@primeuix/utils'; import { AutoFocus } from 'primeng/autofocus'; -import { CheckIcon } from 'primeng/icons/check'; import { Nullable } from 'primeng/ts-helpers'; -import { ObjectUtils } from 'primeng/utils'; import { CheckboxChangeEvent } from './checkbox.interface'; -import { MinusIcon } from 'primeng/icons/minus'; -import { BaseComponent } from 'primeng/basecomponent'; import { CheckboxStyle } from './style/checkboxstyle'; -import { SharedModule } from 'primeng/api'; export const CHECKBOX_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -213,7 +211,7 @@ export class Checkbox extends BaseComponent implements ControlValueAccessor { @ViewChild('input') inputViewChild: Nullable; get checked() { - return this._indeterminate() ? false : this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model); + return this._indeterminate() ? false : this.binary ? this.model === this.trueValue : contains(this.value, this.model); } get containerClass() { @@ -264,7 +262,7 @@ export class Checkbox extends BaseComponent implements ControlValueAccessor { const currentModelValue = selfControl && !this.formControl ? selfControl.value : this.model; if (!this.binary) { - if (this.checked || this._indeterminate()) newModelValue = currentModelValue.filter((val) => !ObjectUtils.equals(val, this.value)); + if (this.checked || this._indeterminate()) newModelValue = currentModelValue.filter((val) => !equals(val, this.value)); else newModelValue = currentModelValue ? [...currentModelValue, this.value] : [this.value]; this.onModelChange(newModelValue); diff --git a/packages/primeng/src/checkbox/style/checkboxstyle.ts b/packages/primeng/src/checkbox/style/checkboxstyle.ts index 6f686fdaa2a..8b5842cc68f 100644 --- a/packages/primeng/src/checkbox/style/checkboxstyle.ts +++ b/packages/primeng/src/checkbox/style/checkboxstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-checkbox { diff --git a/packages/primeng/src/chip/chip.ts b/packages/primeng/src/chip/chip.ts index 011eb1471ce..2d6fafff5d3 100755 --- a/packages/primeng/src/chip/chip.ts +++ b/packages/primeng/src/chip/chip.ts @@ -1,9 +1,8 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { SharedModule, TranslationKeys } from 'primeng/api'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; +import { BaseComponent, SharedModule, TranslationKeys } from '@primeng/core'; +import { TimesCircleIcon } from '@primeng/icons'; import { ChipProps } from './chip.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { ChipStyle } from './style/chipstyle'; /** diff --git a/packages/primeng/src/chip/style/chipstyle.ts b/packages/primeng/src/chip/style/chipstyle.ts index d73cd89d766..de44f01b8a0 100644 --- a/packages/primeng/src/chip/style/chipstyle.ts +++ b/packages/primeng/src/chip/style/chipstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-chip { diff --git a/packages/primeng/src/colorpicker/colorpicker.ts b/packages/primeng/src/colorpicker/colorpicker.ts index 78f429ed7b7..0eff3beebba 100755 --- a/packages/primeng/src/colorpicker/colorpicker.ts +++ b/packages/primeng/src/colorpicker/colorpicker.ts @@ -2,13 +2,13 @@ import { animate, AnimationEvent, style, transition, trigger } from '@angular/an import { CommonModule, isPlatformBrowser } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, OnDestroy, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OverlayService, SharedModule, TranslationKeys } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { BaseComponent, OverlayService, SharedModule, TranslationKeys } from '@primeng/core'; +import { absolutePosition, appendChild, isTouchDevice, relativePosition } from '@primeuix/utils'; import { AutoFocusModule } from 'primeng/autofocus'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; import { ColorPickerChangeEvent } from './colorpicker.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { ColorPickerStyle } from './style/colorpickerstyle'; export const COLORPICKER_VALUE_ACCESSOR: any = { @@ -463,7 +463,7 @@ export class ColorPicker extends BaseComponent implements ControlValueAccessor, appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.overlay); - else DomHandler.appendChild(this.overlay, this.appendTo); + else appendChild(this.overlay, this.appendTo); } } @@ -474,8 +474,8 @@ export class ColorPicker extends BaseComponent implements ControlValueAccessor, } alignOverlay() { - if (this.appendTo) DomHandler.absolutePosition(this.overlay, this.inputViewChild?.nativeElement); - else DomHandler.relativePosition(this.overlay, this.inputViewChild?.nativeElement); + if (this.appendTo) absolutePosition(this.overlay, this.inputViewChild?.nativeElement); + else relativePosition(this.overlay, this.inputViewChild?.nativeElement); } hide() { @@ -613,7 +613,7 @@ export class ColorPicker extends BaseComponent implements ControlValueAccessor, } onWindowResize() { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.hide(); } } diff --git a/packages/primeng/src/colorpicker/style/colorpickerstyle.ts b/packages/primeng/src/colorpicker/style/colorpickerstyle.ts index f295d0c724c..41634dfcb3e 100644 --- a/packages/primeng/src/colorpicker/style/colorpickerstyle.ts +++ b/packages/primeng/src/colorpicker/style/colorpickerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-colorpicker { diff --git a/packages/primeng/src/common/style/commonstyle.ts b/packages/primeng/src/common/style/commonstyle.ts index b74c7a8b8e0..ae9d325a572 100644 --- a/packages/primeng/src/common/style/commonstyle.ts +++ b/packages/primeng/src/common/style/commonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-overflow-hidden { diff --git a/packages/primeng/src/confirmdialog/confirmdialog.spec.ts b/packages/primeng/src/confirmdialog/confirmdialog.spec.ts index 762f5be9935..e355af97e1e 100755 --- a/packages/primeng/src/confirmdialog/confirmdialog.spec.ts +++ b/packages/primeng/src/confirmdialog/confirmdialog.spec.ts @@ -2,7 +2,7 @@ import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ConfirmationService } from 'primeng/api'; +import { ConfirmationService } from '@primeng/core'; import { ConfirmDialog } from './confirmdialog'; @Component({ diff --git a/packages/primeng/src/confirmdialog/confirmdialog.ts b/packages/primeng/src/confirmdialog/confirmdialog.ts index de3641b3ebc..7a7cbd95800 100755 --- a/packages/primeng/src/confirmdialog/confirmdialog.ts +++ b/packages/primeng/src/confirmdialog/confirmdialog.ts @@ -1,18 +1,16 @@ import { animate, animation, style, transition, trigger, useAnimation } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, NgZone, numberAttribute, OnDestroy, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { Confirmation, ConfirmationService, ConfirmEventType, Footer, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, Footer, SharedModule, TranslationKeys } from '@primeng/core'; +import { CheckIcon, TimesIcon } from '@primeng/icons'; +import { findSingle, setAttribute, uuid } from '@primeuix/utils'; +import { Confirmation, ConfirmationService, ConfirmEventType } from 'primeng/api'; import { Button } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { CheckIcon } from 'primeng/icons/check'; -import { TimesIcon } from 'primeng/icons/times'; +import { Dialog } from 'primeng/dialog'; import { Ripple } from 'primeng/ripple'; import { Nullable } from 'primeng/ts-helpers'; -import { UniqueComponentId } from 'primeng/utils'; import { Subscription } from 'rxjs'; -import { BaseComponent } from 'primeng/basecomponent'; import { ConfirmDialogStyle } from './style/confirmdialogstyle'; -import { Dialog } from 'primeng/dialog'; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]); @@ -366,7 +364,7 @@ export class ConfirmDialog extends BaseComponent implements OnInit, OnDestroy { styleElement: any; - id = UniqueComponentId(); + id = uuid('pn_id_'); ariaLabelledBy: string = this.getAriaLabelledBy(); @@ -420,7 +418,7 @@ export class ConfirmDialog extends BaseComponent implements OnInit, OnDestroy { } getAriaLabelledBy() { - return this.header !== null ? UniqueComponentId() + '_header' : null; + return this.header !== null ? uuid('pn_id_') + '_header' : null; } option(name: string, k?: string) { @@ -438,20 +436,20 @@ export class ConfirmDialog extends BaseComponent implements OnInit, OnDestroy { getElementToFocus() { switch (this.option('defaultFocus')) { case 'accept': - return DomHandler.findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-accept'); + return findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-accept'); case 'reject': - return DomHandler.findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-reject'); + return findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-reject'); case 'close': - return DomHandler.findSingle(this.dialog.el.nativeElement, '.p-dialog-header-close'); + return findSingle(this.dialog.el.nativeElement, '.p-dialog-header-close'); case 'none': return null; //backward compatibility default: - return DomHandler.findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-accept'); + return findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-accept'); } } @@ -472,7 +470,7 @@ export class ConfirmDialog extends BaseComponent implements OnInit, OnDestroy { } this.styleElement.innerHTML = innerHTML; - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } } diff --git a/packages/primeng/src/confirmdialog/style/confirmdialogstyle.ts b/packages/primeng/src/confirmdialog/style/confirmdialogstyle.ts index f385ee87d89..d6de7a55a90 100644 --- a/packages/primeng/src/confirmdialog/style/confirmdialogstyle.ts +++ b/packages/primeng/src/confirmdialog/style/confirmdialogstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-confirmdialog .p-dialog-content { diff --git a/packages/primeng/src/confirmpopup/confirmpopup.ts b/packages/primeng/src/confirmpopup/confirmpopup.ts index afb4254a326..baedeae2ed3 100755 --- a/packages/primeng/src/confirmpopup/confirmpopup.ts +++ b/packages/primeng/src/confirmpopup/confirmpopup.ts @@ -19,14 +19,15 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { Confirmation, ConfirmationService, OverlayService, PrimeNGConfig, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, OverlayService, PrimeNGConfig, SharedModule, TranslationKeys } from '@primeng/core'; +import { absolutePosition, addClass, findSingle, getOffset, isIOS, isTouchDevice } from '@primeuix/utils'; +import { Confirmation, ConfirmationService } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; import { ConfirmPopupStyle } from './style/confirmpopupstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * ConfirmPopup displays a confirmation overlay displayed relatively to its target. @@ -315,10 +316,10 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD getElementToFocus() { switch (this.defaultFocus) { case 'accept': - return DomHandler.findSingle(this.container, '.p-confirm-popup-accept'); + return findSingle(this.container, '.p-confirm-popup-accept'); case 'reject': - return DomHandler.findSingle(this.container, '.p-confirm-popup-reject'); + return findSingle(this.container, '.p-confirm-popup-reject'); case 'none': return null; @@ -333,10 +334,10 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD if (!this.confirmation) { return; } - DomHandler.absolutePosition(this.container, this.confirmation?.target, false); + absolutePosition(this.container, this.confirmation?.target as any, false); - const containerOffset = DomHandler.getOffset(this.container); - const targetOffset = DomHandler.getOffset(this.confirmation?.target); + const containerOffset = getOffset(this.container); + const targetOffset = getOffset(this.confirmation?.target as any); let arrowLeft = 0; if (containerOffset.left < targetOffset.left) { @@ -345,7 +346,7 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD (this.container as HTMLDivElement).style.setProperty('--overlayArrowLeft', `${arrowLeft}px`); if (containerOffset.top < targetOffset.top) { - DomHandler.addClass(this.container, 'p-confirm-popup-flipped'); + addClass(this.container, 'p-confirm-popup-flipped'); } } @@ -397,7 +398,7 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD bindDocumentClickListener() { if (!this.documentClickListener) { - let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click'; + let documentEvent = isIOS() ? 'touchstart' : 'click'; const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : this.document; this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => { @@ -419,7 +420,7 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD } onWindowResize() { - if (this.visible && !DomHandler.isTouchDevice()) { + if (this.visible && !isTouchDevice()) { this.hide(); } } diff --git a/packages/primeng/src/confirmpopup/style/confirmpopupstyle.ts b/packages/primeng/src/confirmpopup/style/confirmpopupstyle.ts index e4353cbf2d5..686b8853428 100644 --- a/packages/primeng/src/confirmpopup/style/confirmpopupstyle.ts +++ b/packages/primeng/src/confirmpopup/style/confirmpopupstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-confirmpopup { diff --git a/packages/primeng/src/contextmenu/contextmenu.ts b/packages/primeng/src/contextmenu/contextmenu.ts index f1ec3704253..75809a0a28e 100755 --- a/packages/primeng/src/contextmenu/contextmenu.ts +++ b/packages/primeng/src/contextmenu/contextmenu.ts @@ -24,16 +24,35 @@ import { ViewRef } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MenuItem, OverlayService, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { AngleRightIcon } from 'primeng/icons/angleright'; +import { BaseComponent, OverlayService, SharedModule } from '@primeng/core'; +import { AngleRightIcon } from '@primeng/icons'; +import { + appendChild, + calculateScrollbarWidth, + findLastIndex, + findSingle, + focus, + getHiddenElementOuterHeight, + getHiddenElementOuterWidth, + getOffset, + getOuterWidth, + getViewport, + isAndroid, + isEmpty, + isIOS, + isNotEmpty, + isPrintableCharacter, + removeChild, + resolve, + uuid +} from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; +import { BadgeModule } from 'primeng/badge'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { ContextMenuStyle } from './style/contextmenustyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { BadgeModule } from 'primeng/badge'; @Component({ selector: 'p-contextMenuSub, p-contextmenu-sub', @@ -236,7 +255,7 @@ export class ContextMenuSub extends BaseComponent { } getItemProp(processedItem: any, name: string, params: any | null = null) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined; } getItemId(processedItem: any): string { @@ -295,7 +314,7 @@ export class ContextMenuSub extends BaseComponent { } isItemGroup(processedItem: any): boolean { - return ObjectUtils.isNotEmpty(processedItem.items); + return isNotEmpty(processedItem.items); } onItemMouseEnter(param: any) { @@ -317,14 +336,14 @@ export class ContextMenuSub extends BaseComponent { position(sublist) { const parentItem = sublist.parentElement.parentElement; - const containerOffset = DomHandler.getOffset(sublist.parentElement.parentElement); - const viewport = DomHandler.getViewport(); - const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getHiddenElementOuterWidth(sublist); - const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]); + const containerOffset = getOffset(sublist.parentElement.parentElement); + const viewport = getViewport(); + const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : getHiddenElementOuterWidth(sublist); + const itemOuterWidth = getOuterWidth(parentItem.children[0]); sublist.style.top = '0px'; - if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) { + if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - calculateScrollbarWidth()) { sublist.style.left = -1 * sublistWidth + 'px'; } else { sublist.style.left = itemOuterWidth + 'px'; @@ -537,7 +556,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { get focusedItemId() { const focusedItem = this.focusedItemInfo(); - return focusedItem.item && focusedItem.item?.id ? focusedItem.item.id : focusedItem.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItem.parentKey) ? '_' + focusedItem.parentKey : ''}_${focusedItem.index}` : null; + return focusedItem.item && focusedItem.item?.id ? focusedItem.item.id : focusedItem.index !== -1 ? `${this.id}${isNotEmpty(focusedItem.parentKey) ? '_' + focusedItem.parentKey : ''}_${focusedItem.index}` : null; } constructor(public overlayService: OverlayService) { @@ -545,7 +564,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { effect(() => { const path = this.activeItemPath(); - if (ObjectUtils.isNotEmpty(path)) { + if (isNotEmpty(path)) { this.bindGlobalListeners(); } else if (!this.visible()) { this.unbindGlobalListeners(); @@ -555,13 +574,13 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.bindMatchMediaListener(); this.bindTriggerEventListener(); } isMobile() { - return DomHandler.isIOS() || DomHandler.isAndroid(); + return isIOS() || isAndroid(); } bindTriggerEventListener() { @@ -673,7 +692,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { } getItemProp(item: any, name: string) { - return item ? ObjectUtils.getItemValue(item[name]) : undefined; + return item ? resolve(item[name]) : undefined; } getProccessedItemLabel(processedItem: any) { @@ -685,7 +704,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { } isProcessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } isSelected(processedItem: any): boolean { @@ -713,7 +732,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { } isProccessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } onItemClick(event: any) { @@ -727,7 +746,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { this.activeItemPath.set(this.activeItemPath().filter((p) => key !== p.key && key.startsWith(p.key))); this.focusedItemInfo.set({ index, level, parentKey, item }); - DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + focus(this.rootmenu.sublistViewChild.nativeElement); } else { grouped ? this.onItemChange(event) : this.hide(); } @@ -790,7 +809,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { break; default: - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } @@ -841,7 +860,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { onArrowLeftKey(event: KeyboardEvent) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const parentItem = this.activeItemPath().find((p) => p.key === processedItem.parentKey); - const root = ObjectUtils.isEmpty(processedItem.parent); + const root = isEmpty(processedItem.parent); if (!root) { this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '', item: processedItem.item }); @@ -891,8 +910,8 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { onEnterKey(event: KeyboardEvent) { if (this.focusedItemInfo().index !== -1) { - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); - const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); + const element = findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const anchorElement = element && findSingle(element, 'a[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); @@ -910,10 +929,10 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { onItemChange(event: any, type?: string | undefined) { const { processedItem, isFocus } = event; - if (ObjectUtils.isEmpty(processedItem)) return; + if (isEmpty(processedItem)) return; const { index, key, level, parentKey, items } = processedItem; - const grouped = ObjectUtils.isNotEmpty(items); + const grouped = isNotEmpty(items); const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key); if (grouped) { @@ -921,7 +940,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { this.submenuVisible.set(true); } this.focusedItemInfo.set({ index, level, parentKey, item: processedItem.item }); - isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + isFocus && focus(this.rootmenu.sublistViewChild.nativeElement); if (type === 'hover' && this.queryMatches) { return; @@ -951,7 +970,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { this.moveOnTop(); this.appendOverlay(); this.bindGlobalListeners(); - DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + focus(this.rootmenu.sublistViewChild.nativeElement); break; } } @@ -967,7 +986,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.containerViewChild.nativeElement); - else DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo); + else appendChild(this.containerViewChild.nativeElement, this.appendTo); } } @@ -1029,9 +1048,9 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { position() { let left = this.pageX + 1; let top = this.pageY + 1; - let width = this.containerViewChild.nativeElement.offsetParent ? this.containerViewChild.nativeElement.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.containerViewChild.nativeElement); - let height = this.containerViewChild.nativeElement.offsetParent ? this.containerViewChild.nativeElement.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.containerViewChild.nativeElement); - let viewport = DomHandler.getViewport(); + let width = this.containerViewChild.nativeElement.offsetParent ? this.containerViewChild.nativeElement.offsetWidth : getHiddenElementOuterWidth(this.containerViewChild.nativeElement); + let height = this.containerViewChild.nativeElement.offsetParent ? this.containerViewChild.nativeElement.offsetHeight : getHiddenElementOuterHeight(this.containerViewChild.nativeElement); + let viewport = getViewport(); //flip if (left + width - this.document.scrollingElement.scrollLeft > viewport.width) { @@ -1095,7 +1114,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { } findVisibleItem(index) { - return ObjectUtils.isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; + return isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; } findLastFocusedItemIndex() { @@ -1104,11 +1123,11 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { } findLastItemIndex() { - return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); + return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); } findPrevItemIndex(index: number) { - const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; + const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex : index; } @@ -1144,7 +1163,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { scrollInView(index: number = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -1206,7 +1225,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy { if (this.appendTo === 'body') { this.renderer.removeChild(this.document.body, this.containerViewChild.nativeElement); } else { - DomHandler.removeChild(this.containerViewChild.nativeElement, this.appendTo); + removeChild(this.containerViewChild.nativeElement, this.appendTo); } } } diff --git a/packages/primeng/src/contextmenu/style/contextmenustyle.ts b/packages/primeng/src/contextmenu/style/contextmenustyle.ts index 4028bcb4310..97143377cd2 100644 --- a/packages/primeng/src/contextmenu/style/contextmenustyle.ts +++ b/packages/primeng/src/contextmenu/style/contextmenustyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-contextmenu { diff --git a/packages/primeng/src/dataview/dataview.ts b/packages/primeng/src/dataview/dataview.ts index 54ce4bcf9b1..0f8bff231ec 100755 --- a/packages/primeng/src/dataview/dataview.ts +++ b/packages/primeng/src/dataview/dataview.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, @@ -17,16 +18,15 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { ObjectUtils } from 'primeng/utils'; -import { BlockableUI, FilterService, Footer, Header, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, FilterService, Footer, Header, SharedModule, TranslationKeys } from '@primeng/core'; +import { SpinnerIcon } from '@primeng/icons'; +import { resolveFieldData } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; import { PaginatorModule } from 'primeng/paginator'; -import { Subscription } from 'rxjs'; -import { SpinnerIcon } from 'primeng/icons/spinner'; import { Nullable } from 'primeng/ts-helpers'; +import { Subscription } from 'rxjs'; import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, DataViewPaginatorState, DataViewSortEvent } from './dataview.interface'; import { DataViewStyle } from './style/dataviewstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * DataView displays data in grid or list layout with pagination and sorting features. @@ -532,8 +532,8 @@ export class DataView extends BaseComponent implements OnInit, OnDestroy, Blocka this.onLazyLoad.emit(this.createLazyLoadMetadata()); } else if (this.value) { this.value.sort((data1, data2) => { - let value1 = ObjectUtils.resolveFieldData(data1, this.sortField); - let value2 = ObjectUtils.resolveFieldData(data2, this.sortField); + let value1 = resolveFieldData(data1, this.sortField); + let value2 = resolveFieldData(data2, this.sortField); let result = null; if (value1 == null && value2 != null) result = -1; diff --git a/packages/primeng/src/dataview/style/dataviewstyle.ts b/packages/primeng/src/dataview/style/dataviewstyle.ts index fbc32495f3e..f214450d718 100644 --- a/packages/primeng/src/dataview/style/dataviewstyle.ts +++ b/packages/primeng/src/dataview/style/dataviewstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-dataview { diff --git a/packages/primeng/src/datepicker/datepicker.spec.ts b/packages/primeng/src/datepicker/datepicker.spec.ts index dc2d4ad3da6..878f6465a81 100755 --- a/packages/primeng/src/datepicker/datepicker.spec.ts +++ b/packages/primeng/src/datepicker/datepicker.spec.ts @@ -3,7 +3,7 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { SharedModule } from 'primeng/api'; +import { SharedModule } from '@primeng/core'; import { ButtonModule } from 'primeng/button'; import { DatePicker } from './datepicker'; diff --git a/packages/primeng/src/datepicker/datepicker.ts b/packages/primeng/src/datepicker/datepicker.ts index bc470c3e449..2672ab4f0df 100644 --- a/packages/primeng/src/datepicker/datepicker.ts +++ b/packages/primeng/src/datepicker/datepicker.ts @@ -21,24 +21,37 @@ import { ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OverlayService, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, OverlayService, SharedModule, TranslationKeys } from '@primeng/core'; +import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, TimesIcon } from '@primeng/icons'; +import { + absolutePosition, + addClass, + appendChild, + blockBodyScroll, + find, + findSingle, + getFocusableElements, + getIndex, + getOuterWidth, + hasClass, + isDate, + isNotEmpty, + isTouchDevice, + relativePosition, + setAttribute, + unblockBodyScroll, + uuid +} from '@primeuix/utils'; +import { AutoFocus } from 'primeng/autofocus'; import { Button } from 'primeng/button'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; +import { InputText } from 'primeng/inputtext'; import { Ripple } from 'primeng/ripple'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; -import { Subscription } from 'rxjs'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { TimesIcon } from 'primeng/icons/times'; -import { CalendarIcon } from 'primeng/icons/calendar'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; +import { ZIndexUtils } from 'primeng/utils'; +import { Subscription } from 'rxjs'; import { DatePickerMonthChangeEvent, DatePickerResponsiveOptions, DatePickerTypeView, DatePickerYearChangeEvent, LocaleSettings, Month, NavigationState } from './datepicker.interface'; -import { AutoFocus } from 'primeng/autofocus'; -import { InputText } from 'primeng/inputtext'; import { DatePickerStyle } from './style/datepickerstyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const DATEPICKER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -1303,7 +1316,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont ngOnInit() { super.ngOnInit(); - this.attributeSelector = UniqueComponentId(); + this.attributeSelector = uuid('pn_id_'); this.panelId = this.attributeSelector + '_panel'; const date = this.defaultDate || new Date(); this.createResponsiveStyle(); @@ -1336,7 +1349,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont this.initFocusableCell(); if (this.numberOfMonths === 1) { if (this.contentViewChild && this.contentViewChild.nativeElement) { - this.contentViewChild.nativeElement.style.width = DomHandler.getOuterWidth(this.containerViewChild?.nativeElement) + 'px'; + this.contentViewChild.nativeElement.style.width = getOuterWidth(this.containerViewChild?.nativeElement) + 'px'; } } } @@ -1937,13 +1950,13 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } isDateEquals(value: any, dateMeta: any) { - if (value && ObjectUtils.isDate(value)) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year; + if (value && isDate(value)) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year; else return false; } isDateBetween(start: Date, end: Date, dateMeta: any) { let between: boolean = false; - if (ObjectUtils.isDate(start) && ObjectUtils.isDate(end)) { + if (isDate(start) && isDate(end)) { let date: Date = this.formatDateMetaToDate(dateMeta); return start.getTime() <= date.getTime() && end.getTime() >= date.getTime(); } @@ -2113,7 +2126,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont this.trapFocus(event); } if (this.inline) { - const headerElements = DomHandler.findSingle(this.containerViewChild?.nativeElement, '.p-datepicker-header'); + const headerElements = findSingle(this.containerViewChild?.nativeElement, '.p-datepicker-header'); const element = event.target; if (this.timeOnly) { return; @@ -2154,7 +2167,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont event.preventDefault(); } } else if (event.keyCode === 9 && this.contentViewChild) { - DomHandler.getFocusableElements(this.contentViewChild.nativeElement).forEach((el) => (el.tabIndex = '-1')); + getFocusableElements(this.contentViewChild.nativeElement).forEach((el: any) => (el.tabIndex = '-1')); if (this.overlayVisible) { this.overlayVisible = false; } @@ -2169,11 +2182,11 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont //down arrow case 40: { cellContent.tabIndex = '-1'; - let cellIndex = DomHandler.index(cell); + let cellIndex = getIndex(cell); let nextRow = cell.parentElement.nextElementSibling; if (nextRow) { let focusCell = nextRow.children[cellIndex].children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled')) { + if (hasClass(focusCell, 'p-disabled')) { this.navigationState = { backward: false }; this.navForward(event); } else { @@ -2191,11 +2204,11 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont //up arrow case 38: { cellContent.tabIndex = '-1'; - let cellIndex = DomHandler.index(cell); + let cellIndex = getIndex(cell); let prevRow = cell.parentElement.previousElementSibling; if (prevRow) { let focusCell = prevRow.children[cellIndex].children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled')) { + if (hasClass(focusCell, 'p-disabled')) { this.navigationState = { backward: true }; this.navBackward(event); } else { @@ -2216,7 +2229,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont let prevCell = cell.previousElementSibling; if (prevCell) { let focusCell = prevCell.children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled') || DomHandler.hasClass(focusCell.parentElement, 'p-datepicker-weeknumber')) { + if (hasClass(focusCell, 'p-disabled') || hasClass(focusCell.parentElement, 'p-datepicker-weeknumber')) { this.navigateToMonth(true, groupIndex); } else { focusCell.tabIndex = '0'; @@ -2235,7 +2248,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont let nextCell = cell.nextElementSibling; if (nextCell) { let focusCell = nextCell.children[0]; - if (DomHandler.hasClass(focusCell, 'p-disabled')) { + if (hasClass(focusCell, 'p-disabled')) { this.navigateToMonth(false, groupIndex); } else { focusCell.tabIndex = '0'; @@ -2298,7 +2311,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont cellContent.tabIndex = '-1'; const firstDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); const firstDayDateKey = this.formatDateKey(firstDayDate); - const firstDayCell = DomHandler.findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`); + const firstDayCell = findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`); if (firstDayCell) { firstDayCell.tabIndex = '0'; firstDayCell.focus(); @@ -2311,7 +2324,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont cellContent.tabIndex = '-1'; const lastDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); const lastDayDateKey = this.formatDateKey(lastDayDate); - const lastDayCell = DomHandler.findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`); + const lastDayCell = findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`); if (lastDayDate) { lastDayCell.tabIndex = '0'; lastDayCell.focus(); @@ -2333,7 +2346,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont case 40: { cell.tabIndex = '-1'; var cells = cell.parentElement.children; - var cellIndex = DomHandler.index(cell); + var cellIndex = getIndex(cell); let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3]; if (nextCell) { nextCell.tabIndex = '0'; @@ -2415,7 +2428,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont case 40: { cell.tabIndex = '-1'; var cells = cell.parentElement.children; - var cellIndex = DomHandler.index(cell); + var cellIndex = getIndex(cell); let nextCell = cells[event.which === 40 ? cellIndex + 2 : cellIndex - 2]; if (nextCell) { nextCell.tabIndex = '0'; @@ -2495,11 +2508,11 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } else { let prevMonthContainer = this.contentViewChild.nativeElement.children[groupIndex - 1]; if (focusKey) { - const firstDayCell = DomHandler.findSingle(prevMonthContainer, focusKey); + const firstDayCell = findSingle(prevMonthContainer, focusKey); firstDayCell.tabIndex = '0'; firstDayCell.focus(); } else { - let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + let cells = find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); let focusCell = cells[cells.length - 1]; focusCell.tabIndex = '0'; focusCell.focus(); @@ -2513,11 +2526,11 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } else { let nextMonthContainer = this.contentViewChild.nativeElement.children[groupIndex + 1]; if (focusKey) { - const firstDayCell = DomHandler.findSingle(nextMonthContainer, focusKey); + const firstDayCell = findSingle(nextMonthContainer, focusKey); firstDayCell.tabIndex = '0'; firstDayCell.focus(); } else { - let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + let focusCell = findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); focusCell.tabIndex = '0'; focusCell.focus(); } @@ -2532,18 +2545,18 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont if (this.navigationState.button) { this.initFocusableCell(); - if (this.navigationState.backward) DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev').focus(); - else DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next').focus(); + if (this.navigationState.backward) (findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev') as any).focus(); + else (findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next') as any).focus(); } else { if (this.navigationState.backward) { let cells; if (this.currentView === 'month') { - cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); + cells = find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); } else if (this.currentView === 'year') { - cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); + cells = find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); } else { - cells = DomHandler.find(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + cells = find(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); } if (cells && cells.length > 0) { @@ -2551,11 +2564,11 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } } else { if (this.currentView === 'month') { - cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); + cell = findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); } else if (this.currentView === 'year') { - cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); + cell = findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); } else { - cell = DomHandler.findSingle(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + cell = findSingle(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); } } @@ -2577,31 +2590,31 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont let cell!: any; if (this.currentView === 'month') { - let cells = DomHandler.find(contentEl, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); - let selectedCell = DomHandler.findSingle(contentEl, '.p-monthpicker .p-monthpicker-month.p-highlight'); - cells.forEach((cell) => (cell.tabIndex = -1)); + let cells = find(contentEl, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)'); + let selectedCell = findSingle(contentEl, '.p-monthpicker .p-monthpicker-month.p-highlight'); + cells.forEach((cell: any) => (cell.tabIndex = -1)); cell = selectedCell || cells[0]; if (cells.length === 0) { - let disabledCells = DomHandler.find(contentEl, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]'); - disabledCells.forEach((cell) => (cell.tabIndex = -1)); + let disabledCells = find(contentEl, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]'); + disabledCells.forEach((cell: any) => (cell.tabIndex = -1)); } } else if (this.currentView === 'year') { - let cells = DomHandler.find(contentEl, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); - let selectedCell = DomHandler.findSingle(contentEl, '.p-yearpicker .p-yearpicker-year.p-highlight'); - cells.forEach((cell) => (cell.tabIndex = -1)); + let cells = find(contentEl, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)'); + let selectedCell = findSingle(contentEl, '.p-yearpicker .p-yearpicker-year.p-highlight'); + cells.forEach((cell: any) => (cell.tabIndex = -1)); cell = selectedCell || cells[0]; if (cells.length === 0) { - let disabledCells = DomHandler.find(contentEl, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]'); - disabledCells.forEach((cell) => (cell.tabIndex = -1)); + let disabledCells = find(contentEl, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]'); + disabledCells.forEach((cell: any) => (cell.tabIndex = -1)); } } else { - cell = DomHandler.findSingle(contentEl, 'span.p-highlight'); + cell = findSingle(contentEl, 'span.p-highlight'); if (!cell) { - let todayCell = DomHandler.findSingle(contentEl, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)'); + let todayCell = findSingle(contentEl, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)'); if (todayCell) cell = todayCell; - else cell = DomHandler.findSingle(contentEl, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); + else cell = findSingle(contentEl, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)'); } } @@ -2621,7 +2634,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } trapFocus(event: any) { - let focusableElements = DomHandler.getFocusableElements(this.contentViewChild.nativeElement); + let focusableElements = getFocusableElements(this.contentViewChild.nativeElement); if (focusableElements && focusableElements.length > 0) { if (!focusableElements[0].ownerDocument.activeElement) { @@ -3034,7 +3047,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } isValidDate(date: any) { - return ObjectUtils.isDate(date) && ObjectUtils.isNotEmpty(date); + return isDate(date) && isNotEmpty(date); } updateUI() { @@ -3139,7 +3152,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.document.body.appendChild(this.overlay); - else DomHandler.appendChild(this.overlay, this.appendTo); + else appendChild(this.overlay, this.appendTo); } } @@ -3155,15 +3168,15 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } else if (this.overlay) { if (this.appendTo) { if (this.view === 'date') { - this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px'; - this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; + this.overlay.style.width = getOuterWidth(this.overlay) + 'px'; + this.overlay.style.minWidth = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; } else { - this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; + this.overlay.style.width = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px'; } - DomHandler.absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement); + absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement); } else { - DomHandler.relativePosition(this.overlay, this.inputfieldViewChild?.nativeElement); + relativePosition(this.overlay, this.inputfieldViewChild?.nativeElement); } } } @@ -3173,20 +3186,20 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont this.mask = this.renderer.createElement('div'); this.renderer.setStyle(this.mask, 'zIndex', String(parseInt(element.style.zIndex) - 1)); let maskStyleClass = 'p-overlay-mask p-datepicker-mask p-datepicker-mask-scrollblocker p-overlay-mask p-overlay-mask-enter'; - DomHandler.addMultipleClasses(this.mask, maskStyleClass); + addClass(this.mask, maskStyleClass); this.maskClickListener = this.renderer.listen(this.mask, 'click', (event: any) => { this.disableModality(); this.overlayVisible = false; }); this.renderer.appendChild(this.document.body, this.mask); - DomHandler.blockBodyScroll(); + blockBodyScroll(); } } disableModality() { if (this.mask) { - DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); + addClass(this.mask, 'p-overlay-mask-leave'); if (!this.animationEndListener) { this.animationEndListener = this.renderer.listen(this.mask, 'animationend', this.destroyMask.bind(this)); } @@ -3202,14 +3215,14 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont let hasBlockerMasks!: boolean; for (let i = 0; i < bodyChildren.length; i++) { let bodyChild = bodyChildren[i]; - if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) { + if (hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) { hasBlockerMasks = true; break; } } if (!hasBlockerMasks) { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } this.unbindAnimationEndListener(); @@ -3661,7 +3674,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont } (this.responsiveStyleElement).innerHTML = innerHTML; - DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.responsiveStyleElement, 'nonce', this.config?.csp()?.nonce); } } @@ -3733,14 +3746,12 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target))); } - isNavIconClicked(event: Event) { - return ( - DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon') || DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon') - ); + isNavIconClicked(event: any) { + return hasClass(event.target, 'p-datepicker-prev') || hasClass(event.target, 'p-datepicker-prev-icon') || hasClass(event.target, 'p-datepicker-next') || hasClass(event.target, 'p-datepicker-next-icon'); } onWindowResize() { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.hideOverlay(); } } diff --git a/packages/primeng/src/datepicker/style/datepickerstyle.ts b/packages/primeng/src/datepicker/style/datepickerstyle.ts index 311450eee0c..e6a0601cf1f 100644 --- a/packages/primeng/src/datepicker/style/datepickerstyle.ts +++ b/packages/primeng/src/datepicker/style/datepickerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-datepicker { diff --git a/packages/primeng/src/defer/defer.ts b/packages/primeng/src/defer/defer.ts index ca48525f1d4..3c9663abb94 100755 --- a/packages/primeng/src/defer/defer.ts +++ b/packages/primeng/src/defer/defer.ts @@ -1,6 +1,6 @@ import { isPlatformBrowser } from '@angular/common'; import { AfterViewInit, ContentChild, Directive, EmbeddedViewRef, EventEmitter, inject, NgModule, OnDestroy, Output, TemplateRef, ViewContainerRef } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; import { Nullable } from 'primeng/ts-helpers'; /** diff --git a/packages/primeng/src/dialog/dialog.spec.ts b/packages/primeng/src/dialog/dialog.spec.ts index f55d375ba73..8c5ea90cf40 100755 --- a/packages/primeng/src/dialog/dialog.spec.ts +++ b/packages/primeng/src/dialog/dialog.spec.ts @@ -2,13 +2,11 @@ import { Component } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Footer } from 'primeng/api'; +import { Footer } from '@primeng/core'; +import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from '@primeng/icons'; import { ButtonModule } from '../button/button'; import { FocusTrapModule } from '../focustrap/focustrap'; import { Dialog } from './dialog'; -import { TimesIcon } from 'primeng/icons/times'; -import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize'; -import { WindowMinimizeIcon } from 'primeng/icons/windowminimize'; @Component({ template: ` diff --git a/packages/primeng/src/dialog/dialog.ts b/packages/primeng/src/dialog/dialog.ts index cbc2babbc92..451ffcc0a13 100755 --- a/packages/primeng/src/dialog/dialog.ts +++ b/packages/primeng/src/dialog/dialog.ts @@ -20,18 +20,16 @@ import { ViewEncapsulation, ViewRef } from '@angular/core'; -import { SharedModule, TranslationKeys } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, SharedModule, TranslationKeys } from '@primeng/core'; +import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from '@primeng/icons'; +import { addClass, appendChild, blockBodyScroll, getFocusableElements, getOuterHeight, getOuterWidth, getViewport, hasClass, removeClass, setAttribute, unblockBodyScroll, uuid } from '@primeuix/utils'; +import { Button, ButtonProps } from 'primeng/button'; import { FocusTrap } from 'primeng/focustrap'; -import { TimesIcon } from 'primeng/icons/times'; -import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize'; -import { WindowMinimizeIcon } from 'primeng/icons/windowminimize'; import { Ripple } from 'primeng/ripple'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; -import { Button, ButtonProps } from 'primeng/button'; +import { ZIndexUtils } from 'primeng/utils'; import { DialogStyle } from './style/dialogstyle'; -import { BaseComponent } from 'primeng/basecomponent'; +import { DomHandler } from 'primeng/dom'; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); @@ -555,7 +553,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { preMaximizePageY: number | undefined; - id: string = UniqueComponentId(); + id: string = uuid('pn_id_'); _style: any = {}; @@ -595,11 +593,11 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { } getAriaLabelledBy() { - return this.header !== null ? UniqueComponentId() + '_header' : null; + return this.header !== null ? uuid('pn_id_') + '_header' : null; } focus(focusParentElement = this.contentViewChild.nativeElement) { - let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]'); + let focusable = getFocusableElements(focusParentElement, '[autofocus]'); if (focusable) { this.zone.runOutsideAngular(() => { setTimeout(() => focusable.focus(), 5); @@ -632,7 +630,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { } if (this.modal) { - DomHandler.blockBodyScroll(); + blockBodyScroll(); } } @@ -646,7 +644,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { const scrollBlockers = document.querySelectorAll('.p-dialog-mask-scrollblocker'); if (this.modal && scrollBlockers && scrollBlockers.length == 1) { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } if (!(this.cd as ViewRef).destroyed) { @@ -660,9 +658,9 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { if (!this.modal && !this.blockScroll) { if (this.maximized) { - DomHandler.blockBodyScroll(); + blockBodyScroll(); } else { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } } @@ -701,13 +699,13 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { } this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } } } initDrag(event: MouseEvent) { - if (DomHandler.hasClass(event.target, 'p-dialog-maximize-icon') || DomHandler.hasClass(event.target, 'p-dialog-header-close-icon') || DomHandler.hasClass((event.target).parentElement, 'p-dialog-header-icon')) { + if (hasClass(event.target as any, 'p-dialog-maximize-icon') || hasClass(event.target as any, 'p-dialog-header-close-icon') || hasClass((event.target).parentElement, 'p-dialog-header-icon')) { return; } @@ -717,14 +715,14 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { this.lastPageY = event.pageY; (this.container as HTMLDivElement).style.margin = '0'; - DomHandler.addClass(this.document.body, 'p-unselectable-text'); + addClass(this.document.body, 'p-unselectable-text'); } } onDrag(event: MouseEvent) { if (this.dragging) { - const containerWidth = DomHandler.getOuterWidth(this.container); - const containerHeight = DomHandler.getOuterHeight(this.container); + const containerWidth = getOuterWidth(this.container); + const containerHeight = getOuterHeight(this.container); const deltaX = event.pageX - (this.lastPageX as number); const deltaY = event.pageY - (this.lastPageY as number); const offset = this.container.getBoundingClientRect(); @@ -736,7 +734,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { const leftPos = offset.left + deltaX - leftMargin; const topPos = offset.top + deltaY - topMargin; - const viewport = DomHandler.getViewport(); + const viewport = getViewport(); this.container.style.position = 'fixed'; @@ -764,7 +762,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { endDrag(event: DragEvent) { if (this.dragging) { this.dragging = false; - DomHandler.removeClass(this.document.body, 'p-unselectable-text'); + removeClass(this.document.body, 'p-unselectable-text'); this.cd.detectChanges(); this.onDragEnd.emit(event); } @@ -787,7 +785,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { this.resizing = true; this.lastPageX = event.pageX; this.lastPageY = event.pageY; - DomHandler.addClass(this.document.body, 'p-unselectable-text'); + addClass(this.document.body, 'p-unselectable-text'); this.onResizeInit.emit(event); } } @@ -796,15 +794,15 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { if (this.resizing) { let deltaX = event.pageX - (this.lastPageX as number); let deltaY = event.pageY - (this.lastPageY as number); - let containerWidth = DomHandler.getOuterWidth(this.container); - let containerHeight = DomHandler.getOuterHeight(this.container); - let contentHeight = DomHandler.getOuterHeight(this.contentViewChild?.nativeElement); + let containerWidth = getOuterWidth(this.container); + let containerHeight = getOuterHeight(this.container); + let contentHeight = getOuterHeight(this.contentViewChild?.nativeElement); let newWidth = containerWidth + deltaX; let newHeight = containerHeight + deltaY; let minWidth = (this.container as HTMLDivElement).style.minWidth; let minHeight = (this.container as HTMLDivElement).style.minHeight; let offset = (this.container as HTMLDivElement).getBoundingClientRect(); - let viewport = DomHandler.getViewport(); + let viewport = getViewport(); let hasBeenDragged = !parseInt((this.container as HTMLDivElement).style.top) || !parseInt((this.container as HTMLDivElement).style.left); if (hasBeenDragged) { @@ -834,7 +832,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { resizeEnd(event: MouseEvent) { if (this.resizing) { this.resizing = false; - DomHandler.removeClass(this.document.body, 'p-unselectable-text'); + removeClass(this.document.body, 'p-unselectable-text'); this.onResizeEnd.emit(event); } } @@ -929,7 +927,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.wrapper); - else DomHandler.appendChild(this.wrapper, this.appendTo); + else appendChild(this.wrapper, this.appendTo); } } @@ -954,7 +952,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { } // if (!this.modal && this.blockScroll) { - // DomHandler.addClass(this.document.body, 'p-overflow-hidden'); + // addClass(this.document.body, 'p-overflow-hidden'); // } if (this.focusOnShow) { @@ -965,7 +963,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { case 'void': if (this.wrapper && this.modal) { - DomHandler.addClass(this.wrapper, 'p-overlay-mask-leave'); + addClass(this.wrapper, 'p-overlay-mask-leave'); } break; } @@ -991,7 +989,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { this.maskVisible = false; if (this.maximized) { - // DomHandler.removeClass(this.document.body, 'p-overflow-hidden') + // removeClass(this.document.body, 'p-overflow-hidden') this.document.body.style.removeProperty('--scrollbar;-width'); this.maximized = false; } @@ -1001,11 +999,11 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy { } // if (this.blockScroll) { - // DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); + // removeClass(this.document.body, 'p-overflow-hidden'); // } - if (DomHandler.hasClass(this.document.body, 'p-overflow-hidden')) { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); + if (hasClass(this.document.body, 'p-overflow-hidden')) { + removeClass(this.document.body, 'p-overflow-hidden'); } if (this.container && this.autoZIndex) { diff --git a/packages/primeng/src/dialog/style/dialogstyle.ts b/packages/primeng/src/dialog/style/dialogstyle.ts index 3a7d31a92ac..61ea14babc2 100644 --- a/packages/primeng/src/dialog/style/dialogstyle.ts +++ b/packages/primeng/src/dialog/style/dialogstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-dialog { diff --git a/packages/primeng/src/divider/divider.ts b/packages/primeng/src/divider/divider.ts index 873b072ace0..55ff59f25b6 100755 --- a/packages/primeng/src/divider/divider.ts +++ b/packages/primeng/src/divider/divider.ts @@ -1,8 +1,7 @@ -import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { BaseComponent } from 'primeng/basecomponent'; +import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { DividerStyle } from './style/dividerstyle'; -import { SharedModule } from 'primeng/api'; /** * Divider is used to separate contents. diff --git a/packages/primeng/src/divider/style/dividerstyle.ts b/packages/primeng/src/divider/style/dividerstyle.ts index 07b85e0894b..ec2f4ba72bd 100644 --- a/packages/primeng/src/divider/style/dividerstyle.ts +++ b/packages/primeng/src/divider/style/dividerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-divider-horizontal { diff --git a/packages/primeng/src/dock/dock.ts b/packages/primeng/src/dock/dock.ts index 537aefc348a..b2323e3eca7 100755 --- a/packages/primeng/src/dock/dock.ts +++ b/packages/primeng/src/dock/dock.ts @@ -1,15 +1,14 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MenuItem, SharedModule } from 'primeng/api'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { find, findSingle, resolve, uuid } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; +import { Divider } from 'primeng/divider'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { Nullable } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { DomHandler } from 'primeng/dom'; import { DockStyle } from './style/dockstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Divider } from 'primeng/divider'; /** * Dock is a navigation component consisting of menuitems. @@ -174,7 +173,7 @@ export class Dock extends BaseComponent { ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } @ContentChild('item') itemTemplate: TemplateRef | undefined; @@ -184,7 +183,7 @@ export class Dock extends BaseComponent { } getItemProp(processedItem, name) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined; } disabled(item) { @@ -294,25 +293,25 @@ export class Dock extends BaseComponent { } onEndKey() { - this.changeFocusedOptionIndex(DomHandler.find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1); + this.changeFocusedOptionIndex(find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1); } onSpaceKey() { - const element = DomHandler.findSingle(this.listViewChild.nativeElement, `li[id="${`${this.focusedOptionIndex}`}"]`); - const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]'); + const element = findSingle(this.listViewChild.nativeElement, `li[id="${`${this.focusedOptionIndex}`}"]`); + const anchorElement = element && findSingle(element, '[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); } findNextOptionIndex(index) { - const menuitems = DomHandler.find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); + const menuitems = find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; } changeFocusedOptionIndex(index) { - const menuitems = DomHandler.find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); + const menuitems = find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index; @@ -320,7 +319,7 @@ export class Dock extends BaseComponent { } findPrevOptionIndex(index) { - const menuitems = DomHandler.find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); + const menuitems = find(this.listViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; diff --git a/packages/primeng/src/dock/style/dockstyle.ts b/packages/primeng/src/dock/style/dockstyle.ts index 4d2b1eb8725..683767eddba 100644 --- a/packages/primeng/src/dock/style/dockstyle.ts +++ b/packages/primeng/src/dock/style/dockstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-dock { diff --git a/packages/primeng/src/dragdrop/dragdrop.ts b/packages/primeng/src/dragdrop/dragdrop.ts index ef156177b0e..10148c35206 100755 --- a/packages/primeng/src/dragdrop/dragdrop.ts +++ b/packages/primeng/src/dragdrop/dragdrop.ts @@ -1,4 +1,5 @@ import { AfterViewInit, booleanAttribute, Directive, ElementRef, EventEmitter, HostListener, Input, NgModule, NgZone, OnDestroy, Output, Renderer2 } from '@angular/core'; +import { addClass, removeClass } from '@primeuix/utils'; import { DomHandler } from 'primeng/dom'; import { VoidListener } from 'primeng/ts-helpers'; @@ -233,7 +234,7 @@ export class Droppable implements AfterViewInit, OnDestroy { @HostListener('drop', ['$event']) drop(event: DragEvent) { if (this.allowDrop(event)) { - DomHandler.removeClass(this.el.nativeElement, 'p-draggable-enter'); + removeClass(this.el.nativeElement, 'p-draggable-enter'); event.preventDefault(); this.onDrop.emit(event); } @@ -247,7 +248,7 @@ export class Droppable implements AfterViewInit, OnDestroy { (event.dataTransfer as DataTransfer).dropEffect = this.dropEffect; } - DomHandler.addClass(this.el.nativeElement, 'p-draggable-enter'); + addClass(this.el.nativeElement, 'p-draggable-enter'); this.onDragEnter.emit(event); } @@ -256,7 +257,7 @@ export class Droppable implements AfterViewInit, OnDestroy { event.preventDefault(); if (!this.el.nativeElement.contains(event.relatedTarget)) { - DomHandler.removeClass(this.el.nativeElement, 'p-draggable-enter'); + removeClass(this.el.nativeElement, 'p-draggable-enter'); this.onDragLeave.emit(event); } } diff --git a/packages/primeng/src/drawer/drawer.ts b/packages/primeng/src/drawer/drawer.ts index 911e71b1f41..22eb8b930ea 100755 --- a/packages/primeng/src/drawer/drawer.ts +++ b/packages/primeng/src/drawer/drawer.ts @@ -1,14 +1,13 @@ import { animate, animation, style, transition, trigger, useAnimation } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, OnDestroy, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; -import { TimesIcon } from 'primeng/icons/times'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; +import { addClass, appendChild, blockBodyScroll, setAttribute, unblockBodyScroll } from '@primeuix/utils'; +import { Button, ButtonProps } from 'primeng/button'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; import { DrawerStyle } from './style/drawerstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Button, ButtonProps } from 'primeng/button'; -import { SharedModule } from 'primeng/api'; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); @@ -335,8 +334,8 @@ export class Drawer extends BaseComponent implements AfterViewInit, OnDestroy { if (!this.mask) { this.mask = this.renderer.createElement('div'); this.renderer.setStyle(this.mask, 'zIndex', zIndex); - DomHandler.setAttribute(this.mask, 'style', this.maskStyle); - DomHandler.addMultipleClasses(this.mask, 'p-overlay-mask p-drawer-mask p-overlay-mask-enter'); + setAttribute(this.mask, 'style', this.maskStyle); + addClass(this.mask, 'p-overlay-mask p-drawer-mask p-overlay-mask-enter'); if (this.dismissible) { this.maskClickListener = this.renderer.listen(this.mask, 'click', (event: any) => { @@ -348,14 +347,14 @@ export class Drawer extends BaseComponent implements AfterViewInit, OnDestroy { this.renderer.appendChild(this.document.body, this.mask); if (this.blockScroll) { - DomHandler.blockBodyScroll(); + blockBodyScroll(); } } } disableModality() { if (this.mask) { - DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); + addClass(this.mask, 'p-overlay-mask-leave'); this.animationEndListener = this.renderer.listen(this.mask, 'animationend', this.destroyModal.bind(this)); } } @@ -368,7 +367,7 @@ export class Drawer extends BaseComponent implements AfterViewInit, OnDestroy { } if (this.blockScroll) { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } this.unbindAnimationEndListener(); @@ -402,7 +401,7 @@ export class Drawer extends BaseComponent implements AfterViewInit, OnDestroy { appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); - else DomHandler.appendChild(this.container, this.appendTo); + else appendChild(this.container, this.appendTo); } } diff --git a/packages/primeng/src/drawer/style/drawerstyle.ts b/packages/primeng/src/drawer/style/drawerstyle.ts index 68d3c9790f5..02f42529770 100644 --- a/packages/primeng/src/drawer/style/drawerstyle.ts +++ b/packages/primeng/src/drawer/style/drawerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-drawer { diff --git a/packages/primeng/src/dropdown/dropdown.spec.ts b/packages/primeng/src/dropdown/dropdown.spec.ts index 98f37ba2529..afdbca0c10b 100755 --- a/packages/primeng/src/dropdown/dropdown.spec.ts +++ b/packages/primeng/src/dropdown/dropdown.spec.ts @@ -1,15 +1,13 @@ import { ScrollingModule } from '@angular/cdk/scrolling'; -import { TestBed, ComponentFixture, fakeAsync, flush } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { Dropdown, DropdownItem } from './dropdown'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { FormsModule } from '@angular/forms'; -import { Component } from '@angular/core'; -import { TooltipModule } from 'primeng/tooltip'; +import { ChevronDownIcon, SearchIcon, TimesIcon } from '@primeng/icons'; import { OverlayModule } from 'primeng/overlay'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { SearchIcon } from 'primeng/icons/search'; -import { TimesIcon } from 'primeng/icons/times'; +import { TooltipModule } from 'primeng/tooltip'; +import { Dropdown, DropdownItem } from './dropdown'; @Component({ template: ` diff --git a/packages/primeng/src/dropdown/dropdown.ts b/packages/primeng/src/dropdown/dropdown.ts index 52f7b80b98b..8075e698a20 100755 --- a/packages/primeng/src/dropdown/dropdown.ts +++ b/packages/primeng/src/dropdown/dropdown.ts @@ -29,26 +29,37 @@ import { ViewRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { FilterService, OverlayOptions, PrimeTemplate, ScrollerOptions, SelectItem, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, FilterService, OverlayOptions, PrimeTemplate, SharedModule, TranslationKeys } from '@primeng/core'; +import { BlankIcon, CheckIcon, ChevronDownIcon, SearchIcon, TimesIcon } from '@primeng/icons'; +import { + deepEquals, + equals, + findLastIndex, + findSingle, + focus, + getFirstFocusableElement, + getFocusableElements, + getLastFocusableElement, + isEmpty, + isNotEmpty, + isPrintableCharacter, + resolveFieldData, + scrollInView, + unblockBodyScroll, + uuid +} from '@primeuix/utils'; +import { ScrollerOptions, SelectItem } from 'primeng/api'; import { AutoFocusModule } from 'primeng/autofocus'; -import { DomHandler } from 'primeng/dom'; +import { IconField } from 'primeng/iconfield'; +import { InputIcon } from 'primeng/inputicon'; +import { InputTextModule } from 'primeng/inputtext'; import { Overlay, OverlayModule } from 'primeng/overlay'; import { Ripple } from 'primeng/ripple'; import { Scroller } from 'primeng/scroller'; import { TooltipModule } from 'primeng/tooltip'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { TimesIcon } from 'primeng/icons/times'; -import { CheckIcon } from 'primeng/icons/check'; -import { BlankIcon } from 'primeng/icons/blank'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { SearchIcon } from 'primeng/icons/search'; -import { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface'; import { Nullable } from 'primeng/ts-helpers'; -import { InputTextModule } from 'primeng/inputtext'; -import { IconField } from 'primeng/iconfield'; -import { InputIcon } from 'primeng/inputicon'; +import { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface'; import { DropdownStyle } from './style/dropdownstyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const DROPDOWN_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -752,7 +763,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af return options; } set options(val: any[] | undefined) { - if (!ObjectUtils.deepEquals(val, this._options())) { + if (!deepEquals(val, this._options())) { this._options.set(val); } } @@ -1049,7 +1060,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af const modelValue = this.modelValue(); const visibleOptions = this.visibleOptions(); - if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) { + if (visibleOptions && isNotEmpty(visibleOptions)) { const selectedOptionIndex = this.findSelectedOptionIndex(); if (selectedOptionIndex !== -1 || modelValue === undefined || (typeof modelValue === 'string' && modelValue.length === 0) || this.isModelValueNotSet() || this.editable) { @@ -1057,7 +1068,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } } - if (ObjectUtils.isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && ObjectUtils.isNotEmpty(this.selectedOption)) { + if (isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && isNotEmpty(this.selectedOption)) { this.selectedOption = null; } @@ -1079,7 +1090,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af ngOnInit() { super.ngOnInit(); console.log('Dropdown component is deprecated as of v18, use Select component instead.'); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.autoUpdateModel(); if (this.filterBy) { @@ -1104,9 +1115,9 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } if (this.selectedOptionUpdated && this.itemsWrapper) { - let selectedItem = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight'); + let selectedItem = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight'); if (selectedItem) { - DomHandler.scrollInView(this.itemsWrapper, selectedItem); + scrollInView(this.itemsWrapper, selectedItem); } this.selectedOptionUpdated = false; } @@ -1245,7 +1256,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } private isOptionValueEqualsModelValue(option: any) { - return ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); + return equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); } ngAfterViewInit() { @@ -1283,27 +1294,27 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } getOptionLabel(option: any) { - return this.optionLabel !== undefined && this.optionLabel !== null ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option; + return this.optionLabel !== undefined && this.optionLabel !== null ? resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option; } getOptionValue(option: any) { - return this.optionValue && this.optionValue !== null ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; + return this.optionValue && this.optionValue !== null ? resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; } isOptionDisabled(option: any) { if (this.getOptionValue(this.modelValue()) === this.getOptionValue(option) || (this.getOptionLabel(this.modelValue() === this.getOptionLabel(option)) && option.disabled === false)) { return false; } else { - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false; } } getOptionGroupLabel(optionGroup: any) { - return this.optionGroupLabel !== undefined && this.optionGroupLabel !== null ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup; + return this.optionGroupLabel !== undefined && this.optionGroupLabel !== null ? resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup; } getOptionGroupChildren(optionGroup: any) { - return this.optionGroupChildren !== undefined && this.optionGroupChildren !== null ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; + return this.optionGroupChildren !== undefined && this.optionGroupChildren !== null ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; } getAriaPosInset(index) { @@ -1379,7 +1390,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af this.onChange.emit({ originalEvent: event, value: value }); }, 1); - !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show(); + !this.overlayVisible && isNotEmpty(value) && this.show(); } /** * Displays the panel. @@ -1391,7 +1402,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af this.focusedOptionIndex.set(focusedOptionIndex); if (isFocus) { - DomHandler.focus(this.focusInputViewChild?.nativeElement); + focus(this.focusInputViewChild?.nativeElement); } this.cd.markForCheck(); @@ -1399,7 +1410,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af onOverlayAnimationStart(event: any) { if (event.toState === 'visible') { - this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper'); + this.itemsWrapper = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper'); this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement); if (this.options && this.options.length) { @@ -1409,7 +1420,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af this.scroller?.scrollToIndex(selectedIndex); } } else { - let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight'); + let selectedListItem = findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight'); if (selectedListItem) { selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -1444,17 +1455,17 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af this.searchValue = ''; if (this.overlayOptions?.mode === 'modal') { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } if (this.filter && this.resetFilterOnHide) { this.resetFilter(); } if (isFocus) { if (this.focusInputViewChild) { - DomHandler.focus(this.focusInputViewChild?.nativeElement); + focus(this.focusInputViewChild?.nativeElement); } if (this.editable && this.editableInputViewChild) { - DomHandler.focus(this.editableInputViewChild?.nativeElement); + focus(this.editableInputViewChild?.nativeElement); } } this.cd.markForCheck(); @@ -1555,7 +1566,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af break; default: - if (!event.metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!event.metaKey && isPrintableCharacter(event.key)) { !this.overlayVisible && this.show(); !this.editable && this.searchOptions(event, event.key); } @@ -1648,7 +1659,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; if (this.itemsViewChild && this.itemsViewChild.nativeElement) { - const element = DomHandler.findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } else if (!this.virtualScrollerDisabled) { @@ -1695,13 +1706,13 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } findPrevOptionIndex(index) { - const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; + const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : index; } findLastOptionIndex() { - return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); + return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); } findLastFocusedOptionIndex() { @@ -1825,7 +1836,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af onTabKey(event, pressedInInputText = false) { if (!pressedInInputText) { if (this.overlayVisible && this.hasFocusableElements()) { - DomHandler.focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); + focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); event.preventDefault(); } else { if (this.focusedOptionIndex() !== -1 && this.overlayVisible) { @@ -1839,21 +1850,19 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } onFirstHiddenFocus(event) { - const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el?.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild?.nativeElement; - DomHandler.focus(focusableEl); + const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? getFirstFocusableElement(this.overlayViewChild.el?.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild?.nativeElement; + focus(focusableEl); } onLastHiddenFocus(event) { const focusableEl = - event.relatedTarget === this.focusInputViewChild?.nativeElement - ? DomHandler.getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') - : this.focusInputViewChild?.nativeElement; + event.relatedTarget === this.focusInputViewChild?.nativeElement ? getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInputViewChild?.nativeElement; - DomHandler.focus(focusableEl); + focus(focusableEl); } hasFocusableElements() { - return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; + return getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; } onBackspaceKey(event: KeyboardEvent, pressedInInputText = false) { @@ -1927,8 +1936,8 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af } applyFocus(): void { - if (this.editable) DomHandler.findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext').focus(); - else DomHandler.focus(this.focusInputViewChild?.nativeElement); + if (this.editable) (findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext') as any).focus(); + else focus(this.focusInputViewChild?.nativeElement); } /** * Applies focus. diff --git a/packages/primeng/src/dropdown/style/dropdownstyle.ts b/packages/primeng/src/dropdown/style/dropdownstyle.ts index 3bf483d7a56..3c1c2e85858 100644 --- a/packages/primeng/src/dropdown/style/dropdownstyle.ts +++ b/packages/primeng/src/dropdown/style/dropdownstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; /** * * Dropdown also known as Select, is used to choose an item from a collection of options. diff --git a/packages/primeng/src/dynamicdialog/dialogservice.ts b/packages/primeng/src/dynamicdialog/dialogservice.ts index d8b0c70b37c..5b7244aafff 100755 --- a/packages/primeng/src/dynamicdialog/dialogservice.ts +++ b/packages/primeng/src/dynamicdialog/dialogservice.ts @@ -1,11 +1,11 @@ -import { Injectable, ApplicationRef, Injector, Type, EmbeddedViewRef, ComponentRef, Inject, createComponent } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; +import { DOCUMENT } from '@angular/common'; +import { ApplicationRef, ComponentRef, EmbeddedViewRef, Inject, Injectable, Injector, Type, createComponent } from '@angular/core'; +import { appendChild } from '@primeuix/utils'; import { DynamicDialogComponent } from './dynamicdialog'; -import { DynamicDialogInjector } from './dynamicdialog-injector'; import { DynamicDialogConfig } from './dynamicdialog-config'; +import { DynamicDialogInjector } from './dynamicdialog-injector'; import { DynamicDialogRef } from './dynamicdialog-ref'; -import { DOCUMENT } from '@angular/common'; -import { ObjectUtils } from 'primeng/utils'; + /** * Dynamic Dialog component methods. * @group Service @@ -74,7 +74,7 @@ export class DialogService { if (!config.appendTo || config.appendTo === 'body') { this.document.body.appendChild(domElem); } else { - DomHandler.appendChild(domElem, config.appendTo); + appendChild(domElem, config.appendTo); } this.dialogComponentRefMap.set(dialogRef, componentRef); diff --git a/packages/primeng/src/dynamicdialog/dynamicdialog.spec.ts b/packages/primeng/src/dynamicdialog/dynamicdialog.spec.ts index 532593f294a..8ae27fa0a30 100755 --- a/packages/primeng/src/dynamicdialog/dynamicdialog.spec.ts +++ b/packages/primeng/src/dynamicdialog/dynamicdialog.spec.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { Component, NgModule } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Footer } from 'primeng/api'; +import { Footer } from '@primeng/core'; import { DialogService } from './dialogservice'; import { DynamicDialog } from './dynamicdialog'; import { DynamicDialogConfig } from './dynamicdialog-config'; diff --git a/packages/primeng/src/dynamicdialog/dynamicdialog.ts b/packages/primeng/src/dynamicdialog/dynamicdialog.ts index f322b2ecbba..1efe9019e35 100755 --- a/packages/primeng/src/dynamicdialog/dynamicdialog.ts +++ b/packages/primeng/src/dynamicdialog/dynamicdialog.ts @@ -1,20 +1,18 @@ import { animate, animation, AnimationEvent, style, transition, trigger, useAnimation } from '@angular/animations'; import { CommonModule, isPlatformBrowser } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, Component, ComponentRef, ElementRef, inject, NgModule, NgZone, OnDestroy, Optional, Renderer2, SkipSelf, Type, ViewChild, ViewEncapsulation, ViewRef } from '@angular/core'; -import { SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, SharedModule, TranslationKeys } from '@primeng/core'; +import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from '@primeng/icons'; +import { addClass, getOuterHeight, getOuterWidth, getViewport, hasClass, removeClass, setAttribute, uuid } from '@primeuix/utils'; +import { Button } from 'primeng/button'; import { DomHandler } from 'primeng/dom'; import { FocusTrap } from 'primeng/focustrap'; -import { TimesIcon } from 'primeng/icons/times'; -import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize'; -import { WindowMinimizeIcon } from 'primeng/icons/windowminimize'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { DynamicDialogConfig } from './dynamicdialog-config'; import { DynamicDialogRef } from './dynamicdialog-ref'; import { DynamicDialogContent } from './dynamicdialogcontent'; -import { BaseComponent } from 'primeng/basecomponent'; import { DynamicDialogStyle } from './style/dynamicdialogstyle'; -import { Button } from 'primeng/button'; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]); @@ -135,7 +133,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn ariaLabelledBy: string | undefined; - id: string = UniqueComponentId(); + id: string = uuid('pn_id_'); styleElement: any; @@ -316,7 +314,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn } this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } } } @@ -335,7 +333,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn } getAriaLabelledBy() { - return this.header !== null ? UniqueComponentId() + '_header' : null; + return this.header !== null ? uuid('pn_id_') + '_header' : null; } loadChildComponent(componentType: Type) { @@ -376,7 +374,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn case 'void': if (this.wrapper && this.ddconfig.modal !== false) { - DomHandler.addClass(this.wrapper, 'p-overlay-mask-leave'); + addClass(this.wrapper, 'p-overlay-mask-leave'); } break; } @@ -426,7 +424,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn } if (this.ddconfig.modal !== false) { - DomHandler.addClass(this.document.body, 'p-overflow-hidden'); + addClass(this.document.body, 'p-overflow-hidden'); } } @@ -437,7 +435,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn } if (this.ddconfig.modal !== false) { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); + removeClass(this.document.body, 'p-overflow-hidden'); } if (!(this.cd as ViewRef).destroyed) { @@ -471,9 +469,9 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn this.maximized = !this.maximized; if (this.maximized) { - DomHandler.addClass(this.document.body, 'p-overflow-hidden'); + addClass(this.document.body, 'p-overflow-hidden'); } else { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); + removeClass(this.document.body, 'p-overflow-hidden'); } this.dialogRef.maximize({ maximized: this.maximized }); @@ -488,7 +486,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn this.resizing = true; this.lastPageX = event.pageX; this.lastPageY = event.pageY; - DomHandler.addClass(this.document.body, 'p-unselectable-text'); + addClass(this.document.body, 'p-unselectable-text'); this.dialogRef.resizeInit(event); } } @@ -497,15 +495,15 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn if (this.resizing) { let deltaX = event.pageX - (this.lastPageX as number); let deltaY = event.pageY - (this.lastPageY as number); - let containerWidth = DomHandler.getOuterWidth(this.container); - let containerHeight = DomHandler.getOuterHeight(this.container); - let contentHeight = DomHandler.getOuterHeight((this.contentViewChild).nativeElement); + let containerWidth = getOuterWidth(this.container); + let containerHeight = getOuterHeight(this.container); + let contentHeight = getOuterHeight((this.contentViewChild).nativeElement); let newWidth = containerWidth + deltaX; let newHeight = containerHeight + deltaY; let minWidth = (this.container as HTMLDivElement).style.minWidth; let minHeight = (this.container as HTMLDivElement).style.minHeight; let offset = (this.container as HTMLDivElement).getBoundingClientRect(); - let viewport = DomHandler.getViewport(); + let viewport = getViewport(); let hasBeenDragged = !parseInt((this.container as HTMLDivElement).style.top) || !parseInt((this.container as HTMLDivElement).style.left); if (hasBeenDragged) { @@ -535,13 +533,13 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn resizeEnd(event: MouseEvent) { if (this.resizing) { this.resizing = false; - DomHandler.removeClass(this.document.body, 'p-unselectable-text'); + removeClass(this.document.body, 'p-unselectable-text'); this.dialogRef.resizeEnd(event); } } initDrag(event: MouseEvent) { - if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass((event.target).parentElement, 'p-dialog-header-icon')) { + if (hasClass(event.target as any, 'p-dialog-header-icon') || hasClass((event.target).parentElement, 'p-dialog-header-icon')) { return; } @@ -551,21 +549,21 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn this.lastPageY = event.pageY; (this.container as HTMLDivElement).style.margin = '0'; - DomHandler.addClass(this.document.body, 'p-unselectable-text'); + addClass(this.document.body, 'p-unselectable-text'); this.dialogRef.dragStart(event); } } onDrag(event: MouseEvent) { if (this.dragging) { - let containerWidth = DomHandler.getOuterWidth(this.container); - let containerHeight = DomHandler.getOuterHeight(this.container); + let containerWidth = getOuterWidth(this.container); + let containerHeight = getOuterHeight(this.container); let deltaX = event.pageX - (this.lastPageX as number); let deltaY = event.pageY - (this.lastPageY as number); let offset = (this.container as HTMLDivElement).getBoundingClientRect(); let leftPos = offset.left + deltaX; let topPos = offset.top + deltaY; - let viewport = DomHandler.getViewport(); + let viewport = getViewport(); (this.container as HTMLDivElement).style.position = 'fixed'; @@ -593,7 +591,7 @@ export class DynamicDialogComponent extends BaseComponent implements AfterViewIn endDrag(event: MouseEvent) { if (this.dragging) { this.dragging = false; - DomHandler.removeClass(this.document.body, 'p-unselectable-text'); + removeClass(this.document.body, 'p-unselectable-text'); this.dialogRef.dragEnd(event); this.cd.detectChanges(); } diff --git a/packages/primeng/src/editor/editor.ts b/packages/primeng/src/editor/editor.ts index f847912a335..ef08218ef6f 100755 --- a/packages/primeng/src/editor/editor.ts +++ b/packages/primeng/src/editor/editor.ts @@ -1,12 +1,11 @@ import { CommonModule, isPlatformServer } from '@angular/common'; import { AfterContentInit, afterNextRender, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, forwardRef, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Header, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, Header, SharedModule } from '@primeng/core'; +import { findSingle } from '@primeuix/utils'; import { Nullable } from 'primeng/ts-helpers'; import { EditorInitEvent, EditorSelectionChangeEvent, EditorTextChangeEvent } from './editor.interface'; import { EditorStyle } from './style/editorstyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const EDITOR_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -286,7 +285,7 @@ export class Editor extends BaseComponent implements AfterContentInit, ControlVa this.quill.on('text-change', (delta: any, oldContents: any, source: any) => { if (source === 'user') { - let html = isQuill2 ? this.quill.getSemanticHTML() : DomHandler.findSingle(editorElement, '.ql-editor').innerHTML; + let html = isQuill2 ? this.quill.getSemanticHTML() : findSingle(editorElement, '.ql-editor').innerHTML; let text = this.quill.getText().trim(); if (html === '


') { html = null; @@ -320,9 +319,9 @@ export class Editor extends BaseComponent implements AfterContentInit, ControlVa private initQuillElements(): void { if (!this.quillElements) { this.quillElements = { - editorElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content'), - toolbarElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar') - }; + editorElement: findSingle(this.el.nativeElement, 'div.p-editor-content'), + toolbarElement: findSingle(this.el.nativeElement, 'div.p-editor-toolbar') + } as any; } } } diff --git a/packages/primeng/src/editor/style/editorstyle.ts b/packages/primeng/src/editor/style/editorstyle.ts index 7a3a8849e76..67cdc0a0ac2 100644 --- a/packages/primeng/src/editor/style/editorstyle.ts +++ b/packages/primeng/src/editor/style/editorstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` /*! diff --git a/packages/primeng/src/fieldset/fieldset.spec.ts b/packages/primeng/src/fieldset/fieldset.spec.ts index 04aca7fde34..ac2ccbc2282 100755 --- a/packages/primeng/src/fieldset/fieldset.spec.ts +++ b/packages/primeng/src/fieldset/fieldset.spec.ts @@ -1,8 +1,8 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MinusIcon } from '@primeng/icons'; import { Fieldset } from './fieldset'; -import { MinusIcon } from 'primeng/icons/minus'; describe('Fieldset', () => { let fieldset: Fieldset; diff --git a/packages/primeng/src/fieldset/fieldset.ts b/packages/primeng/src/fieldset/fieldset.ts index ed5ad4b0ea0..1f40319f8ba 100755 --- a/packages/primeng/src/fieldset/fieldset.ts +++ b/packages/primeng/src/fieldset/fieldset.ts @@ -1,15 +1,14 @@ import { animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, SharedModule } from 'primeng/api'; -import { MinusIcon } from 'primeng/icons/minus'; -import { PlusIcon } from 'primeng/icons/plus'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { MinusIcon, PlusIcon } from '@primeng/icons'; +import { uuid } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; import { Ripple } from 'primeng/ripple'; import { Nullable } from 'primeng/ts-helpers'; -import { UniqueComponentId } from 'primeng/utils'; import { FieldsetAfterToggleEvent, FieldsetBeforeToggleEvent } from './fieldset.interface'; -import { ButtonModule } from 'primeng/button'; -import { BaseComponent } from 'primeng/basecomponent'; import { FieldsetStyle } from './style/fieldsetstyle'; /** @@ -158,7 +157,7 @@ export class Fieldset extends BaseComponent implements BlockableUI { @Output() onAfterToggle: EventEmitter = new EventEmitter(); get id() { - return UniqueComponentId(); + return uuid('pn_id_'); } get buttonAriaLabel() { diff --git a/packages/primeng/src/fieldset/style/fieldsetstyle.ts b/packages/primeng/src/fieldset/style/fieldsetstyle.ts index 43ddb03343f..5c0f36ca6df 100644 --- a/packages/primeng/src/fieldset/style/fieldsetstyle.ts +++ b/packages/primeng/src/fieldset/style/fieldsetstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-fieldset { diff --git a/packages/primeng/src/fileupload/fileupload.spec.ts b/packages/primeng/src/fileupload/fileupload.spec.ts index 215af46d18e..28a53c63fe6 100755 --- a/packages/primeng/src/fileupload/fileupload.spec.ts +++ b/packages/primeng/src/fileupload/fileupload.spec.ts @@ -1,15 +1,13 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { HttpClientModule } from '@angular/common/http'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { FileUpload } from './fileupload'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ProgressBarModule } from 'primeng/progressbar'; +import { PrimeTemplate } from '@primeng/core'; +import { PlusIcon, TimesIcon, UploadIcon } from '@primeng/icons'; import { ButtonModule } from 'primeng/button'; -import { PrimeTemplate } from 'primeng/api'; import { MessagesModule } from 'primeng/messages'; -import { HttpClientModule } from '@angular/common/http'; -import { PlusIcon } from 'primeng/icons/plus'; -import { TimesIcon } from 'primeng/icons/times'; -import { UploadIcon } from 'primeng/icons/upload'; +import { ProgressBarModule } from 'primeng/progressbar'; +import { FileUpload } from './fileupload'; describe('FileUpload', () => { let fileupload: FileUpload; diff --git a/packages/primeng/src/fileupload/fileupload.ts b/packages/primeng/src/fileupload/fileupload.ts index 0256ebe6066..d9aa1e9d40b 100755 --- a/packages/primeng/src/fileupload/fileupload.ts +++ b/packages/primeng/src/fileupload/fileupload.ts @@ -21,20 +21,18 @@ import { ViewEncapsulation } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; -import { BlockableUI, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, SharedModule, TranslationKeys } from '@primeng/core'; +import { PlusIcon, TimesIcon, UploadIcon } from '@primeng/icons'; +import { addClass, removeClass } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; import { Button } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { PlusIcon } from 'primeng/icons/plus'; -import { TimesIcon } from 'primeng/icons/times'; -import { UploadIcon } from 'primeng/icons/upload'; +import { Message } from 'primeng/message'; import { ProgressBar } from 'primeng/progressbar'; import { Ripple } from 'primeng/ripple'; import { VoidListener } from 'primeng/ts-helpers'; import { Subscription } from 'rxjs'; import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent } from './fileupload.interface'; import { FileUploadStyle } from './style/fileuploadstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Message } from 'primeng/message'; /** * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. @@ -910,7 +908,7 @@ export class FileUpload extends BaseComponent implements AfterViewInit, OnInit, onDragOver(e: DragEvent) { if (!this.disabled) { - DomHandler.addClass(this.content?.nativeElement, 'p-fileupload-highlight'); + addClass(this.content?.nativeElement, 'p-fileupload-highlight'); this.dragHighlight = true; e.stopPropagation(); e.preventDefault(); @@ -919,13 +917,13 @@ export class FileUpload extends BaseComponent implements AfterViewInit, OnInit, onDragLeave(event: DragEvent) { if (!this.disabled) { - DomHandler.removeClass(this.content?.nativeElement, 'p-fileupload-highlight'); + removeClass(this.content?.nativeElement, 'p-fileupload-highlight'); } } onDrop(event: any) { if (!this.disabled) { - DomHandler.removeClass(this.content?.nativeElement, 'p-fileupload-highlight'); + removeClass(this.content?.nativeElement, 'p-fileupload-highlight'); event.stopPropagation(); event.preventDefault(); diff --git a/packages/primeng/src/fileupload/style/fileuploadstyle.ts b/packages/primeng/src/fileupload/style/fileuploadstyle.ts index 3c50a9ddfb9..b24df3e8cb9 100644 --- a/packages/primeng/src/fileupload/style/fileuploadstyle.ts +++ b/packages/primeng/src/fileupload/style/fileuploadstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-fileupload input[type="file"] { diff --git a/packages/primeng/src/floatlabel/floatlabel.ts b/packages/primeng/src/floatlabel/floatlabel.ts index e9ad7a4c98a..544e42dd8ba 100755 --- a/packages/primeng/src/floatlabel/floatlabel.ts +++ b/packages/primeng/src/floatlabel/floatlabel.ts @@ -1,7 +1,6 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { FloatLabelStyle } from './style/floatlabelstyle'; /** diff --git a/packages/primeng/src/floatlabel/style/floatlabelstyle.ts b/packages/primeng/src/floatlabel/style/floatlabelstyle.ts index 8ba7ec52c56..8324c1243bb 100644 --- a/packages/primeng/src/floatlabel/style/floatlabelstyle.ts +++ b/packages/primeng/src/floatlabel/style/floatlabelstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-floatlabel { diff --git a/packages/primeng/src/fluid/fluid.ts b/packages/primeng/src/fluid/fluid.ts index 866c2b1510c..e1d8a39e163 100755 --- a/packages/primeng/src/fluid/fluid.ts +++ b/packages/primeng/src/fluid/fluid.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, NgModule, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; import { FluidStyle } from './style/fluidstyle'; /** diff --git a/packages/primeng/src/fluid/style/fluidstyle.ts b/packages/primeng/src/fluid/style/fluidstyle.ts index 1dcdaf5ae34..33e0224cf71 100644 --- a/packages/primeng/src/fluid/style/fluidstyle.ts +++ b/packages/primeng/src/fluid/style/fluidstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-fluid{ diff --git a/packages/primeng/src/focustrap/focustrap.ts b/packages/primeng/src/focustrap/focustrap.ts index 94472096335..3f6766bd75d 100755 --- a/packages/primeng/src/focustrap/focustrap.ts +++ b/packages/primeng/src/focustrap/focustrap.ts @@ -1,7 +1,7 @@ -import { DomHandler } from 'primeng/dom'; import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { booleanAttribute, Directive, inject, Input, NgModule, PLATFORM_ID, SimpleChanges } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; +import { createElement, focus, getFirstFocusableElement, getLastFocusableElement } from '@primeuix/utils'; /** * Focus Trap keeps focus within a certain DOM element while tabbing. @@ -61,7 +61,7 @@ export class FocusTrap extends BaseComponent { const tabindex = '0'; const createFocusableElement = (onFocus) => { - return DomHandler.createElement('span', { + return createElement('span', { class: 'p-hidden-accessible p-hidden-focusable', tabindex, role: 'presentation', @@ -85,17 +85,17 @@ export class FocusTrap extends BaseComponent { onFirstHiddenElementFocus(event) { const { currentTarget, relatedTarget } = event; const focusableElement = - relatedTarget === this.lastHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.lastHiddenFocusableElement; + relatedTarget === this.lastHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? getFirstFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.lastHiddenFocusableElement; - DomHandler.focus(focusableElement); + focus(focusableElement as any); } onLastHiddenElementFocus(event) { const { currentTarget, relatedTarget } = event; const focusableElement = - relatedTarget === this.firstHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? DomHandler.getLastFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.firstHiddenFocusableElement; + relatedTarget === this.firstHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? getLastFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.firstHiddenFocusableElement; - DomHandler.focus(focusableElement); + focus(focusableElement as any); } } diff --git a/packages/primeng/src/galleria/galleria.ts b/packages/primeng/src/galleria/galleria.ts index e72bdf99d1a..81ebeffc1e9 100755 --- a/packages/primeng/src/galleria/galleria.ts +++ b/packages/primeng/src/galleria/galleria.ts @@ -29,20 +29,15 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { TimesIcon } from 'primeng/icons/times'; -import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize'; -import { WindowMinimizeIcon } from 'primeng/icons/windowminimize'; +import { BaseComponent, PrimeNGConfig, PrimeTemplate, SharedModule } from '@primeng/core'; +import { ChevronLeftIcon, ChevronRightIcon, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from '@primeng/icons'; +import { addClass, blockBodyScroll, find, findSingle, focus, getAttribute, removeClass, setAttribute, unblockBodyScroll, uuid } from '@primeuix/utils'; +import { FocusTrap } from 'primeng/focustrap'; import { Ripple } from 'primeng/ripple'; import { VoidListener } from 'primeng/ts-helpers'; -import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { GalleriaResponsiveOptions } from './galleria.interface'; -import { FocusTrap } from 'primeng/focustrap'; import { GalleriaStyle } from './style/galleriastyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Galleria is an advanced content gallery component. @@ -359,12 +354,12 @@ export class Galleria extends BaseComponent implements OnChanges, OnDestroy { case 'visible': this.enableModality(); setTimeout(() => { - DomHandler.focus(DomHandler.findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]')); + focus(findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]')); }, 25); break; case 'void': - DomHandler.addClass(this.mask?.nativeElement, 'p-overlay-mask-leave'); + addClass(this.mask?.nativeElement, 'p-overlay-mask-leave'); break; } } @@ -378,7 +373,7 @@ export class Galleria extends BaseComponent implements OnChanges, OnDestroy { } enableModality() { - DomHandler.blockBodyScroll(); + blockBodyScroll(); this.cd.markForCheck(); if (this.mask) { @@ -387,7 +382,7 @@ export class Galleria extends BaseComponent implements OnChanges, OnDestroy { } disableModality() { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); this.maskVisible = false; this.cd.markForCheck(); @@ -398,7 +393,7 @@ export class Galleria extends BaseComponent implements OnChanges, OnDestroy { ngOnDestroy() { if (this.fullScreen) { - DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); + removeClass(this.document.body, 'p-overflow-hidden'); } if (this.mask) { @@ -514,7 +509,7 @@ export class GalleriaContent implements DoCheck { public config: PrimeNGConfig, private elementRef: ElementRef ) { - this.id = this.galleria.id || UniqueComponentId(); + this.id = this.galleria.id || uuid('pn_id_'); this.differ = this.differs.find(this.galleria).create(); } @@ -1073,7 +1068,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie } if (this._oldactiveIndex !== this._activeIndex) { - DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden'); + removeClass(this.itemsContainer.nativeElement, 'p-items-hidden'); this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s'; } @@ -1130,7 +1125,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie } this.thumbnailsStyle.innerHTML = innerHTML; - DomHandler.setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce); + setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce); } calculatePosition() { @@ -1258,7 +1253,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie } onRightKey() { - const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]'); + const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]'); const activeIndex = this.findFocusedIndicatorIndex(); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); @@ -1277,17 +1272,17 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie } onEndKey() { - const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]'); + const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]'); const activeIndex = this.findFocusedIndicatorIndex(); this.changedFocusedIndicator(activeIndex, indicators.length - 1); } onTabKey() { - const indicators = [...DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')]; - const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true); + const indicators = [...find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')]; + const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true); - const activeIndicator = DomHandler.findSingle(this.itemsContainer.nativeElement, '[tabindex="0"]'); + const activeIndicator = findSingle(this.itemsContainer.nativeElement, '[tabindex="0"]'); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); @@ -1296,14 +1291,14 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie } findFocusedIndicatorIndex() { - const indicators = [...DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')]; - const activeIndicator = DomHandler.findSingle(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]'); + const indicators = [...find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')]; + const activeIndicator = findSingle(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]'); return indicators.findIndex((ind) => ind === activeIndicator.parentElement); } changedFocusedIndicator(prevInd, nextInd) { - const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]'); + const indicators = find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]'); indicators[prevInd].children[0].tabIndex = '-1'; indicators[nextInd].children[0].tabIndex = '0'; @@ -1328,7 +1323,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie } if (this.itemsContainer) { - DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden'); + removeClass(this.itemsContainer.nativeElement, 'p-items-hidden'); this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`; this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s'; } @@ -1364,7 +1359,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie onTransitionEnd() { if (this.itemsContainer && this.itemsContainer.nativeElement) { - DomHandler.addClass(this.itemsContainer.nativeElement, 'p-items-hidden'); + addClass(this.itemsContainer.nativeElement, 'p-items-hidden'); this.itemsContainer.nativeElement.style.transition = ''; } } diff --git a/packages/primeng/src/galleria/style/galleriastyle.ts b/packages/primeng/src/galleria/style/galleriastyle.ts index 398db5fd0b9..5a426f835f4 100644 --- a/packages/primeng/src/galleria/style/galleriastyle.ts +++ b/packages/primeng/src/galleria/style/galleriastyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-galleria { diff --git a/packages/primeng/src/iconfield/iconfield.ts b/packages/primeng/src/iconfield/iconfield.ts index baf6229f793..2ebd3ad7bcf 100755 --- a/packages/primeng/src/iconfield/iconfield.ts +++ b/packages/primeng/src/iconfield/iconfield.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; import { IconFieldStyle } from './style/iconfieldstyle'; /** diff --git a/packages/primeng/src/iconfield/style/iconfieldstyle.ts b/packages/primeng/src/iconfield/style/iconfieldstyle.ts index 32288063f39..41e9ca60ca8 100644 --- a/packages/primeng/src/iconfield/style/iconfieldstyle.ts +++ b/packages/primeng/src/iconfield/style/iconfieldstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-iconfield { diff --git a/packages/primeng/src/iftalabel/iftalabel.ts b/packages/primeng/src/iftalabel/iftalabel.ts index 208fe64062f..d8d57794655 100755 --- a/packages/primeng/src/iftalabel/iftalabel.ts +++ b/packages/primeng/src/iftalabel/iftalabel.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, NgModule, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; import { RouterModule } from '@angular/router'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { IftaLabelStyle } from './style/iftalabelstyle'; /** diff --git a/packages/primeng/src/iftalabel/style/iftalabelstyle.ts b/packages/primeng/src/iftalabel/style/iftalabelstyle.ts index 4501baaf2d6..eaa828203f0 100644 --- a/packages/primeng/src/iftalabel/style/iftalabelstyle.ts +++ b/packages/primeng/src/iftalabel/style/iftalabelstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-iftalabel { diff --git a/packages/primeng/src/image/image.ts b/packages/primeng/src/image/image.ts index 6c3491efad8..bfac051a5a2 100755 --- a/packages/primeng/src/image/image.ts +++ b/packages/primeng/src/image/image.ts @@ -2,19 +2,13 @@ import { animate, AnimationEvent, style, transition, trigger } from '@angular/an import { CommonModule } from '@angular/common'; import { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, HostListener, inject, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { SafeUrl } from '@angular/platform-browser'; -import { SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { EyeIcon } from 'primeng/icons/eye'; -import { RefreshIcon } from 'primeng/icons/refresh'; -import { SearchMinusIcon } from 'primeng/icons/searchminus'; -import { SearchPlusIcon } from 'primeng/icons/searchplus'; -import { TimesIcon } from 'primeng/icons/times'; -import { UndoIcon } from 'primeng/icons/undo'; -import { ZIndexUtils } from 'primeng/utils'; -import { Nullable } from 'primeng/ts-helpers'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { EyeIcon, RefreshIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, UndoIcon } from '@primeng/icons'; +import { addClass, appendChild, blockBodyScroll, focus, unblockBodyScroll } from '@primeuix/utils'; import { FocusTrap } from 'primeng/focustrap'; +import { Nullable } from 'primeng/ts-helpers'; +import { ZIndexUtils } from 'primeng/utils'; import { ImageStyle } from './style/imagestyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Displays an image with preview and tranformation options. For multiple image, see Galleria. @@ -343,7 +337,7 @@ export class Image extends BaseComponent implements AfterContentInit { if (this.preview) { this.maskVisible = true; this.previewVisible = true; - DomHandler.blockBodyScroll(); + blockBodyScroll(); } } @@ -360,7 +354,7 @@ export class Image extends BaseComponent implements AfterContentInit { case 'Escape': this.onMaskClick(); setTimeout(() => { - DomHandler.focus(this.previewButton.nativeElement); + focus(this.previewButton.nativeElement); }, 25); event.preventDefault(); @@ -404,12 +398,12 @@ export class Image extends BaseComponent implements AfterContentInit { this.moveOnTop(); setTimeout(() => { - DomHandler.focus(this.closeButton.nativeElement); + focus(this.closeButton.nativeElement); }, 25); break; case 'void': - DomHandler.addClass(this.wrapper, 'p-overlay-mask-leave'); + addClass(this.wrapper, 'p-overlay-mask-leave'); break; } } @@ -437,7 +431,7 @@ export class Image extends BaseComponent implements AfterContentInit { appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.document.body.appendChild(this.wrapper as HTMLElement); - else DomHandler.appendChild(this.wrapper, this.appendTo); + else appendChild(this.wrapper, this.appendTo); } } @@ -464,7 +458,7 @@ export class Image extends BaseComponent implements AfterContentInit { this.previewVisible = false; this.rotate = 0; this.scale = this.zoomSettings.default; - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } imageError(event: Event) { diff --git a/packages/primeng/src/image/style/imagestyle.ts b/packages/primeng/src/image/style/imagestyle.ts index 4a739a306a2..34d5596b1a6 100644 --- a/packages/primeng/src/image/style/imagestyle.ts +++ b/packages/primeng/src/image/style/imagestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-image-mask { diff --git a/packages/primeng/src/inplace/inplace.spec.ts b/packages/primeng/src/inplace/inplace.spec.ts index c5655a71686..12dd4bd258b 100755 --- a/packages/primeng/src/inplace/inplace.spec.ts +++ b/packages/primeng/src/inplace/inplace.spec.ts @@ -1,7 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { TimesIcon } from 'primeng/icons/times'; +import { TimesIcon } from '@primeng/icons'; import { ButtonModule } from '../button/button'; import { Inplace } from './inplace'; diff --git a/packages/primeng/src/inplace/inplace.ts b/packages/primeng/src/inplace/inplace.ts index d865ce7ce14..10e265d2608 100755 --- a/packages/primeng/src/inplace/inplace.ts +++ b/packages/primeng/src/inplace/inplace.ts @@ -1,10 +1,9 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; import { ButtonModule } from 'primeng/button'; -import { TimesIcon } from 'primeng/icons/times'; -import { BaseComponent } from 'primeng/basecomponent'; import { InplaceStyle } from './style/inplacestyle'; -import { SharedModule } from 'primeng/api'; @Component({ selector: 'p-inplacedisplay, p-inplaceDisplay', diff --git a/packages/primeng/src/inplace/style/inplacestyle.ts b/packages/primeng/src/inplace/style/inplacestyle.ts index 423f8ada7b1..4759927d023 100644 --- a/packages/primeng/src/inplace/style/inplacestyle.ts +++ b/packages/primeng/src/inplace/style/inplacestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-inplace-display { diff --git a/packages/primeng/src/inputgroup/inputgroup.ts b/packages/primeng/src/inputgroup/inputgroup.ts index 652807d6479..b26b793657a 100755 --- a/packages/primeng/src/inputgroup/inputgroup.ts +++ b/packages/primeng/src/inputgroup/inputgroup.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { Component, inject, Input, NgModule } from '@angular/core'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { InputGroupStyle } from './style/inputgroupstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { SharedModule } from 'primeng/api'; /** * InputGroup displays text, icon, buttons and other content can be grouped next to an input. diff --git a/packages/primeng/src/inputgroup/style/inputgroupstyle.ts b/packages/primeng/src/inputgroup/style/inputgroupstyle.ts index bfca1026d25..6053c648c1e 100644 --- a/packages/primeng/src/inputgroup/style/inputgroupstyle.ts +++ b/packages/primeng/src/inputgroup/style/inputgroupstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-inputgroup, diff --git a/packages/primeng/src/inputgroupaddon/inputgroupaddon.ts b/packages/primeng/src/inputgroupaddon/inputgroupaddon.ts index 92f8301755f..f411f17d059 100755 --- a/packages/primeng/src/inputgroupaddon/inputgroupaddon.ts +++ b/packages/primeng/src/inputgroupaddon/inputgroupaddon.ts @@ -1,7 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component, HostBinding, inject, Input, NgModule } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { InputGroupAddonStyle } from './style/inputgroupaddonstyle'; /** diff --git a/packages/primeng/src/inputgroupaddon/style/inputgroupaddonstyle.ts b/packages/primeng/src/inputgroupaddon/style/inputgroupaddonstyle.ts index 9a689dc27b4..e3d083845c8 100644 --- a/packages/primeng/src/inputgroupaddon/style/inputgroupaddonstyle.ts +++ b/packages/primeng/src/inputgroupaddon/style/inputgroupaddonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const classes = { root: 'p-inputgroupaddon' diff --git a/packages/primeng/src/inputicon/inputicon.ts b/packages/primeng/src/inputicon/inputicon.ts index 35da5334f36..45a704d5fdd 100755 --- a/packages/primeng/src/inputicon/inputicon.ts +++ b/packages/primeng/src/inputicon/inputicon.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { InputIconStyle } from './style/inputiconstyle'; -import { SharedModule } from 'primeng/api'; /** * InputIcon displays an icon. diff --git a/packages/primeng/src/inputicon/style/inputiconstyle.ts b/packages/primeng/src/inputicon/style/inputiconstyle.ts index a8cc1e91209..dc29383aa3d 100644 --- a/packages/primeng/src/inputicon/style/inputiconstyle.ts +++ b/packages/primeng/src/inputicon/style/inputiconstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const classes = { root: 'p-inputicon' diff --git a/packages/primeng/src/inputmask/inputmask.ts b/packages/primeng/src/inputmask/inputmask.ts index aa514e2859c..686b4e47d22 100755 --- a/packages/primeng/src/inputmask/inputmask.ts +++ b/packages/primeng/src/inputmask/inputmask.ts @@ -28,15 +28,14 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, OnInit, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; +import { getUserAgent, isClient } from '@primeuix/utils'; import { AutoFocus } from 'primeng/autofocus'; -import { DomHandler } from 'primeng/dom'; -import { TimesIcon } from 'primeng/icons/times'; import { InputText } from 'primeng/inputtext'; import { Nullable } from 'primeng/ts-helpers'; import { Caret } from './inputmask.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { InputMaskStyle } from './style/inputmaskstyle'; -import { SharedModule } from 'primeng/api'; export const INPUTMASK_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -568,7 +567,7 @@ export class InputMask extends BaseComponent implements OnInit, ControlValueAcce end; let iPhone; if (isPlatformBrowser(this.platformId)) { - iPhone = /iphone/i.test(DomHandler.getUserAgent()); + iPhone = /iphone/i.test(getUserAgent()); } this.oldVal = this.inputViewChild?.nativeElement.value; @@ -640,7 +639,7 @@ export class InputMask extends BaseComponent implements OnInit, ControlValueAcce this.writeBuffer(); next = this.seekNext(p); - if (DomHandler.isClient() && /android/i.test(DomHandler.getUserAgent())) { + if (isClient() && /android/i.test(getUserAgent())) { let proxy = () => { this.caret(next); }; diff --git a/packages/primeng/src/inputmask/style/inputmaskstyle.ts b/packages/primeng/src/inputmask/style/inputmaskstyle.ts index 876be947115..a72628f3dd9 100644 --- a/packages/primeng/src/inputmask/style/inputmaskstyle.ts +++ b/packages/primeng/src/inputmask/style/inputmaskstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` /* For PrimeNG */ diff --git a/packages/primeng/src/inputnumber/inputnumber.ts b/packages/primeng/src/inputnumber/inputnumber.ts index 54b9ebf7180..97952b716b2 100644 --- a/packages/primeng/src/inputnumber/inputnumber.ts +++ b/packages/primeng/src/inputnumber/inputnumber.ts @@ -23,17 +23,14 @@ import { ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; -import { SharedModule } from 'primeng/api'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { AngleDownIcon, AngleUpIcon, TimesIcon } from '@primeng/icons'; +import { getSelection } from '@primeuix/utils'; import { AutoFocus } from 'primeng/autofocus'; import { Button } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleUpIcon } from 'primeng/icons/angleup'; -import { TimesIcon } from 'primeng/icons/times'; import { InputText } from 'primeng/inputtext'; import { Nullable } from 'primeng/ts-helpers'; import { InputNumberInputEvent } from './inputnumber.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { InputNumberStyle } from './style/inputnumberstyle'; export const INPUTNUMBER_VALUE_ACCESSOR: any = { @@ -1288,7 +1285,7 @@ export class InputNumber extends BaseComponent implements OnInit, AfterContentIn onInputClick() { const currentValue = this.input?.nativeElement.value; - if (!this.readonly && currentValue !== DomHandler.getSelection()) { + if (!this.readonly && currentValue !== getSelection()) { this.initCursor(); } } diff --git a/packages/primeng/src/inputnumber/style/inputnumberstyle.ts b/packages/primeng/src/inputnumber/style/inputnumberstyle.ts index e76c2cad40b..1b361c4734b 100644 --- a/packages/primeng/src/inputnumber/style/inputnumberstyle.ts +++ b/packages/primeng/src/inputnumber/style/inputnumberstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-inputnumber { diff --git a/packages/primeng/src/inputotp/inputotp.ts b/packages/primeng/src/inputotp/inputotp.ts index 773dc4122b3..6bf488de50c 100644 --- a/packages/primeng/src/inputotp/inputotp.ts +++ b/packages/primeng/src/inputotp/inputotp.ts @@ -1,11 +1,10 @@ import { CommonModule } from '@angular/common'; import { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, forwardRef, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { InputText } from 'primeng/inputtext'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { AutoFocus } from 'primeng/autofocus'; +import { InputText } from 'primeng/inputtext'; import { InputOtpStyle } from './style/inputotpstyle'; -import { SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; export const INPUT_OTP_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, diff --git a/packages/primeng/src/inputotp/style/inputotpstyle.ts b/packages/primeng/src/inputotp/style/inputotpstyle.ts index ef13217c759..3a6ca425c68 100644 --- a/packages/primeng/src/inputotp/style/inputotpstyle.ts +++ b/packages/primeng/src/inputotp/style/inputotpstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-inputotp { diff --git a/packages/primeng/src/inputswitch/inputswitch.ts b/packages/primeng/src/inputswitch/inputswitch.ts index 556f053625e..1662796e7de 100755 --- a/packages/primeng/src/inputswitch/inputswitch.ts +++ b/packages/primeng/src/inputswitch/inputswitch.ts @@ -1,11 +1,10 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { AutoFocusModule } from 'primeng/autofocus'; import { InputSwitchChangeEvent } from './inputswitch.interface'; import { InputSwitchStyle } from './style/inputswitchstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { SharedModule } from 'primeng/api'; export const INPUTSWITCH_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, diff --git a/packages/primeng/src/inputswitch/style/inputswitchstyle.ts b/packages/primeng/src/inputswitch/style/inputswitchstyle.ts index 242658d71ff..55c298ffff5 100644 --- a/packages/primeng/src/inputswitch/style/inputswitchstyle.ts +++ b/packages/primeng/src/inputswitch/style/inputswitchstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-toggleswitch { diff --git a/packages/primeng/src/inputtext/inputtext.ts b/packages/primeng/src/inputtext/inputtext.ts index 84f13993681..503e3899718 100755 --- a/packages/primeng/src/inputtext/inputtext.ts +++ b/packages/primeng/src/inputtext/inputtext.ts @@ -1,9 +1,9 @@ import { AfterViewInit, booleanAttribute, Directive, DoCheck, HostListener, inject, Input, NgModule, Optional } from '@angular/core'; import { NgModel } from '@angular/forms'; +import { BaseComponent } from '@primeng/core'; +import { isEmpty } from '@primeuix/utils'; import { Nullable } from 'primeng/ts-helpers'; -import { BaseComponent } from 'primeng/basecomponent'; import { InputTextStyle } from './style/inputtextstyle'; -import { ObjectUtils } from 'primeng/utils'; /** * InputText directive is an extension to standard input element with theming. @@ -49,7 +49,7 @@ export class InputText extends BaseComponent implements DoCheck, AfterViewInit { const nativeElement = this.el.nativeElement; const fluidComponent = nativeElement.closest('p-fluid'); - return ObjectUtils.isEmpty(this.fluid) ? !!fluidComponent : this.fluid; + return isEmpty(this.fluid) ? !!fluidComponent : this.fluid; } constructor(@Optional() public ngModel: NgModel) { diff --git a/packages/primeng/src/inputtext/style/inputtextstyle.ts b/packages/primeng/src/inputtext/style/inputtextstyle.ts index 5c7a0af4466..6012462593f 100644 --- a/packages/primeng/src/inputtext/style/inputtextstyle.ts +++ b/packages/primeng/src/inputtext/style/inputtextstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-inputtext { diff --git a/packages/primeng/src/inputtextarea/inputtextarea.ts b/packages/primeng/src/inputtextarea/inputtextarea.ts index f9248c54609..0c05461242f 100755 --- a/packages/primeng/src/inputtextarea/inputtextarea.ts +++ b/packages/primeng/src/inputtextarea/inputtextarea.ts @@ -1,7 +1,7 @@ import { AfterViewInit, booleanAttribute, Directive, EventEmitter, HostListener, inject, Input, NgModule, OnDestroy, OnInit, Optional, Output } from '@angular/core'; import { NgControl, NgModel } from '@angular/forms'; +import { BaseComponent } from '@primeng/core'; import { Subscription } from 'rxjs'; -import { BaseComponent } from 'primeng/basecomponent'; import { TextareaStyle } from './style/textareastyle'; /** diff --git a/packages/primeng/src/inputtextarea/style/textareastyle.ts b/packages/primeng/src/inputtextarea/style/textareastyle.ts index d09f67cd4bf..8235b21b887 100644 --- a/packages/primeng/src/inputtextarea/style/textareastyle.ts +++ b/packages/primeng/src/inputtextarea/style/textareastyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-textarea { diff --git a/packages/primeng/src/keyfilter/keyfilter.ts b/packages/primeng/src/keyfilter/keyfilter.ts index 7a4154ca354..a87cfd81f4d 100755 --- a/packages/primeng/src/keyfilter/keyfilter.ts +++ b/packages/primeng/src/keyfilter/keyfilter.ts @@ -1,7 +1,7 @@ import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { booleanAttribute, Directive, ElementRef, EventEmitter, forwardRef, HostListener, Inject, Input, NgModule, Output, PLATFORM_ID, Provider } from '@angular/core'; import { AbstractControl, NG_VALIDATORS, Validator } from '@angular/forms'; -import { DomHandler } from 'primeng/dom'; +import { getBrowser, isAndroid } from '@primeuix/utils'; import { KeyFilterPattern } from './keyfilter.interface'; export const KEYFILTER_VALIDATOR: Provider = { @@ -117,7 +117,7 @@ export class KeyFilter implements Validator { public el: ElementRef ) { if (isPlatformBrowser(this.platformId)) { - this.isAndroid = DomHandler.isAndroid(); + this.isAndroid = isAndroid(); } else { this.isAndroid = false; } @@ -125,7 +125,7 @@ export class KeyFilter implements Validator { isNavKeyPress(e: KeyboardEvent) { let k = e.keyCode; - k = DomHandler.getBrowser().safari ? (SAFARI_KEYS as any)[k] || k : k; + k = getBrowser().safari ? (SAFARI_KEYS as any)[k] || k : k; return (k >= 33 && k <= 40) || k == KEYS.RETURN || k == KEYS.TAB || k == KEYS.ESC; } @@ -133,12 +133,12 @@ export class KeyFilter implements Validator { isSpecialKey(e: KeyboardEvent) { let k = e.keyCode || e.charCode; - return k == 9 || k == 13 || k == 27 || k == 16 || k == 17 || (k >= 18 && k <= 20) || (DomHandler.getBrowser().opera && !e.shiftKey && (k == 8 || (k >= 33 && k <= 35) || (k >= 36 && k <= 39) || (k >= 44 && k <= 45))); + return k == 9 || k == 13 || k == 27 || k == 16 || k == 17 || (k >= 18 && k <= 20) || (getBrowser().opera && !e.shiftKey && (k == 8 || (k >= 33 && k <= 35) || (k >= 36 && k <= 39) || (k >= 44 && k <= 45))); } getKey(e: KeyboardEvent) { let k = e.keyCode || e.charCode; - return DomHandler.getBrowser().safari ? (SAFARI_KEYS as any)[k] || k : k; + return getBrowser().safari ? (SAFARI_KEYS as any)[k] || k : k; } getCharCode(e: KeyboardEvent) { @@ -206,7 +206,7 @@ export class KeyFilter implements Validator { return; } - let browser = DomHandler.getBrowser(); + let browser = getBrowser(); let k = this.getKey(e); if (browser.mozilla && (e.ctrlKey || e.altKey)) { diff --git a/packages/primeng/src/knob/knob.ts b/packages/primeng/src/knob/knob.ts index 569a20979bf..39eea654982 100755 --- a/packages/primeng/src/knob/knob.ts +++ b/packages/primeng/src/knob/knob.ts @@ -1,11 +1,10 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, Output, ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { $dt } from '@primeuix/styled'; import { VoidListener } from 'primeng/ts-helpers'; import { KnobStyle } from './style/knobstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { $dt } from '@primeuix/styled'; -import { SharedModule } from 'primeng/api'; export const KNOB_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, diff --git a/packages/primeng/src/knob/style/knobstyle.ts b/packages/primeng/src/knob/style/knobstyle.ts index 3a5cd32f08f..cd5eaa51194 100644 --- a/packages/primeng/src/knob/style/knobstyle.ts +++ b/packages/primeng/src/knob/style/knobstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-knob-range { diff --git a/packages/primeng/src/listbox/listbox.spec.ts b/packages/primeng/src/listbox/listbox.spec.ts index 730a626bd8b..f8fedd824eb 100755 --- a/packages/primeng/src/listbox/listbox.spec.ts +++ b/packages/primeng/src/listbox/listbox.spec.ts @@ -1,9 +1,8 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { Listbox } from './listbox'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CheckIcon } from 'primeng/icons/check'; -import { SearchIcon } from 'primeng/icons/search'; +import { CheckIcon, SearchIcon } from '@primeng/icons'; +import { Listbox } from './listbox'; describe('Listbox', () => { let listbox: Listbox; diff --git a/packages/primeng/src/listbox/listbox.ts b/packages/primeng/src/listbox/listbox.ts index 285c9e8b059..8f4a0ff2852 100755 --- a/packages/primeng/src/listbox/listbox.ts +++ b/packages/primeng/src/listbox/listbox.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { AfterContentInit, booleanAttribute, @@ -20,25 +21,21 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FilterService, Footer, Header, ScrollerOptions, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, FilterService, Footer, Header, SharedModule } from '@primeng/core'; +import { BlankIcon, CheckIcon, SearchIcon } from '@primeng/icons'; +import { equals, findLastIndex, findSingle, focus, getFirstFocusableElement, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData, uuid } from '@primeuix/utils'; +import { ScrollerOptions } from 'primeng/api'; +import { Checkbox } from 'primeng/checkbox'; +import { IconField } from 'primeng/iconfield'; +import { InputIcon } from 'primeng/inputicon'; +import { InputText } from 'primeng/inputtext'; import { Ripple } from 'primeng/ripple'; -import { Subscription } from 'rxjs'; -import { SearchIcon } from 'primeng/icons/search'; -import { CheckIcon } from 'primeng/icons/check'; +import { Scroller, ScrollerLazyLoadEvent } from 'primeng/scroller'; import { Nullable } from 'primeng/ts-helpers'; +import { Subscription } from 'rxjs'; import { ListboxChangeEvent, ListboxClickEvent, ListboxDoubleClickEvent, ListboxFilterEvent, ListboxFilterOptions, ListboxSelectAllChangeEvent } from './listbox.interface'; -import { Scroller, ScrollerLazyLoadEvent } from 'primeng/scroller'; -import { IconField } from 'primeng/iconfield'; -import { InputText } from 'primeng/inputtext'; -import { BaseComponent } from 'primeng/basecomponent'; import { ListBoxStyle } from './style/listboxstyle'; -import { BlankIcon } from 'primeng/icons/blank'; -import { Checkbox } from 'primeng/checkbox'; -import { InputIcon } from 'primeng/inputicon'; export const LISTBOX_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -709,7 +706,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } get filterResultMessageText() { - return ObjectUtils.isNotEmpty(this.visibleOptions()) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptyFilterMessageText; + return isNotEmpty(this.visibleOptions()) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptyFilterMessageText; } get filterMessageText() { @@ -777,7 +774,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.translationSubscription = this.config.translationObserver.subscribe(() => { this.cd.markForCheck(); }); @@ -901,7 +898,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } removeOption(option) { - return this.modelValue().filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey())); + return this.modelValue().filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey())); } onOptionSelect(event, option, index = -1) { @@ -985,7 +982,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, if (this.disabled || this.readonly) { return; } - DomHandler.focus(this.headerCheckboxViewChild.nativeElement); + focus(this.headerCheckboxViewChild.nativeElement); if (this.selectAll !== null) { this.onSelectAllChange.emit({ @@ -1008,7 +1005,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } allSelected() { - return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option)); + return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option)); } onOptionTouchEnd() { @@ -1042,9 +1039,9 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } onFirstHiddenFocus(event: FocusEvent) { - DomHandler.focus(this.listViewChild.nativeElement); - const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not([data-p-hidden-focusable="true"])'); - this.lastHiddenFocusableElement.nativeElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? '-1' : undefined; + focus(this.listViewChild.nativeElement); + const firstFocusableEl = getFirstFocusableElement(this.el.nativeElement, ':not([data-p-hidden-focusable="true"])'); + this.lastHiddenFocusableElement.nativeElement.tabIndex = isEmpty(firstFocusableEl) ? '-1' : undefined; this.firstHiddenFocusableElement.nativeElement.tabIndex = -1; } @@ -1052,12 +1049,12 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, const relatedTarget = event.relatedTarget; if (relatedTarget === this.listViewChild.nativeElement) { - const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not(.p-hidden-focusable)'); + const firstFocusableEl = getFirstFocusableElement(this.el.nativeElement, ':not(.p-hidden-focusable)'); - DomHandler.focus(firstFocusableEl); + focus(firstFocusableEl); this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined; } else { - DomHandler.focus(this.firstHiddenFocusableElement.nativeElement); + focus(this.firstHiddenFocusableElement.nativeElement); } this.lastHiddenFocusableElement.nativeElement.tabIndex = -1; } @@ -1113,7 +1110,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } onHeaderCheckboxTabKeyDown(event) { - DomHandler.focus(this.listViewChild.nativeElement); + focus(this.listViewChild.nativeElement); event.preventDefault(); } @@ -1187,7 +1184,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, break; } - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { this.searchOptions(event, event.key); event.preventDefault(); } @@ -1327,15 +1324,15 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } getOptionGroupChildren(optionGroup) { - return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; + return this.optionGroupChildren ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; } getOptionGroupLabel(optionGroup: any) { - return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup; + return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup; } getOptionLabel(option) { - return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option.label != undefined ? option.label : option; + return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option.label != undefined ? option.label : option; } getOptionIndex(index, scrollerOptions) { @@ -1343,7 +1340,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } getOptionValue(option: any) { - return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; + return this.optionValue ? resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; } getAriaPosInset(index: number) { @@ -1358,7 +1355,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } hasSelectedOption() { - return ObjectUtils.isNotEmpty(this.modelValue()); + return isNotEmpty(this.modelValue()); } isOptionGroup(option) { @@ -1426,7 +1423,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; - const element = DomHandler.findSingle(this.listViewChild.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.listViewChild.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -1440,7 +1437,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } findLastOptionIndex() { - return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); + return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); } findFirstFocusedOptionIndex() { @@ -1456,7 +1453,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } findLastSelectedOptionIndex() { - return this.hasSelectedOption() ? ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidSelectedOption(option)) : -1; + return this.hasSelectedOption() ? findLastIndex(this.visibleOptions(), (option) => this.isValidSelectedOption(option)) : -1; } findNextOptionIndex(index) { @@ -1482,7 +1479,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } findPrevSelectedOptionIndex(index) { - const matchedOptionIndex = this.hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidSelectedOption(option)) : -1; + const matchedOptionIndex = this.hasSelectedOption() && index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidSelectedOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : -1; } @@ -1492,7 +1489,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } findPrevOptionIndex(index) { - const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; + const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : index; } @@ -1522,14 +1519,14 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit, } isOptionDisabled(option: any) { - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false; } isSelected(option) { const optionValue = this.getOptionValue(option); - if (this.multiple) return (this.modelValue() || []).some((value) => ObjectUtils.equals(value, optionValue, this.equalityKey())); - else return ObjectUtils.equals(this.modelValue(), optionValue, this.equalityKey()); + if (this.multiple) return (this.modelValue() || []).some((value) => equals(value, optionValue, this.equalityKey())); + else return equals(this.modelValue(), optionValue, this.equalityKey()); } isValidOption(option) { diff --git a/packages/primeng/src/listbox/style/listboxstyle.ts b/packages/primeng/src/listbox/style/listboxstyle.ts index 7420ec16cca..3624a32ca91 100644 --- a/packages/primeng/src/listbox/style/listboxstyle.ts +++ b/packages/primeng/src/listbox/style/listboxstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-listbox { diff --git a/packages/primeng/src/megamenu/megamenu.ts b/packages/primeng/src/megamenu/megamenu.ts index 4c12753a560..50d90b26a76 100755 --- a/packages/primeng/src/megamenu/megamenu.ts +++ b/packages/primeng/src/megamenu/megamenu.ts @@ -21,18 +21,16 @@ import { ViewEncapsulation } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MegaMenuItem, PrimeNGConfig, SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; -import { DomHandler } from 'primeng/dom'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleRightIcon } from 'primeng/icons/angleright'; +import { BaseComponent, PrimeNGConfig, SharedModule } from '@primeng/core'; +import { AngleDownIcon, AngleRightIcon, BarsIcon } from '@primeng/icons'; +import { findLastIndex, findSingle, focus, isEmpty, isNotEmpty, isPrintableCharacter, isTouchDevice, resolve, uuid } from '@primeuix/utils'; +import { MegaMenuItem } from 'primeng/api'; +import { BadgeModule } from 'primeng/badge'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { MegaMenuStyle } from './style/megamenustyle'; -import { BadgeModule } from 'primeng/badge'; -import { BarsIcon } from 'primeng/icons/bars'; @Component({ selector: 'p-megaMenuSub, p-megamenu-sub', @@ -256,7 +254,7 @@ export class MegaMenuSub extends BaseComponent { } getItemProp(processedItem: any, name: string, params: any | null = null) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined; } getItemId(processedItem: any): string { @@ -342,7 +340,7 @@ export class MegaMenuSub extends BaseComponent { } isItemActive(processedItem) { - return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false; + return isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false; } isItemDisabled(processedItem: any): boolean { @@ -354,7 +352,7 @@ export class MegaMenuSub extends BaseComponent { } isItemGroup(processedItem: any): boolean { - return ObjectUtils.isNotEmpty(processedItem.items); + return isNotEmpty(processedItem.items); } getAriaSetSize() { @@ -586,7 +584,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { public mobileActive: boolean = false; get visibleItems() { - const processedItem = ObjectUtils.isNotEmpty(this.activeItem()) ? this.activeItem() : null; + const processedItem = isNotEmpty(this.activeItem()) ? this.activeItem() : null; return processedItem ? processedItem.items.reduce((items, col) => { @@ -610,14 +608,14 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { get focusedItemId() { const focusedItem = this.focusedItemInfo(); - return focusedItem?.item && focusedItem.item?.id ? focusedItem.item.id : ObjectUtils.isNotEmpty(focusedItem.key) ? `${this.id}_${focusedItem.key}` : null; + return focusedItem?.item && focusedItem.item?.id ? focusedItem.item.id : isNotEmpty(focusedItem.key) ? `${this.id}_${focusedItem.key}` : null; } constructor(public config: PrimeNGConfig) { super(); effect(() => { const activeItem = this.activeItem(); - if (ObjectUtils.isNotEmpty(activeItem)) { + if (isNotEmpty(activeItem)) { this.bindOutsideClickListener(); this.bindResizeListener(); } else { @@ -630,7 +628,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { ngOnInit(): void { super.ngOnInit(); this.bindMatchMediaListener(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } bindMatchMediaListener() { @@ -683,13 +681,13 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { } getItemProp(item: any, name: string) { - return item ? ObjectUtils.getItemValue(item[name]) : undefined; + return item ? resolve(item[name]) : undefined; } onItemClick(event: any) { const { originalEvent, processedItem } = event; const grouped = this.isProcessedItemGroup(processedItem); - const root = ObjectUtils.isEmpty(processedItem.parent); + const root = isEmpty(processedItem.parent); const selected = this.isSelected(processedItem); if (selected) { @@ -700,7 +698,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { this.dirty = !root; if (!this.mobileActive) { - DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement, { preventScroll: true }); + focus(this.rootmenu?.menubarViewChild?.nativeElement, { preventScroll: true }); } } else { if (grouped) { @@ -745,7 +743,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { show() { this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }); - DomHandler.focus(this.rootmenu?.el.nativeElement); + focus(this.rootmenu?.el.nativeElement); } scrollInView(index: number = -1) { @@ -756,7 +754,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { if (id === null && this.queryMatches) { element = this.menubuttonViewChild.nativeElement; } else { - element = DomHandler.findSingle(this.rootmenu?.menubarViewChild?.nativeElement, `li[id="${id}"]`); + element = findSingle(this.rootmenu?.menubarViewChild?.nativeElement, `li[id="${id}"]`); } if (element) { @@ -767,10 +765,10 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { onItemChange(event: any) { const { processedItem, isFocus } = event; - if (ObjectUtils.isEmpty(processedItem)) return; + if (isEmpty(processedItem)) return; const { index, key, parentKey, items, item } = processedItem; - const grouped = ObjectUtils.isNotEmpty(items); + const grouped = isNotEmpty(items); if (grouped) { this.activeItem.set(processedItem); @@ -778,14 +776,14 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { this.focusedItemInfo.set({ index, key, parentKey, item }); grouped && (this.dirty = true); - isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement); + isFocus && focus(this.rootmenu?.menubarViewChild?.nativeElement); } hide(event?, isFocus?: boolean) { if (this.mobileActive) { this.mobileActive = false; setTimeout(() => { - DomHandler.focus(this.menubuttonViewChild?.nativeElement); + focus(this.menubuttonViewChild?.nativeElement); this.scrollInView(); }, 100); } @@ -793,7 +791,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { this.activeItem.set(null); this.focusedItemInfo.set({ index: -1, key: '', parentKey: '', item: null }); - isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement); + isFocus && focus(this.rootmenu?.menubarViewChild?.nativeElement); this.dirty = false; } @@ -867,7 +865,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { break; default: - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } @@ -890,11 +888,11 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { } isProcessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } isSelected(processedItem: any): boolean { - return ObjectUtils.isNotEmpty(this.activeItem()) ? this.activeItem().key === processedItem.key : false; + return isNotEmpty(this.activeItem()) ? this.activeItem().key === processedItem.key : false; } isValidSelectedItem(processedItem: any): boolean { @@ -918,7 +916,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { } isProccessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } searchItems(event: any, char: string) { @@ -968,7 +966,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { changeFocusedItemInfo(event, index) { const processedItem = this.findVisibleItem(index); - if (ObjectUtils.isNotEmpty(processedItem)) { + if (isNotEmpty(processedItem)) { const { key, parentKey, item } = processedItem; this.focusedItemInfo.set({ index, key: key ? key : '', parentKey, item }); } @@ -978,7 +976,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { onArrowDownKey(event: KeyboardEvent) { if (this.orientation === 'horizontal') { - if (ObjectUtils.isNotEmpty(this.activeItem()) && this.activeItem().key === this.focusedItemInfo().key) { + if (isNotEmpty(this.activeItem()) && this.activeItem().key === this.focusedItemInfo().key) { const { key, item } = this.activeItem(); this.focusedItemInfo.set({ index: -1, key: '', parentKey: key, item }); } else { @@ -1005,7 +1003,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { if (grouped) { if (this.orientation === 'vertical') { - if (ObjectUtils.isNotEmpty(this.activeItem()) && this.activeItem().key === processedItem.key) { + if (isNotEmpty(this.activeItem()) && this.activeItem().key === processedItem.key) { this.focusedItemInfo.set({ index: -1, key: '', parentKey: this.activeItem().key, item: processedItem.item }); } else { const processedItem = this.findVisibleItem(this.focusedItemInfo().index); @@ -1043,7 +1041,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { const processedItem = this.findVisibleItem(this.focusedItemInfo().index); const grouped = this.isProccessedItemGroup(processedItem); - if (!grouped && ObjectUtils.isNotEmpty(this.activeItem)) { + if (!grouped && isNotEmpty(this.activeItem)) { if (this.focusedItemInfo().index === 0) { this.focusedItemInfo.set({ index: this.activeItem().index, @@ -1078,7 +1076,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { this.changeFocusedItemInfo(event, itemIndex); } } else { - if (this.orientation === 'vertical' && ObjectUtils.isNotEmpty(this.activeItem())) { + if (this.orientation === 'vertical' && isNotEmpty(this.activeItem())) { if (processedItem.columnIndex === 0) { this.focusedItemInfo.set({ index: this.activeItem().index, @@ -1114,7 +1112,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { } onEscapeKey(event: KeyboardEvent) { - if (ObjectUtils.isNotEmpty(this.activeItem())) { + if (isNotEmpty(this.activeItem())) { this.focusedItemInfo.set({ index: this.activeItem().index, key: this.activeItem().key, item: this.activeItem().item }); this.activeItem.set(null); } @@ -1135,8 +1133,8 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { onEnterKey(event: KeyboardEvent) { if (this.focusedItemInfo().index !== -1) { - const element = DomHandler.findSingle(this.rootmenu?.el?.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); - const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); + const element = findSingle(this.rootmenu?.el?.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const anchorElement = element && findSingle(element, 'a[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); @@ -1150,7 +1148,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { } findVisibleItem(index) { - return ObjectUtils.isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; + return isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; } findLastFocusedItemIndex() { @@ -1159,11 +1157,11 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { } findLastItemIndex() { - return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); + return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); } findPrevItemIndex(index: number) { - const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; + const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex : index; } @@ -1177,7 +1175,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit { bindResizeListener() { if (!this.resizeListener) { this.resizeListener = (event) => { - if (!DomHandler.isTouchDevice()) { + if (!isTouchDevice()) { this.hide(event, true); } diff --git a/packages/primeng/src/megamenu/style/megamenustyle.ts b/packages/primeng/src/megamenu/style/megamenustyle.ts index 420162292e7..3791e8bae96 100644 --- a/packages/primeng/src/megamenu/style/megamenustyle.ts +++ b/packages/primeng/src/megamenu/style/megamenustyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-megamenu { diff --git a/packages/primeng/src/menu/menu.ts b/packages/primeng/src/menu/menu.ts index f0ed0f48147..93db0f786b9 100755 --- a/packages/primeng/src/menu/menu.ts +++ b/packages/primeng/src/menu/menu.ts @@ -27,15 +27,16 @@ import { } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; -import { MenuItem, OverlayService, SharedModule } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { BaseComponent, OverlayService, SharedModule } from '@primeng/core'; +import { absolutePosition, appendChild, find, findSingle, focus, isTouchDevice, relativePosition, uuid } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; +import { BadgeModule } from 'primeng/badge'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { MenuStyle } from './style/menustyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { BadgeModule } from 'primeng/badge'; @Pipe({ name: 'safeHtml', @@ -385,7 +386,7 @@ export class Menu extends BaseComponent implements OnDestroy { constructor(public overlayService: OverlayService) { super(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } /** * Toggles the visibility of the popup menu. @@ -491,7 +492,7 @@ export class Menu extends BaseComponent implements OnDestroy { this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); - DomHandler.focus(this.listViewChild.nativeElement); + focus(this.listViewChild.nativeElement); } break; @@ -513,14 +514,14 @@ export class Menu extends BaseComponent implements OnDestroy { } alignOverlay() { - if (this.relativeAlign) DomHandler.relativePosition(this.container, this.target); - else DomHandler.absolutePosition(this.container, this.target); + if (this.relativeAlign) relativePosition(this.container, this.target); + else absolutePosition(this.container, this.target); } appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); - else DomHandler.appendChild(this.container, this.appendTo); + else appendChild(this.container, this.appendTo); } } @@ -546,7 +547,7 @@ export class Menu extends BaseComponent implements OnDestroy { } onWindowResize() { - if (this.visible && !DomHandler.isTouchDevice()) { + if (this.visible && !isTouchDevice()) { this.hide(); } } @@ -621,7 +622,7 @@ export class Menu extends BaseComponent implements OnDestroy { case 'Escape': case 'Tab': if (this.popup) { - DomHandler.focus(this.target); + focus(this.target); this.hide(); } this.overlayVisible && this.hide(); @@ -640,7 +641,7 @@ export class Menu extends BaseComponent implements OnDestroy { onArrowUpKey(event) { if (event.altKey && this.popup) { - DomHandler.focus(this.target); + focus(this.target); this.hide(); event.preventDefault(); } else { @@ -657,15 +658,15 @@ export class Menu extends BaseComponent implements OnDestroy { } onEndKey(event) { - this.changeFocusedOptionIndex(DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1); + this.changeFocusedOptionIndex(find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1); event.preventDefault(); } onEnterKey(event) { - const element = DomHandler.findSingle(this.containerViewChild.nativeElement, `li[id="${`${this.focusedOptionIndex()}`}"]`); - const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); + const element = findSingle(this.containerViewChild.nativeElement, `li[id="${`${this.focusedOptionIndex()}`}"]`); + const anchorElement = element && findSingle(element, 'a[data-pc-section="action"]'); - this.popup && DomHandler.focus(this.target); + this.popup && focus(this.target); anchorElement ? anchorElement.click() : element && element.click(); event.preventDefault(); @@ -676,21 +677,21 @@ export class Menu extends BaseComponent implements OnDestroy { } findNextOptionIndex(index) { - const links = DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); + const links = find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const matchedOptionIndex = [...links].findIndex((link) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; } findPrevOptionIndex(index) { - const links = DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); + const links = find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const matchedOptionIndex = [...links].findIndex((link) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; } changeFocusedOptionIndex(index) { - const links = DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); + const links = find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); if (links.length > 0) { let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index; diff --git a/packages/primeng/src/menu/style/menustyle.ts b/packages/primeng/src/menu/style/menustyle.ts index a515ba4c3e2..317017e368c 100644 --- a/packages/primeng/src/menu/style/menustyle.ts +++ b/packages/primeng/src/menu/style/menustyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-menu { diff --git a/packages/primeng/src/menubar/menubar.ts b/packages/primeng/src/menubar/menubar.ts index 2a67544fb8a..c34f35c1ef1 100755 --- a/packages/primeng/src/menubar/menubar.ts +++ b/packages/primeng/src/menubar/menubar.ts @@ -25,20 +25,18 @@ import { ViewEncapsulation } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MenuItem, PrimeNGConfig, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleRightIcon } from 'primeng/icons/angleright'; -import { BarsIcon } from 'primeng/icons/bars'; +import { BaseComponent, PrimeNGConfig, SharedModule } from '@primeng/core'; +import { AngleDownIcon, AngleRightIcon, BarsIcon } from '@primeng/icons'; +import { findLastIndex, findSingle, focus, isEmpty, isNotEmpty, isPrintableCharacter, isTouchDevice, resolve, uuid } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; +import { BadgeModule } from 'primeng/badge'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { interval, Subject, Subscription } from 'rxjs'; import { debounce, filter } from 'rxjs/operators'; import { MenuBarStyle } from './style/menubarstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { BadgeModule } from 'primeng/badge'; @Injectable() export class MenubarService { @@ -271,7 +269,7 @@ export class MenubarSub extends BaseComponent implements OnInit, OnDestroy { } getItemProp(processedItem: any, name: string, params: any | null = null) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined; } getItemId(processedItem: any): string { @@ -326,7 +324,7 @@ export class MenubarSub extends BaseComponent implements OnInit, OnDestroy { } isItemGroup(processedItem: any): boolean { - return ObjectUtils.isNotEmpty(processedItem.items); + return isNotEmpty(processedItem.items); } getAriaSetSize() { @@ -553,7 +551,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { get focusedItemId() { const focusedItem = this.focusedItemInfo(); - return focusedItem.item && focusedItem.item?.id ? focusedItem.item.id : focusedItem.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItem.parentKey) ? '_' + focusedItem.parentKey : ''}_${focusedItem.index}` : null; + return focusedItem.item && focusedItem.item?.id ? focusedItem.item.id : focusedItem.index !== -1 ? `${this.id}${isNotEmpty(focusedItem.parentKey) ? '_' + focusedItem.parentKey : ''}_${focusedItem.index}` : null; } constructor( @@ -569,7 +567,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { effect(() => { const path = this.activeItemPath(); - if (ObjectUtils.isNotEmpty(path)) { + if (isNotEmpty(path)) { this.bindOutsideClickListener(); this.bindResizeListener(); } else { @@ -585,7 +583,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { this.menubarService.autoHide = this.autoHide; this.menubarService.autoHideDelay = this.autoHideDelay; this.mouseLeaveSubscriber = this.menubarService.mouseLeft$.subscribe(() => this.unbindOutsideClickListener()); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } /** @@ -665,7 +663,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { } getItemProp(item: any, name: string) { - return item ? ObjectUtils.getItemValue(item[name]) : undefined; + return item ? resolve(item[name]) : undefined; } menuButtonClick(event: MouseEvent) { @@ -679,7 +677,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { onItemClick(event: any) { const { originalEvent, processedItem } = event; const grouped = this.isProcessedItemGroup(processedItem); - const root = ObjectUtils.isEmpty(processedItem.parent); + const root = isEmpty(processedItem.parent); const selected = this.isSelected(processedItem); if (selected) { @@ -689,7 +687,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { this.focusedItemInfo.set({ index, level, parentKey, item }); this.dirty = !root; - DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + focus(this.rootmenu.menubarViewChild.nativeElement); } else { if (grouped) { this.onItemChange(event); @@ -699,13 +697,13 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1); this.mobileActive = false; - DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + focus(this.rootmenu.menubarViewChild.nativeElement); } } } onItemMouseEnter(event: any) { - if (!DomHandler.isTouchDevice()) { + if (!isTouchDevice()) { if (!this.mobileActive) { this.onItemChange(event); } @@ -723,7 +721,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { scrollInView(index: number = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -733,10 +731,10 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { onItemChange(event: any) { const { processedItem, isFocus } = event; - if (ObjectUtils.isEmpty(processedItem)) return; + if (isEmpty(processedItem)) return; const { index, key, level, parentKey, items, item } = processedItem; - const grouped = ObjectUtils.isNotEmpty(items); + const grouped = isNotEmpty(items); const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key); grouped && activeItemPath.push(processedItem); @@ -744,7 +742,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { this.activeItemPath.set(activeItemPath); grouped && (this.dirty = true); - isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + isFocus && focus(this.rootmenu.menubarViewChild.nativeElement); } toggle(event: MouseEvent) { @@ -767,21 +765,21 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { hide(event?, isFocus?: boolean) { if (this.mobileActive) { setTimeout(() => { - DomHandler.focus(this.menubutton.nativeElement); + focus(this.menubutton.nativeElement); }, 0); } this.activeItemPath.set([]); this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null }); - isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild.nativeElement); + isFocus && focus(this.rootmenu?.menubarViewChild.nativeElement); this.dirty = false; } show() { const processedItem = this.findVisibleItem(this.findFirstFocusedItemIndex()); this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '', item: processedItem?.item }); - DomHandler.focus(this.rootmenu?.menubarViewChild.nativeElement); + focus(this.rootmenu?.menubarViewChild.nativeElement); } onMenuFocus(event: any) { @@ -854,7 +852,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { break; default: - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } @@ -863,7 +861,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { } findVisibleItem(index) { - return ObjectUtils.isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; + return isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; } findFirstFocusedItemIndex() { @@ -881,7 +879,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { } isProcessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } isSelected(processedItem: any): boolean { @@ -909,7 +907,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { } isProccessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } searchItems(event: any, char: string) { @@ -959,7 +957,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { onArrowDownKey(event: KeyboardEvent) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; - const root = processedItem ? ObjectUtils.isEmpty(processedItem.parent) : null; + const root = processedItem ? isEmpty(processedItem.parent) : null; if (root) { const grouped = this.isProccessedItemGroup(processedItem); @@ -999,7 +997,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { onArrowUpKey(event: KeyboardEvent) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; - const root = ObjectUtils.isEmpty(processedItem.parent); + const root = isEmpty(processedItem.parent); if (root) { const grouped = this.isProccessedItemGroup(processedItem); @@ -1079,8 +1077,8 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { onEnterKey(event: KeyboardEvent) { if (this.focusedItemInfo().index !== -1) { - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); - const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); + const element = findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const anchorElement = element && findSingle(element, 'a[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); } @@ -1094,11 +1092,11 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { } findLastItemIndex() { - return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); + return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); } findPrevItemIndex(index: number) { - const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; + const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex : index; } @@ -1113,7 +1111,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit { if (isPlatformBrowser(this.platformId)) { if (!this.resizeListener) { this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => { - if (!DomHandler.isTouchDevice()) { + if (!isTouchDevice()) { this.hide(event, true); } diff --git a/packages/primeng/src/menubar/style/menubarstyle.ts b/packages/primeng/src/menubar/style/menubarstyle.ts index f1d71dc8016..811092eafc2 100644 --- a/packages/primeng/src/menubar/style/menubarstyle.ts +++ b/packages/primeng/src/menubar/style/menubarstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-menubar { diff --git a/packages/primeng/src/message/message.ts b/packages/primeng/src/message/message.ts index 6de2a76c302..04e976de94d 100755 --- a/packages/primeng/src/message/message.ts +++ b/packages/primeng/src/message/message.ts @@ -1,15 +1,10 @@ +import { animate, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; -import { CheckIcon } from 'primeng/icons/check'; -import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle'; -import { InfoCircleIcon } from 'primeng/icons/infocircle'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; -import { MessageStyle } from './style/messagestyle'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, TimesIcon } from '@primeng/icons'; import { Ripple } from 'primeng/ripple'; -import { animate, style, transition, trigger } from '@angular/animations'; -import { TimesIcon } from 'primeng/icons/times'; -import { SharedModule } from 'primeng/api'; +import { MessageStyle } from './style/messagestyle'; /** * Message groups a collection of contents in tabs. diff --git a/packages/primeng/src/message/style/messagestyle.ts b/packages/primeng/src/message/style/messagestyle.ts index 61745765ca5..52a20e14f53 100644 --- a/packages/primeng/src/message/style/messagestyle.ts +++ b/packages/primeng/src/message/style/messagestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-message { diff --git a/packages/primeng/src/messages/messages.spec.ts b/packages/primeng/src/messages/messages.spec.ts index 7ade51a8b76..66dcd664ef3 100755 --- a/packages/primeng/src/messages/messages.spec.ts +++ b/packages/primeng/src/messages/messages.spec.ts @@ -1,17 +1,12 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { Messages } from './messages'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, TimesIcon } from '@primeng/icons'; +import { MessageService, ToastMessageOptions } from 'primeng/api'; import { Button } from 'primeng/button'; -import { FormsModule } from '@angular/forms'; -import { MessageService } from 'primeng/api'; -import { ToastMessageOptions } from 'primeng/api'; -import { CheckIcon } from 'primeng/icons/check'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; -import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle'; -import { InfoCircleIcon } from 'primeng/icons/infocircle'; -import { TimesIcon } from 'primeng/icons/times'; +import { Messages } from './messages'; @Component({ template: ` diff --git a/packages/primeng/src/messages/messages.ts b/packages/primeng/src/messages/messages.ts index ad1365066a5..cdfda92d6ae 100644 --- a/packages/primeng/src/messages/messages.ts +++ b/packages/primeng/src/messages/messages.ts @@ -1,17 +1,13 @@ import { animate, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, inject, Input, NgModule, OnDestroy, Optional, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { MessageService, SharedModule, ToastMessageOptions } from 'primeng/api'; -import { CheckIcon } from 'primeng/icons/check'; -import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle'; -import { InfoCircleIcon } from 'primeng/icons/infocircle'; -import { TimesIcon } from 'primeng/icons/times'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, TimesIcon } from '@primeng/icons'; +import { MessageService, ToastMessageOptions } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; import { Ripple } from 'primeng/ripple'; import { Subscription, timer } from 'rxjs'; import { MessagesStyle } from './style/messagesstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { ButtonModule } from 'primeng/button'; /** * Messages is used to display alerts inline. diff --git a/packages/primeng/src/messages/style/messagesstyle.ts b/packages/primeng/src/messages/style/messagesstyle.ts index 18a7aa64b35..5ce436ae16e 100644 --- a/packages/primeng/src/messages/style/messagesstyle.ts +++ b/packages/primeng/src/messages/style/messagesstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-messages { diff --git a/packages/primeng/src/metergroup/metergroup.ts b/packages/primeng/src/metergroup/metergroup.ts index aa479f0059e..f98f11be009 100644 --- a/packages/primeng/src/metergroup/metergroup.ts +++ b/packages/primeng/src/metergroup/metergroup.ts @@ -1,9 +1,8 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, forwardRef, inject, Input, NgModule, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { getOuterHeight } from '@primeuix/utils'; import { MeterItem } from './metergroup.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { MeterGroupStyle } from './style/metergroupstyle'; @Component({ @@ -164,7 +163,7 @@ export class MeterGroup extends BaseComponent { ngAfterViewInit() { super.ngAfterViewInit(); const _container = this.container.nativeElement; - const height = DomHandler.getOuterHeight(_container); + const height = getOuterHeight(_container); this.vertical && (_container.style.height = height + 'px'); } diff --git a/packages/primeng/src/metergroup/style/metergroupstyle.ts b/packages/primeng/src/metergroup/style/metergroupstyle.ts index 47d87db8cd4..2c9043af1b3 100644 --- a/packages/primeng/src/metergroup/style/metergroupstyle.ts +++ b/packages/primeng/src/metergroup/style/metergroupstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-metergroup { diff --git a/packages/primeng/src/multiselect/multiselect.spec.ts b/packages/primeng/src/multiselect/multiselect.spec.ts index aeb29c71650..69951179dc6 100755 --- a/packages/primeng/src/multiselect/multiselect.spec.ts +++ b/packages/primeng/src/multiselect/multiselect.spec.ts @@ -1,14 +1,12 @@ import { ScrollingModule } from '@angular/cdk/scrolling'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { ChevronDownIcon, SearchIcon, TimesIcon } from '@primeng/icons'; import { OverlayModule } from 'primeng/overlay'; import { TooltipModule } from 'primeng/tooltip'; import { MultiSelect, MultiSelectItem } from './multiselect'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { SearchIcon } from 'primeng/icons/search'; -import { TimesIcon } from 'primeng/icons/times'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; describe('MultiSelect', () => { let multiselect: MultiSelect; diff --git a/packages/primeng/src/multiselect/multiselect.ts b/packages/primeng/src/multiselect/multiselect.ts index e4e5d5f90b7..77214e2ed1c 100755 --- a/packages/primeng/src/multiselect/multiselect.ts +++ b/packages/primeng/src/multiselect/multiselect.ts @@ -29,29 +29,41 @@ import { ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { FilterService, Footer, Header, OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, ScrollerOptions, SharedModule, TranslationKeys } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, FilterService, Footer, Header, OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from '@primeng/core'; +import { CheckIcon, ChevronDownIcon, MinusIcon, SearchIcon, TimesCircleIcon, TimesIcon } from '@primeng/icons'; +import { + deepEquals, + equals, + findLastIndex, + findSingle, + focus, + getFirstFocusableElement, + getFocusableElements, + getLastFocusableElement, + hasClass, + isArray, + isHidden, + isNotEmpty, + isObject, + isPrintableCharacter, + resolveFieldData, + unblockBodyScroll, + uuid +} from '@primeuix/utils'; +import { ScrollerOptions } from 'primeng/api'; +import { AutoFocus } from 'primeng/autofocus'; +import { Checkbox } from 'primeng/checkbox'; +import { Chip } from 'primeng/chip'; +import { IconField } from 'primeng/iconfield'; +import { InputIcon } from 'primeng/inputicon'; +import { InputText } from 'primeng/inputtext'; import { Overlay } from 'primeng/overlay'; import { Ripple } from 'primeng/ripple'; import { Scroller } from 'primeng/scroller'; import { Tooltip } from 'primeng/tooltip'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { CheckIcon } from 'primeng/icons/check'; -import { SearchIcon } from 'primeng/icons/search'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; -import { TimesIcon } from 'primeng/icons/times'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; import { Nullable } from 'primeng/ts-helpers'; -import { AutoFocus } from 'primeng/autofocus'; import { MultiSelectBlurEvent, MultiSelectChangeEvent, MultiSelectFilterEvent, MultiSelectFilterOptions, MultiSelectFocusEvent, MultiSelectLazyLoadEvent, MultiSelectRemoveEvent, MultiSelectSelectAllChangeEvent } from './multiselect.interface'; -import { MinusIcon } from 'primeng/icons/minus'; -import { IconField } from 'primeng/iconfield'; -import { InputText } from 'primeng/inputtext'; -import { InputIcon } from 'primeng/inputicon'; -import { Chip } from 'primeng/chip'; -import { Checkbox } from 'primeng/checkbox'; import { MultiSelectStyle } from './style/multiselectstyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const MULTISELECT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -821,7 +833,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, return options; } set options(val: any[] | undefined) { - if (!ObjectUtils.deepEquals(this._options(), val)) { + if (!deepEquals(this._options(), val)) { this._options.set(val); } } @@ -1106,11 +1118,11 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, get filled(): boolean { if (typeof this.modelValue() === 'string') return !!this.modelValue(); - return ObjectUtils.isNotEmpty(this.modelValue()); + return isNotEmpty(this.modelValue()); } get isVisibleClearIcon(): boolean | undefined { - return this.modelValue() != null && this.modelValue() !== '' && ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && this.filled; + return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && this.filled; } get toggleAllAriaLabel() { @@ -1137,7 +1149,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, visibleOptions = computed(() => { const options = this.getAllVisibleAndNonVisibleOptions(); - const isArrayOfObjects = ObjectUtils.isArray(options) && ObjectUtils.isObject(options[0]); + const isArrayOfObjects = isArray(options) && isObject(options[0]); if (this._filterValue()) { let filteredOptions; @@ -1176,7 +1188,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, const modelValue = this.modelValue(); if (modelValue && modelValue.length && this.displaySelectedLabel) { - if (ObjectUtils.isNotEmpty(this.maxSelectedLabels) && modelValue.length > this.maxSelectedLabels) { + if (isNotEmpty(this.maxSelectedLabels) && modelValue.length > this.maxSelectedLabels) { return this.getSelectedItemsLabel(); } else { label = ''; @@ -1196,7 +1208,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, }); chipSelectedItems = computed(() => { - return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue(); + return isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue(); }); constructor( @@ -1210,7 +1222,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, const modelValue = this.modelValue(); const visibleOptions = this.visibleOptions(); - if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) { + if (visibleOptions && isNotEmpty(visibleOptions)) { if (this.optionValue && this.optionLabel && modelValue) { this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue])); } else { @@ -1223,7 +1235,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.autoUpdateModel(); if (this.filterBy) { @@ -1385,7 +1397,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, let value = null; if (selected) { - value = this.modelValue().filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey())); + value = this.modelValue().filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey())); } else { value = [...(this.modelValue() || []), this.getOptionValue(option)]; } @@ -1393,7 +1405,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, this.updateModel(value, originalEvent); index !== -1 && this.focusedOptionIndex.set(index); - isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement); + isFocus && focus(this.focusInputViewChild?.nativeElement); this.onChange.emit({ originalEvent: event, @@ -1443,7 +1455,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } findPrevSelectedOptionIndex(index) { - const matchedOptionIndex = this.hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidSelectedOption(option)) : -1; + const matchedOptionIndex = this.hasSelectedOption() && index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidSelectedOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : -1; } @@ -1478,7 +1490,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } hasSelectedOption() { - return ObjectUtils.isNotEmpty(this.modelValue()); + return isNotEmpty(this.modelValue()); } isValidSelectedOption(option) { @@ -1497,12 +1509,12 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, if (this.maxSelectionLimitReached() && !this.isSelected(option)) { return true; } - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false; } isSelected(option) { const optionValue = this.getOptionValue(option); - return (this.modelValue() || []).some((value) => ObjectUtils.equals(value, optionValue, this.equalityKey())); + return (this.modelValue() || []).some((value) => equals(value, optionValue, this.equalityKey())); } isOptionMatched(option) { @@ -1534,7 +1546,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, getLabelByValue(value) { const options = this.group ? this.flatOptions(this._options()) : this._options() || []; - const matchedOption = options.find((option) => !this.isOptionGroup(option) && ObjectUtils.equals(this.getOptionValue(option), value, this.equalityKey())); + const matchedOption = options.find((option) => !this.isOptionGroup(option) && equals(this.getOptionValue(option), value, this.equalityKey())); return matchedOption ? this.getOptionLabel(matchedOption) : null; } @@ -1550,19 +1562,19 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } getOptionLabel(option: any) { - return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label != undefined ? option.label : option; + return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option && option.label != undefined ? option.label : option; } getOptionValue(option: any) { - return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; + return this.optionValue ? resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; } getOptionGroupLabel(optionGroup: any) { - return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label != undefined ? optionGroup.label : optionGroup; + return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label != undefined ? optionGroup.label : optionGroup; } getOptionGroupChildren(optionGroup: any) { - return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; + return this.optionGroupChildren ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; } onKeyDown(event: KeyboardEvent) { @@ -1628,7 +1640,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, break; } - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { !this.overlayVisible && this.show(); this.searchOptions(event, event.key); event.preventDefault(); @@ -1807,7 +1819,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, onTabKey(event, pressedInInputText = false) { if (!pressedInInputText) { if (this.overlayVisible && this.hasFocusableElements()) { - DomHandler.focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); + focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); event.preventDefault(); } else { @@ -1849,11 +1861,9 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, onFirstHiddenFocus(event) { const focusableEl = - event.relatedTarget === this.focusInputViewChild?.nativeElement - ? DomHandler.getFirstFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') - : this.focusInputViewChild?.nativeElement; + event.relatedTarget === this.focusInputViewChild?.nativeElement ? getFirstFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInputViewChild?.nativeElement; - DomHandler.focus(focusableEl); + focus(focusableEl); } onInputFocus(event: Event) { @@ -1888,11 +1898,9 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, onLastHiddenFocus(event) { const focusableEl = - event.relatedTarget === this.focusInputViewChild?.nativeElement - ? DomHandler.getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') - : this.focusInputViewChild?.nativeElement; + event.relatedTarget === this.focusInputViewChild?.nativeElement ? getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInputViewChild?.nativeElement; - DomHandler.focus(focusableEl); + focus(focusableEl); } onOptionMouseEnter(event, index) { @@ -1945,7 +1953,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } else { // pre-selected disabled options should always be selected. const selectedDisabledOptions = this.getAllVisibleAndNonVisibleOptions().filter( - (option) => this.isSelected(option) && (this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false) + (option) => this.isSelected(option) && (this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false) ); const visibleOptions = this.allSelected() @@ -1972,7 +1980,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } this.onChange.emit({ originalEvent: event, value: this.value }); - DomHandler.focus(this.headerCheckboxViewChild?.nativeElement); + focus(this.headerCheckboxViewChild?.nativeElement); this.headerCheckboxFocus = true; event.preventDefault(); @@ -1993,7 +2001,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; if (this.itemsViewChild && this.itemsViewChild.nativeElement) { - const element = DomHandler.findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } else if (!this.virtualScrollerDisabled) { @@ -2028,7 +2036,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } allSelected() { - return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option)); + return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option)); } partialSelected() { @@ -2045,7 +2053,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, this.focusedOptionIndex.set(focusedOptionIndex); if (isFocus) { - DomHandler.focus(this.focusInputViewChild?.nativeElement); + focus(this.focusInputViewChild?.nativeElement); } this.cd.markForCheck(); @@ -2063,10 +2071,10 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, this.resetFilter(); } if (this.overlayOptions?.mode === 'modal') { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } - isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement); + isFocus && focus(this.focusInputViewChild?.nativeElement); this.onPanelHide.emit(); this.cd.markForCheck(); } @@ -2074,17 +2082,17 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, onOverlayAnimationStart(event: AnimationEvent) { switch (event.toState) { case 'visible': - this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-multiselect-items-wrapper'); + this.itemsWrapper = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-multiselect-items-wrapper'); this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement); if (this._options() && this._options().length) { if (this.virtualScroll) { - const selectedIndex = ObjectUtils.isNotEmpty(this.modelValue()) ? this.focusedOptionIndex() : -1; + const selectedIndex = isNotEmpty(this.modelValue()) ? this.focusedOptionIndex() : -1; if (selectedIndex !== -1) { this.scroller?.scrollToIndex(selectedIndex); } } else { - let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '[data-p-highlight="true"]'); + let selectedListItem = findSingle(this.itemsWrapper, '[data-p-highlight="true"]'); if (selectedListItem) { selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -2138,7 +2146,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } removeOption(optionValue, event) { - let value = this.modelValue().filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey())); + let value = this.modelValue().filter((val) => !equals(val, optionValue, this.equalityKey())); this.updateModel(value, event); this.onChange.emit({ @@ -2153,14 +2161,14 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, findNextItem(item: any): HTMLElement | null { let nextItem = item.nextElementSibling; - if (nextItem) return DomHandler.hasClass(nextItem.children[0], 'p-disabled') || DomHandler.isHidden(nextItem.children[0]) || DomHandler.hasClass(nextItem, 'p-multiselect-item-group') ? this.findNextItem(nextItem) : nextItem.children[0]; + if (nextItem) return hasClass(nextItem.children[0], 'p-disabled') || isHidden(nextItem.children[0]) || hasClass(nextItem, 'p-multiselect-item-group') ? this.findNextItem(nextItem) : nextItem.children[0]; else return null; } findPrevItem(item: any): HTMLElement | null { let prevItem = item.previousElementSibling; - if (prevItem) return DomHandler.hasClass(prevItem.children[0], 'p-disabled') || DomHandler.isHidden(prevItem.children[0]) || DomHandler.hasClass(prevItem, 'p-multiselect-item-group') ? this.findPrevItem(prevItem) : prevItem.children[0]; + if (prevItem) return hasClass(prevItem.children[0], 'p-disabled') || isHidden(prevItem.children[0]) || hasClass(prevItem, 'p-multiselect-item-group') ? this.findPrevItem(prevItem) : prevItem.children[0]; else return null; } @@ -2175,13 +2183,13 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } findPrevOptionIndex(index) { - const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; + const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : index; } findLastSelectedOptionIndex() { - return this.hasSelectedOption() ? ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidSelectedOption(option)) : -1; + return this.hasSelectedOption() ? findLastIndex(this.visibleOptions(), (option) => this.isValidSelectedOption(option)) : -1; } findLastFocusedOptionIndex() { @@ -2191,7 +2199,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } findLastOptionIndex() { - return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); + return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); } searchOptions(event, char) { @@ -2259,7 +2267,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit, } hasFocusableElements() { - return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; + return getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; } hasFilter() { diff --git a/packages/primeng/src/multiselect/style/multiselectstyle.ts b/packages/primeng/src/multiselect/style/multiselectstyle.ts index 1c96a9dffa0..ebdeb271b3b 100644 --- a/packages/primeng/src/multiselect/style/multiselectstyle.ts +++ b/packages/primeng/src/multiselect/style/multiselectstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-multiselect { diff --git a/packages/primeng/src/orderlist/orderlist.ts b/packages/primeng/src/orderlist/orderlist.ts index fc59b0d4484..4ca3df6d923 100755 --- a/packages/primeng/src/orderlist/orderlist.ts +++ b/packages/primeng/src/orderlist/orderlist.ts @@ -1,22 +1,16 @@ import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop'; import { CommonModule, isPlatformBrowser } from '@angular/common'; import { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api'; +import { FormsModule } from '@angular/forms'; +import { BaseComponent, FilterService, PrimeTemplate, SharedModule } from '@primeng/core'; +import { AngleDoubleDownIcon, AngleDoubleUpIcon, AngleDownIcon, AngleUpIcon, SearchIcon } from '@primeng/icons'; +import { find, findIndexInList, findSingle, hasClass, insertIntoOrderedArray, isHidden, scrollInView, setAttribute, uuid } from '@primeuix/utils'; import { ButtonDirective, ButtonProps } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { AngleDoubleDownIcon } from 'primeng/icons/angledoubledown'; -import { AngleDoubleUpIcon } from 'primeng/icons/angledoubleup'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleUpIcon } from 'primeng/icons/angleup'; -import { SearchIcon } from 'primeng/icons/search'; +import { Listbox } from 'primeng/listbox'; import { Ripple } from 'primeng/ripple'; import { Nullable } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { OrderListFilterEvent, OrderListFilterOptions, OrderListSelectionChangeEvent } from './orderlist.interface'; import { OrderListStyle } from './style/orderliststyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Listbox } from 'primeng/listbox'; -import { FormsModule } from '@angular/forms'; /** * OrderList is used to manage the order of a collection. @@ -433,7 +427,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { styleElement: any; - id: string = UniqueComponentId(); + id: string = uuid('pn_id_'); focused: boolean = false; @@ -534,7 +528,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { ngAfterViewChecked() { if (this.movedUp || this.movedDown) { - let listItems = DomHandler.find(this.listViewChild?.el.nativeElement, 'li.p-listbox-option-selected'); + let listItems = find(this.listViewChild?.el.nativeElement, 'li.p-listbox-option-selected'); let listItem; @@ -542,7 +536,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { if (this.movedUp) listItem = listItems[0]; else listItem = listItems[listItems.length - 1]; - DomHandler.scrollInView(this.listViewChild?.el.nativeElement, listItem); + scrollInView(this.listViewChild?.el.nativeElement, listItem); } this.movedUp = false; this.movedDown = false; @@ -551,8 +545,8 @@ export class OrderList extends BaseComponent implements AfterContentInit { onItemClick(event, item: any, index?: number, selectedId?: string) { this.itemTouched = false; - let focusedIndex = index ? index : ObjectUtils.findIndexInList(this.focusedOption, this.value); - let selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection); + let focusedIndex = index ? index : findIndexInList(this.focusedOption, this.value); + let selectedIndex = findIndexInList(item, this.d_selection); let selected = selectedIndex !== -1; let metaSelection = this.itemTouched ? false : this.metaKeySelection; @@ -567,14 +561,14 @@ export class OrderList extends BaseComponent implements AfterContentInit { this.d_selection = this.d_selection.filter((val, focusedIndex) => focusedIndex !== selectedIndex); } else { this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : []; - ObjectUtils.insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value); + insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value); } } else { if (selected) { this.d_selection = this.d_selection.filter((val, focusedIndex) => focusedIndex !== selectedIndex); } else { this.d_selection = this.d_selection ? [...this.d_selection] : []; - ObjectUtils.insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value); + insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value); } } @@ -626,7 +620,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { } isSelected(item: any) { - return ObjectUtils.findIndexInList(item, this.d_selection) !== -1; + return findIndexInList(item, this.d_selection) !== -1; } isEmpty() { @@ -637,7 +631,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { if (this.selection) { for (let i = 0; i < this.selection.length; i++) { let selectedItem = this.selection[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, this.value); + let selectedItemIndex: number = findIndexInList(selectedItem, this.value); if (selectedItemIndex != 0 && this.value instanceof Array) { let movedItem = this.value[selectedItemIndex]; @@ -661,7 +655,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { if (this.selection) { for (let i = this.selection.length - 1; i >= 0; i--) { let selectedItem = this.selection[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, this.value); + let selectedItemIndex: number = findIndexInList(selectedItem, this.value); if (selectedItemIndex != 0 && this.value instanceof Array) { let movedItem = this.value.splice(selectedItemIndex, 1)[0]; @@ -685,7 +679,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { if (this.selection) { for (let i = this.selection.length - 1; i >= 0; i--) { let selectedItem = this.selection[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, this.value); + let selectedItemIndex: number = findIndexInList(selectedItem, this.value); if (this.value instanceof Array && selectedItemIndex != this.value.length - 1) { let movedItem = this.value[selectedItemIndex]; @@ -710,7 +704,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { if (this.selection) { for (let i = 0; i < this.selection.length; i++) { let selectedItem = this.selection[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, this.value); + let selectedItemIndex: number = findIndexInList(selectedItem, this.value); if (this.value instanceof Array && selectedItemIndex != this.value.length - 1) { let movedItem = this.value.splice(selectedItemIndex, 1)[0]; @@ -735,8 +729,8 @@ export class OrderList extends BaseComponent implements AfterContentInit { if (previousIndex !== currentIndex) { if (this.visibleOptions) { if (this.filterValue) { - previousIndex = ObjectUtils.findIndexInList(event.item.data, this.value); - currentIndex = ObjectUtils.findIndexInList(this.visibleOptions[currentIndex], this.value); + previousIndex = findIndexInList(event.item.data, this.value); + currentIndex = findIndexInList(this.visibleOptions[currentIndex], this.value); } moveItemInArray(this.visibleOptions, event.previousIndex, event.currentIndex); @@ -749,10 +743,10 @@ export class OrderList extends BaseComponent implements AfterContentInit { } onListFocus(event) { - const focusableEl = DomHandler.findSingle(this.listViewChild.el.nativeElement, '[data-p-highlight="true"]') || DomHandler.findSingle(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); + const focusableEl = findSingle(this.listViewChild.el.nativeElement, '[data-p-highlight="true"]') || findSingle(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); if (focusableEl) { - const findIndex = ObjectUtils.findIndexInList(focusableEl, this.listViewChild.el.nativeElement.children); + const findIndex = findIndexInList(focusableEl, this.listViewChild.el.nativeElement.children); this.focused = true; const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : focusableEl ? findIndex : -1; @@ -830,7 +824,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { onHomeKey(event) { if (event.ctrlKey && event.shiftKey) { let visibleOptions = this.getVisibleOptions(); - let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleOptions); + let focusedIndex = findIndexInList(this.focusedOption, visibleOptions); this.d_selection = [...this.value].slice(0, focusedIndex + 1); this.selectionChange.emit(this.d_selection); } else { @@ -843,11 +837,11 @@ export class OrderList extends BaseComponent implements AfterContentInit { onEndKey(event) { if (event.ctrlKey && event.shiftKey) { let visibleOptions = this.getVisibleOptions(); - let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleOptions); + let focusedIndex = findIndexInList(this.focusedOption, visibleOptions); this.d_selection = [...this.value].slice(focusedIndex, visibleOptions.length - 1); this.selectionChange.emit(this.d_selection); } else { - this.changeFocusedOptionIndex(DomHandler.find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]').length - 1); + this.changeFocusedOptionIndex(find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]').length - 1); } event.preventDefault(); @@ -867,7 +861,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { let lastSelectedIndex = this.getLatestSelectedVisibleOptionIndex(visibleOptions); if (lastSelectedIndex !== -1) { - let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleOptions); + let focusedIndex = findIndexInList(this.focusedOption, visibleOptions); this.d_selection = [...visibleOptions.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)]; this.selectionChange.emit(this.d_selection); this.onSelectionChange.emit({ originalEvent: event, value: this.d_selection }); @@ -880,14 +874,14 @@ export class OrderList extends BaseComponent implements AfterContentInit { } findNextOptionIndex(index) { - const items = DomHandler.find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); + const items = find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); const matchedOptionIndex = [...items].findIndex((link) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; } findPrevOptionIndex(index) { - const items = DomHandler.find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); + const items = find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); const matchedOptionIndex = [...items].findIndex((link) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; @@ -910,7 +904,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { } changeFocusedOptionIndex(index) { - const items = DomHandler.find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); + const items = find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]'); let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index; @@ -921,7 +915,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { } scrollInView(id) { - const element = DomHandler.findSingle(this.listViewChild.el.nativeElement, `[data-pc-section="item"][id="${id}"]`); + const element = findSingle(this.listViewChild.el.nativeElement, `[data-pc-section="item"][id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -931,14 +925,14 @@ export class OrderList extends BaseComponent implements AfterContentInit { findNextItem(item: any): HTMLElement | null { let nextItem = item.nextElementSibling; - if (nextItem) return !DomHandler.hasClass(nextItem, 'p-orderlist-item') || DomHandler.isHidden(nextItem) ? this.findNextItem(nextItem) : nextItem; + if (nextItem) return !hasClass(nextItem, 'p-orderlist-item') || isHidden(nextItem) ? this.findNextItem(nextItem) : nextItem; else return null; } findPrevItem(item: any): HTMLElement | null { let prevItem = item.previousElementSibling; - if (prevItem) return !DomHandler.hasClass(prevItem, 'p-orderlist-item') || DomHandler.isHidden(prevItem) ? this.findPrevItem(prevItem) : prevItem; + if (prevItem) return !hasClass(prevItem, 'p-orderlist-item') || isHidden(prevItem) ? this.findPrevItem(prevItem) : prevItem; else return null; } @@ -982,7 +976,7 @@ export class OrderList extends BaseComponent implements AfterContentInit { } `; this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } } } diff --git a/packages/primeng/src/orderlist/style/orderliststyle.ts b/packages/primeng/src/orderlist/style/orderliststyle.ts index 1aab5540f05..3b6fe42a1b2 100644 --- a/packages/primeng/src/orderlist/style/orderliststyle.ts +++ b/packages/primeng/src/orderlist/style/orderliststyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-orderlist { diff --git a/packages/primeng/src/organizationchart/organizationchart.spec.ts b/packages/primeng/src/organizationchart/organizationchart.spec.ts index 253547cd581..ea94458b973 100755 --- a/packages/primeng/src/organizationchart/organizationchart.spec.ts +++ b/packages/primeng/src/organizationchart/organizationchart.spec.ts @@ -1,9 +1,8 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { OrganizationChart, OrganizationChartNode } from './organizationchart'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; +import { ChevronDownIcon, ChevronUpIcon } from '@primeng/icons'; +import { OrganizationChart, OrganizationChartNode } from './organizationchart'; describe('OrganizationChart', () => { let organizationchart: OrganizationChart; diff --git a/packages/primeng/src/organizationchart/organizationchart.ts b/packages/primeng/src/organizationchart/organizationchart.ts index b13283737be..a74565593c1 100755 --- a/packages/primeng/src/organizationchart/organizationchart.ts +++ b/packages/primeng/src/organizationchart/organizationchart.ts @@ -19,15 +19,14 @@ import { TemplateRef, ViewEncapsulation } from '@angular/core'; -import { PrimeTemplate, SharedModule, TreeNode } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; +import { BaseComponent, PrimeTemplate, SharedModule } from '@primeng/core'; +import { ChevronDownIcon, ChevronUpIcon } from '@primeng/icons'; +import { hasClass } from '@primeuix/utils'; +import { TreeNode } from 'primeng/api'; import { Nullable } from 'primeng/ts-helpers'; import { Subject, Subscription } from 'rxjs'; import { OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, OrganizationChartNodeSelectEvent, OrganizationChartNodeUnSelectEvent } from './organizationchart.interface'; import { OrganizationChartStyle } from './style/organizationchartstyle'; -import { BaseComponent } from 'primeng/basecomponent'; @Component({ selector: '[pOrganizationChartNode]', @@ -304,7 +303,7 @@ export class OrganizationChart extends BaseComponent implements AfterContentInit onNodeClick(event: Event, node: TreeNode) { let eventTarget = event.target; - if (eventTarget.className && (DomHandler.hasClass(eventTarget, 'p-organizationchart-node-toggle-button') || DomHandler.hasClass(eventTarget, 'p-organizationchart-node-toggle-button-icon'))) { + if (eventTarget.className && (hasClass(eventTarget, 'p-organizationchart-node-toggle-button') || hasClass(eventTarget, 'p-organizationchart-node-toggle-button-icon'))) { return; } else if (this.selectionMode) { if (node.selectable === false) { diff --git a/packages/primeng/src/organizationchart/style/organizationchartstyle.ts b/packages/primeng/src/organizationchart/style/organizationchartstyle.ts index 8993afcd450..33a935d1731 100644 --- a/packages/primeng/src/organizationchart/style/organizationchartstyle.ts +++ b/packages/primeng/src/organizationchart/style/organizationchartstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-organizationchart-table { diff --git a/packages/primeng/src/overlay/overlay.ts b/packages/primeng/src/overlay/overlay.ts index a19ac0109e7..30ada9447bf 100644 --- a/packages/primeng/src/overlay/overlay.ts +++ b/packages/primeng/src/overlay/overlay.ts @@ -1,11 +1,11 @@ import { animate, animation, AnimationEvent, style, transition, trigger, useAnimation } from '@angular/animations'; import { CommonModule, isPlatformBrowser } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, NgZone, OnDestroy, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { OverlayModeType, OverlayOnBeforeHideEvent, OverlayOnBeforeShowEvent, OverlayOnHideEvent, OverlayOnShowEvent, OverlayOptions, OverlayService, ResponsiveOverlayOptions, SharedModule } from 'primeng/api'; +import { BaseComponent, OverlayModeType, OverlayOnBeforeHideEvent, OverlayOnBeforeShowEvent, OverlayOnHideEvent, OverlayOnShowEvent, OverlayOptions, OverlayService, ResponsiveOverlayOptions, SharedModule } from '@primeng/core'; +import { addClass, focus, getTargetElement, isTouchDevice, removeClass } from '@primeuix/utils'; import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; -import { ObjectUtils, ZIndexUtils } from 'primeng/utils'; import { VoidListener } from 'primeng/ts-helpers'; -import { BaseComponent } from 'primeng/basecomponent'; +import { ObjectUtils, ZIndexUtils } from 'primeng/utils'; import { OverlayStyle } from './style/overlaystyle'; const showOverlayContentAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{showTransitionParams}}')]); @@ -395,7 +395,7 @@ export class Overlay extends BaseComponent implements OnDestroy { } get targetEl() { - return DomHandler.getTargetElement(this.target, this.el?.nativeElement); + return getTargetElement(this.target, this.el?.nativeElement); } constructor( @@ -409,8 +409,8 @@ export class Overlay extends BaseComponent implements OnDestroy { this.onVisibleChange(true); this.handleEvents('onShow', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode }); - isFocus && DomHandler.focus(this.targetEl); - this.modal && DomHandler.addClass(this.document?.body, 'p-overflow-hidden'); + isFocus && focus(this.targetEl); + this.modal && addClass(this.document?.body, 'p-overflow-hidden'); } hide(overlay?: HTMLElement, isFocus: boolean = false) { @@ -419,8 +419,8 @@ export class Overlay extends BaseComponent implements OnDestroy { } else { this.onVisibleChange(false); this.handleEvents('onHide', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode }); - isFocus && DomHandler.focus(this.targetEl); - this.modal && DomHandler.removeClass(this.document?.body, 'p-overflow-hidden'); + isFocus && focus(this.targetEl as any); + this.modal && removeClass(this.document?.body, 'p-overflow-hidden'); } } @@ -462,7 +462,7 @@ export class Overlay extends BaseComponent implements OnDestroy { case 'void': this.handleEvents('onBeforeHide', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode }); - this.modal && DomHandler.addClass(this.overlayEl, 'p-overlay-mask-leave'); + this.modal && addClass(this.overlayEl, 'p-overlay-mask-leave'); break; } @@ -536,7 +536,7 @@ export class Overlay extends BaseComponent implements OnDestroy { bindDocumentClickListener() { if (!this.documentClickListener) { this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => { - const isTargetClicked = this.targetEl && (this.targetEl.isSameNode(event.target) || (!this.isOverlayClicked && this.targetEl.contains(event.target))); + const isTargetClicked = this.targetEl && ((this.targetEl as any).isSameNode(event.target) || (!this.isOverlayClicked && (this.targetEl as any).contains(event.target))); const isOutsideClicked = !isTargetClicked && !this.isOverlayContentClicked; const valid = this.listener ? this.listener(event, { type: 'outside', mode: this.overlayMode, valid: event.which !== 3 && isOutsideClicked }) : isOutsideClicked; @@ -556,7 +556,7 @@ export class Overlay extends BaseComponent implements OnDestroy { bindDocumentResizeListener() { if (!this.documentResizeListener) { this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => { - const valid = this.listener ? this.listener(event, { type: 'resize', mode: this.overlayMode, valid: !DomHandler.isTouchDevice() }) : !DomHandler.isTouchDevice(); + const valid = this.listener ? this.listener(event, { type: 'resize', mode: this.overlayMode, valid: !isTouchDevice() }) : !isTouchDevice(); valid && this.hide(event, true); }); @@ -581,7 +581,7 @@ export class Overlay extends BaseComponent implements OnDestroy { return; } - const valid = this.listener ? this.listener(event, { type: 'keydown', mode: this.overlayMode, valid: !DomHandler.isTouchDevice() }) : !DomHandler.isTouchDevice(); + const valid = this.listener ? this.listener(event, { type: 'keydown', mode: this.overlayMode, valid: !isTouchDevice() }) : !isTouchDevice(); if (valid) { this.zone.run(() => { diff --git a/packages/primeng/src/overlay/style/overlaystyle.ts b/packages/primeng/src/overlay/style/overlaystyle.ts index 7119defd6b8..7767780e207 100644 --- a/packages/primeng/src/overlay/style/overlaystyle.ts +++ b/packages/primeng/src/overlay/style/overlaystyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-overlay { diff --git a/packages/primeng/src/overlaybadge/overlaybadge.ts b/packages/primeng/src/overlaybadge/overlaybadge.ts index 80e0d9c841f..76772c218b9 100755 --- a/packages/primeng/src/overlaybadge/overlaybadge.ts +++ b/packages/primeng/src/overlaybadge/overlaybadge.ts @@ -1,9 +1,8 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { OverlayBadgeStyle } from './style/overlaybadgestyle'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { BadgeModule } from 'primeng/badge'; +import { OverlayBadgeStyle } from './style/overlaybadgestyle'; /** * OverlayPanel is a container component positioned as connected to its target. diff --git a/packages/primeng/src/overlaybadge/style/overlaybadgestyle.ts b/packages/primeng/src/overlaybadge/style/overlaybadgestyle.ts index 5285d759ee3..455cac81c64 100644 --- a/packages/primeng/src/overlaybadge/style/overlaybadgestyle.ts +++ b/packages/primeng/src/overlaybadge/style/overlaybadgestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-overlaybadge { diff --git a/packages/primeng/src/overlaypanel/overlaypanel.ts b/packages/primeng/src/overlaypanel/overlaypanel.ts index 3e5539f1325..c419eb94395 100755 --- a/packages/primeng/src/overlaypanel/overlaypanel.ts +++ b/packages/primeng/src/overlaypanel/overlaypanel.ts @@ -19,15 +19,15 @@ import { ViewEncapsulation, ViewRef } from '@angular/core'; -import { OverlayService, SharedModule } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; -import { TimesIcon } from 'primeng/icons/times'; +import { BaseComponent, OverlayService, SharedModule } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; +import { absolutePosition, addClass, appendChild, findSingle, getOffset, isIOS, isTouchDevice } from '@primeuix/utils'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Ripple } from 'primeng/ripple'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; import { PopoverStyle } from './style/popoverstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * OverlayPanel is a container component positioned as connected to its target. @@ -230,7 +230,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD bindDocumentClickListener() { if (isPlatformBrowser(this.platformId)) { if (!this.documentClickListener && this.dismissable) { - let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click'; + let documentEvent = isIOS() ? 'touchstart' : 'click'; const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : this.document; this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => { @@ -315,7 +315,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); - else DomHandler.appendChild(this.container, this.appendTo); + else appendChild(this.container, this.appendTo); } } @@ -330,10 +330,10 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay); } - DomHandler.absolutePosition(this.container, this.target, false); + absolutePosition(this.container, this.target, false); - const containerOffset = DomHandler.getOffset(this.container); - const targetOffset = DomHandler.getOffset(this.target); + const containerOffset = getOffset(this.container); + const targetOffset = getOffset(this.target); const borderRadius = this.document.defaultView?.getComputedStyle(this.container!).getPropertyValue('border-radius'); let arrowLeft = 0; @@ -343,7 +343,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD this.container?.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`); if (containerOffset.top < targetOffset.top) { - DomHandler.addClass(this.container, 'p-popover-flipped'); + addClass(this.container, 'p-popover-flipped'); if (this.showCloseIcon) { this.renderer.setStyle(this.container, 'margin-top', '-30px'); @@ -409,7 +409,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD } focus() { - let focusable = DomHandler.findSingle(this.container, '[autofocus]'); + let focusable = findSingle(this.container, '[autofocus]'); if (focusable) { this.zone.runOutsideAngular(() => { setTimeout(() => focusable.focus(), 5); @@ -436,7 +436,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD } onWindowResize() { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.hide(); } } diff --git a/packages/primeng/src/overlaypanel/style/popoverstyle.ts b/packages/primeng/src/overlaypanel/style/popoverstyle.ts index 339596f8784..ff5557e27d4 100644 --- a/packages/primeng/src/overlaypanel/style/popoverstyle.ts +++ b/packages/primeng/src/overlaypanel/style/popoverstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-popover { diff --git a/packages/primeng/src/paginator/paginator.ts b/packages/primeng/src/paginator/paginator.ts index 5962aa6d3a0..525c62e0896 100755 --- a/packages/primeng/src/paginator/paginator.ts +++ b/packages/primeng/src/paginator/paginator.ts @@ -1,19 +1,16 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { Aria, SelectItem, SharedModule } from 'primeng/api'; +import { Aria, BaseComponent, SharedModule } from '@primeng/core'; +import { AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon } from '@primeng/icons'; +import { SelectItem } from 'primeng/api'; import { DropdownChangeEvent } from 'primeng/dropdown'; -import { AngleDoubleLeftIcon } from 'primeng/icons/angledoubleleft'; -import { AngleDoubleRightIcon } from 'primeng/icons/angledoubleright'; -import { AngleLeftIcon } from 'primeng/icons/angleleft'; -import { AngleRightIcon } from 'primeng/icons/angleright'; import { InputNumber } from 'primeng/inputnumber'; import { Ripple } from 'primeng/ripple'; +import { Select } from 'primeng/select'; import { Nullable } from 'primeng/ts-helpers'; import { PaginatorState } from './paginator.interface'; import { PaginatorStyle } from './style/paginatorstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Select } from 'primeng/select'; /** * Paginator is a generic component to display content in paged format. diff --git a/packages/primeng/src/paginator/style/paginatorstyle.ts b/packages/primeng/src/paginator/style/paginatorstyle.ts index 27c341ed162..824b8f70c2b 100644 --- a/packages/primeng/src/paginator/style/paginatorstyle.ts +++ b/packages/primeng/src/paginator/style/paginatorstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-paginator { diff --git a/packages/primeng/src/panel/panel.spec.ts b/packages/primeng/src/panel/panel.spec.ts index 951090a5b5c..fa80ef5bb4c 100755 --- a/packages/primeng/src/panel/panel.spec.ts +++ b/packages/primeng/src/panel/panel.spec.ts @@ -1,9 +1,8 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MinusIcon, PlusIcon } from '@primeng/icons'; import { Panel } from './panel'; -import { PlusIcon } from 'primeng/icons/plus'; -import { MinusIcon } from 'primeng/icons/minus'; describe('Panel', () => { let panel: Panel; diff --git a/packages/primeng/src/panel/panel.ts b/packages/primeng/src/panel/panel.ts index 2fa22cece9e..1d39a0fda3b 100755 --- a/packages/primeng/src/panel/panel.ts +++ b/packages/primeng/src/panel/panel.ts @@ -1,15 +1,14 @@ import { animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, Footer, SharedModule } from 'primeng/api'; -import { MinusIcon } from 'primeng/icons/minus'; -import { PlusIcon } from 'primeng/icons/plus'; +import { BaseComponent, Footer, SharedModule } from '@primeng/core'; +import { MinusIcon, PlusIcon } from '@primeng/icons'; +import { uuid } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; import { Ripple } from 'primeng/ripple'; import { Nullable } from 'primeng/ts-helpers'; -import { UniqueComponentId } from 'primeng/utils'; -import { ButtonModule } from 'primeng/button'; import { PanelStyle } from './style/panelstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Custom panel toggle event, emits before panel toggle. @@ -338,7 +337,7 @@ export class Panel extends BaseComponent implements BlockableUI { }); } - readonly id = UniqueComponentId(); + readonly id = uuid('pn_id_'); get buttonAriaLabel() { return this.header; diff --git a/packages/primeng/src/panel/style/panelstyle.ts b/packages/primeng/src/panel/style/panelstyle.ts index 85872e840d1..3e44b488131 100644 --- a/packages/primeng/src/panel/style/panelstyle.ts +++ b/packages/primeng/src/panel/style/panelstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-panel { diff --git a/packages/primeng/src/panelmenu/panelmenu.ts b/packages/primeng/src/panelmenu/panelmenu.ts index 9887627de35..2aac48c0c8f 100644 --- a/packages/primeng/src/panelmenu/panelmenu.ts +++ b/packages/primeng/src/panelmenu/panelmenu.ts @@ -23,16 +23,12 @@ import { ViewEncapsulation } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MenuItem, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleRightIcon } from 'primeng/icons/angleright'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon } from '@primeng/icons'; +import { equals, findLast, findSingle, focus, getAttribute, isEmpty, isNotEmpty, isPrintableCharacter, resolve, uuid } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; import { TooltipModule } from 'primeng/tooltip'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { PanelMenuStyle } from './style/panelmenustyle'; -import { BaseComponent } from 'primeng/basecomponent'; @Component({ selector: 'p-panelMenuSub, p-panelmenu-sub', @@ -219,7 +215,7 @@ export class PanelMenuSub extends BaseComponent { } getItemProp(processedItem, name?, params?) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined; } getItemLabel(processedItem) { @@ -247,7 +243,7 @@ export class PanelMenuSub extends BaseComponent { } isItemGroup(processedItem) { - return ObjectUtils.isNotEmpty(processedItem.items); + return isNotEmpty(processedItem.items); } getAnimation(processedItem) { @@ -346,7 +342,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { get focusedItemId() { const focusedItem = this.focusedItem(); - return focusedItem && focusedItem.item?.id ? focusedItem.item.id : ObjectUtils.isNotEmpty(this.focusedItem()) ? `${this.panelId}_${this.focusedItem().key}` : undefined; + return focusedItem && focusedItem.item?.id ? focusedItem.item.id : isNotEmpty(this.focusedItem()) ? `${this.panelId}_${this.focusedItem().key}` : undefined; } ngOnChanges(changes: SimpleChanges) { @@ -354,7 +350,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } getItemProp(processedItem, name) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined; } getItemLabel(processedItem) { @@ -374,7 +370,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } isItemGroup(processedItem) { - return ObjectUtils.isNotEmpty(processedItem.items); + return isNotEmpty(processedItem.items); } isElementInPanel(event, element) { @@ -400,7 +396,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } findLastItem() { - return ObjectUtils.findLast(this.visibleItems(), (processedItem) => this.isValidItem(processedItem)); + return findLast(this.visibleItems(), (processedItem) => this.isValidItem(processedItem)); } findItemByEventTarget(target: EventTarget): undefined | any { @@ -464,7 +460,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { changeFocusedItem(event) { const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event; - if (ObjectUtils.isNotEmpty(this.focusedItem()) && this.focusedItem().key !== processedItem.key) { + if (isNotEmpty(this.focusedItem()) && this.focusedItem().key !== processedItem.key) { this.focusedItem.set(processedItem); this.scrollInView(); } else if (allowHeaderFocus) { @@ -473,7 +469,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } scrollInView() { - const element = DomHandler.findSingle(this.subMenuViewChild.listViewChild.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const element = findSingle(this.subMenuViewChild.listViewChild.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -567,7 +563,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { break; default: - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } @@ -576,26 +572,26 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } onArrowDownKey(event) { - const processedItem = ObjectUtils.isNotEmpty(this.focusedItem()) ? this.findNextItem(this.focusedItem()) : this.findFirstItem(); + const processedItem = isNotEmpty(this.focusedItem()) ? this.findNextItem(this.focusedItem()) : this.findFirstItem(); this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true }); event.preventDefault(); } onArrowUpKey(event) { - const processedItem = ObjectUtils.isNotEmpty(this.focusedItem()) ? this.findPrevItem(this.focusedItem()) : this.findLastItem(); + const processedItem = isNotEmpty(this.focusedItem()) ? this.findPrevItem(this.focusedItem()) : this.findLastItem(); this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true }); event.preventDefault(); } onArrowLeftKey(event) { - if (ObjectUtils.isNotEmpty(this.focusedItem())) { + if (isNotEmpty(this.focusedItem())) { const matched = this.activeItemPath().some((p) => p.key === this.focusedItem().key); if (matched) { const activeItemPath = this.activeItemPath().filter((p) => p.key !== this.focusedItem().key); this.activeItemPath.set(activeItemPath); } else { - const focusedItem = ObjectUtils.isNotEmpty(this.focusedItem().parent) ? this.focusedItem().parent : this.focusedItem(); + const focusedItem = isNotEmpty(this.focusedItem().parent) ? this.focusedItem().parent : this.focusedItem(); this.focusedItem.set(focusedItem); } @@ -604,7 +600,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } onArrowRightKey(event) { - if (ObjectUtils.isNotEmpty(this.focusedItem())) { + if (isNotEmpty(this.focusedItem())) { const grouped = this.isItemGroup(this.focusedItem()); if (grouped) { @@ -635,9 +631,9 @@ export class PanelMenuList extends BaseComponent implements OnChanges { } onEnterKey(event) { - if (ObjectUtils.isNotEmpty(this.focusedItem())) { - const element = DomHandler.findSingle(this.subMenuViewChild.listViewChild.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); - const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button')); + if (isNotEmpty(this.focusedItem())) { + const element = findSingle(this.subMenuViewChild.listViewChild.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const anchorElement = element && (findSingle(element, '[data-pc-section="action"]') || findSingle(element, 'a,button')); anchorElement ? anchorElement.click() : element && element.click(); } @@ -663,7 +659,7 @@ export class PanelMenuList extends BaseComponent implements OnChanges { findPrevItem(processedItem) { const index = this.visibleItems().findIndex((item) => item.key === processedItem.key); - const matchedItem = index > 0 ? ObjectUtils.findLast(this.visibleItems().slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined; + const matchedItem = index > 0 ? findLast(this.visibleItems().slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined; return matchedItem || processedItem; } @@ -674,13 +670,13 @@ export class PanelMenuList extends BaseComponent implements OnChanges { let matchedItem = null; let matched = false; - if (ObjectUtils.isNotEmpty(this.focusedItem())) { + if (isNotEmpty(this.focusedItem())) { const focusedItemIndex = this.visibleItems().findIndex((processedItem) => processedItem.key === this.focusedItem().key); matchedItem = this.visibleItems() .slice(focusedItemIndex) .find((processedItem) => this.isItemMatched(processedItem)); - matchedItem = ObjectUtils.isEmpty(matchedItem) + matchedItem = isEmpty(matchedItem) ? this.visibleItems() .slice(0, focusedItemIndex) .find((processedItem) => this.isItemMatched(processedItem)) @@ -689,15 +685,15 @@ export class PanelMenuList extends BaseComponent implements OnChanges { matchedItem = this.visibleItems().find((processedItem) => this.isItemMatched(processedItem)); } - if (ObjectUtils.isNotEmpty(matchedItem)) { + if (isNotEmpty(matchedItem)) { matched = true; } - if (ObjectUtils.isEmpty(matchedItem) && ObjectUtils.isEmpty(this.focusedItem())) { + if (isEmpty(matchedItem) && isEmpty(this.focusedItem())) { matchedItem = this.findFirstItem(); } - if (ObjectUtils.isNotEmpty(matchedItem)) { + if (isNotEmpty(matchedItem)) { this.changeFocusedItem({ originalEvent: event, processedItem: matchedItem, @@ -917,7 +913,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } ngAfterContentInit() { @@ -959,7 +955,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { changeActiveItem(event, item, index?: number, selfActive = false) { if (!this.isItemDisabled(item)) { - const activeItem = selfActive ? item : this.activeItem && ObjectUtils.equals(item, this.activeItem) ? null : item; + const activeItem = selfActive ? item : this.activeItem && equals(item, this.activeItem) ? null : item; this.activeItem.set(activeItem); } } @@ -969,7 +965,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { } getItemProp(item, name) { - return item ? ObjectUtils.getItemValue(item[name]) : undefined; + return item ? resolve(item[name]) : undefined; } getItemLabel(item) { @@ -989,7 +985,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { } isItemGroup(item) { - return ObjectUtils.isNotEmpty(item.items); + return isNotEmpty(item.items); } getPanelId(index, item?) { @@ -1007,27 +1003,27 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { updateFocusedHeader(event) { const { originalEvent, focusOnNext, selfCheck } = event; const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]'); - const header = selfCheck ? DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement); + const header = selfCheck ? findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement); header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent); } changeFocusedHeader(event, element) { - element && DomHandler.focus(element); + element && focus(element); } findNextHeader(panelElement, selfCheck = false) { const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling; - const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]'); + const headerElement = findSingle(nextPanelElement, '[data-pc-section="header"]'); - return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null; + return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null; } findPrevHeader(panelElement, selfCheck = false) { const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling; - const headerElement = DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]'); + const headerElement = findSingle(prevPanelElement, '[data-pc-section="header"]'); - return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null; + return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null; } findFirstHeader() { @@ -1060,7 +1056,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { item.expanded = !item.expanded; this.changeActiveItem(event, item, index); this.animating = true; - DomHandler.focus(event.currentTarget as HTMLElement); + focus(event.currentTarget as HTMLElement); } onHeaderKeyDown(event, item, index) { @@ -1092,17 +1088,17 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { } onHeaderArrowDownKey(event) { - const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null; + const rootList = getAttribute(event.currentTarget, 'data-p-highlight') === true ? findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null; - rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true }); + rootList ? focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true }); event.preventDefault(); } onHeaderArrowUpKey(event) { const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader(); - const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null; + const rootList = getAttribute(prevHeader, 'data-p-highlight') === true ? findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null; - rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false }); + rootList ? focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false }); event.preventDefault(); } @@ -1117,7 +1113,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit { } onHeaderEnterKey(event, item, index) { - const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]'); + const headerAction = findSingle(event.currentTarget, '[data-pc-section="headeraction"]'); headerAction ? headerAction.click() : this.onHeaderClick(event, item, index); event.preventDefault(); diff --git a/packages/primeng/src/panelmenu/style/panelmenustyle.ts b/packages/primeng/src/panelmenu/style/panelmenustyle.ts index 0c6914826ca..32ccf6b52cd 100644 --- a/packages/primeng/src/panelmenu/style/panelmenustyle.ts +++ b/packages/primeng/src/panelmenu/style/panelmenustyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-panelmenu { diff --git a/packages/primeng/src/password/password.ts b/packages/primeng/src/password/password.ts index c4fa79b9b29..45316f7e4c6 100644 --- a/packages/primeng/src/password/password.ts +++ b/packages/primeng/src/password/password.ts @@ -26,17 +26,15 @@ import { ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OverlayService, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, OverlayService, SharedModule, TranslationKeys } from '@primeng/core'; +import { EyeIcon, EyeSlashIcon, TimesIcon } from '@primeng/icons'; +import { absolutePosition, addClass, getOuterWidth, hasClass, isTouchDevice, relativePosition, removeClass } from '@primeuix/utils'; +import { AutoFocus } from 'primeng/autofocus'; import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; -import { EyeIcon } from 'primeng/icons/eye'; -import { EyeSlashIcon } from 'primeng/icons/eyeslash'; -import { TimesIcon } from 'primeng/icons/times'; import { InputText } from 'primeng/inputtext'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; -import { AutoFocus } from 'primeng/autofocus'; import { Subscription } from 'rxjs'; -import { BaseComponent } from 'primeng/basecomponent'; import { PasswordStyle } from './style/passwordstyle'; type Meter = { @@ -181,19 +179,19 @@ export class PasswordDirective extends BaseComponent implements OnDestroy, DoChe this.renderer.setStyle(this.panel, 'display', 'block'); this.zone.runOutsideAngular(() => { setTimeout(() => { - DomHandler.addClass(this.panel, 'p-connected-overlay-visible'); + addClass(this.panel, 'p-connected-overlay-visible'); this.bindScrollListener(); this.bindDocumentResizeListener(); }, 1); }); - DomHandler.absolutePosition(this.panel, this.el.nativeElement); + absolutePosition(this.panel, this.el.nativeElement); } } hideOverlay() { if (this.feedback && this.panel) { - DomHandler.addClass(this.panel, 'p-connected-overlay-hidden'); - DomHandler.removeClass(this.panel, 'p-connected-overlay-visible'); + addClass(this.panel, 'p-connected-overlay-hidden'); + removeClass(this.panel, 'p-connected-overlay-visible'); this.unbindScrollListener(); this.unbindDocumentResizeListener(); @@ -240,7 +238,7 @@ export class PasswordDirective extends BaseComponent implements OnDestroy, DoChe } } - if (!this.panel || !DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) { + if (!this.panel || !hasClass(this.panel, 'p-connected-overlay-visible')) { this.showOverlay(); } @@ -284,7 +282,7 @@ export class PasswordDirective extends BaseComponent implements OnDestroy, DoChe bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => { - if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) { + if (hasClass(this.panel, 'p-connected-overlay-visible')) { this.hideOverlay(); } }); @@ -316,7 +314,7 @@ export class PasswordDirective extends BaseComponent implements OnDestroy, DoChe } onWindowResize() { - if (!DomHandler.isTouchDevice()) { + if (!isTouchDevice()) { this.hideOverlay(); } } @@ -706,10 +704,10 @@ export class Password extends BaseComponent implements OnInit { alignOverlay() { if (this.appendTo) { - (this.overlay as HTMLElement).style.minWidth = DomHandler.getOuterWidth(this.input.nativeElement) + 'px'; - DomHandler.absolutePosition(this.overlay, this.input.nativeElement); + (this.overlay as HTMLElement).style.minWidth = getOuterWidth(this.input.nativeElement) + 'px'; + absolutePosition(this.overlay as any, this.input.nativeElement); } else { - DomHandler.relativePosition(this.overlay, this.input.nativeElement); + relativePosition(this.overlay as any, this.input.nativeElement); } } @@ -855,7 +853,7 @@ export class Password extends BaseComponent implements OnInit { if (!this.resizeListener) { const window = this.document.defaultView as Window; this.resizeListener = this.renderer.listen(window, 'resize', () => { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.overlayVisible = false; } }); diff --git a/packages/primeng/src/password/style/passwordstyle.ts b/packages/primeng/src/password/style/passwordstyle.ts index 760862838c2..3a0b25b3b47 100644 --- a/packages/primeng/src/password/style/passwordstyle.ts +++ b/packages/primeng/src/password/style/passwordstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-password { diff --git a/packages/primeng/src/picklist/picklist.ts b/packages/primeng/src/picklist/picklist.ts index e03058961ba..5337c5e6aff 100755 --- a/packages/primeng/src/picklist/picklist.ts +++ b/packages/primeng/src/picklist/picklist.ts @@ -19,22 +19,14 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api'; +import { FormsModule } from '@angular/forms'; +import { BaseComponent, FilterService, PrimeTemplate, SharedModule } from '@primeng/core'; +import { AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon } from '@primeng/icons'; +import { find, findIndexInList, findSingle, isEmpty, scrollInView, setAttribute, uuid } from '@primeuix/utils'; import { ButtonDirective, ButtonProps } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { AngleDoubleDownIcon } from 'primeng/icons/angledoubledown'; -import { AngleDoubleLeftIcon } from 'primeng/icons/angledoubleleft'; -import { AngleDoubleRightIcon } from 'primeng/icons/angledoubleright'; -import { AngleDoubleUpIcon } from 'primeng/icons/angledoubleup'; -import { AngleDownIcon } from 'primeng/icons/angledown'; -import { AngleLeftIcon } from 'primeng/icons/angleleft'; -import { AngleRightIcon } from 'primeng/icons/angleright'; -import { AngleUpIcon } from 'primeng/icons/angleup'; -import { HomeIcon } from 'primeng/icons/home'; -import { SearchIcon } from 'primeng/icons/search'; +import { Listbox } from 'primeng/listbox'; import { Ripple } from 'primeng/ripple'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { PickListFilterOptions, PickListMoveAllToSourceEvent, @@ -49,9 +41,6 @@ import { PickListTargetSelectEvent } from './picklist.interface'; import { PickListStyle } from './style/pickliststyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Listbox } from 'primeng/listbox'; -import { FormsModule } from '@angular/forms'; /** * PickList is used to reorder items between different lists. @@ -74,7 +63,6 @@ import { FormsModule } from '@angular/forms'; AngleRightIcon, AngleUpIcon, SearchIcon, - HomeIcon, Listbox, FormsModule, SharedModule @@ -785,7 +773,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo styleElement: any; - id: string = UniqueComponentId(); + id: string = uuid('pn_id_'); filterValueSource: Nullable; @@ -1048,13 +1036,13 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo ngAfterViewChecked() { if (this.movedUp || this.movedDown) { - let listItems = DomHandler.find(this.reorderedListElement, 'li.p-highlight'); + let listItems = find(this.reorderedListElement, 'li.p-highlight'); let listItem; if (this.movedUp) listItem = listItems[0]; else listItem = listItems[listItems.length - 1]; - DomHandler.scrollInView(this.reorderedListElement, listItem); + scrollInView(this.reorderedListElement, listItem); this.movedUp = false; this.movedDown = false; this.reorderedListElement = null; @@ -1177,7 +1165,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo } private sortByIndexInList(items: any[], list: any) { - return items.sort((item1, item2) => ObjectUtils.findIndexInList(item1, list) - ObjectUtils.findIndexInList(item2, list)); + return items.sort((item1, item2) => findIndexInList(item1, list) - findIndexInList(item2, list)); } viewChildMarkForCheck() { @@ -1190,7 +1178,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo selectedItems = this.sortByIndexInList(selectedItems, list); for (let i = 0; i < selectedItems.length; i++) { let selectedItem = selectedItems[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, list); + let selectedItemIndex: number = findIndexInList(selectedItem, list); if (selectedItemIndex != 0) { let movedItem = list[selectedItemIndex]; @@ -1216,7 +1204,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo selectedItems = this.sortByIndexInList(selectedItems, list); for (let i = 0; i < selectedItems.length; i++) { let selectedItem = selectedItems[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, list); + let selectedItemIndex: number = findIndexInList(selectedItem, list); if (selectedItemIndex != 0) { let movedItem = list.splice(selectedItemIndex, 1)[0]; @@ -1239,7 +1227,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo selectedItems = this.sortByIndexInList(selectedItems, list); for (let i = selectedItems.length - 1; i >= 0; i--) { let selectedItem = selectedItems[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, list); + let selectedItemIndex: number = findIndexInList(selectedItem, list); if (selectedItemIndex != list.length - 1) { let movedItem = list[selectedItemIndex]; @@ -1265,7 +1253,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo selectedItems = this.sortByIndexInList(selectedItems, list); for (let i = selectedItems.length - 1; i >= 0; i--) { let selectedItem = selectedItems[i]; - let selectedItemIndex: number = ObjectUtils.findIndexInList(selectedItem, list); + let selectedItemIndex: number = findIndexInList(selectedItem, list); if (selectedItemIndex != list.length - 1) { let movedItem = list.splice(selectedItemIndex, 1)[0]; @@ -1287,11 +1275,11 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo if (this.selectedItemsSource && this.selectedItemsSource.length) { for (let i = 0; i < this.selectedItemsSource.length; i++) { let selectedItem = this.selectedItemsSource[i]; - if (ObjectUtils.findIndexInList(selectedItem, this.target) == -1) { - this.target?.push(this.source?.splice(ObjectUtils.findIndexInList(selectedItem, this.source), 1)[0]); + if (findIndexInList(selectedItem, this.target) == -1) { + this.target?.push(this.source?.splice(findIndexInList(selectedItem, this.source), 1)[0]); if (this.visibleOptionsSource?.includes(selectedItem)) { - this.visibleOptionsSource.splice(ObjectUtils.findIndexInList(selectedItem, this.visibleOptionsSource), 1); + this.visibleOptionsSource.splice(findIndexInList(selectedItem, this.visibleOptionsSource), 1); } } } @@ -1348,11 +1336,11 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo if (this.selectedItemsTarget && this.selectedItemsTarget.length) { for (let i = 0; i < this.selectedItemsTarget.length; i++) { let selectedItem = this.selectedItemsTarget[i]; - if (ObjectUtils.findIndexInList(selectedItem, this.source) == -1) { - this.source?.push(this.target?.splice(ObjectUtils.findIndexInList(selectedItem, this.target), 1)[0]); + if (findIndexInList(selectedItem, this.source) == -1) { + this.source?.push(this.target?.splice(findIndexInList(selectedItem, this.target), 1)[0]); if (this.visibleOptionsTarget?.includes(selectedItem)) { - this.visibleOptionsTarget.splice(ObjectUtils.findIndexInList(selectedItem, this.visibleOptionsTarget), 1)[0]; + this.visibleOptionsTarget.splice(findIndexInList(selectedItem, this.visibleOptionsTarget), 1)[0]; } } } @@ -1411,7 +1399,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo } findIndexInList(item: any, selectedItems: any[]): number { - return ObjectUtils.findIndexInList(item, selectedItems); + return findIndexInList(item, selectedItems); } onDrop(event: CdkDragDrop, listType: number) { @@ -1421,7 +1409,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo if (listType === this.SOURCE_LIST) { if (isTransfer) { transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex); - let selectedItemIndex = ObjectUtils.findIndexInList(event.item.data, this.selectedItemsTarget); + let selectedItemIndex = findIndexInList(event.item.data, this.selectedItemsTarget); if (selectedItemIndex != -1) { this.selectedItemsTarget.splice(selectedItemIndex, 1); @@ -1446,7 +1434,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo if (isTransfer) { transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex); - let selectedItemIndex = ObjectUtils.findIndexInList(event.item.data, this.selectedItemsSource); + let selectedItemIndex = findIndexInList(event.item.data, this.selectedItemsSource); if (selectedItemIndex != -1) { this.selectedItemsSource.splice(selectedItemIndex, 1); @@ -1485,7 +1473,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo getListItems(listType: number) { let listElemet = this.getListElement(listType); - return DomHandler.find(listElemet, 'li.p-picklist-item'); + return find(listElemet, 'li.p-picklist-item'); } getLatestSelectedVisibleOptionIndex(visibleList: any[], selectedItems: any[]): number { @@ -1512,14 +1500,14 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo findNextOptionIndex(index: number, listType: number) { const items = this.getListItems(listType); - const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + const matchedOptionIndex = [...items].findIndex((link: any) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; } findPrevOptionIndex(index: number, listType: number) { const items = this.getListItems(listType); - const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + const matchedOptionIndex = [...items].findIndex((link: any) => link.id === index); return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; } @@ -1584,7 +1572,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo } scrollInView(id, listType) { - const element = DomHandler.findSingle(this.getListElement(listType), `li[id="${id}"]`); + const element = findSingle(this.getListElement(listType), `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); @@ -1628,7 +1616,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo let lastSelectedIndex = this.getLatestSelectedVisibleOptionIndex(visibleList, selectedItems); if (lastSelectedIndex !== -1) { - let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList); + let focusedIndex = findIndexInList(this.focusedOption, visibleList); selectedItems = [...visibleList.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)]; this.setSelectionList(listType, selectedItems); @@ -1644,7 +1632,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo onHomeKey(event: Event | any, selectedItems: any[], callback: EventEmitter, listType: number) { if (event.ctrlKey && event.shiftKey) { let visibleList = this.getVisibleList(listType); - let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList); + let focusedIndex = findIndexInList(this.focusedOption, visibleList); selectedItems = [...visibleList.slice(0, focusedIndex + 1)]; this.setSelectionList(listType, selectedItems); @@ -1662,7 +1650,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo if (lastIndex === null) return; if (event.ctrlKey && event.shiftKey) { - let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList); + let focusedIndex = findIndexInList(this.focusedOption, visibleList); selectedItems = [...visibleList.slice(focusedIndex, lastIndex)]; this.setSelectionList(listType, selectedItems); @@ -1678,10 +1666,10 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo let previousIndex, currentIndex; if (droppedList === this.SOURCE_LIST) { - previousIndex = isTransfer ? (this.filterValueTarget ? ObjectUtils.findIndexInList(data, this.target) : fromIndex) : this.filterValueSource ? ObjectUtils.findIndexInList(data, this.source) : fromIndex; + previousIndex = isTransfer ? (this.filterValueTarget ? findIndexInList(data, this.target) : fromIndex) : this.filterValueSource ? findIndexInList(data, this.source) : fromIndex; currentIndex = this.filterValueSource ? this.findFilteredCurrentIndex(this.visibleOptionsSource, toIndex, this.source) : toIndex; } else { - previousIndex = isTransfer ? (this.filterValueSource ? ObjectUtils.findIndexInList(data, this.source) : fromIndex) : this.filterValueTarget ? ObjectUtils.findIndexInList(data, this.target) : fromIndex; + previousIndex = isTransfer ? (this.filterValueSource ? findIndexInList(data, this.source) : fromIndex) : this.filterValueTarget ? findIndexInList(data, this.target) : fromIndex; currentIndex = this.filterValueTarget ? this.findFilteredCurrentIndex(this.visibleOptionsTarget, toIndex, this.target) : toIndex; } @@ -1690,11 +1678,11 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo findFilteredCurrentIndex(visibleOptions: any[], index: number, options: any) { if (visibleOptions.length === index) { - let toIndex = ObjectUtils.findIndexInList(visibleOptions[index - 1], options); + let toIndex = findIndexInList(visibleOptions[index - 1], options); return toIndex + 1; } else { - return ObjectUtils.findIndexInList(visibleOptions[index], options); + return findIndexInList(visibleOptions[index], options); } } @@ -1764,7 +1752,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo }`; this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } } } @@ -1782,19 +1770,19 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo } moveRightDisabled() { - return this.disabled || ObjectUtils.isEmpty(this.selectedItemsSource); + return this.disabled || isEmpty(this.selectedItemsSource); } moveLeftDisabled() { - return this.disabled || ObjectUtils.isEmpty(this.selectedItemsTarget); + return this.disabled || isEmpty(this.selectedItemsTarget); } moveAllRightDisabled() { - return this.disabled || ObjectUtils.isEmpty(this.source); + return this.disabled || isEmpty(this.source); } moveAllLeftDisabled() { - return this.disabled || ObjectUtils.isEmpty(this.target); + return this.disabled || isEmpty(this.target); } destroyStyle() { diff --git a/packages/primeng/src/picklist/style/pickliststyle.ts b/packages/primeng/src/picklist/style/pickliststyle.ts index f6c809dcca2..b37865d4983 100644 --- a/packages/primeng/src/picklist/style/pickliststyle.ts +++ b/packages/primeng/src/picklist/style/pickliststyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-picklist { diff --git a/packages/primeng/src/popover/popover.ts b/packages/primeng/src/popover/popover.ts index 96ff21b8415..c1f77cee398 100755 --- a/packages/primeng/src/popover/popover.ts +++ b/packages/primeng/src/popover/popover.ts @@ -19,15 +19,15 @@ import { ViewEncapsulation, ViewRef } from '@angular/core'; -import { OverlayService, SharedModule } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; -import { TimesIcon } from 'primeng/icons/times'; +import { BaseComponent, OverlayService, SharedModule } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; +import { absolutePosition, addClass, appendChild, findSingle, getOffset, isIOS, isTouchDevice } from '@primeuix/utils'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Ripple } from 'primeng/ripple'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; import { PopoverStyle } from './style/popoverstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Popover is a container component that can overlay other components on page. @@ -227,7 +227,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro bindDocumentClickListener() { if (isPlatformBrowser(this.platformId)) { if (!this.documentClickListener && this.dismissable) { - let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click'; + let documentEvent = isIOS() ? 'touchstart' : 'click'; const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : this.document; this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => { @@ -312,7 +312,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); - else DomHandler.appendChild(this.container, this.appendTo); + else appendChild(this.container, this.appendTo); } } @@ -327,10 +327,10 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay); } - DomHandler.absolutePosition(this.container, this.target, false); + absolutePosition(this.container, this.target, false); - const containerOffset = DomHandler.getOffset(this.container); - const targetOffset = DomHandler.getOffset(this.target); + const containerOffset = getOffset(this.container); + const targetOffset = getOffset(this.target); const borderRadius = this.document.defaultView?.getComputedStyle(this.container!).getPropertyValue('border-radius'); let arrowLeft = 0; @@ -340,7 +340,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro this.container?.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`); if (containerOffset.top < targetOffset.top) { - DomHandler.addClass(this.container, 'p-popover-flipped'); + addClass(this.container, 'p-popover-flipped'); if (this.showCloseIcon) { this.renderer.setStyle(this.container, 'margin-top', '-30px'); @@ -406,7 +406,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro } focus() { - let focusable = DomHandler.findSingle(this.container, '[autofocus]'); + let focusable = findSingle(this.container, '[autofocus]'); if (focusable) { this.zone.runOutsideAngular(() => { setTimeout(() => focusable.focus(), 5); @@ -433,7 +433,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro } onWindowResize() { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.hide(); } } diff --git a/packages/primeng/src/popover/style/popoverstyle.ts b/packages/primeng/src/popover/style/popoverstyle.ts index 361bcc49f57..a2d6236aa3e 100644 --- a/packages/primeng/src/popover/style/popoverstyle.ts +++ b/packages/primeng/src/popover/style/popoverstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-popover { diff --git a/packages/primeng/src/progressbar/progressbar.ts b/packages/primeng/src/progressbar/progressbar.ts index 2d59df4047b..67c138ffd7c 100755 --- a/packages/primeng/src/progressbar/progressbar.ts +++ b/packages/primeng/src/progressbar/progressbar.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, inject, Input, NgModule, numberAttribute, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { ProgressBarStyle } from './style/progressbarstyle'; -import { SharedModule } from 'primeng/api'; /** * ProgressBar is a process status indicator. diff --git a/packages/primeng/src/progressbar/style/progressbarstyle.ts b/packages/primeng/src/progressbar/style/progressbarstyle.ts index e4ad55d748a..977520de0bc 100644 --- a/packages/primeng/src/progressbar/style/progressbarstyle.ts +++ b/packages/primeng/src/progressbar/style/progressbarstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-progressbar { diff --git a/packages/primeng/src/progressspinner/progressspinner.ts b/packages/primeng/src/progressspinner/progressspinner.ts index 9c3ede4124d..98598c73779 100755 --- a/packages/primeng/src/progressspinner/progressspinner.ts +++ b/packages/primeng/src/progressspinner/progressspinner.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { ProgressSpinnerStyle } from './style/progressspinnerstyle'; -import { SharedModule } from 'primeng/api'; /** * ProgressSpinner is a process status indicator. diff --git a/packages/primeng/src/progressspinner/style/progressspinnerstyle.ts b/packages/primeng/src/progressspinner/style/progressspinnerstyle.ts index 77b1ad63122..f8a84abf4ea 100644 --- a/packages/primeng/src/progressspinner/style/progressspinnerstyle.ts +++ b/packages/primeng/src/progressspinner/style/progressspinnerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-progressspinner { diff --git a/packages/primeng/src/radiobutton/radiobutton.ts b/packages/primeng/src/radiobutton/radiobutton.ts index dad220f8d2d..142f9e45bc2 100755 --- a/packages/primeng/src/radiobutton/radiobutton.ts +++ b/packages/primeng/src/radiobutton/radiobutton.ts @@ -1,12 +1,11 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, inject, Injectable, Injector, Input, NgModule, numberAttribute, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; -import { Nullable } from 'primeng/ts-helpers'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { AutoFocus } from 'primeng/autofocus'; -import { BaseComponent } from 'primeng/basecomponent'; -import { RadioButtonStyle } from './style/radiobuttonstyle'; +import { Nullable } from 'primeng/ts-helpers'; import { RadioButtonClickEvent } from './radiobutton.interface'; -import { SharedModule } from 'primeng/api'; +import { RadioButtonStyle } from './style/radiobuttonstyle'; export const RADIO_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, diff --git a/packages/primeng/src/radiobutton/style/radiobuttonstyle.ts b/packages/primeng/src/radiobutton/style/radiobuttonstyle.ts index a380722676c..55c2215700d 100644 --- a/packages/primeng/src/radiobutton/style/radiobuttonstyle.ts +++ b/packages/primeng/src/radiobutton/style/radiobuttonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-radiobutton { diff --git a/packages/primeng/src/rating/rating.spec.ts b/packages/primeng/src/rating/rating.spec.ts index 344abc8adab..b6ee7189266 100755 --- a/packages/primeng/src/rating/rating.spec.ts +++ b/packages/primeng/src/rating/rating.spec.ts @@ -1,10 +1,8 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { Rating } from './rating'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { StarFillIcon } from 'primeng/icons/starfill'; -import { StarIcon } from 'primeng/icons/star'; -import { BanIcon } from 'primeng/icons/ban'; +import { BanIcon, StarFillIcon, StarIcon } from '@primeng/icons'; +import { Rating } from './rating'; describe('Rating', () => { let rating: Rating; diff --git a/packages/primeng/src/rating/rating.ts b/packages/primeng/src/rating/rating.ts index e58c80d7499..bdd9f8a22e2 100755 --- a/packages/primeng/src/rating/rating.ts +++ b/packages/primeng/src/rating/rating.ts @@ -1,17 +1,13 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, OnInit, Output, signal, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { BanIcon } from 'primeng/icons/ban'; -import { StarIcon } from 'primeng/icons/star'; -import { StarFillIcon } from 'primeng/icons/starfill'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { BanIcon, StarFillIcon, StarIcon } from '@primeng/icons'; +import { focus, getFirstFocusableElement, uuid } from '@primeuix/utils'; +import { AutoFocus } from 'primeng/autofocus'; import { Nullable } from 'primeng/ts-helpers'; import { RatingRateEvent } from './rating.interface'; -import { DomHandler } from 'primeng/dom'; -import { UniqueComponentId } from 'primeng/utils'; -import { AutoFocus } from 'primeng/autofocus'; import { RatingStyle } from './style/ratingstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { SharedModule } from 'primeng/api'; export const RATING_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -179,7 +175,7 @@ export class Rating extends BaseComponent implements OnInit, ControlValueAccesso ngOnInit() { super.ngOnInit(); - this.nameattr = this.nameattr || UniqueComponentId(); + this.nameattr = this.nameattr || uuid('pn_id_'); this.starsArray = []; for (let i = 0; i < this.stars; i++) { this.starsArray[i] = i; @@ -190,9 +186,9 @@ export class Rating extends BaseComponent implements OnInit, ControlValueAccesso if (!this.readonly && !this.disabled) { this.onOptionSelect(event, value); this.isFocusVisibleItem = false; - const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget, ''); + const firstFocusableEl = getFirstFocusableElement(event.currentTarget, ''); - firstFocusableEl && DomHandler.focus(firstFocusableEl); + firstFocusableEl && focus(firstFocusableEl); } } diff --git a/packages/primeng/src/rating/style/ratingstyle.ts b/packages/primeng/src/rating/style/ratingstyle.ts index e17b7b200d1..9ca3f9a40db 100644 --- a/packages/primeng/src/rating/style/ratingstyle.ts +++ b/packages/primeng/src/rating/style/ratingstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-rating { diff --git a/packages/primeng/src/ripple/ripple.ts b/packages/primeng/src/ripple/ripple.ts index ec0789eaac0..4cd75591769 100644 --- a/packages/primeng/src/ripple/ripple.ts +++ b/packages/primeng/src/ripple/ripple.ts @@ -1,7 +1,7 @@ import { isPlatformBrowser } from '@angular/common'; import { AfterViewInit, Directive, effect, inject, NgModule, NgZone, OnDestroy } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent } from '@primeng/core'; +import { addClass, getHeight, getOffset, getOuterHeight, getOuterWidth, getWidth, removeClass, remove as utils_remove } from '@primeuix/utils'; import { VoidListener } from 'primeng/ts-helpers'; import { RippleStyle } from './style/ripplestyle'; @@ -52,25 +52,25 @@ export class Ripple extends BaseComponent implements AfterViewInit, OnDestroy { return; } - DomHandler.removeClass(ink, 'p-ink-active'); - if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) { - let d = Math.max(DomHandler.getOuterWidth(this.el.nativeElement), DomHandler.getOuterHeight(this.el.nativeElement)); + removeClass(ink, 'p-ink-active'); + if (!getHeight(ink) && !getWidth(ink)) { + let d = Math.max(getOuterWidth(this.el.nativeElement), getOuterHeight(this.el.nativeElement)); ink.style.height = d + 'px'; ink.style.width = d + 'px'; } - let offset = DomHandler.getOffset(this.el.nativeElement); - let x = event.pageX - offset.left + this.document.body.scrollTop - DomHandler.getWidth(ink) / 2; - let y = event.pageY - offset.top + this.document.body.scrollLeft - DomHandler.getHeight(ink) / 2; + let offset = getOffset(this.el.nativeElement); + let x = event.pageX - offset.left + this.document.body.scrollTop - getWidth(ink) / 2; + let y = event.pageY - offset.top + this.document.body.scrollLeft - getHeight(ink) / 2; this.renderer.setStyle(ink, 'top', y + 'px'); this.renderer.setStyle(ink, 'left', x + 'px'); - DomHandler.addClass(ink, 'p-ink-active'); + addClass(ink, 'p-ink-active'); this.timeout = setTimeout(() => { let ink = this.getInk(); if (ink) { - DomHandler.removeClass(ink, 'p-ink-active'); + removeClass(ink, 'p-ink-active'); } }, 401); } @@ -88,7 +88,7 @@ export class Ripple extends BaseComponent implements AfterViewInit, OnDestroy { resetInk() { let ink = this.getInk(); if (ink) { - DomHandler.removeClass(ink, 'p-ink-active'); + removeClass(ink, 'p-ink-active'); } } @@ -96,7 +96,7 @@ export class Ripple extends BaseComponent implements AfterViewInit, OnDestroy { if (this.timeout) { clearTimeout(this.timeout); } - DomHandler.removeClass(event.currentTarget, 'p-ink-active'); + removeClass(event.currentTarget as any, 'p-ink-active'); } create() { @@ -119,7 +119,7 @@ export class Ripple extends BaseComponent implements AfterViewInit, OnDestroy { this.mouseDownListener = null; this.animationListener = null; - DomHandler.removeElement(ink); + utils_remove(ink); } } diff --git a/packages/primeng/src/ripple/style/ripplestyle.ts b/packages/primeng/src/ripple/style/ripplestyle.ts index b8827a9d13d..a46f5ba63d4 100644 --- a/packages/primeng/src/ripple/style/ripplestyle.ts +++ b/packages/primeng/src/ripple/style/ripplestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` /* For PrimeNG */ diff --git a/packages/primeng/src/scroller/scroller.ts b/packages/primeng/src/scroller/scroller.ts index 6656cef2a53..c4da2a22377 100644 --- a/packages/primeng/src/scroller/scroller.ts +++ b/packages/primeng/src/scroller/scroller.ts @@ -20,13 +20,13 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { SpinnerIcon } from 'primeng/icons/spinner'; +import { BaseComponent, PrimeTemplate, SharedModule } from '@primeng/core'; +import { SpinnerIcon } from '@primeng/icons'; +import { findSingle, getHeight, getWidth, isTouchDevice, isVisible } from '@primeuix/utils'; +import { ScrollerOptions } from 'primeng/api'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ScrollerLazyLoadEvent, ScrollerScrollEvent, ScrollerScrollIndexChangeEvent, ScrollerToType } from './scroller.interface'; import { ScrollerStyle } from './style/scrollerstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Scroller is a performance-approach to handle huge data efficiently. @@ -637,15 +637,15 @@ export class Scroller extends BaseComponent implements OnInit, AfterContentInit, viewInit() { if (isPlatformBrowser(this.platformId) && !this.initialized) { - if (DomHandler.isVisible(this.elementViewChild?.nativeElement)) { + if (isVisible(this.elementViewChild?.nativeElement)) { this.setInitialState(); this.setContentEl(this.contentEl); this.init(); - this.defaultWidth = DomHandler.getWidth(this.elementViewChild?.nativeElement); - this.defaultHeight = DomHandler.getHeight(this.elementViewChild?.nativeElement); - this.defaultContentWidth = DomHandler.getWidth(this.contentEl); - this.defaultContentHeight = DomHandler.getHeight(this.contentEl); + this.defaultWidth = getWidth(this.elementViewChild?.nativeElement); + this.defaultHeight = getHeight(this.elementViewChild?.nativeElement); + this.defaultContentWidth = getWidth(this.contentEl); + this.defaultContentHeight = getHeight(this.contentEl); this.initialized = true; } } @@ -663,7 +663,7 @@ export class Scroller extends BaseComponent implements OnInit, AfterContentInit, } setContentEl(el?: HTMLElement) { - this.contentEl = el || this.contentViewChild?.nativeElement || DomHandler.findSingle(this.elementViewChild?.nativeElement, '.p-virtualscroller-content'); + this.contentEl = el || this.contentViewChild?.nativeElement || findSingle(this.elementViewChild?.nativeElement, '.p-virtualscroller-content'); } setInitialState() { @@ -862,11 +862,11 @@ export class Scroller extends BaseComponent implements OnInit, AfterContentInit, this.contentEl.style.position = 'relative'; (this.elementViewChild).nativeElement.style.contain = 'none'; - const [contentWidth, contentHeight] = [DomHandler.getWidth(this.contentEl), DomHandler.getHeight(this.contentEl)]; + const [contentWidth, contentHeight] = [getWidth(this.contentEl), getHeight(this.contentEl)]; contentWidth !== this.defaultContentWidth && ((this.elementViewChild).nativeElement.style.width = ''); contentHeight !== this.defaultContentHeight && ((this.elementViewChild).nativeElement.style.height = ''); - const [width, height] = [DomHandler.getWidth((this.elementViewChild).nativeElement), DomHandler.getHeight((this.elementViewChild).nativeElement)]; + const [width, height] = [getWidth((this.elementViewChild).nativeElement), getHeight((this.elementViewChild).nativeElement)]; (this.both || this.horizontal) && ((this.elementViewChild).nativeElement.style.width = width < this.defaultWidth ? width + 'px' : this._scrollWidth || this.defaultWidth + 'px'); (this.both || this.vertical) && ((this.elementViewChild).nativeElement.style.height = height < this.defaultHeight ? height + 'px' : this._scrollHeight || this.defaultHeight + 'px'); @@ -1089,7 +1089,7 @@ export class Scroller extends BaseComponent implements OnInit, AfterContentInit, if (!this.windowResizeListener) { this.zone.runOutsideAngular(() => { const window = this.document.defaultView as Window; - const event = DomHandler.isTouchDevice() ? 'orientationchange' : 'resize'; + const event = isTouchDevice() ? 'orientationchange' : 'resize'; this.windowResizeListener = this.renderer.listen(window, event, this.onWindowResize.bind(this)); }); } @@ -1109,8 +1109,8 @@ export class Scroller extends BaseComponent implements OnInit, AfterContentInit, } this.resizeTimeout = setTimeout(() => { - if (DomHandler.isVisible(this.elementViewChild?.nativeElement)) { - const [width, height] = [DomHandler.getWidth(this.elementViewChild?.nativeElement), DomHandler.getHeight(this.elementViewChild?.nativeElement)]; + if (isVisible(this.elementViewChild?.nativeElement)) { + const [width, height] = [getWidth(this.elementViewChild?.nativeElement), getHeight(this.elementViewChild?.nativeElement)]; const [isDiffWidth, isDiffHeight] = [width !== this.defaultWidth, height !== this.defaultHeight]; const reinit = this.both ? isDiffWidth || isDiffHeight : this.horizontal ? isDiffWidth : this.vertical ? isDiffHeight : false; @@ -1119,8 +1119,8 @@ export class Scroller extends BaseComponent implements OnInit, AfterContentInit, this.d_numToleratedItems = this._numToleratedItems; this.defaultWidth = width; this.defaultHeight = height; - this.defaultContentWidth = DomHandler.getWidth(this.contentEl); - this.defaultContentHeight = DomHandler.getHeight(this.contentEl); + this.defaultContentWidth = getWidth(this.contentEl); + this.defaultContentHeight = getHeight(this.contentEl); this.init(); }); diff --git a/packages/primeng/src/scroller/style/scrollerstyle.ts b/packages/primeng/src/scroller/style/scrollerstyle.ts index c022e8351a9..320c1b70c01 100644 --- a/packages/primeng/src/scroller/style/scrollerstyle.ts +++ b/packages/primeng/src/scroller/style/scrollerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-virtualscroller { diff --git a/packages/primeng/src/scrollpanel/scrollpanel.ts b/packages/primeng/src/scrollpanel/scrollpanel.ts index 1b3883d6689..052f4ac9ef8 100755 --- a/packages/primeng/src/scrollpanel/scrollpanel.ts +++ b/packages/primeng/src/scrollpanel/scrollpanel.ts @@ -1,11 +1,9 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, Component, ContentChild, ElementRef, inject, Input, NgModule, NgZone, numberAttribute, OnDestroy, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { addClass, getHeight, removeClass, uuid } from '@primeuix/utils'; import { Nullable } from 'primeng/ts-helpers'; -import { UniqueComponentId } from 'primeng/utils'; -import { BaseComponent } from 'primeng/basecomponent'; import { ScrollPanelStyle } from './style/scrollpanelstyle'; -import { SharedModule } from 'primeng/api'; /** * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar. @@ -136,7 +134,7 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr ngOnInit() { super.ngOnInit(); - this.contentId = UniqueComponentId() + '_content'; + this.contentId = uuid('pn_id_') + '_content'; } ngAfterViewInit() { @@ -170,7 +168,7 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr let containerStyles: { [klass: string]: any } = window.getComputedStyle(container), xBarStyles = window.getComputedStyle(xBar), - pureContainerHeight = DomHandler.getHeight(container) - parseInt(xBarStyles['height'], 10); + pureContainerHeight = getHeight(container) - parseInt(xBarStyles['height'], 10); if (containerStyles['max-height'] != 'none' && pureContainerHeight == 0) { if (content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) { @@ -204,10 +202,10 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr this.requestAnimationFrame(() => { if ((this.scrollXRatio as number) >= 1) { xBar.setAttribute('data-p-scrollpanel-hidden', 'true'); - DomHandler.addClass(xBar, 'p-scrollpanel-hidden'); + addClass(xBar, 'p-scrollpanel-hidden'); } else { xBar.setAttribute('data-p-scrollpanel-hidden', 'false'); - DomHandler.removeClass(xBar, 'p-scrollpanel-hidden'); + removeClass(xBar, 'p-scrollpanel-hidden'); const xBarWidth = Math.max((this.scrollXRatio as number) * 100, 10); const xBarLeft = (content.scrollLeft * (100 - xBarWidth)) / (totalWidth - ownWidth); xBar.style.cssText = 'width:' + xBarWidth + '%; left:' + xBarLeft + '%;bottom:' + bottom + 'px;'; @@ -215,10 +213,10 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr if ((this.scrollYRatio as number) >= 1) { yBar.setAttribute('data-p-scrollpanel-hidden', 'true'); - DomHandler.addClass(yBar, 'p-scrollpanel-hidden'); + addClass(yBar, 'p-scrollpanel-hidden'); } else { yBar.setAttribute('data-p-scrollpanel-hidden', 'false'); - DomHandler.removeClass(yBar, 'p-scrollpanel-hidden'); + removeClass(yBar, 'p-scrollpanel-hidden'); const yBarHeight = Math.max((this.scrollYRatio as number) * 100, 10); const yBarTop = (content.scrollTop * (100 - yBarHeight)) / (totalHeight - ownHeight); yBar.style.cssText = 'height:' + yBarHeight + '%; top: calc(' + yBarTop + '% - ' + xBar.clientHeight + 'px);right:' + right + 'px;'; @@ -349,10 +347,10 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr this.lastPageY = e.pageY; this.yBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'true'); - DomHandler.addClass((this.yBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); + addClass((this.yBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'true'); - DomHandler.addClass(this.document.body, 'p-scrollpanel-grabbed'); + addClass(this.document.body, 'p-scrollpanel-grabbed'); this.bindDocumentMouseListeners(); e.preventDefault(); } @@ -363,10 +361,10 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr this.lastPageX = e.pageX; this.xBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'false'); - DomHandler.addClass((this.xBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); + addClass((this.xBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'false'); - DomHandler.addClass(this.document.body, 'p-scrollpanel-grabbed'); + addClass(this.document.body, 'p-scrollpanel-grabbed'); this.bindDocumentMouseListeners(); e.preventDefault(); @@ -427,11 +425,11 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr onDocumentMouseUp(e: Event) { this.yBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'false'); - DomHandler.removeClass((this.yBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); + removeClass((this.yBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); this.xBarViewChild.nativeElement.setAttribute('data-p-scrollpanel-grabbed', 'false'); - DomHandler.removeClass((this.xBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); + removeClass((this.xBarViewChild as ElementRef).nativeElement, 'p-scrollpanel-grabbed'); this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'false'); - DomHandler.removeClass(this.document.body, 'p-scrollpanel-grabbed'); + removeClass(this.document.body, 'p-scrollpanel-grabbed'); this.unbindDocumentMouseListeners(); this.isXBarClicked = false; diff --git a/packages/primeng/src/scrollpanel/style/scrollpanelstyle.ts b/packages/primeng/src/scrollpanel/style/scrollpanelstyle.ts index 9d4b75bc92e..098df0d722f 100644 --- a/packages/primeng/src/scrollpanel/style/scrollpanelstyle.ts +++ b/packages/primeng/src/scrollpanel/style/scrollpanelstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-scrollpanel-content-container { diff --git a/packages/primeng/src/scrolltop/scrolltop.ts b/packages/primeng/src/scrolltop/scrolltop.ts index ceb11b7abf7..fbbe822b04e 100755 --- a/packages/primeng/src/scrolltop/scrolltop.ts +++ b/packages/primeng/src/scrolltop/scrolltop.ts @@ -1,12 +1,11 @@ import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations'; import { CommonModule, isPlatformBrowser } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChild, inject, Input, NgModule, numberAttribute, OnDestroy, OnInit, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { PrimeTemplate, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ChevronUpIcon } from 'primeng/icons/chevronup'; -import { ZIndexUtils } from 'primeng/utils'; +import { BaseComponent, PrimeTemplate, SharedModule } from '@primeng/core'; +import { ChevronUpIcon } from '@primeng/icons'; +import { getWindowScrollTop } from '@primeuix/utils'; import { Button, ButtonProps } from 'primeng/button'; -import { BaseComponent } from 'primeng/basecomponent'; +import { ZIndexUtils } from 'primeng/utils'; import { ScrollTopStyle } from './style/scrolltopstyle'; /** @@ -194,7 +193,7 @@ export class ScrollTop extends BaseComponent implements OnInit, OnDestroy { bindDocumentScrollListener() { if (isPlatformBrowser(this.platformId)) { this.documentScrollListener = this.renderer.listen(this.document.defaultView, 'scroll', () => { - this.checkVisibility(DomHandler.getWindowScrollTop()); + this.checkVisibility(getWindowScrollTop()); }); } } diff --git a/packages/primeng/src/scrolltop/style/scrolltopstyle.ts b/packages/primeng/src/scrolltop/style/scrolltopstyle.ts index 365ab2053a3..8f2e5386034 100644 --- a/packages/primeng/src/scrolltop/style/scrolltopstyle.ts +++ b/packages/primeng/src/scrolltop/style/scrolltopstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-scrolltop.p-button { diff --git a/packages/primeng/src/select/select.ts b/packages/primeng/src/select/select.ts index 31bd2b03df5..f319d182d6b 100755 --- a/packages/primeng/src/select/select.ts +++ b/packages/primeng/src/select/select.ts @@ -30,26 +30,37 @@ import { ViewRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { FilterService, OverlayOptions, PrimeTemplate, ScrollerOptions, SharedModule, TranslationKeys } from 'primeng/api'; +import { BaseComponent, FilterService, OverlayOptions, PrimeTemplate, SharedModule, TranslationKeys } from '@primeng/core'; +import { BlankIcon, CheckIcon, ChevronDownIcon, SearchIcon, TimesIcon } from '@primeng/icons'; +import { + deepEquals, + equals, + findLastIndex, + findSingle, + focus, + getFirstFocusableElement, + getFocusableElements, + getLastFocusableElement, + isEmpty, + isNotEmpty, + isPrintableCharacter, + resolveFieldData, + scrollInView, + unblockBodyScroll, + uuid +} from '@primeuix/utils'; +import { ScrollerOptions } from 'primeng/api'; import { AutoFocus } from 'primeng/autofocus'; -import { DomHandler } from 'primeng/dom'; +import { IconField } from 'primeng/iconfield'; +import { InputIcon } from 'primeng/inputicon'; +import { InputText } from 'primeng/inputtext'; import { Overlay } from 'primeng/overlay'; import { Ripple } from 'primeng/ripple'; import { Scroller } from 'primeng/scroller'; import { Tooltip } from 'primeng/tooltip'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { TimesIcon } from 'primeng/icons/times'; -import { CheckIcon } from 'primeng/icons/check'; -import { BlankIcon } from 'primeng/icons/blank'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { SearchIcon } from 'primeng/icons/search'; -import { SelectChangeEvent, SelectFilterEvent, SelectFilterOptions, SelectLazyLoadEvent } from './select.interface'; import { Nullable } from 'primeng/ts-helpers'; -import { InputText } from 'primeng/inputtext'; -import { IconField } from 'primeng/iconfield'; -import { InputIcon } from 'primeng/inputicon'; +import { SelectChangeEvent, SelectFilterEvent, SelectFilterOptions, SelectLazyLoadEvent } from './select.interface'; import { SelectStyle } from './style/selectstyle'; -import { BaseComponent } from 'primeng/basecomponent'; export const SELECT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -762,7 +773,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte return options; } set options(val: any[] | undefined) { - if (!ObjectUtils.deepEquals(val, this._options())) { + if (!deepEquals(val, this._options())) { this._options.set(val); } } @@ -1121,7 +1132,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte const modelValue = this.modelValue(); const visibleOptions = this.visibleOptions(); - if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) { + if (visibleOptions && isNotEmpty(visibleOptions)) { const selectedOptionIndex = this.findSelectedOptionIndex(); if (selectedOptionIndex !== -1 || modelValue === undefined || (typeof modelValue === 'string' && modelValue.length === 0) || this.isModelValueNotSet() || this.editable) { @@ -1129,7 +1140,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } } - if (ObjectUtils.isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && ObjectUtils.isNotEmpty(this.selectedOption)) { + if (isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && isNotEmpty(this.selectedOption)) { this.selectedOption = null; } @@ -1150,7 +1161,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); this.autoUpdateModel(); if (this.filterBy) { @@ -1175,9 +1186,9 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } if (this.selectedOptionUpdated && this.itemsWrapper) { - let selectedItem = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight'); + let selectedItem = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight'); if (selectedItem) { - DomHandler.scrollInView(this.itemsWrapper, selectedItem); + scrollInView(this.itemsWrapper, selectedItem); } this.selectedOptionUpdated = false; } @@ -1316,7 +1327,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } private isOptionValueEqualsModelValue(option: any) { - return ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); + return equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); } ngAfterViewInit() { @@ -1354,27 +1365,27 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } getOptionLabel(option: any) { - return this.optionLabel !== undefined && this.optionLabel !== null ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option; + return this.optionLabel !== undefined && this.optionLabel !== null ? resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option; } getOptionValue(option: any) { - return this.optionValue && this.optionValue !== null ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; + return this.optionValue && this.optionValue !== null ? resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option; } isOptionDisabled(option: any) { if (this.getOptionValue(this.modelValue()) === this.getOptionValue(option) || (this.getOptionLabel(this.modelValue() === this.getOptionLabel(option)) && option.disabled === false)) { return false; } else { - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false; } } getOptionGroupLabel(optionGroup: any) { - return this.optionGroupLabel !== undefined && this.optionGroupLabel !== null ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup; + return this.optionGroupLabel !== undefined && this.optionGroupLabel !== null ? resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup; } getOptionGroupChildren(optionGroup: any) { - return this.optionGroupChildren !== undefined && this.optionGroupChildren !== null ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; + return this.optionGroupChildren !== undefined && this.optionGroupChildren !== null ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items; } getAriaPosInset(index) { @@ -1450,7 +1461,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte this.onChange.emit({ originalEvent: event, value: value }); }, 1); - !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show(); + !this.overlayVisible && isNotEmpty(value) && this.show(); } /** * Displays the panel. @@ -1460,7 +1471,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte this.overlayVisible = true; if (isFocus) { - DomHandler.focus(this.focusInputViewChild?.nativeElement); + focus(this.focusInputViewChild?.nativeElement); } this.cd.markForCheck(); @@ -1468,7 +1479,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte onOverlayAnimationStart(event: AnimationEvent) { if (event.toState === 'visible') { - this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper'); + this.itemsWrapper = findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper'); this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement); if (this.options && this.options.length) { @@ -1478,7 +1489,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte this.scroller?.scrollToIndex(selectedIndex); } } else { - let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight'); + let selectedListItem = findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight'); if (selectedListItem) { selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -1513,17 +1524,17 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte this.searchValue = ''; if (this.overlayOptions?.mode === 'modal') { - DomHandler.unblockBodyScroll(); + unblockBodyScroll(); } if (this.filter && this.resetFilterOnHide) { this.resetFilter(); } if (isFocus) { if (this.focusInputViewChild) { - DomHandler.focus(this.focusInputViewChild?.nativeElement); + focus(this.focusInputViewChild?.nativeElement); } if (this.editable && this.editableInputViewChild) { - DomHandler.focus(this.editableInputViewChild?.nativeElement); + focus(this.editableInputViewChild?.nativeElement); } } this.cd.markForCheck(); @@ -1624,7 +1635,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte break; default: - if (!event.metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!event.metaKey && isPrintableCharacter(event.key)) { !this.overlayVisible && this.show(); !this.editable && this.searchOptions(event, event.key); } @@ -1717,7 +1728,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId; if (this.itemsViewChild && this.itemsViewChild.nativeElement) { - const element = DomHandler.findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } else if (!this.virtualScrollerDisabled) { @@ -1764,13 +1775,13 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } findPrevOptionIndex(index) { - const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; + const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : index; } findLastOptionIndex() { - return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); + return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option)); } findLastFocusedOptionIndex() { @@ -1894,7 +1905,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte onTabKey(event, pressedInInputText = false) { if (!pressedInInputText) { if (this.overlayVisible && this.hasFocusableElements()) { - DomHandler.focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); + focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); event.preventDefault(); } else { if (this.focusedOptionIndex() !== -1 && this.overlayVisible) { @@ -1908,21 +1919,19 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } onFirstHiddenFocus(event) { - const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el?.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild?.nativeElement; - DomHandler.focus(focusableEl); + const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? getFirstFocusableElement(this.overlayViewChild.el?.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild?.nativeElement; + focus(focusableEl); } onLastHiddenFocus(event) { const focusableEl = - event.relatedTarget === this.focusInputViewChild?.nativeElement - ? DomHandler.getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') - : this.focusInputViewChild?.nativeElement; + event.relatedTarget === this.focusInputViewChild?.nativeElement ? getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInputViewChild?.nativeElement; - DomHandler.focus(focusableEl); + focus(focusableEl); } hasFocusableElements() { - return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; + return getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; } onBackspaceKey(event: KeyboardEvent, pressedInInputText = false) { @@ -1996,8 +2005,8 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte } applyFocus(): void { - if (this.editable) DomHandler.findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext').focus(); - else DomHandler.focus(this.focusInputViewChild?.nativeElement); + if (this.editable) (findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext') as any).focus(); + else focus(this.focusInputViewChild?.nativeElement); } /** * Applies focus. diff --git a/packages/primeng/src/select/style/selectstyle.ts b/packages/primeng/src/select/style/selectstyle.ts index 0978694c5b6..d34b1e03ca6 100644 --- a/packages/primeng/src/select/style/selectstyle.ts +++ b/packages/primeng/src/select/style/selectstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-select { diff --git a/packages/primeng/src/selectbutton/selectbutton.ts b/packages/primeng/src/selectbutton/selectbutton.ts index 8b3a35c2512..4b5da47422e 100755 --- a/packages/primeng/src/selectbutton/selectbutton.ts +++ b/packages/primeng/src/selectbutton/selectbutton.ts @@ -1,13 +1,12 @@ +import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { equals, resolveFieldData } from '@primeuix/utils'; import { Ripple } from 'primeng/ripple'; -import { ObjectUtils } from 'primeng/utils'; -import { SelectButtonChangeEvent, SelectButtonOptionClickEvent } from './selectbutton.interface'; import { ToggleButton } from 'primeng/togglebutton'; -import { BaseComponent } from 'primeng/basecomponent'; +import { SelectButtonChangeEvent, SelectButtonOptionClickEvent } from './selectbutton.interface'; import { SelectButtonStyle } from './style/selectbuttonstyle'; -import { CommonModule } from '@angular/common'; -import { SharedModule } from 'primeng/api'; export const SELECTBUTTON_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -165,15 +164,15 @@ export class SelectButton extends BaseComponent implements ControlValueAccessor _componentStyle = inject(SelectButtonStyle); getOptionLabel(option: any) { - return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option.label != undefined ? option.label : option; + return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option.label != undefined ? option.label : option; } getOptionValue(option: any) { - return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : this.optionLabel || option.value === undefined ? option : option.value; + return this.optionValue ? resolveFieldData(option, this.optionValue) : this.optionLabel || option.value === undefined ? option : option.value; } isOptionDisabled(option: any) { - return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option.disabled !== undefined ? option.disabled : false; + return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : option.disabled !== undefined ? option.disabled : false; } writeValue(value: any): void { @@ -209,7 +208,7 @@ export class SelectButton extends BaseComponent implements ControlValueAccessor let newValue; if (this.multiple) { - if (selected) newValue = this.value.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey)); + if (selected) newValue = this.value.filter((val) => !equals(val, optionValue, this.equalityKey)); else newValue = this.value ? [...this.value, optionValue] : [optionValue]; } else { if (selected && !this.allowEmpty) { @@ -262,7 +261,7 @@ export class SelectButton extends BaseComponent implements ControlValueAccessor } removeOption(option: any): void { - this.value = this.value.filter((val: any) => !ObjectUtils.equals(val, this.getOptionValue(option), this.dataKey)); + this.value = this.value.filter((val: any) => !equals(val, this.getOptionValue(option), this.dataKey)); } isSelected(option: any) { @@ -272,14 +271,14 @@ export class SelectButton extends BaseComponent implements ControlValueAccessor if (this.multiple) { if (this.value && Array.isArray(this.value)) { for (let val of this.value) { - if (ObjectUtils.equals(val, optionValue, this.dataKey)) { + if (equals(val, optionValue, this.dataKey)) { selected = true; break; } } } } else { - selected = ObjectUtils.equals(this.getOptionValue(option), this.value, this.equalityKey); + selected = equals(this.getOptionValue(option), this.value, this.equalityKey); } return selected; diff --git a/packages/primeng/src/selectbutton/style/selectbuttonstyle.ts b/packages/primeng/src/selectbutton/style/selectbuttonstyle.ts index 9eaf98b6cb0..e8aa97e5349 100644 --- a/packages/primeng/src/selectbutton/style/selectbuttonstyle.ts +++ b/packages/primeng/src/selectbutton/style/selectbuttonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-selectbutton { diff --git a/packages/primeng/src/sidebar/sidebar.ts b/packages/primeng/src/sidebar/sidebar.ts index 9d299b39824..db410c050f4 100755 --- a/packages/primeng/src/sidebar/sidebar.ts +++ b/packages/primeng/src/sidebar/sidebar.ts @@ -19,14 +19,13 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { TimesIcon } from 'primeng/icons/times'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; +import { appendChild, blockBodyScroll } from '@primeuix/utils'; +import { ButtonModule, ButtonProps } from 'primeng/button'; import { Ripple } from 'primeng/ripple'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { ZIndexUtils } from 'primeng/utils'; -import { ButtonModule, ButtonProps } from 'primeng/button'; -import { BaseComponent } from 'primeng/basecomponent'; import { DrawerStyle } from './style/drawerstyle'; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); @@ -347,7 +346,7 @@ export class Sidebar extends BaseComponent implements AfterViewInit, AfterConten } if (this.blockScroll) { - DomHandler.blockBodyScroll(); + blockBodyScroll(); } } @@ -377,7 +376,7 @@ export class Sidebar extends BaseComponent implements AfterViewInit, AfterConten appendContainer() { if (this.appendTo) { - return this.appendTo === 'body' ? this.renderer.appendChild(this.document.body, this.container) : DomHandler.appendChild(this.container, this.appendTo); + return this.appendTo === 'body' ? this.renderer.appendChild(this.document.body, this.container) : appendChild(this.container, this.appendTo); } } diff --git a/packages/primeng/src/sidebar/style/drawerstyle.ts b/packages/primeng/src/sidebar/style/drawerstyle.ts index d372be01d61..f5f3ecabf32 100644 --- a/packages/primeng/src/sidebar/style/drawerstyle.ts +++ b/packages/primeng/src/sidebar/style/drawerstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` diff --git a/packages/primeng/src/skeleton/skeleton.ts b/packages/primeng/src/skeleton/skeleton.ts index 815455f3587..98e831aed92 100755 --- a/packages/primeng/src/skeleton/skeleton.ts +++ b/packages/primeng/src/skeleton/skeleton.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { SkeletonStyle } from './style/skeletonstyle'; -import { SharedModule } from 'primeng/api'; /** * Skeleton is a placeholder to display instead of the actual content. diff --git a/packages/primeng/src/skeleton/style/skeletonstyle.ts b/packages/primeng/src/skeleton/style/skeletonstyle.ts index 4d5c0da3b88..ed93796f353 100644 --- a/packages/primeng/src/skeleton/style/skeletonstyle.ts +++ b/packages/primeng/src/skeleton/style/skeletonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-skeleton { diff --git a/packages/primeng/src/slider/slider.ts b/packages/primeng/src/slider/slider.ts index 6e1e024e40b..0a634e69184 100755 --- a/packages/primeng/src/slider/slider.ts +++ b/packages/primeng/src/slider/slider.ts @@ -1,13 +1,12 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, inject, Input, NgModule, NgZone, numberAttribute, OnDestroy, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { DomHandler } from 'primeng/dom'; -import { Nullable, VoidListener } from 'primeng/ts-helpers'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { addClass, getWindowScrollLeft, getWindowScrollTop, removeClass } from '@primeuix/utils'; import { AutoFocus } from 'primeng/autofocus'; +import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { SliderChangeEvent, SliderSlideEndEvent } from './slider.interface'; import { SliderStyle } from './style/sliderstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { SharedModule } from 'primeng/api'; export const SLIDER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -285,7 +284,7 @@ export class Slider extends BaseComponent implements OnDestroy, ControlValueAcce event.preventDefault(); if (this.animate) { - DomHandler.removeClass(this.el.nativeElement.children[0], 'p-slider-animate'); + removeClass(this.el.nativeElement.children[0], 'p-slider-animate'); } } @@ -312,7 +311,7 @@ export class Slider extends BaseComponent implements OnDestroy, ControlValueAcce } if (this.animate) { - DomHandler.removeClass(this.el.nativeElement.children[0], 'p-slider-animate'); + removeClass(this.el.nativeElement.children[0], 'p-slider-animate'); } event.preventDefault(); @@ -348,7 +347,7 @@ export class Slider extends BaseComponent implements OnDestroy, ControlValueAcce else this.onSlideEnd.emit({ originalEvent: event, value: this.value as number }); if (this.animate) { - DomHandler.addClass(this.el.nativeElement.children[0], 'p-slider-animate'); + addClass(this.el.nativeElement.children[0], 'p-slider-animate'); } event.preventDefault(); @@ -472,7 +471,7 @@ export class Slider extends BaseComponent implements OnDestroy, ControlValueAcce else this.onSlideEnd.emit({ originalEvent: event, value: this.value as number }); if (this.animate) { - DomHandler.addClass(this.el.nativeElement.children[0], 'p-slider-animate'); + addClass(this.el.nativeElement.children[0], 'p-slider-animate'); } }); } @@ -576,8 +575,8 @@ export class Slider extends BaseComponent implements OnDestroy, ControlValueAcce updateDomData(): void { let rect = this.el.nativeElement.children[0].getBoundingClientRect(); - this.initX = rect.left + DomHandler.getWindowScrollLeft(); - this.initY = rect.top + DomHandler.getWindowScrollTop(); + this.initX = rect.left + getWindowScrollLeft(); + this.initY = rect.top + getWindowScrollTop(); this.barWidth = this.el.nativeElement.children[0].offsetWidth; this.barHeight = this.el.nativeElement.children[0].offsetHeight; } diff --git a/packages/primeng/src/slider/style/sliderstyle.ts b/packages/primeng/src/slider/style/sliderstyle.ts index ce6720d75cb..350ab1a9a92 100644 --- a/packages/primeng/src/slider/style/sliderstyle.ts +++ b/packages/primeng/src/slider/style/sliderstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-slider { diff --git a/packages/primeng/src/speeddial/speeddial.ts b/packages/primeng/src/speeddial/speeddial.ts index 78e78db6f8d..97c522aa14a 100644 --- a/packages/primeng/src/speeddial/speeddial.ts +++ b/packages/primeng/src/speeddial/speeddial.ts @@ -20,16 +20,15 @@ import { ViewEncapsulation } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MenuItem, SharedModule, TooltipOptions } from 'primeng/api'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { PlusIcon } from '@primeng/icons'; +import { find, findSingle, focus, hasClass, uuid } from '@primeuix/utils'; +import { MenuItem, TooltipOptions } from 'primeng/api'; import { ButtonDirective, ButtonIcon, ButtonProps } from 'primeng/button'; -import { DomHandler } from 'primeng/dom'; -import { PlusIcon } from 'primeng/icons/plus'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; -import { UniqueComponentId } from 'primeng/utils'; import { asapScheduler } from 'rxjs'; import { SpeedDialStyle } from './style/speeddialstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * When pressed, a floating action button can display multiple primary actions that can be performed on a page. @@ -333,15 +332,15 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont ngOnInit() { super.ngOnInit(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } ngAfterViewInit() { super.ngAfterViewInit(); if (isPlatformBrowser(this.platformId)) { if (this.type !== 'linear') { - const button = DomHandler.findSingle(this.container?.nativeElement, '.p-speeddial-button'); - const firstItem = DomHandler.findSingle(this.list?.nativeElement, '.p-speeddial-item'); + const button = findSingle(this.container?.nativeElement, '.p-speeddial-button'); + const firstItem = findSingle(this.list?.nativeElement, '.p-speeddial-item'); if (button && firstItem) { const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth); @@ -513,23 +512,23 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont } onEnterKey(event: any) { - const items = DomHandler.find(this.container.nativeElement, '[data-pc-section="menuitem"]'); + const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]'); const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex()); this.onItemClick(event, this.model[itemIndex]); this.onBlur(event); - const buttonEl = DomHandler.findSingle(this.container.nativeElement, 'button'); + const buttonEl = findSingle(this.container.nativeElement, 'button'); - buttonEl && DomHandler.focus(buttonEl); + buttonEl && focus(buttonEl); } onEscapeKey(event: KeyboardEvent) { this.hide(); - const buttonEl = DomHandler.findSingle(this.container.nativeElement, 'button'); + const buttonEl = findSingle(this.container.nativeElement, 'button'); - buttonEl && DomHandler.focus(buttonEl); + buttonEl && focus(buttonEl); } onTogglerKeydown(event: KeyboardEvent) { @@ -558,7 +557,7 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont onTogglerArrowUp(event) { this.focused = true; - DomHandler.focus(this.list.nativeElement); + focus(this.list.nativeElement); this.show(); this.navigatePrevItem(event); @@ -568,7 +567,7 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont onTogglerArrowDown(event) { this.focused = true; - DomHandler.focus(this.list.nativeElement); + focus(this.list.nativeElement); this.show(); this.navigateNextItem(event); @@ -593,9 +592,9 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont } findPrevOptionIndex(index) { - const items = DomHandler.find(this.container.nativeElement, '[data-pc-section="menuitem"]'); + const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]'); - const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled')); + const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled')); const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index; let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex); @@ -605,8 +604,8 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont } findNextOptionIndex(index) { - const items = DomHandler.find(this.container.nativeElement, '[data-pc-section="menuitem"]'); - const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled')); + const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]'); + const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled')); const newIndex = index === -1 ? filteredItems[0].id : index; let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex); @@ -616,8 +615,8 @@ export class SpeedDial extends BaseComponent implements AfterViewInit, AfterCont } changeFocusedOptionIndex(index) { - const items = DomHandler.find(this.container.nativeElement, '[data-pc-section="menuitem"]'); - const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled')); + const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]'); + const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled')); if (filteredItems[index]) { this.focusedOptionIndex.set(filteredItems[index].getAttribute('id')); diff --git a/packages/primeng/src/speeddial/style/speeddialstyle.ts b/packages/primeng/src/speeddial/style/speeddialstyle.ts index 3600d03c12d..f6311d8b4e2 100644 --- a/packages/primeng/src/speeddial/style/speeddialstyle.ts +++ b/packages/primeng/src/speeddial/style/speeddialstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-speeddial { diff --git a/packages/primeng/src/splitbutton/splitbutton.ts b/packages/primeng/src/splitbutton/splitbutton.ts index 8002b9e1d6a..cd8baaf2305 100755 --- a/packages/primeng/src/splitbutton/splitbutton.ts +++ b/packages/primeng/src/splitbutton/splitbutton.ts @@ -1,17 +1,16 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, Output, signal, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MenuItem, SharedModule, TooltipOptions } from 'primeng/api'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { ChevronDownIcon } from '@primeng/icons'; +import { uuid } from '@primeuix/utils'; +import { MenuItem, TooltipOptions } from 'primeng/api'; +import { AutoFocus } from 'primeng/autofocus'; import { ButtonDirective } from 'primeng/button'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; +import { Ripple } from 'primeng/ripple'; import { TieredMenu } from 'primeng/tieredmenu'; -import { UniqueComponentId } from 'primeng/utils'; -import { AutoFocus } from 'primeng/autofocus'; - +import { TooltipModule } from 'primeng/tooltip'; import { ButtonProps, MenuButtonProps } from './splitbutton.interface'; import { SplitButtonStyle } from './style/splitbuttonstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Ripple } from 'primeng/ripple'; -import { TooltipModule } from 'primeng/tooltip'; type SplitButtonIconPosition = 'left' | 'right'; /** @@ -335,7 +334,7 @@ export class SplitButton extends BaseComponent { ngOnInit() { super.ngOnInit(); - this.ariaId = UniqueComponentId(); + this.ariaId = uuid('pn_id_'); } get containerClass() { diff --git a/packages/primeng/src/splitbutton/style/splitbuttonstyle.ts b/packages/primeng/src/splitbutton/style/splitbuttonstyle.ts index 52afaf665a2..81d28a66514 100644 --- a/packages/primeng/src/splitbutton/style/splitbuttonstyle.ts +++ b/packages/primeng/src/splitbutton/style/splitbuttonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-splitbutton { diff --git a/packages/primeng/src/splitter/splitter.ts b/packages/primeng/src/splitter/splitter.ts index 4c757089fc9..9fe1845ccb8 100755 --- a/packages/primeng/src/splitter/splitter.ts +++ b/packages/primeng/src/splitter/splitter.ts @@ -1,11 +1,10 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, Output, QueryList, ViewChild, ViewEncapsulation } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { addClass, getHeight, getOuterHeight, getOuterWidth, getWidth, hasClass, removeClass } from '@primeuix/utils'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { SplitterResizeEndEvent, SplitterResizeStartEvent } from './splitter.interface'; -import { BaseComponent } from 'primeng/basecomponent'; import { SplitterStyle } from './style/splitterstyle'; -import { SharedModule } from 'primeng/api'; /** * Splitter is utilized to separate and resize panels. @@ -116,7 +115,7 @@ export class Splitter extends BaseComponent { this._panelSizes = val; if (this.el && this.el.nativeElement && this.panels.length > 0) { - let children = [...this.el.nativeElement.children[0].children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel')); + let children = [...this.el.nativeElement.children[0].children].filter((child) => hasClass(child, 'p-splitter-panel')); let _panelSizes = []; this.panels.map((panel, i) => { @@ -204,7 +203,7 @@ export class Splitter extends BaseComponent { } if (!initialized) { - let children = [...this.el.nativeElement.children[0].children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel')); + let children = [...this.el.nativeElement.children[0].children].filter((child) => hasClass(child, 'p-splitter-panel')); let _panelSizes = []; this.panels.map((panel, i) => { @@ -224,7 +223,7 @@ export class Splitter extends BaseComponent { resizeStart(event: TouchEvent | MouseEvent, index: number, isKeyDown?: boolean) { this.gutterElement = (event.currentTarget as HTMLElement) || (event.target as HTMLElement).parentElement; - this.size = this.horizontal() ? DomHandler.getWidth((this.containerViewChild as ElementRef).nativeElement) : DomHandler.getHeight((this.containerViewChild as ElementRef).nativeElement); + this.size = this.horizontal() ? getWidth((this.containerViewChild as ElementRef).nativeElement) : getHeight((this.containerViewChild as ElementRef).nativeElement); if (!isKeyDown) { this.dragging = true; @@ -235,17 +234,17 @@ export class Splitter extends BaseComponent { this.nextPanelElement = this.gutterElement.nextElementSibling as HTMLElement; if (isKeyDown) { - this.prevPanelSize = this.horizontal() ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true); - this.nextPanelSize = this.horizontal() ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true); + this.prevPanelSize = this.horizontal() ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true); + this.nextPanelSize = this.horizontal() ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true); } else { - this.prevPanelSize = (100 * (this.horizontal() ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size; - this.nextPanelSize = (100 * (this.horizontal() ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size; + this.prevPanelSize = (100 * (this.horizontal() ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true))) / this.size; + this.nextPanelSize = (100 * (this.horizontal() ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true))) / this.size; } this.prevPanelIndex = index; - DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing'); + addClass(this.gutterElement, 'p-splitter-gutter-resizing'); this.gutterElement.setAttribute('data-p-gutter-resizing', 'true'); - DomHandler.addClass((this.containerViewChild as ElementRef).nativeElement, 'p-splitter-resizing'); + addClass((this.containerViewChild as ElementRef).nativeElement, 'p-splitter-resizing'); this.containerViewChild.nativeElement.setAttribute('data-p-resizing', 'true'); this.onResizeStart.emit({ originalEvent: event, sizes: this._panelSizes as number[] }); } @@ -285,8 +284,8 @@ export class Splitter extends BaseComponent { } this.onResizeEnd.emit({ originalEvent: event, sizes: this._panelSizes }); - DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing'); - DomHandler.removeClass((this.containerViewChild as ElementRef).nativeElement, 'p-splitter-resizing'); + removeClass(this.gutterElement as any, 'p-splitter-gutter-resizing'); + removeClass((this.containerViewChild as ElementRef).nativeElement, 'p-splitter-resizing'); this.clear(); } @@ -464,7 +463,7 @@ export class Splitter extends BaseComponent { isNested() { if (this.el.nativeElement) { let parent = this.el.nativeElement.parentElement; - while (parent && !DomHandler.hasClass(parent, 'p-splitter')) { + while (parent && !hasClass(parent, 'p-splitter')) { parent = parent.parentElement; } @@ -505,7 +504,7 @@ export class Splitter extends BaseComponent { if (stateString) { this._panelSizes = JSON.parse(stateString); - let children = [...(this.containerViewChild as ElementRef).nativeElement.children].filter((child) => DomHandler.hasClass(child, 'p-splitter-panel')); + let children = [...(this.containerViewChild as ElementRef).nativeElement.children].filter((child) => hasClass(child, 'p-splitter-panel')); children.forEach((child, i) => { child.style.flexBasis = 'calc(' + this._panelSizes[i] + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)'; }); diff --git a/packages/primeng/src/splitter/style/splitterstyle.ts b/packages/primeng/src/splitter/style/splitterstyle.ts index 12f10bd356d..3190e7496e7 100644 --- a/packages/primeng/src/splitter/style/splitterstyle.ts +++ b/packages/primeng/src/splitter/style/splitterstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-splitter { diff --git a/packages/primeng/src/stepper/stepper.ts b/packages/primeng/src/stepper/stepper.ts index 2459ffc8885..179cd47d08b 100644 --- a/packages/primeng/src/stepper/stepper.ts +++ b/packages/primeng/src/stepper/stepper.ts @@ -21,12 +21,11 @@ import { ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; -import { ObjectUtils, transformToBoolean, UniqueComponentId } from 'primeng/utils'; -import { StepperStyle } from './style/stepperstyle'; -import { DomHandler } from 'primeng/dom'; import { animate, state, style, transition, trigger } from '@angular/animations'; -import { SharedModule } from 'primeng/api'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { find, findIndexInList, uuid } from '@primeuix/utils'; +import { transformToBoolean } from 'primeng/utils'; +import { StepperStyle } from './style/stepperstyle'; /** * Context interface for the StepPanel content template. @@ -202,8 +201,8 @@ export class Step extends BaseComponent implements AfterContentInit { isSeparatorVisible = computed(() => { if (this.pcStepper.stepList()) { - const index = ObjectUtils.findIndexInList(this.el.nativeElement, this.pcStepper.stepList().el.nativeElement.children); - const stepLen = DomHandler.find(this.pcStepper.stepList().el.nativeElement, '[data-pc-name="step"]').length; + const index = findIndexInList(this.el.nativeElement, this.pcStepper.stepList().el.nativeElement.children); + const stepLen = find(this.pcStepper.stepList().el.nativeElement, '[data-pc-name="step"]').length; return index !== stepLen - 1; } }); @@ -303,8 +302,8 @@ export class StepPanel extends BaseComponent implements AfterContentInit { isSeparatorVisible = computed(() => { if (this.pcStepper.stepItems()) { const stepLen = this.pcStepper.stepItems().length; - const stepPanelElements = DomHandler.find(this.pcStepper.el.nativeElement, '[data-pc-name="steppanel"]'); - const index = ObjectUtils.findIndexInList(this.el.nativeElement, stepPanelElements); + const stepPanelElements = find(this.pcStepper.el.nativeElement, '[data-pc-name="steppanel"]'); + const index = findIndexInList(this.el.nativeElement, stepPanelElements); return index !== stepLen - 1; } @@ -392,7 +391,7 @@ export class Stepper extends BaseComponent { _componentStyle = inject(StepperStyle); - id = signal(UniqueComponentId()); + id = signal(uuid('pn_id_')); stepItems = contentChildren(StepItem); diff --git a/packages/primeng/src/stepper/style/stepperstyle.ts b/packages/primeng/src/stepper/style/stepperstyle.ts index f477f23172f..ea9f16f1113 100644 --- a/packages/primeng/src/stepper/style/stepperstyle.ts +++ b/packages/primeng/src/stepper/style/stepperstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-steplist { diff --git a/packages/primeng/src/steps/steps.ts b/packages/primeng/src/steps/steps.ts index a3d906a2fc0..9300ff75155 100755 --- a/packages/primeng/src/steps/steps.ts +++ b/packages/primeng/src/steps/steps.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; -import { DomHandler } from 'primeng/dom'; -import { Nullable } from 'primeng/ts-helpers'; -import { MenuItem, SharedModule } from 'primeng/api'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { find, findSingle } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; import { TooltipModule } from 'primeng/tooltip'; +import { Nullable } from 'primeng/ts-helpers'; import { Subscription } from 'rxjs'; import { StepsStyle } from './style/stepsstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Steps components is an indicator for the steps in a wizard workflow. @@ -189,7 +189,7 @@ export class Steps extends BaseComponent implements OnInit, OnDestroy { case 'Tab': if (i !== this.activeIndex) { - const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]'); + const siblings = find(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]'); siblings[i].children[0].tabIndex = '-1'; siblings[this.activeIndex].children[0].tabIndex = '0'; } @@ -238,12 +238,12 @@ export class Steps extends BaseComponent implements OnInit, OnDestroy { return prevItem ? prevItem.children[0] : null; } findFirstItem() { - const firstSibling = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]'); + const firstSibling = findSingle(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]'); return firstSibling ? firstSibling.children[0] : null; } findLastItem() { - const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]'); + const siblings = find(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]'); return siblings ? siblings[siblings.length - 1].children[0] : null; } diff --git a/packages/primeng/src/steps/style/stepsstyle.ts b/packages/primeng/src/steps/style/stepsstyle.ts index 7779526c3f3..bd90cdcc629 100644 --- a/packages/primeng/src/steps/style/stepsstyle.ts +++ b/packages/primeng/src/steps/style/stepsstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-steps { diff --git a/packages/primeng/src/styleclass/styleclass.ts b/packages/primeng/src/styleclass/styleclass.ts index aa3fd1b9344..45e8a47f06d 100644 --- a/packages/primeng/src/styleclass/styleclass.ts +++ b/packages/primeng/src/styleclass/styleclass.ts @@ -1,5 +1,5 @@ import { booleanAttribute, Directive, ElementRef, HostListener, Input, NgModule, NgZone, OnDestroy, Renderer2 } from '@angular/core'; -import { DomHandler } from 'primeng/dom'; +import { addClass, hasClass, removeClass } from '@primeuix/utils'; import { VoidListener } from 'primeng/ts-helpers'; /** @@ -122,8 +122,8 @@ export class StyleClass implements OnDestroy { } toggle() { - if (DomHandler.hasClass(this.target, this.toggleClass as string)) DomHandler.removeClass(this.target, this.toggleClass as string); - else DomHandler.addClass(this.target, this.toggleClass as string); + if (hasClass(this.target, this.toggleClass as string)) removeClass(this.target, this.toggleClass as string); + else addClass(this.target, this.toggleClass as string); } enter() { @@ -133,21 +133,21 @@ export class StyleClass implements OnDestroy { if (this.enterActiveClass === 'animate-slidedown') { (this.target as HTMLElement).style.height = '0px'; - DomHandler.removeClass(this.target, 'hidden'); + removeClass(this.target, 'hidden'); (this.target as HTMLElement).style.maxHeight = (this.target as HTMLElement).scrollHeight + 'px'; - DomHandler.addClass(this.target, 'hidden'); + addClass(this.target, 'hidden'); (this.target as HTMLElement).style.height = ''; } - DomHandler.addClass(this.target, this.enterActiveClass); + addClass(this.target, this.enterActiveClass); if (this.enterClass || this.enterFromClass) { - DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass); + removeClass(this.target, this.enterClass || this.enterFromClass); } this.enterListener = this.renderer.listen(this.target, 'animationend', () => { - DomHandler.removeClass(this.target, this.enterActiveClass as string); + removeClass(this.target, this.enterActiveClass as string); if (this.enterToClass) { - DomHandler.addClass(this.target, this.enterToClass); + addClass(this.target, this.enterToClass); } this.enterListener && this.enterListener(); @@ -159,11 +159,11 @@ export class StyleClass implements OnDestroy { } } else { if (this.enterClass || this.enterFromClass) { - DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass); + removeClass(this.target, this.enterClass || this.enterFromClass); } if (this.enterToClass) { - DomHandler.addClass(this.target, this.enterToClass); + addClass(this.target, this.enterToClass); } } @@ -180,15 +180,15 @@ export class StyleClass implements OnDestroy { if (this.leaveActiveClass) { if (!this.animating) { this.animating = true; - DomHandler.addClass(this.target, this.leaveActiveClass); + addClass(this.target, this.leaveActiveClass); if (this.leaveClass || this.leaveFromClass) { - DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass); + removeClass(this.target, this.leaveClass || this.leaveFromClass); } this.leaveListener = this.renderer.listen(this.target, 'animationend', () => { - DomHandler.removeClass(this.target, this.leaveActiveClass as string); + removeClass(this.target, this.leaveActiveClass as string); if (this.leaveToClass) { - DomHandler.addClass(this.target, this.leaveToClass); + addClass(this.target, this.leaveToClass); } this.leaveListener && this.leaveListener(); this.animating = false; @@ -196,11 +196,11 @@ export class StyleClass implements OnDestroy { } } else { if (this.leaveClass || this.leaveFromClass) { - DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass); + removeClass(this.target, this.leaveClass || this.leaveFromClass); } if (this.leaveToClass) { - DomHandler.addClass(this.target, this.leaveToClass); + addClass(this.target, this.leaveToClass); } } diff --git a/packages/primeng/src/table/style/tablestyle.ts b/packages/primeng/src/table/style/tablestyle.ts index 4d8e7f19e0e..5b4b1f8a8df 100644 --- a/packages/primeng/src/table/style/tablestyle.ts +++ b/packages/primeng/src/table/style/tablestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-datatable { diff --git a/packages/primeng/src/table/table.interface.ts b/packages/primeng/src/table/table.interface.ts index 9e47e02b0c8..7c3d6ff4578 100644 --- a/packages/primeng/src/table/table.interface.ts +++ b/packages/primeng/src/table/table.interface.ts @@ -1,7 +1,8 @@ -import { FilterMetadata, LazyLoadMeta, TableState } from 'primeng/api'; -import { Table } from './table'; import { TemplateRef } from '@angular/core'; +import { FilterMetadata } from '@primeng/core'; +import { LazyLoadMeta } from 'primeng/api'; import { ButtonProps } from 'primeng/button'; +import { Table } from './table'; /** * Custom select event. * @see {@link Table.onRowSelect} diff --git a/packages/primeng/src/table/table.spec.ts b/packages/primeng/src/table/table.spec.ts index 91e3732c3ca..5cafd0ca53e 100755 --- a/packages/primeng/src/table/table.spec.ts +++ b/packages/primeng/src/table/table.spec.ts @@ -4,11 +4,11 @@ import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterTestingModule } from '@angular/router/testing'; -import { SharedModule } from 'primeng/api'; +import { SharedModule } from '@primeng/core'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { DropdownModule } from 'primeng/dropdown'; -import { EditableColumn, Table, TableModule } from './table'; import type { Paginator } from '../paginator/paginator'; +import { EditableColumn, Table, TableModule } from './table'; @Component({ template: ` diff --git a/packages/primeng/src/table/table.ts b/packages/primeng/src/table/table.ts index 78a6d0b96dc..8b1955a1751 100644 --- a/packages/primeng/src/table/table.ts +++ b/packages/primeng/src/table/table.ts @@ -34,28 +34,52 @@ import { ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { BlockableUI, FilterMatchMode, FilterMetadata, FilterOperator, FilterService, LazyLoadMeta, OverlayService, PrimeTemplate, ScrollerOptions, SelectItem, SharedModule, SortMeta, TableState, TranslationKeys } from 'primeng/api'; +import { BaseComponent, FilterMatchMode, FilterMetadata, FilterOperator, FilterService, OverlayService, PrimeTemplate, SharedModule, SortMeta, TranslationKeys } from '@primeng/core'; +import { ArrowDownIcon, ArrowUpIcon, CheckIcon, FilterIcon, FilterSlashIcon, PlusIcon, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, SpinnerIcon, TrashIcon } from '@primeng/icons'; +import { + absolutePosition, + addClass, + clearSelection, + equals, + find, + findIndexInList, + findSingle, + focus, + getAttribute, + getFirstFocusableElement, + getFocusableElements, + getHiddenElementOuterHeight, + getHiddenElementOuterWidth, + getIndex, + getOffset, + getOuterHeight, + getOuterWidth, + hasClass, + invokeElementMethod, + isNotEmpty, + isTouchDevice, + removeClass, + reorderArray, + resolveFieldData, + setAttribute, + uuid +} from '@primeuix/utils'; +import { BlockableUI, LazyLoadMeta, ScrollerOptions, SelectItem, TableState } from 'primeng/api'; import { Button, ButtonDirective } from 'primeng/button'; +import { Checkbox } from 'primeng/checkbox'; +import { DatePicker } from 'primeng/datepicker'; import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; -import { ArrowDownIcon } from 'primeng/icons/arrowdown'; -import { ArrowUpIcon } from 'primeng/icons/arrowup'; -import { CheckIcon } from 'primeng/icons/check'; -import { FilterIcon } from 'primeng/icons/filter'; -import { FilterSlashIcon } from 'primeng/icons/filterslash'; -import { PlusIcon } from 'primeng/icons/plus'; -import { SortAltIcon } from 'primeng/icons/sortalt'; -import { SortAmountDownIcon } from 'primeng/icons/sortamountdown'; -import { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt'; -import { SpinnerIcon } from 'primeng/icons/spinner'; -import { TrashIcon } from 'primeng/icons/trash'; import { InputNumber } from 'primeng/inputnumber'; import { InputText } from 'primeng/inputtext'; import { Paginator } from 'primeng/paginator'; +import { RadioButton, RadioButtonClickEvent } from 'primeng/radiobutton'; import { Scroller } from 'primeng/scroller'; +import { Select } from 'primeng/select'; import { SelectButton } from 'primeng/selectbutton'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ObjectUtils, ZIndexUtils } from 'primeng/utils'; import { Subject, Subscription } from 'rxjs'; +import { TableStyle } from './style/tablestyle'; import { ExportCSVOptions, TableColResizeEvent, @@ -76,12 +100,6 @@ import { TableRowUnSelectEvent, TableSelectAllChangeEvent } from './table.interface'; -import { Checkbox } from 'primeng/checkbox'; -import { TableStyle } from './style/tablestyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { RadioButton, RadioButtonClickEvent } from 'primeng/radiobutton'; -import { Select } from 'primeng/select'; -import { DatePicker } from 'primeng/datepicker'; @Injectable() export class TableService { @@ -178,7 +196,7 @@ export class FrozenColumn implements AfterViewInit { @HostListener('window:resize', ['$event']) recalculateColumns() { const siblings = DomHandler.siblings(this.el.nativeElement); - const index = DomHandler.index(this.el.nativeElement); + const index = getIndex(this.el.nativeElement); const time = (siblings.length - index + 1) * 50; setTimeout(() => { @@ -192,14 +210,14 @@ export class FrozenColumn implements AfterViewInit { let right = 0; let next = this.el.nativeElement.nextElementSibling; if (next) { - right = DomHandler.getOuterWidth(next) + (parseFloat(next.style.right) || 0); + right = getOuterWidth(next) + (parseFloat(next.style.right) || 0); } this.el.nativeElement.style.right = right + 'px'; } else { let left = 0; let prev = this.el.nativeElement.previousElementSibling; if (prev) { - left = DomHandler.getOuterWidth(prev) + (parseFloat(prev.style.left) || 0); + left = getOuterWidth(prev) + (parseFloat(prev.style.left) || 0); } this.el.nativeElement.style.left = left + 'px'; } @@ -207,7 +225,7 @@ export class FrozenColumn implements AfterViewInit { const filterRow = this.el.nativeElement?.parentElement?.nextElementSibling; if (filterRow) { - let index = DomHandler.index(this.el.nativeElement); + let index = getIndex(this.el.nativeElement); if (filterRow.children && filterRow.children[index]) { filterRow.children[index].style.left = this.el.nativeElement.style.left; filterRow.children[index].style.right = this.el.nativeElement.style.right; @@ -267,7 +285,7 @@ export class SortableColumn implements OnInit, OnDestroy { field: this.field }); - DomHandler.clearSelection(); + clearSelection(); } } @@ -294,7 +312,7 @@ export class SortableColumn implements OnInit, OnDestroy { } private isFilterElementIconOrButton(element: HTMLElement) { - return DomHandler.hasClass(element, 'pi-filter-icon') || DomHandler.hasClass(element, 'p-column-filter-menu-button'); + return hasClass(element, 'pi-filter-icon') || hasClass(element, 'p-column-filter-menu-button'); } } @@ -535,7 +553,7 @@ export class SelectableRow implements OnInit, OnDestroy { if (event.ctrlKey && event.shiftKey) { const data = this.dt.dataToRender(this.dt.rows); - const lastSelectableRowIndex = DomHandler.getAttribute(lastRow, 'index'); + const lastSelectableRowIndex = getAttribute(lastRow, 'index'); this.dt.anchorRowIndex = lastSelectableRowIndex; this.dt.selection = data.slice(this.index, data.length); @@ -551,7 +569,7 @@ export class SelectableRow implements OnInit, OnDestroy { if (event.ctrlKey && event.shiftKey) { const data = this.dt.dataToRender(this.dt.rows); - const firstSelectableRowIndex = DomHandler.getAttribute(firstRow, 'index'); + const firstSelectableRowIndex = getAttribute(firstRow, 'index'); this.dt.anchorRowIndex = this.dt.anchorRowIndex || firstSelectableRowIndex; this.dt.selection = data.slice(0, this.index + 1); @@ -571,14 +589,14 @@ export class SelectableRow implements OnInit, OnDestroy { const data = this.dt.dataToRender(this.dt.rows); let index; - if (ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) { + if (isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) { let firstSelectedRowIndex, lastSelectedRowIndex; - firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[0], data); - lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[this.dt.selection.length - 1], data); + firstSelectedRowIndex = findIndexInList(this.dt.selection[0], data); + lastSelectedRowIndex = findIndexInList(this.dt.selection[this.dt.selection.length - 1], data); index = this.index <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex; } else { - index = ObjectUtils.findIndexInList(this.dt.selection, data); + index = findIndexInList(this.dt.selection, data); } this.dt.anchorRowIndex = index; @@ -593,17 +611,17 @@ export class SelectableRow implements OnInit, OnDestroy { focusRowChange(firstFocusableRow, currentFocusedRow) { firstFocusableRow.tabIndex = '-1'; currentFocusedRow.tabIndex = '0'; - DomHandler.focus(currentFocusedRow); + focus(currentFocusedRow); } findLastSelectableRow() { - const rows = DomHandler.find(this.dt.el.nativeElement, '.p-datatable-selectable-row'); + const rows = find(this.dt.el.nativeElement, '.p-datatable-selectable-row'); return rows ? rows[rows.length - 1] : null; } findFirstSelectableRow() { - const firstRow = DomHandler.findSingle(this.dt.el.nativeElement, '.p-datatable-selectable-row'); + const firstRow = findSingle(this.dt.el.nativeElement, '.p-datatable-selectable-row'); return firstRow; } @@ -611,7 +629,7 @@ export class SelectableRow implements OnInit, OnDestroy { findNextSelectableRow(row: HTMLTableRowElement): HTMLTableRowElement | null { let nextRow = row.nextElementSibling; if (nextRow) { - if (DomHandler.hasClass(nextRow, 'p-selectable-row')) return nextRow; + if (hasClass(nextRow, 'p-selectable-row')) return nextRow; else return this.findNextSelectableRow(nextRow); } else { return null; @@ -621,7 +639,7 @@ export class SelectableRow implements OnInit, OnDestroy { findPrevSelectableRow(row: HTMLTableRowElement): HTMLTableRowElement | null { let prevRow = row.previousElementSibling; if (prevRow) { - if (DomHandler.hasClass(prevRow, 'p-selectable-row')) return prevRow; + if (hasClass(prevRow, 'p-selectable-row')) return prevRow; else return this.findPrevSelectableRow(prevRow); } else { return null; @@ -821,7 +839,7 @@ export class ResizableColumn implements AfterViewInit, OnDestroy { ngAfterViewInit() { if (isPlatformBrowser(this.platformId)) { if (this.isEnabled()) { - DomHandler.addClass(this.el.nativeElement, 'p-datatable-resizable-column'); + addClass(this.el.nativeElement, 'p-datatable-resizable-column'); this.resizer = this.renderer.createElement('span'); this.renderer.addClass(this.resizer, 'p-datatable-column-resizer'); this.renderer.appendChild(this.el.nativeElement, this.resizer); @@ -984,7 +1002,7 @@ export class ReorderableColumn implements AfterViewInit, OnDestroy { } onMouseDown(event: any) { - if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-datatable-column-resizer')) this.el.nativeElement.draggable = false; + if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || hasClass(event.target, 'p-datatable-column-resizer')) this.el.nativeElement.draggable = false; else this.el.nativeElement.draggable = true; } @@ -1051,7 +1069,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { ngAfterViewInit() { if (this.isEnabled()) { - DomHandler.addClass(this.el.nativeElement, 'p-editable-column'); + addClass(this.el.nativeElement, 'p-editable-column'); } } @@ -1077,7 +1095,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { openCell() { this.dt.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex); - DomHandler.addClass(this.el.nativeElement, 'p-cell-editing'); + addClass(this.el.nativeElement, 'p-cell-editing'); this.dt.onEditInit.emit({ field: this.field, data: this.data, @@ -1086,7 +1104,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { this.zone.runOutsideAngular(() => { setTimeout(() => { let focusCellSelector = this.pFocusCellSelector || 'input, textarea, select'; - let focusableElement = DomHandler.findSingle(this.el.nativeElement, focusCellSelector); + let focusableElement = findSingle(this.el.nativeElement, focusCellSelector); if (focusableElement) { focusableElement.focus(); @@ -1123,7 +1141,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { }); } - DomHandler.removeClass(this.dt.editingCell, 'p-cell-editing'); + removeClass(this.dt.editingCell, 'p-cell-editing'); this.dt.editingCell = null; this.dt.editingCellData = null; this.dt.editingCellField = null; @@ -1184,7 +1202,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { if (this.isEnabled()) { let currentCell = this.findCell(event.target); if (currentCell) { - let cellIndex = DomHandler.index(currentCell); + let cellIndex = getIndex(currentCell); let targetCell = this.findNextEditableColumnByIndex(currentCell, cellIndex); if (targetCell) { @@ -1192,8 +1210,8 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { this.closeEditingCell(true, event); } - DomHandler.invokeElementMethod(event.target, 'blur'); - DomHandler.invokeElementMethod(targetCell, 'click'); + invokeElementMethod(event.target as any, 'blur', undefined); + invokeElementMethod(targetCell, 'click', undefined); } event.preventDefault(); @@ -1206,7 +1224,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { if (this.isEnabled()) { let currentCell = this.findCell(event.target); if (currentCell) { - let cellIndex = DomHandler.index(currentCell); + let cellIndex = getIndex(currentCell); let targetCell = this.findPrevEditableColumnByIndex(currentCell, cellIndex); if (targetCell) { @@ -1214,8 +1232,8 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { this.closeEditingCell(true, event); } - DomHandler.invokeElementMethod(event.target, 'blur'); - DomHandler.invokeElementMethod(targetCell, 'click'); + invokeElementMethod(event.target as any, 'blur', undefined); + invokeElementMethod(targetCell, 'click', undefined); } event.preventDefault(); @@ -1240,7 +1258,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { findCell(element: any) { if (element) { let cell = element; - while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) { + while (cell && !hasClass(cell, 'p-cell-editing')) { cell = cell.parentElement; } @@ -1260,8 +1278,8 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { this.closeEditingCell(true, event); } - DomHandler.invokeElementMethod(event.target, 'blur'); - DomHandler.invokeElementMethod(targetCell, 'click'); + invokeElementMethod(event.target as any, 'blur', undefined); + invokeElementMethod(targetCell, 'click', undefined); event.preventDefault(); } } @@ -1277,8 +1295,8 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { this.closeEditingCell(true, event); } - DomHandler.invokeElementMethod(event.target, 'blur'); - DomHandler.invokeElementMethod(targetCell, 'click'); + invokeElementMethod(event.target as any, 'blur', undefined); + invokeElementMethod(targetCell, 'click', undefined); event.preventDefault(); } else { if (this.dt.isEditingCellValid()) { @@ -1299,7 +1317,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { } if (prevCell) { - if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell; + if (hasClass(prevCell, 'p-editable-column')) return prevCell; else return this.findPreviousEditableColumn(prevCell); } else { return null; @@ -1317,7 +1335,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { } if (nextCell) { - if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell; + if (hasClass(nextCell, 'p-editable-column')) return nextCell; else return this.findNextEditableColumn(nextCell); } else { return null; @@ -1330,7 +1348,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { if (nextRow) { let nextCell = nextRow.children[index]; - if (nextCell && DomHandler.hasClass(nextCell, 'p-editable-column')) { + if (nextCell && hasClass(nextCell, 'p-editable-column')) { return nextCell; } @@ -1346,7 +1364,7 @@ export class EditableColumn implements OnChanges, AfterViewInit, OnDestroy { if (prevRow) { let prevCell = prevRow.children[index]; - if (prevCell && DomHandler.hasClass(prevCell, 'p-editable-column')) { + if (prevCell && hasClass(prevCell, 'p-editable-column')) { return prevCell; } @@ -1529,7 +1547,7 @@ export class TableRadioButton { this.inputViewChild?.inputViewChild.nativeElement?.focus(); } - DomHandler.clearSelection(); + clearSelection(); } ngOnDestroy() { @@ -1602,7 +1620,7 @@ export class TableCheckbox { this.value ); } - DomHandler.clearSelection(); + clearSelection(); } onFocus() { @@ -1679,7 +1697,7 @@ export class TableHeaderCheckbox { } } - DomHandler.clearSelection(); + clearSelection(); } onFocus() { @@ -1714,7 +1732,7 @@ export class TableHeaderCheckbox { const val = this.dt.frozenValue ? [...this.dt.frozenValue, ...data] : data; const selectableVal = this.dt.rowSelectable ? val.filter((data: any, index: number) => this.dt.rowSelectable({ data, index })) : val; - return ObjectUtils.isNotEmpty(selectableVal) && ObjectUtils.isNotEmpty(this.dt.selection) && selectableVal.every((v: any) => this.dt.selection.some((s: any) => this.dt.equals(v, s))); + return isNotEmpty(selectableVal) && isNotEmpty(this.dt.selection) && selectableVal.every((v: any) => this.dt.selection.some((s: any) => this.dt.equals(v, s))); } } } @@ -1730,7 +1748,7 @@ export class ReorderableRowHandle implements AfterViewInit { constructor(public el: ElementRef) {} ngAfterViewInit() { - // DomHandler.addClass(this.el.nativeElement, 'p-datatable-reorderable-row-handle'); + // addClass(this.el.nativeElement, 'p-datatable-reorderable-row-handle'); } } @@ -2468,7 +2486,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { ngOnInit() { super.ngOnInit(); - this.overlayId = UniqueComponentId(); + this.overlayId = uuid('pn_id_'); if (!this.dt.filters[this.field]) { this.initFieldFilterConstraint(); } @@ -2620,7 +2638,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { matchMode: this.getDefaultMatchMode(), operator: this.getDefaultOperator() }); - DomHandler.focus(this.clearButtonViewChild.nativeElement); + focus(this.clearButtonViewChild.nativeElement); } removeConstraint(filterMeta: FilterMetadata) { @@ -2628,7 +2646,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { if (!this.showApplyButton) { this.dt._filter(); } - DomHandler.focus(this.clearButtonViewChild.nativeElement); + focus(this.clearButtonViewChild.nativeElement); } onOperatorChange(value: any) { @@ -2655,7 +2673,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { case 'ArrowDown': if (this.overlayVisible) { - let focusable = DomHandler.getFocusableElements(this.overlay); + let focusable = getFocusableElements(this.overlay); if (focusable) { focusable[0].focus(); } @@ -2680,14 +2698,14 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { findNextItem(item: HTMLLIElement): any { let nextItem = item.nextElementSibling; - if (nextItem) return DomHandler.hasClass(nextItem, 'p-datatable-filter-constraint-separator') ? this.findNextItem(nextItem) : nextItem; + if (nextItem) return hasClass(nextItem, 'p-datatable-filter-constraint-separator') ? this.findNextItem(nextItem) : nextItem; else return item.parentElement?.firstElementChild; } findPrevItem(item: HTMLLIElement): any { let prevItem = item.previousElementSibling; - if (prevItem) return DomHandler.hasClass(prevItem, 'p-datatable-filter-constraint-separator') ? this.findPrevItem(prevItem) : prevItem; + if (prevItem) return hasClass(prevItem, 'p-datatable-filter-constraint-separator') ? this.findPrevItem(prevItem) : prevItem; else return item.parentElement?.lastElementChild; } @@ -2701,7 +2719,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { this.overlay = event.element; this.renderer.appendChild(this.document.body, this.overlay); ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay); - DomHandler.absolutePosition(this.overlay, this.icon?.nativeElement); + absolutePosition(this.overlay, this.icon?.nativeElement); this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); @@ -2740,7 +2758,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { focusOnFirstElement() { if (this.overlay) { - DomHandler.focus(DomHandler.getFirstFocusableElement(this.overlay, '')); + focus(getFirstFocusableElement(this.overlay, '') as any); } } @@ -2765,16 +2783,16 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { isOutsideClicked(event: any): boolean { return !( - DomHandler.hasClass(this.overlay?.nextElementSibling, 'p-overlay') || - DomHandler.hasClass(this.overlay?.nextElementSibling, 'p-popover') || + hasClass(this.overlay?.nextElementSibling, 'p-overlay') || + hasClass(this.overlay?.nextElementSibling, 'p-popover') || this.overlay?.isSameNode(event.target) || this.overlay?.contains(event.target) || this.icon?.nativeElement.isSameNode(event.target) || this.icon?.nativeElement.contains(event.target) || - DomHandler.hasClass(event.target, 'p-datatable-filter-add-rule-button') || - DomHandler.hasClass(event.target.parentElement, 'p-datatable-filter-add-rule-button') || - DomHandler.hasClass(event.target, 'p-datatable-filter-remove-rule-button') || - DomHandler.hasClass(event.target.parentElement, 'p-datatable-filter-remove-rule-button') + hasClass(event.target, 'p-datatable-filter-add-rule-button') || + hasClass(event.target.parentElement, 'p-datatable-filter-add-rule-button') || + hasClass(event.target, 'p-datatable-filter-remove-rule-button') || + hasClass(event.target.parentElement, 'p-datatable-filter-remove-rule-button') ); } @@ -2805,7 +2823,7 @@ export class ColumnFilter extends BaseComponent implements AfterContentInit { bindDocumentResizeListener() { if (!this.documentResizeListener) { this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => { - if (this.overlayVisible && !DomHandler.isTouchDevice()) { + if (this.overlayVisible && !isTouchDevice()) { this.hide(); } }); @@ -3102,10 +3120,10 @@ export class TableBody implements AfterViewInit, OnDestroy { } shouldRenderRowGroupHeader(value: any, rowData: any, i: number) { - let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy); + let currentRowFieldData = resolveFieldData(rowData, this.dt.groupRowsBy); let prevRowData = value[i - (1 + this.dt._first)]; if (prevRowData) { - let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.dt.groupRowsBy); + let previousRowFieldData = resolveFieldData(prevRowData, this.dt.groupRowsBy); return currentRowFieldData !== previousRowFieldData; } else { return true; @@ -3113,10 +3131,10 @@ export class TableBody implements AfterViewInit, OnDestroy { } shouldRenderRowGroupFooter(value: any, rowData: any, i: number) { - let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy); + let currentRowFieldData = resolveFieldData(rowData, this.dt.groupRowsBy); let nextRowData = value[i + (1 + this.dt._first)]; if (nextRowData) { - let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.dt.groupRowsBy); + let nextRowFieldData = resolveFieldData(nextRowData, this.dt.groupRowsBy); return currentRowFieldData !== nextRowFieldData; } else { return true; @@ -3124,10 +3142,10 @@ export class TableBody implements AfterViewInit, OnDestroy { } shouldRenderRowspan(value: any, rowData: any, i: number) { - let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy); + let currentRowFieldData = resolveFieldData(rowData, this.dt.groupRowsBy); let prevRowData = value[i - 1]; if (prevRowData) { - let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.dt.groupRowsBy); + let previousRowFieldData = resolveFieldData(prevRowData, this.dt.groupRowsBy); return currentRowFieldData !== previousRowFieldData; } else { return true; @@ -3135,7 +3153,7 @@ export class TableBody implements AfterViewInit, OnDestroy { } calculateRowGroupSize(value: any, rowData: any, index: number) { - let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.dt.groupRowsBy); + let currentRowFieldData = resolveFieldData(rowData, this.dt.groupRowsBy); let nextRowFieldData = currentRowFieldData; let groupRowSpan = 0; @@ -3143,7 +3161,7 @@ export class TableBody implements AfterViewInit, OnDestroy { groupRowSpan++; let nextRowData = value[++index]; if (nextRowData) { - nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.dt.groupRowsBy); + nextRowFieldData = resolveFieldData(nextRowData, this.dt.groupRowsBy); } else { break; } @@ -3159,12 +3177,12 @@ export class TableBody implements AfterViewInit, OnDestroy { } updateFrozenRowStickyPosition() { - this.el.nativeElement.style.top = DomHandler.getOuterHeight(this.el.nativeElement.previousElementSibling) + 'px'; + this.el.nativeElement.style.top = getOuterHeight(this.el.nativeElement.previousElementSibling) + 'px'; } updateFrozenRowGroupHeaderStickyPosition() { if (this.el.nativeElement.previousElementSibling) { - let tableHeaderHeight = DomHandler.getOuterHeight(this.el.nativeElement.previousElementSibling); + let tableHeaderHeight = getOuterHeight(this.el.nativeElement.previousElementSibling); this.dt.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'; } } @@ -4425,7 +4443,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After rowGroupHeaderStyleObject: any = {}; - id: string = UniqueComponentId(); + id: string = uuid('pn_id_'); styleElement: any; @@ -4732,10 +4750,10 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After this.selectionKeys = {}; if (Array.isArray(this._selection)) { for (let data of this._selection) { - this.selectionKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1; + this.selectionKeys[String(resolveFieldData(data, this.dataKey))] = 1; } } else { - this.selectionKeys[String(ObjectUtils.resolveFieldData(this._selection, this.dataKey))] = 1; + this.selectionKeys[String(resolveFieldData(this._selection, this.dataKey))] = 1; } } } @@ -4861,8 +4879,8 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After }); } else { this.value.sort((data1, data2) => { - let value1 = ObjectUtils.resolveFieldData(data1, field); - let value2 = ObjectUtils.resolveFieldData(data2, field); + let value1 = resolveFieldData(data1, field); + let value2 = resolveFieldData(data2, field); let result = null; if (value1 == null && value2 != null) result = -1; @@ -4929,8 +4947,8 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } multisortField(data1: any, data2: any, multiSortMeta: SortMeta[], index: number): any { - const value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field); - const value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field); + const value1 = resolveFieldData(data1, multiSortMeta[index].field); + const value2 = resolveFieldData(data2, multiSortMeta[index].field); if (ObjectUtils.compare(value1, value2, this.filterLocale) === 0) { return multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, multiSortMeta, index + 1) : 0; } @@ -4974,7 +4992,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After let target = event.originalEvent.target; let targetNode = target.nodeName; let parentNode = target.parentElement && target.parentElement.nodeName; - if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || DomHandler.hasClass(event.originalEvent.target, 'p-clickable')) { + if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' || hasClass(event.originalEvent.target, 'p-clickable')) { return; } @@ -4984,7 +5002,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After this.preventSelectionSetterPropagation = true; if (this.isMultipleSelectionMode() && event.originalEvent.shiftKey && this.anchorRowIndex != null) { - DomHandler.clearSelection(); + clearSelection(); if (this.rangeRowIndex != null) { this.clearSelectionRange(event.originalEvent); } @@ -4999,7 +5017,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } let metaSelection = this.rowTouched ? false : this.metaKeySelection; - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rowData, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(rowData, this.dataKey)) : null; this.anchorRowIndex = rowIndex; this.rangeRowIndex = rowIndex; @@ -5144,7 +5162,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } else if (this.contextMenuSelectionMode === 'joint') { this.preventSelectionSetterPropagation = true; let selected = this.isSelected(rowData); - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rowData, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(rowData, this.dataKey)) : null; if (!selected) { if (!this.isRowSelectable(rowData, rowIndex)) { @@ -5209,7 +5227,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After rangeRowsData.push(rangeRowData); this._selection = [...this.selection, rangeRowData]; - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rangeRowData, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(rangeRowData, this.dataKey)) : null; if (dataKeyValue) { this.selectionKeys[dataKeyValue] = 1; } @@ -5243,7 +5261,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After let rangeRowData = this.value[i]; let selectionIndex = this.findIndexInSelection(rangeRowData); this._selection = this.selection.filter((val: any, i: number) => i != selectionIndex); - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rangeRowData, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(rangeRowData, this.dataKey)) : null; if (dataKeyValue) { delete this.selectionKeys[dataKeyValue]; } @@ -5258,7 +5276,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After isSelected(rowData: any) { if (rowData && this.selection) { if (this.dataKey) { - return this.selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined; + return this.selectionKeys[resolveFieldData(rowData, this.dataKey)] !== undefined; } else { if (Array.isArray(this.selection)) return this.findIndexInSelection(rowData) > -1; else return this.equals(rowData, this.selection); @@ -5309,7 +5327,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After if (this.dataKey) { this.selectionKeys = {}; - this.selectionKeys[String(ObjectUtils.resolveFieldData(rowData, this.dataKey))] = 1; + this.selectionKeys[String(resolveFieldData(rowData, this.dataKey))] = 1; } } else { this._selection = null; @@ -5332,7 +5350,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After toggleRowWithCheckbox(event: any, rowData: any) { this.selection = this.selection || []; let selected = this.isSelected(rowData); - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rowData, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(rowData, this.dataKey)) : null; this.preventSelectionSetterPropagation = true; if (selected) { @@ -5402,7 +5420,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } equals(data1: any, data2: any) { - return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey); + return this.compareSelectionBy === 'equals' ? data1 === data2 : equals(data1, data2, this.dataKey); } /* Legacy Filtering for custom elements */ @@ -5495,7 +5513,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) { for (let j = 0; j < globalFilterFieldsArray.length; j++) { let globalFilterField = globalFilterFieldsArray[j].field || globalFilterFieldsArray[j]; - globalMatch = (this.filterService).filters[(this.filters['global']).matchMode](ObjectUtils.resolveFieldData(this.value[i], globalFilterField), (this.filters['global']).value, this.filterLocale); + globalMatch = (this.filterService).filters[(this.filters['global']).matchMode](resolveFieldData(this.value[i], globalFilterField), (this.filters['global']).value, this.filterLocale); if (globalMatch) { break; @@ -5550,7 +5568,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After executeLocalFilter(field: string, rowData: any, filterMeta: FilterMetadata): boolean { let filterValue = filterMeta.value; let filterMatchMode = filterMeta.matchMode || FilterMatchMode.STARTS_WITH; - let dataFieldValue = ObjectUtils.resolveFieldData(rowData, field); + let dataFieldValue = resolveFieldData(rowData, field); let filterConstraint = (this.filterService).filters[filterMatchMode]; return filterConstraint(dataFieldValue, filterValue, this.filterLocale); @@ -5653,7 +5671,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After .map((record: any) => exportableColumns .map((column) => { - let cellData = ObjectUtils.resolveFieldData(record, column.field); + let cellData = resolveFieldData(record, column.field); if (cellData != null) { if (this.exportFunction) { @@ -5745,14 +5763,14 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } isEditingCellValid() { - return this.editingCell && DomHandler.find(this.editingCell, '.ng-invalid.ng-dirty').length === 0; + return this.editingCell && find(this.editingCell, '.ng-invalid.ng-dirty').length === 0; } bindDocumentEditListener() { if (!this.documentEditListener) { this.documentEditListener = this.renderer.listen(this.document, 'click', (event) => { if (this.editingCell && !this.selfClick && this.isEditingCellValid()) { - DomHandler.removeClass(this.editingCell, 'p-cell-editing'); + removeClass(this.editingCell, 'p-cell-editing'); this.editingCell = null; this.onEditComplete.emit({ field: this.editingCellField, @@ -5784,19 +5802,19 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } initRowEdit(rowData: any) { - let dataKeyValue = String(ObjectUtils.resolveFieldData(rowData, this.dataKey)); + let dataKeyValue = String(resolveFieldData(rowData, this.dataKey)); this.editingRowKeys[dataKeyValue] = true; } saveRowEdit(rowData: any, rowElement: HTMLTableRowElement) { - if (DomHandler.find(rowElement, '.ng-invalid.ng-dirty').length === 0) { - let dataKeyValue = String(ObjectUtils.resolveFieldData(rowData, this.dataKey)); + if (find(rowElement, '.ng-invalid.ng-dirty').length === 0) { + let dataKeyValue = String(resolveFieldData(rowData, this.dataKey)); delete this.editingRowKeys[dataKeyValue]; } } cancelRowEdit(rowData: any) { - let dataKeyValue = String(ObjectUtils.resolveFieldData(rowData, this.dataKey)); + let dataKeyValue = String(resolveFieldData(rowData, this.dataKey)); delete this.editingRowKeys[dataKeyValue]; } @@ -5805,7 +5823,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After throw new Error('dataKey or groupRowsBy must be defined to use row expansion'); } - let dataKeyValue = this.groupRowsBy ? String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy)) : String(ObjectUtils.resolveFieldData(rowData, this.dataKey)); + let dataKeyValue = this.groupRowsBy ? String(resolveFieldData(rowData, this.groupRowsBy)) : String(resolveFieldData(rowData, this.dataKey)); if (this.expandedRowKeys[dataKeyValue] != null) { delete this.expandedRowKeys[dataKeyValue]; @@ -5835,11 +5853,11 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } isRowExpanded(rowData: any): boolean { - return this.groupRowsBy ? this.expandedRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy))] === true : this.expandedRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.dataKey))] === true; + return this.groupRowsBy ? this.expandedRowKeys[String(resolveFieldData(rowData, this.groupRowsBy))] === true : this.expandedRowKeys[String(resolveFieldData(rowData, this.dataKey))] === true; } isRowEditing(rowData: any): boolean { - return this.editingRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.dataKey))] === true; + return this.editingRowKeys[String(resolveFieldData(rowData, this.dataKey))] === true; } isSingleSelectionMode() { @@ -5851,7 +5869,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } onColumnResizeBegin(event: any) { - let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left; + let containerLeft = getOffset(this.containerViewChild?.nativeElement).left; this.resizeColumnElement = event.target.parentElement; this.columnResizing = true; if (event.type == 'touchstart') { @@ -5864,8 +5882,8 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } onColumnResize(event: any) { - let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left; - DomHandler.addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); + let containerLeft = getOffset(this.containerViewChild?.nativeElement).left; + addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); (this.resizeHelperViewChild).nativeElement.style.height = this.containerViewChild?.nativeElement.offsetHeight + 'px'; (this.resizeHelperViewChild).nativeElement.style.top = 0 + 'px'; if (event.type == 'touchmove') { @@ -5909,21 +5927,21 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } (this.resizeHelperViewChild).nativeElement.style.display = 'none'; - DomHandler.removeClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); + removeClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); } private _totalTableWidth(): number[] { let widths = []; - const tableHead = DomHandler.findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead'); - let headers = DomHandler.find(tableHead, 'tr > th'); - headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header))); + const tableHead = findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead'); + let headers = find(tableHead, 'tr > th'); + headers.forEach((header) => widths.push(getOuterWidth(header))); return widths; } onColumnDragStart(event: any, columnElement: any) { - this.reorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUpViewChild?.nativeElement); - this.reorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorDownViewChild?.nativeElement); + this.reorderIconWidth = getHiddenElementOuterWidth(this.reorderIndicatorUpViewChild?.nativeElement); + this.reorderIconHeight = getHiddenElementOuterHeight(this.reorderIndicatorDownViewChild?.nativeElement); this.draggedColumn = columnElement; event.dataTransfer.setData('text', 'b'); // For firefox } @@ -5931,8 +5949,8 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After onColumnDragEnter(event: any, dropHeader: any) { if (this.reorderableColumns && this.draggedColumn && dropHeader) { event.preventDefault(); - let containerOffset = DomHandler.getOffset(this.containerViewChild?.nativeElement); - let dropHeaderOffset = DomHandler.getOffset(dropHeader); + let containerOffset = getOffset(this.containerViewChild?.nativeElement); + let dropHeaderOffset = getOffset(dropHeader); if (this.draggedColumn != dropHeader) { let dragIndex = DomHandler.indexWithinGroup(this.draggedColumn, 'preorderablecolumn'); @@ -5986,7 +6004,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } if (allowDrop) { - ObjectUtils.reorderArray(this.columns, dragIndex, dropIndex); + reorderArray(this.columns, dragIndex, dropIndex); this.onColReorder.emit({ dragIndex: dragIndex, @@ -6005,7 +6023,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After if (this.resizableColumns && this.resizeColumnElement) { let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth(); - ObjectUtils.reorderArray(width, dragIndex + 1, dropIndex + 1); + reorderArray(width, dragIndex + 1, dropIndex + 1); this.updateStyleElement(width, dragIndex, null, null); } @@ -6018,7 +6036,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After } resizeTableCells(newColumnWidth: number, nextColumnWidth: number | null) { - let colIndex = DomHandler.index(this.resizeColumnElement); + let colIndex = getIndex(this.resizeColumnElement); let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth(); this.updateStyleElement(width, colIndex, newColumnWidth, nextColumnWidth); } @@ -6050,23 +6068,23 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After onRowDragOver(event: MouseEvent, index: number, rowElement: any) { if (this.rowDragging && this.draggedRowIndex !== index) { - let rowY = DomHandler.getOffset(rowElement).top; + let rowY = getOffset(rowElement).top; let pageY = event.pageY; - let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2; + let rowMidY = rowY + getOuterHeight(rowElement) / 2; let prevRowElement = rowElement.previousElementSibling; if (pageY < rowMidY) { - DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); + removeClass(rowElement, 'p-datatable-dragpoint-bottom'); this.droppedRowIndex = index; - if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); - else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + if (prevRowElement) addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + else addClass(rowElement, 'p-datatable-dragpoint-top'); } else { - if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); - else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + if (prevRowElement) removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + else addClass(rowElement, 'p-datatable-dragpoint-top'); this.droppedRowIndex = index + 1; - DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); + addClass(rowElement, 'p-datatable-dragpoint-bottom'); } } } @@ -6074,11 +6092,11 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After onRowDragLeave(event: Event, rowElement: any) { let prevRowElement = rowElement.previousElementSibling; if (prevRowElement) { - DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); } - DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); - DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); + removeClass(rowElement, 'p-datatable-dragpoint-bottom'); + removeClass(rowElement, 'p-datatable-dragpoint-top'); } onRowDragEnd(event: Event) { @@ -6090,7 +6108,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After onRowDrop(event: Event, rowElement: any) { if (this.droppedRowIndex != null) { let dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1; - ObjectUtils.reorderArray(this.value, this.draggedRowIndex, dropIndex); + reorderArray(this.value, this.draggedRowIndex, dropIndex); if (this.virtualScroll) { // TODO: Check @@ -6255,12 +6273,12 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After saveColumnWidths(state: any) { let widths: any[] = []; - let headers = DomHandler.find(this.containerViewChild?.nativeElement, '.p-datatable-thead > tr > th'); - headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header))); + let headers = find(this.containerViewChild?.nativeElement, '.p-datatable-thead > tr > th'); + headers.forEach((header) => widths.push(getOuterWidth(header))); state.columnWidths = widths.join(','); if (this.columnResizeMode === 'expand') { - state.tableWidth = DomHandler.getOuterWidth(this.tableViewChild?.nativeElement); + state.tableWidth = getOuterWidth(this.tableViewChild?.nativeElement); } } @@ -6277,7 +6295,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After this.setResizeTableWidth(this.tableWidthState + 'px'); } - if (ObjectUtils.isNotEmpty(widths)) { + if (isNotEmpty(widths)) { this.createStyleElement(); let innerHTML = ''; @@ -6346,7 +6364,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After this.styleElement = this.renderer.createElement('style'); this.styleElement.type = 'text/css'; this.renderer.appendChild(this.document.head, this.styleElement); - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } getGroupRowsMeta() { diff --git a/packages/primeng/src/tabmenu/style/tabmenustyle.ts b/packages/primeng/src/tabmenu/style/tabmenustyle.ts index 76ec0908bd8..c23ee7aad3a 100644 --- a/packages/primeng/src/tabmenu/style/tabmenustyle.ts +++ b/packages/primeng/src/tabmenu/style/tabmenustyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` diff --git a/packages/primeng/src/tabmenu/tabmenu.ts b/packages/primeng/src/tabmenu/tabmenu.ts index 4dcedfdaf7c..026513c3132 100644 --- a/packages/primeng/src/tabmenu/tabmenu.ts +++ b/packages/primeng/src/tabmenu/tabmenu.ts @@ -22,17 +22,15 @@ import { ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Router, RouterModule } from '@angular/router'; -import { MenuItem, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { ChevronLeftIcon, ChevronRightIcon } from '@primeng/icons'; +import { findSingle, focus, getAttribute, getOffset, getWidth, resolve } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; +import { BadgeModule } from 'primeng/badge'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { Nullable } from 'primeng/ts-helpers'; -import { ObjectUtils } from 'primeng/utils'; import { TabMenuStyle } from './style/tabmenustyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { BadgeModule } from 'primeng/badge'; /** * TabMenu is a navigation component that displays items as tab headers. @@ -321,7 +319,7 @@ export class TabMenu extends BaseComponent implements AfterContentInit, AfterVie } getItemProp(item: any, name: string) { - return item ? ObjectUtils.getItemValue(item[name]) : undefined; + return item ? resolve(item[name]) : undefined; } visible(item) { @@ -415,13 +413,13 @@ export class TabMenu extends BaseComponent implements AfterContentInit, AfterVie onTabKeyDown(tabLinks) { tabLinks.forEach((item) => { - item.nativeElement.tabIndex = DomHandler.getAttribute(item.nativeElement.parentElement, 'data-p-highlight') ? '0' : '-1'; + item.nativeElement.tabIndex = getAttribute(item.nativeElement.parentElement, 'data-p-highlight') ? '0' : '-1'; }); } changeFocusedTab(event: KeyboardEvent, element: HTMLLIElement, index: number) { if (element) { - DomHandler.focus(element); + focus(element); element.scrollIntoView({ block: 'nearest' }); this.itemClick(event, element); @@ -437,7 +435,7 @@ export class TabMenu extends BaseComponent implements AfterContentInit, AfterVie let nextItem = items[i]; - if (nextItem) return DomHandler.getAttribute(nextItem.nativeElement, 'data-p-disabled') ? this.findNextItem(items, i) : { nextItem: nextItem.nativeElement, i }; + if (nextItem) return getAttribute(nextItem.nativeElement, 'data-p-disabled') ? this.findNextItem(items, i) : { nextItem: nextItem.nativeElement, i }; else return null; } @@ -450,26 +448,26 @@ export class TabMenu extends BaseComponent implements AfterContentInit, AfterVie let prevItem = items[i]; - if (prevItem) return DomHandler.getAttribute(prevItem.nativeElement, 'data-p-disabled') ? this.findPrevItem(items, i) : { prevItem: prevItem.nativeElement, i }; + if (prevItem) return getAttribute(prevItem.nativeElement, 'data-p-disabled') ? this.findPrevItem(items, i) : { prevItem: prevItem.nativeElement, i }; else return null; } updateInkBar() { - const tabHeader = DomHandler.findSingle(this.navbar?.nativeElement, 'li.p-tabmenu-active'); + const tabHeader = findSingle(this.navbar?.nativeElement, 'li.p-tabmenu-active'); if (tabHeader) { - (this.inkbar as ElementRef).nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px'; - (this.inkbar as ElementRef).nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar?.nativeElement).left + 'px'; + (this.inkbar as ElementRef).nativeElement.style.width = getWidth(tabHeader as any) + 'px'; + (this.inkbar as ElementRef).nativeElement.style.left = getOffset(tabHeader).left - getOffset(this.navbar?.nativeElement).left + 'px'; } } getVisibleButtonWidths() { - return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0); + return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0); } updateButtonState() { const content = this.content?.nativeElement; const { scrollLeft, scrollWidth } = content; - const width = DomHandler.getWidth(content); + const width = getWidth(content); this.backwardIsDisabled = scrollLeft === 0; this.forwardIsDisabled = parseInt(scrollLeft) === scrollWidth - width; @@ -493,14 +491,14 @@ export class TabMenu extends BaseComponent implements AfterContentInit, AfterVie navBackward() { const content = this.content?.nativeElement; - const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); + const width = getWidth(content) - this.getVisibleButtonWidths(); const pos = content.scrollLeft - width; content.scrollLeft = pos <= 0 ? 0 : pos; } navForward() { const content = this.content?.nativeElement; - const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); + const width = getWidth(content) - this.getVisibleButtonWidths(); const pos = content.scrollLeft + width; const lastPos = content.scrollWidth - width; content.scrollLeft = pos >= lastPos ? lastPos : pos; diff --git a/packages/primeng/src/tabs/style/tabsstyle.ts b/packages/primeng/src/tabs/style/tabsstyle.ts index bc1a52cb7ec..c83600cb910 100644 --- a/packages/primeng/src/tabs/style/tabsstyle.ts +++ b/packages/primeng/src/tabs/style/tabsstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-tabs { diff --git a/packages/primeng/src/tabs/tab.ts b/packages/primeng/src/tabs/tab.ts index a676a3e8444..09514db2d1a 100644 --- a/packages/primeng/src/tabs/tab.ts +++ b/packages/primeng/src/tabs/tab.ts @@ -1,13 +1,10 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, computed, forwardRef, HostListener, inject, input, model, ViewEncapsulation } from '@angular/core'; - -import { BaseComponent } from 'primeng/basecomponent'; -import { ObjectUtils } from 'primeng/utils'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { equals, focus, getAttribute } from '@primeuix/utils'; import { Ripple } from 'primeng/ripple'; -import { DomHandler } from 'primeng/dom'; -import { Tabs } from './tabs'; import { TabList } from './tablist'; -import { SharedModule } from 'primeng/api'; +import { Tabs } from './tabs'; /** * Defines valid properties in Tab component. @@ -59,7 +56,7 @@ export class Tab extends BaseComponent { ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`); - active = computed(() => ObjectUtils.equals(this.pcTabs.value(), this.value())); + active = computed(() => equals(this.pcTabs.value(), this.value())); tabindex = computed(() => (this.active() ? this.pcTabs.tabindex() : -1)); @@ -155,13 +152,13 @@ export class Tab extends BaseComponent { findNextTab(tabElement, selfCheck = false) { const element = selfCheck ? tabElement : tabElement.nextElementSibling; - return element ? (DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findNextTab(element) : element) : null; + return element ? (getAttribute(element, 'data-p-disabled') || getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findNextTab(element) : element) : null; } findPrevTab(tabElement, selfCheck = false) { const element = selfCheck ? tabElement : tabElement.previousElementSibling; - return element ? (DomHandler.getAttribute(element, 'data-p-disabled') || DomHandler.getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findPrevTab(element) : element) : null; + return element ? (getAttribute(element, 'data-p-disabled') || getAttribute(element, 'data-pc-section') === 'inkbar' ? this.findPrevTab(element) : element) : null; } findFirstTab() { @@ -177,7 +174,7 @@ export class Tab extends BaseComponent { } changeFocusedTab(event, element) { - DomHandler.focus(element); + focus(element); this.scrollInView(element); } diff --git a/packages/primeng/src/tabs/tablist.ts b/packages/primeng/src/tabs/tablist.ts index 631e5e7c3d5..fafc81e1974 100644 --- a/packages/primeng/src/tabs/tablist.ts +++ b/packages/primeng/src/tabs/tablist.ts @@ -1,12 +1,10 @@ -import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, computed, ContentChild, effect, ElementRef, forwardRef, inject, signal, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; +import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, computed, ContentChild, effect, ElementRef, forwardRef, inject, signal, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { ChevronLeftIcon, ChevronRightIcon } from '@primeng/icons'; +import { findSingle, getHeight, getOffset, getOuterWidth, getWidth } from '@primeuix/utils'; import { RippleModule } from 'primeng/ripple'; -import { BaseComponent } from 'primeng/basecomponent'; import { Tabs } from './tabs'; -import { DomHandler } from 'primeng/dom'; -import { SharedModule } from 'primeng/api'; /** * TabList is a helper component for Tabs component. @@ -142,7 +140,7 @@ export class TabList extends BaseComponent implements AfterViewInit, AfterConten onPrevButtonClick() { const _content = this.content.nativeElement; - const width = DomHandler.getWidth(_content); + const width = getWidth(_content); const pos = _content.scrollLeft - width; @@ -151,7 +149,7 @@ export class TabList extends BaseComponent implements AfterViewInit, AfterConten onNextButtonClick() { const _content = this.content.nativeElement; - const width = DomHandler.getWidth(_content) - this.getVisibleButtonWidths(); + const width = getWidth(_content) - this.getVisibleButtonWidths(); const pos = _content.scrollLeft + width; const lastPos = _content.scrollWidth - width; @@ -163,7 +161,7 @@ export class TabList extends BaseComponent implements AfterViewInit, AfterConten const _list = this.el?.nativeElement; const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = _content; - const [width, height] = [DomHandler.getWidth(_content), DomHandler.getHeight(_content)]; + const [width, height] = [getWidth(_content), getHeight(_content)]; this.isPrevButtonEnabled.set(scrollLeft !== 0); this.isNextButtonEnabled.set(_list.offsetWidth >= offsetWidth && scrollLeft !== scrollWidth - width); @@ -174,17 +172,17 @@ export class TabList extends BaseComponent implements AfterViewInit, AfterConten const _inkbar = this.inkbar.nativeElement; const _tabs = this.tabs.nativeElement; - const activeTab = DomHandler.findSingle(_content, '[data-pc-name="tab"][data-p-active="true"]'); + const activeTab = findSingle(_content, '[data-pc-name="tab"][data-p-active="true"]'); - _inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px'; - _inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(_tabs).left + 'px'; + _inkbar.style.width = getOuterWidth(activeTab) + 'px'; + _inkbar.style.left = getOffset(activeTab).left - getOffset(_tabs).left + 'px'; } getVisibleButtonWidths() { const _prevBtn = this.prevButton?.nativeElement; const _nextBtn = this.nextButton?.nativeElement; - return [_prevBtn, _nextBtn].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0); + return [_prevBtn, _nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0); } bindResizeObserver() { diff --git a/packages/primeng/src/tabs/tabpanel.ts b/packages/primeng/src/tabs/tabpanel.ts index f34adaf7ca2..7e4b8fc6971 100644 --- a/packages/primeng/src/tabs/tabpanel.ts +++ b/packages/primeng/src/tabs/tabpanel.ts @@ -1,7 +1,7 @@ -import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, model, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { BaseComponent } from 'primeng/basecomponent'; -import { ObjectUtils } from 'primeng/utils'; +import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, model, ViewEncapsulation } from '@angular/core'; +import { BaseComponent } from '@primeng/core'; +import { equals } from '@primeuix/utils'; import { Tabs } from './tabs'; /** @@ -40,5 +40,5 @@ export class TabPanel extends BaseComponent { ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`); - active = computed(() => ObjectUtils.equals(this.pcTabs.value(), this.value())); + active = computed(() => equals(this.pcTabs.value(), this.value())); } diff --git a/packages/primeng/src/tabs/tabpanels.ts b/packages/primeng/src/tabs/tabpanels.ts index 1896f92d95a..048a61946a9 100644 --- a/packages/primeng/src/tabs/tabpanels.ts +++ b/packages/primeng/src/tabs/tabpanels.ts @@ -1,6 +1,6 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { BaseComponent } from 'primeng/basecomponent'; +import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; +import { BaseComponent } from '@primeng/core'; /** * TabPanels is a helper component for Tabs component. diff --git a/packages/primeng/src/tabs/tabs.ts b/packages/primeng/src/tabs/tabs.ts index 21227f1c2ce..6fd4a1fe05e 100644 --- a/packages/primeng/src/tabs/tabs.ts +++ b/packages/primeng/src/tabs/tabs.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, inject, input, model, NgModule, numberAttribute, signal, ViewEncapsulation } from '@angular/core'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent } from '@primeng/core'; +import { uuid } from '@primeuix/utils'; import { TabsStyle } from './style/tabsstyle'; -import { UniqueComponentId } from 'primeng/utils'; -import { TabPanels } from './tabpanels'; -import { TabPanel } from './tabpanel'; import { Tab } from './tab'; import { TabList } from './tablist'; +import { TabPanel } from './tabpanel'; +import { TabPanels } from './tabpanels'; /** * Tabs facilitates seamless switching between different views. @@ -72,7 +72,7 @@ export class Tabs extends BaseComponent { */ tabindex = input(0, { transform: numberAttribute }); - id = signal(UniqueComponentId()); + id = signal(uuid('pn_id_')); _componentStyle = inject(TabsStyle); diff --git a/packages/primeng/src/tabview/style/tabsstyle.ts b/packages/primeng/src/tabview/style/tabsstyle.ts index bc1a52cb7ec..c83600cb910 100644 --- a/packages/primeng/src/tabview/style/tabsstyle.ts +++ b/packages/primeng/src/tabview/style/tabsstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-tabs { diff --git a/packages/primeng/src/tabview/tabview.spec.ts b/packages/primeng/src/tabview/tabview.spec.ts index b7cf77043f2..65538264565 100755 --- a/packages/primeng/src/tabview/tabview.spec.ts +++ b/packages/primeng/src/tabview/tabview.spec.ts @@ -1,11 +1,11 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { TabView, TabPanel } from './tabview'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Component } from '@angular/core'; +import { PrimeTemplate } from '@primeng/core'; +import { TimesIcon } from '@primeng/icons'; import { Tooltip } from 'primeng/tooltip'; -import { PrimeTemplate } from 'primeng/api'; -import { TimesIcon } from 'primeng/icons/times'; +import { TabPanel, TabView } from './tabview'; @Component({ template: ` diff --git a/packages/primeng/src/tabview/tabview.ts b/packages/primeng/src/tabview/tabview.ts index 9f0b9f6b098..2c05d06f3a3 100755 --- a/packages/primeng/src/tabview/tabview.ts +++ b/packages/primeng/src/tabview/tabview.ts @@ -21,19 +21,16 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ChevronLeftIcon } from 'primeng/icons/chevronleft'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { TimesIcon } from 'primeng/icons/times'; +import { BaseComponent, PrimeTemplate, SharedModule } from '@primeng/core'; +import { ChevronLeftIcon, ChevronRightIcon, TimesIcon } from '@primeng/icons'; +import { find, findSingle, focus, getAttribute, getOffset, getOuterWidth, getWidth, uuid } from '@primeuix/utils'; +import { BlockableUI } from 'primeng/api'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; -import { Subscription } from 'rxjs'; -import { TabViewChangeEvent, TabViewCloseEvent } from './tabview.interface'; -import { UniqueComponentId } from 'primeng/utils'; import { Nullable } from 'primeng/ts-helpers'; +import { Subscription } from 'rxjs'; import { TabsStyle } from './style/tabsstyle'; -import { BaseComponent } from 'primeng/basecomponent'; +import { TabViewChangeEvent, TabViewCloseEvent } from './tabview.interface'; /** * TabPanel is a helper component for TabView component. @@ -64,6 +61,9 @@ import { BaseComponent } from 'primeng/basecomponent'; providers: [TabsStyle] }) export class TabPanel extends BaseComponent implements AfterContentInit, OnDestroy { + ngOnDestroy(): void { + throw new Error('Method not implemented.'); + } /** * Defines if tab can be removed. * @group Props @@ -205,7 +205,7 @@ export class TabPanel extends BaseComponent implements AfterContentInit, OnDestr loaded: boolean = false; - public id: string | undefined = UniqueComponentId(); + public id: string | undefined = uuid('pn_id_'); contentTemplate: TemplateRef | undefined; @@ -531,8 +531,8 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie } bindResizeObserver() { - this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]'); - this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]'); + this.container = findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]'); + this.list = findSingle(this.el.nativeElement, '[data-pc-section="nav"]'); this.resizeObserver = new ResizeObserver(() => { if (this.list.offsetWidth >= this.container.offsetWidth) { @@ -631,7 +631,7 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie onTabArrowLeftKey(event: KeyboardEvent) { const prevHeaderAction = this.findPrevHeaderAction(event.currentTarget); - const index = DomHandler.getAttribute(prevHeaderAction, 'data-pc-index'); + const index = getAttribute(prevHeaderAction, 'data-pc-index'); prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction, index) : this.onTabEndKey(event); event.preventDefault(); @@ -640,14 +640,14 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie onTabArrowRightKey(event: KeyboardEvent) { const nextHeaderAction = this.findNextHeaderAction(event.currentTarget); - const index = DomHandler.getAttribute(nextHeaderAction, 'data-pc-index'); + const index = getAttribute(nextHeaderAction, 'data-pc-index'); nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction, index) : this.onTabHomeKey(event); event.preventDefault(); } onTabHomeKey(event: KeyboardEvent) { const firstHeaderAction = this.findFirstHeaderAction(); - const index = DomHandler.getAttribute(firstHeaderAction, 'data-pc-index'); + const index = getAttribute(firstHeaderAction, 'data-pc-index'); this.changeFocusedTab(event, firstHeaderAction, index); event.preventDefault(); @@ -655,7 +655,7 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie onTabEndKey(event: KeyboardEvent) { const lastHeaderAction = this.findLastHeaderAction(); - const index = DomHandler.getAttribute(lastHeaderAction, 'data-pc-index'); + const index = getAttribute(lastHeaderAction, 'data-pc-index'); this.changeFocusedTab(event, lastHeaderAction, index); event.preventDefault(); @@ -663,7 +663,7 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie changeFocusedTab(event: KeyboardEvent, element: any, index: number) { if (element) { - DomHandler.focus(element); + focus(element); element.scrollIntoView({ block: 'nearest' }); if (this.selectOnFocus) { @@ -676,13 +676,13 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie findNextHeaderAction(tabElement: any, selfCheck = false) { const headerElement = selfCheck ? tabElement : tabElement.nextElementSibling; - return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar' ? this.findNextHeaderAction(headerElement) : headerElement) : null; + return headerElement ? (getAttribute(headerElement, 'data-p-disabled') || getAttribute(headerElement, 'data-pc-section') === 'inkbar' ? this.findNextHeaderAction(headerElement) : headerElement) : null; } findPrevHeaderAction(tabElement: any, selfCheck = false) { const headerElement = selfCheck ? tabElement : tabElement.previousElementSibling; - return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar' ? this.findPrevHeaderAction(headerElement) : headerElement) : null; + return headerElement ? (getAttribute(headerElement, 'data-p-disabled') || getAttribute(headerElement, 'data-pc-section') === 'inkbar' ? this.findPrevHeaderAction(headerElement) : headerElement) : null; } findFirstHeaderAction() { @@ -692,7 +692,7 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie findLastHeaderAction() { const lastEl = this.navbar.nativeElement.lastElementChild; - const lastHeaderAction = DomHandler.getAttribute(lastEl, 'data-pc-section') === 'inkbar' ? lastEl.previousElementSibling : lastEl; + const lastHeaderAction = getAttribute(lastEl, 'data-pc-section') === 'inkbar' ? lastEl.previousElementSibling : lastEl; return this.findPrevHeaderAction(lastHeaderAction, true); } @@ -790,20 +790,20 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie updateInkBar() { if (isPlatformBrowser(this.platformId)) { if (this.navbar) { - const tabHeader: HTMLElement | null = DomHandler.findSingle(this.navbar.nativeElement, '[data-pc-section="headeraction"][data-p-active="true"]'); + const tabHeader: HTMLElement | null = findSingle(this.navbar.nativeElement, '[data-pc-section="headeraction"][data-p-active="true"]'); if (!tabHeader) { return; } - (this.inkbar as ElementRef).nativeElement.style.width = DomHandler.getOuterWidth(tabHeader) + 'px'; - (this.inkbar as ElementRef).nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px'; + (this.inkbar as ElementRef).nativeElement.style.width = getOuterWidth(tabHeader) + 'px'; + (this.inkbar as ElementRef).nativeElement.style.left = getOffset(tabHeader).left - getOffset(this.navbar.nativeElement).left + 'px'; } } } updateScrollBar(index: number) { - let tabHeader = DomHandler.find(this.navbar.nativeElement, '[data-pc-section="headeraction"]')[index]; + let tabHeader = find(this.navbar.nativeElement, '[data-pc-section="headeraction"]')[index]; if (tabHeader) { tabHeader.scrollIntoView({ block: 'nearest' }); @@ -813,15 +813,15 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie updateButtonState() { const content = (this.content as ElementRef).nativeElement; const { scrollLeft, scrollWidth } = content; - const width = DomHandler.getWidth(content); + const width = getWidth(content); this.backwardIsDisabled = scrollLeft === 0; this.forwardIsDisabled = Math.round(scrollLeft) === scrollWidth - width; } refreshButtonState() { - this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]'); - this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]'); + this.container = findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]'); + this.list = findSingle(this.el.nativeElement, '[data-pc-section="nav"]'); if (this.list.offsetWidth >= this.container.offsetWidth) { if (this.list.offsetWidth >= this.container.offsetWidth) { this.buttonVisible = true; @@ -840,19 +840,19 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie } getVisibleButtonWidths() { - return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0); + return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0); } navBackward() { const content = (this.content as ElementRef).nativeElement; - const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); + const width = getWidth(content) - this.getVisibleButtonWidths(); const pos = content.scrollLeft - width; content.scrollLeft = pos <= 0 ? 0 : pos; } navForward() { const content = (this.content as ElementRef).nativeElement; - const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); + const width = getWidth(content) - this.getVisibleButtonWidths(); const pos = content.scrollLeft + width; const lastPos = content.scrollWidth - width; diff --git a/packages/primeng/src/tag/style/tagstyle.ts b/packages/primeng/src/tag/style/tagstyle.ts index e1491d40959..067d97e01af 100644 --- a/packages/primeng/src/tag/style/tagstyle.ts +++ b/packages/primeng/src/tag/style/tagstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-tag { diff --git a/packages/primeng/src/tag/tag.ts b/packages/primeng/src/tag/tag.ts index 2b30b5d0fa3..25529ac52b8 100755 --- a/packages/primeng/src/tag/tag.ts +++ b/packages/primeng/src/tag/tag.ts @@ -1,7 +1,6 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, inject, Input, NgModule, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { TagStyle } from './style/tagstyle'; /** diff --git a/packages/primeng/src/terminal/style/terminalstyle.ts b/packages/primeng/src/terminal/style/terminalstyle.ts index e74eec9bf91..6de500d3a5d 100644 --- a/packages/primeng/src/terminal/style/terminalstyle.ts +++ b/packages/primeng/src/terminal/style/terminalstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-terminal { diff --git a/packages/primeng/src/terminal/terminal.ts b/packages/primeng/src/terminal/terminal.ts index eddf15ec6b6..7f4da7d4196 100755 --- a/packages/primeng/src/terminal/terminal.ts +++ b/packages/primeng/src/terminal/terminal.ts @@ -1,12 +1,11 @@ +import { CommonModule } from '@angular/common'; import { AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, Component, inject, Input, NgModule, OnDestroy, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; -import { DomHandler } from 'primeng/dom'; -import { TerminalService } from './terminalservice'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { find } from '@primeuix/utils'; import { Subscription } from 'rxjs'; -import { BaseComponent } from 'primeng/basecomponent'; import { TerminalStyle } from './style/terminalstyle'; -import { SharedModule } from 'primeng/api'; +import { TerminalService } from './terminalservice'; /** * Terminal is a text based user interface. @@ -80,7 +79,7 @@ export class Terminal extends BaseComponent implements AfterViewInit, AfterViewC ngAfterViewInit() { super.ngAfterViewInit(); - this.container = DomHandler.find(this.el.nativeElement, '.p-terminal')[0]; + this.container = find(this.el.nativeElement, '.p-terminal')[0]; } ngAfterViewChecked() { diff --git a/packages/primeng/src/textarea/style/textareastyle.ts b/packages/primeng/src/textarea/style/textareastyle.ts index df2d58cd24b..1a8e0218a06 100644 --- a/packages/primeng/src/textarea/style/textareastyle.ts +++ b/packages/primeng/src/textarea/style/textareastyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-textarea { diff --git a/packages/primeng/src/textarea/textarea.ts b/packages/primeng/src/textarea/textarea.ts index dc4efbeb8a6..12be4865092 100755 --- a/packages/primeng/src/textarea/textarea.ts +++ b/packages/primeng/src/textarea/textarea.ts @@ -1,7 +1,7 @@ import { AfterViewInit, booleanAttribute, Directive, EventEmitter, HostListener, inject, Input, NgModule, OnDestroy, OnInit, Optional, Output } from '@angular/core'; import { NgControl, NgModel } from '@angular/forms'; +import { BaseComponent } from '@primeng/core'; import { Subscription } from 'rxjs'; -import { BaseComponent } from 'primeng/basecomponent'; import { TextareaStyle } from './style/textareastyle'; /** diff --git a/packages/primeng/src/tieredmenu/style/tieredmenustyle.ts b/packages/primeng/src/tieredmenu/style/tieredmenustyle.ts index e01a9b1204f..78f71e6c91d 100644 --- a/packages/primeng/src/tieredmenu/style/tieredmenustyle.ts +++ b/packages/primeng/src/tieredmenu/style/tieredmenustyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-tieredmenu { diff --git a/packages/primeng/src/tieredmenu/tieredmenu.ts b/packages/primeng/src/tieredmenu/tieredmenu.ts index dfb6d345f4a..5cee6dec4ef 100755 --- a/packages/primeng/src/tieredmenu/tieredmenu.ts +++ b/packages/primeng/src/tieredmenu/tieredmenu.ts @@ -26,16 +26,16 @@ import { signal } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MenuItem, OverlayService, SharedModule } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; -import { AngleRightIcon } from 'primeng/icons/angleright'; +import { BaseComponent, OverlayService, SharedModule } from '@primeng/core'; +import { AngleRightIcon } from '@primeng/icons'; +import { absolutePosition, appendChild, findLastIndex, findSingle, focus, isEmpty, isNotEmpty, isPrintableCharacter, isTouchDevice, nestedPosition, relativePosition, resolve, uuid } from '@primeuix/utils'; +import { MenuItem } from 'primeng/api'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Ripple } from 'primeng/ripple'; import { TooltipModule } from 'primeng/tooltip'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { TieredMenuStyle } from './style/tieredmenustyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { nestedPosition } from '@primeuix/utils/dom'; @Component({ selector: 'p-tieredMenuSub, p-tieredmenusub', @@ -241,7 +241,7 @@ export class TieredMenuSub extends BaseComponent { super(); effect(() => { const path = this.activeItemPath(); - if (ObjectUtils.isNotEmpty(path)) { + if (isNotEmpty(path)) { this.positionSubmenu(); } }); @@ -257,7 +257,7 @@ export class TieredMenuSub extends BaseComponent { } getItemProp(processedItem: any, name: string, params: any | null = null) { - return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; + return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined; } getItemId(processedItem: any): string { @@ -324,7 +324,7 @@ export class TieredMenuSub extends BaseComponent { } isItemGroup(processedItem: any): boolean { - return ObjectUtils.isNotEmpty(processedItem.items); + return isNotEmpty(processedItem.items); } onItemMouseEnter(param: any) { @@ -563,7 +563,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { get focusedItemId() { const focusedItemInfo = this.focusedItemInfo(); - return focusedItemInfo.item?.id ? focusedItemInfo.item.id : focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null; + return focusedItemInfo.item?.id ? focusedItemInfo.item.id : focusedItemInfo.index !== -1 ? `${this.id}${isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null; } constructor(public overlayService: OverlayService) { @@ -571,7 +571,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { effect(() => { const path = this.activeItemPath(); - if (ObjectUtils.isNotEmpty(path)) { + if (isNotEmpty(path)) { this.bindOutsideClickListener(); this.bindResizeListener(); } else { @@ -584,7 +584,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { ngOnInit() { super.ngOnInit(); this.bindMatchMediaListener(); - this.id = this.id || UniqueComponentId(); + this.id = this.id || uuid('pn_id_'); } bindMatchMediaListener() { @@ -634,7 +634,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { } getItemProp(item: any, name: string) { - return item ? ObjectUtils.getItemValue(item[name]) : undefined; + return item ? resolve(item[name]) : undefined; } getProccessedItemLabel(processedItem: any) { @@ -646,7 +646,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { } isProcessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } isSelected(processedItem: any): boolean { @@ -678,7 +678,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { } isProccessedItemGroup(processedItem: any): boolean { - return processedItem && ObjectUtils.isNotEmpty(processedItem.items); + return processedItem && isNotEmpty(processedItem.items); } onOverlayClick(event: MouseEvent) { @@ -693,7 +693,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { onItemClick(event: any) { const { originalEvent, processedItem } = event; const grouped = this.isProcessedItemGroup(processedItem); - const root = ObjectUtils.isEmpty(processedItem.parent); + const root = isEmpty(processedItem.parent); const selected = this.isSelected(processedItem); if (selected) { @@ -703,7 +703,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { this.focusedItemInfo.set({ index, level, parentKey, item }); this.dirty = true; - DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + focus(this.rootmenu.sublistViewChild.nativeElement); } else { if (grouped) { this.onItemChange(event); @@ -712,13 +712,13 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { this.hide(originalEvent); this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1); - DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + focus(this.rootmenu.sublistViewChild.nativeElement); } } } onItemMouseEnter(event: any) { - if (!DomHandler.isTouchDevice()) { + if (!isTouchDevice()) { if (this.dirty) { this.onItemChange(event, 'hover'); } @@ -780,7 +780,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { break; default: - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + if (!metaKey && isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } @@ -832,7 +832,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { onArrowLeftKey(event: KeyboardEvent) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const parentItem = this.activeItemPath().find((p) => p.key === processedItem.parentKey); - const root = ObjectUtils.isEmpty(processedItem.parent); + const root = isEmpty(processedItem.parent); if (!root) { this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '', item: processedItem.item }); @@ -880,8 +880,8 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { onEnterKey(event: KeyboardEvent) { if (this.focusedItemInfo().index !== -1) { - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); - const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); + const element = findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const anchorElement = element && findSingle(element, 'a[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); @@ -899,17 +899,17 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { onItemChange(event: any, type?: string | undefined) { const { processedItem, isFocus } = event; - if (ObjectUtils.isEmpty(processedItem)) return; + if (isEmpty(processedItem)) return; const { index, key, level, parentKey, items, item } = processedItem; - const grouped = ObjectUtils.isNotEmpty(items); + const grouped = isNotEmpty(items); const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key); grouped && activeItemPath.push(processedItem); this.focusedItemInfo.set({ index, level, parentKey, item }); grouped && (this.dirty = true); - isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + isFocus && focus(this.rootmenu.sublistViewChild.nativeElement); if (type === 'hover' && this.queryMatches) { return; @@ -944,7 +944,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { this.bindOutsideClickListener(); this.bindResizeListener(); this.bindScrollListener(); - DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + focus(this.rootmenu.sublistViewChild.nativeElement); this.scrollInView(); } break; @@ -957,8 +957,8 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { } alignOverlay() { - if (this.relativeAlign) DomHandler.relativePosition(this.container, this.target); - else DomHandler.absolutePosition(this.container, this.target); + if (this.relativeAlign) relativePosition(this.container, this.target); + else absolutePosition(this.container, this.target); } onOverlayAnimationEnd(event: AnimationEvent) { @@ -972,7 +972,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); - else DomHandler.appendChild(this.container, this.appendTo); + else appendChild(this.container, this.appendTo); } } @@ -1000,7 +1000,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { this.activeItemPath.set([]); this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' }); - isFocus && DomHandler.focus(this.relatedTarget || this.target || this.rootmenu.sublistViewChild.nativeElement); + isFocus && focus(this.relatedTarget || this.target || this.rootmenu.sublistViewChild.nativeElement); this.dirty = false; } @@ -1028,7 +1028,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' }); - isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); + isFocus && focus(this.rootmenu.sublistViewChild.nativeElement); this.cd.markForCheck(); } @@ -1076,11 +1076,11 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { } findLastItemIndex() { - return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); + return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); } findPrevItemIndex(index: number) { - const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; + const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex : index; } @@ -1115,7 +1115,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { scrollInView(index: number = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); + const element = findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -1145,7 +1145,7 @@ export class TieredMenu extends BaseComponent implements OnInit, OnDestroy { if (isPlatformBrowser(this.platformId)) { if (!this.resizeListener) { this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => { - if (!DomHandler.isTouchDevice()) { + if (!isTouchDevice()) { this.hide(event, true); } }); diff --git a/packages/primeng/src/timeline/style/timelinestyle.ts b/packages/primeng/src/timeline/style/timelinestyle.ts index 8e6eff733ec..ba7b19de082 100644 --- a/packages/primeng/src/timeline/style/timelinestyle.ts +++ b/packages/primeng/src/timeline/style/timelinestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-timeline { diff --git a/packages/primeng/src/timeline/timeline.ts b/packages/primeng/src/timeline/timeline.ts index fc81f3491b2..939d8df87cc 100755 --- a/packages/primeng/src/timeline/timeline.ts +++ b/packages/primeng/src/timeline/timeline.ts @@ -1,9 +1,9 @@ import { CommonModule } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, HostBinding, inject, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api'; +import { BaseComponent, PrimeTemplate, SharedModule } from '@primeng/core'; +import { BlockableUI } from 'primeng/api'; import { Nullable } from 'primeng/ts-helpers'; import { TimelineStyle } from './style/timelinestyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Timeline visualizes a series of chained events. diff --git a/packages/primeng/src/toast/style/toaststyle.ts b/packages/primeng/src/toast/style/toaststyle.ts index a520743cf3f..275c795bbd0 100644 --- a/packages/primeng/src/toast/style/toaststyle.ts +++ b/packages/primeng/src/toast/style/toaststyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-toast { diff --git a/packages/primeng/src/toast/toast.spec.ts b/packages/primeng/src/toast/toast.spec.ts index ff546e04081..059cd62625d 100755 --- a/packages/primeng/src/toast/toast.spec.ts +++ b/packages/primeng/src/toast/toast.spec.ts @@ -1,12 +1,10 @@ -import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { Toast, ToastItem } from './toast'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { Component } from '@angular/core'; +import { CheckIcon, ExclamationTriangleIcon, TimesIcon } from '@primeng/icons'; import { MessageService } from 'primeng/api'; -import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle'; -import { CheckIcon } from 'primeng/icons/check'; -import { TimesIcon } from 'primeng/icons/times'; +import { Toast, ToastItem } from './toast'; @Component({ template: ` `, diff --git a/packages/primeng/src/toast/toast.ts b/packages/primeng/src/toast/toast.ts index a39d3cf4074..c1f218b7185 100755 --- a/packages/primeng/src/toast/toast.ts +++ b/packages/primeng/src/toast/toast.ts @@ -20,20 +20,16 @@ import { inject, numberAttribute } from '@angular/core'; -import { ToastMessageOptions, MessageService, SharedModule } from 'primeng/api'; -import { CheckIcon } from 'primeng/icons/check'; -import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle'; -import { InfoCircleIcon } from 'primeng/icons/infocircle'; -import { TimesIcon } from 'primeng/icons/times'; -import { TimesCircleIcon } from 'primeng/icons/timescircle'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, TimesIcon } from '@primeng/icons'; +import { isEmpty, setAttribute, uuid } from '@primeuix/utils'; +import { MessageService, ToastMessageOptions } from 'primeng/api'; +import { Button } from 'primeng/button'; import { Ripple } from 'primeng/ripple'; -import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; -import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast.interface'; -import { DomHandler } from 'primeng/dom'; import { ToastStyle } from './style/toaststyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { Button } from 'primeng/button'; +import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast.interface'; @Component({ selector: 'p-toastItem', @@ -376,7 +372,7 @@ export class Toast extends BaseComponent implements OnInit, OnDestroy { styleElement: any; - id: string = UniqueComponentId(); + id: string = uuid('pn_id_'); ngOnInit() { super.ngOnInit(); @@ -469,7 +465,7 @@ export class Toast extends BaseComponent implements OnInit, OnDestroy { onAnimationEnd(event: AnimationEvent) { if (event.toState === 'void') { - if (this.autoZIndex && ObjectUtils.isEmpty(this.messages)) { + if (this.autoZIndex && isEmpty(this.messages)) { ZIndexUtils.clear(this.containerViewChild?.nativeElement); } } @@ -496,7 +492,7 @@ export class Toast extends BaseComponent implements OnInit, OnDestroy { } this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); - DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); + setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce); } } diff --git a/packages/primeng/src/togglebutton/style/togglebuttonstyle.ts b/packages/primeng/src/togglebutton/style/togglebuttonstyle.ts index a761b8228eb..9824d64b091 100644 --- a/packages/primeng/src/togglebutton/style/togglebuttonstyle.ts +++ b/packages/primeng/src/togglebutton/style/togglebuttonstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-togglebutton { diff --git a/packages/primeng/src/togglebutton/togglebutton.ts b/packages/primeng/src/togglebutton/togglebutton.ts index cfc1fe717f2..bb43256b83f 100755 --- a/packages/primeng/src/togglebutton/togglebutton.ts +++ b/packages/primeng/src/togglebutton/togglebutton.ts @@ -1,13 +1,12 @@ import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, forwardRef, HostBinding, inject, Input, NgModule, numberAttribute, Output, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { AutoFocus } from 'primeng/autofocus'; import { Ripple } from 'primeng/ripple'; -import { ToggleButtonChangeEvent } from './togglebutton.interface'; import { Nullable } from 'primeng/ts-helpers'; -import { AutoFocus } from 'primeng/autofocus'; -import { BaseComponent } from 'primeng/basecomponent'; import { ToggleButtonStyle } from './style/togglebuttonstyle'; -import { SharedModule } from 'primeng/api'; +import { ToggleButtonChangeEvent } from './togglebutton.interface'; export const TOGGLEBUTTON_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, diff --git a/packages/primeng/src/toggleswitch/style/toggleswitchstyle.ts b/packages/primeng/src/toggleswitch/style/toggleswitchstyle.ts index bdbbe51b6d4..c08d6055c69 100644 --- a/packages/primeng/src/toggleswitch/style/toggleswitchstyle.ts +++ b/packages/primeng/src/toggleswitch/style/toggleswitchstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-toggleswitch { diff --git a/packages/primeng/src/toggleswitch/toggleswitch.ts b/packages/primeng/src/toggleswitch/toggleswitch.ts index f4d6acbb36f..2cbfc3cdfea 100755 --- a/packages/primeng/src/toggleswitch/toggleswitch.ts +++ b/packages/primeng/src/toggleswitch/toggleswitch.ts @@ -1,11 +1,10 @@ import { CommonModule } from '@angular/common'; import { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, inject, Input, NgModule, numberAttribute, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { BaseComponent, SharedModule } from '@primeng/core'; import { AutoFocus } from 'primeng/autofocus'; -import { ToggleSwitchChangeEvent } from './toggleswitch.interface'; import { ToggleSwitchStyle } from './style/toggleswitchstyle'; -import { BaseComponent } from 'primeng/basecomponent'; -import { SharedModule } from 'primeng/api'; +import { ToggleSwitchChangeEvent } from './toggleswitch.interface'; /** * Context interface for the handle template. diff --git a/packages/primeng/src/toolbar/style/toolbarstyle.ts b/packages/primeng/src/toolbar/style/toolbarstyle.ts index 98dd2feb914..0ba6d293f0f 100644 --- a/packages/primeng/src/toolbar/style/toolbarstyle.ts +++ b/packages/primeng/src/toolbar/style/toolbarstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-toolbar { diff --git a/packages/primeng/src/toolbar/toolbar.ts b/packages/primeng/src/toolbar/toolbar.ts index 963b3103fe6..1cade36cc44 100755 --- a/packages/primeng/src/toolbar/toolbar.ts +++ b/packages/primeng/src/toolbar/toolbar.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; -import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, inject, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api'; -import { BaseComponent } from 'primeng/basecomponent'; +import { ChangeDetectionStrategy, Component, ContentChild, inject, Input, NgModule, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { BaseComponent, SharedModule } from '@primeng/core'; +import { BlockableUI } from 'primeng/api'; import { ToolbarStyle } from './style/toolbarstyle'; /** diff --git a/packages/primeng/src/tooltip/style/tooltipstyle.ts b/packages/primeng/src/tooltip/style/tooltipstyle.ts index d51b05fcd67..eac85804c42 100644 --- a/packages/primeng/src/tooltip/style/tooltipstyle.ts +++ b/packages/primeng/src/tooltip/style/tooltipstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-tooltip { diff --git a/packages/primeng/src/tooltip/tooltip.ts b/packages/primeng/src/tooltip/tooltip.ts index 36e03f28f68..cff5ce96efe 100755 --- a/packages/primeng/src/tooltip/tooltip.ts +++ b/packages/primeng/src/tooltip/tooltip.ts @@ -1,11 +1,12 @@ import { isPlatformBrowser } from '@angular/common'; import { AfterViewInit, booleanAttribute, Directive, ElementRef, HostListener, inject, Input, NgModule, NgZone, numberAttribute, OnDestroy, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core'; +import { BaseComponent } from '@primeng/core'; +import { appendChild, fadeIn, findSingle, getOuterHeight, getOuterWidth, getViewport, getWindowScrollLeft, getWindowScrollTop, hasClass, removeChild, uuid } from '@primeuix/utils'; import { TooltipOptions } from 'primeng/api'; -import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom'; +import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { Nullable } from 'primeng/ts-helpers'; -import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; +import { ZIndexUtils } from 'primeng/utils'; import { TooltipStyle } from './style/tooltipstyle'; -import { BaseComponent } from 'primeng/basecomponent'; /** * Tooltip directive provides advisory information for a component. @@ -132,7 +133,7 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { life: null, autoHide: true, hideOnEscape: true, - id: UniqueComponentId() + '_tooltip' + id: uuid('pn_id_') + '_tooltip' }; _disabled: boolean | undefined; @@ -315,7 +316,7 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { onMouseLeave(e: MouseEvent) { if (!this.isAutoHide()) { - const valid = DomHandler.hasClass(e.relatedTarget, 'p-tooltip') || DomHandler.hasClass(e.relatedTarget, 'p-tooltip-text') || DomHandler.hasClass(e.relatedTarget, 'p-tooltip-arrow'); + const valid = hasClass(e.relatedTarget as any, 'p-tooltip') || hasClass(e.relatedTarget as any, 'p-tooltip-text') || hasClass(e.relatedTarget as any, 'p-tooltip-arrow'); !valid && this.deactivate(); } else { this.deactivate(); @@ -399,8 +400,8 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { this.container.appendChild(this.tooltipText); if (this.getOption('appendTo') === 'body') document.body.appendChild(this.container); - else if (this.getOption('appendTo') === 'target') DomHandler.appendChild(this.container, this.el.nativeElement); - else DomHandler.appendChild(this.container, this.getOption('appendTo')); + else if (this.getOption('appendTo') === 'target') appendChild(this.container, this.el.nativeElement); + else appendChild(this.container, this.getOption('appendTo')); this.container.style.display = 'inline-block'; @@ -451,7 +452,7 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { this.align(); } - DomHandler.fadeIn(this.container, 250); + fadeIn(this.container, 250); if (this.getOption('tooltipZIndex') === 'auto') ZIndexUtils.set('tooltip', this.container, this.config.zIndex.tooltip); else this.container.style.zIndex = this.getOption('tooltipZIndex'); @@ -549,8 +550,8 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { getHostOffset() { if (this.getOption('appendTo') === 'body' || this.getOption('appendTo') === 'target') { let offset = this.el.nativeElement.getBoundingClientRect(); - let targetLeft = offset.left + DomHandler.getWindowScrollLeft(); - let targetTop = offset.top + DomHandler.getWindowScrollTop(); + let targetLeft = offset.left + getWindowScrollLeft(); + let targetTop = offset.top + getWindowScrollTop(); return { left: targetLeft, top: targetTop }; } else { @@ -563,21 +564,21 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { const el = this.activeElement; const hostOffset = this.getHostOffset(); - const left = hostOffset.left + DomHandler.getOuterWidth(el); - const top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(this.container)) / 2; + const left = hostOffset.left + getOuterWidth(el); + const top = hostOffset.top + (getOuterHeight(el) - getOuterHeight(this.container)) / 2; this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } private get activeElement(): HTMLElement { - return this.el.nativeElement.nodeName.includes('P-') ? DomHandler.findSingle(this.el.nativeElement, '.p-component') : this.el.nativeElement; + return this.el.nativeElement.nodeName.includes('P-') ? findSingle(this.el.nativeElement, '.p-component') : this.el.nativeElement; } alignLeft() { this.preAlign('left'); let hostOffset = this.getHostOffset(); - let left = hostOffset.left - DomHandler.getOuterWidth(this.container); - let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2; + let left = hostOffset.left - getOuterWidth(this.container); + let top = hostOffset.top + (getOuterHeight(this.el.nativeElement) - getOuterHeight(this.container)) / 2; this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } @@ -585,8 +586,8 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { alignTop() { this.preAlign('top'); let hostOffset = this.getHostOffset(); - let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2; - let top = hostOffset.top - DomHandler.getOuterHeight(this.container); + let left = hostOffset.left + (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2; + let top = hostOffset.top - getOuterHeight(this.container); this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } @@ -594,8 +595,8 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { alignBottom() { this.preAlign('bottom'); let hostOffset = this.getHostOffset(); - let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2; - let top = hostOffset.top + DomHandler.getOuterHeight(this.el.nativeElement); + let left = hostOffset.left + (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2; + let top = hostOffset.top + getOuterHeight(this.el.nativeElement); this.container.style.left = left + this.getOption('positionLeft') + 'px'; this.container.style.top = top + this.getOption('positionTop') + 'px'; } @@ -609,7 +610,7 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { } getTarget(el: Element) { - return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input') : el; + return hasClass(el, 'p-inputwrapper') ? findSingle(el, 'input') : el; } preAlign(position: string) { @@ -624,9 +625,9 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { let offset = this.container.getBoundingClientRect(); let targetTop = offset.top; let targetLeft = offset.left; - let width = DomHandler.getOuterWidth(this.container); - let height = DomHandler.getOuterHeight(this.container); - let viewport = DomHandler.getViewport(); + let width = getOuterWidth(this.container); + let height = getOuterHeight(this.container); + let viewport = getViewport(); return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height; } @@ -692,7 +693,7 @@ export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy { if (this.container && this.container.parentElement) { if (this.getOption('appendTo') === 'body') document.body.removeChild(this.container); else if (this.getOption('appendTo') === 'target') this.el.nativeElement.removeChild(this.container); - else DomHandler.removeChild(this.container, this.getOption('appendTo')); + else removeChild(this.container, this.getOption('appendTo')); } this.unbindDocumentResizeListener(); diff --git a/packages/primeng/src/tree/style/treestyle.ts b/packages/primeng/src/tree/style/treestyle.ts index 196a7da427f..d6b96be69b4 100644 --- a/packages/primeng/src/tree/style/treestyle.ts +++ b/packages/primeng/src/tree/style/treestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-tree { diff --git a/packages/primeng/src/tree/tree.interface.ts b/packages/primeng/src/tree/tree.interface.ts index 4651efd64e7..3c372ceb69f 100644 --- a/packages/primeng/src/tree/tree.interface.ts +++ b/packages/primeng/src/tree/tree.interface.ts @@ -1,7 +1,6 @@ import { TemplateRef } from '@angular/core'; -import { TreeNode } from 'primeng/api'; +import { ScrollerOptions, TreeNode } from 'primeng/api'; import { Tree } from './tree'; -import { ScrollerOptions } from 'primeng/api'; /** * Custom node select event. diff --git a/packages/primeng/src/tree/tree.ts b/packages/primeng/src/tree/tree.ts index 849331ad220..b8a0a98f130 100755 --- a/packages/primeng/src/tree/tree.ts +++ b/packages/primeng/src/tree/tree.ts @@ -3,7 +3,6 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, - contentChild, ContentChild, ElementRef, EventEmitter, @@ -22,21 +21,20 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, SharedModule, TranslationKeys, TreeDragDropService, TreeNode } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; +import { FormsModule } from '@angular/forms'; +import { BaseComponent, SharedModule, TranslationKeys } from '@primeng/core'; +import { CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, PlusIcon, SearchIcon, SpinnerIcon } from '@primeng/icons'; +import { find, findSingle, focus, hasClass, removeAccents, resolveFieldData } from '@primeuix/utils'; +import { BlockableUI, ScrollerOptions, TreeDragDropService, TreeNode } from 'primeng/api'; +import { Checkbox } from 'primeng/checkbox'; +import { IconField } from 'primeng/iconfield'; +import { InputIcon } from 'primeng/inputicon'; +import { InputText } from 'primeng/inputtext'; import { Ripple } from 'primeng/ripple'; import { Scroller } from 'primeng/scroller'; -import { ScrollerOptions } from 'primeng/api'; -import { ObjectUtils } from 'primeng/utils'; -import { Subscription } from 'rxjs'; -import { CheckIcon } from 'primeng/icons/check'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { MinusIcon } from 'primeng/icons/minus'; -import { PlusIcon } from 'primeng/icons/plus'; -import { SearchIcon } from 'primeng/icons/search'; -import { SpinnerIcon } from 'primeng/icons/spinner'; import { Nullable } from 'primeng/ts-helpers'; +import { Subscription } from 'rxjs'; +import { TreeStyle } from './style/treestyle'; import { TreeFilterEvent, TreeLazyLoadEvent, @@ -49,13 +47,6 @@ import { TreeScrollEvent, TreeScrollIndexChangeEvent } from './tree.interface'; -import { InputText } from 'primeng/inputtext'; -import { InputIcon } from 'primeng/inputicon'; -import { IconField } from 'primeng/iconfield'; -import { Checkbox } from 'primeng/checkbox'; -import { FormsModule } from '@angular/forms'; -import { TreeStyle } from './style/treestyle'; -import { BaseComponent } from 'primeng/basecomponent'; @Component({ selector: 'p-treeNode', @@ -616,7 +607,7 @@ export class UITreeNode extends BaseComponent implements OnInit { } setAllNodesTabIndexes() { - const nodes = DomHandler.find(this.tree.el.nativeElement, '.p-treenode'); + const nodes = find(this.tree.el.nativeElement, '.p-treenode'); const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true'); @@ -633,18 +624,18 @@ export class UITreeNode extends BaseComponent implements OnInit { } if (nodes.length) { - [...nodes][0].tabIndex = 0; + ([...nodes][0] as any).tabIndex = 0; } } setTabIndexForSelectionMode(event, nodeTouched) { if (this.tree.selectionMode !== null) { - const elements = [...DomHandler.find(this.tree.el.nativeElement, '.p-treenode')]; + const elements = [...find(this.tree.el.nativeElement, '.p-treenode')]; event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0; - if (elements.every((element) => element.tabIndex === -1)) { - elements[0].tabIndex = 0; + if (elements.every((element: any) => element.tabIndex === -1)) { + (elements[0] as any).tabIndex = 0; } } } @@ -661,7 +652,7 @@ export class UITreeNode extends BaseComponent implements OnInit { } findLastVisibleDescendant(nodeElement: any): any { - const listElement = Array.from(nodeElement.children).find((el) => DomHandler.hasClass(el, 'p-treenode')); + const listElement = Array.from(nodeElement.children).find((el: any) => hasClass(el, 'p-treenode')); const childrenListElement = listElement.children[1]; if (childrenListElement && childrenListElement.children.length > 0) { const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1]; @@ -692,8 +683,8 @@ export class UITreeNode extends BaseComponent implements OnInit { focusVirtualNode() { this.timeout = setTimeout(() => { - let node = DomHandler.findSingle(document.body, `[data-id="${this.node?.key ?? this.node?.data}"]`); - DomHandler.focus(node); + let node = findSingle(document.body, `[data-id="${this.node?.key ?? this.node?.data}"]`); + focus(node); }, 1); } } @@ -1217,7 +1208,7 @@ export class Tree extends BaseComponent implements OnInit, OnChanges, OnDestroy, onNodeClick(event: Event, node: TreeNode) { let eventTarget = event.target; - if (DomHandler.hasClass(eventTarget, 'p-tree-toggler') || DomHandler.hasClass(eventTarget, 'p-tree-toggler-icon')) { + if (hasClass(eventTarget, 'p-tree-toggler') || hasClass(eventTarget, 'p-tree-toggler-icon')) { return; } else if (this.selectionMode) { if (node.selectable === false) { @@ -1597,7 +1588,7 @@ export class Tree extends BaseComponent implements OnInit, OnChanges, OnDestroy, } else { this.filteredNodes = []; const searchFields: string[] = this.filterBy.split(','); - const filterText = ObjectUtils.removeAccents(filterValue).toLocaleLowerCase(this.filterLocale); + const filterText = removeAccents(filterValue).toLocaleLowerCase(this.filterLocale); const isStrictMode = this.filterMode === 'strict'; for (let node of []>this.value) { let copyNode = { ...node }; @@ -1681,7 +1672,7 @@ export class Tree extends BaseComponent implements OnInit, OnChanges, OnDestroy, let { searchFields, filterText, isStrictMode } = params; let matched = false; for (let field of searchFields) { - let fieldValue = ObjectUtils.removeAccents(String(ObjectUtils.resolveFieldData(node, field))).toLocaleLowerCase(this.filterLocale); + let fieldValue = removeAccents(String(resolveFieldData(node, field))).toLocaleLowerCase(this.filterLocale); if (fieldValue.indexOf(filterText) > -1) { matched = true; } diff --git a/packages/primeng/src/treeselect/style/treeselectstyle.ts b/packages/primeng/src/treeselect/style/treeselectstyle.ts index 4b61a79e296..6061dbcfa35 100644 --- a/packages/primeng/src/treeselect/style/treeselectstyle.ts +++ b/packages/primeng/src/treeselect/style/treeselectstyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` .p-treeselect { diff --git a/packages/primeng/src/treeselect/treeselect.ts b/packages/primeng/src/treeselect/treeselect.ts index 752db3ddd75..12be7daf1ef 100755 --- a/packages/primeng/src/treeselect/treeselect.ts +++ b/packages/primeng/src/treeselect/treeselect.ts @@ -2,22 +2,19 @@ import { AnimationEvent } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, inject, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { OverlayOptions, ScrollerOptions, SharedModule, TreeNode } from 'primeng/api'; -import { DomHandler } from 'primeng/dom'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { SearchIcon } from 'primeng/icons/search'; -import { TimesIcon } from 'primeng/icons/times'; +import { BaseComponent, OverlayOptions, SharedModule } from '@primeng/core'; +import { ChevronDownIcon, SearchIcon, TimesIcon } from '@primeng/icons'; +import { focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, hasClass, isNotEmpty, uuid } from '@primeuix/utils'; +import { ScrollerOptions, TreeNode } from 'primeng/api'; +import { AutoFocus } from 'primeng/autofocus'; +import { Chip } from 'primeng/chip'; +import { InputText } from 'primeng/inputtext'; import { Overlay } from 'primeng/overlay'; import { Ripple } from 'primeng/ripple'; import { Tree, TreeFilterEvent, TreeNodeSelectEvent, TreeNodeUnSelectEvent } from 'primeng/tree'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { Nullable } from 'primeng/ts-helpers'; -import { AutoFocus } from 'primeng/autofocus'; -import { TreeSelectNodeCollapseEvent, TreeSelectNodeExpandEvent } from './treeselect.interface'; -import { Chip } from 'primeng/chip'; -import { BaseComponent } from 'primeng/basecomponent'; import { TreeSelectStyle } from './style/treeselectstyle'; -import { InputText } from 'primeng/inputtext'; +import { TreeSelectNodeCollapseEvent, TreeSelectNodeExpandEvent } from './treeselect.interface'; export const TREESELECT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -587,7 +584,7 @@ export class TreeSelect extends BaseComponent { ngOnInit() { super.ngOnInit(); - this.listId = UniqueComponentId() + '_list'; + this.listId = uuid('pn_id_') + '_list'; this.updateTreeState(); } @@ -595,10 +592,10 @@ export class TreeSelect extends BaseComponent { switch (event.toState) { case 'visible': if (this.filter) { - ObjectUtils.isNotEmpty(this.filterValue) && this.treeViewChild?._filter(this.filterValue); + isNotEmpty(this.filterValue) && this.treeViewChild?._filter(this.filterValue); this.filterInputAutoFocus && this.filterViewChild?.nativeElement.focus(); } else { - let focusableElements = DomHandler.getFocusableElements(this.panelEl.nativeElement); + let focusableElements = getFocusableElements(this.panelEl.nativeElement); if (focusableElements && focusableElements.length > 0) { focusableElements[0].focus(); @@ -609,7 +606,7 @@ export class TreeSelect extends BaseComponent { } onOverlayBeforeHide(event: any) { - let focusableElements = DomHandler.getFocusableElements(this.containerEl.nativeElement); + let focusableElements = getFocusableElements(this.containerEl.nativeElement); if (focusableElements && focusableElements.length > 0) { focusableElements[0].focus(); @@ -622,17 +619,12 @@ export class TreeSelect extends BaseComponent { this.cd.markForCheck(); } - onClick(event: Event) { + onClick(event: any) { if (this.disabled) { return; } - if ( - !this.overlayViewChild?.el?.nativeElement?.contains(event.target) && - !DomHandler.hasClass(event.target, 'p-treeselect-close') && - !DomHandler.hasClass(event.target, 'p-checkbox-box') && - !DomHandler.hasClass(event.target, 'p-checkbox-icon') - ) { + if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target) && !hasClass(event.target, 'p-treeselect-close') && !hasClass(event.target, 'p-checkbox-box') && !hasClass(event.target, 'p-checkbox-icon')) { if (this.overlayVisible) { this.hide(); } else { @@ -697,7 +689,7 @@ export class TreeSelect extends BaseComponent { onArrowDown(event: KeyboardEvent) { if (this.overlayVisible && this.panelEl?.nativeElement) { - let focusableElements = DomHandler.getFocusableElements(this.panelEl.nativeElement, '.p-treenode'); + let focusableElements = getFocusableElements(this.panelEl.nativeElement, '.p-treenode'); if (focusableElements && focusableElements.length > 0) { focusableElements[0].focus(); @@ -708,17 +700,15 @@ export class TreeSelect extends BaseComponent { } onFirstHiddenFocus(event) { - const focusableEl = - event.relatedTarget === this.focusInput?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInput?.nativeElement; + const focusableEl = event.relatedTarget === this.focusInput?.nativeElement ? getFirstFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInput?.nativeElement; - DomHandler.focus(focusableEl); + focus(focusableEl); } onLastHiddenFocus(event) { - const focusableEl = - event.relatedTarget === this.focusInput?.nativeElement ? DomHandler.getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInput?.nativeElement; + const focusableEl = event.relatedTarget === this.focusInput?.nativeElement ? getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInput?.nativeElement; - DomHandler.focus(focusableEl); + focus(focusableEl); } show() { @@ -744,13 +734,13 @@ export class TreeSelect extends BaseComponent { } checkValue() { - return this.value !== null && ObjectUtils.isNotEmpty(this.value); + return this.value !== null && isNotEmpty(this.value); } onTabKey(event, pressedInInputText = false) { if (!pressedInInputText) { if (this.overlayVisible && this.hasFocusableElements()) { - DomHandler.focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); + focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); event.preventDefault(); } else { @@ -760,7 +750,7 @@ export class TreeSelect extends BaseComponent { } hasFocusableElements() { - return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; + return getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; } resetFilter() { diff --git a/packages/primeng/src/treetable/style/treetablestyle.ts b/packages/primeng/src/treetable/style/treetablestyle.ts index 4b9fedd18ad..8e11aedde0b 100644 --- a/packages/primeng/src/treetable/style/treetablestyle.ts +++ b/packages/primeng/src/treetable/style/treetablestyle.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BaseStyle } from 'primeng/base'; +import { BaseStyle } from '@primeng/core/base'; const theme = ({ dt }) => ` /* For PrimeNG */ diff --git a/packages/primeng/src/treetable/treetable.interface.ts b/packages/primeng/src/treetable/treetable.interface.ts index 6b713b8d3f7..41945a1378c 100644 --- a/packages/primeng/src/treetable/treetable.interface.ts +++ b/packages/primeng/src/treetable/treetable.interface.ts @@ -1,5 +1,6 @@ import { TemplateRef } from '@angular/core'; -import { FilterMetadata, LazyLoadMeta, SortMeta, TreeNode, TreeTableNode } from 'primeng/api'; +import { FilterMetadata, SortMeta } from '@primeng/core'; +import { LazyLoadMeta, TreeNode, TreeTableNode } from 'primeng/api'; import { TreeTable } from './treetable'; /** * Paginator state. diff --git a/packages/primeng/src/treetable/treetable.spec.ts b/packages/primeng/src/treetable/treetable.spec.ts index 98e2363058e..ead92f5eb36 100755 --- a/packages/primeng/src/treetable/treetable.spec.ts +++ b/packages/primeng/src/treetable/treetable.spec.ts @@ -1,11 +1,10 @@ -import { TestBed, ComponentFixture, fakeAsync, tick, async } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { TreeTable, TreeTableModule, TTScrollableView } from './treetable'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { FormsModule } from '@angular/forms'; -import { Component } from '@angular/core'; -import { ContextMenuModule, ContextMenu } from 'primeng/contextmenu'; -import { MinusIcon } from 'primeng/icons/minus'; +import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; +import { TreeTable, TreeTableModule } from './treetable'; @Component({ template: ` diff --git a/packages/primeng/src/treetable/treetable.ts b/packages/primeng/src/treetable/treetable.ts index 6c3f1c0532c..f063c3563a3 100755 --- a/packages/primeng/src/treetable/treetable.ts +++ b/packages/primeng/src/treetable/treetable.ts @@ -29,24 +29,40 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, FilterMetadata, FilterService, PrimeNGConfig, PrimeTemplate, ScrollerOptions, SharedModule, SortMeta, TreeNode, TreeTableNode } from 'primeng/api'; +import { FormsModule } from '@angular/forms'; +import { BaseComponent, FilterMetadata, FilterService, PrimeNGConfig, PrimeTemplate, SharedModule, SortMeta } from '@primeng/core'; +import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, SpinnerIcon } from '@primeng/icons'; +import { + addClass, + calculateScrollbarHeight, + calculateScrollbarWidth, + clearSelection, + equals, + find, + findSingle, + focus, + getAttribute, + getHiddenElementOuterHeight, + getHiddenElementOuterWidth, + getIndex, + getOffset, + hasClass, + invokeElementMethod, + isEmpty, + isNotEmpty, + removeClass, + reorderArray, + resolveFieldData +} from '@primeuix/utils'; +import { BlockableUI, ScrollerOptions, TreeNode, TreeTableNode } from 'primeng/api'; +import { Checkbox } from 'primeng/checkbox'; import { DomHandler } from 'primeng/dom'; -import { ArrowDownIcon } from 'primeng/icons/arrowdown'; -import { ArrowUpIcon } from 'primeng/icons/arrowup'; -import { CheckIcon } from 'primeng/icons/check'; -import { ChevronDownIcon } from 'primeng/icons/chevrondown'; -import { ChevronRightIcon } from 'primeng/icons/chevronright'; -import { MinusIcon } from 'primeng/icons/minus'; -import { SortAltIcon } from 'primeng/icons/sortalt'; -import { SortAmountDownIcon } from 'primeng/icons/sortamountdown'; -import { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt'; -import { SpinnerIcon } from 'primeng/icons/spinner'; import { PaginatorModule } from 'primeng/paginator'; import { Ripple } from 'primeng/ripple'; import { Scroller } from 'primeng/scroller'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { ObjectUtils } from 'primeng/utils'; import { Subject, Subscription } from 'rxjs'; +import { TreeTableStyle } from './style/treetablestyle'; import { TreeTableColResizeEvent, TreeTableColumnReorderEvent, @@ -62,10 +78,6 @@ import { TreeTablePaginatorState, TreeTableSortEvent } from './treetable.interface'; -import { Checkbox } from 'primeng/checkbox'; -import { FormsModule } from '@angular/forms'; -import { TreeTableStyle } from './style/treetablestyle'; -import { BaseComponent } from 'primeng/basecomponent'; @Injectable() export class TreeTableService { @@ -1093,10 +1105,10 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit this.selectedKeys = {}; if (Array.isArray(this._selection)) { for (let node of this._selection) { - this.selectedKeys[String(ObjectUtils.resolveFieldData(node.data, this.dataKey))] = 1; + this.selectedKeys[String(resolveFieldData(node.data, this.dataKey))] = 1; } } else { - this.selectedKeys[String(ObjectUtils.resolveFieldData((this._selection).data, this.dataKey))] = 1; + this.selectedKeys[String(resolveFieldData((this._selection).data, this.dataKey))] = 1; } } } @@ -1198,8 +1210,8 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit }); } else { nodes.sort((node1, node2) => { - let value1 = ObjectUtils.resolveFieldData(node1.data, this.sortField); - let value2 = ObjectUtils.resolveFieldData(node2.data, this.sortField); + let value1 = resolveFieldData(node1.data, this.sortField); + let value2 = resolveFieldData(node2.data, this.sortField); let result = null; if (value1 == null && value2 != null) result = -1; @@ -1260,12 +1272,12 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } multisortField(node1: TreeTableNode, node2: TreeTableNode, multiSortMeta: SortMeta[], index: number): number { - if (ObjectUtils.isEmpty(this.multiSortMeta) || ObjectUtils.isEmpty(multiSortMeta[index])) { + if (isEmpty(this.multiSortMeta) || isEmpty(multiSortMeta[index])) { return 0; } - let value1 = ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field); - let value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field); + let value1 = resolveFieldData(node1.data, multiSortMeta[index].field); + let value2 = resolveFieldData(node2.data, multiSortMeta[index].field); let result = null; if (value1 == null && value2 != null) result = -1; @@ -1382,14 +1394,14 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } onColumnResizeBegin(event: MouseEvent) { - let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left; + let containerLeft = getOffset(this.containerViewChild?.nativeElement).left; this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft; event.preventDefault(); } onColumnResize(event: MouseEvent) { - let containerLeft = DomHandler.getOffset(this.containerViewChild?.nativeElement).left; - DomHandler.addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); + let containerLeft = getOffset(this.containerViewChild?.nativeElement).left; + addClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); (this.resizeHelperViewChild).nativeElement.style.height = this.containerViewChild?.nativeElement.offsetHeight + 'px'; (this.resizeHelperViewChild).nativeElement.style.top = 0 + 'px'; (this.resizeHelperViewChild).nativeElement.style.left = event.pageX - containerLeft + this.containerViewChild?.nativeElement.scrollLeft + 'px'; @@ -1417,10 +1429,10 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit if (newColumnWidth > 15 && nextColumnWidth > parseInt(nextColumnMinWidth)) { if (this.scrollable) { let scrollableView = this.findParentScrollableView(column); - let scrollableBodyTable = DomHandler.findSingle(scrollableView, '.p-treetable-scrollable-body table') || DomHandler.findSingle(scrollableView, '.p-scroller-viewport table'); - let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table'); - let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table'); - let resizeColumnIndex = DomHandler.index(column); + let scrollableBodyTable = findSingle(scrollableView, '.p-treetable-scrollable-body table') || findSingle(scrollableView, '.p-scroller-viewport table'); + let scrollableHeaderTable = findSingle(scrollableView, 'table.p-treetable-scrollable-header-table'); + let scrollableFooterTable = findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table'); + let resizeColumnIndex = getIndex(column); this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth); this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth); @@ -1436,18 +1448,18 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } else if (this.columnResizeMode === 'expand') { if (this.scrollable) { let scrollableView = this.findParentScrollableView(column); - let scrollableBody = DomHandler.findSingle(scrollableView, '.p-treetable-scrollable-body') || DomHandler.findSingle(scrollableView, '.p-scroller-viewport'); - let scrollableHeader = DomHandler.findSingle(scrollableView, '.p-treetable-scrollable-header'); - let scrollableFooter = DomHandler.findSingle(scrollableView, '.p-treetable-scrollable-footer'); - let scrollableBodyTable = DomHandler.findSingle(scrollableView, '.p-treetable-scrollable-body table') || DomHandler.findSingle(scrollableView, '.p-scroller-viewport table'); - let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table'); - let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table'); + let scrollableBody = findSingle(scrollableView, '.p-treetable-scrollable-body') || findSingle(scrollableView, '.p-scroller-viewport'); + let scrollableHeader = findSingle(scrollableView, '.p-treetable-scrollable-header'); + let scrollableFooter = findSingle(scrollableView, '.p-treetable-scrollable-footer'); + let scrollableBodyTable = findSingle(scrollableView, '.p-treetable-scrollable-body table') || findSingle(scrollableView, '.p-scroller-viewport table'); + let scrollableHeaderTable = findSingle(scrollableView, 'table.p-treetable-scrollable-header-table'); + let scrollableFooterTable = findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table'); scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px'; scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px'; if (scrollableFooterTable) { scrollableFooterTable.style.width = scrollableFooterTable.offsetWidth + delta + 'px'; } - let resizeColumnIndex = DomHandler.index(column); + let resizeColumnIndex = getIndex(column); const scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth; const scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth; @@ -1455,7 +1467,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit let setWidth = (container: HTMLElement, table: HTMLElement, width: number, isContainerInViewport: boolean) => { if (container && table) { - container.style.width = isContainerInViewport ? width + DomHandler.calculateScrollbarWidth(scrollableBody) + 'px' : 'auto'; + container.style.width = isContainerInViewport ? width + calculateScrollbarWidth(scrollableBody) + 'px' : 'auto'; table.style.width = width + 'px'; } }; @@ -1482,13 +1494,13 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } (this.resizeHelperViewChild as ElementRef).nativeElement.style.display = 'none'; - DomHandler.removeClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); + removeClass(this.containerViewChild?.nativeElement, 'p-unselectable-text'); } findParentScrollableView(column: any) { if (column) { let parent = column.parentElement; - while (parent && !DomHandler.hasClass(parent, 'p-treetable-scrollable-view')) { + while (parent && !hasClass(parent, 'p-treetable-scrollable-view')) { parent = parent.parentElement; } @@ -1517,8 +1529,8 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } onColumnDragStart(event: DragEvent, columnElement: any) { - this.reorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUpViewChild?.nativeElement); - this.reorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorDownViewChild?.nativeElement); + this.reorderIconWidth = getHiddenElementOuterWidth(this.reorderIndicatorUpViewChild?.nativeElement); + this.reorderIconHeight = getHiddenElementOuterHeight(this.reorderIndicatorDownViewChild?.nativeElement); this.draggedColumn = columnElement; (event).dataTransfer.setData('text', 'b'); // For firefox } @@ -1526,8 +1538,8 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit onColumnDragEnter(event: DragEvent, dropHeader: any) { if (this.reorderableColumns && this.draggedColumn && dropHeader) { event.preventDefault(); - let containerOffset = DomHandler.getOffset(this.containerViewChild?.nativeElement); - let dropHeaderOffset = DomHandler.getOffset(dropHeader); + let containerOffset = getOffset(this.containerViewChild?.nativeElement); + let dropHeaderOffset = getOffset(dropHeader); if (this.draggedColumn != dropHeader) { let targetLeft = dropHeaderOffset.left - containerOffset.left; @@ -1582,7 +1594,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } if (allowDrop) { - ObjectUtils.reorderArray(this.columns, dragIndex, dropIndex); + reorderArray(this.columns, dragIndex, dropIndex); this.onColReorder.emit({ dragIndex: dragIndex, @@ -1601,7 +1613,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit handleRowClick(event: any) { let targetNode = (event.originalEvent.target).nodeName; - if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || DomHandler.hasClass(event.originalEvent.target, 'p-clickable')) { + if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || hasClass(event.originalEvent.target, 'p-clickable')) { return; } @@ -1610,7 +1622,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit let rowNode = event.rowNode; let selected = this.isSelected((rowNode).node); let metaSelection = this.rowTouched ? false : this.metaKeySelection; - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData((rowNode.node).data, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData((rowNode.node).data, this.dataKey)) : null; if (metaSelection) { let keyboardEvent = event.originalEvent; @@ -1742,7 +1754,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } else if (this.contextMenuSelectionMode === 'joint') { this.preventSelectionSetterPropagation = true; let selected = this.isSelected(node); - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(node.data, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(node.data, this.dataKey)) : null; if (!selected) { if (this.isSingleSelectionMode()) { @@ -1834,7 +1846,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit if (node.children && node.children.length) { let selectedChildCount: number = 0; let childPartialSelected: boolean = false; - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(node.data, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(node.data, this.dataKey)) : null; for (let child of node.children) { if (this.isSelected(child)) selectedChildCount++; @@ -1874,7 +1886,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit propagateSelectionDown(node: TreeTableNode, select: boolean) { // legacy selection support, will be removed in v18 let index = this.findIndexInSelection(node); - let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(node.data, this.dataKey)) : null; + let dataKeyValue = this.dataKey ? String(resolveFieldData(node.data, this.dataKey)) : null; if (select && index == -1) { this._selection = [...(this.selection || []), node]; @@ -1905,7 +1917,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit if (node.hasOwnProperty('checked')) { return node['checked']; } else { - return this.selectedKeys[ObjectUtils.resolveFieldData(node.data, this.dataKey)] !== undefined; + return this.selectedKeys[resolveFieldData(node.data, this.dataKey)] !== undefined; } } else { if (Array.isArray(this.selection)) return this.findIndexInSelection(node) > -1; @@ -1925,7 +1937,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } nodeKey(node) { - return ObjectUtils.resolveFieldData(node, this.dataKey) || ObjectUtils.resolveFieldData(node?.data, this.dataKey); + return resolveFieldData(node, this.dataKey) || resolveFieldData(node?.data, this.dataKey); } toggleCheckbox(event) { @@ -2008,7 +2020,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } equals(node1: TreeTableNode, node2: TreeTableNode) { - return this.compareSelectionBy === 'equals' ? ObjectUtils.equals(node1, node2) : ObjectUtils.equals(node1.data, node2.data, this.dataKey); + return this.compareSelectionBy === 'equals' ? equals(node1, node2) : equals(node1.data, node2.data, this.dataKey); } filter(value: string | string[], field: string, matchMode: string) { @@ -2177,7 +2189,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit isFilterMatched(node: TreeTableNode, filterOptions: TreeTableFilterOptions) { let { filterField, filterValue, filterConstraint, isStrictMode, globalFilterFieldsArray } = filterOptions; let matched = false; - const isMatched = (field: string) => filterConstraint(ObjectUtils.resolveFieldData(node.data, field), filterValue, this.filterLocale); + const isMatched = (field: string) => filterConstraint(resolveFieldData(node.data, field), filterValue, this.filterLocale); matched = globalFilterFieldsArray?.length ? globalFilterFieldsArray.some((globalFilterField) => isMatched(globalFilterField.field || globalFilterField)) : isMatched(filterField); @@ -2240,14 +2252,14 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit } isEditingCellValid() { - return this.editingCell && DomHandler.find(this.editingCell, '.ng-invalid.ng-dirty').length === 0; + return this.editingCell && find(this.editingCell, '.ng-invalid.ng-dirty').length === 0; } bindDocumentEditListener() { if (!this.documentEditListener) { this.documentEditListener = this.renderer.listen(this.document, 'click', (event) => { if (this.editingCell && !this.editingCellClick && this.isEditingCellValid()) { - DomHandler.removeClass(this.editingCell, 'p-cell-editing'); + removeClass(this.editingCell, 'p-cell-editing'); this.editingCell = null; this.onEditComplete.emit({ field: this.editingCellField, data: this.editingCellData }); this.editingCellField = null; @@ -2476,16 +2488,16 @@ export class TTScrollableView implements AfterViewInit, OnDestroy { if (isPlatformBrowser(this.platformId)) { if (!this.frozen) { if (this.tt.frozenColumns || this.tt.frozenBodyTemplate) { - DomHandler.addClass(this.el.nativeElement, 'p-treetable-unfrozen-view'); + addClass(this.el.nativeElement, 'p-treetable-unfrozen-view'); } let frozenView = this.el.nativeElement.previousElementSibling; if (frozenView) { - if (this.tt.virtualScroll) this.frozenSiblingBody = DomHandler.findSingle(frozenView, '.p-scroller-viewport'); - else this.frozenSiblingBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body'); + if (this.tt.virtualScroll) this.frozenSiblingBody = findSingle(frozenView, '.p-scroller-viewport'); + else this.frozenSiblingBody = findSingle(frozenView, '.p-treetable-scrollable-body'); } - let scrollBarWidth = DomHandler.calculateScrollbarWidth(); + let scrollBarWidth = calculateScrollbarWidth(); (this.scrollHeaderBoxViewChild as ElementRef).nativeElement.style.paddingRight = scrollBarWidth + 'px'; if (this.scrollFooterBoxViewChild && this.scrollFooterBoxViewChild.nativeElement) { @@ -2493,7 +2505,7 @@ export class TTScrollableView implements AfterViewInit, OnDestroy { } } else { if (this.scrollableAlignerViewChild && this.scrollableAlignerViewChild.nativeElement) { - this.scrollableAlignerViewChild.nativeElement.style.height = DomHandler.calculateScrollbarHeight() + 'px'; + this.scrollableAlignerViewChild.nativeElement.style.height = calculateScrollbarHeight() + 'px'; } } @@ -2675,7 +2687,7 @@ export class TTSortableColumn implements OnInit, OnDestroy { field: this.field }); - DomHandler.clearSelection(); + clearSelection(); } } @@ -2779,7 +2791,7 @@ export class TTResizableColumn implements AfterViewInit, OnDestroy { ngAfterViewInit() { if (isPlatformBrowser(this.platformId)) { if (this.isEnabled()) { - DomHandler.addClass(this.el.nativeElement, 'p-resizable-column'); + addClass(this.el.nativeElement, 'p-resizable-column'); this.resizer = this.renderer.createElement('span'); this.renderer.addClass(this.resizer, 'p-column-resizer'); this.renderer.appendChild(this.el.nativeElement, this.resizer); @@ -2906,7 +2918,7 @@ export class TTReorderableColumn implements AfterViewInit, OnDestroy { } onMouseDown(event: any) { - if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) this.el.nativeElement.draggable = false; + if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || hasClass(event.target, 'p-column-resizer')) this.el.nativeElement.draggable = false; else this.el.nativeElement.draggable = true; } @@ -3205,7 +3217,7 @@ export class TTCheckbox { }); } } - DomHandler.clearSelection(); + clearSelection(); } onFocus() { @@ -3269,7 +3281,7 @@ export class TTHeaderCheckbox { this.tt.toggleNodesWithCheckbox(event, !this.checked); } - DomHandler.clearSelection(); + clearSelection(); } ngOnDestroy() { @@ -3335,7 +3347,7 @@ export class TTEditableColumn implements AfterViewInit { ngAfterViewInit() { if (this.isEnabled()) { - DomHandler.addClass(this.el.nativeElement, 'p-editable-column'); + addClass(this.el.nativeElement, 'p-editable-column'); } } @@ -3350,7 +3362,7 @@ export class TTEditableColumn implements AfterViewInit { return; } - DomHandler.removeClass(this.tt.editingCell, 'p-cell-editing'); + removeClass(this.tt.editingCell, 'p-cell-editing'); this.openCell(); } } else { @@ -3361,12 +3373,12 @@ export class TTEditableColumn implements AfterViewInit { openCell() { this.tt.updateEditingCell(this.el.nativeElement, this.data, this.field); - DomHandler.addClass(this.el.nativeElement, 'p-cell-editing'); + addClass(this.el.nativeElement, 'p-cell-editing'); this.tt.onEditInit.emit({ field: this.field, data: this.data }); this.tt.editingCellClick = true; this.zone.runOutsideAngular(() => { setTimeout(() => { - let focusable = DomHandler.findSingle(this.el.nativeElement, 'input, textarea'); + let focusable = findSingle(this.el.nativeElement, 'input, textarea'); if (focusable) { focusable.focus(); } @@ -3375,7 +3387,7 @@ export class TTEditableColumn implements AfterViewInit { } closeEditingCell() { - DomHandler.removeClass(this.tt.editingCell, 'p-checkbox-icon'); + removeClass(this.tt.editingCell, 'p-checkbox-icon'); this.tt.editingCell = null; this.tt.unbindDocumentEditListener(); } @@ -3386,7 +3398,7 @@ export class TTEditableColumn implements AfterViewInit { //enter if (event.keyCode == 13 && !event.shiftKey) { if (this.tt.isEditingCellValid()) { - DomHandler.removeClass(this.tt.editingCell, 'p-cell-editing'); + removeClass(this.tt.editingCell, 'p-cell-editing'); this.closeEditingCell(); this.tt.onEditComplete.emit({ field: this.field, data: this.data }); } @@ -3397,7 +3409,7 @@ export class TTEditableColumn implements AfterViewInit { //escape else if (event.keyCode == 27) { if (this.tt.isEditingCellValid()) { - DomHandler.removeClass(this.tt.editingCell, 'p-cell-editing'); + removeClass(this.tt.editingCell, 'p-cell-editing'); this.closeEditingCell(); this.tt.onEditCancel.emit({ field: this.field, data: this.data }); } @@ -3418,7 +3430,7 @@ export class TTEditableColumn implements AfterViewInit { findCell(element: any) { if (element) { let cell = element; - while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) { + while (cell && !hasClass(cell, 'p-cell-editing')) { cell = cell.parentElement; } @@ -3434,7 +3446,7 @@ export class TTEditableColumn implements AfterViewInit { let targetCell = this.findPreviousEditableColumn(currentCell); if (targetCell) { - DomHandler.invokeElementMethod(targetCell, 'click'); + invokeElementMethod(targetCell, 'click', undefined); event.preventDefault(); } } @@ -3445,7 +3457,7 @@ export class TTEditableColumn implements AfterViewInit { let targetCell = this.findNextEditableColumn(currentCell); if (targetCell) { - DomHandler.invokeElementMethod(targetCell, 'click'); + invokeElementMethod(targetCell, 'click', undefined); event.preventDefault(); } } @@ -3461,7 +3473,7 @@ export class TTEditableColumn implements AfterViewInit { } if (prevCell) { - if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell; + if (hasClass(prevCell, 'p-editable-column')) return prevCell; else return this.findPreviousEditableColumn(prevCell); } else { return null; @@ -3479,7 +3491,7 @@ export class TTEditableColumn implements AfterViewInit { } if (nextCell) { - if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell; + if (hasClass(nextCell, 'p-editable-column')) return nextCell; else return this.findNextEditableColumn(nextCell); } else { return null; @@ -3619,7 +3631,7 @@ export class TTRow { onArrowRightKey(event: KeyboardEvent) { const currentTarget = event.currentTarget; - const isHiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden'; + const isHiddenIcon = (findSingle(currentTarget, 'button') as any).style.visibility === 'hidden'; if (!isHiddenIcon && !this.expanded && this.rowNode.node['children']) { this.expand(event); @@ -3631,54 +3643,54 @@ export class TTRow { onArrowLeftKey(event: KeyboardEvent) { const container = this.tt.containerViewChild?.nativeElement; - const expandedRows = DomHandler.find(container, '[aria-expanded="true"]'); + const expandedRows = find(container, '[aria-expanded="true"]'); const lastExpandedRow = expandedRows[expandedRows.length - 1]; if (this.expanded) { this.collapse(event); } if (lastExpandedRow) { - this.tt.toggleRowIndex = DomHandler.index(lastExpandedRow); + this.tt.toggleRowIndex = getIndex(lastExpandedRow as any); } this.restoreFocus(); event.preventDefault(); } onHomeKey(event: KeyboardEvent) { - const firstElement = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); - firstElement && DomHandler.focus(firstElement); + const firstElement = findSingle(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); + firstElement && focus(firstElement); event.preventDefault(); } onEndKey(event: KeyboardEvent) { - const nodes = DomHandler.find(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); + const nodes = find(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); const lastElement = nodes[nodes.length - 1]; - DomHandler.focus(lastElement); + focus(lastElement); event.preventDefault(); } onTabKey(event: KeyboardEvent) { - const rows = this.el.nativeElement ? [...DomHandler.find(this.el.nativeElement.parentNode, 'tr')] : undefined; + const rows = this.el.nativeElement ? [...find(this.el.nativeElement.parentNode, 'tr')] : undefined; - if (rows && ObjectUtils.isNotEmpty(rows)) { - const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true'); - rows.forEach((row) => { + if (rows && isNotEmpty(rows)) { + const hasSelectedRow = rows.some((row) => getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true'); + rows.forEach((row: any) => { row.tabIndex = -1; }); if (hasSelectedRow) { - const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true'); - selectedNodes[0].tabIndex = 0; + const selectedNodes = rows.filter((node) => getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true'); + (selectedNodes[0] as any).tabIndex = 0; return; } - rows[0].tabIndex = 0; + (rows[0] as any).tabIndex = 0; } } expand(event: Event) { - this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); + this.tt.toggleRowIndex = getIndex(this.el.nativeElement); this.rowNode.node['expanded'] = true; this.tt.updateSerializedValue(); @@ -3704,18 +3716,18 @@ export class TTRow { firstFocusableRow.tabIndex = '-1'; currentFocusedRow.tabIndex = '0'; - DomHandler.focus(currentFocusedRow); + focus(currentFocusedRow); } restoreFocus(index?) { this.zone.runOutsideAngular(() => { setTimeout(() => { const container = this.tt.containerViewChild?.nativeElement; - const row = DomHandler.findSingle(container, '.p-treetable-tbody').children[index || this.tt.toggleRowIndex]; - const rows = [...DomHandler.find(container, 'tr')]; + const row = findSingle(container, '.p-treetable-tbody').children[index || this.tt.toggleRowIndex]; + const rows = [...find(container, 'tr')]; rows && - rows.forEach((r) => { + rows.forEach((r: any) => { if (!row.isSameNode(r)) { r.tabIndex = -1; } diff --git a/packages/primeng/tsconfig.json b/packages/primeng/tsconfig.json index 63b5082a6a9..b1709251ad0 100644 --- a/packages/primeng/tsconfig.json +++ b/packages/primeng/tsconfig.json @@ -1,3 +1,16 @@ { - "extends": "../../tsconfig.json" + "extends": "../../tsconfig.json", + "angularCompilerOptions": { + "disableTypeScriptVersionCheck": true, + "fullTemplateTypeCheck": false, + "annotateForClosureCompiler": false, + "strictTemplates": false, + "strictMetadataEmit": true, + "skipTemplateCodegen": true, + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "flatModuleOutFile": "primeng.js", + "flatModuleId": "primeng" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e6b48a3b3e3..97181d55f3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,7 +77,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: catalog:angular18 - version: 18.2.11(hg27yiww64fifi5atrbfj3duay) + version: 18.2.11(sohukoqrskuhargsglksjvmvhi) '@angular-eslint/eslint-plugin': specifier: catalog:angular18 version: 18.4.0(@typescript-eslint/utils@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5) @@ -158,7 +158,7 @@ importers: version: 12.5.0 ng-packagr: specifier: catalog:angular18 - version: 18.2.1(@angular/compiler-cli@18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5))(tailwindcss@3.4.14)(tslib@2.6.3)(typescript@5.4.5) + version: 18.2.1(@angular/compiler-cli@18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5))(tailwindcss@3.4.14)(tslib@2.8.1)(typescript@5.4.5) pnpm: specifier: ^9.6.0 version: 9.12.3 @@ -176,10 +176,10 @@ importers: dependencies: autoprefixer: specifier: ^10.4.20 - version: 10.4.20(postcss@8.4.47) + version: 10.4.20(postcss@8.4.48) postcss: specifier: ^8.4.41 - version: 8.4.47 + version: 8.4.48 tailwindcss: specifier: ^3.4.10 version: 3.4.14(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)) @@ -190,6 +190,9 @@ importers: '@algolia/client-search': specifier: ^4.19.1 version: 4.24.0 + '@angular/cdk': + specifier: catalog:angular18 + version: 18.2.12(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1) '@angular/ssr': specifier: catalog:angular18 version: 18.2.11(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)) @@ -284,6 +287,51 @@ importers: specifier: ~0.14.0 version: 0.14.10 + packages/core: + dependencies: + '@primeuix/styled': + specifier: 'catalog:' + version: 0.3.0 + '@primeuix/utils': + specifier: 'catalog:' + version: 0.3.0 + devDependencies: + '@angular/animations': + specifier: ^17.0.0 || ^18.0.0 + version: 18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)) + '@angular/cdk': + specifier: ^17.0.0 || ^18.0.0 + version: 18.2.12(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1) + '@angular/common': + specifier: ^17.0.0 || ^18.0.0 + version: 18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1) + '@angular/core': + specifier: ^17.0.0 || ^18.0.0 + version: 18.2.11(rxjs@7.8.1)(zone.js@0.14.10) + '@angular/forms': + specifier: ^17.0.0 || ^18.0.0 + version: 18.2.11(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.11(@angular/animations@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1) + '@angular/router': + specifier: ^17.0.0 || ^18.0.0 + version: 18.2.11(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.11(@angular/animations@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1) + rxjs: + specifier: ^6.0.0 || ^7.8.1 + version: 7.8.1 + zone.js: + specifier: ~0.14.0 + version: 0.14.10 + publishDirectory: dist + + packages/icons: + dependencies: + '@primeng/core': + specifier: workspace:* + version: link:../core + '@primeuix/utils': + specifier: 'catalog:' + version: 0.3.0 + publishDirectory: dist + packages/primeng: dependencies: '@angular/animations': @@ -301,6 +349,12 @@ importers: '@angular/router': specifier: ^17.0.0 || ^18.0.0 version: 18.2.11(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.11(@angular/animations@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1) + '@primeng/core': + specifier: workspace:* + version: link:../core + '@primeng/icons': + specifier: workspace:* + version: link:../icons '@primeuix/styled': specifier: 'catalog:' version: 0.3.0 @@ -2564,8 +2618,8 @@ packages: cpu: [arm] os: [android] - '@rollup/rollup-android-arm-eabi@4.24.4': - resolution: {integrity: sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==} + '@rollup/rollup-android-arm-eabi@4.25.0': + resolution: {integrity: sha512-CC/ZqFZwlAIbU1wUPisHyV/XRc5RydFrNLtgl3dGYskdwPZdt4HERtKm50a/+DtTlKeCq9IXFEWR+P6blwjqBA==} cpu: [arm] os: [android] @@ -2574,8 +2628,8 @@ packages: cpu: [arm64] os: [android] - '@rollup/rollup-android-arm64@4.24.4': - resolution: {integrity: sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==} + '@rollup/rollup-android-arm64@4.25.0': + resolution: {integrity: sha512-/Y76tmLGUJqVBXXCfVS8Q8FJqYGhgH4wl4qTA24E9v/IJM0XvJCGQVSW1QZ4J+VURO9h8YCa28sTFacZXwK7Rg==} cpu: [arm64] os: [android] @@ -2584,8 +2638,8 @@ packages: cpu: [arm64] os: [darwin] - '@rollup/rollup-darwin-arm64@4.24.4': - resolution: {integrity: sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==} + '@rollup/rollup-darwin-arm64@4.25.0': + resolution: {integrity: sha512-YVT6L3UrKTlC0FpCZd0MGA7NVdp7YNaEqkENbWQ7AOVOqd/7VzyHpgIpc1mIaxRAo1ZsJRH45fq8j4N63I/vvg==} cpu: [arm64] os: [darwin] @@ -2594,18 +2648,18 @@ packages: cpu: [x64] os: [darwin] - '@rollup/rollup-darwin-x64@4.24.4': - resolution: {integrity: sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==} + '@rollup/rollup-darwin-x64@4.25.0': + resolution: {integrity: sha512-ZRL+gexs3+ZmmWmGKEU43Bdn67kWnMeWXLFhcVv5Un8FQcx38yulHBA7XR2+KQdYIOtD0yZDWBCudmfj6lQJoA==} cpu: [x64] os: [darwin] - '@rollup/rollup-freebsd-arm64@4.24.4': - resolution: {integrity: sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==} + '@rollup/rollup-freebsd-arm64@4.25.0': + resolution: {integrity: sha512-xpEIXhiP27EAylEpreCozozsxWQ2TJbOLSivGfXhU4G1TBVEYtUPi2pOZBnvGXHyOdLAUUhPnJzH3ah5cqF01g==} cpu: [arm64] os: [freebsd] - '@rollup/rollup-freebsd-x64@4.24.4': - resolution: {integrity: sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==} + '@rollup/rollup-freebsd-x64@4.25.0': + resolution: {integrity: sha512-sC5FsmZGlJv5dOcURrsnIK7ngc3Kirnx3as2XU9uER+zjfyqIjdcMVgzy4cOawhsssqzoAX19qmxgJ8a14Qrqw==} cpu: [x64] os: [freebsd] @@ -2614,8 +2668,8 @@ packages: cpu: [arm] os: [linux] - '@rollup/rollup-linux-arm-gnueabihf@4.24.4': - resolution: {integrity: sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==} + '@rollup/rollup-linux-arm-gnueabihf@4.25.0': + resolution: {integrity: sha512-uD/dbLSs1BEPzg564TpRAQ/YvTnCds2XxyOndAO8nJhaQcqQGFgv/DAVko/ZHap3boCvxnzYMa3mTkV/B/3SWA==} cpu: [arm] os: [linux] @@ -2624,8 +2678,8 @@ packages: cpu: [arm] os: [linux] - '@rollup/rollup-linux-arm-musleabihf@4.24.4': - resolution: {integrity: sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==} + '@rollup/rollup-linux-arm-musleabihf@4.25.0': + resolution: {integrity: sha512-ZVt/XkrDlQWegDWrwyC3l0OfAF7yeJUF4fq5RMS07YM72BlSfn2fQQ6lPyBNjt+YbczMguPiJoCfaQC2dnflpQ==} cpu: [arm] os: [linux] @@ -2634,8 +2688,8 @@ packages: cpu: [arm64] os: [linux] - '@rollup/rollup-linux-arm64-gnu@4.24.4': - resolution: {integrity: sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==} + '@rollup/rollup-linux-arm64-gnu@4.25.0': + resolution: {integrity: sha512-qboZ+T0gHAW2kkSDPHxu7quaFaaBlynODXpBVnPxUgvWYaE84xgCKAPEYE+fSMd3Zv5PyFZR+L0tCdYCMAtG0A==} cpu: [arm64] os: [linux] @@ -2644,8 +2698,8 @@ packages: cpu: [arm64] os: [linux] - '@rollup/rollup-linux-arm64-musl@4.24.4': - resolution: {integrity: sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==} + '@rollup/rollup-linux-arm64-musl@4.25.0': + resolution: {integrity: sha512-ndWTSEmAaKr88dBuogGH2NZaxe7u2rDoArsejNslugHZ+r44NfWiwjzizVS1nUOHo+n1Z6qV3X60rqE/HlISgw==} cpu: [arm64] os: [linux] @@ -2654,8 +2708,8 @@ packages: cpu: [ppc64] os: [linux] - '@rollup/rollup-linux-powerpc64le-gnu@4.24.4': - resolution: {integrity: sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==} + '@rollup/rollup-linux-powerpc64le-gnu@4.25.0': + resolution: {integrity: sha512-BVSQvVa2v5hKwJSy6X7W1fjDex6yZnNKy3Kx1JGimccHft6HV0THTwNtC2zawtNXKUu+S5CjXslilYdKBAadzA==} cpu: [ppc64] os: [linux] @@ -2664,8 +2718,8 @@ packages: cpu: [riscv64] os: [linux] - '@rollup/rollup-linux-riscv64-gnu@4.24.4': - resolution: {integrity: sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==} + '@rollup/rollup-linux-riscv64-gnu@4.25.0': + resolution: {integrity: sha512-G4hTREQrIdeV0PE2JruzI+vXdRnaK1pg64hemHq2v5fhv8C7WjVaeXc9P5i4Q5UC06d/L+zA0mszYIKl+wY8oA==} cpu: [riscv64] os: [linux] @@ -2674,8 +2728,8 @@ packages: cpu: [s390x] os: [linux] - '@rollup/rollup-linux-s390x-gnu@4.24.4': - resolution: {integrity: sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==} + '@rollup/rollup-linux-s390x-gnu@4.25.0': + resolution: {integrity: sha512-9T/w0kQ+upxdkFL9zPVB6zy9vWW1deA3g8IauJxojN4bnz5FwSsUAD034KpXIVX5j5p/rn6XqumBMxfRkcHapQ==} cpu: [s390x] os: [linux] @@ -2684,8 +2738,8 @@ packages: cpu: [x64] os: [linux] - '@rollup/rollup-linux-x64-gnu@4.24.4': - resolution: {integrity: sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==} + '@rollup/rollup-linux-x64-gnu@4.25.0': + resolution: {integrity: sha512-ThcnU0EcMDn+J4B9LD++OgBYxZusuA7iemIIiz5yzEcFg04VZFzdFjuwPdlURmYPZw+fgVrFzj4CA64jSTG4Ig==} cpu: [x64] os: [linux] @@ -2694,8 +2748,8 @@ packages: cpu: [x64] os: [linux] - '@rollup/rollup-linux-x64-musl@4.24.4': - resolution: {integrity: sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==} + '@rollup/rollup-linux-x64-musl@4.25.0': + resolution: {integrity: sha512-zx71aY2oQxGxAT1JShfhNG79PnjYhMC6voAjzpu/xmMjDnKNf6Nl/xv7YaB/9SIa9jDYf8RBPWEnjcdlhlv1rQ==} cpu: [x64] os: [linux] @@ -2704,8 +2758,8 @@ packages: cpu: [arm64] os: [win32] - '@rollup/rollup-win32-arm64-msvc@4.24.4': - resolution: {integrity: sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==} + '@rollup/rollup-win32-arm64-msvc@4.25.0': + resolution: {integrity: sha512-JT8tcjNocMs4CylWY/CxVLnv8e1lE7ff1fi6kbGocWwxDq9pj30IJ28Peb+Y8yiPNSF28oad42ApJB8oUkwGww==} cpu: [arm64] os: [win32] @@ -2714,8 +2768,8 @@ packages: cpu: [ia32] os: [win32] - '@rollup/rollup-win32-ia32-msvc@4.24.4': - resolution: {integrity: sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==} + '@rollup/rollup-win32-ia32-msvc@4.25.0': + resolution: {integrity: sha512-dRLjLsO3dNOfSN6tjyVlG+Msm4IiZnGkuZ7G5NmpzwF9oOc582FZG05+UdfTbz5Jd4buK/wMb6UeHFhG18+OEg==} cpu: [ia32] os: [win32] @@ -2724,13 +2778,13 @@ packages: cpu: [x64] os: [win32] - '@rollup/rollup-win32-x64-msvc@4.24.4': - resolution: {integrity: sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==} + '@rollup/rollup-win32-x64-msvc@4.25.0': + resolution: {integrity: sha512-/RqrIFtLB926frMhZD0a5oDa4eFIbyNEwLLloMTEjmqfwZWXywwVVOVmwTsuyhC9HKkVEZcOOi+KV4U9wmOdlg==} cpu: [x64] os: [win32] - '@rollup/wasm-node@4.24.4': - resolution: {integrity: sha512-WKJUdPcM8YAYujafY95+2EapqU3F/nwfBkXh9AfkBvWBwFhsvNJABA86Br6graRH2vRE4FBsiqjFvFWOtEO6wg==} + '@rollup/wasm-node@4.25.0': + resolution: {integrity: sha512-Brhz6gK/43E9lpMkbcfg06hRHctpMkbmy1JzOU2JWub3teujTNqou1xWTQgt9CRu15WGTt78t7p7rNxGIBZv+g==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true @@ -3352,8 +3406,8 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - caniuse-lite@1.0.30001679: - resolution: {integrity: sha512-j2YqID/YwpLnKzCmBOS4tlZdWprXm3ZmQLBH9ZBXFOhoxLA46fwyBvx6toCBWBmnuwUY/qB3kEU6gFx8qgCroA==} + caniuse-lite@1.0.30001680: + resolution: {integrity: sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==} canvg@3.0.10: resolution: {integrity: sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==} @@ -5290,8 +5344,8 @@ packages: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} - object-inspect@1.13.2: - resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==} + object-inspect@1.13.3: + resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==} engines: {node: '>= 0.4'} object-keys@1.1.1: @@ -5629,8 +5683,8 @@ packages: resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==} engines: {node: ^10 || ^12 || >=14} - postcss@8.4.47: - resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} + postcss@8.4.48: + resolution: {integrity: sha512-GCRK8F6+Dl7xYniR5a4FYbpBzU8XnZVeowqsQFYdcXuSbChgiks7qybSkbvnaeqv0G0B+dd9/jJgH8kkLDQeEA==} engines: {node: ^10 || ^12 || >=14} preact@10.24.3: @@ -5852,8 +5906,8 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true - rollup@4.24.4: - resolution: {integrity: sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==} + rollup@4.25.0: + resolution: {integrity: sha512-uVbClXmR6wvx5R1M3Od4utyLUxrmOcEm3pAtMphn73Apq19PDtHpgZoEvqH2YnnaNUuvKmg2DgRd2Sqv+odyqg==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true @@ -6934,7 +6988,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@18.2.11(hg27yiww64fifi5atrbfj3duay)': + '@angular-devkit/build-angular@18.2.11(sohukoqrskuhargsglksjvmvhi)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1802.11(chokidar@3.6.0) @@ -7004,7 +7058,7 @@ snapshots: '@angular/platform-server': 18.2.11(@angular/animations@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.11(@angular/animations@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10))) esbuild: 0.23.0 karma: 6.4.4 - ng-packagr: 18.2.1(@angular/compiler-cli@18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5))(tailwindcss@3.4.14)(tslib@2.6.3)(typescript@5.4.5) + ng-packagr: 18.2.1(@angular/compiler-cli@18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5))(tailwindcss@3.4.14)(tslib@2.8.1)(typescript@5.4.5) tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)) transitivePeerDependencies: - '@rspack/core' @@ -8679,21 +8733,21 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@jsonjoy.com/base64@1.1.2(tslib@2.6.3)': + '@jsonjoy.com/base64@1.1.2(tslib@2.8.1)': dependencies: - tslib: 2.6.3 + tslib: 2.8.1 - '@jsonjoy.com/json-pack@1.1.0(tslib@2.6.3)': + '@jsonjoy.com/json-pack@1.1.0(tslib@2.8.1)': dependencies: - '@jsonjoy.com/base64': 1.1.2(tslib@2.6.3) - '@jsonjoy.com/util': 1.5.0(tslib@2.6.3) + '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1) + '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) hyperdyperid: 1.2.0 - thingies: 1.21.0(tslib@2.6.3) - tslib: 2.6.3 + thingies: 1.21.0(tslib@2.8.1) + tslib: 2.8.1 - '@jsonjoy.com/util@1.5.0(tslib@2.6.3)': + '@jsonjoy.com/util@1.5.0(tslib@2.8.1)': dependencies: - tslib: 2.6.3 + tslib: 2.8.1 '@kurkle/color@0.3.2': {} @@ -8963,133 +9017,133 @@ snapshots: '@primeuix/utils@0.3.0': {} - '@rollup/plugin-json@6.1.0(rollup@4.24.4)': + '@rollup/plugin-json@6.1.0(rollup@4.25.0)': dependencies: - '@rollup/pluginutils': 5.1.3(rollup@4.24.4) + '@rollup/pluginutils': 5.1.3(rollup@4.25.0) optionalDependencies: - rollup: 4.24.4 + rollup: 4.25.0 - '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.4)': + '@rollup/plugin-node-resolve@15.3.0(rollup@4.25.0)': dependencies: - '@rollup/pluginutils': 5.1.3(rollup@4.24.4) + '@rollup/pluginutils': 5.1.3(rollup@4.25.0) '@types/resolve': 1.20.2 deepmerge: 4.3.1 is-module: 1.0.0 resolve: 1.22.8 optionalDependencies: - rollup: 4.24.4 + rollup: 4.25.0 - '@rollup/pluginutils@5.1.3(rollup@4.24.4)': + '@rollup/pluginutils@5.1.3(rollup@4.25.0)': dependencies: '@types/estree': 1.0.6 estree-walker: 2.0.2 picomatch: 4.0.2 optionalDependencies: - rollup: 4.24.4 + rollup: 4.25.0 '@rollup/rollup-android-arm-eabi@4.22.4': optional: true - '@rollup/rollup-android-arm-eabi@4.24.4': + '@rollup/rollup-android-arm-eabi@4.25.0': optional: true '@rollup/rollup-android-arm64@4.22.4': optional: true - '@rollup/rollup-android-arm64@4.24.4': + '@rollup/rollup-android-arm64@4.25.0': optional: true '@rollup/rollup-darwin-arm64@4.22.4': optional: true - '@rollup/rollup-darwin-arm64@4.24.4': + '@rollup/rollup-darwin-arm64@4.25.0': optional: true '@rollup/rollup-darwin-x64@4.22.4': optional: true - '@rollup/rollup-darwin-x64@4.24.4': + '@rollup/rollup-darwin-x64@4.25.0': optional: true - '@rollup/rollup-freebsd-arm64@4.24.4': + '@rollup/rollup-freebsd-arm64@4.25.0': optional: true - '@rollup/rollup-freebsd-x64@4.24.4': + '@rollup/rollup-freebsd-x64@4.25.0': optional: true '@rollup/rollup-linux-arm-gnueabihf@4.22.4': optional: true - '@rollup/rollup-linux-arm-gnueabihf@4.24.4': + '@rollup/rollup-linux-arm-gnueabihf@4.25.0': optional: true '@rollup/rollup-linux-arm-musleabihf@4.22.4': optional: true - '@rollup/rollup-linux-arm-musleabihf@4.24.4': + '@rollup/rollup-linux-arm-musleabihf@4.25.0': optional: true '@rollup/rollup-linux-arm64-gnu@4.22.4': optional: true - '@rollup/rollup-linux-arm64-gnu@4.24.4': + '@rollup/rollup-linux-arm64-gnu@4.25.0': optional: true '@rollup/rollup-linux-arm64-musl@4.22.4': optional: true - '@rollup/rollup-linux-arm64-musl@4.24.4': + '@rollup/rollup-linux-arm64-musl@4.25.0': optional: true '@rollup/rollup-linux-powerpc64le-gnu@4.22.4': optional: true - '@rollup/rollup-linux-powerpc64le-gnu@4.24.4': + '@rollup/rollup-linux-powerpc64le-gnu@4.25.0': optional: true '@rollup/rollup-linux-riscv64-gnu@4.22.4': optional: true - '@rollup/rollup-linux-riscv64-gnu@4.24.4': + '@rollup/rollup-linux-riscv64-gnu@4.25.0': optional: true '@rollup/rollup-linux-s390x-gnu@4.22.4': optional: true - '@rollup/rollup-linux-s390x-gnu@4.24.4': + '@rollup/rollup-linux-s390x-gnu@4.25.0': optional: true '@rollup/rollup-linux-x64-gnu@4.22.4': optional: true - '@rollup/rollup-linux-x64-gnu@4.24.4': + '@rollup/rollup-linux-x64-gnu@4.25.0': optional: true '@rollup/rollup-linux-x64-musl@4.22.4': optional: true - '@rollup/rollup-linux-x64-musl@4.24.4': + '@rollup/rollup-linux-x64-musl@4.25.0': optional: true '@rollup/rollup-win32-arm64-msvc@4.22.4': optional: true - '@rollup/rollup-win32-arm64-msvc@4.24.4': + '@rollup/rollup-win32-arm64-msvc@4.25.0': optional: true '@rollup/rollup-win32-ia32-msvc@4.22.4': optional: true - '@rollup/rollup-win32-ia32-msvc@4.24.4': + '@rollup/rollup-win32-ia32-msvc@4.25.0': optional: true '@rollup/rollup-win32-x64-msvc@4.22.4': optional: true - '@rollup/rollup-win32-x64-msvc@4.24.4': + '@rollup/rollup-win32-x64-msvc@4.25.0': optional: true - '@rollup/wasm-node@4.24.4': + '@rollup/wasm-node@4.25.0': dependencies: '@types/estree': 1.0.6 optionalDependencies: @@ -9659,21 +9713,21 @@ snapshots: autoprefixer@10.4.20(postcss@8.4.41): dependencies: browserslist: 4.24.2 - caniuse-lite: 1.0.30001679 + caniuse-lite: 1.0.30001680 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.1 postcss: 8.4.41 postcss-value-parser: 4.2.0 - autoprefixer@10.4.20(postcss@8.4.47): + autoprefixer@10.4.20(postcss@8.4.48): dependencies: browserslist: 4.24.2 - caniuse-lite: 1.0.30001679 + caniuse-lite: 1.0.30001680 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.1 - postcss: 8.4.47 + postcss: 8.4.48 postcss-value-parser: 4.2.0 available-typed-arrays@1.0.7: @@ -9773,7 +9827,7 @@ snapshots: browserslist@4.24.2: dependencies: - caniuse-lite: 1.0.30001679 + caniuse-lite: 1.0.30001680 electron-to-chromium: 1.5.55 node-releases: 2.0.18 update-browserslist-db: 1.1.1(browserslist@4.24.2) @@ -9827,7 +9881,7 @@ snapshots: camelcase-css@2.0.1: {} - caniuse-lite@1.0.30001679: {} + caniuse-lite@1.0.30001680: {} canvg@3.0.10: dependencies: @@ -10347,7 +10401,7 @@ snapshots: is-string: 1.0.7 is-typed-array: 1.1.13 is-weakref: 1.0.2 - object-inspect: 1.13.2 + object-inspect: 1.13.3 object-keys: 1.1.1 object.assign: 4.1.5 regexp.prototype.flags: 1.5.3 @@ -11620,7 +11674,7 @@ snapshots: listr2: 4.0.5 micromatch: 4.0.8 normalize-path: 3.0.0 - object-inspect: 1.13.2 + object-inspect: 1.13.3 pidtree: 0.5.0 string-argv: 0.3.2 supports-color: 9.4.0 @@ -11782,10 +11836,10 @@ snapshots: memfs@4.14.0: dependencies: - '@jsonjoy.com/json-pack': 1.1.0(tslib@2.6.3) - '@jsonjoy.com/util': 1.5.0(tslib@2.6.3) - tree-dump: 1.0.2(tslib@2.6.3) - tslib: 2.6.3 + '@jsonjoy.com/json-pack': 1.1.0(tslib@2.8.1) + '@jsonjoy.com/util': 1.5.0(tslib@2.8.1) + tree-dump: 1.0.2(tslib@2.8.1) + tslib: 2.8.1 merge-descriptors@1.0.3: {} @@ -11930,12 +11984,12 @@ snapshots: neo-async@2.6.2: {} - ng-packagr@18.2.1(@angular/compiler-cli@18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5))(tailwindcss@3.4.14)(tslib@2.6.3)(typescript@5.4.5): + ng-packagr@18.2.1(@angular/compiler-cli@18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5))(tailwindcss@3.4.14)(tslib@2.8.1)(typescript@5.4.5): dependencies: '@angular/compiler-cli': 18.2.11(@angular/compiler@18.2.11(@angular/core@18.2.11(rxjs@7.8.1)(zone.js@0.14.10)))(typescript@5.4.5) - '@rollup/plugin-json': 6.1.0(rollup@4.24.4) - '@rollup/plugin-node-resolve': 15.3.0(rollup@4.24.4) - '@rollup/wasm-node': 4.24.4 + '@rollup/plugin-json': 6.1.0(rollup@4.25.0) + '@rollup/plugin-node-resolve': 15.3.0(rollup@4.25.0) + '@rollup/wasm-node': 4.25.0 ajv: 8.17.1 ansi-colors: 4.1.3 browserslist: 4.24.2 @@ -11952,13 +12006,13 @@ snapshots: less: 4.2.0 ora: 5.4.1 piscina: 4.7.0 - postcss: 8.4.47 + postcss: 8.4.48 rxjs: 7.8.1 sass: 1.80.6 - tslib: 2.6.3 + tslib: 2.8.1 typescript: 5.4.5 optionalDependencies: - rollup: 4.24.4 + rollup: 4.25.0 tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)) nice-napi@1.0.2: @@ -12068,7 +12122,7 @@ snapshots: object-hash@3.0.0: {} - object-inspect@1.13.2: {} + object-inspect@1.13.3: {} object-keys@1.1.1: {} @@ -12319,24 +12373,24 @@ snapshots: possible-typed-array-names@1.0.0: {} - postcss-import@15.1.0(postcss@8.4.47): + postcss-import@15.1.0(postcss@8.4.48): dependencies: - postcss: 8.4.47 + postcss: 8.4.48 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - postcss-js@4.0.1(postcss@8.4.47): + postcss-js@4.0.1(postcss@8.4.48): dependencies: camelcase-css: 2.0.1 - postcss: 8.4.47 + postcss: 8.4.48 - postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)): + postcss-load-config@4.0.2(postcss@8.4.48)(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)): dependencies: lilconfig: 3.1.2 yaml: 2.6.0 optionalDependencies: - postcss: 8.4.47 + postcss: 8.4.48 ts-node: 10.9.2(@types/node@22.9.0)(typescript@5.4.5) postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.41)(yaml@2.6.0): @@ -12381,9 +12435,9 @@ snapshots: icss-utils: 5.1.0(postcss@8.4.41) postcss: 8.4.41 - postcss-nested@6.2.0(postcss@8.4.47): + postcss-nested@6.2.0(postcss@8.4.48): dependencies: - postcss: 8.4.47 + postcss: 8.4.48 postcss-selector-parser: 6.1.2 postcss-selector-parser@6.1.2: @@ -12399,7 +12453,7 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 - postcss@8.4.47: + postcss@8.4.48: dependencies: nanoid: 3.3.7 picocolors: 1.1.1 @@ -12631,28 +12685,28 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.22.4 fsevents: 2.3.3 - rollup@4.24.4: + rollup@4.25.0: dependencies: '@types/estree': 1.0.6 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.24.4 - '@rollup/rollup-android-arm64': 4.24.4 - '@rollup/rollup-darwin-arm64': 4.24.4 - '@rollup/rollup-darwin-x64': 4.24.4 - '@rollup/rollup-freebsd-arm64': 4.24.4 - '@rollup/rollup-freebsd-x64': 4.24.4 - '@rollup/rollup-linux-arm-gnueabihf': 4.24.4 - '@rollup/rollup-linux-arm-musleabihf': 4.24.4 - '@rollup/rollup-linux-arm64-gnu': 4.24.4 - '@rollup/rollup-linux-arm64-musl': 4.24.4 - '@rollup/rollup-linux-powerpc64le-gnu': 4.24.4 - '@rollup/rollup-linux-riscv64-gnu': 4.24.4 - '@rollup/rollup-linux-s390x-gnu': 4.24.4 - '@rollup/rollup-linux-x64-gnu': 4.24.4 - '@rollup/rollup-linux-x64-musl': 4.24.4 - '@rollup/rollup-win32-arm64-msvc': 4.24.4 - '@rollup/rollup-win32-ia32-msvc': 4.24.4 - '@rollup/rollup-win32-x64-msvc': 4.24.4 + '@rollup/rollup-android-arm-eabi': 4.25.0 + '@rollup/rollup-android-arm64': 4.25.0 + '@rollup/rollup-darwin-arm64': 4.25.0 + '@rollup/rollup-darwin-x64': 4.25.0 + '@rollup/rollup-freebsd-arm64': 4.25.0 + '@rollup/rollup-freebsd-x64': 4.25.0 + '@rollup/rollup-linux-arm-gnueabihf': 4.25.0 + '@rollup/rollup-linux-arm-musleabihf': 4.25.0 + '@rollup/rollup-linux-arm64-gnu': 4.25.0 + '@rollup/rollup-linux-arm64-musl': 4.25.0 + '@rollup/rollup-linux-powerpc64le-gnu': 4.25.0 + '@rollup/rollup-linux-riscv64-gnu': 4.25.0 + '@rollup/rollup-linux-s390x-gnu': 4.25.0 + '@rollup/rollup-linux-x64-gnu': 4.25.0 + '@rollup/rollup-linux-x64-musl': 4.25.0 + '@rollup/rollup-win32-arm64-msvc': 4.25.0 + '@rollup/rollup-win32-ia32-msvc': 4.25.0 + '@rollup/rollup-win32-x64-msvc': 4.25.0 fsevents: 2.3.3 run-applescript@7.0.0: {} @@ -12824,7 +12878,7 @@ snapshots: call-bind: 1.0.7 es-errors: 1.3.0 get-intrinsic: 1.2.4 - object-inspect: 1.13.2 + object-inspect: 1.13.3 signal-exit@3.0.7: {} @@ -13125,11 +13179,11 @@ snapshots: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.1.1 - postcss: 8.4.47 - postcss-import: 15.1.0(postcss@8.4.47) - postcss-js: 4.0.1(postcss@8.4.47) - postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)) - postcss-nested: 6.2.0(postcss@8.4.47) + postcss: 8.4.48 + postcss-import: 15.1.0(postcss@8.4.48) + postcss-js: 4.0.1(postcss@8.4.48) + postcss-load-config: 4.0.2(postcss@8.4.48)(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.4.5)) + postcss-nested: 6.2.0(postcss@8.4.48) postcss-selector-parser: 6.1.2 resolve: 1.22.8 sucrase: 3.35.0 @@ -13180,9 +13234,9 @@ snapshots: dependencies: any-promise: 1.3.0 - thingies@1.21.0(tslib@2.6.3): + thingies@1.21.0(tslib@2.8.1): dependencies: - tslib: 2.6.3 + tslib: 2.8.1 through@2.3.8: {} @@ -13211,9 +13265,9 @@ snapshots: dependencies: punycode: 2.3.1 - tree-dump@1.0.2(tslib@2.6.3): + tree-dump@1.0.2(tslib@2.8.1): dependencies: - tslib: 2.6.3 + tslib: 2.8.1 tree-kill@1.2.2: {} @@ -13275,7 +13329,7 @@ snapshots: picocolors: 1.1.1 postcss-load-config: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(yaml@2.6.0) resolve-from: 5.0.0 - rollup: 4.24.4 + rollup: 4.25.0 source-map: 0.8.0-beta.0 sucrase: 3.35.0 tinyexec: 0.3.1 @@ -13431,8 +13485,8 @@ snapshots: vite@5.4.6(@types/node@22.9.0)(less@4.2.0)(sass@1.77.6)(terser@5.31.6): dependencies: esbuild: 0.21.5 - postcss: 8.4.47 - rollup: 4.24.4 + postcss: 8.4.48 + rollup: 4.25.0 optionalDependencies: '@types/node': 22.9.0 fsevents: 2.3.3 diff --git a/tsconfig.json b/tsconfig.json index d05144168fe..52187c76ee1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,6 +30,10 @@ "moduleResolution": "node", /* (UPDATED) Specify how TypeScript looks up a file from a given module specifier. */ "baseUrl": "./", /* (UPDATED) Specify the base directory to resolve non-relative module names. */ "paths": { /* (UPDATED) Specify a set of entries that re-map imports to additional lookup locations. */ + "@primeng/core/*": ["./packages/core/src/*/public_api"], + "@primeng/core": ["./packages/core/src/public_api"], + "@primeng/icons/*": ["./packages/icons/src/*/public_api"], + "@primeng/icons": ["./packages/icons/src/public_api"], "primeng/*": ["./packages/primeng/src/*/public_api"], "@primeng/themes/*": ["./packages/themes/src/*/index"], "@primeng/themes": ["./packages/themes/src/index"],