@progressive-development/pd-forms 0.8.7 → 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.
- package/dist/{pd-base-input-element.d.ts → base/pd-base-input-element.d.ts} +2 -3
- package/dist/base/pd-base-input-element.d.ts.map +1 -0
- package/dist/{pd-base-input-element.js → base/pd-base-input-element.js} +20 -23
- package/dist/{pd-base-ui-input.d.ts → base/pd-base-ui-input.d.ts} +3 -3
- package/dist/base/pd-base-ui-input.d.ts.map +1 -0
- package/dist/{pd-base-ui-input.js → base/pd-base-ui-input.js} +35 -42
- package/dist/base/pd-base-ui.d.ts.map +1 -0
- package/dist/{pd-base-ui.js → base/pd-base-ui.js} +10 -9
- package/dist/index.d.ts +11 -10
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +27 -32
- package/dist/locales/be.js +4 -4
- package/dist/locales/de.js +4 -4
- package/dist/locales/en.js +4 -4
- package/dist/pd-button/PdButton.d.ts +57 -0
- package/dist/pd-button/PdButton.d.ts.map +1 -0
- package/dist/pd-button/PdButton.js +152 -0
- package/dist/pd-button/pd-button.d.ts +3 -0
- package/dist/pd-button/pd-button.d.ts.map +1 -0
- package/dist/pd-button/pd-button.spec.d.ts +2 -0
- package/dist/pd-button/pd-button.spec.d.ts.map +1 -0
- package/dist/pd-button/pd-button.stories.d.ts +12 -0
- package/dist/pd-button/pd-button.stories.d.ts.map +1 -0
- package/dist/pd-button-group/PdButtonGroup.d.ts +14 -0
- package/dist/pd-button-group/PdButtonGroup.d.ts.map +1 -0
- package/dist/pd-button-group/PdButtonGroup.js +115 -0
- package/dist/pd-button-group/pd-button-group.d.ts +3 -0
- package/dist/pd-button-group/pd-button-group.d.ts.map +1 -0
- package/dist/pd-button-group/pd-button-group.stories.d.ts.map +1 -0
- package/dist/pd-button-group.d.ts +2 -14
- package/dist/pd-button-group.js +6 -116
- package/dist/{pd-icon-button-select-group.d.ts → pd-button-select-group/PdButtonSelectGroup.d.ts} +8 -5
- package/dist/pd-button-select-group/PdButtonSelectGroup.d.ts.map +1 -0
- package/dist/{pd-icon-button-select-group.js → pd-button-select-group/PdButtonSelectGroup.js} +38 -40
- package/dist/pd-button-select-group/pd-button-select-group.d.ts +3 -0
- package/dist/pd-button-select-group/pd-button-select-group.d.ts.map +1 -0
- package/dist/{stories/pd-icon-button-select-group.stories.d.ts → pd-button-select-group/pd-button-select-group.stories.d.ts} +2 -2
- package/dist/pd-button-select-group/pd-button-select-group.stories.d.ts.map +1 -0
- package/dist/pd-button-select-group.d.ts +2 -0
- package/dist/pd-button-select-group.js +8 -0
- package/dist/pd-button.d.ts +2 -16
- package/dist/pd-button.js +6 -152
- package/dist/pd-checkbox/PdCheckbox.d.ts +18 -0
- package/dist/pd-checkbox/PdCheckbox.d.ts.map +1 -0
- package/dist/pd-checkbox/PdCheckbox.js +279 -0
- package/dist/pd-checkbox/pd-checkbox.d.ts +3 -0
- package/dist/pd-checkbox/pd-checkbox.d.ts.map +1 -0
- package/dist/{stories/checkbox.stories.d.ts → pd-checkbox/pd-checkbox.stories.d.ts} +1 -1
- package/dist/pd-checkbox/pd-checkbox.stories.d.ts.map +1 -0
- package/dist/pd-checkbox.d.ts +2 -15
- package/dist/pd-checkbox.js +6 -279
- package/dist/pd-form-container/PdFormContainer.d.ts +42 -0
- package/dist/pd-form-container/PdFormContainer.d.ts.map +1 -0
- package/dist/pd-form-container/PdFormContainer.js +269 -0
- package/dist/pd-form-container/form-container.stories.d.ts.map +1 -0
- package/dist/pd-form-container/form-container2.stories.d.ts.map +1 -0
- package/dist/pd-form-container/form-container3.stories.d.ts.map +1 -0
- package/dist/pd-form-container/pd-form-container.d.ts +3 -0
- package/dist/pd-form-container/pd-form-container.d.ts.map +1 -0
- package/dist/pd-form-container.d.ts +2 -39
- package/dist/pd-form-container.js +6 -271
- package/dist/pd-form-row/PdFormRow.d.ts +15 -0
- package/dist/pd-form-row/PdFormRow.d.ts.map +1 -0
- package/dist/pd-form-row/PdFormRow.js +110 -0
- package/dist/pd-form-row/pd-form-row.d.ts +3 -0
- package/dist/pd-form-row/pd-form-row.d.ts.map +1 -0
- package/dist/{stories/form-row.stories.d.ts → pd-form-row/pd-form-row.stories.d.ts} +1 -1
- package/dist/pd-form-row/pd-form-row.stories.d.ts.map +1 -0
- package/dist/pd-form-row.d.ts +2 -12
- package/dist/pd-form-row.js +6 -114
- package/dist/pd-hover-box/PdHoverBox.d.ts +31 -0
- package/dist/pd-hover-box/PdHoverBox.d.ts.map +1 -0
- package/dist/pd-hover-box/PdHoverBox.js +119 -0
- package/dist/pd-hover-box/pd-hover-box.d.ts +3 -0
- package/dist/pd-hover-box/pd-hover-box.d.ts.map +1 -0
- package/dist/pd-hover-box/pd-hover-box.stories.d.ts.map +1 -0
- package/dist/pd-hover-box.d.ts +2 -23
- package/dist/pd-hover-box.js +6 -120
- package/dist/pd-input/PdInput.d.ts +35 -0
- package/dist/pd-input/PdInput.d.ts.map +1 -0
- package/dist/pd-input/PdInput.js +123 -0
- package/dist/pd-input/pd-input.d.ts +3 -0
- package/dist/pd-input/pd-input.d.ts.map +1 -0
- package/dist/{stories/input.stories.d.ts → pd-input/pd-input.stories.d.ts} +1 -1
- package/dist/pd-input/pd-input.stories.d.ts.map +1 -0
- package/dist/pd-input-area/PdInputArea.d.ts +23 -0
- package/dist/pd-input-area/PdInputArea.d.ts.map +1 -0
- package/dist/pd-input-area/PdInputArea.js +99 -0
- package/dist/pd-input-area/pd-input-area.d.ts +3 -0
- package/dist/pd-input-area/pd-input-area.d.ts.map +1 -0
- package/dist/{stories/input-area.stories.d.ts → pd-input-area/pd-input-area.stories.d.ts} +1 -1
- package/dist/pd-input-area/pd-input-area.stories.d.ts.map +1 -0
- package/dist/pd-input-area.d.ts +2 -20
- package/dist/pd-input-area.js +8 -101
- package/dist/pd-input-file/PdInputFile.d.ts +19 -0
- package/dist/pd-input-file/PdInputFile.d.ts.map +1 -0
- package/dist/pd-input-file/PdInputFile.js +93 -0
- package/dist/pd-input-file/pd-input-file.d.ts +3 -0
- package/dist/pd-input-file/pd-input-file.d.ts.map +1 -0
- package/dist/{stories/input-file.stories.d.ts → pd-input-file/pd-input-file.stories.d.ts} +1 -1
- package/dist/pd-input-file/pd-input-file.stories.d.ts.map +1 -0
- package/dist/pd-input-file.d.ts +2 -16
- package/dist/pd-input-file.js +8 -96
- package/dist/pd-input-time/PdInputTime.d.ts +14 -0
- package/dist/pd-input-time/PdInputTime.d.ts.map +1 -0
- package/dist/pd-input-time/PdInputTime.js +77 -0
- package/dist/pd-input-time/pd-input-time.d.ts +3 -0
- package/dist/pd-input-time/pd-input-time.d.ts.map +1 -0
- package/dist/pd-input-time.d.ts +2 -11
- package/dist/pd-input-time.js +8 -81
- package/dist/pd-input.d.ts +2 -32
- package/dist/pd-input.js +8 -126
- package/dist/pd-panel-button/PdPanelButton.d.ts +49 -0
- package/dist/pd-panel-button/PdPanelButton.d.ts.map +1 -0
- package/dist/{pd-icon-panel-button.js → pd-panel-button/PdPanelButton.js} +110 -112
- package/dist/pd-panel-button/pd-panel-button.d.ts +3 -0
- package/dist/pd-panel-button/pd-panel-button.d.ts.map +1 -0
- package/dist/{stories/pd-icon-button.stories.d.ts → pd-panel-button/pd-panel-button.stories.d.ts} +3 -13
- package/dist/{stories/pd-icon-button.stories.d.ts.map → pd-panel-button/pd-panel-button.stories.d.ts.map} +1 -1
- package/dist/pd-panel-button.d.ts +2 -0
- package/dist/pd-panel-button.js +8 -0
- package/dist/pd-radio-group/PdRadioGroup.d.ts +16 -0
- package/dist/pd-radio-group/PdRadioGroup.d.ts.map +1 -0
- package/dist/pd-radio-group/PdRadioGroup.js +114 -0
- package/dist/pd-radio-group/pd-radio-group.d.ts +3 -0
- package/dist/pd-radio-group/pd-radio-group.d.ts.map +1 -0
- package/dist/{stories/radio-group.stories.d.ts → pd-radio-group/pd-radio-group.stories.d.ts} +1 -1
- package/dist/pd-radio-group/pd-radio-group.stories.d.ts.map +1 -0
- package/dist/pd-radio-group.d.ts +2 -13
- package/dist/pd-radio-group.js +7 -113
- package/dist/pd-range/PdRange.d.ts +25 -0
- package/dist/pd-range/PdRange.d.ts.map +1 -0
- package/dist/pd-range/PdRange.js +280 -0
- package/dist/pd-range/pd-range.d.ts +3 -0
- package/dist/pd-range/pd-range.d.ts.map +1 -0
- package/dist/{stories/range.stories.d.ts → pd-range/pd-range.stories.d.ts} +1 -1
- package/dist/pd-range/pd-range.stories.d.ts.map +1 -0
- package/dist/pd-range.d.ts +2 -22
- package/dist/pd-range.js +6 -285
- package/dist/pd-select/PdSelect.d.ts +21 -0
- package/dist/pd-select/PdSelect.d.ts.map +1 -0
- package/dist/pd-select/PdSelect.js +142 -0
- package/dist/pd-select/pd-select.d.ts +3 -0
- package/dist/pd-select/pd-select.d.ts.map +1 -0
- package/dist/{stories/select.stories.d.ts → pd-select/pd-select.stories.d.ts} +1 -1
- package/dist/pd-select/pd-select.stories.d.ts.map +1 -0
- package/dist/pd-select.d.ts +2 -18
- package/dist/pd-select.js +6 -144
- package/dist/stories/01_index.stories.d.ts.map +1 -1
- package/dist/styles/shared-input-field-styles.js +4 -4
- package/dist/styles/shared-input-styles.js +4 -4
- package/dist/types.js +2 -3
- package/dist/validators.js +5 -12
- package/package.json +21 -41
- package/dist/pd-base-input-element.d.ts.map +0 -1
- package/dist/pd-base-ui-input.d.ts.map +0 -1
- package/dist/pd-base-ui.d.ts.map +0 -1
- package/dist/pd-button-group.d.ts.map +0 -1
- package/dist/pd-button.d.ts.map +0 -1
- package/dist/pd-checkbox.d.ts.map +0 -1
- package/dist/pd-form-container.d.ts.map +0 -1
- package/dist/pd-form-row.d.ts.map +0 -1
- package/dist/pd-hover-box.d.ts.map +0 -1
- package/dist/pd-icon-button-select-group.d.ts.map +0 -1
- package/dist/pd-icon-panel-button.d.ts +0 -24
- package/dist/pd-icon-panel-button.d.ts.map +0 -1
- package/dist/pd-input-area.d.ts.map +0 -1
- package/dist/pd-input-file.d.ts.map +0 -1
- package/dist/pd-input-time.d.ts.map +0 -1
- package/dist/pd-input.d.ts.map +0 -1
- package/dist/pd-radio-group.d.ts.map +0 -1
- package/dist/pd-range.d.ts.map +0 -1
- package/dist/pd-select.d.ts.map +0 -1
- package/dist/stories/button.stories.d.ts +0 -22
- package/dist/stories/button.stories.d.ts.map +0 -1
- package/dist/stories/checkbox.stories.d.ts.map +0 -1
- package/dist/stories/form-container.stories.d.ts.map +0 -1
- package/dist/stories/form-container2.stories.d.ts.map +0 -1
- package/dist/stories/form-container3.stories.d.ts.map +0 -1
- package/dist/stories/form-row.stories.d.ts.map +0 -1
- package/dist/stories/input-area.stories.d.ts.map +0 -1
- package/dist/stories/input-file.stories.d.ts.map +0 -1
- package/dist/stories/input.stories.d.ts.map +0 -1
- package/dist/stories/pd-button-group.stories.d.ts.map +0 -1
- package/dist/stories/pd-hover-box.stories.d.ts.map +0 -1
- package/dist/stories/pd-icon-button-select-group.stories.d.ts.map +0 -1
- package/dist/stories/radio-group.stories.d.ts.map +0 -1
- package/dist/stories/range.stories.d.ts.map +0 -1
- package/dist/stories/select.stories.d.ts.map +0 -1
- /package/dist/{pd-base-ui.d.ts → base/pd-base-ui.d.ts} +0 -0
- /package/dist/{stories → pd-button-group}/pd-button-group.stories.d.ts +0 -0
- /package/dist/{stories → pd-form-container}/form-container.stories.d.ts +0 -0
- /package/dist/{stories → pd-form-container}/form-container2.stories.d.ts +0 -0
- /package/dist/{stories → pd-form-container}/form-container3.stories.d.ts +0 -0
- /package/dist/{stories → pd-hover-box}/pd-hover-box.stories.d.ts +0 -0
|
@@ -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 @@
|
|
|
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 @@
|
|
|
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
|
-
|
|
2
|
-
|
|
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 {}
|
package/dist/pd-button-group.js
CHANGED
|
@@ -1,118 +1,8 @@
|
|
|
1
|
-
import {
|
|
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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
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 };
|
package/dist/{pd-icon-button-select-group.d.ts → pd-button-select-group/PdButtonSelectGroup.d.ts}
RENAMED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { CSSResultGroup, PropertyValues } from 'lit';
|
|
2
|
-
import { PdBaseUI } from '
|
|
3
|
-
import { ButtonData } from '
|
|
4
|
-
|
|
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
|
|
15
|
+
render(): import('lit').TemplateResult<1> | "";
|
|
13
16
|
private handleSelectionChange;
|
|
14
17
|
}
|
|
15
|
-
//# sourceMappingURL=
|
|
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"}
|
package/dist/{pd-icon-button-select-group.js → pd-button-select-group/PdButtonSelectGroup.js}
RENAMED
|
@@ -1,25 +1,42 @@
|
|
|
1
|
-
import { css, html } from
|
|
2
|
-
import { property, state, query
|
|
3
|
-
import { PdBaseUI } from
|
|
4
|
-
import
|
|
5
|
-
import
|
|
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 =
|
|
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 = (
|
|
13
|
-
if (
|
|
12
|
+
result = (decorator(target, key, result) ) || result;
|
|
13
|
+
if (result) __defProp(target, key, result);
|
|
14
14
|
return result;
|
|
15
15
|
};
|
|
16
|
-
|
|
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-
|
|
57
|
+
<pd-panel-button
|
|
41
58
|
panelButton
|
|
42
59
|
hideClose
|
|
43
|
-
.buttonText=${
|
|
44
|
-
.pdButtonIcon=${
|
|
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-
|
|
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
|
-
],
|
|
90
|
+
], PdButtonSelectGroup.prototype, "options");
|
|
89
91
|
__decorateClass([
|
|
90
92
|
property({ type: Number })
|
|
91
|
-
],
|
|
93
|
+
], PdButtonSelectGroup.prototype, "initValue");
|
|
92
94
|
__decorateClass([
|
|
93
95
|
state()
|
|
94
|
-
],
|
|
96
|
+
], PdButtonSelectGroup.prototype, "_selectedValue");
|
|
95
97
|
__decorateClass([
|
|
96
98
|
query("#buttonGroupId")
|
|
97
|
-
],
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
], PdIconButtonSelectGroup);
|
|
101
|
-
export {
|
|
102
|
-
PdIconButtonSelectGroup
|
|
103
|
-
};
|
|
99
|
+
], PdButtonSelectGroup.prototype, "_buttonGroupEl");
|
|
100
|
+
|
|
101
|
+
export { PdButtonSelectGroup };
|
|
@@ -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
|
|
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-
|
|
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"}
|
package/dist/pd-button.d.ts
CHANGED
|
@@ -1,16 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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 {}
|