@progressive-development/pd-forms 0.8.6 → 0.9.1

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} +10 -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 -36
  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} +110 -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 +21 -41
  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,3 @@
1
+ import { PdButton } from './PdButton.js';
2
+ export { PdButton };
3
+ //# sourceMappingURL=pd-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button.d.ts","sourceRoot":"","sources":["../../src/pd-button/pd-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOzC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=pd-button.spec.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button.spec.d.ts","sourceRoot":"","sources":["../../src/pd-button/pd-button.spec.ts"],"names":[],"mappings":""}
@@ -0,0 +1,12 @@
1
+ import { StoryObj } from '@storybook/web-components';
2
+ declare const meta: {
3
+ title: string;
4
+ component: string;
5
+ tags: string[];
6
+ };
7
+ export default meta;
8
+ type Story = StoryObj;
9
+ export declare const Button: Story;
10
+ export declare const PrimaryButton: Story;
11
+ export declare const DisabledButton: Story;
12
+ //# sourceMappingURL=pd-button.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button/pd-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM3D,QAAA,MAAM,IAAI;;;;CAIuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { CSSResultGroup, PropertyValues } from 'lit';
2
+ import { PdBaseUI } from '../base/pd-base-ui';
3
+ import { ButtonData } from '../types';
4
+ export declare class PdButtonGroup extends PdBaseUI {
5
+ buttonList: ButtonData[];
6
+ initValue: number[];
7
+ private _selectedButtons;
8
+ static styles: CSSResultGroup;
9
+ willUpdate(changedProps: PropertyValues<this>): void;
10
+ reset(selectedValue: number): void;
11
+ render(): import('lit').TemplateResult<1>;
12
+ private onClick;
13
+ }
14
+ //# sourceMappingURL=PdButtonGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdButtonGroup.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/PdButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,uCAAuC,CAAC;AAE/C,qBAAa,aAAc,SAAQ,QAAQ;IAEzC,UAAU,EAAE,UAAU,EAAE,CAAM;IAG9B,SAAS,EAAE,MAAM,EAAE,CAAM;IAGzB,OAAO,CAAC,gBAAgB,CAAgB;IAExC,OAAgB,MAAM,EAAE,cAAc,CA2CpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWtD,KAAK,CAAC,aAAa,EAAE,MAAM;IAIzB,MAAM;IAkBf,OAAO,CAAC,OAAO;CAYhB"}
@@ -0,0 +1,115 @@
1
+ import { css, html } from 'lit';
2
+ import { property, state } from 'lit/decorators.js';
3
+ import { PdBaseUI } from '../base/pd-base-ui.js';
4
+ import '../pd-panel-button.js';
5
+
6
+ var __defProp = Object.defineProperty;
7
+ var __decorateClass = (decorators, target, key, kind) => {
8
+ var result = void 0 ;
9
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
+ if (decorator = decorators[i])
11
+ result = (decorator(target, key, result) ) || result;
12
+ if (result) __defProp(target, key, result);
13
+ return result;
14
+ };
15
+ class PdButtonGroup extends PdBaseUI {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.buttonList = [];
19
+ this.initValue = [];
20
+ this._selectedButtons = [];
21
+ }
22
+ static {
23
+ this.styles = [
24
+ PdBaseUI.styles,
25
+ css`
26
+ :host {
27
+ display: inline-block;
28
+ --group-direction: var(--pd-button-group-direction, row);
29
+ --group-width: var(--pd-button-group-width, auto);
30
+ /*--pd-icon-button-border-radius: 0;*/
31
+ --group-border-radius: var(--pd-border-radius, 0.5rem);
32
+ }
33
+
34
+ .button-group {
35
+ display: flex;
36
+ flex-direction: var(--group-direction);
37
+ width: var(--group-width);
38
+ --pd-icon-button-width: 100%;
39
+ }
40
+
41
+ /* geht noch nicht */
42
+ .button-group pd-panel-button:first-child {
43
+ border-top-left-radius: var(--group-border-radius);
44
+ border-bottom-left-radius: var(--group-border-radius);
45
+ }
46
+
47
+ .button-group pd-panel-button:last-child {
48
+ border-top-right-radius: var(--group-border-radius);
49
+ border-bottom-right-radius: var(--group-border-radiusm);
50
+ }
51
+
52
+ :host([vertical]) .button-group pd-panel-button:first-child {
53
+ border-top-left-radius: var(--group-border-radius);
54
+ border-top-right-radius: var(--group-border-radius);
55
+ border-bottom-left-radius: 0;
56
+ border-bottom-right-radius: 0;
57
+ }
58
+
59
+ :host([vertical]) .button-group pd-panel-button:last-child {
60
+ border-bottom-left-radius: var(--group-border-radius);
61
+ border-bottom-right-radius: var(--group-border-radius);
62
+ border-top-left-radius: 0;
63
+ border-top-right-radius: 0;
64
+ }
65
+ `
66
+ ];
67
+ }
68
+ willUpdate(changedProps) {
69
+ if (changedProps.has("initValue") && this.initValue?.length > 0 && this._selectedButtons.length === 0) {
70
+ this._selectedButtons = [...this.initValue];
71
+ }
72
+ }
73
+ reset(selectedValue) {
74
+ this._selectedButtons = [selectedValue];
75
+ }
76
+ render() {
77
+ return html`
78
+ <div class="button-group">
79
+ ${this.buttonList.map(
80
+ (data, index) => html`
81
+ <pd-panel-button
82
+ ?selected="${this._selectedButtons.includes(index)}"
83
+ buttonText="${data.text || ""}"
84
+ pdButtonIcon="${data.pdIcon || ""}"
85
+ ?disabled="${data.disabled === true}"
86
+ @button-clicked="${() => this.onClick(index)}"
87
+ ></pd-panel-button>
88
+ `
89
+ )}
90
+ </div>
91
+ `;
92
+ }
93
+ onClick(index) {
94
+ if (this._selectedButtons.includes(index)) return;
95
+ this._selectedButtons = [index];
96
+ this.dispatchEvent(
97
+ new CustomEvent("pd-button-group-change", {
98
+ detail: { selected: this._selectedButtons },
99
+ bubbles: true,
100
+ composed: true
101
+ })
102
+ );
103
+ }
104
+ }
105
+ __decorateClass([
106
+ property({ type: Array })
107
+ ], PdButtonGroup.prototype, "buttonList");
108
+ __decorateClass([
109
+ property({ type: Array })
110
+ ], PdButtonGroup.prototype, "initValue");
111
+ __decorateClass([
112
+ state()
113
+ ], PdButtonGroup.prototype, "_selectedButtons");
114
+
115
+ export { PdButtonGroup };
@@ -0,0 +1,3 @@
1
+ import { PdButtonGroup } from './PdButtonGroup.js';
2
+ export { PdButtonGroup };
3
+ //# sourceMappingURL=pd-button-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button-group.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/pd-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/pd-button-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,sBAAsB,CAAC;AAgB9B,QAAA,MAAM,IAAI;;;;CAIM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmBlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC"}
@@ -1,14 +1,2 @@
1
- import { CSSResultGroup, PropertyValues } from 'lit';
2
- import { PdBaseUI } from './pd-base-ui';
3
- import { ButtonData } from './types';
4
- export declare class PdButtonGroup extends PdBaseUI {
5
- buttonList: ButtonData[];
6
- initValue: number[];
7
- private _selectedButtons;
8
- static styles: CSSResultGroup;
9
- willUpdate(changedProps: PropertyValues<this>): void;
10
- reset(selectedValue: number): void;
11
- render(): import('lit-html').TemplateResult<1>;
12
- private onClick;
13
- }
14
- //# sourceMappingURL=pd-button-group.d.ts.map
1
+ export * from './pd-button-group/pd-button-group'
2
+ export {}
@@ -1,118 +1,8 @@
1
- import { css, html } from "lit";
2
- import { property, state, customElement } from "lit/decorators.js";
3
- import { PdBaseUI } from "./pd-base-ui.js";
4
- import "./pd-icon-panel-button.js";
5
- var __defProp = Object.defineProperty;
6
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
- var __decorateClass = (decorators, target, key, kind) => {
8
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
9
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
- if (decorator = decorators[i])
11
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
12
- if (kind && result) __defProp(target, key, result);
13
- return result;
14
- };
15
- let PdButtonGroup = class extends PdBaseUI {
16
- constructor() {
17
- super(...arguments);
18
- this.buttonList = [];
19
- this.initValue = [];
20
- this._selectedButtons = [];
21
- }
22
- willUpdate(changedProps) {
23
- var _a;
24
- if (changedProps.has("initValue") && ((_a = this.initValue) == null ? void 0 : _a.length) > 0 && this._selectedButtons.length === 0) {
25
- this._selectedButtons = [...this.initValue];
26
- }
27
- }
28
- reset(selectedValue) {
29
- this._selectedButtons = [selectedValue];
30
- }
31
- render() {
32
- return html`
33
- <div class="button-group">
34
- ${this.buttonList.map(
35
- (data, index) => html`
36
- <pd-icon-panel-button
37
- ?selected="${this._selectedButtons.includes(index)}"
38
- buttonText="${data.text || ""}"
39
- pdButtonIcon="${data.pdIcon || ""}"
40
- ?disabled="${data.disabled === true}"
41
- @button-clicked="${() => this.onClick(index)}"
42
- ></pd-icon-panel-button>
43
- `
44
- )}
45
- </div>
46
- `;
47
- }
48
- onClick(index) {
49
- if (this._selectedButtons.includes(index)) return;
50
- this._selectedButtons = [index];
51
- this.dispatchEvent(
52
- new CustomEvent("pd-button-group-change", {
53
- detail: { selected: this._selectedButtons },
54
- bubbles: true,
55
- composed: true
56
- })
57
- );
58
- }
59
- };
60
- PdButtonGroup.styles = [
61
- PdBaseUI.styles,
62
- css`
63
- :host {
64
- display: inline-block;
65
- --group-direction: var(--pd-button-group-direction, row);
66
- --group-width: var(--pd-button-group-width, auto);
67
- /*--pd-icon-button-border-radius: 0;*/
68
- --group-border-radius: var(--pd-border-radius, 0.5rem);
69
- }
1
+ import { PdButtonGroup } from './pd-button-group/PdButtonGroup.js';
70
2
 
71
- .button-group {
72
- display: flex;
73
- flex-direction: var(--group-direction);
74
- width: var(--group-width);
75
- --pd-icon-button-width: 100%;
76
- }
3
+ const tag = "pd-button-group";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdButtonGroup);
6
+ }
77
7
 
78
- /* geht noch nicht */
79
- .button-group pd-icon-panel-button:first-child {
80
- border-top-left-radius: var(--group-border-radius);
81
- border-bottom-left-radius: var(--group-border-radius);
82
- }
83
-
84
- .button-group pd-icon-panel-button:last-child {
85
- border-top-right-radius: var(--group-border-radius);
86
- border-bottom-right-radius: var(--group-border-radiusm);
87
- }
88
-
89
- :host([vertical]) .button-group pd-icon-panel-button:first-child {
90
- border-top-left-radius: var(--group-border-radius);
91
- border-top-right-radius: var(--group-border-radius);
92
- border-bottom-left-radius: 0;
93
- border-bottom-right-radius: 0;
94
- }
95
-
96
- :host([vertical]) .button-group pd-icon-panel-button:last-child {
97
- border-bottom-left-radius: var(--group-border-radius);
98
- border-bottom-right-radius: var(--group-border-radius);
99
- border-top-left-radius: 0;
100
- border-top-right-radius: 0;
101
- }
102
- `
103
- ];
104
- __decorateClass([
105
- property({ type: Array })
106
- ], PdButtonGroup.prototype, "buttonList", 2);
107
- __decorateClass([
108
- property({ type: Array })
109
- ], PdButtonGroup.prototype, "initValue", 2);
110
- __decorateClass([
111
- state()
112
- ], PdButtonGroup.prototype, "_selectedButtons", 2);
113
- PdButtonGroup = __decorateClass([
114
- customElement("pd-button-group")
115
- ], PdButtonGroup);
116
- export {
117
- PdButtonGroup
118
- };
8
+ export { PdButtonGroup };
@@ -1,7 +1,10 @@
1
1
  import { CSSResultGroup, PropertyValues } from 'lit';
2
- import { PdBaseUI } from './pd-base-ui.js';
3
- import { ButtonData } from './types.js';
4
- export declare class PdIconButtonSelectGroup extends PdBaseUI {
2
+ import { PdBaseUI } from '../base/pd-base-ui.js';
3
+ import { ButtonData } from '../types.js';
4
+ /**
5
+ * @tagname pd-button-select-group
6
+ */
7
+ export declare class PdButtonSelectGroup extends PdBaseUI {
5
8
  options: ButtonData[];
6
9
  initValue: number;
7
10
  private _selectedValue;
@@ -9,7 +12,7 @@ export declare class PdIconButtonSelectGroup extends PdBaseUI {
9
12
  static styles: CSSResultGroup;
10
13
  willUpdate(changedProps: PropertyValues<this>): void;
11
14
  reset(selectedValue: number): void;
12
- render(): import('lit-html').TemplateResult<1> | "";
15
+ render(): import('lit').TemplateResult<1> | "";
13
16
  private handleSelectionChange;
14
17
  }
15
- //# sourceMappingURL=pd-icon-button-select-group.d.ts.map
18
+ //# sourceMappingURL=PdButtonSelectGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdButtonSelectGroup.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/PdButtonSelectGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAE/C;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,QAAQ;IAE/C,OAAO,EAAE,UAAU,EAAE,CAAM;IAG3B,SAAS,EAAE,MAAM,CAAM;IAGvB,OAAO,CAAC,cAAc,CAAc;IAGpC,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAcpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWtD,KAAK,CAAC,aAAa,EAAE,MAAM;IAOzB,MAAM;IAwBf,OAAO,CAAC,qBAAqB;CAe9B"}
@@ -1,25 +1,42 @@
1
- import { css, html } from "lit";
2
- import { property, state, query, customElement } from "lit/decorators.js";
3
- import { PdBaseUI } from "./pd-base-ui.js";
4
- import "./pd-icon-panel-button.js";
5
- import "./pd-button-group.js";
1
+ import { css, html } from 'lit';
2
+ import { property, state, query } from 'lit/decorators.js';
3
+ import { PdBaseUI } from '../base/pd-base-ui.js';
4
+ import '../pd-panel-button.js';
5
+ import '../pd-button-group.js';
6
+
6
7
  var __defProp = Object.defineProperty;
7
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
8
8
  var __decorateClass = (decorators, target, key, kind) => {
9
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
9
+ var result = void 0 ;
10
10
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
11
  if (decorator = decorators[i])
12
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
- if (kind && result) __defProp(target, key, result);
12
+ result = (decorator(target, key, result) ) || result;
13
+ if (result) __defProp(target, key, result);
14
14
  return result;
15
15
  };
16
- let PdIconButtonSelectGroup = class extends PdBaseUI {
16
+ class PdButtonSelectGroup extends PdBaseUI {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this.options = [];
20
20
  this.initValue = -1;
21
21
  this._selectedValue = -1;
22
22
  }
23
+ static {
24
+ this.styles = [
25
+ PdBaseUI.styles,
26
+ css`
27
+ :host {
28
+ display: inline-block;
29
+ position: relative;
30
+ --pd-panel-button-panel-padding: 0px;
31
+ }
32
+
33
+ .button-group-style {
34
+ --pd-button-group-direction: column;
35
+ --pd-icon-button-justify: flex-start;
36
+ }
37
+ `
38
+ ];
39
+ }
23
40
  willUpdate(changedProps) {
24
41
  if (changedProps.has("initValue") && this.initValue > 0 && this._selectedValue === -1) {
25
42
  this._selectedValue = this.initValue;
@@ -37,11 +54,11 @@ let PdIconButtonSelectGroup = class extends PdBaseUI {
37
54
  }
38
55
  const selectedData = this.options[this._selectedValue === -1 ? 0 : this._selectedValue];
39
56
  return html`
40
- <pd-icon-panel-button
57
+ <pd-panel-button
41
58
  panelButton
42
59
  hideClose
43
- .buttonText=${(selectedData == null ? void 0 : selectedData.text) ?? ""}
44
- .pdButtonIcon=${(selectedData == null ? void 0 : selectedData.pdIcon) ?? ""}
60
+ .buttonText=${selectedData?.text ?? ""}
61
+ .pdButtonIcon=${selectedData?.pdIcon ?? ""}
45
62
  >
46
63
  <pd-button-group
47
64
  id="buttonGroupId"
@@ -50,7 +67,7 @@ let PdIconButtonSelectGroup = class extends PdBaseUI {
50
67
  .initValue=${[this._selectedValue]}
51
68
  @pd-button-group-change=${this.handleSelectionChange}
52
69
  ></pd-button-group>
53
- </pd-icon-panel-button>
70
+ </pd-panel-button>
54
71
  `;
55
72
  }
56
73
  handleSelectionChange(e) {
@@ -67,37 +84,18 @@ let PdIconButtonSelectGroup = class extends PdBaseUI {
67
84
  );
68
85
  e.stopPropagation();
69
86
  }
70
- };
71
- PdIconButtonSelectGroup.styles = [
72
- PdBaseUI.styles,
73
- css`
74
- :host {
75
- display: inline-block;
76
- position: relative;
77
- --pd-icon-panel-button-panel-padding: 0px;
78
- }
79
-
80
- .button-group-style {
81
- --pd-button-group-direction: column;
82
- --pd-icon-button-justify: flex-start;
83
- }
84
- `
85
- ];
87
+ }
86
88
  __decorateClass([
87
89
  property({ type: Array })
88
- ], PdIconButtonSelectGroup.prototype, "options", 2);
90
+ ], PdButtonSelectGroup.prototype, "options");
89
91
  __decorateClass([
90
92
  property({ type: Number })
91
- ], PdIconButtonSelectGroup.prototype, "initValue", 2);
93
+ ], PdButtonSelectGroup.prototype, "initValue");
92
94
  __decorateClass([
93
95
  state()
94
- ], PdIconButtonSelectGroup.prototype, "_selectedValue", 2);
96
+ ], PdButtonSelectGroup.prototype, "_selectedValue");
95
97
  __decorateClass([
96
98
  query("#buttonGroupId")
97
- ], PdIconButtonSelectGroup.prototype, "_buttonGroupEl", 2);
98
- PdIconButtonSelectGroup = __decorateClass([
99
- customElement("pd-icon-button-select-group")
100
- ], PdIconButtonSelectGroup);
101
- export {
102
- PdIconButtonSelectGroup
103
- };
99
+ ], PdButtonSelectGroup.prototype, "_buttonGroupEl");
100
+
101
+ export { PdButtonSelectGroup };
@@ -0,0 +1,3 @@
1
+ import { PdButtonSelectGroup } from './PdButtonSelectGroup.js';
2
+ export { PdButtonSelectGroup };
3
+ //# sourceMappingURL=pd-button-select-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button-select-group.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/pd-button-select-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAO/D,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
@@ -3,7 +3,7 @@ declare const meta: {
3
3
  title: string;
4
4
  component: string;
5
5
  tags: string[];
6
- render: (args: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
6
+ render: (args: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
7
7
  argTypes: {
8
8
  initValue: {
9
9
  control: "number";
@@ -18,4 +18,4 @@ type Story = StoryObj;
18
18
  export declare const Default: Story;
19
19
  export declare const WithDisabledButtons: Story;
20
20
  export declare const InitSelectionSecond: Story;
21
- //# sourceMappingURL=pd-icon-button-select-group.stories.d.ts.map
21
+ //# sourceMappingURL=pd-button-select-group.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-button-select-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/pd-button-select-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAIrC,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AActB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './pd-button-select-group/pd-button-select-group'
2
+ export {}
@@ -0,0 +1,8 @@
1
+ import { PdButtonSelectGroup } from './pd-button-select-group/PdButtonSelectGroup.js';
2
+
3
+ const tag = "pd-button-select-group";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdButtonSelectGroup);
6
+ }
7
+
8
+ export { PdButtonSelectGroup };
@@ -1,16 +1,2 @@
1
- import { CSSResultGroup } from 'lit';
2
- import { PdBaseUI } from './pd-base-ui';
3
- export declare class PdButton extends PdBaseUI {
4
- /**
5
- * @event button-clicked
6
- */
7
- primary: boolean;
8
- gradient: boolean;
9
- disabled: boolean;
10
- text: string;
11
- value?: string;
12
- static styles: CSSResultGroup;
13
- render(): import('lit-html').TemplateResult<1>;
14
- private _handleClick;
15
- }
16
- //# sourceMappingURL=pd-button.d.ts.map
1
+ export * from './pd-button/pd-button'
2
+ export {}