@po-ui/ng-components 17.7.0 → 17.9.0

package/lib/services/po-theme/interfaces/po-theme-tokens.interface.d.ts

@@ -0,0 +1,61 @@
+import { PoThemeColor } from './po-theme-color.interface';
+/**
+ * @usedBy PoThemeService
+ * @docsExtends PoThemeToken, Partial<DynamicProperties>
+ * @description
+ * Interface para o tema da aplicação.
+ */
+export interface PoThemeTokens extends PoThemeToken, Partial<DynamicProperties> {
+}
+/**
+ * @usedBy PoThemeService
+ * @description
+ * Interface para os tokens do Tema.
+ */
+export interface PoThemeToken {
+    /** Tokens do tipo 'color' */
+    'color'?: PoThemeColor;
+    /**
+     * Tokens do tipo 'perComponent'
+     *
+     * Exemplo de uso:
+     *
+     * ```typescript
+     * perComponent: {
+     *   'po-badge': {
+     *     '--color': 'var(--color-neutral-dark-95)',
+     *   },
+     *   'po-container': {
+     *     '--background': '#121212',
+     *   },
+     * },
+     * ```
+     * @Optional
+     */
+    'perComponent'?: DynamicProperties;
+    /**
+     * Tokens do tipo 'onRoot'
+     * Esta propriedade adicionará todos os tokens passados e adicionado direto no `:root`
+     *
+     * Exemplo de uso:
+     *
+     * ```typescript
+     * onRoot: {
+     *   '--color-page-background-color-page': '#121212',
+     *   '--color-toolbar-color-badge-text': 'var(--color-neutral-dark-95)',
+     * },
+     * ```
+     * @Optional
+     */
+    'onRoot'?: DynamicProperties;
+}
+/**
+ * @docsPrivate
+ * @description
+ * Interface para as variantes da cor de Brand.
+ * Tipo com index signature para aceitar propriedades dinâmicas
+ */
+interface DynamicProperties {
+    [key: string]: any;
+}
+export {};

package/lib/services/po-theme/interfaces/po-theme.interface.d.ts

@@ -0,0 +1,28 @@
+import { PoThemeTypeEnum } from '../enum/po-theme-type.enum';
+import { PoThemeTokens } from './po-theme-tokens.interface';
+/**
+ * @usedBy PoThemeService
+ *
+ * @description
+ * Interface para o método `setTheme()`.
+ */
+export interface PoTheme {
+    /** Nome do tema: 'default', 'totvs', 'sunset', etc. */
+    name: string;
+    /** Tipos de tema: 'light' e 'dark' */
+    type: PoThemeType;
+    /** Tipo de tema ativo */
+    active?: PoThemeTypeEnum;
+}
+/**
+ * @docsPrivate
+ * @description
+ * Interface para os tipos de tema ('light' e 'dark').
+ */
+interface PoThemeType {
+    /** Tipo de tipo 'light' */
+    light?: PoThemeTokens;
+    /** Tipo de tipo 'dark' */
+    dark?: PoThemeTokens;
+}
+export {};

package/lib/services/po-theme/po-theme.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+/**
+ * Módulo responsável por fornecer serviços relacionados ao tema PO.
+ */
+export declare class PoThemeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoThemeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoThemeModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PoThemeModule>;
+}

package/lib/services/po-theme/po-theme.service.d.ts

@@ -0,0 +1,129 @@
+import { RendererFactory2 } from '@angular/core';
+import { PoThemeTypeEnum } from './enum/po-theme-type.enum';
+import { PoTheme } from './interfaces/po-theme.interface';
+import * as i0 from "@angular/core";
+/**
+ * @description
+ *
+ * O `PoThemeService` possibilita a personalização das cores do tema padrão do `PO-UI`, permitindo a alteração dos valores das variáveis de estilo usadas no CSS padrão.
+ *
+ * > Para saber mais sobre como customizar as cores do tema padrão verifique o item [Customizando cores do tema padrão](https://po-ui.io/guides/colors-customization) na aba `Guias`.
+ *
+ * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
+ */
+export declare class PoThemeService {
+    private window;
+    private document;
+    private renderer;
+    private theme;
+    constructor(window: Window, document: Document, rendererFactory: RendererFactory2);
+    /**
+     * Define o tema a ser aplicado no componente, de acordo com o tipo de tema especificado.
+     *
+     * Este método define o tema a ser aplicado no componente com base no objeto `theme` fornecido e no tipo de tema especificado.
+     * Ele atualiza as propriedades do componente para refletir o tema selecionado, como cores, estilos e comportamentos.
+     *
+     * @param {PoTheme} theme - Objeto contendo as definições de tema a serem aplicadas no componente.
+     * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema a ser aplicado, podendo ser 'light' (claro) ou 'dark' (escuro). Por padrão, o tema claro é aplicado.
+     */
+    setTheme(theme: PoTheme, themeType?: PoThemeTypeEnum): void;
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos adicionais com base nos tokens de tema fornecidos, excluindo os tokens de cor.
+     * @param theme Os tokens de tema contendo os estilos adicionais a serem gerados.
+     * @returns Uma string contendo os estilos adicionais formatados.
+     */
+    private generateAdditionalStyles;
+    /**
+     * @docsPrivate
+     *
+     * Aplica os estilos de tema ao documento.
+     * @param styleCss Os estilos CSS a serem aplicados.
+     */
+    private applyThemeStyles;
+    private changeThemeType;
+    /**
+     * Persiste e define o tema do aplicativo com base nos dados armazenados.
+     *
+     * Este método recupera os dados do tema armazenados e os aplica ao aplicativo.
+     *
+     * @returns {PoTheme} Recupera o tema armazenado.
+     */
+    persistThemeActive(): PoTheme;
+    /**
+     * Altera o tipo do tema armazenado e aplica os novos estilos ao documento.
+     *
+     * Este método altera o tipo do tema armazenado ativo (light/dark)
+     *
+     * @param {PoThemeTypeEnum} themeType O tipo de tema a ser aplicado, light ou dark.
+     */
+    changeCurrentThemeType(type: PoThemeTypeEnum): void;
+    /**
+     * Método remove o tema armazenado e limpa todos os estilos de tema
+     * aplicados ao documento.
+     */
+    cleanThemeActive(): void;
+    /**
+     * @docsPrivate
+     *
+     * Este método define um dados do tema e o armazena.
+     * @param theme Os tokens de tema contendo os estilos adicionais a serem gerados.
+     */
+    private setThemeActive;
+    /**
+     * Retorna o tema ativo como um observable.
+     * @returns {PoTheme} Tema ativo.
+     */
+    getThemeActive(): PoTheme;
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos CSS com base nos tokens de cores fornecidos.
+     * @param themeColor Os tokens de cor a serem usados para gerar os estilos.
+     * @returns Uma string contendo os estilos CSS gerados.
+     */
+    private createStyleElement;
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos CSS com base nos tokens de cores fornecidos.
+     * @param themeColor Os tokens de cor a serem usados para gerar os estilos.
+     * @returns Uma string contendo os estilos CSS gerados.
+     */
+    private generateThemeStyles;
+    /**
+     * @docsPrivate
+     *
+     * Gera estilos CSS com base nos tokens per Component fornecidos.
+     * @param themePerComponent Os tokens de cor a serem usados para gerar os estilos.
+     * @returns Uma string contendo os estilos CSS gerados.
+     */
+    private generatePerComponentStyles;
+    /**
+     * Define o tema atual como o tema "PoUI Padrão".
+     *
+     * @param {PoThemeTypeEnum} type O tipo de Tema a ser aplicado, light / dark.
+     */
+    setDefaultTheme(type: PoThemeTypeEnum): void;
+    /**
+     * @docsPrivate
+     *
+     * Retorna o estilo CSS para o fundo dos ícones do componente po-select, com base nas cores do tema.
+     *
+     * @param {PoThemeColor} themeColor - Objeto contendo as cores do tema.
+     * @returns {string} - Estilo CSS para o fundo dos ícones do po-select.
+     */
+    private getSelectBgIconsStyle;
+    /**
+     * @docsPrivate
+     *
+     * Retorna a imagem SVG utilizada como fundo do po-select.
+     *
+     * @param {string} color Cor da Imagem - Utilizada no atributo 'fill'.
+     * @returns {string} Imagem SVG utilizada no po-select.
+     */
+    private getSelectBgIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PoThemeService>;
+}

package/lib/services/services.module.d.ts

@@ -8,8 +8,9 @@ import * as i6 from "./po-date/po-date.module";
 import * as i7 from "./po-dialog/po-dialog.module";
 import * as i8 from "./po-language/po-language.module";
 import * as i9 from "./po-notification/po-notification.module";
+import * as i10 from "./po-theme/po-theme.module";
 export declare class PoServicesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoServicesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoServicesModule, [typeof i1.PoI18nPipe], [typeof i2.PoActiveOverlayModule, typeof i3.PoColorPaletteModule, typeof i4.PoComponentInjectorModule, typeof i5.PoControlPositionModule, typeof i6.PoDateTimeModule, typeof i7.PoDialogModule, typeof i8.PoLanguageModule, typeof i9.PoNotificationModule], [typeof i2.PoActiveOverlayModule, typeof i3.PoColorPaletteModule, typeof i4.PoComponentInjectorModule, typeof i5.PoControlPositionModule, typeof i6.PoDateTimeModule, typeof i7.PoDialogModule, typeof i1.PoI18nPipe, typeof i9.PoNotificationModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoServicesModule, [typeof i1.PoI18nPipe], [typeof i2.PoActiveOverlayModule, typeof i3.PoColorPaletteModule, typeof i4.PoComponentInjectorModule, typeof i5.PoControlPositionModule, typeof i6.PoDateTimeModule, typeof i7.PoDialogModule, typeof i8.PoLanguageModule, typeof i9.PoNotificationModule, typeof i10.PoThemeModule], [typeof i2.PoActiveOverlayModule, typeof i3.PoColorPaletteModule, typeof i4.PoComponentInjectorModule, typeof i5.PoControlPositionModule, typeof i6.PoDateTimeModule, typeof i7.PoDialogModule, typeof i1.PoI18nPipe, typeof i9.PoNotificationModule, typeof i10.PoThemeModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoServicesModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "17.7.0",
+  "version": "17.9.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~17.0.1",
-    "@po-ui/style": "17.7.0",
-    "@po-ui/ng-schematics": "17.7.0",
+    "@po-ui/style": "17.9.0",
+    "@po-ui/ng-schematics": "17.9.0",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
@@ -36,7 +36,7 @@
     "@angular/platform-browser-dynamic": "^17",
     "@angular/router": "^17",
     "@angular-devkit/schematics": "^17",
-    "@po-ui/style": "17.7.0",
+    "@po-ui/style": "17.9.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.14.4"
   },

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 exports.default = default_1;
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '17.7.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '17.9.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };

package/schematics/ng-update/v14/index.js

@@ -5,7 +5,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {

package/schematics/ng-update/v15/index.js

@@ -10,7 +10,7 @@ const changes_1 = require("./changes");
 const httpClientModuleName = 'HttpClientModule';
 const httpClientModuleSourcePath = '@angular/common/http';
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {

package/schematics/ng-update/v16/index.js

@@ -5,7 +5,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {

package/schematics/ng-update/v17/index.js

@@ -5,7 +5,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {

package/schematics/ng-update/v2/index.js

@@ -10,7 +10,7 @@ const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV2() {
     return (0, schematics_1.chain)([
-        updatePackageJson('17.7.0', changes_1.dependeciesChanges),
+        updatePackageJson('17.9.0', changes_1.dependeciesChanges),
         (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
         (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
         createUpgradeRule(),

package/schematics/ng-update/v3/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV3() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 exports.updateToV3 = updateToV3;
 function postUpdate() {

package/schematics/ng-update/v4/index.js

@@ -6,7 +6,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {

package/schematics/ng-update/v5/index.js

@@ -6,7 +6,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {

package/schematics/ng-update/v6/index.js

@@ -5,7 +5,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.7.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('17.9.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 exports.default = default_1;
 function postUpdate() {