@shoper/phoenix_design_system 1.17.15 → 1.17.16-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 (13) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -12
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -1
  4. package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js +14 -1
  5. package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -1
  6. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +0 -1
  7. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -12
  8. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -1
  10. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.d.ts +1 -0
  11. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js +14 -1
  12. package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map +1 -1
  13. package/package.json +47 -47
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
- var utilities = require('@dreamcommerce/utilities');
8
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
8
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
9
  var dropdown_constants = require('./dropdown_constants.js');
@@ -13,22 +12,12 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
13
12
  constructor() {
14
13
  super();
15
14
  this.name = '';
16
- this._setupRole = () => {
17
- const $focusableElements = utilities.UiDomUtils.getFocusableElements(this);
18
- const role = $focusableElements.length < 2 ? 'dialog' : 'menu';
19
- this.setAttribute('role', role);
20
- if (role === 'menu') {
21
- Array.from(this.children).forEach((element) => {
22
- element.setAttribute('role', 'menuitem');
23
- });
24
- }
25
- };
26
15
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
27
16
  }
28
17
  connectedCallback() {
29
18
  super.connectedCallback();
30
19
  this.classList.add(dropdown_constants.DROPDOWN_CSS_CLASSES.content);
31
- this._setupRole();
20
+ this.setAttribute('role', 'dialog');
32
21
  }
33
22
  };
34
23
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -15,7 +15,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
15
15
  constructor() {
16
16
  super();
17
17
  this.name = '';
18
- this.ariaHasPopup = 'menu';
18
+ this.ariaHasPopup = 'dialog';
19
19
  this.ariaControls = '';
20
20
  this.role = 'button';
21
21
  this._setupTogglerAria = () => {
package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js CHANGED
@@ -19,9 +19,20 @@ exports.HToggleBtn = class HToggleBtn extends phoenix_light_lit_element.PhoenixL
19
19
  this._visibility = {
20
20
  collapse: (isOpened) => {
21
21
  isOpened ? this._visibilityController.show() : this._visibilityController.hide();
22
+ this._handleFocusOppositeToggleButtonIfLostFocus();
22
23
  },
23
24
  expand: (isOpened) => {
24
25
  isOpened ? this._visibilityController.hide() : this._visibilityController.show();
26
+ this._handleFocusOppositeToggleButtonIfLostFocus();
27
+ }
28
+ };
29
+ this._handleFocusOppositeToggleButtonIfLostFocus = () => {
30
+ var _a;
31
+ const shouldFocus = this === document.activeElement;
32
+ const oppositeAction = this.action === toggle_constants.TOGGLE_ACTIONS.collapse ? toggle_constants.TOGGLE_ACTIONS.expand : toggle_constants.TOGGLE_ACTIONS.collapse;
33
+ if (shouldFocus) {
34
+ const $oppositeToggleBtn = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[action="${oppositeAction}"]`);
35
+ $oppositeToggleBtn === null || $oppositeToggleBtn === void 0 ? void 0 : $oppositeToggleBtn.focus();
25
36
  }
26
37
  };
27
38
  this._dispatchToggleEvent = () => {
@@ -38,10 +49,12 @@ exports.HToggleBtn = class HToggleBtn extends phoenix_light_lit_element.PhoenixL
38
49
  this._visibility[this.action](isOpened);
39
50
  });
40
51
  this._opened$.subscribe(this._openedObserver);
52
+ this.setAttribute('aria-expanded', this.action === toggle_constants.TOGGLE_ACTIONS.collapse ? 'true' : 'false');
41
53
  this.addEventListener('click', this._dispatchToggleEvent);
42
54
  }
43
55
  disconnectedCallback() {
44
- this._opened$.unsubscribe(this._openedObserver);
56
+ super.disconnectedCallback();
57
+ this._openedObserver && this._opened$.unsubscribe(this._openedObserver);
45
58
  }
46
59
  };
47
60
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts CHANGED
@@ -3,5 +3,4 @@ export declare class HDropdownContent extends PhoenixLightLitElement {
3
3
  name: string;
4
4
  constructor();
5
5
  connectedCallback(): void;
6
- private _setupRole;
7
6
  }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
- import { UiDomUtils } from '@dreamcommerce/utilities';
4
3
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
4
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
5
  import { DROPDOWN_CSS_CLASSES } from './dropdown_constants.js';
@@ -9,22 +8,12 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
9
8
  constructor() {
10
9
  super();
11
10
  this.name = '';
12
- this._setupRole = () => {
13
- const $focusableElements = UiDomUtils.getFocusableElements(this);
14
- const role = $focusableElements.length < 2 ? 'dialog' : 'menu';
15
- this.setAttribute('role', role);
16
- if (role === 'menu') {
17
- Array.from(this.children).forEach((element) => {
18
- element.setAttribute('role', 'menuitem');
19
- });
20
- }
21
- };
22
11
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
23
12
  }
24
13
  connectedCallback() {
25
14
  super.connectedCallback();
26
15
  this.classList.add(DROPDOWN_CSS_CLASSES.content);
27
- this._setupRole();
16
+ this.setAttribute('role', 'dialog');
28
17
  }
29
18
  };
30
19
  __decorate([
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -11,7 +11,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
11
11
  constructor() {
12
12
  super();
13
13
  this.name = '';
14
- this.ariaHasPopup = 'menu';
14
+ this.ariaHasPopup = 'dialog';
15
15
  this.ariaControls = '';
16
16
  this.role = 'button';
17
17
  this._setupTogglerAria = () => {
package/build/esm/packages/phoenix/src/components/toggle/toggle_button.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class HToggleBtn extends PhoenixLightLitElement {
8
8
  action: "collapse";
9
9
  private _visibility;
10
10
  constructor();
11
+ private _handleFocusOppositeToggleButtonIfLostFocus;
11
12
  connectedCallback(): Promise<void>;
12
13
  disconnectedCallback(): void;
13
14
  private _dispatchToggleEvent;
package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js CHANGED
@@ -15,9 +15,20 @@ let HToggleBtn = class HToggleBtn extends PhoenixLightLitElement {
15
15
  this._visibility = {
16
16
  collapse: (isOpened) => {
17
17
  isOpened ? this._visibilityController.show() : this._visibilityController.hide();
18
+ this._handleFocusOppositeToggleButtonIfLostFocus();
18
19
  },
19
20
  expand: (isOpened) => {
20
21
  isOpened ? this._visibilityController.hide() : this._visibilityController.show();
22
+ this._handleFocusOppositeToggleButtonIfLostFocus();
23
+ }
24
+ };
25
+ this._handleFocusOppositeToggleButtonIfLostFocus = () => {
26
+ var _a;
27
+ const shouldFocus = this === document.activeElement;
28
+ const oppositeAction = this.action === TOGGLE_ACTIONS.collapse ? TOGGLE_ACTIONS.expand : TOGGLE_ACTIONS.collapse;
29
+ if (shouldFocus) {
30
+ const $oppositeToggleBtn = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[action="${oppositeAction}"]`);
31
+ $oppositeToggleBtn === null || $oppositeToggleBtn === void 0 ? void 0 : $oppositeToggleBtn.focus();
21
32
  }
22
33
  };
23
34
  this._dispatchToggleEvent = () => {
@@ -34,10 +45,12 @@ let HToggleBtn = class HToggleBtn extends PhoenixLightLitElement {
34
45
  this._visibility[this.action](isOpened);
35
46
  });
36
47
  this._opened$.subscribe(this._openedObserver);
48
+ this.setAttribute('aria-expanded', this.action === TOGGLE_ACTIONS.collapse ? 'true' : 'false');
37
49
  this.addEventListener('click', this._dispatchToggleEvent);
38
50
  }
39
51
  disconnectedCallback() {
40
- this._opened$.unsubscribe(this._openedObserver);
52
+ super.disconnectedCallback();
53
+ this._openedObserver && this._opened$.unsubscribe(this._openedObserver);
41
54
  }
42
55
  };
43
56
  __decorate([
package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map CHANGED
@@ -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;"}
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;"}
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.15",
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.16-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
+ }