diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 0484fc2f7e..3aef7c6d44 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -14,7 +14,9 @@ _Выберите нужное отметив галочку [x]_ - [ ] `@prizm-ui/components` - [ ] `@prizm-ui/install` - [ ] `@prizm-ui/icons` +- [ ] `@prizm-ui/flag-icons` - [ ] `@prizm-ui/theme` +- [ ] `@prizm-ui/charts` ### Компонент @@ -78,7 +80,6 @@ Dependencies: - _Название проекта_ - ### Скрин / Видео проблемы _Скриншот.jpg_ diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 665502d4ed..d6751ed533 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -8,10 +8,13 @@ assignees: '' ### Библиотека +- [ ] `@prizm-ui/core` - [ ] `@prizm-ui/components` - [ ] `@prizm-ui/install` - [ ] `@prizm-ui/icons` +- [ ] `@prizm-ui/flag-icons` - [ ] `@prizm-ui/theme` +- [ ] `@prizm-ui/charts` ### Компонент diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index bc51320285..2b063314df 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -8,10 +8,13 @@ assignees: '' ### Библиотека +- [ ] `@prizm-ui/core` - [ ] `@prizm-ui/components` - [ ] `@prizm-ui/install` - [ ] `@prizm-ui/icons` +- [ ] `@prizm-ui/flag-icons` - [ ] `@prizm-ui/theme` +- [ ] `@prizm-ui/charts` ### Компонент @@ -42,7 +45,6 @@ Dependencies: - _Название проекта_ - ### Вопрос _Чем более подробно будет описан вопрос, тем лучше будет дан ответ_ diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 3e4f516aee..c29b4c9fe7 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -107,7 +107,7 @@ Release package: - npm publish --access public --userconfig ~/.npmrc --verbose core || exit_code=0 - npm publish --access public --userconfig ~/.npmrc --verbose icons/base || exit_code=0 - npm publish --access public --userconfig ~/.npmrc --verbose icons/flags || exit_code=0 - - npm publish --access public --userconfig ~/.npmrc --verbose schematics || exit_code=0 + # - npm publish --access public --userconfig ~/.npmrc --verbose schematics || exit_code=0 - npm publish --access public --userconfig ~/.npmrc --verbose theme || exit_code=0 - npm publish --access public --userconfig ~/.npmrc --verbose charts || exit_code=0 when: manual diff --git a/.gitlab/issue_templates/bug.md b/.gitlab/issue_templates/bug.md index c36f492dcf..bd3841f845 100644 --- a/.gitlab/issue_templates/bug.md +++ b/.gitlab/issue_templates/bug.md @@ -66,8 +66,6 @@ Dependencies: ### Проект в котором используется КБ - _Название проекта_ -- _Ссылка на репозитории_ -- _Ссылка на стенд с проблемой_ ### Скрин / Видео проблемы diff --git a/.gitlab/issue_templates/question.md b/.gitlab/issue_templates/question.md index 48dfc603db..bcd0e906c5 100644 --- a/.gitlab/issue_templates/question.md +++ b/.gitlab/issue_templates/question.md @@ -33,8 +33,6 @@ Dependencies: ### Проект в котором используется Prizm - _Название проекта_ -- _Ссылка на репозитории_ -- _Ссылка на стенд с проблемой_ ### Вопрос diff --git a/apps/doc/src/app/about-prizm/changelog/CHANGELOG.md b/apps/doc/src/app/about-prizm/changelog/CHANGELOG.md index 0d39b8ddb4..e0ad25dd6d 100644 --- a/apps/doc/src/app/about-prizm/changelog/CHANGELOG.md +++ b/apps/doc/src/app/about-prizm/changelog/CHANGELOG.md @@ -2,6 +2,21 @@ All notable changes to this project will be documented in this file. +## [1.0.0-beta.25](https://github.com/zyfra/Prizm) (10-03-2023) + +### BUG FIXES + +- fix(components/tooltip): recalc on left and right position [#34](https://github.com/zyfra/Prizm/issues/34) +- chore: correct old helper issues templates +- fix(components/overlay): fix case with not correct display overlay [#4](https://github.com/zyfra/Prizm/issues/4) +- fix(components/confirm): fix console errors [#31](https://github.com/zyfra/Prizm/issues/31) +- feat(components/dialogs): invert theme inside dialog and confirm dialog [#74](https://github.com/zyfra/Prizm/issues/74) + +### Features + +- feat(theme): new inverted theme directive +- feat(doc/theme): examples how to use theme and inverted theme directive + ## [1.0.0-beta.24](https://github.com/zyfra/Prizm) (03-03-2023) ### BUG FIXES diff --git a/apps/doc/src/app/app.routes.ts b/apps/doc/src/app/app.routes.ts index e7816551cd..0f3abb0c54 100644 --- a/apps/doc/src/app/app.routes.ts +++ b/apps/doc/src/app/app.routes.ts @@ -565,11 +565,20 @@ export const ROUTES: Routes = [ title: 'Overlay', }, }, + { + path: 'tools/theme-service', + loadChildren: (): Promise => + import('./tools/theme-service/theme.module').then(i => i.ThemeModule), + data: { + title: 'Theme Service', + }, + }, { path: 'tools/theme', - loadChildren: (): Promise => import('./tools/theme/theme.module').then(i => i.ThemeModule), + loadChildren: (): Promise => + import('./tools/inverted-theme/inverted-theme.module').then(i => i.InvertedThemeModule), data: { - title: 'Theme', + title: 'Theme Module', }, }, { diff --git a/apps/doc/src/app/components/table/table-example.component.html b/apps/doc/src/app/components/table/table-example.component.html index 7d799d3359..5b1581ed11 100644 --- a/apps/doc/src/app/components/table/table-example.component.html +++ b/apps/doc/src/app/components/table/table-example.component.html @@ -57,9 +57,13 @@ - + - + + + Status + + + Row background on hover + + + + Row background odd + + + Row background even + + + Row cursor + + + i.theme === 'dark')); + readonly isNight$ = this.themeSwitcher.change$.pipe( + filter(i => i.el === this.themeSwitcher.rootElement), + map(i => i.theme === 'dark'), + debounceTime(0) + ); readonly githubSvgName = PrizmIconSvgEnum.OTHER_GIT_HUB; @@ -25,8 +29,6 @@ export class LogoComponent { public onMode(isNight: boolean): void { this.themeSwitcher.update(isNight ? 'dark' : 'light'); - /* update taiga doc theme */ - // this.docEl.onMode(isNight); } } diff --git a/apps/doc/src/app/pages.ts b/apps/doc/src/app/pages.ts index f5446ee574..7b73bc388c 100644 --- a/apps/doc/src/app/pages.ts +++ b/apps/doc/src/app/pages.ts @@ -537,8 +537,14 @@ export const pages: PrizmOrderedDocPage = [ }, { section: SectionNameEnum.tools, - title: 'Theme', - keywords: 'theme, тема, цвета, типография, colors, typography', + title: 'Theme Service', + keywords: 'theme, service, тема, цвета, типография, colors, typography', + route: '/tools/theme-service', + }, + { + section: SectionNameEnum.tools, + title: 'Theme Module', + keywords: 'theme, module, тема, цвета, типография, colors, typography', route: '/tools/theme', }, // TODO active after finish charts diff --git a/apps/doc/src/app/tools/inverted-theme/examples/base/base.component.html b/apps/doc/src/app/tools/inverted-theme/examples/base/base.component.html new file mode 100644 index 0000000000..88c2645c60 --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/examples/base/base.component.html @@ -0,0 +1,22 @@ +

Set theme for any element

+
+ + + +
+

+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. + +
+
+ +
+ Current theme value: {{ themeValue }} +
diff --git a/apps/doc/src/app/tools/inverted-theme/examples/base/base.component.ts b/apps/doc/src/app/tools/inverted-theme/examples/base/base.component.ts new file mode 100644 index 0000000000..86ab87085e --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/examples/base/base.component.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'prizm-theme-base-example', + templateUrl: './base.component.html', + styles: [ + ` + .block { + display: flex; + gap: 1rem; + } + .zone { + padding: 1rem; + border-radius: 0.5rem; + border: 1px solid #ccc; + } + `, + ], +}) +export class PrizmThemeBaseExampleComponent { + themeValue = 'light'; + + public light(): void { + this.themeValue = 'light'; + } + + public dark(): void { + this.themeValue = 'dark'; + } + + public toggle(): void { + this.themeValue = this.themeValue === 'light' ? 'dark' : 'light'; + } +} diff --git a/apps/doc/src/app/tools/inverted-theme/examples/import-module.md b/apps/doc/src/app/tools/inverted-theme/examples/import-module.md new file mode 100644 index 0000000000..71e5664a00 --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/examples/import-module.md @@ -0,0 +1,13 @@ +```ts +import { NgModule } from '@angular/core'; +import { PrizmThemeModule } from '@prizm-ui/theme'; +// ... + +@NgModule({ + imports: [ + // ... + PrizmThemeModule, + ], +}) +export class MyModule {} +``` diff --git a/apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.component.html b/apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.component.html new file mode 100644 index 0000000000..1c47a86079 --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.component.html @@ -0,0 +1,32 @@ +

Set theme and inverted theme for any element via our directives

+
+ + + +
+

+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. + +
+
+ +
+

+ Parent theme: {{ theme.getByElement(zone) }} +

+

+ Inverted theme: {{ invetedThemeValue }} +

+
diff --git a/apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.component.ts b/apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.component.ts new file mode 100644 index 0000000000..4b495fae66 --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/examples/inverted/inverted.component.ts @@ -0,0 +1,40 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { PrizmThemeService } from '@prizm-ui/theme'; + +@Component({ + selector: 'prizm-theme-inverted-example', + templateUrl: './inverted.component.html', + styles: [ + ` + .block { + display: flex; + gap: 1rem; + } + .zone { + padding: 1rem; + border-radius: 0.5rem; + border: 1px solid #ccc; + } + `, + ], +}) +export class PrizmThemeInvertedExampleComponent { + @ViewChild('zone', { static: true, read: ElementRef }) el: ElementRef; + public invetedThemeValue: string; + constructor(public readonly theme: PrizmThemeService) {} + + public light(): void { + this.theme.update('light', this.el.nativeElement); + } + + public dark(): void { + this.theme.update('dark', this.el.nativeElement); + } + + public toggle(): void { + this.theme.update( + this.theme.getByElement(this.el.nativeElement) === 'light' ? 'dark' : 'light', + this.el.nativeElement + ); + } +} diff --git a/apps/doc/src/app/tools/inverted-theme/inverted-theme.component.html b/apps/doc/src/app/tools/inverted-theme/inverted-theme.component.html new file mode 100644 index 0000000000..3efe6264a1 --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/inverted-theme.component.html @@ -0,0 +1,27 @@ + +
Set inverted theme for any element
+ + + + + + + + + + + + +
    +
  1. +

    + Import + PrizmThemeModule + into a service where you want to use our directive +

    + + +
    2. +
+ + diff --git a/apps/doc/src/app/tools/inverted-theme/inverted-theme.component.ts b/apps/doc/src/app/tools/inverted-theme/inverted-theme.component.ts new file mode 100644 index 0000000000..7d7c50beae --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/inverted-theme.component.ts @@ -0,0 +1,20 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { RawLoaderContent, TuiDocExample } from '@prizm-ui/doc'; + +@Component({ + selector: 'prizm-overlay-example', + templateUrl: './inverted-theme.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class InvertedThemeComponent { + readonly exampleModule: RawLoaderContent = import('./examples/import-module.md?raw'); + readonly invertedExample: TuiDocExample = { + TypeScript: import('./examples/inverted/inverted.component?raw'), + HTML: import('./examples/inverted/inverted.component.html?raw'), + }; + + readonly baseExample: TuiDocExample = { + TypeScript: import('./examples/base/base.component?raw'), + HTML: import('./examples/base/base.component.html?raw'), + }; +} diff --git a/apps/doc/src/app/tools/inverted-theme/inverted-theme.module.ts b/apps/doc/src/app/tools/inverted-theme/inverted-theme.module.ts new file mode 100644 index 0000000000..5e4de20960 --- /dev/null +++ b/apps/doc/src/app/tools/inverted-theme/inverted-theme.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc'; +import { RouterModule } from '@angular/router'; +import { InvertedThemeComponent } from './inverted-theme.component'; +import { PrizmButtonModule, PrizmWidgetModule } from '@prizm-ui/components'; +import { PrizmThemeInvertedExampleComponent } from './examples/inverted/inverted.component'; +import { PrizmThemeModule } from '@prizm-ui/theme'; +import { PrizmThemeBaseExampleComponent } from './examples/base/base.component'; + +@NgModule({ + imports: [ + CommonModule, + PrizmAddonDocModule, + PrizmThemeModule, + PrizmButtonModule, + PrizmWidgetModule, + RouterModule.forChild(prizmDocGenerateRoutes(InvertedThemeComponent)), + ], + declarations: [PrizmThemeBaseExampleComponent, PrizmThemeInvertedExampleComponent, InvertedThemeComponent], + exports: [InvertedThemeComponent], +}) +export class InvertedThemeModule {} diff --git a/apps/doc/src/app/tools/theme/examples/base/base.component.html b/apps/doc/src/app/tools/theme-service/examples/base/base.component.html similarity index 100% rename from apps/doc/src/app/tools/theme/examples/base/base.component.html rename to apps/doc/src/app/tools/theme-service/examples/base/base.component.html diff --git a/apps/doc/src/app/tools/theme/examples/base/base.component.ts b/apps/doc/src/app/tools/theme-service/examples/base/base.component.ts similarity index 100% rename from apps/doc/src/app/tools/theme/examples/base/base.component.ts rename to apps/doc/src/app/tools/theme-service/examples/base/base.component.ts diff --git a/apps/doc/src/app/tools/theme/examples/import-component.md b/apps/doc/src/app/tools/theme-service/examples/import-component.md similarity index 100% rename from apps/doc/src/app/tools/theme/examples/import-component.md rename to apps/doc/src/app/tools/theme-service/examples/import-component.md diff --git a/apps/doc/src/app/tools/theme/examples/local/local.component.html b/apps/doc/src/app/tools/theme-service/examples/local/local.component.html similarity index 100% rename from apps/doc/src/app/tools/theme/examples/local/local.component.html rename to apps/doc/src/app/tools/theme-service/examples/local/local.component.html diff --git a/apps/doc/src/app/tools/theme/examples/local/local.component.ts b/apps/doc/src/app/tools/theme-service/examples/local/local.component.ts similarity index 100% rename from apps/doc/src/app/tools/theme/examples/local/local.component.ts rename to apps/doc/src/app/tools/theme-service/examples/local/local.component.ts diff --git a/apps/doc/src/app/tools/theme/theme.component.html b/apps/doc/src/app/tools/theme-service/theme.component.html similarity index 100% rename from apps/doc/src/app/tools/theme/theme.component.html rename to apps/doc/src/app/tools/theme-service/theme.component.html diff --git a/apps/doc/src/app/tools/theme/theme.component.ts b/apps/doc/src/app/tools/theme-service/theme.component.ts similarity index 100% rename from apps/doc/src/app/tools/theme/theme.component.ts rename to apps/doc/src/app/tools/theme-service/theme.component.ts diff --git a/apps/doc/src/app/tools/theme/theme.module.ts b/apps/doc/src/app/tools/theme-service/theme.module.ts similarity index 100% rename from apps/doc/src/app/tools/theme/theme.module.ts rename to apps/doc/src/app/tools/theme-service/theme.module.ts diff --git a/apps/doc/src/app/version-manager/versions.constants.ts b/apps/doc/src/app/version-manager/versions.constants.ts index d819587ab8..84d2846793 100644 --- a/apps/doc/src/app/version-manager/versions.constants.ts +++ b/apps/doc/src/app/version-manager/versions.constants.ts @@ -6,7 +6,7 @@ export interface PrizmVersionMeta { export const PRIZM_VERSIONS_META: readonly PrizmVersionMeta[] = [ { - label: '1.0.0-beta.24', + label: '1.0.0-beta.25', baseHref: '', }, { diff --git a/helm/values.zui-sdk.yaml b/helm/values.zui-sdk.yaml new file mode 100644 index 0000000000..9e7022689d --- /dev/null +++ b/helm/values.zui-sdk.yaml @@ -0,0 +1,265 @@ +# -- Name of application +# @default -- name of the image +serviceName: 'zui-sdk' + +# -- Deploy as StatefulSet: true/false +statefulSetDeployment: false + +# -- Kube version override (for Ingress API choose) +# @default -- helm auto-detect +kubeVersion: '' + +# Pod-level secrutity context +podSecurityContext: {} + +# Service Container-level secrutity context +containerSecurityContext: {} + +## Service object configuration +service: + # -- Create service object: true/false + enabled: true + # -- Hedaless service type: true/false + headless: false + +# -- Additional kubernetes services (insert **ServiceSpec** objects "as is" from values file, you can use helm-templates here) +# Format: *name:{ serviceSpec }* +extraServices: {} + +# -- Common custom labes for all API objects +commonLabels: {} + +# -- Common annotation (for Deployment/SS) +commonAnnotations: {} + +# -- Number of replicas +replicaCount: 1 + +# -- Update strategy for Deployment or StatefulSet (used "as is") +updateStrategy: {} + +# -- custom pod labels +podLabels: {} + +# -- custom pod annotations +podAnnotations: {} + +# -- custom node selector +nodeSelector: {} + +# -- custom pod tolerations +tolerations: [] + +## Main container image configuration +image: + # -- Image registry name (optional) + registry: registry.dp.zyfra.com + # -- Image registry path (optional) + namespace: digital-plant + # -- Image name + name: zui-sdk + # -- Image tag + tag: latest + # -- Image pull secrets (optional) + pullSecrets: #[] + - name: zif-registry-pull-secret + # -- Image pull policy + pullPolicy: + +# -- Use specific service account for pod +serviceAccountName: + +tls: + # -- Mount or not CA-bundle from ConfigMap + CABundleMount: false + + # -- Name of ConfigMap with global trusted CA-certificates (ex: ca-bundle) + CABundleConfigMap: infra-ca-bundle + + # -- ConfigMap key with CA-certificates list (optional) + CABundleMapKey: 'ca-bundle.crt' + + # -- Mount type for global trusted certificates: + # **ubuntu** (PEM file), **alpine** (PEM), **java** (JKS), **custom** + CABundleMountType: ubuntu + + # -- Custom mount path for global trusted certificates (set type to "custom" and change this parameter ) + CABundleMountPath: '/etc/ssl/certs/ca-certificates.crt' + +# -- Additional ConfigMap to mount as volumes +# Format: *name: { mountPath: /data, subPath: "", readOnly: false, configMap: map-name, defaultMode: 256 }* or +# *name: { configMap: map-name }* +extraConfigmapMounts: #{} + nginx-default-conf: + mountPath: /etc/nginx/conf.d + readOnly: true + configMap: nginx-default-conf +# guardian-volume: +# configMap: zif-startup-guardian-config +# defaultMode: 420 + +# -- Additional Secrets to mount as volumes +# Format: *name: { mountPath: /data, subPath: "", readOnly: false, secret: secret-name, defaultMode: 256 }* or +# name: *{ secret: secret-name }* +extraSecretMounts: {} + +# -- Create additional ConfigMap +# Format: { configMapName: { name: "value", * }, * } +extraConfigMaps: {} + +# -- Create additional binaryConfigMap +# Format: { binaryConfigMapName: { name: "value", * }, * } +extraBinaryConfigMaps: {} + +# -- Create additional extraSecrets +# Format: { extraSecretsName: { name: "value", * }, * } +extraSecrets: {} + +# -- Additional Volumes to mount +# Format: *name: { mountPath: /data, volume: { "volume configuration as is" } }* +extraVolumes: {} + +# -- Additional init-containers (insert **Container** objects "as is" from values file, you can use helm-templates here) +# Format: *name:{ container }* +initContainers: {} + +# -- Additional containers (insert **Container** objects "as is" from values file, you can use helm-templates here) +# Format: *name:{ container }* +extraContainers: {} + +# -- Override entry-point of the main service container +command: [] + +# -- Override arguments for entry-point of the main service container +args: [] + +# -- Mount ConfigMaps as Environment variables for service container (list of names, all - optional) +# Format: [ { name: "configMap name", optional: "true" }, * ] +environmentVarsFrom: [] + +# -- Mount Secrets as Environment variables for service container (list of names, all - optional) +# Format: [ { name: "secret name", optional: "true" }, * ] +environmentVarsFromSecrets: [] + +# -- Environment variables for container. Can be name: "value", or name: { valueFrom: { .. } } +# Value alvays must be string, valueFrom used "as is" from values file +environmentVars: {} + +# -- Network ports for the service application. List of objects: +# { name: http, container: 5000, service: 80, proto: TCP } +containerPorts: #[] + - name: http + container: 8080 + service: 80 + proto: TCP + +# -- Liveness probe for service container (used "as is", you can use variable substitution) +livenessProbe: {} +# failureThreshold: 3 +# httpGet: +# path: /health/liveness +# port: http +# scheme: HTTP +# initialDelaySeconds: 60 +# periodSeconds: 30 +# successThreshold: 1 +# timeoutSeconds: 10 + +# -- Readiness probe for service container (used "as is", you can use variable substitution) +readinessProbe: {} +# failureThreshold: 3 +# httpGet: +# path: /health/readiness +# port: http +# scheme: HTTP +# initialDelaySeconds: 60 +# periodSeconds: 30 +# successThreshold: 1 +# timeoutSeconds: 10 + +# -- Startup probe for service container (used "as is", you can use variable substitution) +startupProbe: {} + +# -- Container resources (used "as is", you can use variable substitution) +# Format: {requests: { cpu: 0.1, memory: 512Mi }, limits: { cpu: 1, memory: 1024Mi }} +resources: #{} + limits: + cpu: 250m + memory: 384Mi + requests: + cpu: 40m + memory: 128Mi + +# -- PVC templates for StatefulSet deployments +# Format: { name: pvcName, accessMode: ReadWriteOnce, size: 1Gi, mountPath: /var/data } +pvcTemplates: [] + +# -- custom pvc labels +pvcLabels: {} + +# -- custom pvc annotations +pvcAnnotations: {} + +# -- Default StorageClass for PVC templates (can be overridden in the PVC template definition) +globalStorageClass: yc-network-ssd + +## Ingress/Route object configuration +ingress: + # -- Enable Route/Ingress creation + enabled: true + + # -- Enable URL rewrite on Ingress ( ziiot.cluster.com/service-name/api/call => ziiot.cluster.com/api/call ) + urlRewrite: true + + # -- (string) Service name to redirect traffic + # @default -- image name or custom service name (serviceName) + service: '' + + # -- Service port name to redirect traffic + # @default -- first container port name (containerPorts[0].name) or http + port: 'http' + + # -- Ingress/Route hostname (required for correct route/ingress work) + host: 'ziiot-dev-11.kube01.yc.ziiot.ru' + + # -- Publish path for service (https://hostname/path) + # @default -- image name or custom service name (serviceName) + path: '/zui-sdk' + + # -- Ingress class name (required, for Ingress objects only) + ingressClassName: nginx + + # -- Include CertManager ingress annotation with Issuer (optional, for Ingress objects only) + certmanagerIssuer: + + # -- Include CertManager ingress annotation with Cluster Issuer (optional, for Ingress objects only) + certmanagerClusterIssuer: + + # -- TLS parameters on Route/Ingress (tls enabled by default, set tls.enabled = false to disable) + tls: + # -- TLS enabled/disabled (default - enabled, termination 'edge') + enabled: true + + # -- TLS termination type: edge, reencrypt, passthrough (required) + termination: edge + + # -- HTTP -> HTTPS Redirect policy. Only for OpenShift/OKD (in kubernetes enabled by default). + # Posible values: "Redirect", "Node" + insecureEdgeTerminationPolicy: Redirect + + # -- Hostname for TLS certificate (optional, for Ingress objects only) + # @default -- ingress.host + tlsHost: 'ziiot-dev-11.kube01.yc.ziiot.ru' + + # -- Secret with certificate (for Ingress objects only) + secret: 'zif-tls-ingress-secret' + + # -- Server timeout (in seconds) + serverTimeout: 120 + + # -- Additional annotration fot Route/Ingress object + extraAnnotations: {} + +# -- Additional Ingress/Route objects configuration () +# Format: *name: { ingress object, properties like ingress.* }* +extraIngress: {} diff --git a/libs/charts/base/package.json b/libs/charts/base/package.json index d4ac0bcb46..fe9bfe3967 100644 --- a/libs/charts/base/package.json +++ b/libs/charts/base/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/charts", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "license": "MIT", "private": false, "publishConfig": { @@ -10,8 +10,8 @@ "peerDependencies": { "@angular/common": "^12.2.0", "@angular/core": "^12.2.0", - "@prizm-ui/theme": "^1.0.0-beta.24", - "@prizm-ui/helpers": "^1.0.0-beta.24", + "@prizm-ui/theme": "^1.0.0-beta.25", + "@prizm-ui/helpers": "^1.0.0-beta.25", "@antv/g2plot": "^2.4.22" }, "dependencies": { diff --git a/libs/components/package.json b/libs/components/package.json index c4f1ae41ed..ba8bc76b1a 100644 --- a/libs/components/package.json +++ b/libs/components/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/components", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "description": "Prizm UI system design components library http://prizm.zyfra.com", "license": "MIT", "private": false, @@ -17,9 +17,9 @@ "@ng-web-apis/resize-observer": "^1.0.3", "@ng-web-apis/intersection-observer": "^3.0.0", "@ng-web-apis/mutation-observer": "2.0.0", - "@prizm-ui/helpers": "^1.0.0-beta.24", - "@prizm-ui/core": "^1.0.0-beta.24", - "@prizm-ui/theme": "^1.0.0-beta.24" + "@prizm-ui/helpers": "^1.0.0-beta.25", + "@prizm-ui/core": "^1.0.0-beta.25", + "@prizm-ui/theme": "^1.0.0-beta.25" }, "dependencies": { "tslib": "^2.3.0" diff --git a/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.html b/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.html index fd0edf919b..fe97230672 100644 --- a/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.html +++ b/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.less b/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.less index 19bf837e53..08cb54136b 100644 --- a/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.less +++ b/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.less @@ -20,6 +20,9 @@ :host { display: block; +} + +.host { background: var(--prizm-confirm-dialog-background, var(--prizm-bg-body)); border: 1px solid var(--prizm-border-widget); border-radius: var(--prizm-confirm-dialog-border-radius, 2px); diff --git a/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.module.ts b/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.module.ts index a6d102aae9..f614da196f 100644 --- a/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.module.ts +++ b/libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.module.ts @@ -5,12 +5,14 @@ import { PrizmOverlayModule } from '../../../modules/overlay'; import { PrizmButtonModule } from '../../button'; import { PrizmDialogConfirmComponent } from './confirm-dialog.component'; import { PrizmScrollbarModule } from '../../scrollbar'; +import { PrizmThemeModule } from '@prizm-ui/theme'; @NgModule({ imports: [ CommonModule, PolymorphModule, PrizmOverlayModule, + PrizmThemeModule, PrizmButtonModule, PrizmFocusTrapModule, PrizmScrollbarModule, diff --git a/libs/components/src/lib/components/dialogs/dialog/dialog.component.html b/libs/components/src/lib/components/dialogs/dialog/dialog.component.html index 06aa18d607..9d86385d32 100644 --- a/libs/components/src/lib/components/dialogs/dialog/dialog.component.html +++ b/libs/components/src/lib/components/dialogs/dialog/dialog.component.html @@ -1,4 +1,4 @@ -
+
{{ data }} diff --git a/libs/components/src/lib/components/dialogs/dialog/dialog.component.less b/libs/components/src/lib/components/dialogs/dialog/dialog.component.less index b8dbfd4a8c..09bc0d08ab 100644 --- a/libs/components/src/lib/components/dialogs/dialog/dialog.component.less +++ b/libs/components/src/lib/components/dialogs/dialog/dialog.component.less @@ -1,69 +1,72 @@ -@import '../../../../styles/ui-local'; - -:host { - display: block; - background: var(--prizm-dialog-background, var(--prizm-bg-body)); - border: 1px solid var(--prizm-border-widget); - border-radius: var(--prizm-dialog-border-radius, 2px); - margin: var(--prizm-dialog-margin, 16px); - pointer-events: all; -} - -.content { - .ellipsis(); - padding: var(--prizm-dialog-padding, 32px 16px); - color: var(--prizm-text-main); - max-width: 100%; -} - -.header { - border-bottom: 1px solid var(--prizm-border-widget); - padding: var(--prizm-dialog-padding, 14px 16px); - display: flex; - justify-content: space-between; - - font-style: normal; - font-weight: 600; - font-size: var(--prizm-dialog-font-size, 14px); - color: var(--prizm-text-contrast); - - .title { - .ellipsis(); - max-width: 90%; - display: flex; - align-items: center; - } - - .icon { - color: var(--prizm-border-icon); - font-weight: 300; - cursor: pointer; - margin-left: 16px; - } -} - -.footer { - .ellipsis(); - border-top: 1px solid var(--prizm-border-widget); - padding: var(--prizm-dialog-padding, 14px 16px); - max-width: 100%; - - .buttons { - display: flex; - justify-content: flex-end; - gap: 8px; - overflow: hidden; - } -} - -.scrollbar { - max-height: var(--prizm-dialog-max-scrollbar-height, 60vh); -} - -*:focus-visible { - outline: none; -} - -[prizmInputIconButton] { - width: unset; -} +@import '../../../../styles/ui-local'; + +:host { + display: block; +} + +.host { + background: var(--prizm-dialog-background, var(--prizm-bg-body)); + border: 1px solid var(--prizm-border-widget); + border-radius: var(--prizm-dialog-border-radius, 2px); + margin: var(--prizm-dialog-margin, 16px); + pointer-events: all; +} + +.content { + .ellipsis(); + padding: var(--prizm-dialog-padding, 32px 16px); + color: var(--prizm-text-main); + max-width: 100%; +} + +.header { + border-bottom: 1px solid var(--prizm-border-widget); + padding: var(--prizm-dialog-padding, 14px 16px); + display: flex; + justify-content: space-between; + + font-style: normal; + font-weight: 600; + font-size: var(--prizm-dialog-font-size, 14px); + color: var(--prizm-text-contrast); + + .title { + .ellipsis(); + max-width: 90%; + display: flex; + align-items: center; + } + + .icon { + color: var(--prizm-border-icon); + font-weight: 300; + cursor: pointer; + margin-left: 16px; + } +} + +.footer { + .ellipsis(); + border-top: 1px solid var(--prizm-border-widget); + padding: var(--prizm-dialog-padding, 14px 16px); + max-width: 100%; + + .buttons { + display: flex; + justify-content: flex-end; + gap: 8px; + overflow: hidden; + } +} + +.scrollbar { + max-height: var(--prizm-dialog-max-scrollbar-height, 60vh); +} + +*:focus-visible { + outline: none; +} + +[prizmInputIconButton] { + width: unset; +} diff --git a/libs/components/src/lib/components/dialogs/dialog/dialog.module.ts b/libs/components/src/lib/components/dialogs/dialog/dialog.module.ts index 9514e8e87c..d605c554a9 100644 --- a/libs/components/src/lib/components/dialogs/dialog/dialog.module.ts +++ b/libs/components/src/lib/components/dialogs/dialog/dialog.module.ts @@ -6,11 +6,13 @@ import { PrizmOverlayModule } from '../../../modules/overlay'; import { PrizmButtonModule } from '../../button'; import { PrizmScrollbarModule } from '../../scrollbar'; import { PrizmInputIconButtonModule } from '../../input/common/input-icon-button/input-icon-button.module'; +import { PrizmThemeModule } from '@prizm-ui/theme'; @NgModule({ imports: [ CommonModule, PolymorphModule, + PrizmThemeModule, PrizmOverlayModule, PrizmButtonModule, PrizmFocusTrapModule, diff --git a/libs/components/src/lib/components/dialogs/sidebar/sidebar.component.html b/libs/components/src/lib/components/dialogs/sidebar/sidebar.component.html index e7a3a59b8b..61b6165e16 100644 --- a/libs/components/src/lib/components/dialogs/sidebar/sidebar.component.html +++ b/libs/components/src/lib/components/dialogs/sidebar/sidebar.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/libs/components/src/lib/components/dialogs/sidebar/sidebar.module.ts b/libs/components/src/lib/components/dialogs/sidebar/sidebar.module.ts index 0bbe99da3a..c4a039018e 100644 --- a/libs/components/src/lib/components/dialogs/sidebar/sidebar.module.ts +++ b/libs/components/src/lib/components/dialogs/sidebar/sidebar.module.ts @@ -6,11 +6,13 @@ import { PrizmButtonModule } from '../../button'; import { PrizmSidebarComponent } from './sidebar.component'; import { PrizmScrollbarModule } from '../../scrollbar'; import { PrizmInputIconButtonModule } from '../../input/common/input-icon-button/input-icon-button.module'; +import { PrizmThemeModule } from '@prizm-ui/theme'; @NgModule({ imports: [ CommonModule, PolymorphModule, + PrizmThemeModule, PrizmOverlayModule, PrizmInputIconButtonModule, PrizmButtonModule, diff --git a/libs/components/src/lib/components/table/tr/tr.style.less b/libs/components/src/lib/components/table/tr/tr.style.less index bbf7b3b690..ba3ad0b36f 100644 --- a/libs/components/src/lib/components/table/tr/tr.style.less +++ b/libs/components/src/lib/components/table/tr/tr.style.less @@ -1,41 +1,42 @@ -[prizmTbody] tr[prizmTr] { - cursor: pointer; - - background: var(--prizm-v2-table-background-default); - color: var(--prizm-v2-table-text-default); - - &:nth-child(odd) { - background: var(--prizm-v2-table-zebra); - } - - &:hover { - background: var(--prizm-v2-table-background-default-hover); - } - - &[status='success'] { - background: var(--prizm-v2-table-background-success); - color: var(--prizm-v2-table-text-success); - - &:hover { - background: var(--prizm-v2-table-background-success-hover); - } - } - - &[status='warning'] { - background: var(--prizm-v2-table-background-warning); - color: var(--prizm-v2-table-text-warning); - - &:hover { - background: var(--prizm-v2-table-background-warning-hover); - } - } - - &[status='danger'] { - background: var(--prizm-v2-table-background-danger); - color: var(--prizm-v2-table-text-danger); - - &:hover { - background: var(--prizm-v2-table-background-danger-hover); - } - } -} +[prizmTbody] tr[prizmTr] { + cursor: var(--prizm-table-row-cursor, pointer); + + color: var(--prizm-v2-table-text-default); + + background: var(--prizm-table-row-background, var(--prizm-v2-table-background-default)); + + &:nth-child(odd) { + background: var(--prizm-table-row-odd-background, var(--prizm-v2-table-zebra)); + } + + &:hover { + background: var(--prizm-table-row-hover-background, var(--prizm-v2-table-background-default-hover)); + } + + &[status='success'] { + background: var(--prizm-v2-table-background-success); + color: var(--prizm-v2-table-text-success); + + &:hover { + background: var(--prizm-v2-table-background-success-hover); + } + } + + &[status='warning'] { + background: var(--prizm-v2-table-background-warning); + color: var(--prizm-v2-table-text-warning); + + &:hover { + background: var(--prizm-v2-table-background-warning-hover); + } + } + + &[status='danger'] { + background: var(--prizm-v2-table-background-danger); + color: var(--prizm-v2-table-text-danger); + + &:hover { + background: var(--prizm-v2-table-background-danger-hover); + } + } +} diff --git a/libs/components/src/lib/directives/wrapper/wrapper.component.ts b/libs/components/src/lib/directives/wrapper/wrapper.component.ts index f3a7a0706e..0df5a3f259 100644 --- a/libs/components/src/lib/directives/wrapper/wrapper.component.ts +++ b/libs/components/src/lib/directives/wrapper/wrapper.component.ts @@ -1,7 +1,6 @@ -import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input } from '@angular/core'; import { PrizmThemeService } from '@prizm-ui/theme'; import { PrizmDestroyService } from '@prizm-ui/helpers'; -import { takeUntil } from 'rxjs/operators'; export enum PrizmInteractiveState { Disabled = 'disabled', @@ -17,7 +16,7 @@ export enum PrizmInteractiveState { changeDetection: ChangeDetectionStrategy.OnPush, providers: [PrizmDestroyService], }) -export class PrizmWrapperComponent implements OnInit { +export class PrizmWrapperComponent { @Input() disabled = false; @@ -92,11 +91,4 @@ export class PrizmWrapperComponent implements OnInit { public readonly destroy$: PrizmDestroyService, public readonly elRef: ElementRef ) {} - - public ngOnInit(): void { - this.themeService - .updateElementOnChange(this.elRef.nativeElement) - .pipe(takeUntil(this.destroy$)) - .subscribe(); - } } diff --git a/libs/components/src/lib/modules/overlay/overlay.component.less b/libs/components/src/lib/modules/overlay/overlay.component.less index eb547becae..1055fdb8d2 100644 --- a/libs/components/src/lib/modules/overlay/overlay.component.less +++ b/libs/components/src/lib/modules/overlay/overlay.component.less @@ -5,6 +5,7 @@ width: 100%; height: 100%; pointer-events: none; + z-index: 9999; &.no-width { width: auto; diff --git a/libs/components/src/lib/modules/overlay/overlay.component.ts b/libs/components/src/lib/modules/overlay/overlay.component.ts index 82af72af1d..c1baeac6eb 100644 --- a/libs/components/src/lib/modules/overlay/overlay.component.ts +++ b/libs/components/src/lib/modules/overlay/overlay.component.ts @@ -12,8 +12,9 @@ import { ViewContainerRef, } from '@angular/core'; import { PrizmDestroyService } from '@prizm-ui/helpers'; +import { PrizmThemeService } from '@prizm-ui/theme'; import { Observable } from 'rxjs'; -import { startWith, takeUntil, tap } from 'rxjs/operators'; +import { filter, map, startWith, takeUntil, tap } from 'rxjs/operators'; import { PrizmOverlayConfig, PrizmOverlayContent, PrizmOverlayContentType, PrizmOverlayId } from './models'; import { PrizmOverlayAbstractPosition } from './position/position'; import { cssClass, EventBus, objToCss } from './utils'; @@ -43,6 +44,7 @@ export class PrizmOverlayComponent implements OnInit, AfterViewInit, OnDestroy { constructor( public readonly inj: Injector, + public readonly theme: PrizmThemeService, private readonly cd: ChangeDetectorRef, private readonly destroy$: PrizmDestroyService, private readonly compResolver: ComponentFactoryResolver, diff --git a/libs/components/src/lib/modules/overlay/position/overlay-relative-position.ts b/libs/components/src/lib/modules/overlay/position/overlay-relative-position.ts index 0570e0a190..830e09b5f3 100644 --- a/libs/components/src/lib/modules/overlay/position/overlay-relative-position.ts +++ b/libs/components/src/lib/modules/overlay/position/overlay-relative-position.ts @@ -98,12 +98,12 @@ export class PrizmOverlayRelativePosition extends PrizmOverlayAbstractPosition

} { const props = this.calc(pos, s, h); if ( - c && + canReCalcPosition && this.config.autoReposition && this.isOverflowed({ ...props, width: h.width, height: h.height }, pos) ) { @@ -115,11 +115,15 @@ export class PrizmOverlayRelativePosition extends PrizmOverlayAbstractPosition

innerWidth; + if (main === 'l') return props.left - props.width < 0; return false; } - const { innerHeight, innerWidth } = window; + props.bottom = props.top + props.height; props.right = props.left + props.width; diff --git a/libs/core/package.json b/libs/core/package.json index 544550f9b3..5376c3badb 100644 --- a/libs/core/package.json +++ b/libs/core/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/core", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "license": "MIT", "description": "The main library for creating Angular components and elements using Prizm.", "private": false, diff --git a/libs/deprecated/package.json b/libs/deprecated/package.json index b0d5f04def..1589eb0e45 100644 --- a/libs/deprecated/package.json +++ b/libs/deprecated/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/deprecated", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "license": "MIT", "description": "Library to make it easy to create Angular applications. Contains Injectables Service, RxJS utilities, directives, and standard pipes.", "private": false, @@ -19,9 +19,9 @@ "@ng-web-apis/mutation-observer": "2.0.0", "primeicons": "^4.1.0", "primeng": "^12.2.1", - "@prizm-ui/helpers": "^1.0.0-beta.24", - "@prizm-ui/core": "^1.0.0-beta.24", - "@prizm-ui/theme": "^1.0.0-beta.24" + "@prizm-ui/helpers": "^1.0.0-beta.25", + "@prizm-ui/core": "^1.0.0-beta.25", + "@prizm-ui/theme": "^1.0.0-beta.25" }, "dependencies": { "tslib": "^2.3.0" diff --git a/libs/helpers/package.json b/libs/helpers/package.json index 8eade830a6..deb0e273b7 100644 --- a/libs/helpers/package.json +++ b/libs/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/helpers", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "license": "MIT", "description": "Library to make it easy to create Angular applications. Contains Injectables Service, RxJS utilities, directives, and standard pipes.", "private": false, diff --git a/libs/icons/base/package.json b/libs/icons/base/package.json index e19526b2c5..3d05a9aace 100644 --- a/libs/icons/base/package.json +++ b/libs/icons/base/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/icons", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "description": "Prizm UI base icon pack library http://prizm.zyfra.com", "private": false, "publishConfig": { @@ -10,7 +10,7 @@ "peerDependencies": { "@angular/common": "^12.2.0", "@angular/core": "^12.2.0", - "@prizm-ui/core": "^1.0.0-beta.24" + "@prizm-ui/core": "^1.0.0-beta.25" }, "dependencies": { "tslib": "^2.3.0" diff --git a/libs/icons/flags/package.json b/libs/icons/flags/package.json index d5791fad20..69dbc6f7fb 100644 --- a/libs/icons/flags/package.json +++ b/libs/icons/flags/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/flag-icons", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "description": "Prizm UI flags icon pack library http://prizm.zyfra.com", "private": false, "publishConfig": { @@ -10,7 +10,7 @@ "peerDependencies": { "@angular/common": "^12.2.0", "@angular/core": "^12.2.0", - "@prizm-ui/core": "^1.0.0-beta.24" + "@prizm-ui/core": "^1.0.0-beta.25" }, "dependencies": { "tslib": "^2.3.0" diff --git a/libs/schematics/package.json b/libs/schematics/package.json index e71c34c255..1ffaf75c7a 100644 --- a/libs/schematics/package.json +++ b/libs/schematics/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/install", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "description": "Package installer @prizm-ui/* , Angular schematic ng-add", "schematics": "./src/collection.json", "private": false, diff --git a/libs/schematics/src/ng-add/consts.ts b/libs/schematics/src/ng-add/consts.ts index 3ef0d83795..fd1a2339b3 100644 --- a/libs/schematics/src/ng-add/consts.ts +++ b/libs/schematics/src/ng-add/consts.ts @@ -11,21 +11,21 @@ interface ImportingModule { export const MAIN_PACKAGES: ReadonlyArray = [ { name: '@prizm-ui/core', - version: '1.0.0-beta.24', + version: '1.0.0-beta.25', }, { name: '@prizm-ui/components', - version: '1.0.0-beta.24', + version: '1.0.0-beta.25', }, { name: '@prizm-ui/helpers', - version: '1.0.0-beta.24', + version: '1.0.0-beta.25', }, ]; export const INSTALL_PACKAGE: Readonly = { name: '@prizm-ui/install', - version: '1.0.0-beta.24', + version: '1.0.0-beta.25', }; export const MAIN_MODULES: ReadonlyArray = [ diff --git a/libs/theme/package.json b/libs/theme/package.json index 5dcbf88820..3d38060384 100644 --- a/libs/theme/package.json +++ b/libs/theme/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/theme", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "peerDependencies": { "@angular/common": "^12.2.0", "@angular/core": "^12.2.0" diff --git a/libs/theme/src/lib/directive/theme/index.ts b/libs/theme/src/lib/directive/theme/index.ts index 8476d020e7..84e62c7e37 100644 --- a/libs/theme/src/lib/directive/theme/index.ts +++ b/libs/theme/src/lib/directive/theme/index.ts @@ -1,2 +1,3 @@ export * from './theme.directive'; +export * from './theme-inverted.directive'; export * from './theme.module'; diff --git a/libs/theme/src/lib/directive/theme/theme-inverted.directive.ts b/libs/theme/src/lib/directive/theme/theme-inverted.directive.ts new file mode 100644 index 0000000000..437d016dc6 --- /dev/null +++ b/libs/theme/src/lib/directive/theme/theme-inverted.directive.ts @@ -0,0 +1,53 @@ +import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { PrizmDestroyService } from '@prizm-ui/helpers'; +import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators'; +import { PrizmThemeService } from '../../services/theme.service'; +import { PrizmTheme } from '../../types/theme'; +import { prizmObservable } from '@prizm-ui/core'; +import { combineLatest, Observable } from 'rxjs'; + +@Directive({ + selector: '[prizmThemeInverted]', + providers: [PrizmDestroyService], +}) +export class PrizmThemeInvertedDirective implements OnInit { + @Output() + public readonly prizmThemeChange = new EventEmitter(); + + @Input() + @prizmObservable({ + name: 'invertedValues$$', + }) + public invertedValues = { + dark: 'light', + light: 'dark', + }; + + @Input() + @prizmObservable({ + name: 'themeElement$$', + }) + public themeElement = this.themeService.rootElement; + + private readonly invertedValues$$!: Observable>; + private readonly themeElement$$: Observable; + + constructor( + private readonly themeService: PrizmThemeService, + private readonly elementRef: ElementRef, + private readonly destroy$: PrizmDestroyService + ) {} + + public ngOnInit(): void { + combineLatest([this.invertedValues$$, this.themeElement$$]) + .pipe( + switchMap(([invertedValues, themeElement]) => + this.themeService.getInvertedThemeByElement$(themeElement, invertedValues) + ), + tap(newTheme => this.themeService.update(newTheme, this.elementRef.nativeElement)), + tap(newTheme => this.prizmThemeChange.next(newTheme)), + takeUntil(this.destroy$) + ) + .subscribe(); + } +} diff --git a/libs/theme/src/lib/directive/theme/theme.directive.ts b/libs/theme/src/lib/directive/theme/theme.directive.ts index 902f16bd5a..93db289aad 100644 --- a/libs/theme/src/lib/directive/theme/theme.directive.ts +++ b/libs/theme/src/lib/directive/theme/theme.directive.ts @@ -1,6 +1,6 @@ import { Directive, ElementRef, EventEmitter, Inject, Input, OnInit, Output, Renderer2 } from '@angular/core'; import { PrizmDestroyService } from '@prizm-ui/helpers'; -import { map, takeUntil, tap } from 'rxjs/operators'; +import { filter, map, takeUntil, tap } from 'rxjs/operators'; import { PrizmThemeService } from '../../services/theme.service'; import { PrizmTheme } from '../../types/theme'; import { prizmObservable } from '@prizm-ui/core'; @@ -31,9 +31,9 @@ export class PrizmThemeDirective implements OnInit { ) {} public ngOnInit(): void { - combineLatest([this.theme$$, this.themeService.change$]) + combineLatest([this.theme$$, this.themeService.getLastThemeForElement$()]) .pipe( - map(([theme, themeFromService]) => theme || themeFromService.theme), + map(([theme, themeFromService]) => theme || themeFromService), tap(theme => { this.renderer2.setAttribute(this.element.nativeElement, this.themeService.attThemeKey, theme); }), diff --git a/libs/theme/src/lib/directive/theme/theme.module.ts b/libs/theme/src/lib/directive/theme/theme.module.ts index 591f6016a9..999496535e 100644 --- a/libs/theme/src/lib/directive/theme/theme.module.ts +++ b/libs/theme/src/lib/directive/theme/theme.module.ts @@ -1,8 +1,9 @@ import { NgModule } from '@angular/core'; import { PrizmThemeDirective } from './theme.directive'; +import { PrizmThemeInvertedDirective } from './theme-inverted.directive'; @NgModule({ - declarations: [PrizmThemeDirective], - exports: [PrizmThemeDirective], + declarations: [PrizmThemeDirective, PrizmThemeInvertedDirective], + exports: [PrizmThemeDirective, PrizmThemeInvertedDirective], }) export class PrizmThemeModule {} diff --git a/libs/theme/src/lib/services/theme.service.ts b/libs/theme/src/lib/services/theme.service.ts index c01541fff6..24fdd92f58 100644 --- a/libs/theme/src/lib/services/theme.service.ts +++ b/libs/theme/src/lib/services/theme.service.ts @@ -1,6 +1,6 @@ import { Inject, Injectable, OnDestroy } from '@angular/core'; import { BehaviorSubject, Observable, Subscription } from 'rxjs'; -import { map, tap } from 'rxjs/operators'; +import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators'; import { PrizmTheme } from '../types/theme'; import { DOCUMENT } from '@angular/common'; @@ -15,6 +15,7 @@ export class PrizmThemeService implements OnDestroy { public get rootElement(): HTMLElement { return this.rootElement_ ?? this.document.querySelector('body'); } + private readonly themeStorage = new Map(); private readonly changeSource$ = new BehaviorSubject<{ theme: PrizmTheme; @@ -22,7 +23,7 @@ export class PrizmThemeService implements OnDestroy { }>({ theme: 'light', }); - readonly change$ = this.changeSource$.asObservable(); + readonly change$ = this.changeSource$.pipe(tap(data => this.themeStorage.set(data.el, data.theme))); public get value(): string { return this.changeSource$.value.theme; } @@ -34,17 +35,31 @@ export class PrizmThemeService implements OnDestroy { this.subscription.add(this.change$.pipe(tap(theme => this.setToHtml(theme.theme, theme.el))).subscribe()); } - public getByElement(el?: HTMLElement): PrizmTheme { - return (el ?? this.rootElement)?.getAttribute(this.attThemeKey); + public getLastThemeForElement(el: HTMLElement): string { + return this.themeStorage.get(el); } - public updateElementOnChange(el: HTMLElement): Observable { + public getLastThemeForElement$(el: HTMLElement = this.rootElement): Observable { return this.change$.pipe( - tap(theme => this.setToHtml(theme.theme, el)), - map(i => i.theme) + map(i => this.getLastThemeForElement(el)), + distinctUntilChanged() ); } + public getInvertedThemeByElement$( + element = this.rootElement, + pairThemeValues: Record = { + light: 'dark', + dark: 'light', + } + ): Observable { + return this.getLastThemeForElement$(element).pipe(map(theme => pairThemeValues[theme])); + } + + public getByElement(el?: HTMLElement): PrizmTheme { + return (el ?? this.rootElement)?.getAttribute(this.attThemeKey); + } + private setToHtml(theme: PrizmTheme, el?: HTMLElement): void { (el ?? this.rootElement)?.setAttribute(this.attThemeKey, theme); } diff --git a/package-lock.ng14.json b/package-lock.ng14.json index b8cf06700c..8d4bd85dde 100644 --- a/package-lock.ng14.json +++ b/package-lock.ng14.json @@ -1,12 +1,12 @@ { "name": "@prizm-ui/sdk", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@prizm-ui/sdk", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 07d62acd2c..6a0fa9707a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/sdk", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "license": "MIT", "husky": { "hooks": { @@ -140,5 +140,8 @@ "tar-stream": "~2.2.0", "ts-jest": "27.0.5", "typescript": "~4.3.5" + }, + "volta": { + "node": "14.21.3" } } diff --git a/package.ng14.json b/package.ng14.json index b5a6d06048..32728fadf4 100644 --- a/package.ng14.json +++ b/package.ng14.json @@ -1,6 +1,6 @@ { "name": "@prizm-ui/sdk", - "version": "1.0.0-beta.24", + "version": "1.0.0-beta.25", "license": "MIT", "husky": { "hooks": {