@progressive-development/pd-forms 0.8.7 → 0.9.2

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 (195) hide show
  1. package/dist/{pd-base-input-element.d.ts → base/pd-base-input-element.d.ts} +2 -3
  2. package/dist/base/pd-base-input-element.d.ts.map +1 -0
  3. package/dist/{pd-base-input-element.js → base/pd-base-input-element.js} +20 -23
  4. package/dist/{pd-base-ui-input.d.ts → base/pd-base-ui-input.d.ts} +3 -3
  5. package/dist/base/pd-base-ui-input.d.ts.map +1 -0
  6. package/dist/{pd-base-ui-input.js → base/pd-base-ui-input.js} +35 -42
  7. package/dist/base/pd-base-ui.d.ts.map +1 -0
  8. package/dist/{pd-base-ui.js → base/pd-base-ui.js} +9 -9
  9. package/dist/index.d.ts +11 -10
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.js +27 -32
  12. package/dist/locales/be.js +4 -4
  13. package/dist/locales/de.js +4 -4
  14. package/dist/locales/en.js +4 -4
  15. package/dist/pd-button/PdButton.d.ts +57 -0
  16. package/dist/pd-button/PdButton.d.ts.map +1 -0
  17. package/dist/pd-button/PdButton.js +152 -0
  18. package/dist/pd-button/pd-button.d.ts +3 -0
  19. package/dist/pd-button/pd-button.d.ts.map +1 -0
  20. package/dist/pd-button/pd-button.spec.d.ts +2 -0
  21. package/dist/pd-button/pd-button.spec.d.ts.map +1 -0
  22. package/dist/pd-button/pd-button.stories.d.ts +12 -0
  23. package/dist/pd-button/pd-button.stories.d.ts.map +1 -0
  24. package/dist/pd-button-group/PdButtonGroup.d.ts +14 -0
  25. package/dist/pd-button-group/PdButtonGroup.d.ts.map +1 -0
  26. package/dist/pd-button-group/PdButtonGroup.js +115 -0
  27. package/dist/pd-button-group/pd-button-group.d.ts +3 -0
  28. package/dist/pd-button-group/pd-button-group.d.ts.map +1 -0
  29. package/dist/pd-button-group/pd-button-group.stories.d.ts.map +1 -0
  30. package/dist/pd-button-group.d.ts +2 -14
  31. package/dist/pd-button-group.js +6 -116
  32. package/dist/{pd-icon-button-select-group.d.ts → pd-button-select-group/PdButtonSelectGroup.d.ts} +8 -5
  33. package/dist/pd-button-select-group/PdButtonSelectGroup.d.ts.map +1 -0
  34. package/dist/{pd-icon-button-select-group.js → pd-button-select-group/PdButtonSelectGroup.js} +38 -40
  35. package/dist/pd-button-select-group/pd-button-select-group.d.ts +3 -0
  36. package/dist/pd-button-select-group/pd-button-select-group.d.ts.map +1 -0
  37. package/dist/{stories/pd-icon-button-select-group.stories.d.ts → pd-button-select-group/pd-button-select-group.stories.d.ts} +2 -2
  38. package/dist/pd-button-select-group/pd-button-select-group.stories.d.ts.map +1 -0
  39. package/dist/pd-button-select-group.d.ts +2 -0
  40. package/dist/pd-button-select-group.js +8 -0
  41. package/dist/pd-button.d.ts +2 -16
  42. package/dist/pd-button.js +6 -152
  43. package/dist/pd-checkbox/PdCheckbox.d.ts +18 -0
  44. package/dist/pd-checkbox/PdCheckbox.d.ts.map +1 -0
  45. package/dist/pd-checkbox/PdCheckbox.js +279 -0
  46. package/dist/pd-checkbox/pd-checkbox.d.ts +3 -0
  47. package/dist/pd-checkbox/pd-checkbox.d.ts.map +1 -0
  48. package/dist/{stories/checkbox.stories.d.ts → pd-checkbox/pd-checkbox.stories.d.ts} +1 -1
  49. package/dist/pd-checkbox/pd-checkbox.stories.d.ts.map +1 -0
  50. package/dist/pd-checkbox.d.ts +2 -15
  51. package/dist/pd-checkbox.js +6 -279
  52. package/dist/pd-form-container/PdFormContainer.d.ts +42 -0
  53. package/dist/pd-form-container/PdFormContainer.d.ts.map +1 -0
  54. package/dist/pd-form-container/PdFormContainer.js +269 -0
  55. package/dist/pd-form-container/form-container.stories.d.ts.map +1 -0
  56. package/dist/pd-form-container/form-container2.stories.d.ts.map +1 -0
  57. package/dist/pd-form-container/form-container3.stories.d.ts.map +1 -0
  58. package/dist/pd-form-container/pd-form-container.d.ts +3 -0
  59. package/dist/pd-form-container/pd-form-container.d.ts.map +1 -0
  60. package/dist/pd-form-container.d.ts +2 -39
  61. package/dist/pd-form-container.js +6 -271
  62. package/dist/pd-form-row/PdFormRow.d.ts +15 -0
  63. package/dist/pd-form-row/PdFormRow.d.ts.map +1 -0
  64. package/dist/pd-form-row/PdFormRow.js +110 -0
  65. package/dist/pd-form-row/pd-form-row.d.ts +3 -0
  66. package/dist/pd-form-row/pd-form-row.d.ts.map +1 -0
  67. package/dist/{stories/form-row.stories.d.ts → pd-form-row/pd-form-row.stories.d.ts} +1 -1
  68. package/dist/pd-form-row/pd-form-row.stories.d.ts.map +1 -0
  69. package/dist/pd-form-row.d.ts +2 -12
  70. package/dist/pd-form-row.js +6 -114
  71. package/dist/pd-hover-box/PdHoverBox.d.ts +31 -0
  72. package/dist/pd-hover-box/PdHoverBox.d.ts.map +1 -0
  73. package/dist/pd-hover-box/PdHoverBox.js +119 -0
  74. package/dist/pd-hover-box/pd-hover-box.d.ts +3 -0
  75. package/dist/pd-hover-box/pd-hover-box.d.ts.map +1 -0
  76. package/dist/pd-hover-box/pd-hover-box.stories.d.ts.map +1 -0
  77. package/dist/pd-hover-box.d.ts +2 -23
  78. package/dist/pd-hover-box.js +6 -120
  79. package/dist/pd-input/PdInput.d.ts +35 -0
  80. package/dist/pd-input/PdInput.d.ts.map +1 -0
  81. package/dist/pd-input/PdInput.js +123 -0
  82. package/dist/pd-input/pd-input.d.ts +3 -0
  83. package/dist/pd-input/pd-input.d.ts.map +1 -0
  84. package/dist/{stories/input.stories.d.ts → pd-input/pd-input.stories.d.ts} +1 -1
  85. package/dist/pd-input/pd-input.stories.d.ts.map +1 -0
  86. package/dist/pd-input-area/PdInputArea.d.ts +23 -0
  87. package/dist/pd-input-area/PdInputArea.d.ts.map +1 -0
  88. package/dist/pd-input-area/PdInputArea.js +99 -0
  89. package/dist/pd-input-area/pd-input-area.d.ts +3 -0
  90. package/dist/pd-input-area/pd-input-area.d.ts.map +1 -0
  91. package/dist/{stories/input-area.stories.d.ts → pd-input-area/pd-input-area.stories.d.ts} +1 -1
  92. package/dist/pd-input-area/pd-input-area.stories.d.ts.map +1 -0
  93. package/dist/pd-input-area.d.ts +2 -20
  94. package/dist/pd-input-area.js +8 -101
  95. package/dist/pd-input-file/PdInputFile.d.ts +19 -0
  96. package/dist/pd-input-file/PdInputFile.d.ts.map +1 -0
  97. package/dist/pd-input-file/PdInputFile.js +93 -0
  98. package/dist/pd-input-file/pd-input-file.d.ts +3 -0
  99. package/dist/pd-input-file/pd-input-file.d.ts.map +1 -0
  100. package/dist/{stories/input-file.stories.d.ts → pd-input-file/pd-input-file.stories.d.ts} +1 -1
  101. package/dist/pd-input-file/pd-input-file.stories.d.ts.map +1 -0
  102. package/dist/pd-input-file.d.ts +2 -16
  103. package/dist/pd-input-file.js +8 -96
  104. package/dist/pd-input-time/PdInputTime.d.ts +14 -0
  105. package/dist/pd-input-time/PdInputTime.d.ts.map +1 -0
  106. package/dist/pd-input-time/PdInputTime.js +77 -0
  107. package/dist/pd-input-time/pd-input-time.d.ts +3 -0
  108. package/dist/pd-input-time/pd-input-time.d.ts.map +1 -0
  109. package/dist/pd-input-time.d.ts +2 -11
  110. package/dist/pd-input-time.js +8 -81
  111. package/dist/pd-input.d.ts +2 -32
  112. package/dist/pd-input.js +8 -126
  113. package/dist/pd-panel-button/PdPanelButton.d.ts +49 -0
  114. package/dist/pd-panel-button/PdPanelButton.d.ts.map +1 -0
  115. package/dist/{pd-icon-panel-button.js → pd-panel-button/PdPanelButton.js} +107 -112
  116. package/dist/pd-panel-button/pd-panel-button.d.ts +3 -0
  117. package/dist/pd-panel-button/pd-panel-button.d.ts.map +1 -0
  118. package/dist/{stories/pd-icon-button.stories.d.ts → pd-panel-button/pd-panel-button.stories.d.ts} +3 -13
  119. package/dist/{stories/pd-icon-button.stories.d.ts.map → pd-panel-button/pd-panel-button.stories.d.ts.map} +1 -1
  120. package/dist/pd-panel-button.d.ts +2 -0
  121. package/dist/pd-panel-button.js +8 -0
  122. package/dist/pd-radio-group/PdRadioGroup.d.ts +16 -0
  123. package/dist/pd-radio-group/PdRadioGroup.d.ts.map +1 -0
  124. package/dist/pd-radio-group/PdRadioGroup.js +114 -0
  125. package/dist/pd-radio-group/pd-radio-group.d.ts +3 -0
  126. package/dist/pd-radio-group/pd-radio-group.d.ts.map +1 -0
  127. package/dist/{stories/radio-group.stories.d.ts → pd-radio-group/pd-radio-group.stories.d.ts} +1 -1
  128. package/dist/pd-radio-group/pd-radio-group.stories.d.ts.map +1 -0
  129. package/dist/pd-radio-group.d.ts +2 -13
  130. package/dist/pd-radio-group.js +7 -113
  131. package/dist/pd-range/PdRange.d.ts +25 -0
  132. package/dist/pd-range/PdRange.d.ts.map +1 -0
  133. package/dist/pd-range/PdRange.js +280 -0
  134. package/dist/pd-range/pd-range.d.ts +3 -0
  135. package/dist/pd-range/pd-range.d.ts.map +1 -0
  136. package/dist/{stories/range.stories.d.ts → pd-range/pd-range.stories.d.ts} +1 -1
  137. package/dist/pd-range/pd-range.stories.d.ts.map +1 -0
  138. package/dist/pd-range.d.ts +2 -22
  139. package/dist/pd-range.js +6 -285
  140. package/dist/pd-select/PdSelect.d.ts +21 -0
  141. package/dist/pd-select/PdSelect.d.ts.map +1 -0
  142. package/dist/pd-select/PdSelect.js +142 -0
  143. package/dist/pd-select/pd-select.d.ts +3 -0
  144. package/dist/pd-select/pd-select.d.ts.map +1 -0
  145. package/dist/{stories/select.stories.d.ts → pd-select/pd-select.stories.d.ts} +1 -1
  146. package/dist/pd-select/pd-select.stories.d.ts.map +1 -0
  147. package/dist/pd-select.d.ts +2 -18
  148. package/dist/pd-select.js +6 -144
  149. package/dist/stories/01_index.stories.d.ts.map +1 -1
  150. package/dist/styles/shared-input-field-styles.js +4 -4
  151. package/dist/styles/shared-input-styles.js +4 -4
  152. package/dist/types.js +2 -3
  153. package/dist/validators.js +5 -12
  154. package/package.json +22 -42
  155. package/dist/pd-base-input-element.d.ts.map +0 -1
  156. package/dist/pd-base-ui-input.d.ts.map +0 -1
  157. package/dist/pd-base-ui.d.ts.map +0 -1
  158. package/dist/pd-button-group.d.ts.map +0 -1
  159. package/dist/pd-button.d.ts.map +0 -1
  160. package/dist/pd-checkbox.d.ts.map +0 -1
  161. package/dist/pd-form-container.d.ts.map +0 -1
  162. package/dist/pd-form-row.d.ts.map +0 -1
  163. package/dist/pd-hover-box.d.ts.map +0 -1
  164. package/dist/pd-icon-button-select-group.d.ts.map +0 -1
  165. package/dist/pd-icon-panel-button.d.ts +0 -24
  166. package/dist/pd-icon-panel-button.d.ts.map +0 -1
  167. package/dist/pd-input-area.d.ts.map +0 -1
  168. package/dist/pd-input-file.d.ts.map +0 -1
  169. package/dist/pd-input-time.d.ts.map +0 -1
  170. package/dist/pd-input.d.ts.map +0 -1
  171. package/dist/pd-radio-group.d.ts.map +0 -1
  172. package/dist/pd-range.d.ts.map +0 -1
  173. package/dist/pd-select.d.ts.map +0 -1
  174. package/dist/stories/button.stories.d.ts +0 -22
  175. package/dist/stories/button.stories.d.ts.map +0 -1
  176. package/dist/stories/checkbox.stories.d.ts.map +0 -1
  177. package/dist/stories/form-container.stories.d.ts.map +0 -1
  178. package/dist/stories/form-container2.stories.d.ts.map +0 -1
  179. package/dist/stories/form-container3.stories.d.ts.map +0 -1
  180. package/dist/stories/form-row.stories.d.ts.map +0 -1
  181. package/dist/stories/input-area.stories.d.ts.map +0 -1
  182. package/dist/stories/input-file.stories.d.ts.map +0 -1
  183. package/dist/stories/input.stories.d.ts.map +0 -1
  184. package/dist/stories/pd-button-group.stories.d.ts.map +0 -1
  185. package/dist/stories/pd-hover-box.stories.d.ts.map +0 -1
  186. package/dist/stories/pd-icon-button-select-group.stories.d.ts.map +0 -1
  187. package/dist/stories/radio-group.stories.d.ts.map +0 -1
  188. package/dist/stories/range.stories.d.ts.map +0 -1
  189. package/dist/stories/select.stories.d.ts.map +0 -1
  190. /package/dist/{pd-base-ui.d.ts → base/pd-base-ui.d.ts} +0 -0
  191. /package/dist/{stories → pd-button-group}/pd-button-group.stories.d.ts +0 -0
  192. /package/dist/{stories → pd-form-container}/form-container.stories.d.ts +0 -0
  193. /package/dist/{stories → pd-form-container}/form-container2.stories.d.ts +0 -0
  194. /package/dist/{stories → pd-form-container}/form-container3.stories.d.ts +0 -0
  195. /package/dist/{stories → pd-hover-box}/pd-hover-box.stories.d.ts +0 -0
@@ -0,0 +1,119 @@
1
+ import { css, html } from 'lit';
2
+ import { state } from 'lit/decorators.js';
3
+ import { PdBaseUI } from '../base/pd-base-ui.js';
4
+
5
+ var __defProp = Object.defineProperty;
6
+ var __decorateClass = (decorators, target, key, kind) => {
7
+ var result = void 0 ;
8
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
9
+ if (decorator = decorators[i])
10
+ result = (decorator(target, key, result) ) || result;
11
+ if (result) __defProp(target, key, result);
12
+ return result;
13
+ };
14
+ class PdHoverBox extends PdBaseUI {
15
+ constructor() {
16
+ super(...arguments);
17
+ this._visible = false;
18
+ this._toBottom = false;
19
+ }
20
+ static {
21
+ this.styles = [
22
+ PdBaseUI.styles,
23
+ css`
24
+ :host {
25
+ display: block;
26
+ }
27
+
28
+ .hover-box {
29
+ position: relative;
30
+ }
31
+
32
+ .info-view {
33
+ position: absolute;
34
+ z-index: 100;
35
+ background-color: var(
36
+ --pd-hover-box-bg-col,
37
+ var(--pd-default-dark-col)
38
+ );
39
+ border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
40
+ text-align: center;
41
+ padding: 10px;
42
+ width: 240px;
43
+ color: var(--pd-hover-box-font-col, white);
44
+ font-size: var(--pd-hover-box-font-size, 0.8em);
45
+ transition: opacity 0.2s ease-in;
46
+ }
47
+
48
+ .visible {
49
+ visibility: visible;
50
+ opacity: 1;
51
+ }
52
+
53
+ .hidden {
54
+ visibility: hidden;
55
+ opacity: 0;
56
+ }
57
+
58
+ .to-bottom {
59
+ right: -3px;
60
+ top: -3px;
61
+ }
62
+
63
+ .to-top {
64
+ right: -3px;
65
+ bottom: -3px;
66
+ }
67
+
68
+ @media (max-width: 640px) {
69
+ .info-view {
70
+ width: 190px;
71
+ }
72
+ }
73
+ `
74
+ ];
75
+ }
76
+ render() {
77
+ return html`
78
+ <div class="hover-box">
79
+ <div @click=${this._activateInfo}>
80
+ <slot name="normal-view"></slot>
81
+ </div>
82
+
83
+ <div
84
+ id="infoViewId"
85
+ @click=${this._closeInfo}
86
+ class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}"
87
+ >
88
+ <slot name="info-view"></slot>
89
+ </div>
90
+ </div>
91
+ `;
92
+ }
93
+ /**
94
+ * Activates and positions the info box based on current viewport height.
95
+ */
96
+ _activateInfo(e) {
97
+ const modal = this.shadowRoot?.getElementById("infoViewId");
98
+ if (!modal) return;
99
+ const rect = modal.getBoundingClientRect();
100
+ const fitsBelow = modal.offsetHeight + rect.top + rect.height <= window.innerHeight;
101
+ this._toBottom = fitsBelow;
102
+ this._visible = true;
103
+ e.stopPropagation();
104
+ }
105
+ /**
106
+ * Hides the info box again
107
+ */
108
+ _closeInfo() {
109
+ this._visible = false;
110
+ }
111
+ }
112
+ __decorateClass([
113
+ state()
114
+ ], PdHoverBox.prototype, "_visible");
115
+ __decorateClass([
116
+ state()
117
+ ], PdHoverBox.prototype, "_toBottom");
118
+
119
+ export { PdHoverBox };
@@ -0,0 +1,3 @@
1
+ import { PdHoverBox } from './PdHoverBox.js';
2
+ export { PdHoverBox };
3
+ //# sourceMappingURL=pd-hover-box.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-hover-box.d.ts","sourceRoot":"","sources":["../../src/pd-hover-box/pd-hover-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,OAAO,EAAE,UAAU,EAAE,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-hover-box.stories.d.ts","sourceRoot":"","sources":["../../src/pd-hover-box/pd-hover-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,iBAAiB,EAAE,KA4J/B,CAAC"}
@@ -1,23 +1,2 @@
1
- import { TemplateResult, CSSResultGroup } from 'lit';
2
- import { PdBaseUI } from './pd-base-ui.js';
3
- export declare class PdHoverBox extends PdBaseUI {
4
- /**
5
- * Controls visibility of the info box
6
- */
7
- private _visible;
8
- /**
9
- * True if the info box should open downward
10
- */
11
- private _toBottom;
12
- static styles: CSSResultGroup;
13
- render(): TemplateResult;
14
- /**
15
- * Activates and positions the info box based on current viewport height.
16
- */
17
- private _activateInfo;
18
- /**
19
- * Hides the info box again
20
- */
21
- private _closeInfo;
22
- }
23
- //# sourceMappingURL=pd-hover-box.d.ts.map
1
+ export * from './pd-hover-box/pd-hover-box'
2
+ export {}
@@ -1,122 +1,8 @@
1
- import { css, html } from "lit";
2
- import { state, customElement } from "lit/decorators.js";
3
- import { PdBaseUI } from "./pd-base-ui.js";
4
- var __defProp = Object.defineProperty;
5
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __decorateClass = (decorators, target, key, kind) => {
7
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
8
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
9
- if (decorator = decorators[i])
10
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
11
- if (kind && result) __defProp(target, key, result);
12
- return result;
13
- };
14
- let PdHoverBox = class extends PdBaseUI {
15
- constructor() {
16
- super(...arguments);
17
- this._visible = false;
18
- this._toBottom = false;
19
- }
20
- render() {
21
- return html`
22
- <div class="hover-box">
23
- <div @click=${this._activateInfo}>
24
- <slot name="normal-view"></slot>
25
- </div>
1
+ import { PdHoverBox } from './pd-hover-box/PdHoverBox.js';
26
2
 
27
- <div
28
- id="infoViewId"
29
- @click=${this._closeInfo}
30
- class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}"
31
- >
32
- <slot name="info-view"></slot>
33
- </div>
34
- </div>
35
- `;
36
- }
37
- /**
38
- * Activates and positions the info box based on current viewport height.
39
- */
40
- _activateInfo(e) {
41
- var _a;
42
- const modal = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("infoViewId");
43
- if (!modal) return;
44
- const rect = modal.getBoundingClientRect();
45
- const fitsBelow = modal.offsetHeight + rect.top + rect.height <= window.innerHeight;
46
- this._toBottom = fitsBelow;
47
- this._visible = true;
48
- e.stopPropagation();
49
- }
50
- /**
51
- * Hides the info box again
52
- */
53
- _closeInfo() {
54
- this._visible = false;
55
- }
56
- };
57
- PdHoverBox.styles = [
58
- PdBaseUI.styles,
59
- css`
60
- :host {
61
- display: block;
62
- }
3
+ const tag = "pd-hover-box";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdHoverBox);
6
+ }
63
7
 
64
- .hover-box {
65
- position: relative;
66
- }
67
-
68
- .info-view {
69
- position: absolute;
70
- z-index: 100;
71
- background-color: var(
72
- --pd-hover-box-bg-col,
73
- var(--pd-default-dark-col)
74
- );
75
- border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
76
- text-align: center;
77
- padding: 10px;
78
- width: 240px;
79
- color: var(--pd-hover-box-font-col, white);
80
- font-size: var(--pd-hover-box-font-size, 0.8em);
81
- transition: opacity 0.2s ease-in;
82
- }
83
-
84
- .visible {
85
- visibility: visible;
86
- opacity: 1;
87
- }
88
-
89
- .hidden {
90
- visibility: hidden;
91
- opacity: 0;
92
- }
93
-
94
- .to-bottom {
95
- right: -3px;
96
- top: -3px;
97
- }
98
-
99
- .to-top {
100
- right: -3px;
101
- bottom: -3px;
102
- }
103
-
104
- @media (max-width: 640px) {
105
- .info-view {
106
- width: 190px;
107
- }
108
- }
109
- `
110
- ];
111
- __decorateClass([
112
- state()
113
- ], PdHoverBox.prototype, "_visible", 2);
114
- __decorateClass([
115
- state()
116
- ], PdHoverBox.prototype, "_toBottom", 2);
117
- PdHoverBox = __decorateClass([
118
- customElement("pd-hover-box")
119
- ], PdHoverBox);
120
- export {
121
- PdHoverBox
122
- };
8
+ export { PdHoverBox };
@@ -0,0 +1,35 @@
1
+ import { TemplateResult, CSSResultGroup } from 'lit';
2
+ import { PdBaseInputElement } from '../base/pd-base-input-element.js';
3
+ /**
4
+ * @tagname pd-input
5
+ */
6
+ export declare class PdInput extends PdBaseInputElement {
7
+ /**
8
+ * Optional icon to display inside input
9
+ */
10
+ icon: string;
11
+ /**
12
+ * If true, uses input type password
13
+ */
14
+ secret: boolean;
15
+ /**
16
+ * Minimum length constraint
17
+ */
18
+ minlength?: number;
19
+ /**
20
+ * Maximum length constraint
21
+ */
22
+ maxlength?: number;
23
+ /**
24
+ * If true, restricts input to numbers only (legacy, use type="number" langfristig)
25
+ */
26
+ onlyNumbers: boolean;
27
+ static styles: CSSResultGroup;
28
+ constructor();
29
+ connectedCallback(): void;
30
+ private _setupValidators;
31
+ render(): TemplateResult;
32
+ protected _onKeyUp(e: KeyboardEvent): void;
33
+ private _iconClicked;
34
+ }
35
+ //# sourceMappingURL=PdInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdInput.d.ts","sourceRoot":"","sources":["../../src/pd-input/PdInput.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAKtE;;GAEG;AACH,qBAAa,OAAQ,SAAQ,kBAAkB;IAC7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB;;OAEG;IAEH,WAAW,UAAS;IAEpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM,IAAI,cAAc;cA0Cd,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAWnD,OAAO,CAAC,YAAY;CAKrB"}
@@ -0,0 +1,123 @@
1
+ import { css, html } from 'lit';
2
+ import { msg, str } from '@lit/localize';
3
+ import { property } from 'lit/decorators.js';
4
+ import { classMap } from 'lit/directives/class-map.js';
5
+ import '@progressive-development/pd-icon/pd-icon';
6
+ import { INPUT_TYPE_TEXT } from '../base/pd-base-ui-input.js';
7
+ import { PdBaseInputElement } from '../base/pd-base-input-element.js';
8
+
9
+ var __defProp = Object.defineProperty;
10
+ var __decorateClass = (decorators, target, key, kind) => {
11
+ var result = void 0 ;
12
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
+ if (decorator = decorators[i])
14
+ result = (decorator(target, key, result) ) || result;
15
+ if (result) __defProp(target, key, result);
16
+ return result;
17
+ };
18
+ const onlyContainsNumbers = (str2) => /^\d+$/.test(str2);
19
+ class PdInput extends PdBaseInputElement {
20
+ constructor() {
21
+ super();
22
+ this.icon = "";
23
+ this.secret = false;
24
+ this.maxlength = 500;
25
+ this.onlyNumbers = false;
26
+ this._inputType = INPUT_TYPE_TEXT;
27
+ }
28
+ static {
29
+ this.styles = [
30
+ PdBaseInputElement.styles,
31
+ css`
32
+ * {
33
+ box-sizing: border-box;
34
+ }
35
+ `
36
+ ];
37
+ }
38
+ connectedCallback() {
39
+ this._setupValidators();
40
+ super.connectedCallback();
41
+ }
42
+ _setupValidators() {
43
+ const validators = [];
44
+ if (this.minlength !== void 0) {
45
+ validators.push(
46
+ (value) => value.length < this.minlength ? msg(str`Mindestens ${this.minlength} Zeichen`) : null
47
+ );
48
+ }
49
+ if (this.maxlength !== void 0) {
50
+ validators.push(
51
+ (value) => value.length > this.maxlength ? msg(str`Maximal ${this.maxlength} Zeichen`) : null
52
+ );
53
+ }
54
+ this._validators = validators;
55
+ }
56
+ render() {
57
+ const inputId = `${this.id}Input`;
58
+ return html`
59
+ ${this._renderLabel(inputId)}
60
+ <div
61
+ class="${classMap(
62
+ this.getClassmap({
63
+ input: true
64
+ })
65
+ )}"
66
+ >
67
+ ${this.icon ? html`
68
+ <pd-icon
69
+ icon=${this.icon}
70
+ activeIcon
71
+ @click=${this._iconClicked}
72
+ class="infield-icon"
73
+ ></pd-icon>
74
+ ` : ""}
75
+ <input
76
+ id=${inputId}
77
+ name=${this.name || this.valueName || this.autoCompleteName}
78
+ autocomplete=${this.autoCompleteName ?? "off"}
79
+ class="input-style ${this.gradient ? "gradient" : ""}"
80
+ type=${this.secret ? "password" : "text"}
81
+ placeholder=${this.placeHolder}
82
+ .value=${this._value}
83
+ minlength=${this.minlength ?? ""}
84
+ maxlength=${this.maxlength ?? ""}
85
+ ?readonly=${this.readonly}
86
+ ?disabled=${this.disabled}
87
+ @keyup=${this._onKeyUp}
88
+ @blur=${this._onBlur}
89
+ @focus=${this._onFocus}
90
+ />
91
+ </div>
92
+ ${this._renderErrorMsg()}
93
+ `;
94
+ }
95
+ _onKeyUp(e) {
96
+ if (this.onlyNumbers && this._input?.value && !onlyContainsNumbers(this._input.value)) {
97
+ this._input.value = this._input.value.replace(/\D/g, "");
98
+ }
99
+ super._onKeyUp(e);
100
+ }
101
+ _iconClicked() {
102
+ this.dispatchEvent(
103
+ new CustomEvent("input-icon-click", { bubbles: true, composed: true })
104
+ );
105
+ }
106
+ }
107
+ __decorateClass([
108
+ property({ type: String })
109
+ ], PdInput.prototype, "icon");
110
+ __decorateClass([
111
+ property({ type: Boolean })
112
+ ], PdInput.prototype, "secret");
113
+ __decorateClass([
114
+ property({ type: Number })
115
+ ], PdInput.prototype, "minlength");
116
+ __decorateClass([
117
+ property({ type: Number })
118
+ ], PdInput.prototype, "maxlength");
119
+ __decorateClass([
120
+ property({ type: Boolean })
121
+ ], PdInput.prototype, "onlyNumbers");
122
+
123
+ export { PdInput };
@@ -0,0 +1,3 @@
1
+ import { PdInput } from './PdInput.js';
2
+ export { PdInput };
3
+ //# sourceMappingURL=pd-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-input.d.ts","sourceRoot":"","sources":["../../src/pd-input/pd-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -34,4 +34,4 @@ declare const meta: {
34
34
  export default meta;
35
35
  type Story = StoryObj;
36
36
  export declare const Input: Story;
37
- //# sourceMappingURL=input.stories.d.ts.map
37
+ //# sourceMappingURL=pd-input.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-input.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input/pd-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,eAAe,CAAC;AACvB,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAkKnB,CAAC"}
@@ -0,0 +1,23 @@
1
+ import { CSSResultGroup } from 'lit';
2
+ import { PdBaseInputElement } from '../base/pd-base-input-element.js';
3
+ /**
4
+ * @tagname pd-input-area
5
+ */
6
+ export declare class PdInputArea extends PdBaseInputElement {
7
+ rows: number;
8
+ cols?: number;
9
+ /**
10
+ * Minimum length constraint
11
+ */
12
+ minlength?: number;
13
+ /**
14
+ * Maximum length constraint
15
+ */
16
+ maxlength?: number;
17
+ static styles: CSSResultGroup;
18
+ constructor();
19
+ connectedCallback(): void;
20
+ private _setupValidators;
21
+ render(): import('lit').TemplateResult<1>;
22
+ }
23
+ //# sourceMappingURL=PdInputArea.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdInputArea.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/PdInputArea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAItE;;GAEG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,SAAK;IAGT,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAQpC;;IAOO,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM;CAgChB"}
@@ -0,0 +1,99 @@
1
+ import { css, html } from 'lit';
2
+ import { msg, str } from '@lit/localize';
3
+ import { property } from 'lit/decorators.js';
4
+ import { classMap } from 'lit/directives/class-map.js';
5
+ import { PdBaseInputElement } from '../base/pd-base-input-element.js';
6
+ import { INPUT_TYPE_AREA } from '../base/pd-base-ui-input.js';
7
+
8
+ var __defProp = Object.defineProperty;
9
+ var __decorateClass = (decorators, target, key, kind) => {
10
+ var result = void 0 ;
11
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
+ if (decorator = decorators[i])
13
+ result = (decorator(target, key, result) ) || result;
14
+ if (result) __defProp(target, key, result);
15
+ return result;
16
+ };
17
+ class PdInputArea extends PdBaseInputElement {
18
+ constructor() {
19
+ super();
20
+ this.rows = 2;
21
+ this.maxlength = 500;
22
+ this._inputType = INPUT_TYPE_AREA;
23
+ }
24
+ static {
25
+ this.styles = [
26
+ PdBaseInputElement.styles,
27
+ css`
28
+ /* override default width for area */
29
+ .input-style {
30
+ width: var(--pd-input-field-width, 240px);
31
+ }
32
+ `
33
+ ];
34
+ }
35
+ connectedCallback() {
36
+ this._setupValidators();
37
+ super.connectedCallback();
38
+ }
39
+ _setupValidators() {
40
+ const validators = [];
41
+ if (this.minlength !== void 0) {
42
+ validators.push(
43
+ (value) => value.length < this.minlength ? msg(str`Mindestens ${this.minlength} Zeichen`) : null
44
+ );
45
+ }
46
+ if (this.maxlength !== void 0) {
47
+ validators.push(
48
+ (value) => value.length > this.maxlength ? msg(str`Maximal ${this.maxlength} Zeichen`) : null
49
+ );
50
+ }
51
+ this._validators = validators;
52
+ }
53
+ render() {
54
+ const inputAreaId = `${this.id}InputArea`;
55
+ return html`
56
+ ${this._renderLabel(inputAreaId)}
57
+ <div
58
+ class="${classMap(
59
+ this.getClassmap({
60
+ input: true
61
+ })
62
+ )}"
63
+ >
64
+ <textarea
65
+ id=${inputAreaId}
66
+ name=${this.name || this.valueName || this.autoCompleteName}
67
+ autocomplete=${this.autoCompleteName ?? "off"}
68
+ class="input-style ${this.gradient ? "gradient" : ""}"
69
+ rows=${this.rows}
70
+ cols=${this.cols ?? ""}
71
+ placeholder=${this.placeHolder}
72
+ minlength=${this.minlength ?? ""}
73
+ maxlength=${this.maxlength ?? ""}
74
+ ?disabled=${this.disabled}
75
+ ?readonly=${this.readonly}
76
+ .value=${this.value}
77
+ @keyup=${this._onKeyUp}
78
+ @blur=${this._onBlur}
79
+ @focus=${this._onFocus}
80
+ ></textarea>
81
+ </div>
82
+ ${this._renderErrorMsg()}
83
+ `;
84
+ }
85
+ }
86
+ __decorateClass([
87
+ property({ type: Number })
88
+ ], PdInputArea.prototype, "rows");
89
+ __decorateClass([
90
+ property({ type: Number })
91
+ ], PdInputArea.prototype, "cols");
92
+ __decorateClass([
93
+ property({ type: Number })
94
+ ], PdInputArea.prototype, "minlength");
95
+ __decorateClass([
96
+ property({ type: Number })
97
+ ], PdInputArea.prototype, "maxlength");
98
+
99
+ export { PdInputArea };
@@ -0,0 +1,3 @@
1
+ import { PdInputArea } from './PdInputArea.js';
2
+ export { PdInputArea };
3
+ //# sourceMappingURL=pd-input-area.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-input-area.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/pd-input-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -51,4 +51,4 @@ declare const meta: {
51
51
  export default meta;
52
52
  type Story = StoryObj;
53
53
  export declare const InputArea: Story;
54
- //# sourceMappingURL=input-area.stories.d.ts.map
54
+ //# sourceMappingURL=pd-input-area.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-input-area.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-area/pd-input-area.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,oBAAoB,CAAC;AAG5B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KA4GvB,CAAC"}
@@ -1,20 +1,2 @@
1
- import { CSSResultGroup } from 'lit';
2
- import { PdBaseInputElement } from './pd-base-input-element.js';
3
- export declare class PdInputArea extends PdBaseInputElement {
4
- rows: number;
5
- cols?: number;
6
- /**
7
- * Minimum length constraint
8
- */
9
- minlength?: number;
10
- /**
11
- * Maximum length constraint
12
- */
13
- maxlength?: number;
14
- static styles: CSSResultGroup;
15
- constructor();
16
- connectedCallback(): void;
17
- private _setupValidators;
18
- render(): import('lit-html').TemplateResult<1>;
19
- }
20
- //# sourceMappingURL=pd-input-area.d.ts.map
1
+ export * from './pd-input-area/pd-input-area'
2
+ export {}