@shoper/phoenix_design_system 1.3.8 → 1.3.10

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/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.js +31 -15
  2. package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +8 -5
  4. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.d.ts +5 -0
  6. package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js +32 -16
  7. package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +8 -5
  9. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  10. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.js CHANGED
@@ -7,30 +7,26 @@ var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
8
  var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
10
- var icon_constants = require('../../../icon/icon_constants.js');
11
10
  var file_picker_constants = require('../file_picker_constants.js');
12
11
 
13
12
  exports.HFile = class HFile extends phoenix_light_lit_element.PhoenixLightLitElement {
14
13
  constructor() {
15
14
  super(...arguments);
16
- this._handleClick = () => {
17
- const removeItemEvent = new CustomEvent(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, {
18
- bubbles: true,
19
- detail: {
20
- fileId: this.id
21
- }
22
- });
23
- this.dispatchEvent(removeItemEvent);
24
- };
15
+ this.maxFileNameLength = 12;
25
16
  }
26
17
  connectedCallback() {
27
18
  super.connectedCallback();
28
19
  this.setAttribute('aria-label', this.name);
29
20
  this.classList.add(file_picker_constants.FILE_ITEM_CSS_CLASSES.file);
21
+ this._separateNameFromExtension(this.name);
30
22
  }
31
23
  render() {
32
24
  return lit.html `
33
- <span class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileName}">${this.name}</span>
25
+ <span class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileName}"
26
+ >${this._fileNameWithoutExtension.length > this.maxFileNameLength
27
+ ? this._trimNameLength(this._fileNameWithoutExtension)
28
+ : this.name}</span
29
+ >
34
30
  <button
35
31
  class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
36
32
  @click="${this._handleClick}"
@@ -38,15 +34,31 @@ exports.HFile = class HFile extends phoenix_light_lit_element.PhoenixLightLitEle
38
34
  type="button"
39
35
  >
40
36
  ${this.removeButtonIconName
41
- ? lit.html `<h-icon
42
- class="${icon_constants.ICON_CSS_CLASSES.icon} ${file_picker_constants.FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
43
- icon-name=${this.removeButtonIconName}
44
- />`
37
+ ? lit.html `<h-icon class="${file_picker_constants.FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}" icon-name=${this.removeButtonIconName} />`
45
38
  : lit.nothing}
46
39
  ${this.removeButtonText}
47
40
  </button>
48
41
  `;
49
42
  }
43
+ _handleClick() {
44
+ const removeItemEvent = new CustomEvent(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, {
45
+ bubbles: true,
46
+ detail: {
47
+ fileId: this.id
48
+ }
49
+ });
50
+ this.dispatchEvent(removeItemEvent);
51
+ }
52
+ _separateNameFromExtension(name) {
53
+ const extensionDotPosition = name.lastIndexOf('.');
54
+ this._fileExtensionWithDot = name.substring(extensionDotPosition, name.length);
55
+ this._fileNameWithoutExtension = name.slice(0, extensionDotPosition);
56
+ }
57
+ _trimNameLength(nameToTrim) {
58
+ const trimedNameStart = nameToTrim.slice(0, 11);
59
+ const trimedNameEnd = nameToTrim.slice(-3);
60
+ return `${trimedNameStart}...${trimedNameEnd}${this._fileExtensionWithDot}`;
61
+ }
50
62
  };
51
63
  tslib_es6.__decorate([
52
64
  decorators.property({ type: String }),
@@ -64,6 +76,10 @@ tslib_es6.__decorate([
64
76
  decorators.property({ type: String, attribute: 'remove-button-icon-name' }),
65
77
  tslib_es6.__metadata("design:type", String)
66
78
  ], exports.HFile.prototype, "removeButtonIconName", void 0);
79
+ tslib_es6.__decorate([
80
+ decorators.property({ type: Number, attribute: 'max-file-name-length' }),
81
+ tslib_es6.__metadata("design:type", Number)
82
+ ], exports.HFile.prototype, "maxFileNameLength", void 0);
67
83
  exports.HFile = tslib_es6.__decorate([
68
84
  phoenix_custom_element.phoenixCustomElement('h-file')
69
85
  ], exports.HFile);
package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -9,15 +9,18 @@ class SelectOptionMapper {
9
9
  static toModel($option) {
10
10
  var _a;
11
11
  const optionContent = (_a = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent)) === null || _a === void 0 ? void 0 : _a.textContent;
12
+ const value = $option.getAttribute('value');
13
+ if (!value)
14
+ throw new Error('h-option must contain a unique value');
12
15
  if (!optionContent)
13
16
  throw new Error('h-options must contains a h-option-content element inside');
14
17
  return select_option.SelectOption.create({
15
- value: $option.value,
16
- disabled: $option.disabled,
17
- hidden: $option.hidden,
18
- inactive: $option.inactive,
18
+ value,
19
+ disabled: $option.hasAttribute('disabled'),
20
+ hidden: $option.hasAttribute('hidden'),
21
+ inactive: $option.hasAttribute('inactive'),
19
22
  content: optionContent,
20
- selected: $option.selected
23
+ selected: $option.hasAttribute('selected')
21
24
  });
22
25
  }
23
26
  }
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;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/file_picker/file/file.d.ts CHANGED
@@ -5,7 +5,12 @@ export declare class HFile extends PhoenixLightLitElement {
5
5
  id: string;
6
6
  removeButtonText: string;
7
7
  removeButtonIconName: string;
8
+ maxFileNameLength: number;
9
+ private _fileNameWithoutExtension;
10
+ private _fileExtensionWithDot;
8
11
  connectedCallback(): void;
9
12
  protected render(): TemplateResult;
10
13
  private _handleClick;
14
+ private _separateNameFromExtension;
15
+ private _trimNameLength;
11
16
  }
package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js CHANGED
@@ -3,30 +3,26 @@ import { html, nothing } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
6
- import { ICON_CSS_CLASSES } from '../../../icon/icon_constants.js';
7
- import { FILE_ITEM_EVENT_NAMES, FILE_ITEM_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES } from '../file_picker_constants.js';
6
+ import { FILE_ITEM_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES, FILE_ITEM_EVENT_NAMES } from '../file_picker_constants.js';
8
7
 
9
8
  let HFile = class HFile extends PhoenixLightLitElement {
10
9
  constructor() {
11
10
  super(...arguments);
12
- this._handleClick = () => {
13
- const removeItemEvent = new CustomEvent(FILE_ITEM_EVENT_NAMES.removed, {
14
- bubbles: true,
15
- detail: {
16
- fileId: this.id
17
- }
18
- });
19
- this.dispatchEvent(removeItemEvent);
20
- };
11
+ this.maxFileNameLength = 12;
21
12
  }
22
13
  connectedCallback() {
23
14
  super.connectedCallback();
24
15
  this.setAttribute('aria-label', this.name);
25
16
  this.classList.add(FILE_ITEM_CSS_CLASSES.file);
17
+ this._separateNameFromExtension(this.name);
26
18
  }
27
19
  render() {
28
20
  return html `
29
- <span class="${FILE_ITEM_CSS_CLASSES.fileName}">${this.name}</span>
21
+ <span class="${FILE_ITEM_CSS_CLASSES.fileName}"
22
+ >${this._fileNameWithoutExtension.length > this.maxFileNameLength
23
+ ? this._trimNameLength(this._fileNameWithoutExtension)
24
+ : this.name}</span
25
+ >
30
26
  <button
31
27
  class="${FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
32
28
  @click="${this._handleClick}"
@@ -34,15 +30,31 @@ let HFile = class HFile extends PhoenixLightLitElement {
34
30
  type="button"
35
31
  >
36
32
  ${this.removeButtonIconName
37
- ? html `<h-icon
38
- class="${ICON_CSS_CLASSES.icon} ${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
39
- icon-name=${this.removeButtonIconName}
40
- />`
33
+ ? html `<h-icon class="${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}" icon-name=${this.removeButtonIconName} />`
41
34
  : nothing}
42
35
  ${this.removeButtonText}
43
36
  </button>
44
37
  `;
45
38
  }
39
+ _handleClick() {
40
+ const removeItemEvent = new CustomEvent(FILE_ITEM_EVENT_NAMES.removed, {
41
+ bubbles: true,
42
+ detail: {
43
+ fileId: this.id
44
+ }
45
+ });
46
+ this.dispatchEvent(removeItemEvent);
47
+ }
48
+ _separateNameFromExtension(name) {
49
+ const extensionDotPosition = name.lastIndexOf('.');
50
+ this._fileExtensionWithDot = name.substring(extensionDotPosition, name.length);
51
+ this._fileNameWithoutExtension = name.slice(0, extensionDotPosition);
52
+ }
53
+ _trimNameLength(nameToTrim) {
54
+ const trimedNameStart = nameToTrim.slice(0, 11);
55
+ const trimedNameEnd = nameToTrim.slice(-3);
56
+ return `${trimedNameStart}...${trimedNameEnd}${this._fileExtensionWithDot}`;
57
+ }
46
58
  };
47
59
  __decorate([
48
60
  property({ type: String }),
@@ -60,6 +72,10 @@ __decorate([
60
72
  property({ type: String, attribute: 'remove-button-icon-name' }),
61
73
  __metadata("design:type", String)
62
74
  ], HFile.prototype, "removeButtonIconName", void 0);
75
+ __decorate([
76
+ property({ type: Number, attribute: 'max-file-name-length' }),
77
+ __metadata("design:type", Number)
78
+ ], HFile.prototype, "maxFileNameLength", void 0);
63
79
  HFile = __decorate([
64
80
  phoenixCustomElement('h-file')
65
81
  ], HFile);
package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/model/select_option_mapper.js CHANGED
@@ -5,15 +5,18 @@ class SelectOptionMapper {
5
5
  static toModel($option) {
6
6
  var _a;
7
7
  const optionContent = (_a = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent)) === null || _a === void 0 ? void 0 : _a.textContent;
8
+ const value = $option.getAttribute('value');
9
+ if (!value)
10
+ throw new Error('h-option must contain a unique value');
8
11
  if (!optionContent)
9
12
  throw new Error('h-options must contains a h-option-content element inside');
10
13
  return SelectOption.create({
11
- value: $option.value,
12
- disabled: $option.disabled,
13
- hidden: $option.hidden,
14
- inactive: $option.inactive,
14
+ value,
15
+ disabled: $option.hasAttribute('disabled'),
16
+ hidden: $option.hasAttribute('hidden'),
17
+ inactive: $option.hasAttribute('inactive'),
15
18
  content: optionContent,
16
- selected: $option.selected
19
+ selected: $option.hasAttribute('selected')
17
20
  });
18
21
  }
19
22
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.3.8",
5
+ "version": "1.3.10",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",