@progressive-development/pd-forms 0.7.1 → 0.7.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 (7) hide show
  1. package/dist/pd-form-container.d.ts.map +1 -1
  2. package/dist/pd-form-container.js +11 -1
  3. package/dist/pd-icon-panel-button.d.ts.map +1 -1
  4. package/dist/pd-icon-panel-button.js +30 -13
  5. package/dist/stories/pd-icon-button.stories.d.ts +1 -0
  6. package/dist/stories/pd-icon-button.stories.d.ts.map +1 -1
  7. package/package.json +1 -1
package/dist/pd-form-container.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAgCpC;IAEO,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAoB5B,MAAM,IAAI,cAAc;IASjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CAqBjB;IAEF,OAAO,CAAC,SAAS,CA0Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IASd,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAYhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}
1
+ {"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAgCpC;IAEO,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAoB5B,MAAM,IAAI,cAAc;IAWjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CA6BjB;IAEF,OAAO,CAAC,SAAS,CA0Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IAad,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAYhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}
package/dist/pd-form-container.js CHANGED
@@ -36,6 +36,13 @@ let PdFormContainer = class extends PdBaseUI {
36
36
  element: e.target
37
37
  });
38
38
  this.requestUpdate();
39
+ this.dispatchEvent(
40
+ new CustomEvent("pd-form-change", {
41
+ detail: {
42
+ overallValidity: this._getOverallValidity()
43
+ }
44
+ })
45
+ );
39
46
  }
40
47
  e.stopPropagation();
41
48
  };
@@ -125,7 +132,7 @@ let PdFormContainer = class extends PdBaseUI {
125
132
  return html`
126
133
  <form>
127
134
  <slot></slot>
128
- ${this.requiredFieldInfo ? this._renderValidationInfo() : ""}
135
+ ${this.requiredFieldInfo || this.commonError ? this._renderValidationInfo() : ""}
129
136
  </form>
130
137
  `;
131
138
  }
@@ -140,6 +147,9 @@ let PdFormContainer = class extends PdBaseUI {
140
147
  `;
141
148
  }
142
149
  _getOverallValidity() {
150
+ if (this._fields.size === 0) {
151
+ return false;
152
+ }
143
153
  for (const field of this._fields.values()) {
144
154
  if (field.invalid) {
145
155
  return false;
package/dist/pd-icon-panel-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAuIpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAgCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,YAAY;CAQrB"}
1
+ {"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAMxC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAuJpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAgCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,YAAY;CAQrB"}
package/dist/pd-icon-panel-button.js CHANGED
@@ -2,6 +2,7 @@ import { css, html } from "lit";
2
2
  import { property, state, customElement } from "lit/decorators.js";
3
3
  import "@progressive-development/pd-icon/pd-icon";
4
4
  import { PdBaseUI } from "./pd-base-ui.js";
5
+ import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
5
6
  var __defProp = Object.defineProperty;
6
7
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
8
  var __decorateClass = (decorators, target, key, kind) => {
@@ -89,11 +90,14 @@ let PdIconPanelButton = class extends PdBaseUI {
89
90
  }
90
91
  };
91
92
  PdIconPanelButton.styles = [
93
+ PdColorStyles,
94
+ PdFontStyles,
92
95
  css`
93
96
  :host {
94
97
  display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
95
98
  position: relative;
96
99
  width: var(--pd-icon-button-width, auto);
100
+ font-family: var(--pd-default-font-title-family);
97
101
  }
98
102
 
99
103
  :host([disabled]) {
@@ -106,14 +110,15 @@ PdIconPanelButton.styles = [
106
110
  --pd-icon-button-bg,
107
111
  #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent)
108
112
  );
109
- background-color: var(--pd-icon-button-bgcol, #0c6fc5);
113
+ background-color: var(--pd-icon-button-bgcol, var(--pd-default-col));
110
114
  padding: 0.3em 0.8em;
111
- border: 1px solid var(--pd-icon-button-bordercol, rgba(0, 0, 0, 0.5));
115
+ border: 1px solid
116
+ var(--pd-icon-button-bordercol, var(--pd-default-dark-col));
112
117
  border-radius: var(--pd-icon-button-border-radius, 0.2em);
113
118
  transition: background-color 0.3s ease;
114
119
  --pd-icon-size: 20px;
115
120
  color: var(--pd-icon-button-txtcol, white);
116
- text-shadow: 0 - 0.05em 0.05em rgba(0, 0, 0, 0.5);
121
+ text-shadow: 0 -0.05em 0.05em rgba(0, 0, 0, 0.5);
117
122
  font-size: var(--pd-icon-button-font-size, 125%);
118
123
  line-height: var(--pd-icon-button-line-height, 1.5);
119
124
  height: var(--pd-icon-button-height, auto);
@@ -124,7 +129,10 @@ PdIconPanelButton.styles = [
124
129
  }
125
130
 
126
131
  :host(:not([disabled])) .icon-button-style:hover {
127
- background-color: var(--pd-icon-button-bgcol-hover, #fdae03f3);
132
+ background-color: var(
133
+ --pd-icon-button-bgcol-hover,
134
+ var(--pd-default-hover-col)
135
+ );
128
136
  cursor: pointer;
129
137
  }
130
138
 
@@ -134,20 +142,26 @@ PdIconPanelButton.styles = [
134
142
  #e0e0e0,
135
143
  #c4c4c4
136
144
  ); /* Matte, deaktivierte Optik */
137
- color: #696868; /* Text weniger dominant */
138
- border-color: #b0b0b0; /* Weniger Kontrast */
145
+ color: var(--pd-default-disabled-dark-col);
146
+ border-color: var(--pd-default-disabled-col);
139
147
  cursor: not-allowed;
140
148
  opacity: 0.6; /* Leichter "inaktiv"-Effekt */
141
- text-shadow: none; /* Kein 3D-Effekt */
149
+ text-shadow: none;
142
150
  }
143
151
 
144
152
  :host(:not([disabled])[primary]) .icon-button-style {
145
- background-color: var(--pd-icon-button-primary-bgcol, #044176);
146
- color: var(--pd-icon-button-primary-txtcol, white);
153
+ background-color: var(
154
+ --pd-icon-button-primary-bgcol,
155
+ var(--pd-secondary-col)
156
+ );
157
+ color: var(
158
+ --pd-icon-button-primary-txtcol,
159
+ var(--pd-default-darkest-col)
160
+ );
147
161
  }
148
162
 
149
163
  :host(:not([disabled])[primary]) .icon-button-style:hover {
150
- background-color: var(--pd-icon-button-primary-bgcol-hover, #fdae03f3);
164
+ background-color: var(--pd-secondary-dark-col);
151
165
  cursor: pointer;
152
166
  }
153
167
 
@@ -157,7 +171,10 @@ PdIconPanelButton.styles = [
157
171
  min-width: 120%; /* Panel wird etwas breiter als der Button */
158
172
  max-width: 300px; /* Optional: Maximale Breite */
159
173
  transform: scaleY(0);
160
- background: var(--pd-panel-bg, white);
174
+ background: var(
175
+ --pd-icon-button-panel-bg-col,
176
+ var(--pd-default-bg-col)
177
+ );
161
178
  border-radius: 5px;
162
179
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
163
180
  transition:
@@ -183,7 +200,7 @@ PdIconPanelButton.styles = [
183
200
  right: 5px;
184
201
  background: transparent;
185
202
  border: none;
186
- color: #555;
203
+ color: var(--pd-default-dark-col);
187
204
  font-size: 1.2rem;
188
205
  cursor: pointer;
189
206
  padding: 5px;
@@ -192,7 +209,7 @@ PdIconPanelButton.styles = [
192
209
  }
193
210
 
194
211
  .close-button:hover {
195
- color: black;
212
+ color: var(--pd-default-darkest-col);
196
213
  }
197
214
 
198
215
  /* Standard (nach unten öffnend, linksbündig) */
package/dist/stories/pd-icon-button.stories.d.ts CHANGED
@@ -13,6 +13,7 @@ declare const meta: {
13
13
  control: "boolean";
14
14
  };
15
15
  };
16
+ tags: string[];
16
17
  };
17
18
  export default meta;
18
19
  type Story = StoryObj;
package/dist/stories/pd-icon-button.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pd-icon-button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-icon-button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,4BAA4B,CAAC;AAGpC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAoBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAGtB,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAgBpC,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,KAiBzC,CAAC;AAGF,eAAO,MAAM,wBAAwB,EAAE,KAiBtC,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,KAkB3C,CAAC"}
1
+ {"version":3,"file":"pd-icon-button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-icon-button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,4BAA4B,CAAC;AAGpC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAGtB,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAgBpC,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,KAiBzC,CAAC;AAGF,eAAO,MAAM,wBAAwB,EAAE,KAiBtC,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,KAkB3C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progressive-development/pd-forms",
3
- "version": "0.7.1",
3
+ "version": "0.7.2",
4
4
  "description": "Webcomponent pd-forms for rendering form input elements.",
5
5
  "author": "PD Progressive Development",
6
6
  "license": "SEE LICENSE IN LICENSE",