@shoper/phoenix_design_system 1.17.3-6 → 1.17.4-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.
- package/build/cjs/packages/phoenix/src/components/form/input/input_control.js +5 -1
- package/build/cjs/packages/phoenix/src/components/form/input/input_control.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js +0 -47
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +1 -6
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js +10 -0
- package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js +10 -0
- package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js +0 -2
- package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/tabs/tabs.js +2 -8
- package/build/cjs/packages/phoenix/src/components/tabs/tabs.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/input/input_control.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/input/input_control.js +5 -1
- package/build/esm/packages/phoenix/src/components/form/input/input_control.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +0 -9
- package/build/esm/packages/phoenix/src/components/messages/base_message.js +2 -49
- package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +2 -5
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/messages/hints/hint.js +10 -0
- package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js +10 -0
- package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/portal/portal_constants.js +1 -2
- package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/tabs/tabs.js +2 -8
- package/build/esm/packages/phoenix/src/components/tabs/tabs.js.map +1 -1
- package/package.json +2 -2
|
@@ -87,7 +87,7 @@ exports.HInputControl = class HInputControl extends phoenix_light_lit_element.Ph
|
|
|
87
87
|
}
|
|
88
88
|
updated(_changedProperties) {
|
|
89
89
|
super.updated(_changedProperties);
|
|
90
|
-
this.mask ? this.enableMask() : this.disableMask();
|
|
90
|
+
this.mask && !this.maskDisabled ? this.enableMask() : this.disableMask();
|
|
91
91
|
}
|
|
92
92
|
enableMask() {
|
|
93
93
|
if (this._inputMaskController)
|
|
@@ -167,6 +167,10 @@ tslib_es6.__decorate([
|
|
|
167
167
|
decorators.property({ type: String }),
|
|
168
168
|
tslib_es6.__metadata("design:type", String)
|
|
169
169
|
], exports.HInputControl.prototype, "mask", void 0);
|
|
170
|
+
tslib_es6.__decorate([
|
|
171
|
+
decorators.property({ type: Boolean, attribute: 'mask-disabled' }),
|
|
172
|
+
tslib_es6.__metadata("design:type", Boolean)
|
|
173
|
+
], exports.HInputControl.prototype, "maskDisabled", void 0);
|
|
170
174
|
tslib_es6.__decorate([
|
|
171
175
|
decorators.property({ type: String }),
|
|
172
176
|
tslib_es6.__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,16 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
var lit = require('lit');
|
|
7
6
|
var decorators = require('lit/decorators');
|
|
8
7
|
var utilities = require('@dreamcommerce/utilities');
|
|
9
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
10
|
-
var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
|
|
11
9
|
var portal_constants = require('../portal/portal_constants.js');
|
|
12
10
|
var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
|
|
13
11
|
var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
|
|
14
12
|
var base_message_constants = require('./base_message_constants.js');
|
|
15
|
-
var ref = require('lit/directives/ref');
|
|
16
13
|
|
|
17
14
|
class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
18
15
|
constructor() {
|
|
@@ -23,22 +20,9 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
23
20
|
this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
|
|
24
21
|
this.mouseonly = false;
|
|
25
22
|
this.tabindex = '-1';
|
|
26
|
-
this._messageId = v4['default']();
|
|
27
|
-
this._tooltipRef = ref.createRef();
|
|
28
|
-
this._handleChildrenAriaAttributes = () => {
|
|
29
|
-
[...this.children].forEach((child) => {
|
|
30
|
-
if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
|
|
31
|
-
return;
|
|
32
|
-
child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
23
|
this._setupEventListeners = () => {
|
|
36
|
-
var _a, _b;
|
|
37
24
|
this.addEventListener('mouseenter', this.open);
|
|
38
25
|
this.addEventListener('mouseleave', this.close);
|
|
39
|
-
this.addEventListener('keydown', this._closeFromKeyboard);
|
|
40
|
-
(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
|
|
41
|
-
(_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
|
|
42
26
|
if (!this.mouseonly) {
|
|
43
27
|
this.addEventListener('focusin', this.open);
|
|
44
28
|
this.addEventListener('focusout', this.close);
|
|
@@ -59,13 +43,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
59
43
|
this.opened = true;
|
|
60
44
|
}, base_message_constants.MESSAGE_SHOW_DELAY_IN_MS);
|
|
61
45
|
};
|
|
62
|
-
this._closeFromKeyboard = (ev) => {
|
|
63
|
-
if (ev.key !== 'Escape' || !this.opened)
|
|
64
|
-
return;
|
|
65
|
-
ev.preventDefault();
|
|
66
|
-
ev.stopPropagation();
|
|
67
|
-
this.close();
|
|
68
|
-
};
|
|
69
46
|
this.close = () => {
|
|
70
47
|
this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
|
|
71
48
|
clearTimeout(this._openTimeout);
|
|
@@ -106,14 +83,8 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
106
83
|
offset: this.offset
|
|
107
84
|
});
|
|
108
85
|
this.setAttribute('tabindex', this.tabindex);
|
|
109
|
-
if (!this._$baseMessageContent)
|
|
110
|
-
this._$baseMessageContent = [...this.children].find((child) => base_message_constants.MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
|
|
111
86
|
this._setupEventListeners();
|
|
112
87
|
}
|
|
113
|
-
firstUpdated(props) {
|
|
114
|
-
super.firstUpdated(props);
|
|
115
|
-
this._handleChildrenAriaAttributes();
|
|
116
|
-
}
|
|
117
88
|
static _appendMessagePortal() {
|
|
118
89
|
const $messagePortalTarget = document.querySelector(`[name="${base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME}"]`);
|
|
119
90
|
if ($messagePortalTarget)
|
|
@@ -122,24 +93,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
122
93
|
$portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
|
|
123
94
|
document.body.appendChild($portalTarget);
|
|
124
95
|
}
|
|
125
|
-
disconnectedCallback() {
|
|
126
|
-
var _a, _b;
|
|
127
|
-
super.disconnectedCallback();
|
|
128
|
-
(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
|
|
129
|
-
(_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
|
|
130
|
-
}
|
|
131
|
-
render() {
|
|
132
|
-
var _a;
|
|
133
|
-
super.render();
|
|
134
|
-
return lit.html `
|
|
135
|
-
<span ${ref.ref(this._tooltipRef)} id="${this._messageId}" class="${base_message_constants.SCREEN_READER_ONLY_CLASS_NAME}" role="tooltip">
|
|
136
|
-
${utilities.DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
|
|
137
|
-
</span>
|
|
138
|
-
<h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
|
|
139
|
-
${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
|
|
140
|
-
</h-portal>
|
|
141
|
-
`;
|
|
142
|
-
}
|
|
143
96
|
}
|
|
144
97
|
tslib_es6.__decorate([
|
|
145
98
|
decorators.property({ type: Boolean, reflect: true }),
|
|
@@ -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
|
|
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var portal_constants = require('../portal/portal_constants.js');
|
|
6
5
|
var hint_constants = require('./hints/hint_constants.js');
|
|
7
6
|
var tooltip_constants = require('./tooltips/tooltip_constants.js');
|
|
8
7
|
|
|
@@ -11,20 +10,16 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
|
|
|
11
10
|
const MESSAGE_REMOVED_CLASS_NAME = `removed`;
|
|
12
11
|
const DEFAULT_MESSAGE_OFFSET = 10;
|
|
13
12
|
const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
|
|
14
|
-
const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
|
|
15
13
|
const MESSAGE_SHOW_DELAY_IN_MS = 100;
|
|
16
14
|
const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
|
|
17
|
-
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
18
|
-
const SCREEN_READER_ONLY_CLASS_NAME = 'sr-only';
|
|
15
|
+
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
19
16
|
|
|
20
17
|
exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
|
|
21
18
|
exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
|
|
22
|
-
exports.LIST_OF_MESSAGE_CHILDREN = LIST_OF_MESSAGE_CHILDREN;
|
|
23
19
|
exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
|
|
24
20
|
exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
|
|
25
21
|
exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
|
|
26
22
|
exports.MESSAGE_REMOVED_CLASS_NAME = MESSAGE_REMOVED_CLASS_NAME;
|
|
27
23
|
exports.MESSAGE_SHOW_DELAY_IN_MS = MESSAGE_SHOW_DELAY_IN_MS;
|
|
28
24
|
exports.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
|
|
29
|
-
exports.SCREEN_READER_ONLY_CLASS_NAME = SCREEN_READER_ONLY_CLASS_NAME;
|
|
30
25
|
//# sourceMappingURL=base_message_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;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;"}
|
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
7
|
+
var litHtml = require('lit-html');
|
|
7
8
|
var hint_constants = require('./hint_constants.js');
|
|
9
|
+
var base_message_constants = require('../base_message_constants.js');
|
|
8
10
|
var base_message = require('../base_message.js');
|
|
9
11
|
|
|
10
12
|
exports.HHint = class HHint extends base_message.BaseMessage {
|
|
@@ -16,6 +18,14 @@ exports.HHint = class HHint extends base_message.BaseMessage {
|
|
|
16
18
|
super.connectedCallback(hint_constants.HINT_CLASS_NAME);
|
|
17
19
|
this.classList.add(hint_constants.HINT_CLASS_NAME);
|
|
18
20
|
}
|
|
21
|
+
render() {
|
|
22
|
+
super.render();
|
|
23
|
+
return litHtml.html `
|
|
24
|
+
<h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
|
|
25
|
+
${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
|
|
26
|
+
</h-portal>
|
|
27
|
+
`;
|
|
28
|
+
}
|
|
19
29
|
};
|
|
20
30
|
exports.HHint = tslib_es6.__decorate([
|
|
21
31
|
phoenix_custom_element.phoenixCustomElement(hint_constants.HINT_ELEMENT_NAME),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;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,+CAAmD;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;"}
|
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
7
|
+
var litHtml = require('lit-html');
|
|
7
8
|
var tooltip_constants = require('./tooltip_constants.js');
|
|
9
|
+
var base_message_constants = require('../base_message_constants.js');
|
|
8
10
|
var base_message = require('../base_message.js');
|
|
9
11
|
|
|
10
12
|
exports.HTooltip = class HTooltip extends base_message.BaseMessage {
|
|
@@ -12,6 +14,14 @@ exports.HTooltip = class HTooltip extends base_message.BaseMessage {
|
|
|
12
14
|
super.connectedCallback(tooltip_constants.TOOLTIP_CLASS_NAME);
|
|
13
15
|
this.classList.add(tooltip_constants.TOOLTIP_CLASS_NAME);
|
|
14
16
|
}
|
|
17
|
+
render() {
|
|
18
|
+
super.render();
|
|
19
|
+
return litHtml.html `
|
|
20
|
+
<h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
|
|
21
|
+
${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
|
|
22
|
+
</h-portal>
|
|
23
|
+
`;
|
|
24
|
+
}
|
|
15
25
|
};
|
|
16
26
|
exports.HTooltip = tslib_es6.__decorate([
|
|
17
27
|
phoenix_custom_element.phoenixCustomElement(tooltip_constants.TOOLTIP_ELEMENT_NAME)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,11 +7,9 @@ const PORTAL_EVENTS = {
|
|
|
7
7
|
close: 'close'
|
|
8
8
|
};
|
|
9
9
|
const PORTAL_TARGET_NAME_PROP = 'name';
|
|
10
|
-
const PORTAL_COMPONENT_NAME = 'h-portal';
|
|
11
10
|
const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
|
|
12
11
|
const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
|
|
13
12
|
|
|
14
|
-
exports.PORTAL_COMPONENT_NAME = PORTAL_COMPONENT_NAME;
|
|
15
13
|
exports.PORTAL_EVENTS = PORTAL_EVENTS;
|
|
16
14
|
exports.PORTAL_TARGET_ATTRIBUTE_NAME = PORTAL_TARGET_ATTRIBUTE_NAME;
|
|
17
15
|
exports.PORTAL_TARGET_COMPONENT_NAME = PORTAL_TARGET_COMPONENT_NAME;
|
|
@@ -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;
|
|
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;"}
|
|
@@ -21,8 +21,6 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
|
|
|
21
21
|
if (currentTabIndex === undefined)
|
|
22
22
|
return;
|
|
23
23
|
const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
|
|
24
|
-
if (newTabIndex === undefined)
|
|
25
|
-
return;
|
|
26
24
|
utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
|
|
27
25
|
utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
|
|
28
26
|
this._$tabs[newTabIndex].focus();
|
|
@@ -59,14 +57,10 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
|
|
|
59
57
|
return this._$tabs.findIndex(($tab) => $tab === focusedElement);
|
|
60
58
|
}
|
|
61
59
|
_getNextTabIndex(currentTabIndex) {
|
|
62
|
-
|
|
63
|
-
return;
|
|
64
|
-
return currentTabIndex + 1;
|
|
60
|
+
return (currentTabIndex + 1) % this._$tabs.length;
|
|
65
61
|
}
|
|
66
62
|
_getPrevTabIndex(currentTabIndex) {
|
|
67
|
-
|
|
68
|
-
return;
|
|
69
|
-
return currentTabIndex - 1;
|
|
63
|
+
return (currentTabIndex - 1 + this._$tabs.length) % this._$tabs.length;
|
|
70
64
|
}
|
|
71
65
|
_setupEvents() {
|
|
72
66
|
document.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -83,7 +83,7 @@ let HInputControl = class HInputControl extends PhoenixLightLitElement {
|
|
|
83
83
|
}
|
|
84
84
|
updated(_changedProperties) {
|
|
85
85
|
super.updated(_changedProperties);
|
|
86
|
-
this.mask ? this.enableMask() : this.disableMask();
|
|
86
|
+
this.mask && !this.maskDisabled ? this.enableMask() : this.disableMask();
|
|
87
87
|
}
|
|
88
88
|
enableMask() {
|
|
89
89
|
if (this._inputMaskController)
|
|
@@ -163,6 +163,10 @@ __decorate([
|
|
|
163
163
|
property({ type: String }),
|
|
164
164
|
__metadata("design:type", String)
|
|
165
165
|
], HInputControl.prototype, "mask", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
property({ type: Boolean, attribute: 'mask-disabled' }),
|
|
168
|
+
__metadata("design:type", Boolean)
|
|
169
|
+
], HInputControl.prototype, "maskDisabled", void 0);
|
|
166
170
|
__decorate([
|
|
167
171
|
property({ type: String }),
|
|
168
172
|
__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,7 +1,6 @@
|
|
|
1
1
|
import { IBaseMessage } from './base_message_types';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
3
|
import type { TDirection } from '@dreamcommerce/utilities';
|
|
4
|
-
import { PropertyValues, TemplateResult } from 'lit';
|
|
5
4
|
export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
|
|
6
5
|
opened: boolean;
|
|
7
6
|
portalTarget: string;
|
|
@@ -9,7 +8,6 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
|
|
|
9
8
|
offset: number;
|
|
10
9
|
mouseonly: boolean;
|
|
11
10
|
tabindex: string;
|
|
12
|
-
private _messageId;
|
|
13
11
|
private _positionController;
|
|
14
12
|
private _clickOutsideController;
|
|
15
13
|
private _$messageContent;
|
|
@@ -18,18 +16,11 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
|
|
|
18
16
|
private _shouldDelayClosing;
|
|
19
17
|
private _closeTimeout;
|
|
20
18
|
private _messageComponentName;
|
|
21
|
-
private _$baseMessageContent?;
|
|
22
|
-
private _tooltipRef;
|
|
23
19
|
constructor();
|
|
24
20
|
connectedCallback(messageComponentName?: string): void;
|
|
25
|
-
firstUpdated(props: PropertyValues): void;
|
|
26
|
-
private _handleChildrenAriaAttributes;
|
|
27
21
|
private static _appendMessagePortal;
|
|
28
22
|
private _setupEventListeners;
|
|
29
23
|
protected _positionMessage: () => void;
|
|
30
24
|
open: () => void;
|
|
31
|
-
private _closeFromKeyboard;
|
|
32
25
|
close: () => void;
|
|
33
|
-
disconnectedCallback(): void;
|
|
34
|
-
protected render(): TemplateResult;
|
|
35
26
|
}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import { html } from 'lit';
|
|
3
2
|
import { property } from 'lit/decorators';
|
|
4
|
-
import { DIRECTIONS
|
|
3
|
+
import { DIRECTIONS } from '@dreamcommerce/utilities';
|
|
5
4
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
6
|
-
import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
|
|
7
5
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
|
|
8
6
|
import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
|
|
9
7
|
import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
|
|
10
|
-
import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET,
|
|
11
|
-
import { createRef, ref } from 'lit/directives/ref';
|
|
8
|
+
import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
|
|
12
9
|
|
|
13
10
|
class BaseMessage extends PhoenixLightLitElement {
|
|
14
11
|
constructor() {
|
|
@@ -19,22 +16,9 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
19
16
|
this.offset = DEFAULT_MESSAGE_OFFSET;
|
|
20
17
|
this.mouseonly = false;
|
|
21
18
|
this.tabindex = '-1';
|
|
22
|
-
this._messageId = v4();
|
|
23
|
-
this._tooltipRef = createRef();
|
|
24
|
-
this._handleChildrenAriaAttributes = () => {
|
|
25
|
-
[...this.children].forEach((child) => {
|
|
26
|
-
if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
|
|
27
|
-
return;
|
|
28
|
-
child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
19
|
this._setupEventListeners = () => {
|
|
32
|
-
var _a, _b;
|
|
33
20
|
this.addEventListener('mouseenter', this.open);
|
|
34
21
|
this.addEventListener('mouseleave', this.close);
|
|
35
|
-
this.addEventListener('keydown', this._closeFromKeyboard);
|
|
36
|
-
(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
|
|
37
|
-
(_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
|
|
38
22
|
if (!this.mouseonly) {
|
|
39
23
|
this.addEventListener('focusin', this.open);
|
|
40
24
|
this.addEventListener('focusout', this.close);
|
|
@@ -55,13 +39,6 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
55
39
|
this.opened = true;
|
|
56
40
|
}, MESSAGE_SHOW_DELAY_IN_MS);
|
|
57
41
|
};
|
|
58
|
-
this._closeFromKeyboard = (ev) => {
|
|
59
|
-
if (ev.key !== 'Escape' || !this.opened)
|
|
60
|
-
return;
|
|
61
|
-
ev.preventDefault();
|
|
62
|
-
ev.stopPropagation();
|
|
63
|
-
this.close();
|
|
64
|
-
};
|
|
65
42
|
this.close = () => {
|
|
66
43
|
this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
|
|
67
44
|
clearTimeout(this._openTimeout);
|
|
@@ -102,14 +79,8 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
102
79
|
offset: this.offset
|
|
103
80
|
});
|
|
104
81
|
this.setAttribute('tabindex', this.tabindex);
|
|
105
|
-
if (!this._$baseMessageContent)
|
|
106
|
-
this._$baseMessageContent = [...this.children].find((child) => MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
|
|
107
82
|
this._setupEventListeners();
|
|
108
83
|
}
|
|
109
|
-
firstUpdated(props) {
|
|
110
|
-
super.firstUpdated(props);
|
|
111
|
-
this._handleChildrenAriaAttributes();
|
|
112
|
-
}
|
|
113
84
|
static _appendMessagePortal() {
|
|
114
85
|
const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
|
|
115
86
|
if ($messagePortalTarget)
|
|
@@ -118,24 +89,6 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
118
89
|
$portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
|
|
119
90
|
document.body.appendChild($portalTarget);
|
|
120
91
|
}
|
|
121
|
-
disconnectedCallback() {
|
|
122
|
-
var _a, _b;
|
|
123
|
-
super.disconnectedCallback();
|
|
124
|
-
(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
|
|
125
|
-
(_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
|
|
126
|
-
}
|
|
127
|
-
render() {
|
|
128
|
-
var _a;
|
|
129
|
-
super.render();
|
|
130
|
-
return html `
|
|
131
|
-
<span ${ref(this._tooltipRef)} id="${this._messageId}" class="${SCREEN_READER_ONLY_CLASS_NAME}" role="tooltip">
|
|
132
|
-
${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
|
|
133
|
-
</span>
|
|
134
|
-
<h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
|
|
135
|
-
${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
|
|
136
|
-
</h-portal>
|
|
137
|
-
`;
|
|
138
|
-
}
|
|
139
92
|
}
|
|
140
93
|
__decorate([
|
|
141
94
|
property({ type: Boolean, reflect: true }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8 +4,6 @@ export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
|
|
|
4
4
|
export declare const DEFAULT_MESSAGE_OFFSET = 10;
|
|
5
5
|
export declare const MESSAGE_ELEMENTS: string[];
|
|
6
6
|
export declare const MESSAGE_CONTENT_ELEMENTS: string[];
|
|
7
|
-
export declare const LIST_OF_MESSAGE_CHILDREN: string[];
|
|
8
7
|
export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
|
|
9
8
|
export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
|
|
10
9
|
export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
11
|
-
export declare const SCREEN_READER_ONLY_CLASS_NAME = "sr-only";
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { PORTAL_COMPONENT_NAME } from '../portal/portal_constants.js';
|
|
2
1
|
import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
|
|
3
2
|
import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
|
|
4
3
|
|
|
@@ -7,11 +6,9 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
|
|
|
7
6
|
const MESSAGE_REMOVED_CLASS_NAME = `removed`;
|
|
8
7
|
const DEFAULT_MESSAGE_OFFSET = 10;
|
|
9
8
|
const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
|
|
10
|
-
const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
|
|
11
9
|
const MESSAGE_SHOW_DELAY_IN_MS = 100;
|
|
12
10
|
const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
|
|
13
|
-
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
14
|
-
const SCREEN_READER_ONLY_CLASS_NAME = 'sr-only';
|
|
11
|
+
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
15
12
|
|
|
16
|
-
export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME,
|
|
13
|
+
export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
|
|
17
14
|
//# sourceMappingURL=base_message_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;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
3
|
+
import { html } from 'lit-html';
|
|
3
4
|
import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
|
|
5
|
+
import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
|
|
4
6
|
import { BaseMessage } from '../base_message.js';
|
|
5
7
|
|
|
6
8
|
let HHint = class HHint extends BaseMessage {
|
|
@@ -12,6 +14,14 @@ let HHint = class HHint extends BaseMessage {
|
|
|
12
14
|
super.connectedCallback(HINT_CLASS_NAME);
|
|
13
15
|
this.classList.add(HINT_CLASS_NAME);
|
|
14
16
|
}
|
|
17
|
+
render() {
|
|
18
|
+
super.render();
|
|
19
|
+
return html `
|
|
20
|
+
<h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
|
|
21
|
+
${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
|
|
22
|
+
</h-portal>
|
|
23
|
+
`;
|
|
24
|
+
}
|
|
15
25
|
};
|
|
16
26
|
HHint = __decorate([
|
|
17
27
|
phoenixCustomElement(HINT_ELEMENT_NAME),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;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,6 +1,8 @@
|
|
|
1
1
|
import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
3
|
+
import { html } from 'lit-html';
|
|
3
4
|
import { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
|
|
5
|
+
import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
|
|
4
6
|
import { BaseMessage } from '../base_message.js';
|
|
5
7
|
|
|
6
8
|
let HTooltip = class HTooltip extends BaseMessage {
|
|
@@ -8,6 +10,14 @@ let HTooltip = class HTooltip extends BaseMessage {
|
|
|
8
10
|
super.connectedCallback(TOOLTIP_CLASS_NAME);
|
|
9
11
|
this.classList.add(TOOLTIP_CLASS_NAME);
|
|
10
12
|
}
|
|
13
|
+
render() {
|
|
14
|
+
super.render();
|
|
15
|
+
return html `
|
|
16
|
+
<h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
|
|
17
|
+
${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
|
|
18
|
+
</h-portal>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
11
21
|
};
|
|
12
22
|
HTooltip = __decorate([
|
|
13
23
|
phoenixCustomElement(TOOLTIP_ELEMENT_NAME)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,+CAAmD;AAC9E;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,2BAA2B,+CAAmD;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;"}
|
|
@@ -3,9 +3,8 @@ const PORTAL_EVENTS = {
|
|
|
3
3
|
close: 'close'
|
|
4
4
|
};
|
|
5
5
|
const PORTAL_TARGET_NAME_PROP = 'name';
|
|
6
|
-
const PORTAL_COMPONENT_NAME = 'h-portal';
|
|
7
6
|
const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
|
|
8
7
|
const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
|
|
9
8
|
|
|
10
|
-
export {
|
|
9
|
+
export { PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
|
|
11
10
|
//# sourceMappingURL=portal_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;"}
|
|
@@ -17,8 +17,6 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
|
|
|
17
17
|
if (currentTabIndex === undefined)
|
|
18
18
|
return;
|
|
19
19
|
const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
|
|
20
|
-
if (newTabIndex === undefined)
|
|
21
|
-
return;
|
|
22
20
|
UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
|
|
23
21
|
UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
|
|
24
22
|
this._$tabs[newTabIndex].focus();
|
|
@@ -55,14 +53,10 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
|
|
|
55
53
|
return this._$tabs.findIndex(($tab) => $tab === focusedElement);
|
|
56
54
|
}
|
|
57
55
|
_getNextTabIndex(currentTabIndex) {
|
|
58
|
-
|
|
59
|
-
return;
|
|
60
|
-
return currentTabIndex + 1;
|
|
56
|
+
return (currentTabIndex + 1) % this._$tabs.length;
|
|
61
57
|
}
|
|
62
58
|
_getPrevTabIndex(currentTabIndex) {
|
|
63
|
-
|
|
64
|
-
return;
|
|
65
|
-
return currentTabIndex - 1;
|
|
59
|
+
return (currentTabIndex - 1 + this._$tabs.length) % this._$tabs.length;
|
|
66
60
|
}
|
|
67
61
|
_setupEvents() {
|
|
68
62
|
document.addEventListener(TAB_EVENT_NAMES.selected, this._handleTabSelected);
|
|
@@ -1 +1 @@
|
|
|
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.17.
|
|
5
|
+
"version": "1.17.4-0",
|
|
6
6
|
"description": "phoenix design system",
|
|
7
7
|
"author": "zefirek",
|
|
8
8
|
"license": "MIT",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@splidejs/splide-extension-auto-scroll": "^0.5.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@dreamcommerce/utilities": "^1.20.1-
|
|
34
|
+
"@dreamcommerce/utilities": "^1.20.1-0",
|
|
35
35
|
"@shoper/jest_config": "^0.0.0",
|
|
36
36
|
"@shoper/tsconfig": "^0.0.0",
|
|
37
37
|
"@splidejs/splide": "4.0.7",
|