@prioticket/design-system-web 1.0.0 → 1.0.2
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/COMPONENT-DOCUMENTATION.md +3 -1
- package/README.md +107 -27
- package/component-documentation.json +11 -1
- package/dist/components/pd-dialog.cjs.js +1 -1
- package/dist/components/pd-dialog.es.js +7 -7
- package/dist/components/pd-expandable-card.cjs.js +6 -0
- package/dist/components/pd-expandable-card.es.js +18 -12
- package/dist/components/pd-icon-button.cjs.js +77 -46
- package/dist/components/pd-icon-button.es.js +143 -110
- package/dist/components/pd-segmented-button.cjs.js +2 -2
- package/dist/components/pd-segmented-button.es.js +2 -2
- package/dist/components/pd-segmented-stepper.cjs.js +8 -8
- package/dist/components/pd-segmented-stepper.es.js +96 -64
- package/dist/demo-theming.html +331 -0
- package/dist/theming.cjs.js +1 -0
- package/dist/theming.es.js +66 -0
- package/dist/types/components/pd-icon-button.d.ts +3 -2
- package/dist/types/components/pd-segmented-stepper.d.ts +12 -1
- package/dist/types/theming/index.d.ts +47 -0
- package/dist/types/theming/theme-service.d.ts +20 -0
- package/dist/types/theming/types.d.ts +39 -0
- package/package.json +6 -1
|
@@ -200,6 +200,7 @@ Component description not available
|
|
|
200
200
|
- `size`: 'small' | 'medium' | 'large'
|
|
201
201
|
- `disabled`: any
|
|
202
202
|
- `allowStepNavigation`: any
|
|
203
|
+
- `linear`: any
|
|
203
204
|
- `stepNumber`: any
|
|
204
205
|
- `state`: 'pending' | 'active' | 'completed' | 'disabled'
|
|
205
206
|
- `disabled`: any
|
|
@@ -207,7 +208,8 @@ Component description not available
|
|
|
207
208
|
- `icon`: any
|
|
208
209
|
|
|
209
210
|
#### Events
|
|
210
|
-
- `
|
|
211
|
+
- `step`: change - Fired when the active step changes (consistent with pd-stepper).
|
|
212
|
+
- `stepchange`: Fired when the active step changes (backwards compatibility).
|
|
211
213
|
- `stepcomplete`: Fired when a step is marked as completed.
|
|
212
214
|
|
|
213
215
|
#### Example
|
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@ A comprehensive Web Components library built with **Lit** that provides Material
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
7
|
- 🎨 **Material Design 3** - Built on Google's official Material Web components
|
|
8
|
+
- 🌈 **Dynamic Theming** - Real-time theme switching without page reload
|
|
8
9
|
- 🌐 **Framework Agnostic** - Works with Angular, React, Vue, PHP, or any web technology
|
|
9
10
|
- 📦 **Tree Shakable** - Load only the components you need
|
|
10
11
|
- 🎯 **TypeScript** - Full type safety and excellent developer experience
|
|
@@ -25,24 +26,27 @@ npm install @prioticket/design-system-web
|
|
|
25
26
|
This is the fastest way to use the components on any web page.
|
|
26
27
|
|
|
27
28
|
**Instructions:**
|
|
28
|
-
Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDelivr CDN. Remember to replace `1.0.
|
|
29
|
+
Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDelivr CDN. Remember to replace `1.0.1` with the latest version number.
|
|
29
30
|
|
|
30
31
|
```html
|
|
31
32
|
<!DOCTYPE html>
|
|
32
33
|
<html>
|
|
33
34
|
<head>
|
|
34
35
|
<title>My App</title>
|
|
35
|
-
<!-- 1. Load
|
|
36
|
-
<link rel="stylesheet" href="https://
|
|
36
|
+
<!-- 1. Load Material Icons font for icons -->
|
|
37
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
38
|
+
|
|
39
|
+
<!-- 2. Load the theme CSS from the CDN -->
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
|
|
37
41
|
</head>
|
|
38
42
|
<body>
|
|
39
43
|
<pd-button>Click Me</pd-button>
|
|
40
44
|
|
|
41
|
-
<!--
|
|
45
|
+
<!-- 3. Load the required Lit dependency from a public CDN -->
|
|
42
46
|
<script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
|
|
43
47
|
|
|
44
|
-
<!--
|
|
45
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
48
|
+
<!-- 4. Load the components you need from our CDN -->
|
|
49
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-button.es.js"></script>
|
|
46
50
|
</body>
|
|
47
51
|
</html>
|
|
48
52
|
```
|
|
@@ -50,13 +54,13 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
|
|
|
50
54
|
**CSS Options:**
|
|
51
55
|
```html
|
|
52
56
|
<!-- Option 1: Theme only (recommended - use your existing fonts) -->
|
|
53
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
57
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
|
|
54
58
|
|
|
55
59
|
<!-- Option 2: Theme + Prioticket fonts -->
|
|
56
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
60
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-with-fonts.css">
|
|
57
61
|
|
|
58
62
|
<!-- Option 3: Just Prioticket fonts (if you already have the theme) -->
|
|
59
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
63
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/fonts-only.css">
|
|
60
64
|
```
|
|
61
65
|
|
|
62
66
|
**PHP Example:**
|
|
@@ -65,7 +69,9 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
|
|
|
65
69
|
<html>
|
|
66
70
|
<head>
|
|
67
71
|
<title><?= htmlspecialchars($pageTitle) ?></title>
|
|
68
|
-
|
|
72
|
+
<!-- Material Icons font for icons -->
|
|
73
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
74
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
|
|
69
75
|
</head>
|
|
70
76
|
<body>
|
|
71
77
|
<pd-button variant="filled"><?= htmlspecialchars($buttonText) ?></pd-button>
|
|
@@ -78,11 +84,11 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
|
|
|
78
84
|
<script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
|
|
79
85
|
|
|
80
86
|
<?php if ($showButton): ?>
|
|
81
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
87
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-button.es.js"></script>
|
|
82
88
|
<?php endif; ?>
|
|
83
89
|
|
|
84
90
|
<?php if ($showCard): ?>
|
|
85
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
91
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-card.es.js"></script>
|
|
86
92
|
<?php endif; ?>
|
|
87
93
|
</body>
|
|
88
94
|
</html>
|
|
@@ -103,6 +109,17 @@ This tells the Angular CLI to include the theme styles in your application's glo
|
|
|
103
109
|
]
|
|
104
110
|
```
|
|
105
111
|
|
|
112
|
+
**Step 1.5: Add Material Icons to index.html**
|
|
113
|
+
|
|
114
|
+
Add the Material Icons font to your `src/index.html` file:
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<head>
|
|
118
|
+
<!-- Other head content -->
|
|
119
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
120
|
+
</head>
|
|
121
|
+
```
|
|
122
|
+
|
|
106
123
|
**Step 2: Import Components and Add Schema**
|
|
107
124
|
|
|
108
125
|
In your Angular component, import the components to register them and add `CUSTOM_ELEMENTS_SCHEMA`.
|
|
@@ -142,22 +159,93 @@ import '@prioticket/design-system-web/components/pd-button';
|
|
|
142
159
|
|-----------|-------------|-----------------|
|
|
143
160
|
| pd-button | Material Design buttons | `components/pd-button.es.js` |
|
|
144
161
|
| pd-card | Cards for content grouping | `components/pd-card.es.js` |
|
|
145
|
-
| pd-text-field | Text input fields | `components/pd-text-field.es.js` |
|
|
146
162
|
| pd-checkbox | Checkboxes | `components/pd-checkbox.es.js` |
|
|
147
|
-
| pd-
|
|
148
|
-
| pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
|
|
163
|
+
| pd-chip | Chips for tags/filters | `components/pd-chip.es.js` |
|
|
149
164
|
| pd-dialog | Modal dialogs | `components/pd-dialog.es.js` |
|
|
165
|
+
| pd-expandable-card | Expandable cards with collapsible content | `components/pd-expandable-card.es.js` |
|
|
150
166
|
| pd-fab | Floating action buttons | `components/pd-fab.es.js` |
|
|
151
|
-
| pd-progress | Progress indicators | `components/pd-progress.es.js` |
|
|
152
|
-
| pd-menu | Dropdown menus | `components/pd-menu.es.js` |
|
|
153
|
-
| pd-chip | Chips for tags/filters | `components/pd-chip.es.js` |
|
|
154
|
-
| pd-list | Lists with items | `components/pd-list.es.js` |
|
|
155
167
|
| pd-icon | Material Design icons | `components/pd-icon.es.js` |
|
|
156
168
|
| pd-icon-button | Icon buttons | `components/pd-icon-button.es.js` |
|
|
169
|
+
| pd-list | Lists with items | `components/pd-list.es.js` |
|
|
170
|
+
| pd-menu | Dropdown menus | `components/pd-menu.es.js` |
|
|
171
|
+
| pd-menu-item | Individual menu items | `components/pd-menu-item.es.js` |
|
|
172
|
+
| pd-progress | Progress indicators | `components/pd-progress.es.js` |
|
|
157
173
|
| pd-radio | Radio buttons | `components/pd-radio.es.js` |
|
|
174
|
+
| pd-segmented-button | Segmented button controls | `components/pd-segmented-button.es.js` |
|
|
175
|
+
| pd-segmented-stepper | Segmented stepper navigation | `components/pd-segmented-stepper.es.js` |
|
|
158
176
|
| pd-select | Select dropdowns | `components/pd-select.es.js` |
|
|
159
177
|
| pd-slider | Range sliders | `components/pd-slider.es.js` |
|
|
160
178
|
| pd-stepper | Step indicators | `components/pd-stepper.es.js` |
|
|
179
|
+
| pd-switch | Toggle switches | `components/pd-switch.es.js` |
|
|
180
|
+
| pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
|
|
181
|
+
| pd-text-field | Text input fields | `components/pd-text-field.es.js` |
|
|
182
|
+
|
|
183
|
+
## Dynamic Theming
|
|
184
|
+
|
|
185
|
+
The design system supports real-time theme switching without page reload. Apply custom themes dynamically to match your brand or user preferences.
|
|
186
|
+
|
|
187
|
+
### Basic Usage
|
|
188
|
+
|
|
189
|
+
```javascript
|
|
190
|
+
// Import the theming system
|
|
191
|
+
import { initialize } from '@prioticket/design-system-web/theming';
|
|
192
|
+
|
|
193
|
+
// Apply a custom theme
|
|
194
|
+
await initialize({
|
|
195
|
+
theme: {
|
|
196
|
+
colorPrimary: '#ff6600',
|
|
197
|
+
colorOnPrimary: '#ffffff',
|
|
198
|
+
colorSurface: '#fff8f5',
|
|
199
|
+
shapeCornerSmall: '8px'
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### CDN Usage
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<script type="module">
|
|
208
|
+
import { initialize } from 'https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@latest/dist/theming.es.js';
|
|
209
|
+
|
|
210
|
+
// Apply orange theme
|
|
211
|
+
await initialize({
|
|
212
|
+
theme: {
|
|
213
|
+
colorPrimary: '#ff6600',
|
|
214
|
+
colorPrimaryContainer: '#fff3e8',
|
|
215
|
+
shapeCornerMedium: '12px'
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
</script>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Supported Theme Tokens
|
|
222
|
+
|
|
223
|
+
- **Colors**: `colorPrimary`, `colorOnPrimary`, `colorPrimaryContainer`, `colorSecondary`, `colorSurface`, `colorOnSurface`, `colorBackground`, `colorError`
|
|
224
|
+
- **Shapes**: `shapeCornerSmall`, `shapeCornerMedium`, `shapeCornerLarge`
|
|
225
|
+
|
|
226
|
+
### Framework Examples
|
|
227
|
+
|
|
228
|
+
**React:**
|
|
229
|
+
```jsx
|
|
230
|
+
useEffect(() => {
|
|
231
|
+
initialize({
|
|
232
|
+
theme: { colorPrimary: '#4caf50' }
|
|
233
|
+
});
|
|
234
|
+
}, []);
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
**Angular:**
|
|
238
|
+
```typescript
|
|
239
|
+
ngOnInit() {
|
|
240
|
+
initialize({
|
|
241
|
+
theme: { colorPrimary: '#2196f3' }
|
|
242
|
+
});
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### Live Demo
|
|
247
|
+
|
|
248
|
+
Run `npm run dev` and visit `/demo-theming.html` to see real-time theme switching in action.
|
|
161
249
|
|
|
162
250
|
## Customizing Fonts
|
|
163
251
|
|
|
@@ -219,11 +307,3 @@ The source code for this library is proprietary and maintained in a private repo
|
|
|
219
307
|
## Support
|
|
220
308
|
|
|
221
309
|
For questions or bug reports, please contact the Prioticket development team internally.
|
|
222
|
-
|
|
223
|
-
## License
|
|
224
|
-
|
|
225
|
-
MIT License - see [LICENSE](LICENSE) file for details.
|
|
226
|
-
|
|
227
|
-
---
|
|
228
|
-
|
|
229
|
-
Built with ❤️ by the Prioticket Team
|
|
@@ -521,6 +521,12 @@
|
|
|
521
521
|
"attribute": "allowstepnavigation",
|
|
522
522
|
"description": "Property: allowStepNavigation"
|
|
523
523
|
},
|
|
524
|
+
{
|
|
525
|
+
"name": "linear",
|
|
526
|
+
"type": "any",
|
|
527
|
+
"attribute": "linear",
|
|
528
|
+
"description": "Property: linear"
|
|
529
|
+
},
|
|
524
530
|
{
|
|
525
531
|
"name": "stepNumber",
|
|
526
532
|
"type": "any",
|
|
@@ -553,9 +559,13 @@
|
|
|
553
559
|
}
|
|
554
560
|
],
|
|
555
561
|
"events": [
|
|
562
|
+
{
|
|
563
|
+
"name": "step",
|
|
564
|
+
"description": "change - Fired when the active step changes (consistent with pd-stepper)."
|
|
565
|
+
},
|
|
556
566
|
{
|
|
557
567
|
"name": "stepchange",
|
|
558
|
-
"description": "Fired when the active step changes."
|
|
568
|
+
"description": "Fired when the active step changes (backwards compatibility)."
|
|
559
569
|
},
|
|
560
570
|
{
|
|
561
571
|
"name": "stepcomplete",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),e=require("lit/decorators.js");require("@material/web/dialog/dialog.js");require("@material/web/button/text-button.js");require("@material/web/button/filled-button.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(n,a,l,s)=>{for(var i=s>1?void 0:s?m(a,l):a,r=n.length-1,d;r>=0;r--)(d=n[r])&&(i=(s?d(a,l,i):d(i))||i);return s&&i&&c(a,l,i),i};exports.PdDialog=class extends t.LitElement{constructor(){super(...arguments),this.open=!1,this.size="medium",this.variant="custom",this.headline="",this.primaryAction="",this.secondaryAction="",this.closableByBackdrop=!0,this.showCloseButton=!1}openDialog(){this.open=!0,this.dialogElement?.show?.()}closeDialog(){this.open=!1,this.dialogElement?.close?.()}toggle(){this.open?this.closeDialog():this.openDialog()}handleDialogOpen(){this.open=!0,this.dispatchEvent(new CustomEvent("open",{detail:{dialog:this},bubbles:!0}))}handleDialogClose(){this.open=!1,this.dispatchEvent(new CustomEvent("closed",{detail:{dialog:this},bubbles:!0}))}handlePrimaryAction(){this.dispatchEvent(new CustomEvent("primary-action",{detail:{dialog:this},bubbles:!0}))}handleSecondaryAction(){this.dispatchEvent(new CustomEvent("secondary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}render(){return t.html`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),e=require("lit/decorators.js");require("@material/web/dialog/dialog.js");require("@material/web/button/text-button.js");require("@material/web/button/filled-button.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(n,a,l,s)=>{for(var i=s>1?void 0:s?m(a,l):a,r=n.length-1,d;r>=0;r--)(d=n[r])&&(i=(s?d(a,l,i):d(i))||i);return s&&i&&c(a,l,i),i};exports.PdDialog=class extends t.LitElement{constructor(){super(...arguments),this.open=!1,this.size="medium",this.variant="custom",this.headline="",this.primaryAction="",this.secondaryAction="",this.closableByBackdrop=!0,this.showCloseButton=!1}openDialog(){this.open=!0,this.dialogElement?.show?.()}closeDialog(){this.open=!1,this.dialogElement?.close?.()}toggle(){this.open?this.closeDialog():this.openDialog()}handleDialogOpen(){this.open=!0,this.dispatchEvent(new CustomEvent("open",{detail:{dialog:this},bubbles:!0}))}handleDialogClose(){this.open=!1,this.dispatchEvent(new CustomEvent("closed",{detail:{dialog:this},bubbles:!0}))}handlePrimaryAction(){this.dispatchEvent(new CustomEvent("primary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}handleSecondaryAction(){this.dispatchEvent(new CustomEvent("secondary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}render(){return t.html`
|
|
2
2
|
<md-dialog
|
|
3
3
|
?open=${this.open}
|
|
4
4
|
?no-focus-trap=${!this.closableByBackdrop}
|
|
@@ -4,10 +4,10 @@ import "@material/web/dialog/dialog.js";
|
|
|
4
4
|
import "@material/web/button/text-button.js";
|
|
5
5
|
import "@material/web/button/filled-button.js";
|
|
6
6
|
import "@material/web/icon/icon.js";
|
|
7
|
-
var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (
|
|
8
|
-
for (var a = l > 1 ? void 0 : l ? u(
|
|
9
|
-
(c =
|
|
10
|
-
return l && a && g(
|
|
7
|
+
var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (s, n, d, l) => {
|
|
8
|
+
for (var a = l > 1 ? void 0 : l ? u(n, d) : n, r = s.length - 1, c; r >= 0; r--)
|
|
9
|
+
(c = s[r]) && (a = (l ? c(n, d, a) : c(a)) || a);
|
|
10
|
+
return l && a && g(n, d, a), a;
|
|
11
11
|
};
|
|
12
12
|
let t = class extends p {
|
|
13
13
|
constructor() {
|
|
@@ -41,7 +41,7 @@ let t = class extends p {
|
|
|
41
41
|
this.dispatchEvent(new CustomEvent("primary-action", {
|
|
42
42
|
detail: { dialog: this },
|
|
43
43
|
bubbles: !0
|
|
44
|
-
}));
|
|
44
|
+
})), this.closeDialog();
|
|
45
45
|
}
|
|
46
46
|
handleSecondaryAction() {
|
|
47
47
|
this.dispatchEvent(new CustomEvent("secondary-action", {
|
|
@@ -56,8 +56,8 @@ let t = class extends p {
|
|
|
56
56
|
?no-focus-trap=${!this.closableByBackdrop}
|
|
57
57
|
@open=${this.handleDialogOpen}
|
|
58
58
|
@closed=${this.handleDialogClose}
|
|
59
|
-
@cancel=${(
|
|
60
|
-
this.closableByBackdrop ||
|
|
59
|
+
@cancel=${(s) => {
|
|
60
|
+
this.closableByBackdrop || s.preventDefault();
|
|
61
61
|
}}
|
|
62
62
|
>
|
|
63
63
|
${this.headline || this.showCloseButton ? i`
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),t=require("lit/decorators.js");require("@material/web/icon/icon.js");require("@material/web/iconbutton/icon-button.js");var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(o,e,n,s)=>{for(var a=s>1?void 0:s?p(e,n):e,r=o.length-1,i;r>=0;r--)(i=o[r])&&(a=(s?i(e,n,a):i(a))||a);return s&&a&&c(e,n,a),a};exports.PdExpandableCard=class extends l.LitElement{constructor(){super(...arguments),this.variant="elevated",this.expanded=!1,this.expandIcon="keyboard_arrow_down",this.collapseIcon="keyboard_arrow_up",this.headerClickable=!1,this._expanded=!1}connectedCallback(){super.connectedCallback(),this._expanded=this.expanded}toggle(){this._expanded=!this._expanded,this._dispatchExpandEvent()}expand(){this._expanded||(this._expanded=!0,this._dispatchExpandEvent())}collapse(){this._expanded&&(this._expanded=!1,this._dispatchExpandEvent())}_dispatchExpandEvent(){const e=this._expanded?"expand":"collapse";this.dispatchEvent(new CustomEvent(e,{detail:{expanded:this._expanded},bubbles:!0,composed:!0}))}_handleToggle(){this.toggle()}_handleHeaderClick(e){this.headerClickable&&(e.target.closest("md-icon-button")||this.toggle())}render(){const e=`card ${this.variant}`;return l.html`
|
|
2
2
|
<div class="${e}">
|
|
3
|
+
|
|
3
4
|
<div
|
|
4
5
|
class="header ${this.headerClickable?"clickable":""}"
|
|
5
6
|
@click=${this._handleHeaderClick}
|
|
@@ -26,6 +27,7 @@
|
|
|
26
27
|
:host {
|
|
27
28
|
display: block;
|
|
28
29
|
font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
30
|
+
font-weight: var(--md-sys-typescale-body-large-weight, 400);
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
.card {
|
|
@@ -77,6 +79,10 @@
|
|
|
77
79
|
gap: var(--md-sys-spacing-300, 12px);
|
|
78
80
|
}
|
|
79
81
|
|
|
82
|
+
::slotted(*) {
|
|
83
|
+
font-family: "Proxima Nova", Arial, sans-serif !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
80
86
|
/* Expand button */
|
|
81
87
|
.expand-button {
|
|
82
88
|
flex-shrink: 0;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as c, LitElement as p, html as m } from "lit";
|
|
2
|
+
import { property as n, state as x, customElement as h } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
4
|
import "@material/web/iconbutton/icon-button.js";
|
|
5
|
-
var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (a,
|
|
6
|
-
for (var t = d > 1 ? void 0 : d ? f(
|
|
7
|
-
(
|
|
8
|
-
return d && t && v(
|
|
5
|
+
var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (a, o, i, d) => {
|
|
6
|
+
for (var t = d > 1 ? void 0 : d ? f(o, i) : o, r = a.length - 1, l; r >= 0; r--)
|
|
7
|
+
(l = a[r]) && (t = (d ? l(o, i, t) : l(t)) || t);
|
|
8
|
+
return d && t && v(o, i, t), t;
|
|
9
9
|
};
|
|
10
10
|
let e = class extends p {
|
|
11
11
|
constructor() {
|
|
@@ -44,6 +44,7 @@ let e = class extends p {
|
|
|
44
44
|
const a = `card ${this.variant}`;
|
|
45
45
|
return m`
|
|
46
46
|
<div class="${a}">
|
|
47
|
+
|
|
47
48
|
<div
|
|
48
49
|
class="header ${this.headerClickable ? "clickable" : ""}"
|
|
49
50
|
@click=${this._handleHeaderClick}
|
|
@@ -69,10 +70,11 @@ let e = class extends p {
|
|
|
69
70
|
`;
|
|
70
71
|
}
|
|
71
72
|
};
|
|
72
|
-
e.styles =
|
|
73
|
+
e.styles = c`
|
|
73
74
|
:host {
|
|
74
75
|
display: block;
|
|
75
76
|
font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
77
|
+
font-weight: var(--md-sys-typescale-body-large-weight, 400);
|
|
76
78
|
}
|
|
77
79
|
|
|
78
80
|
.card {
|
|
@@ -124,6 +126,10 @@ e.styles = l`
|
|
|
124
126
|
gap: var(--md-sys-spacing-300, 12px);
|
|
125
127
|
}
|
|
126
128
|
|
|
129
|
+
::slotted(*) {
|
|
130
|
+
font-family: "Proxima Nova", Arial, sans-serif !important;
|
|
131
|
+
}
|
|
132
|
+
|
|
127
133
|
/* Expand button */
|
|
128
134
|
.expand-button {
|
|
129
135
|
flex-shrink: 0;
|
|
@@ -180,19 +186,19 @@ e.styles = l`
|
|
|
180
186
|
}
|
|
181
187
|
`;
|
|
182
188
|
s([
|
|
183
|
-
|
|
189
|
+
n({ type: String })
|
|
184
190
|
], e.prototype, "variant", 2);
|
|
185
191
|
s([
|
|
186
|
-
|
|
192
|
+
n({ type: Boolean })
|
|
187
193
|
], e.prototype, "expanded", 2);
|
|
188
194
|
s([
|
|
189
|
-
|
|
195
|
+
n({ type: String, attribute: "expand-icon" })
|
|
190
196
|
], e.prototype, "expandIcon", 2);
|
|
191
197
|
s([
|
|
192
|
-
|
|
198
|
+
n({ type: String, attribute: "collapse-icon" })
|
|
193
199
|
], e.prototype, "collapseIcon", 2);
|
|
194
200
|
s([
|
|
195
|
-
|
|
201
|
+
n({ type: Boolean, attribute: "header-clickable" })
|
|
196
202
|
], e.prototype, "headerClickable", 2);
|
|
197
203
|
s([
|
|
198
204
|
x()
|
|
@@ -1,68 +1,56 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("lit"),n=require("lit/decorators.js");require("@material/web/iconbutton/icon-button.js");require("@material/web/iconbutton/filled-icon-button.js");require("@material/web/iconbutton/filled-tonal-icon-button.js");require("@material/web/iconbutton/outlined-icon-button.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(s,l,r,c)=>{for(var t=c>1?void 0:c?u(l,r):l,o=s.length-1,a;o>=0;o--)(a=s[o])&&(t=(c?a(l,r,t):a(t))||t);return c&&t&&d(l,r,t),t};exports.PdIconButton=class extends e.LitElement{constructor(){super(...arguments),this.variant="standard",this.icon="",this.selectedIcon="",this.disabled=!1,this.toggle=!1,this.selected=!1,this.href="",this.target="",this.ariaLabel="",this.ariaLabelSelected="",this._internalSelected=!1}connectedCallback(){super.connectedCallback(),this._internalSelected=this.selected}get isSelected(){return this.toggle?this._internalSelected:this.selected}getIconButtonTemplate(){const l=this.isSelected,r=l&&this.selectedIcon?this.selectedIcon:this.icon,c=l?"icon-selected":"icon-unselected",t=r?e.html`<md-icon class="${c}">${r}</md-icon>`:e.html`<slot></slot>`,o={disabled:this.disabled,toggle:this.toggle,selected:l,href:this.href||e.nothing,target:this.target||e.nothing,"aria-label":this.ariaLabel||e.nothing,"aria-label-selected":this.ariaLabelSelected||e.nothing};switch(this.variant){case"filled":return e.html`
|
|
2
2
|
<md-filled-icon-button
|
|
3
|
-
?disabled=${
|
|
4
|
-
?toggle=${
|
|
5
|
-
?selected=${
|
|
6
|
-
.href=${
|
|
7
|
-
.target=${
|
|
8
|
-
aria-label=${
|
|
9
|
-
aria-label-selected=${
|
|
10
|
-
@input=${this._handleInput}
|
|
11
|
-
@change=${this._handleChange}
|
|
3
|
+
?disabled=${o.disabled}
|
|
4
|
+
?toggle=${o.toggle}
|
|
5
|
+
?selected=${o.selected}
|
|
6
|
+
.href=${o.href}
|
|
7
|
+
.target=${o.target}
|
|
8
|
+
aria-label=${o["aria-label"]}
|
|
9
|
+
aria-label-selected=${o["aria-label-selected"]}
|
|
12
10
|
@click=${this._handleClick}
|
|
13
11
|
>
|
|
14
12
|
${t}
|
|
15
|
-
${o}
|
|
16
13
|
</md-filled-icon-button>
|
|
17
|
-
`;case"tonal":return
|
|
14
|
+
`;case"tonal":return e.html`
|
|
18
15
|
<md-filled-tonal-icon-button
|
|
19
|
-
?disabled=${
|
|
20
|
-
?toggle=${
|
|
21
|
-
?selected=${
|
|
22
|
-
.href=${
|
|
23
|
-
.target=${
|
|
24
|
-
aria-label=${
|
|
25
|
-
aria-label-selected=${
|
|
26
|
-
@input=${this._handleInput}
|
|
27
|
-
@change=${this._handleChange}
|
|
16
|
+
?disabled=${o.disabled}
|
|
17
|
+
?toggle=${o.toggle}
|
|
18
|
+
?selected=${o.selected}
|
|
19
|
+
.href=${o.href}
|
|
20
|
+
.target=${o.target}
|
|
21
|
+
aria-label=${o["aria-label"]}
|
|
22
|
+
aria-label-selected=${o["aria-label-selected"]}
|
|
28
23
|
@click=${this._handleClick}
|
|
29
24
|
>
|
|
30
25
|
${t}
|
|
31
|
-
${o}
|
|
32
26
|
</md-filled-tonal-icon-button>
|
|
33
|
-
`;case"outlined":return
|
|
27
|
+
`;case"outlined":return e.html`
|
|
34
28
|
<md-outlined-icon-button
|
|
35
|
-
?disabled=${
|
|
36
|
-
?toggle=${
|
|
37
|
-
?selected=${
|
|
38
|
-
.href=${
|
|
39
|
-
.target=${
|
|
40
|
-
aria-label=${
|
|
41
|
-
aria-label-selected=${
|
|
42
|
-
@input=${this._handleInput}
|
|
43
|
-
@change=${this._handleChange}
|
|
29
|
+
?disabled=${o.disabled}
|
|
30
|
+
?toggle=${o.toggle}
|
|
31
|
+
?selected=${o.selected}
|
|
32
|
+
.href=${o.href}
|
|
33
|
+
.target=${o.target}
|
|
34
|
+
aria-label=${o["aria-label"]}
|
|
35
|
+
aria-label-selected=${o["aria-label-selected"]}
|
|
44
36
|
@click=${this._handleClick}
|
|
45
37
|
>
|
|
46
38
|
${t}
|
|
47
|
-
${o}
|
|
48
39
|
</md-outlined-icon-button>
|
|
49
|
-
`;default:return
|
|
40
|
+
`;default:return e.html`
|
|
50
41
|
<md-icon-button
|
|
51
|
-
?disabled=${
|
|
52
|
-
?toggle=${
|
|
53
|
-
?selected=${
|
|
54
|
-
.href=${
|
|
55
|
-
.target=${
|
|
56
|
-
aria-label=${
|
|
57
|
-
aria-label-selected=${
|
|
58
|
-
@input=${this._handleInput}
|
|
59
|
-
@change=${this._handleChange}
|
|
42
|
+
?disabled=${o.disabled}
|
|
43
|
+
?toggle=${o.toggle}
|
|
44
|
+
?selected=${o.selected}
|
|
45
|
+
.href=${o.href}
|
|
46
|
+
.target=${o.target}
|
|
47
|
+
aria-label=${o["aria-label"]}
|
|
48
|
+
aria-label-selected=${o["aria-label-selected"]}
|
|
60
49
|
@click=${this._handleClick}
|
|
61
50
|
>
|
|
62
51
|
${t}
|
|
63
|
-
${o}
|
|
64
52
|
</md-icon-button>
|
|
65
|
-
`}}render(){return this.getIconButtonTemplate()}_handleClick(
|
|
53
|
+
`}}render(){return this.getIconButtonTemplate()}_handleClick(l){if(this.disabled)return;this.toggle&&(this._internalSelected=!this._internalSelected);const r=this.isSelected,c=l.target;c&&c.blur(),this.dispatchEvent(new CustomEvent("pd-icon-button-click",{detail:{variant:this.variant,selected:r,toggle:this.toggle,icon:this.icon,selectedIcon:this.selectedIcon},bubbles:!0,composed:!0})),this.toggle&&this.dispatchEvent(new CustomEvent("change",{detail:{selected:r,variant:this.variant},bubbles:!0,composed:!0}))}};exports.PdIconButton.styles=e.css`
|
|
66
54
|
:host {
|
|
67
55
|
display: inline-block;
|
|
68
56
|
--md-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
|
|
@@ -71,6 +59,17 @@
|
|
|
71
59
|
--md-outlined-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
|
|
72
60
|
}
|
|
73
61
|
|
|
62
|
+
/* Icon fill states - Industry standard approach */
|
|
63
|
+
.icon-unselected {
|
|
64
|
+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
65
|
+
transition: font-variation-settings var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.icon-selected {
|
|
69
|
+
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
70
|
+
transition: font-variation-settings var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
|
|
71
|
+
}
|
|
72
|
+
|
|
74
73
|
:host([variant="standard"]) {
|
|
75
74
|
--md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
|
|
76
75
|
--md-icon-button-hover-icon-color: var(--md-sys-color-on-surface-variant-hover);
|
|
@@ -128,6 +127,7 @@
|
|
|
128
127
|
--md-outlined-icon-button-container-shape: var(--md-sys-shape-corner-full);
|
|
129
128
|
}
|
|
130
129
|
|
|
130
|
+
/* Enhanced visual feedback */
|
|
131
131
|
md-icon-button:hover,
|
|
132
132
|
md-filled-icon-button:hover,
|
|
133
133
|
md-filled-tonal-icon-button:hover,
|
|
@@ -142,6 +142,31 @@
|
|
|
142
142
|
transform: scale(0.95);
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
+
/* Remove focus after click to prevent gray state */
|
|
146
|
+
md-icon-button,
|
|
147
|
+
md-filled-icon-button,
|
|
148
|
+
md-filled-tonal-icon-button,
|
|
149
|
+
md-outlined-icon-button {
|
|
150
|
+
outline: none;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
md-icon-button:focus,
|
|
154
|
+
md-filled-icon-button:focus,
|
|
155
|
+
md-filled-tonal-icon-button:focus,
|
|
156
|
+
md-outlined-icon-button:focus {
|
|
157
|
+
outline: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Only show focus outline for keyboard navigation */
|
|
161
|
+
md-icon-button:focus-visible,
|
|
162
|
+
md-filled-icon-button:focus-visible,
|
|
163
|
+
md-filled-tonal-icon-button:focus-visible,
|
|
164
|
+
md-outlined-icon-button:focus-visible {
|
|
165
|
+
outline: 2px solid var(--md-sys-color-primary);
|
|
166
|
+
outline-offset: 2px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Disabled state */
|
|
145
170
|
:host([disabled]) md-icon-button,
|
|
146
171
|
:host([disabled]) md-filled-icon-button,
|
|
147
172
|
:host([disabled]) md-filled-tonal-icon-button,
|
|
@@ -156,4 +181,10 @@
|
|
|
156
181
|
:host([disabled]) md-outlined-icon-button:hover {
|
|
157
182
|
transform: none;
|
|
158
183
|
}
|
|
159
|
-
|
|
184
|
+
|
|
185
|
+
/* Icon accessibility improvements */
|
|
186
|
+
md-icon {
|
|
187
|
+
user-select: none;
|
|
188
|
+
pointer-events: none;
|
|
189
|
+
}
|
|
190
|
+
`;i([n.property({type:String})],exports.PdIconButton.prototype,"variant",2);i([n.property({type:String})],exports.PdIconButton.prototype,"icon",2);i([n.property({type:String,attribute:"selected-icon"})],exports.PdIconButton.prototype,"selectedIcon",2);i([n.property({type:Boolean})],exports.PdIconButton.prototype,"disabled",2);i([n.property({type:Boolean})],exports.PdIconButton.prototype,"toggle",2);i([n.property({type:Boolean})],exports.PdIconButton.prototype,"selected",2);i([n.property({type:String})],exports.PdIconButton.prototype,"href",2);i([n.property({type:String})],exports.PdIconButton.prototype,"target",2);i([n.property({type:String,attribute:"aria-label"})],exports.PdIconButton.prototype,"ariaLabel",2);i([n.property({type:String,attribute:"aria-label-selected"})],exports.PdIconButton.prototype,"ariaLabelSelected",2);i([n.state()],exports.PdIconButton.prototype,"_internalSelected",2);exports.PdIconButton=i([n.customElement("pd-icon-button")],exports.PdIconButton);
|