@progressive-development/pd-wizard 1.0.3 → 1.0.4

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.js CHANGED
@@ -9,5 +9,5 @@ export { WizardReloadPopup } from './wizard-reload-popup/WizardReloadPopup.js';
9
9
  export { templates as beTemplates } from './locales/be.js';
10
10
  export { templates as deTemplates } from './locales/de.js';
11
11
  export { templates as enTemplates } from './locales/en.js';
12
- export { PdWizard } from './pd-wizard/PdWizard.js';
13
12
  export { PdSteps } from './pd-wizard/pd-steps/PdSteps.js';
13
+ export { PdWizard } from './pd-wizard/PdWizard.js';
@@ -3,7 +3,7 @@ import { property, customElement } from 'lit/decorators.js';
3
3
  import { msg } from '@lit/localize';
4
4
  import '@progressive-development/pd-icon/pd-icon';
5
5
  import { pdIcons } from '@progressive-development/pd-icon';
6
- import '../pd-components/pd-content/dist/pd-notice-box/pd-notice-box.js';
6
+ import '@progressive-development/pd-content/pd-notice-box';
7
7
  import { PdConfirmDialog } from '@progressive-development/pd-dialog';
8
8
  import { formatShortDate, formatToTime } from '../pd-utils/dist/date-helper.js';
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progressive-development/pd-wizard",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Webcomponent pd-wizard following open-wc recommendations",
5
5
  "author": "PD Progressive Development",
6
6
  "license": "MIT",
@@ -34,11 +34,11 @@
34
34
  "lit": "^3.3.1",
35
35
  "@lit/localize": "^0.12.2",
36
36
  "tslib": "^2.8.1",
37
- "@progressive-development/pd-content": "1.0.1",
38
- "@progressive-development/pd-forms": "1.0.1",
39
- "@progressive-development/pd-icon": "1.0.1",
40
- "@progressive-development/pd-dialog": "1.0.1",
41
- "@progressive-development/pd-order": "1.1.1",
37
+ "@progressive-development/pd-content": "1.0.2",
38
+ "@progressive-development/pd-forms": "1.0.2",
39
+ "@progressive-development/pd-dialog": "1.0.2",
40
+ "@progressive-development/pd-order": "1.1.2",
41
+ "@progressive-development/pd-icon": "1.0.2",
42
42
  "@progressive-development/pd-shared-styles": "0.3.2",
43
43
  "@progressive-development/pd-utils": "1.0.0"
44
44
  },
@@ -1,224 +0,0 @@
1
- import { LitElement, css, nothing, html } from 'lit';
2
- import { property } from 'lit/decorators.js';
3
- import { pdIcons } from '@progressive-development/pd-icon';
4
- import '@progressive-development/pd-icon/pd-icon';
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
- const DEFAULT_ICONS = {
16
- info: pdIcons.ICON_INFO_FLD,
17
- note: pdIcons.ICON_INFO_FLD,
18
- success: pdIcons.ICON_CHECKBOX,
19
- warning: pdIcons.ICON_WARNING_FLD,
20
- error: pdIcons.ICON_ERROR_FLD
21
- };
22
- class PdNoticeBox extends LitElement {
23
- constructor() {
24
- super(...arguments);
25
- this.type = "info";
26
- this.variant = "box";
27
- this.title = "";
28
- this.icon = "";
29
- this.hideIcon = false;
30
- }
31
- static {
32
- this.styles = [
33
- css`
34
- :host {
35
- /* Layout */
36
- --_width: var(--pd-notice-box-width, 100%);
37
- --_radius: var(--pd-notice-box-border-radius, var(--pd-radius-md, 8px));
38
- --_padding: var(--pd-notice-box-padding, var(--pd-spacing-sm, 12px));
39
- --_gap: var(--pd-notice-box-gap, var(--pd-spacing-sm, 12px));
40
-
41
- /* Typography */
42
- --_font-size: var(
43
- --pd-notice-box-font-size,
44
- var(--pd-default-font-content-size, 1rem)
45
- );
46
- --_title-font-size: var(
47
- --pd-notice-box-title-font-size,
48
- var(--pd-default-font-input-size, 1.05rem)
49
- );
50
- --_title-font-weight: var(--pd-notice-box-title-font-weight, 600);
51
-
52
- /* Icon */
53
- --_icon-size: var(--pd-notice-box-icon-size, 24px);
54
-
55
- /* Sidebar */
56
- --_sidebar-width: var(--pd-notice-box-sidebar-width, 4px);
57
-
58
- /* Type colors - will be overridden per type */
59
- --_type-col: var(--pd-default-info-col, #6b86ff);
60
- --_type-bg-col: #e8f0ff;
61
- --_type-text-col: var(
62
- --pd-notice-box-text-col,
63
- var(--pd-default-font-content-col, #353738)
64
- );
65
-
66
- display: block;
67
- width: var(--_width);
68
- }
69
-
70
- /* Type-specific color overrides */
71
- :host([type="info"]) {
72
- --_type-col: var(
73
- --pd-notice-box-info-col,
74
- var(--pd-default-info-col, #6b86ff)
75
- );
76
- --_type-bg-col: var(--pd-notice-box-info-bg-col, #e8f0ff);
77
- }
78
-
79
- :host([type="note"]) {
80
- --_type-col: var(
81
- --pd-notice-box-note-col,
82
- var(--pd-default-col, #067394)
83
- );
84
- --_type-bg-col: var(
85
- --pd-notice-box-note-bg-col,
86
- var(--pd-default-lightest-col, #cde2eb)
87
- );
88
- }
89
-
90
- :host([type="success"]) {
91
- --_type-col: var(
92
- --pd-notice-box-success-col,
93
- var(--pd-default-success-col, #348b11)
94
- );
95
- --_type-bg-col: var(
96
- --pd-notice-box-success-bg-col,
97
- var(--pd-default-success-light-col, #f5ffe8)
98
- );
99
- }
100
-
101
- :host([type="warning"]) {
102
- --_type-col: var(
103
- --pd-notice-box-warning-col,
104
- var(--pd-default-warning-col, #ffbf00)
105
- );
106
- --_type-bg-col: var(--pd-notice-box-warning-bg-col, #fff8e0);
107
- }
108
-
109
- :host([type="error"]) {
110
- --_type-col: var(
111
- --pd-notice-box-error-col,
112
- var(--pd-default-error-col, #a1141b)
113
- );
114
- --_type-bg-col: var(
115
- --pd-notice-box-error-bg-col,
116
- var(--pd-default-error-light-col, #ffe8e8)
117
- );
118
- }
119
-
120
- /* Box variant */
121
- .notice-box {
122
- display: flex;
123
- align-items: flex-start;
124
- gap: var(--_gap);
125
- padding: var(--_padding);
126
- border-radius: var(--_radius);
127
- background-color: var(--_type-bg-col);
128
- border: 1px solid var(--_type-col);
129
- font-size: var(--_font-size);
130
- color: var(--_type-text-col);
131
- }
132
-
133
- /* Sidebar variant */
134
- :host([variant="sidebar"]) .notice-box {
135
- background-color: transparent;
136
- border: none;
137
- border-left: var(--_sidebar-width) solid var(--_type-col);
138
- border-radius: 0;
139
- padding-left: var(--_padding);
140
- }
141
-
142
- /* Icon wrapper */
143
- .icon-wrapper {
144
- flex-shrink: 0;
145
- display: flex;
146
- align-items: center;
147
- justify-content: center;
148
- width: var(--_icon-size);
149
- height: var(--_icon-size);
150
- }
151
-
152
- .icon-wrapper pd-icon {
153
- --pd-icon-primary-col: var(--_type-col);
154
- --pd-icon-col-primary-active: var(--_type-col);
155
- width: var(--_icon-size);
156
- height: var(--_icon-size);
157
- }
158
-
159
- /* Content area */
160
- .content {
161
- flex: 1;
162
- min-width: 0;
163
- }
164
-
165
- .title {
166
- margin: 0 0 0.25em 0;
167
- font-size: var(--_title-font-size);
168
- font-weight: var(--_title-font-weight);
169
- font-family: var(--pd-default-font-title-family, inherit);
170
- color: var(--_type-col);
171
- line-height: 1.3;
172
- }
173
-
174
- .body {
175
- line-height: 1.5;
176
- }
177
-
178
- .body ::slotted(*) {
179
- margin: 0;
180
- }
181
-
182
- .body ::slotted(*:not(:last-child)) {
183
- margin-bottom: 0.5em;
184
- }
185
- `
186
- ];
187
- }
188
- render() {
189
- const showIcon = this.variant === "box" && !this.hideIcon;
190
- const iconName = this.icon || DEFAULT_ICONS[this.type];
191
- return html`
192
- <div class="notice-box" role="note" aria-label="${this.type} notice">
193
- ${showIcon ? html`
194
- <div class="icon-wrapper" aria-hidden="true">
195
- <pd-icon icon="${iconName}" class="primary"></pd-icon>
196
- </div>
197
- ` : nothing}
198
- <div class="content">
199
- ${this.title ? html`<h4 class="title">${this.title}</h4>` : nothing}
200
- <div class="body">
201
- <slot></slot>
202
- </div>
203
- </div>
204
- </div>
205
- `;
206
- }
207
- }
208
- __decorateClass([
209
- property({ type: String, reflect: true })
210
- ], PdNoticeBox.prototype, "type");
211
- __decorateClass([
212
- property({ type: String, reflect: true })
213
- ], PdNoticeBox.prototype, "variant");
214
- __decorateClass([
215
- property({ type: String })
216
- ], PdNoticeBox.prototype, "title");
217
- __decorateClass([
218
- property({ type: String })
219
- ], PdNoticeBox.prototype, "icon");
220
- __decorateClass([
221
- property({ type: Boolean })
222
- ], PdNoticeBox.prototype, "hideIcon");
223
-
224
- export { PdNoticeBox };
@@ -1,8 +0,0 @@
1
- import { PdNoticeBox } from './PdNoticeBox.js';
2
-
3
- const tag = "pd-notice-box";
4
- if (!customElements.get(tag)) {
5
- customElements.define(tag, PdNoticeBox);
6
- }
7
-
8
- export { PdNoticeBox };