@progressive-development/pd-spa-helper 0.5.16 → 0.5.17
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.
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import { css, LitElement, html } from "lit";
|
|
2
|
+
import { property, state, customElement } from "lit/decorators.js";
|
|
3
|
+
import "@progressive-development/pd-icon/pd-icon";
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
7
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
8
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
9
|
+
if (decorator = decorators[i])
|
|
10
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
11
|
+
if (kind && result) __defProp(target, key, result);
|
|
12
|
+
return result;
|
|
13
|
+
};
|
|
14
|
+
let PdIconPanelButton = class extends LitElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this.buttonText = "Ok";
|
|
18
|
+
this.panelButton = false;
|
|
19
|
+
this._panelOpen = false;
|
|
20
|
+
}
|
|
21
|
+
// ${this._daySyncDisabled ? "element-hint" : ""} => for div class
|
|
22
|
+
render() {
|
|
23
|
+
return html`
|
|
24
|
+
<div class="icon-button-style"
|
|
25
|
+
role="button"
|
|
26
|
+
tabindex="0"
|
|
27
|
+
@click="${this._buttonClicked}"
|
|
28
|
+
@keydown="${this._onKeyDown}">
|
|
29
|
+
${this.pdButtonIcon ? html`
|
|
30
|
+
<pd-icon
|
|
31
|
+
class="icon action-icon-color"
|
|
32
|
+
icon="${this.pdButtonIcon}"
|
|
33
|
+
activeIcon
|
|
34
|
+
></pd-icon>
|
|
35
|
+
` : ""}
|
|
36
|
+
<span>${this.buttonText}</span>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div class="panel ${this._panelOpen ? "open" : ""}">
|
|
40
|
+
<button class="close-button" @click="${this._togglePanel}">×</button>
|
|
41
|
+
<div class="panel-content">
|
|
42
|
+
<slot></slot>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
`;
|
|
46
|
+
}
|
|
47
|
+
_onKeyDown(event) {
|
|
48
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
this._buttonClicked();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
_buttonClicked() {
|
|
54
|
+
if (this.panelButton) {
|
|
55
|
+
this._togglePanel();
|
|
56
|
+
} else {
|
|
57
|
+
this.dispatchEvent(
|
|
58
|
+
new CustomEvent("button-clicked")
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
_togglePanel() {
|
|
63
|
+
this._panelOpen = !this._panelOpen;
|
|
64
|
+
this.dispatchEvent(new CustomEvent("panel-button-toggled", {
|
|
65
|
+
detail: { open: this._panelOpen }
|
|
66
|
+
}));
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
PdIconPanelButton.styles = [
|
|
70
|
+
css`
|
|
71
|
+
|
|
72
|
+
:host {
|
|
73
|
+
display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
|
|
74
|
+
position: relative;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.icon-button-style {
|
|
78
|
+
z-index: 2;
|
|
79
|
+
background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
|
|
80
|
+
background-color: var(--pd-icon-button-bgcol, #0c6fc5);
|
|
81
|
+
padding: 0.3em 0.8em;
|
|
82
|
+
border: 1px solid var(--pd-icon-button-bordercol, rgba(0, 0, 0, 0.5));
|
|
83
|
+
border-radius: 0.2em;
|
|
84
|
+
transition: background-color 0.3s ease;
|
|
85
|
+
--pd-icon-size: 20px;
|
|
86
|
+
color: var(--pd-icon-button-txtcol, white);
|
|
87
|
+
text-shadow: 0 - 0.05em 0.05em rgba(0, 0, 0, 0.5);
|
|
88
|
+
font-size: 125%;
|
|
89
|
+
line-height: 1.5;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:host(:not([disabled])) .icon-button-style:hover {
|
|
93
|
+
background-color: var(--pd-icon-button-bgcol-hover, #fdae03f3);
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([disabled]) .icon-button-style {
|
|
98
|
+
background: linear-gradient(to bottom, #e0e0e0, #c4c4c4); /* Matte, deaktivierte Optik */
|
|
99
|
+
color: #696868; /* Text weniger dominant */
|
|
100
|
+
border-color: #b0b0b0; /* Weniger Kontrast */
|
|
101
|
+
cursor: not-allowed;
|
|
102
|
+
opacity: 0.6; /* Leichter "inaktiv"-Effekt */
|
|
103
|
+
text-shadow: none; /* Kein 3D-Effekt */
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
:host(:not([disabled])[primary]) .icon-button-style {
|
|
107
|
+
background-color: var(--pd-icon-button-primary-bgcol, #044176);
|
|
108
|
+
color: var(--pd-icon-button-primary-txtcol, white);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
:host(:not([disabled])[primary]) .icon-button-style:hover {
|
|
112
|
+
background-color: var(--pd-icon-button-primary-bgcol-hover, #fdae03f3);
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.panel {
|
|
117
|
+
position: absolute;
|
|
118
|
+
width: max-content; /* Verhindert volle Breite */
|
|
119
|
+
min-width: 120%; /* Panel wird etwas breiter als der Button */
|
|
120
|
+
max-width: 300px; /* Optional: Maximale Breite */
|
|
121
|
+
transform: scaleY(0);
|
|
122
|
+
background: var(--pd-panel-bg, white);
|
|
123
|
+
border-radius: 5px;
|
|
124
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
125
|
+
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
|
|
126
|
+
opacity: 0;
|
|
127
|
+
z-index: 1;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.panel.open {
|
|
131
|
+
transform: scaleY(1);
|
|
132
|
+
opacity: 1;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.panel-content {
|
|
136
|
+
padding: 1rem;
|
|
137
|
+
min-height: 50px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.close-button {
|
|
141
|
+
position: absolute;
|
|
142
|
+
top: 5px;
|
|
143
|
+
right: 5px;
|
|
144
|
+
background: transparent;
|
|
145
|
+
border: none;
|
|
146
|
+
color: #555;
|
|
147
|
+
font-size: 1.2rem;
|
|
148
|
+
cursor: pointer;
|
|
149
|
+
padding: 5px;
|
|
150
|
+
line-height: 1;
|
|
151
|
+
transition: color 0.2s ease-in-out;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.close-button:hover {
|
|
155
|
+
color: black;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Standard (nach unten öffnend, linksbündig) */
|
|
159
|
+
:host(:not([right]):not([up])) .panel {
|
|
160
|
+
left: 0; /* Panel beginnt exakt unter dem Button */
|
|
161
|
+
top: 100%; /* Panel öffnet sich nach unten */
|
|
162
|
+
transform-origin: top; /* Wächst nach unten */
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Standard (nach unten öffnend, rechtsbündig) */
|
|
166
|
+
:host([right]:not([up])) .panel {
|
|
167
|
+
right: 0; /* Panel beginnt rechtsbündig am Button */
|
|
168
|
+
top: 100%;
|
|
169
|
+
transform-origin: top right;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* 🔼 Panel öffnet sich nach OBEN (links ausgerichtet) */
|
|
173
|
+
:host(:not([right])[up]) .panel {
|
|
174
|
+
left: 0;
|
|
175
|
+
bottom: 100%; /* Panel öffnet sich nach oben */
|
|
176
|
+
transform-origin: bottom;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* 🔼 Panel öffnet sich nach OBEN (rechts ausgerichtet) */
|
|
180
|
+
:host([right][up]) .panel {
|
|
181
|
+
right: 0;
|
|
182
|
+
bottom: 100%; /* Panel öffnet sich nach oben */
|
|
183
|
+
transform-origin: bottom right;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
`
|
|
188
|
+
];
|
|
189
|
+
__decorateClass([
|
|
190
|
+
property({ type: String })
|
|
191
|
+
], PdIconPanelButton.prototype, "pdButtonIcon", 2);
|
|
192
|
+
__decorateClass([
|
|
193
|
+
property({ type: String })
|
|
194
|
+
], PdIconPanelButton.prototype, "buttonText", 2);
|
|
195
|
+
__decorateClass([
|
|
196
|
+
property({ type: Boolean })
|
|
197
|
+
], PdIconPanelButton.prototype, "panelButton", 2);
|
|
198
|
+
__decorateClass([
|
|
199
|
+
state()
|
|
200
|
+
], PdIconPanelButton.prototype, "_panelOpen", 2);
|
|
201
|
+
PdIconPanelButton = __decorateClass([
|
|
202
|
+
customElement("pd-icon-panel-button")
|
|
203
|
+
], PdIconPanelButton);
|
|
204
|
+
export {
|
|
205
|
+
PdIconPanelButton
|
|
206
|
+
};
|
package/package.json
CHANGED
|
@@ -3,14 +3,15 @@
|
|
|
3
3
|
"description": "Webcomponent pd-spa-helper following open-wc recommendations",
|
|
4
4
|
"author": "PD Progressive Development",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
|
-
"version": "0.5.
|
|
6
|
+
"version": "0.5.17",
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"module": "./dist/index.js",
|
|
9
9
|
"types": "./dist/index.d.ts",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./dist/index.js",
|
|
12
12
|
"./pd-panel-viewer": "./dist/pd-panel-viewer.js",
|
|
13
|
-
"./pd-panel": "./dist/pd-panel.js"
|
|
13
|
+
"./pd-panel": "./dist/pd-panel.js",
|
|
14
|
+
"./pd-pd-icon-panel-button": "./dist/pd-icon-panel-button.js"
|
|
14
15
|
},
|
|
15
16
|
"files": [
|
|
16
17
|
"dist/",
|