@shoper/phoenix_design_system 1.3.8 → 1.3.9

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/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/esm/packages/phoenix/src/components/form/file_picker/file/file.d.ts +5 -0
  4. package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js +32 -16
  5. package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js.map +1 -1
  6. 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/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/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.9",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",