@shoper/phoenix_design_system 1.17.16 → 1.17.17-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 (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +31 -12
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts +1 -0
  4. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +31 -12
  5. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  6. package/package.json +47 -47
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -42,6 +42,20 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
42
42
  this._selectedOptionsObserver = new observer.Observer(this._handleSelectedOptionChanged);
43
43
  this.selectedOptions$.subscribe(this._selectedOptionsObserver);
44
44
  }
45
+ _renderOptionContent(option) {
46
+ const parts = (option.content || '')
47
+ .split('\n')
48
+ .map((line) => line.trim())
49
+ .filter((line) => line.length > 0);
50
+ const name = parts[0] || '';
51
+ const addons = parts.slice(1).join(' ');
52
+ return litHtml.html `
53
+ <div class="custom-layout">
54
+ <span class="custom-name">${name}</span>
55
+ ${addons ? litHtml.html `<span class="custom-addons">${addons}</span>` : ''}
56
+ </div>
57
+ `;
58
+ }
45
59
  disconnectedCallback() {
46
60
  var _a;
47
61
  super.disconnectedCallback();
@@ -53,19 +67,24 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
53
67
  return litHtml.html `
54
68
  ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
55
69
  var _a;
56
- if (!selectOptions.length)
70
+ if (!selectOptions.length) {
57
71
  return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
58
- return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
59
- ${this.isMultiselect
60
- ? selectOptions.map((option) => litHtml.html ` <li>
61
- <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
62
- ${option.content}
63
-
64
- <h-tag-remove-button></h-tag-remove-button>
65
- </h-tag>
66
- </li>`)
67
- : litHtml.html ` <li>${selectOptions[0].content}</li>`}
68
- </ul>`;
72
+ }
73
+ return litHtml.html `
74
+ <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
75
+ ${this.isMultiselect
76
+ ? selectOptions.map((option) => {
77
+ const content = this._renderOptionContent(option);
78
+ return litHtml.html `
79
+ <li>
80
+ <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
81
+ ${content}
82
+ <h-tag-remove-button></h-tag-remove-button>
83
+ </h-tag>
84
+ </li>`;
85
+ })
86
+ : litHtml.html `<li>${this._renderOptionContent(selectOptions[0])}</li>`}
87
+ </ul>`;
69
88
  })}
70
89
 
71
90
  <h-icon icon-name="icon-chevron-down"></h-icon>
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare class HSelectToggler extends PhoenixLightLitElement {
11
11
  private _subscribeObserver;
12
12
  private _handleSelectedOptionChanged;
13
13
  private _dispatchOptionDeselect;
14
+ private _renderOptionContent;
14
15
  disconnectedCallback(): void;
15
16
  render(): TemplateResult | undefined;
16
17
  }
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -38,6 +38,20 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
38
38
  this._selectedOptionsObserver = new Observer(this._handleSelectedOptionChanged);
39
39
  this.selectedOptions$.subscribe(this._selectedOptionsObserver);
40
40
  }
41
+ _renderOptionContent(option) {
42
+ const parts = (option.content || '')
43
+ .split('\n')
44
+ .map((line) => line.trim())
45
+ .filter((line) => line.length > 0);
46
+ const name = parts[0] || '';
47
+ const addons = parts.slice(1).join(' ');
48
+ return html `
49
+ <div class="custom-layout">
50
+ <span class="custom-name">${name}</span>
51
+ ${addons ? html `<span class="custom-addons">${addons}</span>` : ''}
52
+ </div>
53
+ `;
54
+ }
41
55
  disconnectedCallback() {
42
56
  var _a;
43
57
  super.disconnectedCallback();
@@ -49,19 +63,24 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
49
63
  return html `
50
64
  ${observe(this.selectedOptions$, (selectOptions) => {
51
65
  var _a;
52
- if (!selectOptions.length)
66
+ if (!selectOptions.length) {
53
67
  return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
54
- return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
55
- ${this.isMultiselect
56
- ? selectOptions.map((option) => html ` <li>
57
- <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
58
- ${option.content}
59
-
60
- <h-tag-remove-button></h-tag-remove-button>
61
- </h-tag>
62
- </li>`)
63
- : html ` <li>${selectOptions[0].content}</li>`}
64
- </ul>`;
68
+ }
69
+ return html `
70
+ <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
71
+ ${this.isMultiselect
72
+ ? selectOptions.map((option) => {
73
+ const content = this._renderOptionContent(option);
74
+ return html `
75
+ <li>
76
+ <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
77
+ ${content}
78
+ <h-tag-remove-button></h-tag-remove-button>
79
+ </h-tag>
80
+ </li>`;
81
+ })
82
+ : html `<li>${this._renderOptionContent(selectOptions[0])}</li>`}
83
+ </ul>`;
65
84
  })}
66
85
 
67
86
  <h-icon icon-name="icon-chevron-down"></h-icon>
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -1,48 +1,48 @@
1
1
  {
2
- "name": "@shoper/phoenix_design_system",
3
- "packageManager": "yarn@3.2.0",
4
- "sideEffects": false,
5
- "version": "1.17.16",
6
- "description": "phoenix design system",
7
- "author": "zefirek",
8
- "license": "MIT",
9
- "source": "src/index.ts",
10
- "main": "build/cjs/packages/phoenix/src/index.js",
11
- "module": "build/esm/packages/phoenix/src/index.js",
12
- "jsnext:main": "build/esm/packages/phoenix/src/index.js",
13
- "types": "build/esm/packages/phoenix/src/index.d.ts",
14
- "files": [
15
- "build"
16
- ],
17
- "engines": {
18
- "node": ">=14",
19
- "npm": ">=6"
20
- },
21
- "scripts": {
22
- "storybook": "NODE_OPTIONS=--openssl-legacy-provider && start-storybook --no-open --port 6007",
23
- "build": "rimraf ./build/ && tsc --project tsconfig.build.json && rollup --config rollup.config.js",
24
- "watch": "rollup --config rollup.config.js --watch",
25
- "tests:unit": "jest --max-workers=1 -c .config/jest/jest.config.js",
26
- "watch:tests:unit": "jest --watch -c .config/jest/jest.config.js"
27
- },
28
- "peerDependencies": {
29
- "@dreamcommerce/utilities": "^1.0.0",
30
- "@splidejs/splide": "4.0.7",
31
- "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
- },
33
- "devDependencies": {
34
- "@dreamcommerce/utilities": "workspace:^",
35
- "@shoper/jest_config": "workspace:^",
36
- "@shoper/tsconfig": "workspace:^",
37
- "@splidejs/splide": "4.0.7",
38
- "@splidejs/splide-extension-auto-scroll": "0.5.3",
39
- "@storybook/web-components": "6.5.7",
40
- "lit": "2.4.0"
41
- },
42
- "browserslist": [
43
- "last 3 version, not ie <= 11, not dead"
44
- ],
45
- "dependencies": {
46
- "classnames": "2.3.1"
47
- }
48
- }
2
+ "name": "@shoper/phoenix_design_system",
3
+ "packageManager": "yarn@3.2.0",
4
+ "sideEffects": false,
5
+ "version": "1.17.17-0",
6
+ "description": "phoenix design system",
7
+ "author": "zefirek",
8
+ "license": "MIT",
9
+ "source": "src/index.ts",
10
+ "main": "build/cjs/packages/phoenix/src/index.js",
11
+ "module": "build/esm/packages/phoenix/src/index.js",
12
+ "jsnext:main": "build/esm/packages/phoenix/src/index.js",
13
+ "types": "build/esm/packages/phoenix/src/index.d.ts",
14
+ "files": [
15
+ "build"
16
+ ],
17
+ "engines": {
18
+ "node": ">=14",
19
+ "npm": ">=6"
20
+ },
21
+ "scripts": {
22
+ "storybook": "NODE_OPTIONS=--openssl-legacy-provider && start-storybook --no-open --port 6007",
23
+ "build": "rimraf ./build/ && tsc --project tsconfig.build.json && rollup --config rollup.config.js",
24
+ "watch": "rollup --config rollup.config.js --watch",
25
+ "tests:unit": "jest --max-workers=1 -c .config/jest/jest.config.js",
26
+ "watch:tests:unit": "jest --watch -c .config/jest/jest.config.js"
27
+ },
28
+ "peerDependencies": {
29
+ "@dreamcommerce/utilities": "^1.0.0",
30
+ "@splidejs/splide": "4.0.7",
31
+ "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
+ },
33
+ "devDependencies": {
34
+ "@dreamcommerce/utilities": "^1.23.0",
35
+ "@shoper/jest_config": "^0.0.0",
36
+ "@shoper/tsconfig": "^0.0.0",
37
+ "@splidejs/splide": "4.0.7",
38
+ "@splidejs/splide-extension-auto-scroll": "0.5.3",
39
+ "@storybook/web-components": "6.5.7",
40
+ "lit": "2.4.0"
41
+ },
42
+ "browserslist": [
43
+ "last 3 version, not ie <= 11, not dead"
44
+ ],
45
+ "dependencies": {
46
+ "classnames": "2.3.1"
47
+ }
48
+ }