@streamscloud/embeddable 12.0.0 → 12.1.0

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 (12) hide show
  1. package/dist/media-center/config/internal-media-center-config.js +13 -12
  2. package/dist/media-center/config/operations.generated.d.ts +36 -30
  3. package/dist/media-center/config/operations.generated.js +53 -44
  4. package/dist/media-center/config/operations.graphql +34 -28
  5. package/dist/media-center/config/types.d.ts +8 -0
  6. package/dist/media-center/media-center/handlers/categories-handler.svelte.d.ts +25 -12
  7. package/dist/media-center/media-center/handlers/categories-handler.svelte.js +18 -3
  8. package/dist/media-center/media-center/handlers/index.d.ts +1 -0
  9. package/dist/media-center/media-center/header-footer/media-center-footer.svelte +1 -1
  10. package/dist/media-center/media-center/media-center-context.svelte.js +1 -1
  11. package/dist/media-center/media-center/menu/menu.svelte +70 -77
  12. package/package.json +1 -1
package/dist/media-center/config/internal-media-center-config.js CHANGED
@@ -17,23 +17,24 @@ export class InternalMediaCenterConfig {
17
17
  this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
18
18
  this.getConfig = async () => {
19
19
  const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId }).toPromise();
20
- if (!payload.data?.embedMediaPagePlayerConfig) {
20
+ if (!payload.data?.embedMediaPage) {
21
21
  return null;
22
22
  }
23
- const config = payload.data.embedMediaPagePlayerConfig;
23
+ const config = payload.data.embedMediaPage;
24
24
  return {
25
25
  targetData: {
26
- id: config.mediaPage.id,
27
- handle: config.mediaPage.handle,
28
- name: config.mediaPage.name,
29
- description: config.mediaPage.description,
30
- image: config.mediaPage.image?.url || null,
31
- logo: config.mediaPage.logo?.url || null,
32
- banner: config.mediaPage.banner?.url || null,
33
- membersCount: config.mediaPage.membersCount
26
+ id: config.id,
27
+ handle: config.handle,
28
+ name: config.name,
29
+ description: config.description,
30
+ image: config.image?.url || null,
31
+ logo: config.logo?.url || null,
32
+ banner: config.banner?.url || null,
33
+ membersCount: config.membersCount
34
34
  },
35
- contentCategories: config.playerSettings?.contentCategories || [],
36
- playerColors: config.playerSettings?.colors || null
35
+ contentCategories: config.menuSettings?.contentCategories || [],
36
+ categoryTagAssociations: config.menuSettings?.contentCategoryMenuItems || [],
37
+ playerColors: config.playerColors || null
37
38
  };
38
39
  };
39
40
  this.postsPlayer = {
package/dist/media-center/config/operations.generated.d.ts CHANGED
@@ -4,42 +4,48 @@ export type GetMediaPageConfigQueryVariables = SchemaTypes.Exact<{
4
4
  mediaPageId: SchemaTypes.Scalars['String']['input'];
5
5
  }>;
6
6
  export type GetMediaPageConfigQuery = {
7
- embedMediaPagePlayerConfig: {
8
- mediaPage: {
9
- id: string;
10
- handle: string;
11
- name: string;
12
- description: string;
13
- membersCount: number;
14
- image: {
15
- url: string;
16
- } | null;
17
- logo: {
18
- url: string;
19
- } | null;
20
- banner: {
21
- url: string;
22
- } | null;
23
- };
24
- playerSettings: {
7
+ embedMediaPage: {
8
+ id: string;
9
+ handle: string;
10
+ name: string;
11
+ description: string;
12
+ membersCount: number;
13
+ image: {
14
+ url: string;
15
+ } | null;
16
+ logo: {
17
+ url: string;
18
+ } | null;
19
+ banner: {
20
+ url: string;
21
+ } | null;
22
+ menuSettings: {
25
23
  contentCategories: Array<{
26
24
  id: string;
27
25
  name: string;
28
26
  image: string | null;
29
27
  parentId: string | null;
30
28
  }>;
31
- colors: {
32
- brand: string | null;
33
- button: string | null;
34
- buttonInactive: string | null;
35
- cardButton: string | null;
36
- cardBackground: string | null;
37
- menuBackground: string | null;
38
- playerBackground: string | null;
39
- price: string | null;
40
- salePrice: string | null;
41
- sidebarBackground: string | null;
42
- } | null;
29
+ contentCategoryMenuItems: Array<{
30
+ id: string;
31
+ tag: {
32
+ text: string;
33
+ backgroundColor: string;
34
+ fontColor: string;
35
+ } | null;
36
+ }> | null;
37
+ } | null;
38
+ playerColors: {
39
+ brand: string | null;
40
+ button: string | null;
41
+ buttonInactive: string | null;
42
+ cardButton: string | null;
43
+ cardBackground: string | null;
44
+ menuBackground: string | null;
45
+ playerBackground: string | null;
46
+ price: string | null;
47
+ salePrice: string | null;
48
+ sidebarBackground: string | null;
43
49
  } | null;
44
50
  } | null;
45
51
  };
package/dist/media-center/config/operations.generated.js CHANGED
@@ -17,7 +17,7 @@ export const GetMediaPageConfigDocument = {
17
17
  selections: [
18
18
  {
19
19
  kind: 'Field',
20
- name: { kind: 'Name', value: 'embedMediaPagePlayerConfig' },
20
+ name: { kind: 'Name', value: 'embedMediaPage' },
21
21
  arguments: [
22
22
  {
23
23
  kind: 'Argument',
@@ -25,11 +25,7 @@ export const GetMediaPageConfigDocument = {
25
25
  value: {
26
26
  kind: 'ObjectValue',
27
27
  fields: [
28
- {
29
- kind: 'ObjectField',
30
- name: { kind: 'Name', value: 'mediaPageId' },
31
- value: { kind: 'Variable', name: { kind: 'Name', value: 'mediaPageId' } }
32
- }
28
+ { kind: 'ObjectField', name: { kind: 'Name', value: 'id' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'mediaPageId' } } }
33
29
  ]
34
30
  }
35
31
  }
@@ -37,38 +33,29 @@ export const GetMediaPageConfigDocument = {
37
33
  selectionSet: {
38
34
  kind: 'SelectionSet',
39
35
  selections: [
36
+ { kind: 'Field', name: { kind: 'Name', value: 'id' } },
37
+ { kind: 'Field', name: { kind: 'Name', value: 'handle' } },
38
+ { kind: 'Field', name: { kind: 'Name', value: 'name' } },
39
+ { kind: 'Field', name: { kind: 'Name', value: 'description' } },
40
40
  {
41
41
  kind: 'Field',
42
- name: { kind: 'Name', value: 'mediaPage' },
43
- selectionSet: {
44
- kind: 'SelectionSet',
45
- selections: [
46
- { kind: 'Field', name: { kind: 'Name', value: 'id' } },
47
- { kind: 'Field', name: { kind: 'Name', value: 'handle' } },
48
- { kind: 'Field', name: { kind: 'Name', value: 'name' } },
49
- { kind: 'Field', name: { kind: 'Name', value: 'description' } },
50
- {
51
- kind: 'Field',
52
- name: { kind: 'Name', value: 'image' },
53
- selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
54
- },
55
- {
56
- kind: 'Field',
57
- name: { kind: 'Name', value: 'logo' },
58
- selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
59
- },
60
- {
61
- kind: 'Field',
62
- name: { kind: 'Name', value: 'banner' },
63
- selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
64
- },
65
- { kind: 'Field', name: { kind: 'Name', value: 'membersCount' } }
66
- ]
67
- }
42
+ name: { kind: 'Name', value: 'image' },
43
+ selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
68
44
  },
69
45
  {
70
46
  kind: 'Field',
71
- name: { kind: 'Name', value: 'playerSettings' },
47
+ name: { kind: 'Name', value: 'logo' },
48
+ selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
49
+ },
50
+ {
51
+ kind: 'Field',
52
+ name: { kind: 'Name', value: 'banner' },
53
+ selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
54
+ },
55
+ { kind: 'Field', name: { kind: 'Name', value: 'membersCount' } },
56
+ {
57
+ kind: 'Field',
58
+ name: { kind: 'Name', value: 'menuSettings' },
72
59
  selectionSet: {
73
60
  kind: 'SelectionSet',
74
61
  selections: [
@@ -87,25 +74,47 @@ export const GetMediaPageConfigDocument = {
87
74
  },
88
75
  {
89
76
  kind: 'Field',
90
- name: { kind: 'Name', value: 'colors' },
77
+ name: { kind: 'Name', value: 'contentCategoryMenuItems' },
91
78
  selectionSet: {
92
79
  kind: 'SelectionSet',
93
80
  selections: [
94
- { kind: 'Field', name: { kind: 'Name', value: 'brand' } },
95
- { kind: 'Field', name: { kind: 'Name', value: 'button' } },
96
- { kind: 'Field', name: { kind: 'Name', value: 'buttonInactive' } },
97
- { kind: 'Field', name: { kind: 'Name', value: 'cardButton' } },
98
- { kind: 'Field', name: { kind: 'Name', value: 'cardBackground' } },
99
- { kind: 'Field', name: { kind: 'Name', value: 'menuBackground' } },
100
- { kind: 'Field', name: { kind: 'Name', value: 'playerBackground' } },
101
- { kind: 'Field', name: { kind: 'Name', value: 'price' } },
102
- { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
103
- { kind: 'Field', name: { kind: 'Name', value: 'sidebarBackground' } }
81
+ { kind: 'Field', name: { kind: 'Name', value: 'id' } },
82
+ {
83
+ kind: 'Field',
84
+ name: { kind: 'Name', value: 'tag' },
85
+ selectionSet: {
86
+ kind: 'SelectionSet',
87
+ selections: [
88
+ { kind: 'Field', name: { kind: 'Name', value: 'text' } },
89
+ { kind: 'Field', name: { kind: 'Name', value: 'backgroundColor' } },
90
+ { kind: 'Field', name: { kind: 'Name', value: 'fontColor' } }
91
+ ]
92
+ }
93
+ }
104
94
  ]
105
95
  }
106
96
  }
107
97
  ]
108
98
  }
99
+ },
100
+ {
101
+ kind: 'Field',
102
+ name: { kind: 'Name', value: 'playerColors' },
103
+ selectionSet: {
104
+ kind: 'SelectionSet',
105
+ selections: [
106
+ { kind: 'Field', name: { kind: 'Name', value: 'brand' } },
107
+ { kind: 'Field', name: { kind: 'Name', value: 'button' } },
108
+ { kind: 'Field', name: { kind: 'Name', value: 'buttonInactive' } },
109
+ { kind: 'Field', name: { kind: 'Name', value: 'cardButton' } },
110
+ { kind: 'Field', name: { kind: 'Name', value: 'cardBackground' } },
111
+ { kind: 'Field', name: { kind: 'Name', value: 'menuBackground' } },
112
+ { kind: 'Field', name: { kind: 'Name', value: 'playerBackground' } },
113
+ { kind: 'Field', name: { kind: 'Name', value: 'price' } },
114
+ { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
115
+ { kind: 'Field', name: { kind: 'Name', value: 'sidebarBackground' } }
116
+ ]
117
+ }
109
118
  }
110
119
  ]
111
120
  }
package/dist/media-center/config/operations.graphql CHANGED
@@ -1,40 +1,46 @@
1
1
  query GetMediaPageConfig($mediaPageId: String!) {
2
- embedMediaPagePlayerConfig(input: { mediaPageId: $mediaPageId }) {
3
- mediaPage {
4
- id
5
- handle
6
- name
7
- description
8
- image {
9
- url
10
- }
11
- logo {
12
- url
13
- }
14
- banner {
15
- url
16
- }
17
- membersCount
2
+ embedMediaPage(input: { id: $mediaPageId }) {
3
+ id
4
+ handle
5
+ name
6
+ description
7
+ image {
8
+ url
9
+ }
10
+ logo {
11
+ url
18
12
  }
19
- playerSettings {
13
+ banner {
14
+ url
15
+ }
16
+ membersCount
17
+ menuSettings {
20
18
  contentCategories {
21
19
  id
22
20
  name
23
21
  image
24
22
  parentId
25
23
  }
26
- colors {
27
- brand
28
- button
29
- buttonInactive
30
- cardButton
31
- cardBackground
32
- menuBackground
33
- playerBackground
34
- price
35
- salePrice
36
- sidebarBackground
24
+ contentCategoryMenuItems {
25
+ id
26
+ tag {
27
+ text
28
+ backgroundColor
29
+ fontColor
30
+ }
37
31
  }
38
32
  }
33
+ playerColors {
34
+ brand
35
+ button
36
+ buttonInactive
37
+ cardButton
38
+ cardBackground
39
+ menuBackground
40
+ playerBackground
41
+ price
42
+ salePrice
43
+ sidebarBackground
44
+ }
39
45
  }
40
46
  }
package/dist/media-center/config/types.d.ts CHANGED
@@ -50,6 +50,14 @@ export type MediaCenterConfigModel = {
50
50
  image: string | null;
51
51
  parentId: string | null;
52
52
  }[];
53
+ categoryTagAssociations: {
54
+ id: string;
55
+ tag: {
56
+ text: string;
57
+ fontColor: string;
58
+ backgroundColor: string;
59
+ } | null;
60
+ }[];
53
61
  targetData: MediaCenterTargetDataModel;
54
62
  playerColors: {
55
63
  brand: string | null;
package/dist/media-center/media-center/handlers/categories-handler.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@ import type { MediaCenterConfigModel } from '../../config/types';
2
2
  import type { MediaCenterCategoryData } from '../types';
3
3
  export declare class CategoriesHandler {
4
4
  private _allCateogories;
5
+ private _tagAssociations;
5
6
  private _selectedCategoryId;
6
7
  get allCategories(): {
7
8
  id: string;
@@ -9,19 +10,31 @@ export declare class CategoriesHandler {
9
10
  image: string | null;
10
11
  parentId: string | null;
11
12
  }[];
12
- get categoriesGrouped(): {
13
- id: string;
14
- name: string;
15
- children: {
16
- id: string;
17
- name: string;
18
- image: string | null;
19
- parentId: string;
20
- }[];
21
- image: string | null;
22
- }[];
13
+ get categoriesGrouped(): MediaCenterCategoryModel[];
23
14
  get selectedCategoryId(): string | null;
24
15
  set selectedCategoryId(value: string | null);
25
16
  getCategoryData: (categoryId: string) => MediaCenterCategoryData | null;
26
- init: (categories: MediaCenterConfigModel["contentCategories"]) => Promise<void>;
17
+ init: (data: {
18
+ categories: MediaCenterConfigModel["contentCategories"];
19
+ tagAssociations: MediaCenterConfigModel["categoryTagAssociations"];
20
+ }) => Promise<void>;
27
21
  }
22
+ export type MediaCenterCategoryModel = {
23
+ id: string;
24
+ name: string;
25
+ image: string | null;
26
+ tag: MediaCenterCategoryTagModel | null;
27
+ children: MediaCenterSubCategoryModel[];
28
+ };
29
+ export type MediaCenterSubCategoryModel = {
30
+ id: string;
31
+ name: string;
32
+ image: string | null;
33
+ parentId: string;
34
+ tag: MediaCenterCategoryTagModel | null;
35
+ };
36
+ export type MediaCenterCategoryTagModel = {
37
+ text: string;
38
+ fontColor: string;
39
+ backgroundColor: string;
40
+ };
package/dist/media-center/media-center/handlers/categories-handler.svelte.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export class CategoriesHandler {
2
2
  _allCateogories = $state.raw([]);
3
+ _tagAssociations = $state.raw(new Map());
3
4
  _selectedCategoryId = $state.raw(null);
4
5
  get allCategories() {
5
6
  return this._allCateogories;
@@ -9,8 +10,14 @@ export class CategoriesHandler {
9
10
  .filter((c) => !c.parentId)
10
11
  .map((c) => {
11
12
  const childCategories = this._allCateogories.filter((cc) => cc.parentId === c.id);
12
- const children = childCategories.map((cc) => ({ id: cc.id, name: cc.name, image: cc.image, parentId: cc.parentId }));
13
- return { id: c.id, name: c.name, children, image: c.image };
13
+ const children = childCategories.map((cc) => ({
14
+ id: cc.id,
15
+ name: cc.name,
16
+ image: cc.image,
17
+ parentId: cc.parentId,
18
+ tag: this._tagAssociations.get(cc.id) || null
19
+ }));
20
+ return { id: c.id, name: c.name, image: c.image, tag: this._tagAssociations.get(c.id) || null, children };
14
21
  });
15
22
  }
16
23
  get selectedCategoryId() {
@@ -33,7 +40,15 @@ export class CategoriesHandler {
33
40
  };
34
41
  return selectedCategoryData;
35
42
  };
36
- init = async (categories) => {
43
+ init = async (data) => {
44
+ const { categories, tagAssociations } = data;
37
45
  this._allCateogories = categories;
46
+ const newTagAssociations = new Map();
47
+ for (const assoc of tagAssociations) {
48
+ if (assoc.tag) {
49
+ newTagAssociations.set(assoc.id, assoc.tag);
50
+ }
51
+ }
52
+ this._tagAssociations = newTagAssociations;
38
53
  };
39
54
  }
package/dist/media-center/media-center/handlers/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { CategoriesHandler } from './categories-handler.svelte';
2
+ export type { MediaCenterCategoryModel, MediaCenterSubCategoryModel, MediaCenterCategoryTagModel } from './categories-handler.svelte';
2
3
  export { MediaCenterSettingsHandler } from './media-center-settings-handler.svelte';
package/dist/media-center/media-center/header-footer/media-center-footer.svelte CHANGED
@@ -54,7 +54,7 @@ let { context } = $props();
54
54
  z-index: 1;
55
55
  background: #000000;
56
56
  padding-top: 0.5rem;
57
- padding-bottom: 2.625rem;
57
+ padding-bottom: 1.25rem;
58
58
  }
59
59
  .media-center-footer__button {
60
60
  position: relative;
package/dist/media-center/media-center/media-center-context.svelte.js CHANGED
@@ -119,7 +119,7 @@ export class MediaCenterContext {
119
119
  on.failed();
120
120
  return;
121
121
  }
122
- this.categoriesHandler.init(this._mediaCenterConfig.contentCategories);
122
+ this.categoriesHandler.init({ categories: this._mediaCenterConfig.contentCategories, tagAssociations: this._mediaCenterConfig.categoryTagAssociations });
123
123
  this.settingsHandler.updatePlayerColors(this._mediaCenterConfig.playerColors);
124
124
  on.initialized(this);
125
125
  this.initialized = true;
package/dist/media-center/media-center/menu/menu.svelte CHANGED
@@ -70,11 +70,11 @@ const styles = $derived.by(() => {
70
70
  </div>
71
71
  <div class="media-center-menu__tree">
72
72
  <div class="media-center-menu__tree-item">
73
- <div class="selector-item">
74
- <div class="selector-item__value">
73
+ <div class="menu-item">
74
+ <div class="menu-item__value">
75
75
  <div
76
- class="selector-item__text"
77
- class:selector-item__text--active={!context.categoriesHandler.selectedCategoryId}
76
+ class="menu-item__text"
77
+ class:menu-item__text--active={!context.categoriesHandler.selectedCategoryId}
78
78
  onclick={() => context.playRootFeed()}
79
79
  onkeydown={() => {}}
80
80
  role="button"
@@ -84,61 +84,43 @@ const styles = $derived.by(() => {
84
84
  </div>
85
85
  </div>
86
86
  </div>
87
- {#each context.categoriesHandler.categoriesGrouped as category (category.id)}
88
- <div class="media-center-menu__tree-item">
89
- <div class="selector-item">
90
- <div class="selector-item__value">
91
- <div class="selector-item__image">
92
- <ImageRound src={category.image} noBorders={true} />
93
- </div>
94
- <div
95
- class="selector-item__text"
96
- class:selector-item__text--active={context.categoriesHandler.selectedCategoryId === category.id}
97
- onclick={() => on.categorySelected(category.id)}
98
- onkeydown={() => {}}
99
- role="button"
100
- tabindex="0">
101
- {category.name}
102
- </div>
87
+ {#snippet categoryItem(category: { type: 'main'; value: MediaCenterCategoryModel } | { type: 'child'; value: MediaCenterSubCategoryModel })}
88
+ <div class="menu-item" class:menu-item--child={category.type === 'child'}>
89
+ <div class="menu-item__value" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
90
+ <div class="menu-item__image">
91
+ <ImageRound src={category.value.image} noBorders={true} />
103
92
  </div>
104
- <ButtonWrapper categoryId={category.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
105
- <button
106
- type="button"
107
- class="selector-item__collapser"
108
- class:selector-item__collapser--hidden={!category.children.length}
109
- onclick={(e) => handleCategoryExpaned(e, category.id)}>
110
- {#if categoriesExpandedMap[category.id]}
111
- <Icon src={IconChevronDownFilled} />
112
- {:else}
113
- <Icon src={IconChevronRightFilled} />
114
- {/if}
115
- </button>
116
- </ButtonWrapper>
93
+ <div class="menu-item__text" class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
94
+ {category.value.name}
95
+ </div>
96
+ {#if category.value.tag}
97
+ <div class="menu-item__tag" style="background-color: {category.value.tag.backgroundColor}; color: {category.value.tag.fontColor};">
98
+ {category.value.tag.text}
99
+ </div>
100
+ {/if}
117
101
  </div>
102
+ <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
103
+ <button
104
+ type="button"
105
+ class="menu-item__collapser"
106
+ class:menu-item__collapser--hidden={category.type === 'child' || !category.value.children.length}
107
+ onclick={(e) => handleCategoryExpaned(e, category.value.id)}>
108
+ {#if categoriesExpandedMap[category.value.id]}
109
+ <Icon src={IconChevronDownFilled} />
110
+ {:else}
111
+ <Icon src={IconChevronRightFilled} />
112
+ {/if}
113
+ </button>
114
+ </ButtonWrapper>
115
+ </div>
116
+ {/snippet}
117
+ {#each context.categoriesHandler.categoriesGrouped as category (category.id)}
118
+ <div class="media-center-menu__tree-item">
119
+ {@render categoryItem({ type: 'main', value: category })}
118
120
  {#if categoriesExpandedMap[category.id]}
119
121
  <div class="media-center-menu__tree-item" transition:slide|local>
120
122
  {#each category.children as subcategory (subcategory.id)}
121
- <div class="selector-item selector-item--child">
122
- <div class="selector-item__value">
123
- <div class="selector-item__image">
124
- <ImageRound src={subcategory.image} noBorders={true} />
125
- </div>
126
- <div
127
- class="selector-item__text"
128
- class:selector-item__text--active={context.categoriesHandler.selectedCategoryId === subcategory.id}
129
- onclick={() => on.categorySelected(subcategory.id)}
130
- onkeydown={() => {}}
131
- role="button"
132
- tabindex="0">
133
- {subcategory.name}
134
- </div>
135
- </div>
136
- <ButtonWrapper categoryId={subcategory.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
137
- <button type="button" class="selector-item__collapser selector-item__collapser--hidden">
138
- <Icon src={IconChevronRightFilled} />
139
- </button>
140
- </ButtonWrapper>
141
- </div>
123
+ {@render categoryItem({ type: 'child', value: subcategory })}
142
124
  {/each}
143
125
  </div>
144
126
  {/if}
@@ -253,62 +235,73 @@ const styles = $derived.by(() => {
253
235
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
254
236
  }
255
237
 
256
- .selector-item {
238
+ .menu-item {
257
239
  display: flex;
258
240
  -webkit-user-drag: none;
259
241
  user-select: none;
260
242
  height: 2.25rem;
261
- --_selector-item--text--font-size: 0.9375rem;
262
- --_selector-item--image--size: 1.5rem;
243
+ --_menu-item--text--font-size: 0.9375rem;
244
+ --_menu-item--image--size: 1.5rem;
263
245
  }
264
- .selector-item :global([contenteditable]) {
246
+ .menu-item :global([contenteditable]) {
265
247
  user-select: text;
266
248
  }
267
- .selector-item--child {
249
+ .menu-item--child {
268
250
  height: 2.125rem;
269
251
  padding-left: 1.25rem;
270
- --_selector-item--text--font-size: 0.875rem;
271
- --_selector-item--image--size: 1.375rem;
252
+ --_menu-item--text--font-size: 0.875rem;
253
+ --_menu-item--image--size: 1.375rem;
272
254
  }
273
- .selector-item__value {
255
+ .menu-item__value {
274
256
  display: flex;
275
257
  align-items: center;
276
258
  flex: 1;
277
- gap: 0.75rem;
278
259
  min-width: 0;
279
260
  cursor: pointer;
280
261
  }
281
- .selector-item__image {
282
- width: var(--_selector-item--image--size);
283
- min-width: var(--_selector-item--image--size);
284
- max-width: var(--_selector-item--image--size);
285
- height: var(--_selector-item--image--size);
286
- min-height: var(--_selector-item--image--size);
287
- max-height: var(--_selector-item--image--size);
262
+ .menu-item__image {
263
+ width: var(--_menu-item--image--size);
264
+ min-width: var(--_menu-item--image--size);
265
+ max-width: var(--_menu-item--image--size);
266
+ height: var(--_menu-item--image--size);
267
+ min-height: var(--_menu-item--image--size);
268
+ max-height: var(--_menu-item--image--size);
269
+ margin-right: 0.75rem;
288
270
  }
289
- .selector-item__text {
290
- flex: 1;
271
+ .menu-item__text {
291
272
  max-width: 100%;
292
273
  color: #ffffff;
293
- font-size: var(--_selector-item--text--font-size);
274
+ font-size: var(--_menu-item--text--font-size);
294
275
  font-weight: 400;
295
276
  text-align: left;
296
277
  text-overflow: ellipsis;
297
278
  width: 100%;
298
279
  white-space: nowrap;
299
280
  overflow: hidden;
300
- transition: text-shadow 120ms ease;
301
281
  }
302
- .selector-item__text:hover, .selector-item__text--active {
282
+ .menu-item__text {
283
+ width: max-content;
284
+ }
285
+ .menu-item__text:hover, .menu-item__text--active {
303
286
  font-weight: 600;
304
287
  letter-spacing: -0.5px;
305
288
  }
306
- .selector-item__collapser {
289
+ .menu-item__tag {
290
+ height: min-content;
291
+ width: min-content;
292
+ border-radius: 0.25rem;
293
+ padding: 0.3125rem 0.375rem;
294
+ font-size: 0.5rem;
295
+ font-weight: 600;
296
+ margin-top: -1rem;
297
+ margin-left: 0.25rem;
298
+ }
299
+ .menu-item__collapser {
307
300
  --icon--color: #ffffff;
308
301
  --icon--size: 1rem;
309
302
  padding: 0.5rem;
310
303
  }
311
- .selector-item__collapser--hidden {
304
+ .menu-item__collapser--hidden {
312
305
  visibility: hidden;
313
306
  }
314
307
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "12.0.0",
3
+ "version": "12.1.0",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",