ng-zorro-antd-core-config.mjs 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, makeEnvironmentProviders, inject, CSP_NONCE, Injectable } from '@angular/core';
  3. import { Subject } from 'rxjs';
  4. import { filter, map } from 'rxjs/operators';
  5. import { TinyColor } from '@ctrl/tinycolor';
  6. import { generate } from 'ng-zorro-antd/core/color';
  7. import { warn } from 'ng-zorro-antd/core/logger';
  8. import { canUseDom, updateCSS } from 'ng-zorro-antd/core/util';
  9. /**
  10. * Use of this source code is governed by an MIT-style license that can be
  11. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  12. */
  13. /**
  14. * User should provide an object implements this interface to set global configurations.
  15. */
  16. const NZ_CONFIG = new InjectionToken('nz-config');
  17. function provideNzConfig(config) {
  18. return makeEnvironmentProviders([{ provide: NZ_CONFIG, useValue: config }]);
  19. }
  20. /**
  21. * Use of this source code is governed by an MIT-style license that can be
  22. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  23. */
  24. /**
  25. * Sync from @ant-design/colors(https://github.com/ant-design/ant-design-colors)
  26. */
  27. const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
  28. function getStyle(globalPrefixCls, theme) {
  29. const variables = {};
  30. const formatColor = (color, updater) => {
  31. let clone = color.clone();
  32. clone = updater?.(clone) || clone;
  33. return clone.toRgbString();
  34. };
  35. const fillColor = (colorVal, type) => {
  36. const baseColor = new TinyColor(colorVal);
  37. const colorPalettes = generate(baseColor.toRgbString());
  38. variables[`${type}-color`] = formatColor(baseColor);
  39. variables[`${type}-color-disabled`] = colorPalettes[1];
  40. variables[`${type}-color-hover`] = colorPalettes[4];
  41. variables[`${type}-color-active`] = colorPalettes[7];
  42. variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
  43. variables[`${type}-color-deprecated-bg`] = colorPalettes[1];
  44. variables[`${type}-color-deprecated-border`] = colorPalettes[3];
  45. };
  46. // ================ Primary Color ================
  47. if (theme.primaryColor) {
  48. fillColor(theme.primaryColor, 'primary');
  49. const primaryColor = new TinyColor(theme.primaryColor);
  50. const primaryColors = generate(primaryColor.toRgbString());
  51. // Legacy - We should use semantic naming standard
  52. primaryColors.forEach((color, index) => {
  53. variables[`primary-${index + 1}`] = color;
  54. });
  55. // Deprecated
  56. variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35));
  57. variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20));
  58. variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20));
  59. variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50));
  60. variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c => c.setAlpha(c.getAlpha() * 0.12));
  61. const primaryActiveColor = new TinyColor(primaryColors[0]);
  62. variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c => c.setAlpha(c.getAlpha() * 0.3));
  63. variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c => c.darken(2));
  64. }
  65. // ================ Success Color ================
  66. if (theme.successColor) {
  67. fillColor(theme.successColor, 'success');
  68. }
  69. // ================ Warning Color ================
  70. if (theme.warningColor) {
  71. fillColor(theme.warningColor, 'warning');
  72. }
  73. // ================= Error Color =================
  74. if (theme.errorColor) {
  75. fillColor(theme.errorColor, 'error');
  76. }
  77. // ================= Info Color ==================
  78. if (theme.infoColor) {
  79. fillColor(theme.infoColor, 'info');
  80. }
  81. // Convert to css variables
  82. const cssList = Object.keys(variables).map(key => `--${globalPrefixCls}-${key}: ${variables[key]};`);
  83. return `
  84. :root {
  85. ${cssList.join('\n')}
  86. }
  87. `.trim();
  88. }
  89. function registerTheme(globalPrefixCls, theme, cspNonce) {
  90. const style = getStyle(globalPrefixCls, theme);
  91. if (canUseDom()) {
  92. updateCSS(style, `${dynamicStyleMark}-dynamic-theme`, { cspNonce });
  93. }
  94. else {
  95. warn(`NzConfigService: SSR do not support dynamic theme with css variables.`);
  96. }
  97. }
  98. /**
  99. * Use of this source code is governed by an MIT-style license that can be
  100. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  101. */
  102. const isDefined = function (value) {
  103. return value !== undefined;
  104. };
  105. const defaultPrefixCls = 'ant';
  106. class NzConfigService {
  107. configUpdated$ = new Subject();
  108. /** Global config holding property. */
  109. config = inject(NZ_CONFIG, { optional: true }) || {};
  110. cspNonce = inject(CSP_NONCE, { optional: true });
  111. constructor() {
  112. if (this.config.theme) {
  113. // If theme is set with NZ_CONFIG, register theme to make sure css variables work
  114. registerTheme(this.getConfig().prefixCls?.prefixCls || defaultPrefixCls, this.config.theme, this.cspNonce);
  115. }
  116. }
  117. getConfig() {
  118. return this.config;
  119. }
  120. getConfigForComponent(componentName) {
  121. return this.config[componentName];
  122. }
  123. getConfigChangeEventForComponent(componentName) {
  124. return this.configUpdated$.pipe(filter(n => n === componentName), map(() => undefined));
  125. }
  126. set(componentName, value) {
  127. this.config[componentName] = { ...this.config[componentName], ...value };
  128. if (componentName === 'theme' && this.config.theme) {
  129. registerTheme(this.getConfig().prefixCls?.prefixCls || defaultPrefixCls, this.config.theme, this.cspNonce);
  130. }
  131. this.configUpdated$.next(componentName);
  132. }
  133. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  134. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzConfigService, providedIn: 'root' });
  135. }
  136. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzConfigService, decorators: [{
  137. type: Injectable,
  138. args: [{
  139. providedIn: 'root'
  140. }]
  141. }], ctorParameters: () => [] });
  142. /**
  143. * This decorator is used to decorate class field. If a class field is decorated and unassigned, it would try to load default value from `NZ_CONFIG`
  144. *
  145. * @note that the class must have `_nzModuleName`({@link NzConfigKey}) property.
  146. * @example
  147. * ```ts
  148. * class ExampleComponent {
  149. * private readonly _nzModuleName: NzConfigKey = 'button';
  150. * @WithConfig() size: string = 'default';
  151. * }
  152. * ```
  153. */
  154. function WithConfig() {
  155. return function (_value, context) {
  156. context.addInitializer(function () {
  157. const nzConfigService = inject(NzConfigService);
  158. const originalValue = this[context.name];
  159. let value;
  160. let assignedByUser = false;
  161. Object.defineProperty(this, context.name, {
  162. get: () => {
  163. const configValue = nzConfigService.getConfigForComponent(this['_nzModuleName'])?.[context.name];
  164. if (assignedByUser) {
  165. return value;
  166. }
  167. if (isDefined(configValue)) {
  168. return configValue;
  169. }
  170. return originalValue;
  171. },
  172. set: (newValue) => {
  173. // if the newValue is undefined, we also consider it as not assigned by user
  174. assignedByUser = isDefined(newValue);
  175. value = newValue;
  176. },
  177. enumerable: true,
  178. configurable: true
  179. });
  180. });
  181. };
  182. }
  183. /**
  184. * Use of this source code is governed by an MIT-style license that can be
  185. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  186. */
  187. /**
  188. * Generated bundle index. Do not edit.
  189. */
  190. export { NZ_CONFIG, NzConfigService, WithConfig, getStyle, provideNzConfig, registerTheme };
  191. //# sourceMappingURL=ng-zorro-antd-core-config.mjs.map