@shoper/phoenix_design_system 1.10.3-2 → 1.10.3-3

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 (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/input/input_constants.js +1 -2
  2. package/build/cjs/packages/phoenix/src/components/form/input/input_constants.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/input/input_copy_button.js +30 -40
  4. package/build/cjs/packages/phoenix/src/components/form/input/input_copy_button.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/input/input_constants.d.ts +0 -1
  6. package/build/esm/packages/phoenix/src/components/form/input/input_constants.js +1 -2
  7. package/build/esm/packages/phoenix/src/components/form/input/input_constants.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.d.ts +2 -4
  9. package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js +30 -40
  10. package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/input/input_constants.js CHANGED
@@ -35,8 +35,7 @@ const INPUT_CONTROL_EVENTS = {
35
35
  change: 'change',
36
36
  input: 'input',
37
37
  keyup: 'keyup',
38
- copy: 'copy',
39
- copyError: 'copyError'
38
+ copy: 'copy'
40
39
  };
41
40
  const INPUT_PROPS_TO_SYNC = {
42
41
  placeholder: 'placeholder'
package/build/cjs/packages/phoenix/src/components/form/input/input_constants.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;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;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/input/input_copy_button.js CHANGED
@@ -15,67 +15,57 @@ exports.HInputCopyButton = class HInputCopyButton extends phoenix_light_lit_elem
15
15
  this.hasBeenCopied = false;
16
16
  this.copyValue = '';
17
17
  this._$inputToCopy = null;
18
- this._handleCopyToClipboard = () => {
18
+ this._canWriteToClipboard = async () => {
19
+ try {
20
+ // as permissionname?
21
+ const permissionStatus = await navigator.permissions.query({ name: 'clipboard-write' });
22
+ if (permissionStatus.state === 'granted' || permissionStatus.state === 'prompt')
23
+ return true;
24
+ return false;
25
+ }
26
+ catch (err) {
27
+ return false;
28
+ }
29
+ };
30
+ this._handleCopyToClipboard = async () => {
19
31
  if (!this._$inputToCopy)
20
32
  return;
21
33
  this._$inputToCopy.select();
22
- this._$inputToCopy.setSelectionRange(0, 99999);
23
34
  this.copyValue = this._$inputToCopy.value;
24
- if (navigator.clipboard) {
25
- this._copyToClipboard();
26
- }
27
- else {
28
- this._fallbackCopyToClipboard();
29
- }
35
+ await this._copyToClipboard();
30
36
  };
31
- this._runCopyAnimation = () => {
37
+ this._resetCopyState = () => {
32
38
  setTimeout(() => {
33
- this._resetCopyState();
39
+ if (this._$inputToCopy)
40
+ this._$inputToCopy.value = this.copyValue;
41
+ this.copyValue = '';
42
+ this.hasBeenCopied = false;
34
43
  }, 2000);
35
44
  };
36
- this._resetCopyState = () => {
37
- if (this._$inputToCopy)
38
- this._$inputToCopy.value = this.copyValue;
39
- this.copyValue = '';
40
- this.hasBeenCopied = false;
41
- };
42
45
  }
43
- connectedCallback() {
46
+ async connectedCallback() {
44
47
  super.connectedCallback();
48
+ const canWriteToClipboard = await this._canWriteToClipboard();
49
+ if (!canWriteToClipboard) {
50
+ this.hidden = true;
51
+ return;
52
+ }
45
53
  this._$inputToCopy = document.querySelector(`#${this.inputId}`);
46
54
  if (!this._$inputToCopy)
47
55
  throw new Error(`Input with id ${this.inputId} not found`);
56
+ this.setAttribute('tabindex', '0');
48
57
  this.addEventListener('click', this._handleCopyToClipboard);
49
58
  }
50
- _copyToClipboard() {
51
- navigator.clipboard.writeText(this.copyValue)
52
- .then(() => this._onCopySuccess())
53
- .catch(() => this._onCopyError());
54
- }
55
- _fallbackCopyToClipboard() {
56
- try {
57
- const copyResult = document.execCommand('copy');
58
- if (!copyResult)
59
- throw new Error('Unable to copy a value');
60
- this._onCopySuccess();
61
- }
62
- catch (err) {
63
- this._onCopyError();
64
- }
59
+ async _copyToClipboard() {
60
+ await navigator.clipboard.writeText(this.copyValue);
61
+ this._onCopySuccess();
65
62
  }
66
63
  _onCopySuccess() {
67
64
  if (this.inputTextSuccess && this._$inputToCopy)
68
65
  this._$inputToCopy.value = this.inputTextSuccess;
69
66
  this.hasBeenCopied = true;
67
+ this._resetCopyState();
70
68
  this._dispatchEvent(input_constants.INPUT_CONTROL_EVENTS.copy);
71
- this._runCopyAnimation();
72
- }
73
- _onCopyError() {
74
- if (this.inputTextError && this._$inputToCopy)
75
- this._$inputToCopy.value = this.inputTextError;
76
- this.hasBeenCopied = false;
77
- this._dispatchEvent(input_constants.INPUT_CONTROL_EVENTS.copyError);
78
- this._runCopyAnimation();
79
69
  }
80
70
  _dispatchEvent(eventName, detail) {
81
71
  const eventToDispatch = new CustomEvent(eventName, {
package/build/cjs/packages/phoenix/src/components/form/input/input_copy_button.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/input/input_constants.d.ts CHANGED
@@ -31,7 +31,6 @@ export declare const INPUT_CONTROL_EVENTS: {
31
31
  readonly input: "input";
32
32
  readonly keyup: "keyup";
33
33
  readonly copy: "copy";
34
- readonly copyError: "copyError";
35
34
  };
36
35
  export declare const INPUT_PROPS_TO_SYNC: {
37
36
  readonly placeholder: "placeholder";
package/build/esm/packages/phoenix/src/components/form/input/input_constants.js CHANGED
@@ -31,8 +31,7 @@ const INPUT_CONTROL_EVENTS = {
31
31
  change: 'change',
32
32
  input: 'input',
33
33
  keyup: 'keyup',
34
- copy: 'copy',
35
- copyError: 'copyError'
34
+ copy: 'copy'
36
35
  };
37
36
  const INPUT_PROPS_TO_SYNC = {
38
37
  placeholder: 'placeholder'
package/build/esm/packages/phoenix/src/components/form/input/input_constants.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.d.ts CHANGED
@@ -7,14 +7,12 @@ export declare class HInputCopyButton extends PhoenixLightLitElement {
7
7
  hasBeenCopied: boolean;
8
8
  copyValue: string;
9
9
  private _$inputToCopy;
10
- connectedCallback(): void;
10
+ connectedCallback(): Promise<void>;
11
+ private _canWriteToClipboard;
11
12
  private _handleCopyToClipboard;
12
13
  private _copyToClipboard;
13
- private _fallbackCopyToClipboard;
14
14
  private _onCopySuccess;
15
- private _onCopyError;
16
15
  private _dispatchEvent;
17
- private _runCopyAnimation;
18
16
  private _resetCopyState;
19
17
  protected render(): TemplateResult;
20
18
  }
package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js CHANGED
@@ -11,67 +11,57 @@ let HInputCopyButton = class HInputCopyButton extends PhoenixLightLitElement {
11
11
  this.hasBeenCopied = false;
12
12
  this.copyValue = '';
13
13
  this._$inputToCopy = null;
14
- this._handleCopyToClipboard = () => {
14
+ this._canWriteToClipboard = async () => {
15
+ try {
16
+ // as permissionname?
17
+ const permissionStatus = await navigator.permissions.query({ name: 'clipboard-write' });
18
+ if (permissionStatus.state === 'granted' || permissionStatus.state === 'prompt')
19
+ return true;
20
+ return false;
21
+ }
22
+ catch (err) {
23
+ return false;
24
+ }
25
+ };
26
+ this._handleCopyToClipboard = async () => {
15
27
  if (!this._$inputToCopy)
16
28
  return;
17
29
  this._$inputToCopy.select();
18
- this._$inputToCopy.setSelectionRange(0, 99999);
19
30
  this.copyValue = this._$inputToCopy.value;
20
- if (navigator.clipboard) {
21
- this._copyToClipboard();
22
- }
23
- else {
24
- this._fallbackCopyToClipboard();
25
- }
31
+ await this._copyToClipboard();
26
32
  };
27
- this._runCopyAnimation = () => {
33
+ this._resetCopyState = () => {
28
34
  setTimeout(() => {
29
- this._resetCopyState();
35
+ if (this._$inputToCopy)
36
+ this._$inputToCopy.value = this.copyValue;
37
+ this.copyValue = '';
38
+ this.hasBeenCopied = false;
30
39
  }, 2000);
31
40
  };
32
- this._resetCopyState = () => {
33
- if (this._$inputToCopy)
34
- this._$inputToCopy.value = this.copyValue;
35
- this.copyValue = '';
36
- this.hasBeenCopied = false;
37
- };
38
41
  }
39
- connectedCallback() {
42
+ async connectedCallback() {
40
43
  super.connectedCallback();
44
+ const canWriteToClipboard = await this._canWriteToClipboard();
45
+ if (!canWriteToClipboard) {
46
+ this.hidden = true;
47
+ return;
48
+ }
41
49
  this._$inputToCopy = document.querySelector(`#${this.inputId}`);
42
50
  if (!this._$inputToCopy)
43
51
  throw new Error(`Input with id ${this.inputId} not found`);
52
+ this.setAttribute('tabindex', '0');
44
53
  this.addEventListener('click', this._handleCopyToClipboard);
45
54
  }
46
- _copyToClipboard() {
47
- navigator.clipboard.writeText(this.copyValue)
48
- .then(() => this._onCopySuccess())
49
- .catch(() => this._onCopyError());
50
- }
51
- _fallbackCopyToClipboard() {
52
- try {
53
- const copyResult = document.execCommand('copy');
54
- if (!copyResult)
55
- throw new Error('Unable to copy a value');
56
- this._onCopySuccess();
57
- }
58
- catch (err) {
59
- this._onCopyError();
60
- }
55
+ async _copyToClipboard() {
56
+ await navigator.clipboard.writeText(this.copyValue);
57
+ this._onCopySuccess();
61
58
  }
62
59
  _onCopySuccess() {
63
60
  if (this.inputTextSuccess && this._$inputToCopy)
64
61
  this._$inputToCopy.value = this.inputTextSuccess;
65
62
  this.hasBeenCopied = true;
63
+ this._resetCopyState();
66
64
  this._dispatchEvent(INPUT_CONTROL_EVENTS.copy);
67
- this._runCopyAnimation();
68
- }
69
- _onCopyError() {
70
- if (this.inputTextError && this._$inputToCopy)
71
- this._$inputToCopy.value = this.inputTextError;
72
- this.hasBeenCopied = false;
73
- this._dispatchEvent(INPUT_CONTROL_EVENTS.copyError);
74
- this._runCopyAnimation();
75
65
  }
76
66
  _dispatchEvent(eventName, detail) {
77
67
  const eventToDispatch = new CustomEvent(eventName, {
package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js.map CHANGED
@@ -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;"}
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;"}
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.10.3-2",
5
+ "version": "1.10.3-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",