@progressive-development/pd-forms 1.0.1 → 1.0.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 (75) hide show
  1. package/dist/base/pd-base-ui-input.d.ts +6 -0
  2. package/dist/base/pd-base-ui-input.d.ts.map +1 -1
  3. package/dist/base/pd-base-ui-input.js +46 -1
  4. package/dist/index.d.ts +4 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +9 -4
  7. package/dist/pd-button/PdButton.d.ts +8 -0
  8. package/dist/pd-button/PdButton.d.ts.map +1 -1
  9. package/dist/pd-button/PdButton.js +23 -0
  10. package/dist/pd-color-picker/PdColorPicker.d.ts +25 -0
  11. package/dist/pd-color-picker/PdColorPicker.d.ts.map +1 -0
  12. package/dist/pd-color-picker/PdColorPicker.js +238 -0
  13. package/dist/pd-color-picker/pd-color-picker.d.ts +3 -0
  14. package/dist/pd-color-picker/pd-color-picker.d.ts.map +1 -0
  15. package/dist/pd-color-picker.d.ts +2 -0
  16. package/dist/pd-color-picker.js +8 -0
  17. package/dist/pd-generic-form/PdGenericForm.d.ts +1 -0
  18. package/dist/pd-generic-form/PdGenericForm.d.ts.map +1 -1
  19. package/dist/pd-generic-form/PdGenericForm.js +12 -2
  20. package/dist/pd-generic-form/pd-generic-form.styles.d.ts.map +1 -1
  21. package/dist/pd-generic-form/pd-generic-form.styles.js +12 -5
  22. package/dist/pd-input-image/PdInputImage.d.ts +79 -0
  23. package/dist/pd-input-image/PdInputImage.d.ts.map +1 -0
  24. package/dist/pd-input-image/PdInputImage.js +553 -0
  25. package/dist/pd-input-image/pd-input-image.d.ts +4 -0
  26. package/dist/pd-input-image/pd-input-image.d.ts.map +1 -0
  27. package/dist/pd-input-image/pd-input-image.styles.d.ts +6 -0
  28. package/dist/pd-input-image/pd-input-image.styles.d.ts.map +1 -0
  29. package/dist/pd-input-image/pd-input-image.styles.js +300 -0
  30. package/dist/pd-input-image.d.ts +2 -0
  31. package/dist/pd-input-image.js +8 -0
  32. package/dist/pd-range/PdRange.d.ts +2 -0
  33. package/dist/pd-range/PdRange.d.ts.map +1 -1
  34. package/dist/pd-range/PdRange.js +11 -7
  35. package/package.json +6 -4
  36. package/dist/pd-button/pd-button.stories.d.ts +0 -84
  37. package/dist/pd-button/pd-button.stories.d.ts.map +0 -1
  38. package/dist/pd-button-group/pd-button-group.stories.d.ts +0 -45
  39. package/dist/pd-button-group/pd-button-group.stories.d.ts.map +0 -1
  40. package/dist/pd-button-select-group/pd-button-select-group.stories.d.ts +0 -46
  41. package/dist/pd-button-select-group/pd-button-select-group.stories.d.ts.map +0 -1
  42. package/dist/pd-checkbox/pd-checkbox.stories.d.ts +0 -45
  43. package/dist/pd-checkbox/pd-checkbox.stories.d.ts.map +0 -1
  44. package/dist/pd-form-container/pd-form-container.stories.d.ts +0 -49
  45. package/dist/pd-form-container/pd-form-container.stories.d.ts.map +0 -1
  46. package/dist/pd-form-field/pd-form-field.stories.d.ts +0 -40
  47. package/dist/pd-form-field/pd-form-field.stories.d.ts.map +0 -1
  48. package/dist/pd-form-fieldset/pd-form-fieldset.stories.d.ts +0 -38
  49. package/dist/pd-form-fieldset/pd-form-fieldset.stories.d.ts.map +0 -1
  50. package/dist/pd-form-row/pd-form-row.stories.d.ts +0 -43
  51. package/dist/pd-form-row/pd-form-row.stories.d.ts.map +0 -1
  52. package/dist/pd-generic-form/pd-generic-form.stories.d.ts +0 -35
  53. package/dist/pd-generic-form/pd-generic-form.stories.d.ts.map +0 -1
  54. package/dist/pd-hover-box/pd-hover-box.stories.d.ts +0 -31
  55. package/dist/pd-hover-box/pd-hover-box.stories.d.ts.map +0 -1
  56. package/dist/pd-input/pd-input.stories.d.ts +0 -73
  57. package/dist/pd-input/pd-input.stories.d.ts.map +0 -1
  58. package/dist/pd-input-area/pd-input-area.stories.d.ts +0 -67
  59. package/dist/pd-input-area/pd-input-area.stories.d.ts.map +0 -1
  60. package/dist/pd-input-file/pd-input-file.stories.d.ts +0 -53
  61. package/dist/pd-input-file/pd-input-file.stories.d.ts.map +0 -1
  62. package/dist/pd-input-time/pd-input-time.stories.d.ts +0 -94
  63. package/dist/pd-input-time/pd-input-time.stories.d.ts.map +0 -1
  64. package/dist/pd-panel-button/pd-panel-button.stories.d.ts +0 -57
  65. package/dist/pd-panel-button/pd-panel-button.stories.d.ts.map +0 -1
  66. package/dist/pd-radio-group/pd-radio-group.stories.d.ts +0 -39
  67. package/dist/pd-radio-group/pd-radio-group.stories.d.ts.map +0 -1
  68. package/dist/pd-range/pd-range.stories.d.ts +0 -51
  69. package/dist/pd-range/pd-range.stories.d.ts.map +0 -1
  70. package/dist/pd-select/pd-select.stories.d.ts +0 -58
  71. package/dist/pd-select/pd-select.stories.d.ts.map +0 -1
  72. package/dist/pd-suggestion-box/pd-suggestion-box.stories.d.ts +0 -79
  73. package/dist/pd-suggestion-box/pd-suggestion-box.stories.d.ts.map +0 -1
  74. package/dist/stories/pd-forms-overview.stories.d.ts +0 -48
  75. package/dist/stories/pd-forms-overview.stories.d.ts.map +0 -1
@@ -1,4 +1,5 @@
1
1
  import { CSSResultGroup, PropertyValues, nothing } from 'lit';
2
+ import { pdAi } from '@progressive-development/pd-model';
2
3
  import { PdBaseUI } from './pd-base-ui';
3
4
  import { PdFieldType, PdFormValidatorFn } from '../types';
4
5
  /**
@@ -53,6 +54,8 @@ export declare abstract class PdBaseUIInput extends PdBaseUI {
53
54
  handleChangeForInitVal: boolean;
54
55
  /** Grid span for width control within pd-form-row. */
55
56
  span: string;
57
+ /** AI options for KI-Assistent trigger. */
58
+ aiOptions?: pdAi.AiOptions;
56
59
  /** @ignore */
57
60
  protected _valid: boolean;
58
61
  /** @ignore */
@@ -103,6 +106,9 @@ export declare abstract class PdBaseUIInput extends PdBaseUI {
103
106
  };
104
107
  protected _renderErrorMsg(errorId?: string): import('lit').TemplateResult<1> | "";
105
108
  protected _renderLabel(forParam: string, additionalValue?: string): typeof nothing | import('lit').TemplateResult<1>;
109
+ protected _onAiTrigger(): void;
110
+ private _onAiTriggerKeyDown;
111
+ aiAdopt(value: string): void;
106
112
  runValidators(dryRun?: boolean): Promise<boolean>;
107
113
  protected _handleStatusForInnerInputElement(status: boolean): void;
108
114
  protected _getInitialValue(reset?: boolean): string;
@@ -1 +1 @@
1
- {"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-ui-input.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-ui-input.ts"],"names":[],"mappings":"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"}
@@ -74,6 +74,18 @@ class PdBaseUIInput extends PdBaseUI {
74
74
  --pd-icon-size: 20px;
75
75
  cursor: help;
76
76
  }
77
+
78
+ .ai-trigger {
79
+ --pd-icon-size: 22px;
80
+ cursor: pointer;
81
+ margin-left: 4px;
82
+ opacity: 0.7;
83
+ transition: opacity 0.2s;
84
+ }
85
+ .ai-trigger:hover,
86
+ .ai-trigger:focus-visible {
87
+ opacity: 1;
88
+ }
77
89
  `
78
90
  ];
79
91
  }
@@ -288,7 +300,7 @@ class PdBaseUIInput extends PdBaseUI {
288
300
  ` : "";
289
301
  }
290
302
  _renderLabel(forParam, additionalValue) {
291
- if (!this.label && !this.helperTxt && !additionalValue) {
303
+ if (!this.label && !this.helperTxt && !additionalValue && !this.aiOptions) {
292
304
  return nothing;
293
305
  }
294
306
  return html`
@@ -308,9 +320,39 @@ class PdBaseUIInput extends PdBaseUI {
308
320
  <p slot="info-view">${this.helperTxt}</p>
309
321
  </pd-hover-box>
310
322
  ` : ""}
323
+ ${this.aiOptions ? html`
324
+ <pd-icon
325
+ icon="${pdIcons.ICON_AI_SPARKLE}"
326
+ activeIcon
327
+ class="ai-trigger"
328
+ tabindex="0"
329
+ role="button"
330
+ aria-label="KI-Assistent öffnen"
331
+ @click="${this._onAiTrigger}"
332
+ @keydown="${this._onAiTriggerKeyDown}"
333
+ ></pd-icon>
334
+ ` : ""}
311
335
  </div>
312
336
  `;
313
337
  }
338
+ _onAiTrigger() {
339
+ this.dispatchEvent(
340
+ new CustomEvent("pd-ai-trigger", {
341
+ bubbles: true,
342
+ composed: true,
343
+ detail: { aiOptions: this.aiOptions, fieldElement: this }
344
+ })
345
+ );
346
+ }
347
+ _onAiTriggerKeyDown(e) {
348
+ if (e.key === "Enter" || e.key === " ") {
349
+ e.preventDefault();
350
+ this._onAiTrigger();
351
+ }
352
+ }
353
+ aiAdopt(value) {
354
+ this._handleChangedValue(value, void 0, true);
355
+ }
314
356
  runValidators(dryRun) {
315
357
  if (!dryRun) {
316
358
  this._errorMsg = "";
@@ -421,6 +463,9 @@ __decorateClass([
421
463
  __decorateClass([
422
464
  property({ type: String, reflect: true })
423
465
  ], PdBaseUIInput.prototype, "span");
466
+ __decorateClass([
467
+ property({ type: Object, attribute: false })
468
+ ], PdBaseUIInput.prototype, "aiOptions");
424
469
  __decorateClass([
425
470
  state()
426
471
  ], PdBaseUIInput.prototype, "_valid");
package/dist/index.d.ts CHANGED
@@ -3,14 +3,18 @@ export { PdFormField } from './pd-form-field/pd-form-field.js';
3
3
  export { PdFormFieldset } from './pd-form-fieldset/pd-form-fieldset.js';
4
4
  export { PdButton } from './pd-button/pd-button.js';
5
5
  export { PdCheckbox } from './pd-checkbox/pd-checkbox.js';
6
+ export { PdColorPicker } from './pd-color-picker/pd-color-picker.js';
6
7
  export { PdFormContainer } from './pd-form-container/pd-form-container.js';
7
8
  export { PdHoverBox } from './pd-hover-box/pd-hover-box.js';
8
9
  export { PdInput } from './pd-input/pd-input.js';
9
10
  export { PdInputArea } from './pd-input-area/pd-input-area.js';
10
11
  export { PdInputFile } from './pd-input-file/pd-input-file.js';
12
+ export { PdInputImage } from './pd-input-image/pd-input-image.js';
13
+ export type { ImageSelection } from './pd-input-image/pd-input-image.js';
11
14
  export { PdInputTime } from './pd-input-time/pd-input-time.js';
12
15
  export { PdRadioGroup } from './pd-radio-group/pd-radio-group.js';
13
16
  export { PdBaseInputElement } from './base/pd-base-input-element.js';
17
+ export { PdBaseUIInput } from './base/pd-base-ui-input.js';
14
18
  export { PdGenericForm } from './pd-generic-form/pd-generic-form.js';
15
19
  export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, SuggestedElement, } from './types.js';
16
20
  export { UNDEF } from './types.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,YAAY,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
package/dist/index.js CHANGED
@@ -3,14 +3,17 @@ import './pd-form-field.js';
3
3
  import './pd-form-fieldset/pd-form-fieldset.js';
4
4
  import './pd-button.js';
5
5
  import './pd-checkbox.js';
6
+ import './pd-color-picker.js';
6
7
  import './pd-form-container.js';
7
8
  import './pd-hover-box.js';
8
9
  import './pd-input.js';
9
10
  import './pd-input-area.js';
10
11
  import './pd-input-file.js';
12
+ import './pd-input-image.js';
11
13
  import './pd-input-time.js';
12
14
  import './pd-radio-group.js';
13
15
  export { PdBaseInputElement } from './base/pd-base-input-element.js';
16
+ export { PdBaseUIInput } from './base/pd-base-ui-input.js';
14
17
  import './pd-generic-form.js';
15
18
  export { UNDEF } from './types.js';
16
19
  import * as validators from './validators.js';
@@ -18,16 +21,18 @@ export { validators as pdValidator };
18
21
  export { templates as beTemplates } from './locales/be.js';
19
22
  export { templates as deTemplates } from './locales/de.js';
20
23
  export { templates as enTemplates } from './locales/en.js';
21
- export { PdFormRow } from './pd-form-row/PdFormRow.js';
22
- export { PdFormField } from './pd-form-field/PdFormField.js';
23
- export { PdFormFieldset } from './pd-form-fieldset/PdFormFieldset.js';
24
24
  export { PdButton } from './pd-button/PdButton.js';
25
25
  export { PdCheckbox } from './pd-checkbox/PdCheckbox.js';
26
+ export { PdColorPicker } from './pd-color-picker/PdColorPicker.js';
26
27
  export { PdFormContainer } from './pd-form-container/PdFormContainer.js';
28
+ export { PdFormField } from './pd-form-field/PdFormField.js';
29
+ export { PdFormFieldset } from './pd-form-fieldset/PdFormFieldset.js';
30
+ export { PdFormRow } from './pd-form-row/PdFormRow.js';
31
+ export { PdGenericForm } from './pd-generic-form/PdGenericForm.js';
27
32
  export { PdHoverBox } from './pd-hover-box/PdHoverBox.js';
28
33
  export { PdInput } from './pd-input/PdInput.js';
29
34
  export { PdInputArea } from './pd-input-area/PdInputArea.js';
30
35
  export { PdInputFile } from './pd-input-file/PdInputFile.js';
36
+ export { PdInputImage } from './pd-input-image/PdInputImage.js';
31
37
  export { PdInputTime } from './pd-input-time/PdInputTime.js';
32
38
  export { PdRadioGroup } from './pd-radio-group/PdRadioGroup.js';
33
- export { PdGenericForm } from './pd-generic-form/PdGenericForm.js';
@@ -53,6 +53,9 @@ export type PdButtonType = "button" | "submit" | "reset";
53
53
  * @cssprop --pd-button-icon-size - Icon size.
54
54
  * @cssprop --pd-button-white-space - Text wrapping behavior. Default: `nowrap`.
55
55
  * @cssprop --pd-button-font-weight - Font weight for button text. Default: `600`.
56
+ * @cssprop --pd-button-outline-border-col - Outline variant border color.
57
+ * @cssprop --pd-button-outline-font-col - Outline variant text color.
58
+ * @cssprop --pd-button-outline-bg-col-hover - Outline variant hover background.
56
59
  */
57
60
  export declare class PdButton extends PdBaseUI {
58
61
  /**
@@ -65,6 +68,11 @@ export declare class PdButton extends PdBaseUI {
65
68
  * Customize gradient colors via `--pd-button-gradient-start` and `--pd-button-gradient-end`.
66
69
  */
67
70
  gradient: boolean;
71
+ /**
72
+ * Displays the button with outline styling — transparent background, dashed border.
73
+ * Use for add/action triggers like "Add field" or "Add step".
74
+ */
75
+ outline: boolean;
68
76
  /**
69
77
  * Indicates toggle/selected state for toggle buttons.
70
78
  * When true, the button displays with selected styling and sets `aria-pressed="true"`.
@@ -1 +1 @@
1
- {"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IAKpC;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,IAAI,SAAQ;IAEZ;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,YAAY,EAAE,OAAO,GAAG,KAAK,CAAW;IAExC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAQ;IAE1B;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAY;IAE9B;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd;iBACa;IAEb,OAAO,CAAC,UAAU,CAAS;IAM3B,OAAgB,MAAM,EAAE,cAAc,CA2VpC;IAMO,MAAM;IAgEf;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,GAAG,WAAW,CAEjE;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAEX;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,OAAO,CAE1D;IAED;;;OAGG;IACH,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAIhE;;;OAGG;IACH,SAAS,CAAC,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAI9D;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;IAWvD;;;OAGG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;CAS3B"}
1
+ {"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IAKpC;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,IAAI,SAAQ;IAEZ;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,YAAY,EAAE,OAAO,GAAG,KAAK,CAAW;IAExC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAQ;IAE1B;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAY;IAE9B;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd;iBACa;IAEb,OAAO,CAAC,UAAU,CAAS;IAM3B,OAAgB,MAAM,EAAE,cAAc,CA8WpC;IAMO,MAAM;IAgEf;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,GAAG,WAAW,CAEjE;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAEX;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,OAAO,CAE1D;IAED;;;OAGG;IACH,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAIhE;;;OAGG;IACH,SAAS,CAAC,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAI9D;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;IAWvD;;;OAGG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;CAS3B"}
@@ -18,6 +18,7 @@ class PdButton extends PdBaseUI {
18
18
  super(...arguments);
19
19
  this.primary = false;
20
20
  this.gradient = false;
21
+ this.outline = false;
21
22
  this.selected = false;
22
23
  this.disabled = false;
23
24
  this.loading = false;
@@ -303,6 +304,25 @@ class PdButton extends PdBaseUI {
303
304
  opacity: 0.9;
304
305
  }
305
306
 
307
+ /* ========================================
308
+ OUTLINE VARIANT
309
+ Transparent bg, dashed border, used for add/action triggers.
310
+ ======================================== */
311
+ :host([outline]) button {
312
+ background: transparent;
313
+ background-image: none;
314
+ border: 1px dashed
315
+ var(--pd-button-outline-border-col, var(--pd-default-col));
316
+ color: var(--pd-button-outline-font-col, var(--pd-default-col));
317
+ text-shadow: none;
318
+ }
319
+ :host([outline]) button:hover:not(:disabled) {
320
+ background: var(
321
+ --pd-button-outline-bg-col-hover,
322
+ var(--pd-default-lightest-col)
323
+ );
324
+ }
325
+
306
326
  /* ========================================
307
327
  DISABLED STATE (matches pd-panel-button)
308
328
  ======================================== */
@@ -545,6 +565,9 @@ __decorateClass([
545
565
  __decorateClass([
546
566
  property({ type: Boolean, reflect: true })
547
567
  ], PdButton.prototype, "gradient");
568
+ __decorateClass([
569
+ property({ type: Boolean, reflect: true })
570
+ ], PdButton.prototype, "outline");
548
571
  __decorateClass([
549
572
  property({ type: Boolean, reflect: true })
550
573
  ], PdButton.prototype, "selected");
@@ -0,0 +1,25 @@
1
+ import { CSSResultGroup } from 'lit';
2
+ import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
3
+ /**
4
+ * Color picker input component.
5
+ *
6
+ * Renders a native `<input type="color">` with a hex text input and color preview swatch.
7
+ *
8
+ * @tagname pd-color-picker
9
+ * @summary Color picker with hex input and swatch preview.
10
+ *
11
+ * @event pd-form-element-change - Fired when color value changes. Detail: `{ value, name, parsedValue, state }`.
12
+ */
13
+ export declare class PdColorPicker extends PdBaseUIInput {
14
+ /** Placeholder shown in hex text input (without #). */
15
+ placeholder: string;
16
+ private _colorInput;
17
+ private _textInput;
18
+ static styles: CSSResultGroup;
19
+ render(): import('lit').TemplateResult<1>;
20
+ private _onColorInput;
21
+ private _onColorChange;
22
+ private _onHexInput;
23
+ private _onHexBlur;
24
+ }
25
+ //# sourceMappingURL=PdColorPicker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PdColorPicker.d.ts","sourceRoot":"","sources":["../../src/pd-color-picker/PdColorPicker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,uDAAuD;IAEvD,WAAW,SAAY;IAGvB,OAAO,CAAC,WAAW,CAAoB;IAGvC,OAAO,CAAC,UAAU,CAAoB;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAqIpC;IAEO,MAAM;IAwCf,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,UAAU;CAmBnB"}
@@ -0,0 +1,238 @@
1
+ import { css, html } from 'lit';
2
+ import { property, query } from 'lit/decorators.js';
3
+ import { classMap } from 'lit/directives/class-map.js';
4
+ import { PdBaseUIInput } from '../base/pd-base-ui-input.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 PdColorPicker extends PdBaseUIInput {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.placeholder = "000000";
19
+ }
20
+ static {
21
+ this.styles = [
22
+ PdBaseUIInput.styles,
23
+ css`
24
+ :host {
25
+ display: block;
26
+ }
27
+
28
+ .color-container {
29
+ display: flex;
30
+ align-items: center;
31
+ gap: 0.5rem;
32
+ width: var(--pd-input-field-width, 250px);
33
+ max-width: 100%;
34
+ }
35
+
36
+ .color-swatch {
37
+ position: relative;
38
+ width: 42px;
39
+ height: 42px;
40
+ min-width: 42px;
41
+ border-radius: var(--pd-radius-md, 6px);
42
+ border: 2px solid var(--pd-default-light-col, #cbd5e1);
43
+ overflow: hidden;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .color-swatch input[type="color"] {
48
+ position: absolute;
49
+ top: -4px;
50
+ left: -4px;
51
+ width: calc(100% + 8px);
52
+ height: calc(100% + 8px);
53
+ border: none;
54
+ padding: 0;
55
+ cursor: pointer;
56
+ background: none;
57
+ }
58
+
59
+ .color-swatch input[type="color"]::-webkit-color-swatch-wrapper {
60
+ padding: 0;
61
+ }
62
+
63
+ .color-swatch input[type="color"]::-webkit-color-swatch {
64
+ border: none;
65
+ }
66
+
67
+ .color-swatch input[type="color"]::-moz-color-swatch {
68
+ border: none;
69
+ }
70
+
71
+ .hex-field {
72
+ flex: 1;
73
+ display: flex;
74
+ align-items: center;
75
+ height: var(--pd-input-field-height, 2.5rem);
76
+ background: var(
77
+ --pd-input-field-bg-col,
78
+ var(--pd-default-bg-col, #fff)
79
+ );
80
+ border: var(
81
+ --pd-input-field-border,
82
+ 1px solid var(--pd-default-light-col, #cbd5e1)
83
+ );
84
+ border-bottom: var(
85
+ --pd-input-field-border-bottom,
86
+ 2px solid var(--pd-default-col, #2563eb)
87
+ );
88
+ border-radius: var(--pd-radius-md, 6px);
89
+ box-sizing: border-box;
90
+ overflow: hidden;
91
+ }
92
+
93
+ .hex-field:focus-within {
94
+ border: var(
95
+ --pd-input-field-border-focus,
96
+ 2px solid var(--pd-default-col, #2563eb)
97
+ );
98
+ }
99
+
100
+ .hex-field.disabled {
101
+ background: var(--pd-input-field-bg-col-disabled, #e9e9e9);
102
+ border-bottom: var(
103
+ --pd-input-field-border-bottom-disabled,
104
+ 2px solid var(--pd-default-disabled-col, #94a3b8)
105
+ );
106
+ cursor: not-allowed;
107
+ }
108
+
109
+ .hex-prefix {
110
+ padding-left: 0.5rem;
111
+ font-family: var(--pd-default-font-input-family, monospace);
112
+ font-size: var(--pd-default-font-input-size, 0.95rem);
113
+ color: var(--pd-default-font-muted-col, #94a3b8);
114
+ user-select: none;
115
+ line-height: 1;
116
+ }
117
+
118
+ .hex-input {
119
+ flex: 1;
120
+ height: 100%;
121
+ padding: var(--pd-input-field-padding, 0.25rem) 0.5rem
122
+ var(--pd-input-field-padding, 0.25rem) 0.25rem;
123
+ font-family: var(--pd-default-font-input-family, monospace);
124
+ font-size: var(--pd-default-font-input-size, 0.95rem);
125
+ color: var(--pd-default-font-input-col, #1e293b);
126
+ background: transparent;
127
+ border: none;
128
+ box-sizing: border-box;
129
+ text-transform: uppercase;
130
+ outline: none;
131
+ }
132
+
133
+ .hex-input:disabled {
134
+ cursor: not-allowed;
135
+ }
136
+
137
+ .color-container.error .hex-field {
138
+ border-color: var(--pd-default-error-col, #ef4444);
139
+ }
140
+
141
+ .color-container.valid .hex-field {
142
+ border-color: var(--pd-default-success-col, #22c55e);
143
+ }
144
+
145
+ .color-swatch.disabled {
146
+ opacity: 0.5;
147
+ cursor: not-allowed;
148
+ }
149
+
150
+ .color-swatch.disabled input[type="color"] {
151
+ pointer-events: none;
152
+ }
153
+ `
154
+ ];
155
+ }
156
+ render() {
157
+ const inputId = `${this.id}ColorPicker`;
158
+ const errorId = `${this.id}Error`;
159
+ const currentColor = this._value || "#000000";
160
+ const displayValue = this._value ? this._value.replace(/^#/, "") : "";
161
+ return html`
162
+ ${this._renderLabel(inputId)}
163
+ <div class="${classMap(this.getClassmap({ "color-container": true }))}">
164
+ <div class="color-swatch ${this.disabled ? "disabled" : ""}">
165
+ <input
166
+ type="color"
167
+ .value="${currentColor}"
168
+ ?disabled="${this.disabled}"
169
+ @input="${this._onColorInput}"
170
+ @change="${this._onColorChange}"
171
+ aria-label="${this.label || "Farbauswahl"}"
172
+ />
173
+ </div>
174
+ <div class="hex-field ${this.disabled ? "disabled" : ""}">
175
+ <span class="hex-prefix">#</span>
176
+ <input
177
+ id="${inputId}"
178
+ type="text"
179
+ class="hex-input"
180
+ .value="${displayValue}"
181
+ placeholder="${this.placeholder}"
182
+ ?disabled="${this.disabled}"
183
+ ?readonly="${this.readonly}"
184
+ maxlength="6"
185
+ @input="${this._onHexInput}"
186
+ @blur="${this._onHexBlur}"
187
+ aria-describedby="${errorId}"
188
+ />
189
+ </div>
190
+ </div>
191
+ ${this._renderErrorMsg(errorId)}
192
+ `;
193
+ }
194
+ _onColorInput(event) {
195
+ const input = event.target;
196
+ this._handleChangedValue(input.value, event, true);
197
+ }
198
+ _onColorChange(event) {
199
+ const input = event.target;
200
+ this._handleChangedValue(input.value, event, true);
201
+ }
202
+ _onHexInput(event) {
203
+ const input = event.target;
204
+ const raw = input.value.replace(/#/g, "").trim();
205
+ if (raw === "") {
206
+ this._handleChangedValue("", event, true);
207
+ return;
208
+ }
209
+ if (/^[0-9a-fA-F]{6}$/.test(raw)) {
210
+ this._handleChangedValue("#" + raw.toLowerCase(), event, true);
211
+ }
212
+ }
213
+ _onHexBlur(event) {
214
+ const input = event.target;
215
+ const raw = input.value.replace(/#/g, "").trim();
216
+ if (raw === "") {
217
+ this._handleChangedValue("", event, true);
218
+ return;
219
+ }
220
+ if (/^[0-9a-fA-F]{6}$/.test(raw)) {
221
+ this._handleChangedValue("#" + raw.toLowerCase(), event, true);
222
+ } else if (/^[0-9a-fA-F]{3}$/.test(raw)) {
223
+ const expanded = "#" + raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2];
224
+ this._handleChangedValue(expanded.toLowerCase(), event, true);
225
+ }
226
+ }
227
+ }
228
+ __decorateClass([
229
+ property({ type: String })
230
+ ], PdColorPicker.prototype, "placeholder");
231
+ __decorateClass([
232
+ query('input[type="color"]')
233
+ ], PdColorPicker.prototype, "_colorInput");
234
+ __decorateClass([
235
+ query('input[type="text"]')
236
+ ], PdColorPicker.prototype, "_textInput");
237
+
238
+ export { PdColorPicker };
@@ -0,0 +1,3 @@
1
+ import { PdColorPicker } from './PdColorPicker.js';
2
+ export { PdColorPicker };
3
+ //# sourceMappingURL=pd-color-picker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pd-color-picker.d.ts","sourceRoot":"","sources":["../../src/pd-color-picker/pd-color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './pd-color-picker/pd-color-picker'
2
+ export {}
@@ -0,0 +1,8 @@
1
+ import { PdColorPicker } from './pd-color-picker/PdColorPicker.js';
2
+
3
+ const tag = "pd-color-picker";
4
+ if (!customElements.get(tag)) {
5
+ customElements.define(tag, PdColorPicker);
6
+ }
7
+
8
+ export { PdColorPicker };
@@ -18,6 +18,7 @@ export declare class PdGenericForm extends LitElement {
18
18
  disconnectedCallback(): void;
19
19
  private _onFieldChange;
20
20
  private _isVisible;
21
+ private _valuesMatch;
21
22
  /**
22
23
  * Extracts schema fields from raw form values
23
24
  * and converts them into typed SchemaFieldData.
@@ -1 +1 @@
1
- {"version":3,"file":"PdGenericForm.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/PdGenericForm.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAM7D,KAAK,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;AACxC,KAAK,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;AAIhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAInC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IAE5C,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,oCAAoC;IAEpC,IAAI,EAAE,eAAe,CAAM;IAE3B,0DAA0D;IAE1D,IAAI,EAAE,MAAM,GAAG,MAAM,CAAU;IAE/B,wCAAwC;IAExC,QAAQ,EAAE,OAAO,CAAS;IAE1B,iEAAiE;IAEjE,OAAO,CAAC,WAAW,CAA+B;IAElD,OAAgB,MAAM,EAAE,cAAc,CAAyB;IAEtD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,UAAU;IAclB;;;;;OAKG;IACI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAe;IAyB5E,OAAO,CAAC,aAAa;cAqBF,MAAM,IAAI,cAAc;IAM3C,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,WAAW;IAYnB,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAC,aAAa,CAM1B;IAEF,mDAAmD;IACnD,OAAO,CAAC,iBAAiB;IAMzB,+CAA+C;IAC/C,OAAO,CAAC,UAAU;IAQlB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAoBvB,oFAAoF;IACpF,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,qBAAqB;IAwB7B,OAAO,CAAC,sBAAsB;IAoB9B,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,mBAAmB;CAsB5B"}
1
+ {"version":3,"file":"PdGenericForm.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/PdGenericForm.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAM7D,KAAK,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;AACxC,KAAK,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;AAIhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAInC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,4CAA4C;IAE5C,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,oCAAoC;IAEpC,IAAI,EAAE,eAAe,CAAM;IAE3B,0DAA0D;IAE1D,IAAI,EAAE,MAAM,GAAG,MAAM,CAAU;IAE/B,wCAAwC;IAExC,QAAQ,EAAE,OAAO,CAAS;IAE1B,iEAAiE;IAEjE,OAAO,CAAC,WAAW,CAA+B;IAElD,OAAgB,MAAM,EAAE,cAAc,CAAyB;IAEtD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,YAAY;IAapB;;;;;OAKG;IACI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAe;IAyB5E,OAAO,CAAC,aAAa;cAqBF,MAAM,IAAI,cAAc;IAM3C,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,WAAW;IAYnB,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAC,aAAa,CAM1B;IAEF,mDAAmD;IACnD,OAAO,CAAC,iBAAiB;IAMzB,+CAA+C;IAC/C,OAAO,CAAC,UAAU;IAQlB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAoBvB,oFAAoF;IACpF,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,qBAAqB;IAwB7B,OAAO,CAAC,sBAAsB;IAqB9B,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,mBAAmB;CAuB5B"}
@@ -57,11 +57,19 @@ const _PdGenericForm = class _PdGenericForm extends LitElement {
57
57
  if (!showWhen) return true;
58
58
  const currentValue = this._formValues[showWhen.fieldId];
59
59
  if (currentValue !== void 0) {
60
- return currentValue === showWhen.equals;
60
+ return this._valuesMatch(currentValue, showWhen.equals);
61
61
  }
62
62
  const fieldValue = this.data[showWhen.fieldId];
63
63
  if (!fieldValue) return false;
64
- return fieldValue.value === showWhen.equals;
64
+ return this._valuesMatch(fieldValue.value, showWhen.equals);
65
+ }
66
+ _valuesMatch(actual, expected) {
67
+ if (actual === expected) return true;
68
+ if (typeof expected === "boolean") {
69
+ if (expected === true) return actual === "yes" || actual === "true";
70
+ return actual === "no" || actual === "false";
71
+ }
72
+ return false;
65
73
  }
66
74
  /**
67
75
  * Extracts schema fields from raw form values
@@ -273,6 +281,7 @@ const _PdGenericForm = class _PdGenericForm extends LitElement {
273
281
  ?disabled="${this.disabled}"
274
282
  ?handleChangeForInitVal="${true}"
275
283
  initValue="${initValue}"
284
+ .aiOptions="${field.aiOptions}"
276
285
  ></pd-input-area>
277
286
  `;
278
287
  }
@@ -310,6 +319,7 @@ const _PdGenericForm = class _PdGenericForm extends LitElement {
310
319
  ?disabled="${this.disabled}"
311
320
  ?handleChangeForInitVal="${true}"
312
321
  initValue="${initValue}"
322
+ .aiOptions="${field.aiOptions}"
313
323
  ></pd-input>
314
324
  `;
315
325
  }
@@ -1 +1 @@
1
- {"version":3,"file":"pd-generic-form.styles.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/pd-generic-form.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yBAyG/B,CAAC"}
1
+ {"version":3,"file":"pd-generic-form.styles.d.ts","sourceRoot":"","sources":["../../src/pd-generic-form/pd-generic-form.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yBAgH/B,CAAC"}