@shoper/phoenix_design_system 0.25.0-5 → 0.25.0-7

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.
@@ -5,30 +5,38 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
7
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
+ var decorators_js = require('@lit/reactive-element/decorators.js');
8
9
  var btn_controller = require('../../controllers/btn_controller.js');
9
10
  var tag_constants = require('./tag_constants.js');
10
11
 
11
12
  exports.HTag = class HTag extends phoenix_light_lit_element.PhoenixLightLitElement {
12
13
  constructor() {
13
14
  super(...arguments);
14
- this._isRemovable = false;
15
- this._removeTag = () => {
16
- this.remove();
15
+ this.clickable = false;
16
+ this.removable = false;
17
+ this._handleClick = () => {
18
+ const eventName = this.removable ? tag_constants.TAG_EVENT_NAMES.remove : tag_constants.TAG_EVENT_NAMES.click;
19
+ this.dispatchEvent(new CustomEvent(eventName));
17
20
  };
18
21
  }
19
22
  connectedCallback() {
20
23
  super.connectedCallback();
21
24
  this.classList.add(tag_constants.TAG_CSS_CLASSES.tag);
22
- this._isRemovable = !!this.querySelector('h-tag-remove-button');
23
- if (!this._isRemovable)
25
+ this.removable = !!this.querySelector('h-tag-remove-button');
26
+ if (!this.removable && !this.clickable)
24
27
  return;
25
28
  this._setupEvents();
26
- this._btnController = new btn_controller.BtnController(this, this._removeTag);
29
+ this._btnController = new btn_controller.BtnController(this, this._handleClick);
30
+ this.classList.add(tag_constants.TAG_CSS_CLASSES.tagInteractive);
27
31
  }
28
32
  _setupEvents() {
29
- this.addEventListener('click', this._removeTag);
33
+ this.addEventListener('click', this._handleClick);
30
34
  }
31
35
  };
36
+ tslib_es6.__decorate([
37
+ decorators_js.property({ type: Boolean }),
38
+ tslib_es6.__metadata("design:type", Boolean)
39
+ ], exports.HTag.prototype, "clickable", void 0);
32
40
  exports.HTag = tslib_es6.__decorate([
33
41
  phoenix_custom_element.phoenixCustomElement('h-tag')
34
42
  ], exports.HTag);
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -8,8 +8,13 @@ const TAG_CSS_CLASSES = {
8
8
  tagRemoveButton: `${tagBaseClass}__remove-button`,
9
9
  tagInteractive: `${tagBaseClass}_interactive`
10
10
  };
11
- const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
11
+ const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
12
+ const TAG_EVENT_NAMES = {
13
+ click: 'click',
14
+ remove: 'remove'
15
+ };
12
16
 
13
17
  exports.TAG_CSS_CLASSES = TAG_CSS_CLASSES;
18
+ exports.TAG_EVENT_NAMES = TAG_EVENT_NAMES;
14
19
  exports.TAG_REMOVE_ICON_SLOT_NAME = TAG_REMOVE_ICON_SLOT_NAME;
15
20
  //# sourceMappingURL=tag_constants.js.map
@@ -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;"}
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;"}
@@ -1,8 +1,9 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  export declare class HTag extends PhoenixLightLitElement {
3
- private _isRemovable;
3
+ clickable: boolean;
4
+ private removable;
4
5
  private _btnController;
5
6
  connectedCallback(): void;
6
7
  private _setupEvents;
7
- private _removeTag;
8
+ private _handleClick;
8
9
  }
@@ -1,30 +1,38 @@
1
- import { __decorate } from '../../../../../external/tslib/tslib.es6.js';
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
3
3
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
4
+ import { property } from '@lit/reactive-element/decorators.js';
4
5
  import { BtnController } from '../../controllers/btn_controller.js';
5
- import { TAG_CSS_CLASSES } from './tag_constants.js';
6
+ import { TAG_EVENT_NAMES, TAG_CSS_CLASSES } from './tag_constants.js';
6
7
 
7
8
  let HTag = class HTag extends PhoenixLightLitElement {
8
9
  constructor() {
9
10
  super(...arguments);
10
- this._isRemovable = false;
11
- this._removeTag = () => {
12
- this.remove();
11
+ this.clickable = false;
12
+ this.removable = false;
13
+ this._handleClick = () => {
14
+ const eventName = this.removable ? TAG_EVENT_NAMES.remove : TAG_EVENT_NAMES.click;
15
+ this.dispatchEvent(new CustomEvent(eventName));
13
16
  };
14
17
  }
15
18
  connectedCallback() {
16
19
  super.connectedCallback();
17
20
  this.classList.add(TAG_CSS_CLASSES.tag);
18
- this._isRemovable = !!this.querySelector('h-tag-remove-button');
19
- if (!this._isRemovable)
21
+ this.removable = !!this.querySelector('h-tag-remove-button');
22
+ if (!this.removable && !this.clickable)
20
23
  return;
21
24
  this._setupEvents();
22
- this._btnController = new BtnController(this, this._removeTag);
25
+ this._btnController = new BtnController(this, this._handleClick);
26
+ this.classList.add(TAG_CSS_CLASSES.tagInteractive);
23
27
  }
24
28
  _setupEvents() {
25
- this.addEventListener('click', this._removeTag);
29
+ this.addEventListener('click', this._handleClick);
26
30
  }
27
31
  };
32
+ __decorate([
33
+ property({ type: Boolean }),
34
+ __metadata("design:type", Boolean)
35
+ ], HTag.prototype, "clickable", void 0);
28
36
  HTag = __decorate([
29
37
  phoenixCustomElement('h-tag')
30
38
  ], HTag);
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,4CAAgD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -4,3 +4,7 @@ export declare const TAG_CSS_CLASSES: {
4
4
  readonly tagInteractive: "tag_interactive";
5
5
  };
6
6
  export declare const TAG_REMOVE_ICON_SLOT_NAME = "remove-icon";
7
+ export declare const TAG_EVENT_NAMES: {
8
+ readonly click: "click";
9
+ readonly remove: "remove";
10
+ };
@@ -4,7 +4,11 @@ const TAG_CSS_CLASSES = {
4
4
  tagRemoveButton: `${tagBaseClass}__remove-button`,
5
5
  tagInteractive: `${tagBaseClass}_interactive`
6
6
  };
7
- const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
7
+ const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
8
+ const TAG_EVENT_NAMES = {
9
+ click: 'click',
10
+ remove: 'remove'
11
+ };
8
12
 
9
- export { TAG_CSS_CLASSES, TAG_REMOVE_ICON_SLOT_NAME };
13
+ export { TAG_CSS_CLASSES, TAG_EVENT_NAMES, TAG_REMOVE_ICON_SLOT_NAME };
10
14
  //# sourceMappingURL=tag_constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
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": "0.25.0-5",
5
+ "version": "0.25.0-7",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",