@ama-styling/devkit 15.3.0-prerelease.15 → 15.3.0-prerelease.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,241 +1,242 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, DOCUMENT, Injectable, InjectionToken, DestroyRef, NgModule, makeEnvironmentProviders } from '@angular/core';
3
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4
- import { sendOtterMessage, filterMessageContent } from '@o3r/core';
5
- import { LoggerService } from '@o3r/logger';
6
- import { fromEvent } from 'rxjs';
7
-
8
- /** Tag to identify theme variable */
9
- const THEME_TAG_NAME = 'theme';
10
- /** Tag to identify palette variable */
11
- const PALETTE_TAG_NAME = 'palette';
12
-
13
- /**
14
- * Styling devtools service
15
- */
16
- class OtterStylingDevtools {
17
- constructor() {
18
- this.document = inject(DOCUMENT);
19
- }
20
- /**
21
- * Retrieve styling metadata
22
- * @param stylingMetadataPath
23
- */
24
- async getStylingMetadata(stylingMetadataPath) {
25
- return (await fetch(stylingMetadataPath)).json();
26
- }
27
- /**
28
- * Update styling variables
29
- * @param variables
30
- */
31
- updateVariables(variables) {
32
- Object.entries(variables).forEach(([varName, value]) => this.document.querySelector('html').style.setProperty(`--${varName}`, value));
33
- }
34
- /**
35
- * Reset styling variables override
36
- */
37
- resetStylingVariables() {
38
- const style = this.document.querySelector('html').style;
39
- style.cssText
40
- .split(/;(\s+)?/)
41
- .reduce((acc, str) => {
42
- const match = str?.match(/^(--.*):/);
43
- return match ? acc.concat(match[1]) : acc;
44
- }, [])
45
- .forEach((varName) => style.removeProperty(varName));
46
- }
47
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: OtterStylingDevtools, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
48
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: OtterStylingDevtools }); }
49
- }
50
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: OtterStylingDevtools, decorators: [{
51
- type: Injectable
52
- }] });
53
-
54
- /**
55
- * Default value for styling devtools
56
- */
1
+ import * as i0 from "@angular/core";
2
+ import { DOCUMENT, DestroyRef, Injectable, InjectionToken, NgModule, inject, makeEnvironmentProviders } from "@angular/core";
3
+ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
4
+ import { filterMessageContent, sendOtterMessage } from "@o3r/core";
5
+ import { LoggerService } from "@o3r/logger";
6
+ import { fromEvent } from "rxjs";
7
+ const THEME_TAG_NAME = "theme";
8
+ const PALETTE_TAG_NAME = "palette";
9
+ var OtterStylingDevtools = class OtterStylingDevtools {
10
+ constructor() {
11
+ this.document = inject(DOCUMENT);
12
+ }
13
+ async getStylingMetadata(stylingMetadataPath) {
14
+ return (await fetch(stylingMetadataPath)).json();
15
+ }
16
+ updateVariables(variables) {
17
+ Object.entries(variables).forEach(([varName, value]) => this.document.querySelector("html").style.setProperty(`--${varName}`, value));
18
+ }
19
+ resetStylingVariables() {
20
+ const style = this.document.querySelector("html").style;
21
+ style.cssText.split(/;(\s+)?/).reduce((acc, str) => {
22
+ const match = str?.match(/^(--.*):/);
23
+ return match ? acc.concat(match[1]) : acc;
24
+ }, []).forEach((varName) => style.removeProperty(varName));
25
+ }
26
+ static {
27
+ this.ɵfac = i0.ɵɵngDeclareFactory({
28
+ minVersion: "12.0.0",
29
+ version: "22.2.3",
30
+ ngImport: i0,
31
+ type: OtterStylingDevtools,
32
+ deps: [],
33
+ target: i0.ɵɵFactoryTarget.Injectable
34
+ });
35
+ }
36
+ static {
37
+ this.ɵprov = i0.ɵɵngDeclareInjectable({
38
+ minVersion: "12.0.0",
39
+ version: "22.2.3",
40
+ ngImport: i0,
41
+ type: OtterStylingDevtools
42
+ });
43
+ }
44
+ };
45
+ i0.ɵɵngDeclareClassMetadata({
46
+ minVersion: "12.0.0",
47
+ version: "22.2.3",
48
+ ngImport: i0,
49
+ type: OtterStylingDevtools,
50
+ decorators: [{ type: Injectable }]
51
+ });
57
52
  const OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS = {
58
- isActivatedOnBootstrap: false,
59
- stylingMetadataPath: './metadata/styling.metadata.json'
53
+ isActivatedOnBootstrap: false,
54
+ stylingMetadataPath: "./metadata/styling.metadata.json"
60
55
  };
61
- /**
62
- * Token for styling devtools
63
- */
64
- const OTTER_STYLING_DEVTOOLS_OPTIONS = new InjectionToken('Otter Styling Devtools options');
65
-
66
- /* eslint-disable no-console -- this is the purpose of this service */
56
+ const OTTER_STYLING_DEVTOOLS_OPTIONS = new InjectionToken("Otter Styling Devtools options");
67
57
  const isStylingMessage = (message) => {
68
- return message && (message.dataType === 'updateStylingVariables'
69
- || message.dataType === 'resetStylingVariables'
70
- || message.dataType === 'getStylingVariable'
71
- || message.dataType === 'requestMessages'
72
- || message.dataType === 'connect');
58
+ return message && (message.dataType === "updateStylingVariables" || message.dataType === "resetStylingVariables" || message.dataType === "getStylingVariable" || message.dataType === "requestMessages" || message.dataType === "connect");
73
59
  };
74
- const getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets)
75
- .reverse()
76
- .reduce((acc, styleSheet) => {
77
- let rules;
78
- try {
79
- rules = styleSheet.cssRules || styleSheet.rules;
80
- }
81
- catch (err) {
82
- console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to network issues, please check:
60
+ const getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets).reverse().reduce((acc, styleSheet) => {
61
+ let rules;
62
+ try {
63
+ rules = styleSheet.cssRules || styleSheet.rules;
64
+ } catch (err) {
65
+ console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to network issues, please check:
83
66
  - network connectivity
84
67
  - CORS setup
85
68
  - granted access to the stylesheet`, err);
86
- }
87
- return acc.concat(Array.from(rules || [])
88
- .reverse()
89
- .filter((rule) => rule instanceof CSSStyleRule && /\b:root\b/.test(rule.selectorText)));
69
+ }
70
+ return acc.concat(Array.from(rules || []).reverse().filter((rule) => rule instanceof CSSStyleRule && /\b:root\b/.test(rule.selectorText)));
90
71
  }, []);
91
72
  const getCSSVariableValueInCSSStyleDeclaration = (variableName, style) => style.getPropertyValue(variableName).trim();
92
73
  const getCSSVariableValue = (variableName, cssRules) => {
93
- const inlineValue = getCSSVariableValueInCSSStyleDeclaration(variableName, document.querySelector('html').style);
94
- if (inlineValue) {
95
- return inlineValue;
96
- }
97
- for (const rule of cssRules) {
98
- const ruleValue = getCSSVariableValueInCSSStyleDeclaration(variableName, rule.style);
99
- if (ruleValue) {
100
- return ruleValue;
101
- }
102
- }
74
+ const inlineValue = getCSSVariableValueInCSSStyleDeclaration(variableName, document.querySelector("html").style);
75
+ if (inlineValue) return inlineValue;
76
+ for (const rule of cssRules) {
77
+ const ruleValue = getCSSVariableValueInCSSStyleDeclaration(variableName, rule.style);
78
+ if (ruleValue) return ruleValue;
79
+ }
103
80
  };
104
- /**
105
- * Service to handle communication between application and chrome extension for styling
106
- */
107
- class StylingDevtoolsMessageService {
108
- constructor() {
109
- this.logger = inject(LoggerService, { optional: true });
110
- this.stylingDevTools = inject(OtterStylingDevtools);
111
- this.options = inject(OTTER_STYLING_DEVTOOLS_OPTIONS, { optional: true }) ?? OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS;
112
- this.sendMessage = (sendOtterMessage);
113
- this.destroyRef = inject(DestroyRef);
114
- this.options = {
115
- ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,
116
- ...this.options
117
- };
118
- if (this.options.isActivatedOnBootstrap) {
119
- this.activate();
120
- }
121
- }
122
- async sendMetadata() {
123
- const metadata = await this.stylingDevTools.getStylingMetadata(this.options.stylingMetadataPath);
124
- const cssRules = getCSSRulesAppliedOnRoot();
125
- const variables = Object.values(metadata.variables).map((variable) => ({
126
- ...variable,
127
- runtimeValue: getCSSVariableValue(`--${variable.name}`, cssRules)
128
- }));
129
- this.sendMessage('getStylingVariable', { variables });
130
- }
131
- /**
132
- * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension
133
- * @param only restricted list of messages to re-send
134
- */
135
- handleReEmitRequest(only) {
136
- if (!only || only.includes('getStylingVariable')) {
137
- return this.sendMetadata();
138
- }
139
- }
140
- /**
141
- * Function to handle the incoming messages from Otter Chrome DevTools extension
142
- * @param message Message coming from the Otter Chrome DevTools extension
143
- */
144
- handleEvents(message) {
145
- this.logger?.debug('Message handling by the styling service', message);
146
- switch (message.dataType) {
147
- case 'connect': {
148
- this.connectPlugin();
149
- break;
150
- }
151
- case 'requestMessages': {
152
- void this.handleReEmitRequest(message.only);
153
- break;
154
- }
155
- case 'updateStylingVariables': {
156
- this.stylingDevTools.updateVariables(message.variables);
157
- break;
158
- }
159
- case 'resetStylingVariables': {
160
- this.stylingDevTools.resetStylingVariables();
161
- break;
162
- }
163
- default: {
164
- this.logger?.warn('Message ignored by the styling service', message);
165
- }
166
- }
167
- }
168
- /**
169
- * Function to connect the plugin to the Otter Chrome DevTools extension
170
- */
171
- connectPlugin() {
172
- this.logger?.debug('Otter DevTools is plugged to styling service of the application');
173
- }
174
- /** @inheritDoc */
175
- activate() {
176
- fromEvent(window, 'message').pipe(takeUntilDestroyed(this.destroyRef), filterMessageContent(isStylingMessage)).subscribe((e) => this.handleEvents(e));
177
- }
178
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
179
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsMessageService }); }
180
- }
181
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsMessageService, decorators: [{
182
- type: Injectable
183
- }], ctorParameters: () => [] });
184
-
185
- /**
186
- * @deprecated Will be removed in v16. Use {@link provideStylingDevtools} instead.
187
- */
188
- class StylingDevtoolsModule {
189
- /**
190
- * Initialize Otter Devtools
191
- * @param options
192
- */
193
- static instrument(options) {
194
- return {
195
- ngModule: StylingDevtoolsModule,
196
- providers: [
197
- { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: { ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, ...options }, multi: false },
198
- StylingDevtoolsMessageService,
199
- OtterStylingDevtools
200
- ]
201
- };
202
- }
203
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
204
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsModule }); }
205
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsModule, providers: [
206
- { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS },
207
- StylingDevtoolsMessageService,
208
- OtterStylingDevtools
209
- ] }); }
210
- }
211
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: StylingDevtoolsModule, decorators: [{
212
- type: NgModule,
213
- args: [{
214
- providers: [
215
- { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS },
216
- StylingDevtoolsMessageService,
217
- OtterStylingDevtools
218
- ]
219
- }]
220
- }] });
221
- /**
222
- * Provide styling devtools functionality for the application.
223
- * @param options Optional partial styling devtools configuration to override defaults.
224
- */
81
+ var StylingDevtoolsMessageService = class StylingDevtoolsMessageService {
82
+ constructor() {
83
+ this.logger = inject(LoggerService, { optional: true });
84
+ this.stylingDevTools = inject(OtterStylingDevtools);
85
+ this.options = inject(OTTER_STYLING_DEVTOOLS_OPTIONS, { optional: true }) ?? OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS;
86
+ this.sendMessage = sendOtterMessage;
87
+ this.destroyRef = inject(DestroyRef);
88
+ this.options = {
89
+ ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,
90
+ ...this.options
91
+ };
92
+ if (this.options.isActivatedOnBootstrap) this.activate();
93
+ }
94
+ async sendMetadata() {
95
+ const metadata = await this.stylingDevTools.getStylingMetadata(this.options.stylingMetadataPath);
96
+ const cssRules = getCSSRulesAppliedOnRoot();
97
+ const variables = Object.values(metadata.variables).map((variable) => ({
98
+ ...variable,
99
+ runtimeValue: getCSSVariableValue(`--${variable.name}`, cssRules)
100
+ }));
101
+ this.sendMessage("getStylingVariable", { variables });
102
+ }
103
+ handleReEmitRequest(only) {
104
+ if (!only || only.includes("getStylingVariable")) return this.sendMetadata();
105
+ }
106
+ handleEvents(message) {
107
+ this.logger?.debug("Message handling by the styling service", message);
108
+ switch (message.dataType) {
109
+ case "connect":
110
+ this.connectPlugin();
111
+ break;
112
+ case "requestMessages":
113
+ this.handleReEmitRequest(message.only);
114
+ break;
115
+ case "updateStylingVariables":
116
+ this.stylingDevTools.updateVariables(message.variables);
117
+ break;
118
+ case "resetStylingVariables":
119
+ this.stylingDevTools.resetStylingVariables();
120
+ break;
121
+ default: this.logger?.warn("Message ignored by the styling service", message);
122
+ }
123
+ }
124
+ connectPlugin() {
125
+ this.logger?.debug("Otter DevTools is plugged to styling service of the application");
126
+ }
127
+ activate() {
128
+ fromEvent(window, "message").pipe(takeUntilDestroyed(this.destroyRef), filterMessageContent(isStylingMessage)).subscribe((e) => this.handleEvents(e));
129
+ }
130
+ static {
131
+ this.ɵfac = i0.ɵɵngDeclareFactory({
132
+ minVersion: "12.0.0",
133
+ version: "22.2.3",
134
+ ngImport: i0,
135
+ type: StylingDevtoolsMessageService,
136
+ deps: [],
137
+ target: i0.ɵɵFactoryTarget.Injectable
138
+ });
139
+ }
140
+ static {
141
+ this.ɵprov = i0.ɵɵngDeclareInjectable({
142
+ minVersion: "12.0.0",
143
+ version: "22.2.3",
144
+ ngImport: i0,
145
+ type: StylingDevtoolsMessageService
146
+ });
147
+ }
148
+ };
149
+ i0.ɵɵngDeclareClassMetadata({
150
+ minVersion: "12.0.0",
151
+ version: "22.2.3",
152
+ ngImport: i0,
153
+ type: StylingDevtoolsMessageService,
154
+ decorators: [{ type: Injectable }],
155
+ ctorParameters: () => []
156
+ });
157
+ var StylingDevtoolsModule = class StylingDevtoolsModule {
158
+ static instrument(options) {
159
+ return {
160
+ ngModule: StylingDevtoolsModule,
161
+ providers: [
162
+ {
163
+ provide: OTTER_STYLING_DEVTOOLS_OPTIONS,
164
+ useValue: {
165
+ ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,
166
+ ...options
167
+ },
168
+ multi: false
169
+ },
170
+ StylingDevtoolsMessageService,
171
+ OtterStylingDevtools
172
+ ]
173
+ };
174
+ }
175
+ static {
176
+ this.ɵfac = i0.ɵɵngDeclareFactory({
177
+ minVersion: "12.0.0",
178
+ version: "22.2.3",
179
+ ngImport: i0,
180
+ type: StylingDevtoolsModule,
181
+ deps: [],
182
+ target: i0.ɵɵFactoryTarget.NgModule
183
+ });
184
+ }
185
+ static {
186
+ this.ɵmod = i0.ɵɵngDeclareNgModule({
187
+ minVersion: "14.0.0",
188
+ version: "22.2.3",
189
+ ngImport: i0,
190
+ type: StylingDevtoolsModule
191
+ });
192
+ }
193
+ static {
194
+ this.ɵinj = i0.ɵɵngDeclareInjector({
195
+ minVersion: "12.0.0",
196
+ version: "22.2.3",
197
+ ngImport: i0,
198
+ type: StylingDevtoolsModule,
199
+ providers: [
200
+ {
201
+ provide: OTTER_STYLING_DEVTOOLS_OPTIONS,
202
+ useValue: OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS
203
+ },
204
+ StylingDevtoolsMessageService,
205
+ OtterStylingDevtools
206
+ ]
207
+ });
208
+ }
209
+ };
210
+ i0.ɵɵngDeclareClassMetadata({
211
+ minVersion: "12.0.0",
212
+ version: "22.2.3",
213
+ ngImport: i0,
214
+ type: StylingDevtoolsModule,
215
+ decorators: [{
216
+ type: NgModule,
217
+ args: [{ providers: [
218
+ {
219
+ provide: OTTER_STYLING_DEVTOOLS_OPTIONS,
220
+ useValue: OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS
221
+ },
222
+ StylingDevtoolsMessageService,
223
+ OtterStylingDevtools
224
+ ] }]
225
+ }]
226
+ });
225
227
  function provideStylingDevtools(options) {
226
- return makeEnvironmentProviders([
227
- {
228
- provide: OTTER_STYLING_DEVTOOLS_OPTIONS,
229
- useValue: { ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, ...options }
230
- },
231
- StylingDevtoolsMessageService,
232
- OtterStylingDevtools
233
- ]);
228
+ return makeEnvironmentProviders([
229
+ {
230
+ provide: OTTER_STYLING_DEVTOOLS_OPTIONS,
231
+ useValue: {
232
+ ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,
233
+ ...options
234
+ }
235
+ },
236
+ StylingDevtoolsMessageService,
237
+ OtterStylingDevtools
238
+ ]);
234
239
  }
235
-
236
- /**
237
- * Generated bundle index. Do not edit.
238
- */
239
-
240
240
  export { OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, OTTER_STYLING_DEVTOOLS_OPTIONS, OtterStylingDevtools, PALETTE_TAG_NAME, StylingDevtoolsMessageService, StylingDevtoolsModule, THEME_TAG_NAME, provideStylingDevtools };
241
- //# sourceMappingURL=ama-styling-devkit.mjs.map
241
+
242
+ //# sourceMappingURL=ama-styling-devkit.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ama-styling-devkit.mjs","sources":["../../src/core/styling-devkit-interface.ts","../../src/core/styling-devtools.ts","../../src/core/styling-devtools-token.ts","../../src/core/styling-devtools-message-service.ts","../../src/core/styling-devtools-module.ts","../../src/ama-styling-devkit.ts"],"sourcesContent":["import type {\n ConnectContentMessage,\n DevtoolsCommonOptions,\n ItemIdentifier,\n MessageDataTypes,\n OtterMessageContent,\n RequestMessagesContentMessage,\n} from '@o3r/core';\n\n/** Style Metadata map */\nexport interface CssMetadata {\n /** Variables' dictionary */\n variables: {\n [name: string]: CssVariable;\n };\n}\n\n/** Metadata information added in the design token extension for Metadata extraction */\nexport interface DesignTokenMetadata {\n /** List of tags */\n tags?: string[];\n /** Description of the variable */\n label?: string;\n /** Name of a group of variables */\n category?: string;\n /** Component reference if the variable is linked to one */\n component?: ItemIdentifier;\n}\n\n/** CSS Variable possible types */\nexport type CssVariableType = 'string' | 'color';\n\n/** Metadata for a CSS Variable */\nexport interface CssVariable {\n /** Name of the variable */\n name: string;\n /** Default value of the variable */\n defaultValue: string;\n /** References of the variable */\n references?: CssVariable[];\n /** Tags of the variable */\n tags?: string[];\n /** Description of the variable */\n description?: string;\n /** Description of the variable */\n label?: string;\n /** Type of the variable */\n type?: CssVariableType;\n /** Name of a group of variables */\n category?: string;\n /** component reference if the variable is linked to one */\n component?: ItemIdentifier;\n}\n\n/**\n * Styling devtools service options\n */\nexport interface StylingDevtoolsServiceOptions extends DevtoolsCommonOptions {\n /**\n * Path to retrieve the styling metadata file\n */\n stylingMetadataPath: string;\n}\n\n/** Update styling variables */\nexport interface UpdateStylingVariablesContentMessage extends OtterMessageContent<'updateStylingVariables'> {\n /**\n * Dictionary of variable value to update\n * indexed by the variable name\n */\n variables: Record<string, string>;\n}\n\n/** Reset styling variables override */\nexport interface ResetStylingVariablesContentMessage extends OtterMessageContent<'resetStylingVariables'> {}\n\n/** Styling variable */\nexport type StylingVariable = CssVariable & { runtimeValue?: string };\n\n/** Get styling variables */\nexport interface GetStylingVariableContentMessage extends OtterMessageContent<'getStylingVariable'> {\n /** List of styling variables */\n variables: StylingVariable[];\n}\n\n/**\n * List of styling message contents\n */\ntype StylingMessageContents = UpdateStylingVariablesContentMessage\n | ResetStylingVariablesContentMessage\n | GetStylingVariableContentMessage;\n\n/** List of possible DataTypes for Styling messages */\nexport type StylingMessageDataTypes = MessageDataTypes<StylingMessageContents>;\n\n/** List of all messages for Styling purposes */\nexport type AvailableStylingMessageContents = StylingMessageContents\n | ConnectContentMessage\n | RequestMessagesContentMessage<StylingMessageDataTypes>;\n\n/** Tag to identify theme variable */\nexport const THEME_TAG_NAME = 'theme';\n\n/** Tag to identify palette variable */\nexport const PALETTE_TAG_NAME = 'palette';\n","import {\n DOCUMENT,\n inject,\n Injectable,\n} from '@angular/core';\nimport type {\n CssMetadata,\n} from './index';\n\n/**\n * Styling devtools service\n */\n@Injectable()\nexport class OtterStylingDevtools {\n private readonly document = inject(DOCUMENT);\n\n /**\n * Retrieve styling metadata\n * @param stylingMetadataPath\n */\n public async getStylingMetadata(stylingMetadataPath: string): Promise<CssMetadata> {\n return (await fetch(stylingMetadataPath)).json();\n }\n\n /**\n * Update styling variables\n * @param variables\n */\n public updateVariables(variables: Record<string, string>) {\n Object.entries(variables).forEach(([varName, value]) => this.document.querySelector('html')!.style.setProperty(`--${varName}`, value));\n }\n\n /**\n * Reset styling variables override\n */\n public resetStylingVariables() {\n const style = this.document.querySelector('html')!.style;\n style.cssText\n .split(/;(\\s+)?/)\n .reduce((acc: string[], str) => {\n const match = str?.match(/^(--.*):/);\n return match ? acc.concat(match[1]) : acc;\n }, [])\n .forEach((varName) => style.removeProperty(varName));\n }\n}\n","import {\n InjectionToken,\n} from '@angular/core';\nimport type {\n StylingDevtoolsServiceOptions,\n} from './styling-devkit-interface';\n\n/**\n * Default value for styling devtools\n */\nexport const OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS: Readonly<StylingDevtoolsServiceOptions> = {\n isActivatedOnBootstrap: false,\n stylingMetadataPath: './metadata/styling.metadata.json'\n} as const;\n\n/**\n * Token for styling devtools\n */\nexport const OTTER_STYLING_DEVTOOLS_OPTIONS = new InjectionToken<StylingDevtoolsServiceOptions>('Otter Styling Devtools options');\n","/* eslint-disable no-console -- this is the purpose of this service */\nimport {\n DestroyRef,\n inject,\n Injectable,\n} from '@angular/core';\nimport {\n takeUntilDestroyed,\n} from '@angular/core/rxjs-interop';\nimport {\n filterMessageContent,\n sendOtterMessage,\n} from '@o3r/core';\nimport {\n LoggerService,\n} from '@o3r/logger';\nimport {\n fromEvent,\n} from 'rxjs';\nimport {\n AvailableStylingMessageContents,\n StylingDevtoolsServiceOptions,\n StylingMessageDataTypes,\n} from './styling-devkit-interface';\nimport {\n OtterStylingDevtools,\n} from './styling-devtools';\nimport {\n OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,\n OTTER_STYLING_DEVTOOLS_OPTIONS,\n} from './styling-devtools-token';\n\nconst isStylingMessage = (message: any): message is AvailableStylingMessageContents => {\n return message && (\n message.dataType === 'updateStylingVariables'\n || message.dataType === 'resetStylingVariables'\n || message.dataType === 'getStylingVariable'\n || message.dataType === 'requestMessages'\n || message.dataType === 'connect'\n );\n};\n\nconst getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets)\n .reverse()\n .reduce((acc: CSSStyleRule[], styleSheet) => {\n let rules;\n try {\n rules = styleSheet.cssRules || styleSheet.rules;\n } catch (err) {\n console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to network issues, please check:\n- network connectivity\n- CORS setup\n- granted access to the stylesheet`, err);\n }\n\n return acc.concat(\n Array.from(rules || [])\n .reverse()\n .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && /\\b:root\\b/.test(rule.selectorText))\n );\n }, []);\n\nconst getCSSVariableValueInCSSStyleDeclaration = (variableName: string, style: CSSStyleDeclaration) =>\n style.getPropertyValue(variableName).trim();\n\nconst getCSSVariableValue = (variableName: string, cssRules: CSSStyleRule[]) => {\n const inlineValue = getCSSVariableValueInCSSStyleDeclaration(variableName, document.querySelector('html')!.style);\n if (inlineValue) {\n return inlineValue;\n }\n\n for (const rule of cssRules) {\n const ruleValue = getCSSVariableValueInCSSStyleDeclaration(variableName, rule.style);\n if (ruleValue) {\n return ruleValue;\n }\n }\n};\n\n/**\n * Service to handle communication between application and chrome extension for styling\n */\n@Injectable()\nexport class StylingDevtoolsMessageService {\n private readonly logger = inject(LoggerService, { optional: true });\n private readonly stylingDevTools = inject(OtterStylingDevtools);\n private readonly options = inject<StylingDevtoolsServiceOptions>(OTTER_STYLING_DEVTOOLS_OPTIONS, { optional: true }) ?? OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS;\n\n private readonly sendMessage = sendOtterMessage<AvailableStylingMessageContents>;\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n this.options = {\n ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,\n ...this.options\n };\n if (this.options.isActivatedOnBootstrap) {\n this.activate();\n }\n }\n\n private async sendMetadata() {\n const metadata = await this.stylingDevTools.getStylingMetadata(this.options.stylingMetadataPath);\n const cssRules = getCSSRulesAppliedOnRoot();\n const variables = Object.values(metadata.variables).map((variable) => ({\n ...variable,\n runtimeValue: getCSSVariableValue(`--${variable.name}`, cssRules)\n }));\n this.sendMessage('getStylingVariable', { variables });\n }\n\n /**\n * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension\n * @param only restricted list of messages to re-send\n */\n private handleReEmitRequest(only?: StylingMessageDataTypes[]) {\n if (!only || only.includes('getStylingVariable')) {\n return this.sendMetadata();\n }\n }\n\n /**\n * Function to handle the incoming messages from Otter Chrome DevTools extension\n * @param message Message coming from the Otter Chrome DevTools extension\n */\n private handleEvents(message: AvailableStylingMessageContents) {\n this.logger?.debug('Message handling by the styling service', message);\n\n switch (message.dataType) {\n case 'connect': {\n this.connectPlugin();\n break;\n }\n case 'requestMessages': {\n void this.handleReEmitRequest(message.only);\n break;\n }\n case 'updateStylingVariables': {\n this.stylingDevTools.updateVariables(message.variables);\n break;\n }\n case 'resetStylingVariables': {\n this.stylingDevTools.resetStylingVariables();\n break;\n }\n default: {\n this.logger?.warn('Message ignored by the styling service', message);\n }\n }\n }\n\n /**\n * Function to connect the plugin to the Otter Chrome DevTools extension\n */\n private connectPlugin() {\n this.logger?.debug('Otter DevTools is plugged to styling service of the application');\n }\n\n /** @inheritDoc */\n public activate() {\n fromEvent(window, 'message').pipe(\n takeUntilDestroyed(this.destroyRef),\n filterMessageContent(isStylingMessage)\n ).subscribe((e) => this.handleEvents(e));\n }\n}\n","import {\n EnvironmentProviders,\n makeEnvironmentProviders,\n ModuleWithProviders,\n NgModule,\n} from '@angular/core';\nimport type {\n StylingDevtoolsServiceOptions,\n} from './styling-devkit-interface';\nimport {\n OtterStylingDevtools,\n} from './styling-devtools';\nimport {\n StylingDevtoolsMessageService,\n} from './styling-devtools-message-service';\nimport {\n OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,\n OTTER_STYLING_DEVTOOLS_OPTIONS,\n} from './styling-devtools-token';\n\n/**\n * @deprecated Will be removed in v16. Use {@link provideStylingDevtools} instead.\n */\n@NgModule({\n providers: [\n { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS },\n StylingDevtoolsMessageService,\n OtterStylingDevtools\n ]\n})\nexport class StylingDevtoolsModule {\n /**\n * Initialize Otter Devtools\n * @param options\n */\n public static instrument(options: Partial<StylingDevtoolsServiceOptions>): ModuleWithProviders<StylingDevtoolsModule> {\n return {\n ngModule: StylingDevtoolsModule,\n providers: [\n { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: { ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, ...options }, multi: false },\n StylingDevtoolsMessageService,\n OtterStylingDevtools\n ]\n };\n }\n}\n\n/**\n * Provide styling devtools functionality for the application.\n * @param options Optional partial styling devtools configuration to override defaults.\n */\nexport function provideStylingDevtools(options?: Partial<StylingDevtoolsServiceOptions>): EnvironmentProviders {\n return makeEnvironmentProviders([\n {\n provide: OTTER_STYLING_DEVTOOLS_OPTIONS,\n useValue: { ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, ...options }\n },\n StylingDevtoolsMessageService,\n OtterStylingDevtools\n ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ama-styling-devkit.mjs","names":[],"sources":["../../src/core/styling-devkit-interface.ts","../../src/core/styling-devtools.ts","../../src/core/styling-devtools-token.ts","../../src/core/styling-devtools-message-service.ts","../../src/core/styling-devtools-module.ts"],"sourcesContent":["import type {\n ConnectContentMessage,\n DevtoolsCommonOptions,\n ItemIdentifier,\n MessageDataTypes,\n OtterMessageContent,\n RequestMessagesContentMessage,\n} from '@o3r/core';\n\n/** Style Metadata map */\nexport interface CssMetadata {\n /** Variables' dictionary */\n variables: {\n [name: string]: CssVariable;\n };\n}\n\n/** Metadata information added in the design token extension for Metadata extraction */\nexport interface DesignTokenMetadata {\n /** List of tags */\n tags?: string[];\n /** Description of the variable */\n label?: string;\n /** Name of a group of variables */\n category?: string;\n /** Component reference if the variable is linked to one */\n component?: ItemIdentifier;\n}\n\n/** CSS Variable possible types */\nexport type CssVariableType = 'string' | 'color';\n\n/** Metadata for a CSS Variable */\nexport interface CssVariable {\n /** Name of the variable */\n name: string;\n /** Default value of the variable */\n defaultValue: string;\n /** References of the variable */\n references?: CssVariable[];\n /** Tags of the variable */\n tags?: string[];\n /** Description of the variable */\n description?: string;\n /** Description of the variable */\n label?: string;\n /** Type of the variable */\n type?: CssVariableType;\n /** Name of a group of variables */\n category?: string;\n /** component reference if the variable is linked to one */\n component?: ItemIdentifier;\n}\n\n/**\n * Styling devtools service options\n */\nexport interface StylingDevtoolsServiceOptions extends DevtoolsCommonOptions {\n /**\n * Path to retrieve the styling metadata file\n */\n stylingMetadataPath: string;\n}\n\n/** Update styling variables */\nexport interface UpdateStylingVariablesContentMessage extends OtterMessageContent<'updateStylingVariables'> {\n /**\n * Dictionary of variable value to update\n * indexed by the variable name\n */\n variables: Record<string, string>;\n}\n\n/** Reset styling variables override */\nexport interface ResetStylingVariablesContentMessage extends OtterMessageContent<'resetStylingVariables'> {}\n\n/** Styling variable */\nexport type StylingVariable = CssVariable & { runtimeValue?: string };\n\n/** Get styling variables */\nexport interface GetStylingVariableContentMessage extends OtterMessageContent<'getStylingVariable'> {\n /** List of styling variables */\n variables: StylingVariable[];\n}\n\n/**\n * List of styling message contents\n */\ntype StylingMessageContents = UpdateStylingVariablesContentMessage\n | ResetStylingVariablesContentMessage\n | GetStylingVariableContentMessage;\n\n/** List of possible DataTypes for Styling messages */\nexport type StylingMessageDataTypes = MessageDataTypes<StylingMessageContents>;\n\n/** List of all messages for Styling purposes */\nexport type AvailableStylingMessageContents = StylingMessageContents\n | ConnectContentMessage\n | RequestMessagesContentMessage<StylingMessageDataTypes>;\n\n/** Tag to identify theme variable */\nexport const THEME_TAG_NAME = 'theme';\n\n/** Tag to identify palette variable */\nexport const PALETTE_TAG_NAME = 'palette';\n","import {\n DOCUMENT,\n inject,\n Injectable,\n} from '@angular/core';\nimport type {\n CssMetadata,\n} from './index';\n\n/**\n * Styling devtools service\n */\n@Injectable()\nexport class OtterStylingDevtools {\n private readonly document = inject(DOCUMENT);\n\n /**\n * Retrieve styling metadata\n * @param stylingMetadataPath\n */\n public async getStylingMetadata(stylingMetadataPath: string): Promise<CssMetadata> {\n return (await fetch(stylingMetadataPath)).json();\n }\n\n /**\n * Update styling variables\n * @param variables\n */\n public updateVariables(variables: Record<string, string>) {\n Object.entries(variables).forEach(([varName, value]) => this.document.querySelector('html')!.style.setProperty(`--${varName}`, value));\n }\n\n /**\n * Reset styling variables override\n */\n public resetStylingVariables() {\n const style = this.document.querySelector('html')!.style;\n style.cssText\n .split(/;(\\s+)?/)\n .reduce((acc: string[], str) => {\n const match = str?.match(/^(--.*):/);\n return match ? acc.concat(match[1]) : acc;\n }, [])\n .forEach((varName) => style.removeProperty(varName));\n }\n}\n","import {\n InjectionToken,\n} from '@angular/core';\nimport type {\n StylingDevtoolsServiceOptions,\n} from './styling-devkit-interface';\n\n/**\n * Default value for styling devtools\n */\nexport const OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS: Readonly<StylingDevtoolsServiceOptions> = {\n isActivatedOnBootstrap: false,\n stylingMetadataPath: './metadata/styling.metadata.json'\n} as const;\n\n/**\n * Token for styling devtools\n */\nexport const OTTER_STYLING_DEVTOOLS_OPTIONS = new InjectionToken<StylingDevtoolsServiceOptions>('Otter Styling Devtools options');\n","/* eslint-disable no-console -- this is the purpose of this service */\nimport {\n DestroyRef,\n inject,\n Injectable,\n} from '@angular/core';\nimport {\n takeUntilDestroyed,\n} from '@angular/core/rxjs-interop';\nimport {\n filterMessageContent,\n sendOtterMessage,\n} from '@o3r/core';\nimport {\n LoggerService,\n} from '@o3r/logger';\nimport {\n fromEvent,\n} from 'rxjs';\nimport {\n AvailableStylingMessageContents,\n StylingDevtoolsServiceOptions,\n StylingMessageDataTypes,\n} from './styling-devkit-interface';\nimport {\n OtterStylingDevtools,\n} from './styling-devtools';\nimport {\n OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,\n OTTER_STYLING_DEVTOOLS_OPTIONS,\n} from './styling-devtools-token';\n\nconst isStylingMessage = (message: any): message is AvailableStylingMessageContents => {\n return message && (\n message.dataType === 'updateStylingVariables'\n || message.dataType === 'resetStylingVariables'\n || message.dataType === 'getStylingVariable'\n || message.dataType === 'requestMessages'\n || message.dataType === 'connect'\n );\n};\n\nconst getCSSRulesAppliedOnRoot = () => Array.from(document.styleSheets)\n .reverse()\n .reduce((acc: CSSStyleRule[], styleSheet) => {\n let rules;\n try {\n rules = styleSheet.cssRules || styleSheet.rules;\n } catch (err) {\n console.debug(`Could not access to stylesheet ${styleSheet.href}. This might be due to network issues, please check:\n- network connectivity\n- CORS setup\n- granted access to the stylesheet`, err);\n }\n\n return acc.concat(\n Array.from(rules || [])\n .reverse()\n .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && /\\b:root\\b/.test(rule.selectorText))\n );\n }, []);\n\nconst getCSSVariableValueInCSSStyleDeclaration = (variableName: string, style: CSSStyleDeclaration) =>\n style.getPropertyValue(variableName).trim();\n\nconst getCSSVariableValue = (variableName: string, cssRules: CSSStyleRule[]) => {\n const inlineValue = getCSSVariableValueInCSSStyleDeclaration(variableName, document.querySelector('html')!.style);\n if (inlineValue) {\n return inlineValue;\n }\n\n for (const rule of cssRules) {\n const ruleValue = getCSSVariableValueInCSSStyleDeclaration(variableName, rule.style);\n if (ruleValue) {\n return ruleValue;\n }\n }\n};\n\n/**\n * Service to handle communication between application and chrome extension for styling\n */\n@Injectable()\nexport class StylingDevtoolsMessageService {\n private readonly logger = inject(LoggerService, { optional: true });\n private readonly stylingDevTools = inject(OtterStylingDevtools);\n private readonly options = inject<StylingDevtoolsServiceOptions>(OTTER_STYLING_DEVTOOLS_OPTIONS, { optional: true }) ?? OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS;\n\n private readonly sendMessage = sendOtterMessage<AvailableStylingMessageContents>;\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n this.options = {\n ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,\n ...this.options\n };\n if (this.options.isActivatedOnBootstrap) {\n this.activate();\n }\n }\n\n private async sendMetadata() {\n const metadata = await this.stylingDevTools.getStylingMetadata(this.options.stylingMetadataPath);\n const cssRules = getCSSRulesAppliedOnRoot();\n const variables = Object.values(metadata.variables).map((variable) => ({\n ...variable,\n runtimeValue: getCSSVariableValue(`--${variable.name}`, cssRules)\n }));\n this.sendMessage('getStylingVariable', { variables });\n }\n\n /**\n * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension\n * @param only restricted list of messages to re-send\n */\n private handleReEmitRequest(only?: StylingMessageDataTypes[]) {\n if (!only || only.includes('getStylingVariable')) {\n return this.sendMetadata();\n }\n }\n\n /**\n * Function to handle the incoming messages from Otter Chrome DevTools extension\n * @param message Message coming from the Otter Chrome DevTools extension\n */\n private handleEvents(message: AvailableStylingMessageContents) {\n this.logger?.debug('Message handling by the styling service', message);\n\n switch (message.dataType) {\n case 'connect': {\n this.connectPlugin();\n break;\n }\n case 'requestMessages': {\n void this.handleReEmitRequest(message.only);\n break;\n }\n case 'updateStylingVariables': {\n this.stylingDevTools.updateVariables(message.variables);\n break;\n }\n case 'resetStylingVariables': {\n this.stylingDevTools.resetStylingVariables();\n break;\n }\n default: {\n this.logger?.warn('Message ignored by the styling service', message);\n }\n }\n }\n\n /**\n * Function to connect the plugin to the Otter Chrome DevTools extension\n */\n private connectPlugin() {\n this.logger?.debug('Otter DevTools is plugged to styling service of the application');\n }\n\n /** @inheritDoc */\n public activate() {\n fromEvent(window, 'message').pipe(\n takeUntilDestroyed(this.destroyRef),\n filterMessageContent(isStylingMessage)\n ).subscribe((e) => this.handleEvents(e));\n }\n}\n","import {\n EnvironmentProviders,\n makeEnvironmentProviders,\n ModuleWithProviders,\n NgModule,\n} from '@angular/core';\nimport type {\n StylingDevtoolsServiceOptions,\n} from './styling-devkit-interface';\nimport {\n OtterStylingDevtools,\n} from './styling-devtools';\nimport {\n StylingDevtoolsMessageService,\n} from './styling-devtools-message-service';\nimport {\n OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS,\n OTTER_STYLING_DEVTOOLS_OPTIONS,\n} from './styling-devtools-token';\n\n/**\n * @deprecated Will be removed in v16. Use {@link provideStylingDevtools} instead.\n */\n@NgModule({\n providers: [\n { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS },\n StylingDevtoolsMessageService,\n OtterStylingDevtools\n ]\n})\nexport class StylingDevtoolsModule {\n /**\n * Initialize Otter Devtools\n * @param options\n */\n public static instrument(options: Partial<StylingDevtoolsServiceOptions>): ModuleWithProviders<StylingDevtoolsModule> {\n return {\n ngModule: StylingDevtoolsModule,\n providers: [\n { provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: { ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, ...options }, multi: false },\n StylingDevtoolsMessageService,\n OtterStylingDevtools\n ]\n };\n }\n}\n\n/**\n * Provide styling devtools functionality for the application.\n * @param options Optional partial styling devtools configuration to override defaults.\n */\nexport function provideStylingDevtools(options?: Partial<StylingDevtoolsServiceOptions>): EnvironmentProviders {\n return makeEnvironmentProviders([\n {\n provide: OTTER_STYLING_DEVTOOLS_OPTIONS,\n useValue: { ...OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, ...options }\n },\n StylingDevtoolsMessageService,\n OtterStylingDevtools\n ]);\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ama-styling/devkit",
3
- "version": "15.3.0-prerelease.15",
3
+ "version": "15.3.0-prerelease.17",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -18,10 +18,10 @@
18
18
  "@angular-devkit/schematics": "^22.0.0",
19
19
  "@angular/common": "^22.0.0",
20
20
  "@angular/core": "^22.0.0",
21
- "@o3r/core": "~15.3.0-prerelease.15",
22
- "@o3r/logger": "~15.3.0-prerelease.15",
23
- "@o3r/schematics": "~15.3.0-prerelease.15",
24
- "@o3r/testing": "~15.3.0-prerelease.15",
21
+ "@o3r/core": "~15.3.0-prerelease.17",
22
+ "@o3r/logger": "~15.3.0-prerelease.17",
23
+ "@o3r/schematics": "~15.3.0-prerelease.17",
24
+ "@o3r/testing": "~15.3.0-prerelease.17",
25
25
  "@schematics/angular": "^22.0.0",
26
26
  "rxjs": "^7.8.1",
27
27
  "type-fest": "^5.3.1",
@@ -48,7 +48,7 @@
48
48
  }
49
49
  },
50
50
  "dependencies": {
51
- "@o3r/schematics": "~15.3.0-prerelease.15",
51
+ "@o3r/schematics": "~15.3.0-prerelease.17",
52
52
  "tslib": "^2.6.2"
53
53
  },
54
54
  "engines": {
@@ -1,172 +1,164 @@
1
- import { OtterMessageContent, ItemIdentifier, ConnectContentMessage, RequestMessagesContentMessage, MessageDataTypes, DevtoolsCommonOptions } from '@o3r/core';
2
- import * as i0 from '@angular/core';
3
- import { ModuleWithProviders, EnvironmentProviders, InjectionToken } from '@angular/core';
4
-
1
+ import { ConnectContentMessage, DevtoolsCommonOptions, ItemIdentifier, MessageDataTypes, OtterMessageContent, RequestMessagesContentMessage } from "@o3r/core";
2
+ import * as i0 from "@angular/core";
3
+ import { EnvironmentProviders, InjectionToken, ModuleWithProviders } from "@angular/core";
5
4
  /** Style Metadata map */
6
- interface CssMetadata {
7
- /** Variables' dictionary */
8
- variables: {
9
- [name: string]: CssVariable;
10
- };
5
+ export interface CssMetadata {
6
+ /** Variables' dictionary */
7
+ variables: {
8
+ [name: string]: CssVariable;
9
+ };
11
10
  }
12
11
  /** Metadata information added in the design token extension for Metadata extraction */
13
- interface DesignTokenMetadata {
14
- /** List of tags */
15
- tags?: string[];
16
- /** Description of the variable */
17
- label?: string;
18
- /** Name of a group of variables */
19
- category?: string;
20
- /** Component reference if the variable is linked to one */
21
- component?: ItemIdentifier;
12
+ export interface DesignTokenMetadata {
13
+ /** List of tags */
14
+ tags?: string[];
15
+ /** Description of the variable */
16
+ label?: string;
17
+ /** Name of a group of variables */
18
+ category?: string;
19
+ /** Component reference if the variable is linked to one */
20
+ component?: ItemIdentifier;
22
21
  }
23
22
  /** CSS Variable possible types */
24
- type CssVariableType = 'string' | 'color';
23
+ export type CssVariableType = 'string' | 'color';
25
24
  /** Metadata for a CSS Variable */
26
- interface CssVariable {
27
- /** Name of the variable */
28
- name: string;
29
- /** Default value of the variable */
30
- defaultValue: string;
31
- /** References of the variable */
32
- references?: CssVariable[];
33
- /** Tags of the variable */
34
- tags?: string[];
35
- /** Description of the variable */
36
- description?: string;
37
- /** Description of the variable */
38
- label?: string;
39
- /** Type of the variable */
40
- type?: CssVariableType;
41
- /** Name of a group of variables */
42
- category?: string;
43
- /** component reference if the variable is linked to one */
44
- component?: ItemIdentifier;
25
+ export interface CssVariable {
26
+ /** Name of the variable */
27
+ name: string;
28
+ /** Default value of the variable */
29
+ defaultValue: string;
30
+ /** References of the variable */
31
+ references?: CssVariable[];
32
+ /** Tags of the variable */
33
+ tags?: string[];
34
+ /** Description of the variable */
35
+ description?: string;
36
+ /** Description of the variable */
37
+ label?: string;
38
+ /** Type of the variable */
39
+ type?: CssVariableType;
40
+ /** Name of a group of variables */
41
+ category?: string;
42
+ /** component reference if the variable is linked to one */
43
+ component?: ItemIdentifier;
45
44
  }
46
45
  /**
47
46
  * Styling devtools service options
48
47
  */
49
- interface StylingDevtoolsServiceOptions extends DevtoolsCommonOptions {
50
- /**
51
- * Path to retrieve the styling metadata file
52
- */
53
- stylingMetadataPath: string;
48
+ export interface StylingDevtoolsServiceOptions extends DevtoolsCommonOptions {
49
+ /**
50
+ * Path to retrieve the styling metadata file
51
+ */
52
+ stylingMetadataPath: string;
54
53
  }
55
54
  /** Update styling variables */
56
- interface UpdateStylingVariablesContentMessage extends OtterMessageContent<'updateStylingVariables'> {
57
- /**
58
- * Dictionary of variable value to update
59
- * indexed by the variable name
60
- */
61
- variables: Record<string, string>;
55
+ export interface UpdateStylingVariablesContentMessage extends OtterMessageContent<'updateStylingVariables'> {
56
+ /**
57
+ * Dictionary of variable value to update
58
+ * indexed by the variable name
59
+ */
60
+ variables: Record<string, string>;
62
61
  }
63
62
  /** Reset styling variables override */
64
- interface ResetStylingVariablesContentMessage extends OtterMessageContent<'resetStylingVariables'> {
65
- }
63
+ export interface ResetStylingVariablesContentMessage extends OtterMessageContent<'resetStylingVariables'> {}
66
64
  /** Styling variable */
67
- type StylingVariable = CssVariable & {
68
- runtimeValue?: string;
65
+ export type StylingVariable = CssVariable & {
66
+ runtimeValue?: string;
69
67
  };
70
68
  /** Get styling variables */
71
- interface GetStylingVariableContentMessage extends OtterMessageContent<'getStylingVariable'> {
72
- /** List of styling variables */
73
- variables: StylingVariable[];
69
+ export interface GetStylingVariableContentMessage extends OtterMessageContent<'getStylingVariable'> {
70
+ /** List of styling variables */
71
+ variables: StylingVariable[];
74
72
  }
75
73
  /**
76
74
  * List of styling message contents
77
75
  */
78
76
  type StylingMessageContents = UpdateStylingVariablesContentMessage | ResetStylingVariablesContentMessage | GetStylingVariableContentMessage;
79
77
  /** List of possible DataTypes for Styling messages */
80
- type StylingMessageDataTypes = MessageDataTypes<StylingMessageContents>;
78
+ export type StylingMessageDataTypes = MessageDataTypes<StylingMessageContents>;
81
79
  /** List of all messages for Styling purposes */
82
- type AvailableStylingMessageContents = StylingMessageContents | ConnectContentMessage | RequestMessagesContentMessage<StylingMessageDataTypes>;
80
+ export type AvailableStylingMessageContents = StylingMessageContents | ConnectContentMessage | RequestMessagesContentMessage<StylingMessageDataTypes>;
83
81
  /** Tag to identify theme variable */
84
- declare const THEME_TAG_NAME = "theme";
82
+ export declare const THEME_TAG_NAME = "theme";
85
83
  /** Tag to identify palette variable */
86
- declare const PALETTE_TAG_NAME = "palette";
87
-
84
+ export declare const PALETTE_TAG_NAME = "palette";
88
85
  /**
89
86
  * Styling devtools service
90
87
  */
91
- declare class OtterStylingDevtools {
92
- private readonly document;
93
- /**
94
- * Retrieve styling metadata
95
- * @param stylingMetadataPath
96
- */
97
- getStylingMetadata(stylingMetadataPath: string): Promise<CssMetadata>;
98
- /**
99
- * Update styling variables
100
- * @param variables
101
- */
102
- updateVariables(variables: Record<string, string>): void;
103
- /**
104
- * Reset styling variables override
105
- */
106
- resetStylingVariables(): void;
107
- static ɵfac: i0.ɵɵFactoryDeclaration<OtterStylingDevtools, never>;
108
- static ɵprov: i0.ɵɵInjectableDeclaration<any>;
88
+ export declare class OtterStylingDevtools {
89
+ private readonly document;
90
+ /**
91
+ * Retrieve styling metadata
92
+ * @param stylingMetadataPath
93
+ */
94
+ getStylingMetadata(stylingMetadataPath: string): Promise<CssMetadata>;
95
+ /**
96
+ * Update styling variables
97
+ * @param variables
98
+ */
99
+ updateVariables(variables: Record<string, string>): void;
100
+ /**
101
+ * Reset styling variables override
102
+ */
103
+ resetStylingVariables(): void;
104
+ static ɵfac: i0.ɵɵFactoryDeclaration<OtterStylingDevtools, never>;
105
+ static ɵprov: i0.ɵɵInjectableDeclaration<any>;
109
106
  }
110
-
111
107
  /**
112
108
  * Service to handle communication between application and chrome extension for styling
113
109
  */
114
- declare class StylingDevtoolsMessageService {
115
- private readonly logger;
116
- private readonly stylingDevTools;
117
- private readonly options;
118
- private readonly sendMessage;
119
- private readonly destroyRef;
120
- constructor();
121
- private sendMetadata;
122
- /**
123
- * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension
124
- * @param only restricted list of messages to re-send
125
- */
126
- private handleReEmitRequest;
127
- /**
128
- * Function to handle the incoming messages from Otter Chrome DevTools extension
129
- * @param message Message coming from the Otter Chrome DevTools extension
130
- */
131
- private handleEvents;
132
- /**
133
- * Function to connect the plugin to the Otter Chrome DevTools extension
134
- */
135
- private connectPlugin;
136
- /** @inheritDoc */
137
- activate(): void;
138
- static ɵfac: i0.ɵɵFactoryDeclaration<StylingDevtoolsMessageService, never>;
139
- static ɵprov: i0.ɵɵInjectableDeclaration<any>;
110
+ export declare class StylingDevtoolsMessageService {
111
+ private readonly logger;
112
+ private readonly stylingDevTools;
113
+ private readonly options;
114
+ private readonly sendMessage;
115
+ private readonly destroyRef;
116
+ constructor();
117
+ private sendMetadata;
118
+ /**
119
+ * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension
120
+ * @param only restricted list of messages to re-send
121
+ */
122
+ private handleReEmitRequest;
123
+ /**
124
+ * Function to handle the incoming messages from Otter Chrome DevTools extension
125
+ * @param message Message coming from the Otter Chrome DevTools extension
126
+ */
127
+ private handleEvents;
128
+ /**
129
+ * Function to connect the plugin to the Otter Chrome DevTools extension
130
+ */
131
+ private connectPlugin;
132
+ /** @inheritDoc */
133
+ activate(): void;
134
+ static ɵfac: i0.ɵɵFactoryDeclaration<StylingDevtoolsMessageService, never>;
135
+ static ɵprov: i0.ɵɵInjectableDeclaration<any>;
140
136
  }
141
-
142
137
  /**
143
138
  * @deprecated Will be removed in v16. Use {@link provideStylingDevtools} instead.
144
139
  */
145
- declare class StylingDevtoolsModule {
146
- /**
147
- * Initialize Otter Devtools
148
- * @param options
149
- */
150
- static instrument(options: Partial<StylingDevtoolsServiceOptions>): ModuleWithProviders<StylingDevtoolsModule>;
151
- static ɵfac: i0.ɵɵFactoryDeclaration<StylingDevtoolsModule, never>;
152
- static ɵmod: i0.ɵɵNgModuleDeclaration<StylingDevtoolsModule, never, never, never>;
153
- static ɵinj: i0.ɵɵInjectorDeclaration<StylingDevtoolsModule>;
140
+ export declare class StylingDevtoolsModule {
141
+ /**
142
+ * Initialize Otter Devtools
143
+ * @param options
144
+ */
145
+ static instrument(options: Partial<StylingDevtoolsServiceOptions>): ModuleWithProviders<StylingDevtoolsModule>;
146
+ static ɵfac: i0.ɵɵFactoryDeclaration<StylingDevtoolsModule, never>;
147
+ static ɵmod: i0.ɵɵNgModuleDeclaration<StylingDevtoolsModule, never, never, never>;
148
+ static ɵinj: i0.ɵɵInjectorDeclaration<StylingDevtoolsModule>;
154
149
  }
155
150
  /**
156
151
  * Provide styling devtools functionality for the application.
157
152
  * @param options Optional partial styling devtools configuration to override defaults.
158
153
  */
159
- declare function provideStylingDevtools(options?: Partial<StylingDevtoolsServiceOptions>): EnvironmentProviders;
160
-
154
+ export declare function provideStylingDevtools(options?: Partial<StylingDevtoolsServiceOptions>): EnvironmentProviders;
161
155
  /**
162
156
  * Default value for styling devtools
163
157
  */
164
- declare const OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS: Readonly<StylingDevtoolsServiceOptions>;
158
+ export declare const OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS: Readonly<StylingDevtoolsServiceOptions>;
165
159
  /**
166
160
  * Token for styling devtools
167
161
  */
168
- declare const OTTER_STYLING_DEVTOOLS_OPTIONS: InjectionToken<StylingDevtoolsServiceOptions>;
169
-
170
- export { OTTER_STYLING_DEVTOOLS_DEFAULT_OPTIONS, OTTER_STYLING_DEVTOOLS_OPTIONS, OtterStylingDevtools, PALETTE_TAG_NAME, StylingDevtoolsMessageService, StylingDevtoolsModule, THEME_TAG_NAME, provideStylingDevtools };
171
- export type { AvailableStylingMessageContents, CssMetadata, CssVariable, CssVariableType, DesignTokenMetadata, GetStylingVariableContentMessage, ResetStylingVariablesContentMessage, StylingDevtoolsServiceOptions, StylingMessageDataTypes, StylingVariable, UpdateStylingVariablesContentMessage };
172
- //# sourceMappingURL=ama-styling-devkit.d.ts.map
162
+ export declare const OTTER_STYLING_DEVTOOLS_OPTIONS: InjectionToken<StylingDevtoolsServiceOptions>;
163
+ export {};
164
+ //# sourceMappingURL=ama-styling-devkit.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ama-styling-devkit.d.ts","sources":["../../src/core/styling-devkit-interface.ts","../../src/core/styling-devtools.ts","../../src/core/styling-devtools-message-service.ts","../../src/core/styling-devtools-module.ts","../../src/core/styling-devtools-token.ts"],"mappings":";;;;AASA;UACiB,WAAW;;AAE1B;AACE,wBAAgB,WAAW;;AAE9B;AAED;UACiB,mBAAmB;;AAElC;;;;;;gBAMY,cAAc;AAC3B;AAED;KACY,eAAe;AAE3B;UACiB,WAAW;;;;;;AAM1B,iBAAa,WAAW;;AAExB;;;;;;WAMO,eAAe;;;;gBAIV,cAAc;AAC3B;AAED;;AAEG;AACG,UAAW,6BAA8B,SAAQ,qBAAqB;AAC1E;;AAEG;;AAEJ;AAED;UACiB,oCAAqC,SAAQ,mBAAmB;AAC/E;;;AAGG;AACH,eAAW,MAAM;AAClB;AAED;UACiB,mCAAoC,SAAQ,mBAAmB;AAA4B;AAE5G;AACM,KAAM,eAAe,GAAG,WAAW;;;AAEzC;UACiB,gCAAiC,SAAQ,mBAAmB;;eAEhE,eAAe;AAC3B;AAED;;AAEG;AACH,KAAK,sBAAsB,GAAG,oCAAoC,GAC9D,mCAAmC,GACnC,gCAAgC;AAEpC;KACY,uBAAuB,GAAG,gBAAgB,CAAC,sBAAsB;AAE7E;AACM,KAAM,+BAA+B,GAAG,sBAAsB,GAChE,qBAAqB,GACrB,6BAA6B,CAAC,uBAAuB;AAEzD;AACA,cAAa,cAAc;AAE3B;AACA,cAAa,gBAAgB;;AC/F7B;;AAEG;AACH,cACa,oBAAoB;AAC/B;AAEA;;;AAGG;qDAC2D,OAAO,CAAC,WAAW;AAIjF;;;AAGG;+BAC+B,MAAM;AAIxC;;AAEG;;yCArBQ,oBAAoB;;AAgChC;;ACkCD;;AAEG;AACH,cACa,6BAA6B;AACxC;AACA;AACA;AAEA;AACA;;;AAsBA;;;AAGG;AACH;AAMA;;;AAGG;AACH;AA0BA;;AAEG;AACH;;;yCAvEW,6BAA6B;;AAkFzC;;ACjJD;;AAEG;AACH,cAOa,qBAAqB;AAChC;;;AAGG;+BAC+B,OAAO,CAAC,6BAA6B,IAAI,mBAAmB,CAAC,qBAAqB;yCALzG,qBAAqB;0CAArB,qBAAqB;0CAArB,qBAAqB;AAejC;AAED;;;AAGG;AACH,iBAAgB,sBAAsB,WAAW,OAAO,CAAC,6BAA6B,IAAI,oBAAoB;;AC5C9G;;AAEG;AACH,cAAa,sCAAsC,EAAE,QAAQ,CAAC,6BAA6B;AAK3F;;AAEG;AACH,cAAa,8BAA8B,EAAA,cAAA,CAAA,6BAAA;;","names":[]}
1
+ {"version":3,"file":"ama-styling-devkit.d.ts","names":[],"sources":["../../src/core/styling-devkit-interface.ts","../../src/core/styling-devtools.ts","../../src/core/styling-devtools-message-service.ts","../../src/core/styling-devtools-module.ts","../../src/core/styling-devtools-token.ts"],"mappings":";;;;iBAUiB;;EAEf;KACG,eAAe;;;;iBAKH;;EAEf;;EAEA;;EAEA;;EAEA,YAAY;;;YAIF;;iBAGK;;EAEf;;EAEA;;EAEA,aAAa;;EAEb;;EAEA;;EAEA;;EAEA,OAAO;;EAEP;;EAEA,YAAY;;;;;iBAMG,sCAAsC;;;;EAIrD;;;iBAIe,6CAA6C;;;;;EAK5D,WAAW;;;iBAII,4CAA4C;;YAGjD,kBAAkB;EAAgB;;;iBAG7B,yCAAyC;;EAExD,WAAW;;;;;KAMR,yBAAyB,uCAC1B,sCACA;;YAGQ,0BAA0B,iBAAiB;;YAG3C,kCAAkC,yBAC1C,wBACA,8BAA8B;;qBAGrB;;qBAGA;;;;qBC3FA;mBACM;;;;;EAMJ,mBAAmB,8BAA8B,QAAQ;;;;;EAQ/D,gBAAgB,WAAW;;;;EAO3B;SAtBI,MAAA,GAAA,qBAAA;;;;;;qBCsEA;mBACM;mBACA;mBACA;mBAEA;mBACA;;UAYH;;;;;UAcN;;;;;UAUA;;;;UA6BA;;EAKD;SA5EI,MAAA,GAAA,qBAAA;;;;;;qBCrDA;;;;;SAKG,WAAW,SAAS,QAAQ,iCAAiC,oBAAoB;SALpF,MAAA,GAAA,qBAAA;SAAA,MAAA,GAAA,sBAAA;SAAA,MAAA,GAAA,sBAAA;;;;;;wBAqBG,uBAAuB,UAAU,QAAQ,iCAAiC;;;;qBCzC7E,wCAAwC,SAAS;;;;qBAQjD,gCAA8B,eAAA"}