@elementor/editor-styles 3.35.0-358 → 3.35.0-360

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.
Files changed (10) hide show
  1. package/dist/index.d.mts +8 -5
  2. package/dist/index.d.ts +8 -5
  3. package/dist/index.js +24 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +23 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
  8. package/src/index.ts +1 -1
  9. package/src/types.ts +6 -2
  10. package/src/utils/state-utils.ts +40 -4
package/dist/index.d.mts CHANGED
@@ -6,9 +6,11 @@ type ClassState = {
6
6
  name: 'selected';
7
7
  value: 'e--selected';
8
8
  };
9
- type StyleDefinitionPseudoState = 'hover' | 'focus' | 'active';
9
+ type StyleDefinitionAdditionalPseudoState = 'focus-visible';
10
+ type StyleDefinitionPseudoState = 'hover' | 'focus' | 'active' | StyleDefinitionAdditionalPseudoState;
10
11
  type StyleDefinitionClassState = ClassState['value'];
11
- type StyleDefinitionState = null | StyleDefinitionPseudoState | StyleDefinitionClassState;
12
+ type StyleDefinitionStateType = StyleDefinitionPseudoState | StyleDefinitionClassState;
13
+ type StyleDefinitionState = null | Exclude<StyleDefinitionStateType, StyleDefinitionAdditionalPseudoState>;
12
14
  type CustomCss = {
13
15
  raw: string;
14
16
  };
@@ -39,8 +41,9 @@ declare const isExistingStyleProperty: (property: string) => boolean;
39
41
 
40
42
  declare function getVariantByMeta(style: StyleDefinition, meta: StyleDefinitionVariant['meta']): StyleDefinitionVariant | undefined;
41
43
 
42
- declare function isClassState(state: StyleDefinitionState): state is StyleDefinitionClassState;
43
- declare function isPseudoState(state: StyleDefinitionState): state is StyleDefinitionPseudoState;
44
+ declare function isClassState(state: StyleDefinitionStateType): state is StyleDefinitionClassState;
45
+ declare function isPseudoState(state: StyleDefinitionStateType): state is StyleDefinitionPseudoState;
46
+ declare function getSelectorWithState(baseSelector: string, state: StyleDefinitionState): string;
44
47
 
45
48
  type ExtendedWindow = Window & {
46
49
  elementor: {
@@ -54,4 +57,4 @@ type ExtendedWindow = Window & {
54
57
  };
55
58
  };
56
59
 
57
- export { type ClassState, type CustomCss, type ExtendedWindow, type StyleDefinition, type StyleDefinitionClassState, type StyleDefinitionID, type StyleDefinitionPseudoState, type StyleDefinitionState, type StyleDefinitionType, type StyleDefinitionVariant, type StyleDefinitionsMap, generateId, getStylesSchema, getVariantByMeta, isClassState, isExistingStyleProperty, isPseudoState };
60
+ export { type ClassState, type CustomCss, type ExtendedWindow, type StyleDefinition, type StyleDefinitionAdditionalPseudoState, type StyleDefinitionClassState, type StyleDefinitionID, type StyleDefinitionPseudoState, type StyleDefinitionState, type StyleDefinitionStateType, type StyleDefinitionType, type StyleDefinitionVariant, type StyleDefinitionsMap, generateId, getSelectorWithState, getStylesSchema, getVariantByMeta, isClassState, isExistingStyleProperty, isPseudoState };
package/dist/index.d.ts CHANGED
@@ -6,9 +6,11 @@ type ClassState = {
6
6
  name: 'selected';
7
7
  value: 'e--selected';
8
8
  };
9
- type StyleDefinitionPseudoState = 'hover' | 'focus' | 'active';
9
+ type StyleDefinitionAdditionalPseudoState = 'focus-visible';
10
+ type StyleDefinitionPseudoState = 'hover' | 'focus' | 'active' | StyleDefinitionAdditionalPseudoState;
10
11
  type StyleDefinitionClassState = ClassState['value'];
11
- type StyleDefinitionState = null | StyleDefinitionPseudoState | StyleDefinitionClassState;
12
+ type StyleDefinitionStateType = StyleDefinitionPseudoState | StyleDefinitionClassState;
13
+ type StyleDefinitionState = null | Exclude<StyleDefinitionStateType, StyleDefinitionAdditionalPseudoState>;
12
14
  type CustomCss = {
13
15
  raw: string;
14
16
  };
@@ -39,8 +41,9 @@ declare const isExistingStyleProperty: (property: string) => boolean;
39
41
 
40
42
  declare function getVariantByMeta(style: StyleDefinition, meta: StyleDefinitionVariant['meta']): StyleDefinitionVariant | undefined;
41
43
 
42
- declare function isClassState(state: StyleDefinitionState): state is StyleDefinitionClassState;
43
- declare function isPseudoState(state: StyleDefinitionState): state is StyleDefinitionPseudoState;
44
+ declare function isClassState(state: StyleDefinitionStateType): state is StyleDefinitionClassState;
45
+ declare function isPseudoState(state: StyleDefinitionStateType): state is StyleDefinitionPseudoState;
46
+ declare function getSelectorWithState(baseSelector: string, state: StyleDefinitionState): string;
44
47
 
45
48
  type ExtendedWindow = Window & {
46
49
  elementor: {
@@ -54,4 +57,4 @@ type ExtendedWindow = Window & {
54
57
  };
55
58
  };
56
59
 
57
- export { type ClassState, type CustomCss, type ExtendedWindow, type StyleDefinition, type StyleDefinitionClassState, type StyleDefinitionID, type StyleDefinitionPseudoState, type StyleDefinitionState, type StyleDefinitionType, type StyleDefinitionVariant, type StyleDefinitionsMap, generateId, getStylesSchema, getVariantByMeta, isClassState, isExistingStyleProperty, isPseudoState };
60
+ export { type ClassState, type CustomCss, type ExtendedWindow, type StyleDefinition, type StyleDefinitionAdditionalPseudoState, type StyleDefinitionClassState, type StyleDefinitionID, type StyleDefinitionPseudoState, type StyleDefinitionState, type StyleDefinitionStateType, type StyleDefinitionType, type StyleDefinitionVariant, type StyleDefinitionsMap, generateId, getSelectorWithState, getStylesSchema, getVariantByMeta, isClassState, isExistingStyleProperty, isPseudoState };
package/dist/index.js CHANGED
@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
23
  generateId: () => generateId,
24
+ getSelectorWithState: () => getSelectorWithState,
24
25
  getStylesSchema: () => getStylesSchema,
25
26
  getVariantByMeta: () => getVariantByMeta,
26
27
  isClassState: () => isClassState,
@@ -61,17 +62,39 @@ function getVariantByMeta(style, meta) {
61
62
  }
62
63
 
63
64
  // src/utils/state-utils.ts
64
- var PSEUDO_STATES = ["hover", "focus", "active"];
65
+ var PSEUDO_STATES = ["hover", "focus", "active", "focus-visible"];
65
66
  var CLASS_STATES = ["e--selected"];
67
+ function getAdditionalStates(state) {
68
+ if (state === "hover") {
69
+ return ["focus-visible"];
70
+ }
71
+ return [];
72
+ }
73
+ function getStateSelector(state) {
74
+ if (isClassState(state)) {
75
+ return `.${state}`;
76
+ }
77
+ if (isPseudoState(state)) {
78
+ return `:${state}`;
79
+ }
80
+ return state;
81
+ }
66
82
  function isClassState(state) {
67
83
  return CLASS_STATES.includes(state);
68
84
  }
69
85
  function isPseudoState(state) {
70
86
  return PSEUDO_STATES.includes(state);
71
87
  }
88
+ function getSelectorWithState(baseSelector, state) {
89
+ if (!state) {
90
+ return baseSelector;
91
+ }
92
+ return [state, ...getAdditionalStates(state)].map((currentState) => `${baseSelector}${getStateSelector(currentState)}`).join(",");
93
+ }
72
94
  // Annotate the CommonJS export names for ESM import in node:
73
95
  0 && (module.exports = {
74
96
  generateId,
97
+ getSelectorWithState,
75
98
  getStylesSchema,
76
99
  getVariantByMeta,
77
100
  isClassState,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/utils/generate-id.ts","../src/utils/get-styles-schema.ts","../src/utils/get-variant-by-meta.ts","../src/utils/state-utils.ts"],"sourcesContent":["// types\nexport * from './types';\n\n// utils\nexport { generateId } from './utils/generate-id';\nexport { getStylesSchema, isExistingStyleProperty } from './utils/get-styles-schema';\nexport { getVariantByMeta } from './utils/get-variant-by-meta';\nexport { isClassState, isPseudoState } from './utils/state-utils';\nexport { type ExtendedWindow } from './utils/types';\n","export function generateId( prefix: string = '', existingIds: string[] = [] ) {\n\tlet id: string;\n\n\tdo {\n\t\tid = prefix + Math.random().toString( 16 ).slice( 2, 9 );\n\t} while ( existingIds.includes( id ) );\n\n\treturn id;\n}\n","import { type ExtendedWindow } from './types';\n\nconst getElementorConfig = () => {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.config ?? {};\n};\n\nexport const getStylesSchema = () => {\n\tconst config = getElementorConfig();\n\tconst styleSchema = config?.atomic?.styles_schema ?? {};\n\n\treturn styleSchema;\n};\n\nexport const isExistingStyleProperty = ( property: string ): boolean => {\n\tconst stylesSchema = getStylesSchema();\n\treturn Object.keys( stylesSchema ).includes( property );\n};\n","import { type StyleDefinition, type StyleDefinitionVariant } from '../types';\n\nexport function getVariantByMeta( style: StyleDefinition, meta: StyleDefinitionVariant[ 'meta' ] ) {\n\treturn style.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { type StyleDefinitionClassState, type StyleDefinitionPseudoState, type StyleDefinitionState } from '../types';\n\nconst PSEUDO_STATES: StyleDefinitionPseudoState[] = [ 'hover', 'focus', 'active' ];\n\nconst CLASS_STATES: StyleDefinitionClassState[] = [ 'e--selected' ];\n\nexport function isClassState( state: StyleDefinitionState ): state is StyleDefinitionClassState {\n\treturn CLASS_STATES.includes( state as StyleDefinitionClassState );\n}\n\nexport function isPseudoState( state: StyleDefinitionState ): state is StyleDefinitionPseudoState {\n\treturn PSEUDO_STATES.includes( state as StyleDefinitionPseudoState );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAY,SAAiB,IAAI,cAAwB,CAAC,GAAI;AAC7E,MAAI;AAEJ,KAAG;AACF,SAAK,SAAS,KAAK,OAAO,EAAE,SAAU,EAAG,EAAE,MAAO,GAAG,CAAE;AAAA,EACxD,SAAU,YAAY,SAAU,EAAG;AAEnC,SAAO;AACR;;;ACNA,IAAM,qBAAqB,MAAM;AAChC,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,CAAC;AAC7C;AAEO,IAAM,kBAAkB,MAAM;AACpC,QAAM,SAAS,mBAAmB;AAClC,QAAM,cAAc,QAAQ,QAAQ,iBAAiB,CAAC;AAEtD,SAAO;AACR;AAEO,IAAM,0BAA0B,CAAE,aAA+B;AACvE,QAAM,eAAe,gBAAgB;AACrC,SAAO,OAAO,KAAM,YAAa,EAAE,SAAU,QAAS;AACvD;;;AChBO,SAAS,iBAAkB,OAAwB,MAAyC;AAClG,SAAO,MAAM,SAAS,KAAM,CAAE,YAAa;AAC1C,WAAO,QAAQ,KAAK,eAAe,KAAK,cAAc,QAAQ,KAAK,UAAU,KAAK;AAAA,EACnF,CAAE;AACH;;;ACJA,IAAM,gBAA8C,CAAE,SAAS,SAAS,QAAS;AAEjF,IAAM,eAA4C,CAAE,aAAc;AAE3D,SAAS,aAAc,OAAkE;AAC/F,SAAO,aAAa,SAAU,KAAmC;AAClE;AAEO,SAAS,cAAe,OAAmE;AACjG,SAAO,cAAc,SAAU,KAAoC;AACpE;","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/utils/generate-id.ts","../src/utils/get-styles-schema.ts","../src/utils/get-variant-by-meta.ts","../src/utils/state-utils.ts"],"sourcesContent":["// types\nexport * from './types';\n\n// utils\nexport { generateId } from './utils/generate-id';\nexport { getStylesSchema, isExistingStyleProperty } from './utils/get-styles-schema';\nexport { getVariantByMeta } from './utils/get-variant-by-meta';\nexport { isClassState, isPseudoState, getSelectorWithState } from './utils/state-utils';\nexport { type ExtendedWindow } from './utils/types';\n","export function generateId( prefix: string = '', existingIds: string[] = [] ) {\n\tlet id: string;\n\n\tdo {\n\t\tid = prefix + Math.random().toString( 16 ).slice( 2, 9 );\n\t} while ( existingIds.includes( id ) );\n\n\treturn id;\n}\n","import { type ExtendedWindow } from './types';\n\nconst getElementorConfig = () => {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.config ?? {};\n};\n\nexport const getStylesSchema = () => {\n\tconst config = getElementorConfig();\n\tconst styleSchema = config?.atomic?.styles_schema ?? {};\n\n\treturn styleSchema;\n};\n\nexport const isExistingStyleProperty = ( property: string ): boolean => {\n\tconst stylesSchema = getStylesSchema();\n\treturn Object.keys( stylesSchema ).includes( property );\n};\n","import { type StyleDefinition, type StyleDefinitionVariant } from '../types';\n\nexport function getVariantByMeta( style: StyleDefinition, meta: StyleDefinitionVariant[ 'meta' ] ) {\n\treturn style.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import {\n\ttype StyleDefinitionAdditionalPseudoState,\n\ttype StyleDefinitionClassState,\n\ttype StyleDefinitionPseudoState,\n\ttype StyleDefinitionState,\n\ttype StyleDefinitionStateType,\n} from '../types';\n\nconst PSEUDO_STATES: StyleDefinitionPseudoState[] = [ 'hover', 'focus', 'active', 'focus-visible' ];\n\nconst CLASS_STATES: StyleDefinitionClassState[] = [ 'e--selected' ];\n\nfunction getAdditionalStates( state: StyleDefinitionState ): StyleDefinitionAdditionalPseudoState[] {\n\tif ( state === 'hover' ) {\n\t\treturn [ 'focus-visible' ];\n\t}\n\n\treturn [];\n}\n\nfunction getStateSelector( state: StyleDefinitionPseudoState | StyleDefinitionClassState ) {\n\tif ( isClassState( state ) ) {\n\t\treturn `.${ state }`;\n\t}\n\n\tif ( isPseudoState( state ) ) {\n\t\treturn `:${ state }`;\n\t}\n\n\treturn state;\n}\n\nexport function isClassState( state: StyleDefinitionStateType ): state is StyleDefinitionClassState {\n\treturn CLASS_STATES.includes( state as StyleDefinitionClassState );\n}\n\nexport function isPseudoState( state: StyleDefinitionStateType ): state is StyleDefinitionPseudoState {\n\treturn PSEUDO_STATES.includes( state as StyleDefinitionPseudoState );\n}\n\nexport function getSelectorWithState( baseSelector: string, state: StyleDefinitionState ): string {\n\tif ( ! state ) {\n\t\treturn baseSelector;\n\t}\n\n\treturn [ state, ...getAdditionalStates( state ) ]\n\t\t.map( ( currentState ) => `${ baseSelector }${ getStateSelector( currentState ) }` )\n\t\t.join( ',' );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAY,SAAiB,IAAI,cAAwB,CAAC,GAAI;AAC7E,MAAI;AAEJ,KAAG;AACF,SAAK,SAAS,KAAK,OAAO,EAAE,SAAU,EAAG,EAAE,MAAO,GAAG,CAAE;AAAA,EACxD,SAAU,YAAY,SAAU,EAAG;AAEnC,SAAO;AACR;;;ACNA,IAAM,qBAAqB,MAAM;AAChC,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,CAAC;AAC7C;AAEO,IAAM,kBAAkB,MAAM;AACpC,QAAM,SAAS,mBAAmB;AAClC,QAAM,cAAc,QAAQ,QAAQ,iBAAiB,CAAC;AAEtD,SAAO;AACR;AAEO,IAAM,0BAA0B,CAAE,aAA+B;AACvE,QAAM,eAAe,gBAAgB;AACrC,SAAO,OAAO,KAAM,YAAa,EAAE,SAAU,QAAS;AACvD;;;AChBO,SAAS,iBAAkB,OAAwB,MAAyC;AAClG,SAAO,MAAM,SAAS,KAAM,CAAE,YAAa;AAC1C,WAAO,QAAQ,KAAK,eAAe,KAAK,cAAc,QAAQ,KAAK,UAAU,KAAK;AAAA,EACnF,CAAE;AACH;;;ACEA,IAAM,gBAA8C,CAAE,SAAS,SAAS,UAAU,eAAgB;AAElG,IAAM,eAA4C,CAAE,aAAc;AAElE,SAAS,oBAAqB,OAAsE;AACnG,MAAK,UAAU,SAAU;AACxB,WAAO,CAAE,eAAgB;AAAA,EAC1B;AAEA,SAAO,CAAC;AACT;AAEA,SAAS,iBAAkB,OAAgE;AAC1F,MAAK,aAAc,KAAM,GAAI;AAC5B,WAAO,IAAK,KAAM;AAAA,EACnB;AAEA,MAAK,cAAe,KAAM,GAAI;AAC7B,WAAO,IAAK,KAAM;AAAA,EACnB;AAEA,SAAO;AACR;AAEO,SAAS,aAAc,OAAsE;AACnG,SAAO,aAAa,SAAU,KAAmC;AAClE;AAEO,SAAS,cAAe,OAAuE;AACrG,SAAO,cAAc,SAAU,KAAoC;AACpE;AAEO,SAAS,qBAAsB,cAAsB,OAAsC;AACjG,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AAEA,SAAO,CAAE,OAAO,GAAG,oBAAqB,KAAM,CAAE,EAC9C,IAAK,CAAE,iBAAkB,GAAI,YAAa,GAAI,iBAAkB,YAAa,CAAE,EAAG,EAClF,KAAM,GAAI;AACb;","names":[]}
package/dist/index.mjs CHANGED
@@ -30,16 +30,38 @@ function getVariantByMeta(style, meta) {
30
30
  }
31
31
 
32
32
  // src/utils/state-utils.ts
33
- var PSEUDO_STATES = ["hover", "focus", "active"];
33
+ var PSEUDO_STATES = ["hover", "focus", "active", "focus-visible"];
34
34
  var CLASS_STATES = ["e--selected"];
35
+ function getAdditionalStates(state) {
36
+ if (state === "hover") {
37
+ return ["focus-visible"];
38
+ }
39
+ return [];
40
+ }
41
+ function getStateSelector(state) {
42
+ if (isClassState(state)) {
43
+ return `.${state}`;
44
+ }
45
+ if (isPseudoState(state)) {
46
+ return `:${state}`;
47
+ }
48
+ return state;
49
+ }
35
50
  function isClassState(state) {
36
51
  return CLASS_STATES.includes(state);
37
52
  }
38
53
  function isPseudoState(state) {
39
54
  return PSEUDO_STATES.includes(state);
40
55
  }
56
+ function getSelectorWithState(baseSelector, state) {
57
+ if (!state) {
58
+ return baseSelector;
59
+ }
60
+ return [state, ...getAdditionalStates(state)].map((currentState) => `${baseSelector}${getStateSelector(currentState)}`).join(",");
61
+ }
41
62
  export {
42
63
  generateId,
64
+ getSelectorWithState,
43
65
  getStylesSchema,
44
66
  getVariantByMeta,
45
67
  isClassState,
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/generate-id.ts","../src/utils/get-styles-schema.ts","../src/utils/get-variant-by-meta.ts","../src/utils/state-utils.ts"],"sourcesContent":["export function generateId( prefix: string = '', existingIds: string[] = [] ) {\n\tlet id: string;\n\n\tdo {\n\t\tid = prefix + Math.random().toString( 16 ).slice( 2, 9 );\n\t} while ( existingIds.includes( id ) );\n\n\treturn id;\n}\n","import { type ExtendedWindow } from './types';\n\nconst getElementorConfig = () => {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.config ?? {};\n};\n\nexport const getStylesSchema = () => {\n\tconst config = getElementorConfig();\n\tconst styleSchema = config?.atomic?.styles_schema ?? {};\n\n\treturn styleSchema;\n};\n\nexport const isExistingStyleProperty = ( property: string ): boolean => {\n\tconst stylesSchema = getStylesSchema();\n\treturn Object.keys( stylesSchema ).includes( property );\n};\n","import { type StyleDefinition, type StyleDefinitionVariant } from '../types';\n\nexport function getVariantByMeta( style: StyleDefinition, meta: StyleDefinitionVariant[ 'meta' ] ) {\n\treturn style.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { type StyleDefinitionClassState, type StyleDefinitionPseudoState, type StyleDefinitionState } from '../types';\n\nconst PSEUDO_STATES: StyleDefinitionPseudoState[] = [ 'hover', 'focus', 'active' ];\n\nconst CLASS_STATES: StyleDefinitionClassState[] = [ 'e--selected' ];\n\nexport function isClassState( state: StyleDefinitionState ): state is StyleDefinitionClassState {\n\treturn CLASS_STATES.includes( state as StyleDefinitionClassState );\n}\n\nexport function isPseudoState( state: StyleDefinitionState ): state is StyleDefinitionPseudoState {\n\treturn PSEUDO_STATES.includes( state as StyleDefinitionPseudoState );\n}\n"],"mappings":";AAAO,SAAS,WAAY,SAAiB,IAAI,cAAwB,CAAC,GAAI;AAC7E,MAAI;AAEJ,KAAG;AACF,SAAK,SAAS,KAAK,OAAO,EAAE,SAAU,EAAG,EAAE,MAAO,GAAG,CAAE;AAAA,EACxD,SAAU,YAAY,SAAU,EAAG;AAEnC,SAAO;AACR;;;ACNA,IAAM,qBAAqB,MAAM;AAChC,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,CAAC;AAC7C;AAEO,IAAM,kBAAkB,MAAM;AACpC,QAAM,SAAS,mBAAmB;AAClC,QAAM,cAAc,QAAQ,QAAQ,iBAAiB,CAAC;AAEtD,SAAO;AACR;AAEO,IAAM,0BAA0B,CAAE,aAA+B;AACvE,QAAM,eAAe,gBAAgB;AACrC,SAAO,OAAO,KAAM,YAAa,EAAE,SAAU,QAAS;AACvD;;;AChBO,SAAS,iBAAkB,OAAwB,MAAyC;AAClG,SAAO,MAAM,SAAS,KAAM,CAAE,YAAa;AAC1C,WAAO,QAAQ,KAAK,eAAe,KAAK,cAAc,QAAQ,KAAK,UAAU,KAAK;AAAA,EACnF,CAAE;AACH;;;ACJA,IAAM,gBAA8C,CAAE,SAAS,SAAS,QAAS;AAEjF,IAAM,eAA4C,CAAE,aAAc;AAE3D,SAAS,aAAc,OAAkE;AAC/F,SAAO,aAAa,SAAU,KAAmC;AAClE;AAEO,SAAS,cAAe,OAAmE;AACjG,SAAO,cAAc,SAAU,KAAoC;AACpE;","names":[]}
1
+ {"version":3,"sources":["../src/utils/generate-id.ts","../src/utils/get-styles-schema.ts","../src/utils/get-variant-by-meta.ts","../src/utils/state-utils.ts"],"sourcesContent":["export function generateId( prefix: string = '', existingIds: string[] = [] ) {\n\tlet id: string;\n\n\tdo {\n\t\tid = prefix + Math.random().toString( 16 ).slice( 2, 9 );\n\t} while ( existingIds.includes( id ) );\n\n\treturn id;\n}\n","import { type ExtendedWindow } from './types';\n\nconst getElementorConfig = () => {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.config ?? {};\n};\n\nexport const getStylesSchema = () => {\n\tconst config = getElementorConfig();\n\tconst styleSchema = config?.atomic?.styles_schema ?? {};\n\n\treturn styleSchema;\n};\n\nexport const isExistingStyleProperty = ( property: string ): boolean => {\n\tconst stylesSchema = getStylesSchema();\n\treturn Object.keys( stylesSchema ).includes( property );\n};\n","import { type StyleDefinition, type StyleDefinitionVariant } from '../types';\n\nexport function getVariantByMeta( style: StyleDefinition, meta: StyleDefinitionVariant[ 'meta' ] ) {\n\treturn style.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import {\n\ttype StyleDefinitionAdditionalPseudoState,\n\ttype StyleDefinitionClassState,\n\ttype StyleDefinitionPseudoState,\n\ttype StyleDefinitionState,\n\ttype StyleDefinitionStateType,\n} from '../types';\n\nconst PSEUDO_STATES: StyleDefinitionPseudoState[] = [ 'hover', 'focus', 'active', 'focus-visible' ];\n\nconst CLASS_STATES: StyleDefinitionClassState[] = [ 'e--selected' ];\n\nfunction getAdditionalStates( state: StyleDefinitionState ): StyleDefinitionAdditionalPseudoState[] {\n\tif ( state === 'hover' ) {\n\t\treturn [ 'focus-visible' ];\n\t}\n\n\treturn [];\n}\n\nfunction getStateSelector( state: StyleDefinitionPseudoState | StyleDefinitionClassState ) {\n\tif ( isClassState( state ) ) {\n\t\treturn `.${ state }`;\n\t}\n\n\tif ( isPseudoState( state ) ) {\n\t\treturn `:${ state }`;\n\t}\n\n\treturn state;\n}\n\nexport function isClassState( state: StyleDefinitionStateType ): state is StyleDefinitionClassState {\n\treturn CLASS_STATES.includes( state as StyleDefinitionClassState );\n}\n\nexport function isPseudoState( state: StyleDefinitionStateType ): state is StyleDefinitionPseudoState {\n\treturn PSEUDO_STATES.includes( state as StyleDefinitionPseudoState );\n}\n\nexport function getSelectorWithState( baseSelector: string, state: StyleDefinitionState ): string {\n\tif ( ! state ) {\n\t\treturn baseSelector;\n\t}\n\n\treturn [ state, ...getAdditionalStates( state ) ]\n\t\t.map( ( currentState ) => `${ baseSelector }${ getStateSelector( currentState ) }` )\n\t\t.join( ',' );\n}\n"],"mappings":";AAAO,SAAS,WAAY,SAAiB,IAAI,cAAwB,CAAC,GAAI;AAC7E,MAAI;AAEJ,KAAG;AACF,SAAK,SAAS,KAAK,OAAO,EAAE,SAAU,EAAG,EAAE,MAAO,GAAG,CAAE;AAAA,EACxD,SAAU,YAAY,SAAU,EAAG;AAEnC,SAAO;AACR;;;ACNA,IAAM,qBAAqB,MAAM;AAChC,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,CAAC;AAC7C;AAEO,IAAM,kBAAkB,MAAM;AACpC,QAAM,SAAS,mBAAmB;AAClC,QAAM,cAAc,QAAQ,QAAQ,iBAAiB,CAAC;AAEtD,SAAO;AACR;AAEO,IAAM,0BAA0B,CAAE,aAA+B;AACvE,QAAM,eAAe,gBAAgB;AACrC,SAAO,OAAO,KAAM,YAAa,EAAE,SAAU,QAAS;AACvD;;;AChBO,SAAS,iBAAkB,OAAwB,MAAyC;AAClG,SAAO,MAAM,SAAS,KAAM,CAAE,YAAa;AAC1C,WAAO,QAAQ,KAAK,eAAe,KAAK,cAAc,QAAQ,KAAK,UAAU,KAAK;AAAA,EACnF,CAAE;AACH;;;ACEA,IAAM,gBAA8C,CAAE,SAAS,SAAS,UAAU,eAAgB;AAElG,IAAM,eAA4C,CAAE,aAAc;AAElE,SAAS,oBAAqB,OAAsE;AACnG,MAAK,UAAU,SAAU;AACxB,WAAO,CAAE,eAAgB;AAAA,EAC1B;AAEA,SAAO,CAAC;AACT;AAEA,SAAS,iBAAkB,OAAgE;AAC1F,MAAK,aAAc,KAAM,GAAI;AAC5B,WAAO,IAAK,KAAM;AAAA,EACnB;AAEA,MAAK,cAAe,KAAM,GAAI;AAC7B,WAAO,IAAK,KAAM;AAAA,EACnB;AAEA,SAAO;AACR;AAEO,SAAS,aAAc,OAAsE;AACnG,SAAO,aAAa,SAAU,KAAmC;AAClE;AAEO,SAAS,cAAe,OAAuE;AACrG,SAAO,cAAc,SAAU,KAAoC;AACpE;AAEO,SAAS,qBAAsB,cAAsB,OAAsC;AACjG,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AAEA,SAAO,CAAE,OAAO,GAAG,oBAAqB,KAAM,CAAE,EAC9C,IAAK,CAAE,iBAAkB,GAAI,YAAa,GAAI,iBAAkB,YAAa,CAAE,EAAG,EAClF,KAAM,GAAI;AACb;","names":[]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-styles",
3
3
  "description": "This package contains the styles model for the Elementor editor",
4
- "version": "3.35.0-358",
4
+ "version": "3.35.0-360",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,8 +40,8 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor-props": "3.35.0-358",
44
- "@elementor/editor-responsive": "3.35.0-358"
43
+ "@elementor/editor-props": "3.35.0-360",
44
+ "@elementor/editor-responsive": "3.35.0-360"
45
45
  },
46
46
  "devDependencies": {
47
47
  "tsup": "^8.3.5"
package/src/index.ts CHANGED
@@ -5,5 +5,5 @@ export * from './types';
5
5
  export { generateId } from './utils/generate-id';
6
6
  export { getStylesSchema, isExistingStyleProperty } from './utils/get-styles-schema';
7
7
  export { getVariantByMeta } from './utils/get-variant-by-meta';
8
- export { isClassState, isPseudoState } from './utils/state-utils';
8
+ export { isClassState, isPseudoState, getSelectorWithState } from './utils/state-utils';
9
9
  export { type ExtendedWindow } from './utils/types';
package/src/types.ts CHANGED
@@ -6,11 +6,15 @@ export type ClassState = {
6
6
  value: 'e--selected';
7
7
  };
8
8
 
9
- export type StyleDefinitionPseudoState = 'hover' | 'focus' | 'active';
9
+ export type StyleDefinitionAdditionalPseudoState = 'focus-visible';
10
+
11
+ export type StyleDefinitionPseudoState = 'hover' | 'focus' | 'active' | StyleDefinitionAdditionalPseudoState;
10
12
 
11
13
  export type StyleDefinitionClassState = ClassState[ 'value' ];
12
14
 
13
- export type StyleDefinitionState = null | StyleDefinitionPseudoState | StyleDefinitionClassState;
15
+ export type StyleDefinitionStateType = StyleDefinitionPseudoState | StyleDefinitionClassState;
16
+
17
+ export type StyleDefinitionState = null | Exclude< StyleDefinitionStateType, StyleDefinitionAdditionalPseudoState >;
14
18
 
15
19
  export type CustomCss = {
16
20
  raw: string;
package/src/utils/state-utils.ts CHANGED
@@ -1,13 +1,49 @@
1
- import { type StyleDefinitionClassState, type StyleDefinitionPseudoState, type StyleDefinitionState } from '../types';
1
+ import {
2
+ type StyleDefinitionAdditionalPseudoState,
3
+ type StyleDefinitionClassState,
4
+ type StyleDefinitionPseudoState,
5
+ type StyleDefinitionState,
6
+ type StyleDefinitionStateType,
7
+ } from '../types';
2
8
 
3
- const PSEUDO_STATES: StyleDefinitionPseudoState[] = [ 'hover', 'focus', 'active' ];
9
+ const PSEUDO_STATES: StyleDefinitionPseudoState[] = [ 'hover', 'focus', 'active', 'focus-visible' ];
4
10
 
5
11
  const CLASS_STATES: StyleDefinitionClassState[] = [ 'e--selected' ];
6
12
 
7
- export function isClassState( state: StyleDefinitionState ): state is StyleDefinitionClassState {
13
+ function getAdditionalStates( state: StyleDefinitionState ): StyleDefinitionAdditionalPseudoState[] {
14
+ if ( state === 'hover' ) {
15
+ return [ 'focus-visible' ];
16
+ }
17
+
18
+ return [];
19
+ }
20
+
21
+ function getStateSelector( state: StyleDefinitionPseudoState | StyleDefinitionClassState ) {
22
+ if ( isClassState( state ) ) {
23
+ return `.${ state }`;
24
+ }
25
+
26
+ if ( isPseudoState( state ) ) {
27
+ return `:${ state }`;
28
+ }
29
+
30
+ return state;
31
+ }
32
+
33
+ export function isClassState( state: StyleDefinitionStateType ): state is StyleDefinitionClassState {
8
34
  return CLASS_STATES.includes( state as StyleDefinitionClassState );
9
35
  }
10
36
 
11
- export function isPseudoState( state: StyleDefinitionState ): state is StyleDefinitionPseudoState {
37
+ export function isPseudoState( state: StyleDefinitionStateType ): state is StyleDefinitionPseudoState {
12
38
  return PSEUDO_STATES.includes( state as StyleDefinitionPseudoState );
13
39
  }
40
+
41
+ export function getSelectorWithState( baseSelector: string, state: StyleDefinitionState ): string {
42
+ if ( ! state ) {
43
+ return baseSelector;
44
+ }
45
+
46
+ return [ state, ...getAdditionalStates( state ) ]
47
+ .map( ( currentState ) => `${ baseSelector }${ getStateSelector( currentState ) }` )
48
+ .join( ',' );
49
+ }