@progressive-development/pd-forms 0.1.36 → 0.1.37

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/PdBaseUiInput.js +2 -2
  3. package/src/PdHoverBox.js +53 -31
  4. package/stories/range.stories.js +24 -2
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent pd-forms following open-wc recommendations",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "PD Progressive Development",
6
- "version": "0.1.36",
6
+ "version": "0.1.37",
7
7
  "main": "index.js",
8
8
  "module": "index.js",
9
9
  "scripts": {
package/src/PdBaseUiInput.js CHANGED
@@ -235,8 +235,8 @@ import '../pd-hover-box.js';
235
235
  ${this.helperTxt ? html`
236
236
 
237
237
  <pd-hover-box>
238
- <pd-icon slot="small-view" icon="helpIcon" activeIcon></pd-icon>
239
- <p slot="extended-view">${this.helperTxt}</p>
238
+ <pd-icon slot="normal-view" icon="helpIcon" activeIcon></pd-icon>
239
+ <p slot="info-view">${this.helperTxt}</p>
240
240
  </pd-hover-box>
241
241
 
242
242
  ` : ""}
package/src/PdHoverBox.js CHANGED
@@ -23,7 +23,8 @@ export class PdHoverBox extends PdBaseUI {
23
23
 
24
24
  static get properties() {
25
25
  return {
26
- _visible: { type: Boolean, state: true},
26
+ _visible: { type: Boolean, state: true},
27
+ _toBottom: { type: Boolean},
27
28
  };
28
29
  }
29
30
 
@@ -40,42 +41,63 @@ export class PdHoverBox extends PdBaseUI {
40
41
  position: relative;
41
42
  }
42
43
 
43
- .small-view {
44
-
45
- }
46
-
47
- .extended-view {
44
+ .info-view {
48
45
  position: absolute;
49
- z-index: 100;
50
- right: -3px;
51
- top: -3px;
46
+ z-index: 100;
52
47
  background-color: var(--pd-hover-box-bg-col, var(--pd-default-dark-col));
53
- visibility: hidden; /* Hidden by default */
54
- opacity: 0;
48
+
55
49
  border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
56
- color: var(--pd-hover-box-font-col, white);
50
+
57
51
  text-align: center;
58
- padding: 5px;
52
+ padding: 10px;
53
+ width: 240px;
54
+
55
+ color: var(--pd-hover-box-font-col, white);
56
+ font-size: var(--pd-hover-box-font-size, 0.8em);
59
57
 
60
- min-width: 160px;
61
- max-width: 400px;
62
-
63
58
  transition: opacity 0.2s ease-in;
64
59
  }
65
60
 
61
+ .visible {
62
+ visibility: visible;
63
+ opacity: 1;
64
+ }
65
+
66
+ .hidden {
67
+ visibility: hidden;
68
+ opacity: 0;
69
+ }
70
+
71
+ .to-bottom {
72
+ right: -3px;
73
+ top: -3px;
74
+ }
75
+
76
+ .to-top {
77
+ right: -3px;
78
+ bottom: -3px;
79
+ }
80
+
81
+ @media (max-width: 640px) {
82
+ .info-view-visible {
83
+ width: 190px;
84
+ }
85
+ }
86
+
66
87
  `];
67
- }
88
+ }
89
+
90
+ render() {
68
91
 
69
- render() {
70
92
  return html`
71
93
  <div class="hover-box">
72
94
 
73
- <div class="small-view" @click="${this._activateInfo}">
74
- <slot name="small-view"></slot>
95
+ <div @click="${this._activateInfo}">
96
+ <slot name="normal-view"></slot>
75
97
  </div>
76
98
 
77
- <div id="extendedViewId" class="extended-view">
78
- <slot name="extended-view"></slot>
99
+ <div id="infoViewId" @click="${this._closeInfo}" class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}">
100
+ <slot name="info-view"></slot>
79
101
  </div>
80
102
 
81
103
  </div>
@@ -84,10 +106,13 @@ export class PdHoverBox extends PdBaseUI {
84
106
 
85
107
  // eslint-disable-next-line class-methods-use-this
86
108
  _activateInfo(e) {
87
- const modal = this.shadowRoot.getElementById('extendedViewId');
88
- modal.style.visibility = 'visible';
89
- modal.style.opacity = '1';
90
- this.addEventListener('click', this._clickHandler);
109
+
110
+ const modal = this.shadowRoot.getElementById('infoViewId');
111
+ const rect = modal.getBoundingClientRect();
112
+
113
+ this._toBottom = !((modal.offsetHeight + rect.top + 50) > window.innerHeight);
114
+ this._visible = true;
115
+
91
116
  e.stopPropagation();
92
117
 
93
118
  // Nachteil: Wird immer bei jedem Click nach erstmaligem aktvieren ausgeführt. Der Code unten
@@ -98,11 +123,8 @@ export class PdHoverBox extends PdBaseUI {
98
123
  }; */
99
124
  }
100
125
 
101
- _clickHandler() {
102
- this.removeEventListener('click', PdHoverBox._clickHandler);
103
- const modal = this.shadowRoot.getElementById('extendedViewId');
104
- modal.style.visibility = 'hidden';
105
- modal.style.opacity = '0';
126
+ _closeInfo() {
127
+ this._visible = false;
106
128
  }
107
129
 
108
130
  }
package/stories/range.stories.js CHANGED
@@ -46,7 +46,7 @@ function Template() {
46
46
  <pd-range id="range5060Id"
47
47
  class="quarter4"
48
48
  label="50er/60er"
49
- helperTxt="Hier steht ein Hilfstext."
49
+ helperTxt="Absolut kurz."
50
50
  required
51
51
  max="4"
52
52
  value="0"
@@ -57,7 +57,29 @@ function Template() {
57
57
  <pd-range id="range5060Id"
58
58
  class="quarter4"
59
59
  label="50er/60er"
60
- helperTxt="Hier steht ein Hilfstext, oder aber auch ein etwas längeres Element. Mit mehr als nur etwas Text. Man weiß es nicht genaut"
60
+ helperTxt="Hier steht ein Hilfstext, mit etwas Text."
61
+ required
62
+ max="4"
63
+ value="0"
64
+ .optionValueMapper="${OPTIONS_GENRE}">
65
+ </pd-range>
66
+ </pd-form-row>
67
+ <pd-form-row>
68
+ <pd-range id="range5060Id"
69
+ class="quarter4"
70
+ label="50er/60er"
71
+ helperTxt="Hier steht ein Hilfstext, oder aber auch ein etwas längeres Element. Mit mehr als nur etwas Text. Man weiß es nicht genau."
72
+ required
73
+ max="4"
74
+ value="0"
75
+ .optionValueMapper="${OPTIONS_GENRE}">
76
+ </pd-range>
77
+ </pd-form-row>
78
+ <pd-form-row>
79
+ <pd-range id="range5060Id"
80
+ class="quarter4"
81
+ label="50er/60er"
82
+ helperTxt="Hier steht ein Hilfstext, oder aber auch ein etwas längeres Element. Mit mehr als nur etwas Text. Man weiß es nicht genau. Aber jetzt mal etwas länger. Man weiß ja nie was hier so alles geschrieben wird."
61
83
  required
62
84
  max="4"
63
85
  value="0"