@progressive-development/pd-forms 0.8.6 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 -36
- 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
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { CSSResultGroup } from 'lit';
|
|
2
2
|
import { PdBaseUIInput } from './pd-base-ui-input.js';
|
|
3
|
-
import { PdAutocomplete } from '
|
|
4
|
-
import { PdInput } from './pd-input.js';
|
|
3
|
+
import { PdAutocomplete } from '../types.js';
|
|
5
4
|
/**
|
|
6
5
|
* Abstraktes Basiselement für pd-input-Komponenten (Input, Area, Select).
|
|
7
6
|
*/
|
|
@@ -18,7 +17,7 @@ export declare abstract class PdBaseInputElement extends PdBaseUIInput {
|
|
|
18
17
|
* Attribut für native Autocomplete-Unterstützung.
|
|
19
18
|
*/
|
|
20
19
|
autoCompleteName: PdAutocomplete;
|
|
21
|
-
protected _input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement |
|
|
20
|
+
protected _input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | PdBaseInputElement;
|
|
22
21
|
private _delayTimerId?;
|
|
23
22
|
static styles: CSSResultGroup;
|
|
24
23
|
firstUpdated(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-base-input-element.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-input-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EACL,aAAa,EAOd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7C;;GAEG;AACH,8BAAsB,kBAAmB,SAAQ,aAAa;IAC5D;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,gBAAgB,EAAE,cAAc,CAAS;IAEzC,SAAS,CAAC,MAAM,EACZ,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,CAAC;IAEvB,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEO,YAAY,IAAI,IAAI;IAO7B,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAuBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWrC,iCAAiC,CAAC,MAAM,EAAE,OAAO;IAO1D,SAAS,CAAC,eAAe,IAAI,MAAM;IAiB1B,eAAe;CAezB"}
|
|
@@ -1,36 +1,40 @@
|
|
|
1
|
-
import { property } from
|
|
2
|
-
import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TIME, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from
|
|
3
|
-
import { SharedInputFieldStyles } from
|
|
1
|
+
import { property } from 'lit/decorators.js';
|
|
2
|
+
import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TIME, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from './pd-base-ui-input.js';
|
|
3
|
+
import { SharedInputFieldStyles } from '../styles/shared-input-field-styles.js';
|
|
4
|
+
|
|
4
5
|
var __defProp = Object.defineProperty;
|
|
5
6
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
6
|
-
var result = void 0;
|
|
7
|
+
var result = void 0 ;
|
|
7
8
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
8
9
|
if (decorator = decorators[i])
|
|
9
|
-
result = decorator(target, key, result) || result;
|
|
10
|
+
result = (decorator(target, key, result) ) || result;
|
|
10
11
|
if (result) __defProp(target, key, result);
|
|
11
12
|
return result;
|
|
12
13
|
};
|
|
13
14
|
const DELAY_WAIT_TIME_MS = 500;
|
|
14
|
-
|
|
15
|
+
class PdBaseInputElement extends PdBaseUIInput {
|
|
15
16
|
constructor() {
|
|
16
17
|
super(...arguments);
|
|
17
18
|
this.placeHolder = "";
|
|
18
19
|
this.name = "";
|
|
19
20
|
this.autoCompleteName = "off";
|
|
20
21
|
}
|
|
22
|
+
static {
|
|
23
|
+
this.styles = [
|
|
24
|
+
PdBaseUIInput.styles,
|
|
25
|
+
SharedInputFieldStyles
|
|
26
|
+
];
|
|
27
|
+
}
|
|
21
28
|
firstUpdated() {
|
|
22
|
-
|
|
23
|
-
this._input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
29
|
+
this._input = this.shadowRoot?.querySelector(
|
|
24
30
|
this._getElementName()
|
|
25
31
|
);
|
|
26
32
|
super.firstUpdated();
|
|
27
33
|
}
|
|
28
34
|
focus() {
|
|
29
|
-
|
|
30
|
-
(_a = this._input) == null ? void 0 : _a.focus();
|
|
35
|
+
this._input?.focus();
|
|
31
36
|
}
|
|
32
37
|
_onBlur(event) {
|
|
33
|
-
var _a;
|
|
34
38
|
if (this._delayTimerId) {
|
|
35
39
|
clearTimeout(this._delayTimerId);
|
|
36
40
|
this._handleChangedValue(this._input.value, event, true, true);
|
|
@@ -41,7 +45,7 @@ const _PdBaseInputElement = class _PdBaseInputElement extends PdBaseUIInput {
|
|
|
41
45
|
new CustomEvent("pd-form-element-blur", {
|
|
42
46
|
detail: {
|
|
43
47
|
name: this.valueName || this.id || "field",
|
|
44
|
-
value:
|
|
48
|
+
value: this._input?.value
|
|
45
49
|
},
|
|
46
50
|
bubbles: true,
|
|
47
51
|
composed: true
|
|
@@ -49,13 +53,12 @@ const _PdBaseInputElement = class _PdBaseInputElement extends PdBaseUIInput {
|
|
|
49
53
|
);
|
|
50
54
|
}
|
|
51
55
|
_onFocus(event) {
|
|
52
|
-
var _a;
|
|
53
56
|
this._focused = true;
|
|
54
57
|
this.dispatchEvent(
|
|
55
58
|
new CustomEvent("pd-form-element-focus", {
|
|
56
59
|
detail: {
|
|
57
60
|
name: this.valueName || this.id || "field",
|
|
58
|
-
value:
|
|
61
|
+
value: this._input?.value
|
|
59
62
|
},
|
|
60
63
|
bubbles: true,
|
|
61
64
|
composed: true
|
|
@@ -104,12 +107,7 @@ const _PdBaseInputElement = class _PdBaseInputElement extends PdBaseUIInput {
|
|
|
104
107
|
}
|
|
105
108
|
return this._value;
|
|
106
109
|
}
|
|
107
|
-
}
|
|
108
|
-
_PdBaseInputElement.styles = [
|
|
109
|
-
PdBaseUIInput.styles,
|
|
110
|
-
SharedInputFieldStyles
|
|
111
|
-
];
|
|
112
|
-
let PdBaseInputElement = _PdBaseInputElement;
|
|
110
|
+
}
|
|
113
111
|
__decorateClass([
|
|
114
112
|
property({ type: String })
|
|
115
113
|
], PdBaseInputElement.prototype, "placeHolder");
|
|
@@ -119,6 +117,5 @@ __decorateClass([
|
|
|
119
117
|
__decorateClass([
|
|
120
118
|
property({ type: String })
|
|
121
119
|
], PdBaseInputElement.prototype, "autoCompleteName");
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
};
|
|
120
|
+
|
|
121
|
+
export { PdBaseInputElement };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSResultGroup, PropertyValues } from 'lit';
|
|
2
2
|
import { PdBaseUI } from './pd-base-ui';
|
|
3
|
-
import { PdFieldType, PdFormValidatorFn } from '
|
|
3
|
+
import { PdFieldType, PdFormValidatorFn } from '../types';
|
|
4
4
|
/**
|
|
5
5
|
* Available input types.
|
|
6
6
|
* Each input elemt set it's own type during constructor call.
|
|
@@ -76,8 +76,8 @@ export declare abstract class PdBaseUIInput extends PdBaseUI {
|
|
|
76
76
|
prestine: boolean;
|
|
77
77
|
dirty: boolean;
|
|
78
78
|
};
|
|
79
|
-
protected _renderErrorMsg(): import('lit
|
|
80
|
-
protected _renderLabel(forParam: string, additionalValue?: string): import('lit
|
|
79
|
+
protected _renderErrorMsg(): import('lit').TemplateResult<1> | "";
|
|
80
|
+
protected _renderLabel(forParam: string, additionalValue?: string): import('lit').TemplateResult<1>;
|
|
81
81
|
runValidators(dryRun?: boolean): Promise<boolean>;
|
|
82
82
|
protected _handleStatusForInnerInputElement(status: boolean): void;
|
|
83
83
|
protected _getInitialValue(reset?: boolean): string;
|
|
@@ -0,0 +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,17 +1,18 @@
|
|
|
1
|
-
import { css, html } from
|
|
2
|
-
import { property, state } from
|
|
3
|
-
import { pdIcons } from
|
|
4
|
-
import
|
|
5
|
-
import { PdBaseUI } from
|
|
6
|
-
import { SharedInputStyles } from
|
|
7
|
-
import { requiredValidator, requiredSelectValidator, requiredRangeValidator, requiredCheckedValidator, emailValidator, numberValidator, phoneValidator, vatValidator } from
|
|
8
|
-
import
|
|
1
|
+
import { css, html } from 'lit';
|
|
2
|
+
import { property, state } from 'lit/decorators.js';
|
|
3
|
+
import { pdIcons } from '@progressive-development/pd-icon';
|
|
4
|
+
import '@progressive-development/pd-icon/pd-icon';
|
|
5
|
+
import { PdBaseUI } from './pd-base-ui.js';
|
|
6
|
+
import { SharedInputStyles } from '../styles/shared-input-styles.js';
|
|
7
|
+
import { requiredValidator, requiredSelectValidator, requiredRangeValidator, requiredCheckedValidator, emailValidator, numberValidator, phoneValidator, vatValidator } from '../validators.js';
|
|
8
|
+
import '../pd-hover-box.js';
|
|
9
|
+
|
|
9
10
|
var __defProp = Object.defineProperty;
|
|
10
11
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
11
|
-
var result = void 0;
|
|
12
|
+
var result = void 0 ;
|
|
12
13
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
13
14
|
if (decorator = decorators[i])
|
|
14
|
-
result = decorator(target, key, result) || result;
|
|
15
|
+
result = (decorator(target, key, result) ) || result;
|
|
15
16
|
if (result) __defProp(target, key, result);
|
|
16
17
|
return result;
|
|
17
18
|
};
|
|
@@ -24,7 +25,7 @@ const INPUT_TYPE_DATE = 7;
|
|
|
24
25
|
const INPUT_TYPE_FILE = 8;
|
|
25
26
|
const INPUT_TYPE_TIME = 9;
|
|
26
27
|
const KEY_RETURN = "Enter";
|
|
27
|
-
|
|
28
|
+
class PdBaseUIInput extends PdBaseUI {
|
|
28
29
|
constructor() {
|
|
29
30
|
super(...arguments);
|
|
30
31
|
this.gradient = false;
|
|
@@ -51,6 +52,24 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
|
|
|
51
52
|
this._inputType = -1;
|
|
52
53
|
this._validators = [];
|
|
53
54
|
}
|
|
55
|
+
static {
|
|
56
|
+
this.styles = [
|
|
57
|
+
PdBaseUI.styles,
|
|
58
|
+
SharedInputStyles,
|
|
59
|
+
css`
|
|
60
|
+
.label-header {
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: end;
|
|
63
|
+
justify-content: space-between;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.help-icon {
|
|
67
|
+
--pd-icon-size: 20px;
|
|
68
|
+
cursor: help;
|
|
69
|
+
}
|
|
70
|
+
`
|
|
71
|
+
];
|
|
72
|
+
}
|
|
54
73
|
update(changedProps) {
|
|
55
74
|
if (changedProps.has("initValue") && (this.initValue || changedProps.get("initValue"))) {
|
|
56
75
|
if (this.handleChangeForInitVal) {
|
|
@@ -203,7 +222,7 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
|
|
|
203
222
|
composed: true
|
|
204
223
|
})
|
|
205
224
|
);
|
|
206
|
-
event
|
|
225
|
+
event?.preventDefault();
|
|
207
226
|
}
|
|
208
227
|
if (changed) {
|
|
209
228
|
this._value = newValue;
|
|
@@ -213,7 +232,7 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
|
|
|
213
232
|
if (dispatchEvent) {
|
|
214
233
|
this._dispatchChange(newValue);
|
|
215
234
|
}
|
|
216
|
-
callback
|
|
235
|
+
callback?.();
|
|
217
236
|
});
|
|
218
237
|
}
|
|
219
238
|
}
|
|
@@ -343,24 +362,7 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
|
|
|
343
362
|
_getParsedValue() {
|
|
344
363
|
return this._value;
|
|
345
364
|
}
|
|
346
|
-
}
|
|
347
|
-
_PdBaseUIInput.styles = [
|
|
348
|
-
PdBaseUI.styles,
|
|
349
|
-
SharedInputStyles,
|
|
350
|
-
css`
|
|
351
|
-
.label-header {
|
|
352
|
-
display: flex;
|
|
353
|
-
align-items: end;
|
|
354
|
-
justify-content: space-between;
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
.help-icon {
|
|
358
|
-
--pd-icon-size: 20px;
|
|
359
|
-
cursor: help;
|
|
360
|
-
}
|
|
361
|
-
`
|
|
362
|
-
];
|
|
363
|
-
let PdBaseUIInput = _PdBaseUIInput;
|
|
365
|
+
}
|
|
364
366
|
__decorateClass([
|
|
365
367
|
property({ type: Boolean })
|
|
366
368
|
], PdBaseUIInput.prototype, "gradient");
|
|
@@ -427,14 +429,5 @@ __decorateClass([
|
|
|
427
429
|
__decorateClass([
|
|
428
430
|
state()
|
|
429
431
|
], PdBaseUIInput.prototype, "_inputType");
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
INPUT_TYPE_CHECK,
|
|
433
|
-
INPUT_TYPE_DATE,
|
|
434
|
-
INPUT_TYPE_FILE,
|
|
435
|
-
INPUT_TYPE_RANGE,
|
|
436
|
-
INPUT_TYPE_SELECT,
|
|
437
|
-
INPUT_TYPE_TEXT,
|
|
438
|
-
INPUT_TYPE_TIME,
|
|
439
|
-
PdBaseUIInput
|
|
440
|
-
};
|
|
432
|
+
|
|
433
|
+
export { INPUT_TYPE_AREA, INPUT_TYPE_CHECK, INPUT_TYPE_DATE, INPUT_TYPE_FILE, INPUT_TYPE_RANGE, INPUT_TYPE_SELECT, INPUT_TYPE_TEXT, INPUT_TYPE_TIME, PdBaseUIInput };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-base-ui.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAOjD;;;;;;GAMG;AACH,8BAAsB,QAAS,SAAQ,UAAU;IAC/C,OAAgB,MAAM,EAAE,cAAc,CAAiC;CACxE"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { LitElement } from
|
|
2
|
-
import { PdColorStyles, PdFontStyles } from
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
|
|
3
|
+
|
|
3
4
|
/**
|
|
4
5
|
* @license
|
|
5
6
|
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
@@ -18,10 +19,10 @@ import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-
|
|
|
18
19
|
* Custom Properties (shared-global-styles):
|
|
19
20
|
* ... TODO
|
|
20
21
|
*/
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
};
|
|
22
|
+
class PdBaseUI extends LitElement {
|
|
23
|
+
static {
|
|
24
|
+
this.styles = [PdColorStyles, PdFontStyles];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { PdBaseUI };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
export { PdFormRow } from './pd-form-row.js';
|
|
2
|
-
export { PdButton } from './pd-button.js';
|
|
3
|
-
export { PdCheckbox } from './pd-checkbox.js';
|
|
4
|
-
export { PdFormContainer } from './pd-form-container.js';
|
|
5
|
-
export { PdHoverBox } from './pd-hover-box.js';
|
|
6
|
-
export { PdInput } from './pd-input.js';
|
|
7
|
-
export { PdInputArea } from './pd-input-area.js';
|
|
8
|
-
export { PdInputFile } from './pd-input-file.js';
|
|
9
|
-
export {
|
|
10
|
-
export {
|
|
1
|
+
export { PdFormRow } from './pd-form-row/pd-form-row.js';
|
|
2
|
+
export { PdButton } from './pd-button/pd-button.js';
|
|
3
|
+
export { PdCheckbox } from './pd-checkbox/pd-checkbox.js';
|
|
4
|
+
export { PdFormContainer } from './pd-form-container/pd-form-container.js';
|
|
5
|
+
export { PdHoverBox } from './pd-hover-box/pd-hover-box.js';
|
|
6
|
+
export { PdInput } from './pd-input/pd-input.js';
|
|
7
|
+
export { PdInputArea } from './pd-input-area/pd-input-area.js';
|
|
8
|
+
export { PdInputFile } from './pd-input-file/pd-input-file.js';
|
|
9
|
+
export { PdInputTime } from './pd-input-time/pd-input-time.js';
|
|
10
|
+
export { PdRadioGroup } from './pd-radio-group/pd-radio-group.js';
|
|
11
|
+
export { PdBaseInputElement } from './base/pd-base-input-element.js';
|
|
11
12
|
export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, } from './types.js';
|
|
12
13
|
export { UNDEF } from './types.js';
|
|
13
14
|
export * as pdValidator from './validators.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,
|
|
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,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;AAErE,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
|
@@ -1,32 +1,27 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
import
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
templates as beTemplates,
|
|
29
|
-
templates2 as deTemplates,
|
|
30
|
-
templates3 as enTemplates,
|
|
31
|
-
validators as pdValidator
|
|
32
|
-
};
|
|
1
|
+
import './pd-form-row.js';
|
|
2
|
+
import './pd-button.js';
|
|
3
|
+
import './pd-checkbox.js';
|
|
4
|
+
import './pd-form-container.js';
|
|
5
|
+
import './pd-hover-box.js';
|
|
6
|
+
import './pd-input.js';
|
|
7
|
+
import './pd-input-area.js';
|
|
8
|
+
import './pd-input-file.js';
|
|
9
|
+
import './pd-input-time.js';
|
|
10
|
+
import './pd-radio-group.js';
|
|
11
|
+
export { PdBaseInputElement } from './base/pd-base-input-element.js';
|
|
12
|
+
export { UNDEF } from './types.js';
|
|
13
|
+
import * as validators from './validators.js';
|
|
14
|
+
export { validators as pdValidator };
|
|
15
|
+
export { templates as beTemplates } from './locales/be.js';
|
|
16
|
+
export { templates as deTemplates } from './locales/de.js';
|
|
17
|
+
export { templates as enTemplates } from './locales/en.js';
|
|
18
|
+
export { PdFormRow } from './pd-form-row/PdFormRow.js';
|
|
19
|
+
export { PdButton } from './pd-button/PdButton.js';
|
|
20
|
+
export { PdCheckbox } from './pd-checkbox/PdCheckbox.js';
|
|
21
|
+
export { PdFormContainer } from './pd-form-container/PdFormContainer.js';
|
|
22
|
+
export { PdHoverBox } from './pd-hover-box/PdHoverBox.js';
|
|
23
|
+
export { PdInput } from './pd-input/PdInput.js';
|
|
24
|
+
export { PdInputArea } from './pd-input-area/PdInputArea.js';
|
|
25
|
+
export { PdInputFile } from './pd-input-file/PdInputFile.js';
|
|
26
|
+
export { PdInputTime } from './pd-input-time/PdInputTime.js';
|
|
27
|
+
export { PdRadioGroup } from './pd-radio-group/PdRadioGroup.js';
|
package/dist/locales/be.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { str } from
|
|
1
|
+
import { str } from '@lit/localize';
|
|
2
|
+
|
|
2
3
|
const templates = {
|
|
3
4
|
"pd.form.field.checkRequired": `Selectie vereist`,
|
|
4
5
|
"pd.form.field.invalid.mail": `Ongeldig e-mailadres, gebruik mail@test.be`,
|
|
@@ -13,6 +14,5 @@ const templates = {
|
|
|
13
14
|
s512f37f2dba563ec: str`Maximaal ${0} tekens`,
|
|
14
15
|
s8a355eeb33f58c5f: str`Minimaal ${0} tekens`
|
|
15
16
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
17
|
+
|
|
18
|
+
export { templates };
|
package/dist/locales/de.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { str } from
|
|
1
|
+
import { str } from '@lit/localize';
|
|
2
|
+
|
|
2
3
|
const templates = {
|
|
3
4
|
"pd.form.field.required": `Eingabe erforderlich`,
|
|
4
5
|
"pd.form.field.selectRequired": `Eingabe erforderlich`,
|
|
@@ -13,6 +14,5 @@ const templates = {
|
|
|
13
14
|
s8a355eeb33f58c5f: str`Mindestens ${0} Zeichen`,
|
|
14
15
|
s512f37f2dba563ec: str`Maximal ${0} Zeichen`
|
|
15
16
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
17
|
+
|
|
18
|
+
export { templates };
|
package/dist/locales/en.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { str } from
|
|
1
|
+
import { str } from '@lit/localize';
|
|
2
|
+
|
|
2
3
|
const templates = {
|
|
3
4
|
"pd.form.field.checkRequired": `Selection required`,
|
|
4
5
|
"pd.form.field.invalid.mail": `Use format mail@test.de`,
|
|
@@ -13,6 +14,5 @@ const templates = {
|
|
|
13
14
|
s512f37f2dba563ec: str`Maximum ${0} characters`,
|
|
14
15
|
s8a355eeb33f58c5f: str`At least ${0} characters`
|
|
15
16
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
17
|
+
|
|
18
|
+
export { templates };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { CSSResultGroup } from 'lit';
|
|
2
|
+
import { PdBaseUI } from '../base/pd-base-ui';
|
|
3
|
+
/**
|
|
4
|
+
* A reusable button component for primary and secondary actions.
|
|
5
|
+
*
|
|
6
|
+
* @tagname pd-button
|
|
7
|
+
* pd-calendar-cell
|
|
8
|
+
*
|
|
9
|
+
* @summary
|
|
10
|
+
* The `pd-button` component provides a styled button element with support for
|
|
11
|
+
* primary and gradient styles, disabled state, and customizable appearance via CSS custom properties.
|
|
12
|
+
*
|
|
13
|
+
* @property {boolean} primary - Displays the button with a primary style (e.g. highlighted).
|
|
14
|
+
* @property {boolean} gradient - Applies a linear gradient background to the button.
|
|
15
|
+
* @property {boolean} disabled - Disables the button and prevents interaction.
|
|
16
|
+
* @property {string} text - The visible button label. Default is `"Ok"`.
|
|
17
|
+
* @property {string} value - A custom value that is emitted as part of the `button-clicked` event.
|
|
18
|
+
*
|
|
19
|
+
* @event button-clicked - Fired when the button is clicked (not when disabled). Emits the `value` as `event.detail`.
|
|
20
|
+
*
|
|
21
|
+
* @cssprop --pd-button-width - The button's width. Default: `140px`.
|
|
22
|
+
* @cssprop --pd-button-height - The button's height. Default: `2rem`.
|
|
23
|
+
* @cssprop --pd-button-bg-col - Background color of the button.
|
|
24
|
+
* @cssprop --pd-button-font-col - Font color of the button.
|
|
25
|
+
* @cssprop --pd-button-border - Border of the button.
|
|
26
|
+
* @cssprop --pd-button-box-shadow - Box shadow styling of the button.
|
|
27
|
+
* @cssprop --pd-button-box-shadow-hover - Hover box shadow effect.
|
|
28
|
+
* @cssprop --pd-button-bg-col-hover - Hover background color.
|
|
29
|
+
* @cssprop --pd-button-font-col-hover - Hover font color.
|
|
30
|
+
* @cssprop --pd-button-border-hover - Border style on hover.
|
|
31
|
+
* @cssprop --pd-button-primary-bg-col - Background color for primary buttons.
|
|
32
|
+
* @cssprop --pd-button-primary-font-col - Font color for primary buttons.
|
|
33
|
+
* @cssprop --pd-button-primary-bg-col-hover - Hover background for primary buttons.
|
|
34
|
+
* @cssprop --pd-button-primary-font-col-hover - Hover font color for primary buttons.
|
|
35
|
+
* @cssprop --pd-button-bg-col-disabled - Background color for disabled state.
|
|
36
|
+
* @cssprop --pd-button-font-col-disabled - Font color for disabled state.
|
|
37
|
+
* @cssprop --pd-button-border-disabled - Border style for disabled state.
|
|
38
|
+
* @cssprop --pd-button-font-size - Font size of the text inside the button.
|
|
39
|
+
* @cssprop --pd-button-font-weight - Font weight of the button text.
|
|
40
|
+
* @cssprop --pd-border-radius - Border radius of the button.
|
|
41
|
+
*
|
|
42
|
+
* @slot default - The default slot renders the button label. Usually set via the `text` property.
|
|
43
|
+
*/
|
|
44
|
+
export declare class PdButton extends PdBaseUI {
|
|
45
|
+
/**
|
|
46
|
+
* @event button-clicked
|
|
47
|
+
*/
|
|
48
|
+
primary: boolean;
|
|
49
|
+
gradient: boolean;
|
|
50
|
+
disabled: boolean;
|
|
51
|
+
text: string;
|
|
52
|
+
value?: string;
|
|
53
|
+
static styles: CSSResultGroup;
|
|
54
|
+
render(): import('lit').TemplateResult<1>;
|
|
55
|
+
private _handleClick;
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=PdButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;IAGI;AAEJ,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IACpC;;OAEG;IAGH,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAQ;IAGZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAgB,MAAM,EAAE,cAAc,CA4FpC;IAEO,MAAM;IAQf,OAAO,CAAC,YAAY;CAWrB"}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { css, html } from 'lit';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { PdBaseUI } from '../base/pd-base-ui.js';
|
|
4
|
+
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
7
|
+
var result = void 0 ;
|
|
8
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
9
|
+
if (decorator = decorators[i])
|
|
10
|
+
result = (decorator(target, key, result) ) || result;
|
|
11
|
+
if (result) __defProp(target, key, result);
|
|
12
|
+
return result;
|
|
13
|
+
};
|
|
14
|
+
class PdButton extends PdBaseUI {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this.primary = false;
|
|
18
|
+
this.gradient = false;
|
|
19
|
+
this.disabled = false;
|
|
20
|
+
this.text = "Ok";
|
|
21
|
+
}
|
|
22
|
+
static {
|
|
23
|
+
this.styles = [
|
|
24
|
+
PdBaseUI.styles,
|
|
25
|
+
css`
|
|
26
|
+
:host {
|
|
27
|
+
font-family: var(--pd-default-font-title-family);
|
|
28
|
+
font-size: var(--pd-button-font-size, 1em);
|
|
29
|
+
font-weight: var(--pd-button-font-weight, normal);
|
|
30
|
+
/*
|
|
31
|
+
height: 100%;
|
|
32
|
+
width: 100%; => Ohne diese Angabe eht die % Angaben icht
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
margin: 0.5rem;
|
|
36
|
+
margin-left: 0;
|
|
37
|
+
pointer-events: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.button-div {
|
|
41
|
+
display: flex;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
align-items: center;
|
|
44
|
+
width: var(--pd-button-width, 140px);
|
|
45
|
+
height: var(--pd-button-height, 2rem);
|
|
46
|
+
border-radius: var(--pd-border-radius, 1px);
|
|
47
|
+
background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
|
|
48
|
+
color: var(--pd-button-font-col, var(--pd-default-bg-col));
|
|
49
|
+
border: var(--pd-button-border, 0);
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
box-shadow: var(--pd-button-box-shadow, none);
|
|
52
|
+
pointer-events: all;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:host(:not([disabled])) .button-div:hover {
|
|
56
|
+
box-shadow: var(
|
|
57
|
+
--pd-button-box-shadow-hover,
|
|
58
|
+
-1px 1px 2px var(--pd-default-dark-col)
|
|
59
|
+
);
|
|
60
|
+
background-color: var(
|
|
61
|
+
--pd-button-bg-col-hover,
|
|
62
|
+
var(--pd-default-hover-col)
|
|
63
|
+
);
|
|
64
|
+
color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
|
|
65
|
+
transition: background-color 0.4s ease 0s;
|
|
66
|
+
--pd-button-border: var(--pd-button-border-hover);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host(:not([disabled])[primary]) .button-div:hover {
|
|
70
|
+
background-color: var(
|
|
71
|
+
--pd-button-primary-bg-col-hover,
|
|
72
|
+
var(--pd-default-hover-col)
|
|
73
|
+
);
|
|
74
|
+
color: var(
|
|
75
|
+
--pd-button-primary-font-col-hover,
|
|
76
|
+
var(--pd-default-bg-col)
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:host([primary]) .button-div {
|
|
81
|
+
background-color: var(
|
|
82
|
+
--pd-button-primary-bg-col,
|
|
83
|
+
var(--pd-default-col)
|
|
84
|
+
);
|
|
85
|
+
color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
:host([gradient]) .button-div {
|
|
89
|
+
background: linear-gradient(
|
|
90
|
+
to right,
|
|
91
|
+
var(--my-background-gradient-color, red) 0%,
|
|
92
|
+
var(--my-background-color, blue) 100%
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:host([disabled]) .button-div {
|
|
97
|
+
cursor: auto;
|
|
98
|
+
border-color: var(--pd-default-disabled-col);
|
|
99
|
+
background-color: var(
|
|
100
|
+
--pd-button-bg-col-disabled,
|
|
101
|
+
var(--pd-default-disabled-col)
|
|
102
|
+
);
|
|
103
|
+
color: var(--pd-button-font-col-disabled, black);
|
|
104
|
+
--pd-button-border: var(--pd-button-border-disabled);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
a {
|
|
108
|
+
display: inline-block;
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
white-space: nowrap;
|
|
111
|
+
margin: 0.5rem;
|
|
112
|
+
pointer-events: none;
|
|
113
|
+
}
|
|
114
|
+
`
|
|
115
|
+
];
|
|
116
|
+
}
|
|
117
|
+
render() {
|
|
118
|
+
return html`
|
|
119
|
+
<div class="button-div" @click=${this._handleClick}>
|
|
120
|
+
<a ?disabled=${this.disabled}>${this.text}</a>
|
|
121
|
+
</div>
|
|
122
|
+
`;
|
|
123
|
+
}
|
|
124
|
+
_handleClick() {
|
|
125
|
+
if (!this.disabled) {
|
|
126
|
+
this.dispatchEvent(
|
|
127
|
+
new CustomEvent("button-clicked", {
|
|
128
|
+
detail: this.value,
|
|
129
|
+
bubbles: true,
|
|
130
|
+
composed: true
|
|
131
|
+
})
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
__decorateClass([
|
|
137
|
+
property({ type: Boolean, reflect: true })
|
|
138
|
+
], PdButton.prototype, "primary");
|
|
139
|
+
__decorateClass([
|
|
140
|
+
property({ type: Boolean, reflect: true })
|
|
141
|
+
], PdButton.prototype, "gradient");
|
|
142
|
+
__decorateClass([
|
|
143
|
+
property({ type: Boolean, reflect: true })
|
|
144
|
+
], PdButton.prototype, "disabled");
|
|
145
|
+
__decorateClass([
|
|
146
|
+
property({ type: String })
|
|
147
|
+
], PdButton.prototype, "text");
|
|
148
|
+
__decorateClass([
|
|
149
|
+
property({ type: String })
|
|
150
|
+
], PdButton.prototype, "value");
|
|
151
|
+
|
|
152
|
+
export { PdButton };
|