@progressive-development/pd-forms 0.7.9 → 0.7.12
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.
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/pd-base-ui-input.d.ts.map +1 -1
- package/dist/pd-base-ui-input.js +0 -3
- package/dist/pd-button-group.d.ts +13 -0
- package/dist/pd-button-group.d.ts.map +1 -0
- package/dist/pd-button-group.js +112 -0
- package/dist/pd-checkbox.d.ts.map +1 -1
- package/dist/pd-checkbox.js +10 -9
- package/dist/pd-icon-button-select-group.d.ts +13 -0
- package/dist/pd-icon-button-select-group.d.ts.map +1 -0
- package/dist/pd-icon-button-select-group.js +91 -0
- package/dist/pd-icon-panel-button.d.ts +3 -0
- package/dist/pd-icon-panel-button.d.ts.map +1 -1
- package/dist/pd-icon-panel-button.js +80 -26
- package/dist/stories/pd-button-group.stories.d.ts +18 -0
- package/dist/stories/pd-button-group.stories.d.ts.map +1 -0
- package/dist/stories/pd-icon-button-select-group.stories.d.ts +20 -0
- package/dist/stories/pd-icon-button-select-group.stories.d.ts.map +1 -0
- package/dist/stories/pd-icon-button.stories.d.ts +4 -0
- package/dist/stories/pd-icon-button.stories.d.ts.map +1 -1
- package/dist/styles/shared-input-field-styles.d.ts.map +1 -1
- package/dist/styles/shared-input-field-styles.js +0 -4
- package/dist/types.d.ts +4 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -2
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,8 @@ export { PdInputArea } from './pd-input-area.js';
|
|
|
8
8
|
export { PdInputFile } from './pd-input-file.js';
|
|
9
9
|
export { PdRadioGroup } from './pd-radio-group.js';
|
|
10
10
|
export { PdBaseInputElement } from './pd-base-input-element.js';
|
|
11
|
-
export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn,
|
|
11
|
+
export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, } from './types.js';
|
|
12
|
+
export { UNDEF } from './types.js';
|
|
12
13
|
export * as pdValidator from './validators.js';
|
|
13
14
|
export { templates as beTemplates } from './generated/locales/be.js';
|
|
14
15
|
export { templates as deTemplates } from './generated/locales/de.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,GACX,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
|
@@ -8,6 +8,7 @@ import { PdInputArea } from "./pd-input-area.js";
|
|
|
8
8
|
import { PdInputFile } from "./pd-input-file.js";
|
|
9
9
|
import { PdRadioGroup } from "./pd-radio-group.js";
|
|
10
10
|
import { PdBaseInputElement } from "./pd-base-input-element.js";
|
|
11
|
+
import { UNDEF } from "./types.js";
|
|
11
12
|
import * as validators from "./validators.js";
|
|
12
13
|
import { templates } from "./locales/be.js";
|
|
13
14
|
import { templates as templates2 } from "./locales/de.js";
|
|
@@ -23,6 +24,7 @@ export {
|
|
|
23
24
|
PdInputArea,
|
|
24
25
|
PdInputFile,
|
|
25
26
|
PdRadioGroup,
|
|
27
|
+
UNDEF,
|
|
26
28
|
templates as beTemplates,
|
|
27
29
|
templates2 as deTemplates,
|
|
28
30
|
templates3 as enTemplates,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../src/pd-base-ui-input.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAYzD,OAAO,mBAAmB,CAAC;AAE3B;;;;;GAKG;AACH,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,sBAAsB,IAAI,CAAC;AACxC,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,eAAe,IAAI,CAAC;AAOjC,8BAAsB,aAAc,SAAQ,QAAQ;IAClD;;;OAGG;IAEH;;;OAGG;IAEH;;;OAGG;IAGH,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,WAAW,SAAM;IAGjB,SAAS,SAAM;IAGf,SAAS,SAAM;IAGf,mBAAmB,SAAO;IAG1B,KAAK,SAAM;IAGX,SAAS,EAAE,WAAW,CAAU;IAGhC,SAAS,EAAE,MAAM,CAAM;IAIvB,eAAe,UAAS;IAGxB,sBAAsB,UAAS;IAG/B,SAAS,CAAC,MAAM,UAAS;IAGzB,SAAS,CAAC,QAAQ,UAAS;IAG3B,SAAS,CAAC,MAAM,UAAS;IAGzB,SAAS,CAAC,SAAS,UAAQ;IAG3B,SAAS,CAAC,QAAQ,UAAS;IAG3B,SAAS,CAAC,QAAQ,UAAS;IAG3B,SAAS,CAAC,SAAS,SAAM;IAGzB,SAAS,CAAC,MAAM,SAAM;IAGtB,SAAS,CAAC,UAAU,SAAM;IAE1B,SAAS,CAAC,WAAW,EAAE,iBAAiB,EAAE,CAAM;IAEhD,OAAgB,MAAM,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../src/pd-base-ui-input.ts"],"names":[],"mappings":"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"}
|
package/dist/pd-base-ui-input.js
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
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
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
11
|
+
private onClick;
|
|
12
|
+
}
|
|
13
|
+
//# 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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,2BAA2B,CAAC;AAEnC,qBACa,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,CA0CpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAiBf,OAAO,CAAC,OAAO;CAYhB"}
|
|
@@ -0,0 +1,112 @@
|
|
|
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
|
+
if (changedProps.has("initValue")) {
|
|
24
|
+
this._selectedButtons = [...this.initValue];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
return html`
|
|
29
|
+
<div class="button-group">
|
|
30
|
+
${this.buttonList.map(
|
|
31
|
+
(data, index) => html`
|
|
32
|
+
<pd-icon-panel-button
|
|
33
|
+
?selected="${this._selectedButtons.includes(index)}"
|
|
34
|
+
buttonText="${data.text || ""}"
|
|
35
|
+
pdButtonIcon="${data.pdIcon || ""}"
|
|
36
|
+
@button-clicked="${() => this.onClick(index)}"
|
|
37
|
+
></pd-icon-panel-button>
|
|
38
|
+
`
|
|
39
|
+
)}
|
|
40
|
+
</div>
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
onClick(index) {
|
|
44
|
+
if (this._selectedButtons.includes(index)) return;
|
|
45
|
+
this._selectedButtons = [index];
|
|
46
|
+
this.dispatchEvent(
|
|
47
|
+
new CustomEvent("pd-button-group-change", {
|
|
48
|
+
detail: { selected: this._selectedButtons },
|
|
49
|
+
bubbles: true,
|
|
50
|
+
composed: true
|
|
51
|
+
})
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
PdButtonGroup.styles = [
|
|
56
|
+
PdBaseUI.styles,
|
|
57
|
+
css`
|
|
58
|
+
:host {
|
|
59
|
+
display: inline-block;
|
|
60
|
+
--group-direction: var(--pd-button-group-direction, row);
|
|
61
|
+
--group-width: var(--pd-button-group-width, auto);
|
|
62
|
+
/*--pd-icon-button-border-radius: 0;*/
|
|
63
|
+
--group-border-radius: var(--pd-border-radius, 0.5rem);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.button-group {
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: var(--group-direction);
|
|
69
|
+
width: var(--group-width);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* geht noch nicht */
|
|
73
|
+
.button-group pd-icon-panel-button:first-child {
|
|
74
|
+
border-top-left-radius: var(--group-border-radius);
|
|
75
|
+
border-bottom-left-radius: var(--group-border-radius);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.button-group pd-icon-panel-button:last-child {
|
|
79
|
+
border-top-right-radius: var(--group-border-radius);
|
|
80
|
+
border-bottom-right-radius: var(--group-border-radiusm);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:host([vertical]) .button-group pd-icon-panel-button:first-child {
|
|
84
|
+
border-top-left-radius: var(--group-border-radius);
|
|
85
|
+
border-top-right-radius: var(--group-border-radius);
|
|
86
|
+
border-bottom-left-radius: 0;
|
|
87
|
+
border-bottom-right-radius: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:host([vertical]) .button-group pd-icon-panel-button:last-child {
|
|
91
|
+
border-bottom-left-radius: var(--group-border-radius);
|
|
92
|
+
border-bottom-right-radius: var(--group-border-radius);
|
|
93
|
+
border-top-left-radius: 0;
|
|
94
|
+
border-top-right-radius: 0;
|
|
95
|
+
}
|
|
96
|
+
`
|
|
97
|
+
];
|
|
98
|
+
__decorateClass([
|
|
99
|
+
property({ type: Array })
|
|
100
|
+
], PdButtonGroup.prototype, "buttonList", 2);
|
|
101
|
+
__decorateClass([
|
|
102
|
+
property({ type: Array })
|
|
103
|
+
], PdButtonGroup.prototype, "initValue", 2);
|
|
104
|
+
__decorateClass([
|
|
105
|
+
state()
|
|
106
|
+
], PdButtonGroup.prototype, "_selectedButtons", 2);
|
|
107
|
+
PdButtonGroup = __decorateClass([
|
|
108
|
+
customElement("pd-button-group")
|
|
109
|
+
], PdButtonGroup);
|
|
110
|
+
export {
|
|
111
|
+
PdButtonGroup
|
|
112
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pd-checkbox.d.ts","sourceRoot":"","sources":["../src/pd-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,oBAAoB,CAAC;AAGrE,qBACa,UAAW,SAAQ,aAAa;IAE3C,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElD,OAAgB,MAAM,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"pd-checkbox.d.ts","sourceRoot":"","sources":["../src/pd-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,oBAAoB,CAAC;AAGrE,qBACa,UAAW,SAAQ,aAAa;IAE3C,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElD,OAAgB,MAAM,EAAE,cAAc,CAiMpC;;IAOK,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI/C,MAAM;IAuCf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM;IAM5C,KAAK,IAAI,IAAI;CAGrB"}
|
package/dist/pd-checkbox.js
CHANGED
|
@@ -85,23 +85,24 @@ PdCheckbox.styles = [
|
|
|
85
85
|
/* active checkbox */
|
|
86
86
|
--pd-icon-bg-col-active: var(
|
|
87
87
|
--pd-cb-bg-col,
|
|
88
|
-
var(--pd-default-
|
|
88
|
+
var(--pd-default-lightest-col)
|
|
89
89
|
);
|
|
90
|
-
--pd-icon-col-active: var(
|
|
91
|
-
|
|
92
|
-
--pd-
|
|
93
|
-
var(--pd-default-col)
|
|
90
|
+
--pd-icon-col-active: var(
|
|
91
|
+
--pd-cb-col,
|
|
92
|
+
var(--pd-default-success-dark-col)
|
|
94
93
|
);
|
|
95
94
|
|
|
96
95
|
/* inactive checkbox */
|
|
97
96
|
--pd-icon-bg-col: var(
|
|
98
97
|
--pd-cb-unset-bg-col,
|
|
99
|
-
var(--pd-default-
|
|
98
|
+
var(--pd-default-lightest-col)
|
|
100
99
|
);
|
|
101
|
-
--pd-icon-col: var(--pd-cb-col, var(--pd-default-
|
|
102
|
-
--pd-icon-stroke-col: var(--pd-cb-stroke-col, var(--pd-default-col));
|
|
100
|
+
--pd-icon-col: var(--pd-cb-col, var(--pd-default-error-dark-col));
|
|
103
101
|
|
|
104
|
-
--pd-icon-bg-col-hover: var(
|
|
102
|
+
--pd-icon-bg-col-hover: var(
|
|
103
|
+
--pd-cb-bg-col,
|
|
104
|
+
var(--pd-default-light-col)
|
|
105
|
+
);
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
:host([checkType="SWITCH"]) {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CSSResultGroup, PropertyValues } from 'lit';
|
|
2
|
+
import { PdBaseUI } from './pd-base-ui';
|
|
3
|
+
import { ButtonData } from './types.js';
|
|
4
|
+
export declare class PdIconButtonSelectGroup extends PdBaseUI {
|
|
5
|
+
options: ButtonData[];
|
|
6
|
+
initValue: number;
|
|
7
|
+
private _selectedValue;
|
|
8
|
+
static styles: CSSResultGroup;
|
|
9
|
+
willUpdate(changedProps: PropertyValues<this>): void;
|
|
10
|
+
render(): import('lit-html').TemplateResult<1> | "";
|
|
11
|
+
private handleSelectionChange;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=pd-icon-button-select-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-icon-button-select-group.d.ts","sourceRoot":"","sources":["../src/pd-icon-button-select-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAE3B,qBACa,uBAAwB,SAAQ,QAAQ;IAEnD,OAAO,EAAE,UAAU,EAAE,CAAM;IAG3B,SAAS,EAAE,MAAM,CAAM;IAGvB,OAAO,CAAC,cAAc,CAAU;IAEhC,OAAgB,MAAM,EAAE,cAAc,CAcpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAuBf,OAAO,CAAC,qBAAqB;CAc9B"}
|
|
@@ -0,0 +1,91 @@
|
|
|
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
|
+
import "./pd-button-group.js";
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
7
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
8
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
9
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
10
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
11
|
+
if (decorator = decorators[i])
|
|
12
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
13
|
+
if (kind && result) __defProp(target, key, result);
|
|
14
|
+
return result;
|
|
15
|
+
};
|
|
16
|
+
let PdIconButtonSelectGroup = class extends PdBaseUI {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
this.options = [];
|
|
20
|
+
this.initValue = -1;
|
|
21
|
+
}
|
|
22
|
+
willUpdate(changedProps) {
|
|
23
|
+
if (changedProps.has("initValue") && this.initValue >= 0) {
|
|
24
|
+
this._selectedValue = this.initValue;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
if (!this.options || this.options.length === 0) {
|
|
29
|
+
return "";
|
|
30
|
+
}
|
|
31
|
+
const selectedData = this.options[this._selectedValue === -1 ? 0 : this._selectedValue];
|
|
32
|
+
return html`
|
|
33
|
+
<pd-icon-panel-button
|
|
34
|
+
panelButton
|
|
35
|
+
hideClose
|
|
36
|
+
.buttonText=${(selectedData == null ? void 0 : selectedData.text) ?? ""}
|
|
37
|
+
.pdButtonIcon=${(selectedData == null ? void 0 : selectedData.pdIcon) ?? ""}
|
|
38
|
+
>
|
|
39
|
+
<pd-button-group
|
|
40
|
+
class="button-group-style"
|
|
41
|
+
.buttonList=${this.options}
|
|
42
|
+
.initValue=${[this._selectedValue]}
|
|
43
|
+
@pd-button-group-change=${this.handleSelectionChange}
|
|
44
|
+
></pd-button-group>
|
|
45
|
+
</pd-icon-panel-button>
|
|
46
|
+
`;
|
|
47
|
+
}
|
|
48
|
+
handleSelectionChange(e) {
|
|
49
|
+
const [newIndex] = e.detail.selected;
|
|
50
|
+
this._selectedValue = newIndex;
|
|
51
|
+
e.stopPropagation();
|
|
52
|
+
window.dispatchEvent(new Event("close-button-panel-event"));
|
|
53
|
+
this.dispatchEvent(
|
|
54
|
+
new CustomEvent("pd-button-selection-changed", {
|
|
55
|
+
detail: { selected: newIndex },
|
|
56
|
+
bubbles: true,
|
|
57
|
+
composed: true
|
|
58
|
+
})
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
PdIconButtonSelectGroup.styles = [
|
|
63
|
+
PdBaseUI.styles,
|
|
64
|
+
css`
|
|
65
|
+
:host {
|
|
66
|
+
display: inline-block;
|
|
67
|
+
position: relative;
|
|
68
|
+
--pd-icon-panel-button-panel-padding: 0px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.button-group-style {
|
|
72
|
+
--pd-button-group-direction: column;
|
|
73
|
+
--pd-icon-button-width: 100%;
|
|
74
|
+
}
|
|
75
|
+
`
|
|
76
|
+
];
|
|
77
|
+
__decorateClass([
|
|
78
|
+
property({ type: Array })
|
|
79
|
+
], PdIconButtonSelectGroup.prototype, "options", 2);
|
|
80
|
+
__decorateClass([
|
|
81
|
+
property({ type: Number })
|
|
82
|
+
], PdIconButtonSelectGroup.prototype, "initValue", 2);
|
|
83
|
+
__decorateClass([
|
|
84
|
+
state()
|
|
85
|
+
], PdIconButtonSelectGroup.prototype, "_selectedValue", 2);
|
|
86
|
+
PdIconButtonSelectGroup = __decorateClass([
|
|
87
|
+
customElement("pd-icon-button-select-group")
|
|
88
|
+
], PdIconButtonSelectGroup);
|
|
89
|
+
export {
|
|
90
|
+
PdIconButtonSelectGroup
|
|
91
|
+
};
|
|
@@ -6,7 +6,10 @@ export declare class PdIconPanelButton extends PdBaseUI {
|
|
|
6
6
|
value?: string;
|
|
7
7
|
panelButton: boolean;
|
|
8
8
|
loading: boolean;
|
|
9
|
+
selected: boolean;
|
|
10
|
+
primary: boolean;
|
|
9
11
|
disableOnClickTime: number;
|
|
12
|
+
hideClose: boolean;
|
|
10
13
|
private _timerDisabled;
|
|
11
14
|
private _panelOpen;
|
|
12
15
|
static styles: CSSResultGroup;
|
|
@@ -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;
|
|
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;AAOxC,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,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG1B,OAAO,EAAE,OAAO,CAAS;IAGzB,kBAAkB,EAAE,MAAM,CAAM;IAGhC,SAAS,EAAE,OAAO,CAAS;IAI3B,OAAO,CAAC,cAAc,CAAkB;IAGxC,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAiNpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAkDN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,YAAY;CAQrB"}
|
|
@@ -3,6 +3,7 @@ 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
5
|
import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
|
|
6
|
+
import { pdIcons } from "@progressive-development/pd-icon";
|
|
6
7
|
var __defProp = Object.defineProperty;
|
|
7
8
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
8
9
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -19,7 +20,10 @@ let PdIconPanelButton = class extends PdBaseUI {
|
|
|
19
20
|
this.buttonText = "Ok";
|
|
20
21
|
this.panelButton = false;
|
|
21
22
|
this.loading = false;
|
|
23
|
+
this.selected = false;
|
|
24
|
+
this.primary = false;
|
|
22
25
|
this.disableOnClickTime = -1;
|
|
26
|
+
this.hideClose = false;
|
|
23
27
|
this._timerDisabled = false;
|
|
24
28
|
this._panelOpen = false;
|
|
25
29
|
this._closePanel = () => {
|
|
@@ -46,18 +50,25 @@ let PdIconPanelButton = class extends PdBaseUI {
|
|
|
46
50
|
>
|
|
47
51
|
${this.loading ? html`<div class="loader"></div>` : this.pdButtonIcon ? html`
|
|
48
52
|
<pd-icon
|
|
49
|
-
class="icon action-icon-color"
|
|
53
|
+
class="button-icon action-icon-color ${this.primary || this.selected ? "" : "primary"}"
|
|
50
54
|
icon="${this.pdButtonIcon}"
|
|
51
|
-
activeIcon
|
|
55
|
+
?activeIcon="${!this.primary && !this.selected}"
|
|
52
56
|
></pd-icon>
|
|
53
57
|
` : ""}
|
|
54
|
-
|
|
58
|
+
${this.buttonText ? html`<span class="button-text">${this.buttonText}</span>` : ""}
|
|
59
|
+
${this.panelButton ? html` <pd-icon
|
|
60
|
+
icon=${pdIcons.ICON_TOOGLE_ARROW}
|
|
61
|
+
?activeIcon=${!this._panelOpen}
|
|
62
|
+
class="small toggle-button ${this.primary ? "" : "primary"}"
|
|
63
|
+
></pd-icon>` : ""}
|
|
55
64
|
</div>
|
|
56
65
|
|
|
57
66
|
<div class="panel ${this._panelOpen ? "open" : ""}">
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
67
|
+
${this.hideClose ? "" : html`
|
|
68
|
+
<button class="close-button" @click="${this._togglePanel}">
|
|
69
|
+
×
|
|
70
|
+
</button>
|
|
71
|
+
`}
|
|
61
72
|
<div class="panel-content">
|
|
62
73
|
<slot></slot>
|
|
63
74
|
</div>
|
|
@@ -105,8 +116,6 @@ PdIconPanelButton.styles = [
|
|
|
105
116
|
:host {
|
|
106
117
|
display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
|
|
107
118
|
position: relative;
|
|
108
|
-
width: var(--pd-icon-button-width, auto);
|
|
109
|
-
font-family: var(--pd-default-font-title-family);
|
|
110
119
|
}
|
|
111
120
|
|
|
112
121
|
:host([disabled]),
|
|
@@ -115,27 +124,42 @@ PdIconPanelButton.styles = [
|
|
|
115
124
|
}
|
|
116
125
|
|
|
117
126
|
.icon-button-style {
|
|
127
|
+
--pd-icon-size: var(--pd-icon-button-size, 32px);
|
|
128
|
+
width: var(--pd-icon-button-width, auto);
|
|
129
|
+
|
|
118
130
|
z-index: 6;
|
|
131
|
+
|
|
132
|
+
display: inline-flex;
|
|
133
|
+
align-items: center;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
gap: 0.5rem;
|
|
136
|
+
|
|
137
|
+
height: var(--pd-icon-button-height, 3em);
|
|
138
|
+
line-height: var(--pd-icon-button-line-height, 1);
|
|
139
|
+
padding: var(--pd-icon-button-padding, 0 1rem);
|
|
140
|
+
|
|
119
141
|
background: var(
|
|
120
142
|
--pd-icon-button-bg,
|
|
121
143
|
#58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent)
|
|
122
144
|
);
|
|
123
145
|
background-color: var(--pd-icon-button-bgcol, var(--pd-default-col));
|
|
124
|
-
padding: 0.3em 0.8em;
|
|
125
146
|
border: 1px solid
|
|
126
147
|
var(--pd-icon-button-bordercol, var(--pd-default-dark-col));
|
|
127
148
|
border-radius: var(--pd-icon-button-border-radius, 0.2em);
|
|
128
149
|
transition: background-color 0.3s ease;
|
|
129
|
-
|
|
150
|
+
|
|
151
|
+
vertical-align: middle;
|
|
152
|
+
text-align: center;
|
|
153
|
+
|
|
130
154
|
color: var(--pd-icon-button-txtcol, white);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.button-text {
|
|
131
158
|
text-shadow: 0 -0.05em 0.05em rgba(0, 0, 0, 0.5);
|
|
132
|
-
font-size: var(--pd-icon-button-font-size,
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
align-items: center;
|
|
137
|
-
justify-content: center;
|
|
138
|
-
text-align: center;
|
|
159
|
+
font-size: var(--pd-icon-button-font-size, 1.5rem);
|
|
160
|
+
font-weight: bold;
|
|
161
|
+
font-family: var(--pd-default-font-title-family);
|
|
162
|
+
margin-top: 0.2rem;
|
|
139
163
|
}
|
|
140
164
|
|
|
141
165
|
:host(:not([disabled]):not([_timerDisabled])) .icon-button-style:hover {
|
|
@@ -166,10 +190,7 @@ PdIconPanelButton.styles = [
|
|
|
166
190
|
--pd-icon-button-primary-bgcol,
|
|
167
191
|
var(--pd-secondary-col)
|
|
168
192
|
);
|
|
169
|
-
color: var(
|
|
170
|
-
--pd-icon-button-primary-txtcol,
|
|
171
|
-
var(--pd-default-darkest-col)
|
|
172
|
-
);
|
|
193
|
+
color: var(--pd-icon-button-primary-txtcol, var(--pd-default-dark-col));
|
|
173
194
|
}
|
|
174
195
|
|
|
175
196
|
:host(:not([disabled]):not([_timerDisabled])[primary])
|
|
@@ -180,9 +201,16 @@ PdIconPanelButton.styles = [
|
|
|
180
201
|
|
|
181
202
|
.panel {
|
|
182
203
|
position: absolute;
|
|
183
|
-
|
|
184
|
-
min-width:
|
|
185
|
-
|
|
204
|
+
|
|
205
|
+
min-width: var(
|
|
206
|
+
--pd-icon-button-panel-min-width,
|
|
207
|
+
100%
|
|
208
|
+
); /* Panel wird so breit wie der Button */
|
|
209
|
+
max-width: var(
|
|
210
|
+
--pd-icon-button-panel-max-width,
|
|
211
|
+
300px
|
|
212
|
+
); /* Optional: Maximale Breite */
|
|
213
|
+
|
|
186
214
|
transform: scaleY(0);
|
|
187
215
|
background: var(
|
|
188
216
|
--pd-icon-button-panel-bg-col,
|
|
@@ -203,7 +231,7 @@ PdIconPanelButton.styles = [
|
|
|
203
231
|
}
|
|
204
232
|
|
|
205
233
|
.panel-content {
|
|
206
|
-
padding: 1rem;
|
|
234
|
+
padding: var(--pd-icon-panel-button-panel-padding, 1rem);
|
|
207
235
|
min-height: 50px;
|
|
208
236
|
}
|
|
209
237
|
|
|
@@ -261,7 +289,24 @@ PdIconPanelButton.styles = [
|
|
|
261
289
|
height: 12px;
|
|
262
290
|
animation: spin 2s linear infinite;
|
|
263
291
|
|
|
264
|
-
margin-right:
|
|
292
|
+
margin-right: 0.5rem;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
:host([selected]:not([disabled]):not([_timerDisabled]))
|
|
296
|
+
.icon-button-style {
|
|
297
|
+
background-color: var(
|
|
298
|
+
--pd-icon-button-bgcol-selected,
|
|
299
|
+
var(--pd-secondary-col)
|
|
300
|
+
);
|
|
301
|
+
color: var(--pd-icon-button-primary-txtcol, var(--pd-default-dark-col));
|
|
302
|
+
box-shadow:
|
|
303
|
+
inset 0 2px 6px rgba(0, 0, 0, 0.4),
|
|
304
|
+
0 0 0 2px rgba(0, 0, 0, 0.1);
|
|
305
|
+
text-shadow: none;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.toggle-button {
|
|
309
|
+
padding-left: 0.5rem;
|
|
265
310
|
}
|
|
266
311
|
|
|
267
312
|
@keyframes spin {
|
|
@@ -289,9 +334,18 @@ __decorateClass([
|
|
|
289
334
|
__decorateClass([
|
|
290
335
|
property({ type: Boolean, reflect: true })
|
|
291
336
|
], PdIconPanelButton.prototype, "loading", 2);
|
|
337
|
+
__decorateClass([
|
|
338
|
+
property({ type: Boolean, reflect: true })
|
|
339
|
+
], PdIconPanelButton.prototype, "selected", 2);
|
|
340
|
+
__decorateClass([
|
|
341
|
+
property({ type: Boolean, reflect: true })
|
|
342
|
+
], PdIconPanelButton.prototype, "primary", 2);
|
|
292
343
|
__decorateClass([
|
|
293
344
|
property({ type: Number })
|
|
294
345
|
], PdIconPanelButton.prototype, "disableOnClickTime", 2);
|
|
346
|
+
__decorateClass([
|
|
347
|
+
property({ type: Boolean })
|
|
348
|
+
], PdIconPanelButton.prototype, "hideClose", 2);
|
|
295
349
|
__decorateClass([
|
|
296
350
|
property({ type: Boolean, reflect: true })
|
|
297
351
|
], PdIconPanelButton.prototype, "_timerDisabled", 2);
|
|
@@ -0,0 +1,18 @@
|
|
|
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 DefaultHorizontal: Story;
|
|
10
|
+
export declare const WithInitialSelection: Story;
|
|
11
|
+
export declare const VerticalGroup: Story;
|
|
12
|
+
export declare const VerticalGroupSized: Story;
|
|
13
|
+
export declare const HorizontalGroupSized: Story;
|
|
14
|
+
export declare const NoInitialSelection: Story;
|
|
15
|
+
export declare const EventLogging: Story;
|
|
16
|
+
export declare const IconGroup: Story;
|
|
17
|
+
export declare const VerticalIconGroup: Story;
|
|
18
|
+
//# sourceMappingURL=pd-button-group.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-button-group.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-button-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,uBAAuB,CAAC;AAS/B,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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/web-components';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: string;
|
|
5
|
+
tags: string[];
|
|
6
|
+
render: (args: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
|
|
7
|
+
argTypes: {
|
|
8
|
+
initValue: {
|
|
9
|
+
control: "number";
|
|
10
|
+
};
|
|
11
|
+
options: {
|
|
12
|
+
control: "object";
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default meta;
|
|
17
|
+
type Story = StoryObj;
|
|
18
|
+
export declare const Default: Story;
|
|
19
|
+
export declare const InitSelectionSecond: Story;
|
|
20
|
+
//# sourceMappingURL=pd-icon-button-select-group.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-icon-button-select-group.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-icon-button-select-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,mCAAmC,CAAC;AAG3C,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAQtB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC"}
|
|
@@ -23,6 +23,7 @@ export declare const DefaulIcontButtonDisabled: Story;
|
|
|
23
23
|
export declare const DefaulIcontButtonTimerDisabled: Story;
|
|
24
24
|
export declare const DefaulIcontButtonLoading: Story;
|
|
25
25
|
export declare const DefaulIcontButtonPrimary: Story;
|
|
26
|
+
export declare const DefaulIcontButtonPrimaryWithPanel: Story;
|
|
26
27
|
export declare const DefaulIcontButtonPrimaryDisabled: Story;
|
|
27
28
|
export declare const DefaulTextIcontButton: Story;
|
|
28
29
|
export declare const PanelButton: Story;
|
|
@@ -30,4 +31,7 @@ export declare const PanelButtonWithContent: Story;
|
|
|
30
31
|
export declare const PanelButtonWithContentRight: Story;
|
|
31
32
|
export declare const PanelButtonWithContentUp: Story;
|
|
32
33
|
export declare const PanelButtonWithContentRightUp: Story;
|
|
34
|
+
export declare const ButtonSelected: Story;
|
|
35
|
+
export declare const ButtonSelectedWithIcon: Story;
|
|
36
|
+
export declare const ButtonTransparent: Story;
|
|
33
37
|
//# sourceMappingURL=pd-icon-button.stories.d.ts.map
|
|
@@ -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;
|
|
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;AAIpC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAuBM,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,8BAA8B,EAAE,KAQ5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAQ/C,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;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAwBpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgH/B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-input-field-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-field-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,eAAO,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"shared-input-field-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-field-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,eAAO,MAAM,sBAAsB,yBAmKlC,CAAC"}
|
|
@@ -58,10 +58,6 @@ const SharedInputFieldStyles = css`
|
|
|
58
58
|
calc(var(--pd-input-field-height, 2rem) * 0.9)
|
|
59
59
|
);
|
|
60
60
|
--pd-icon-col-active: var(--pd-input-icon-color, #edf7fd);
|
|
61
|
-
--pd-icon-stroke-col-active: var(
|
|
62
|
-
--pd-input-icon-stroke-color,
|
|
63
|
-
var(--pd-default-color)
|
|
64
|
-
);
|
|
65
61
|
top: 2px;
|
|
66
62
|
}
|
|
67
63
|
|
package/dist/types.d.ts
CHANGED
|
@@ -17,6 +17,10 @@ export interface PdFormElementStatus {
|
|
|
17
17
|
export type PdFormValidatorFn = (value: any) => string | null | Promise<string | null>;
|
|
18
18
|
export type PdFieldType = "text" | "number" | "mail" | "vat" | "phone";
|
|
19
19
|
export declare const UNDEF = "UNDEF";
|
|
20
|
+
export interface ButtonData {
|
|
21
|
+
text?: string;
|
|
22
|
+
pdIcon?: string;
|
|
23
|
+
}
|
|
20
24
|
/**
|
|
21
25
|
* MDN-konforme Autocomplete-Werte.
|
|
22
26
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,GAAG,KACP,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvE,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,OAAO,GACP,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,GAAG,KACP,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvE,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,OAAO,GACP,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progressive-development/pd-forms",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.12",
|
|
4
4
|
"description": "Webcomponent pd-forms for rendering form input elements.",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./dist/index.js",
|
|
12
12
|
"./pd-button": "./dist/pd-button.js",
|
|
13
|
+
"./pd-button-group": "./dist/pd-button-group.js",
|
|
13
14
|
"./pd-icon-panel-button": "./dist/pd-icon-panel-button.js",
|
|
15
|
+
"./pd-icon-button-select-group": "./dist/pd-icon-button-select-group.js",
|
|
14
16
|
"./pd-checkbox": "./dist/pd-checkbox.js",
|
|
15
17
|
"./pd-form-container": "./dist/pd-form-container.js",
|
|
16
18
|
"./pd-form-row": "./dist/pd-form-row.js",
|
|
@@ -52,7 +54,7 @@
|
|
|
52
54
|
"dependencies": {
|
|
53
55
|
"@lit-labs/motion": "^1.0.8",
|
|
54
56
|
"@lit/localize": "^0.12.2",
|
|
55
|
-
"@progressive-development/pd-icon": "^0.7.
|
|
57
|
+
"@progressive-development/pd-icon": "^0.7.6",
|
|
56
58
|
"@progressive-development/pd-shared-styles": "^0.2.5",
|
|
57
59
|
"lit": "^3.3.0"
|
|
58
60
|
},
|