@progressive-development/pd-page 1.0.4 → 1.0.5

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.
Files changed (65) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/pd-footer/PdFooter.d.ts +48 -22
  4. package/dist/pd-footer/PdFooter.d.ts.map +1 -1
  5. package/dist/pd-footer/PdFooter.js +473 -71
  6. package/dist/pd-icon-brand/dist/brand-icon-map.js +88 -0
  7. package/dist/pd-icon-brand/dist/icons/apple-music.js +9 -0
  8. package/dist/pd-icon-brand/dist/icons/bandcamp.js +9 -0
  9. package/dist/pd-icon-brand/dist/icons/beatport.js +9 -0
  10. package/dist/pd-icon-brand/dist/icons/behance.js +9 -0
  11. package/dist/pd-icon-brand/dist/icons/bluesky.js +9 -0
  12. package/dist/pd-icon-brand/dist/icons/deezer.js +9 -0
  13. package/dist/pd-icon-brand/dist/icons/default-brand.js +9 -0
  14. package/dist/pd-icon-brand/dist/icons/discogs.js +9 -0
  15. package/dist/pd-icon-brand/dist/icons/discord.js +9 -0
  16. package/dist/pd-icon-brand/dist/icons/dribbble.js +9 -0
  17. package/dist/pd-icon-brand/dist/icons/facebook.js +9 -0
  18. package/dist/pd-icon-brand/dist/icons/github.js +9 -0
  19. package/dist/pd-icon-brand/dist/icons/instagram.js +9 -0
  20. package/dist/pd-icon-brand/dist/icons/linkedin.js +9 -0
  21. package/dist/pd-icon-brand/dist/icons/mastodon.js +9 -0
  22. package/dist/pd-icon-brand/dist/icons/medium.js +9 -0
  23. package/dist/pd-icon-brand/dist/icons/mixcloud.js +9 -0
  24. package/dist/pd-icon-brand/dist/icons/patreon.js +9 -0
  25. package/dist/pd-icon-brand/dist/icons/pinterest.js +9 -0
  26. package/dist/pd-icon-brand/dist/icons/reddit.js +9 -0
  27. package/dist/pd-icon-brand/dist/icons/snapchat.js +9 -0
  28. package/dist/pd-icon-brand/dist/icons/soundcloud.js +9 -0
  29. package/dist/pd-icon-brand/dist/icons/spotify.js +9 -0
  30. package/dist/pd-icon-brand/dist/icons/stackoverflow.js +9 -0
  31. package/dist/pd-icon-brand/dist/icons/telegram.js +9 -0
  32. package/dist/pd-icon-brand/dist/icons/threads.js +9 -0
  33. package/dist/pd-icon-brand/dist/icons/tiktok.js +9 -0
  34. package/dist/pd-icon-brand/dist/icons/twitch.js +9 -0
  35. package/dist/pd-icon-brand/dist/icons/vimeo.js +9 -0
  36. package/dist/pd-icon-brand/dist/icons/whatsapp.js +9 -0
  37. package/dist/pd-icon-brand/dist/icons/x-twitter.js +9 -0
  38. package/dist/pd-icon-brand/dist/icons/xing.js +9 -0
  39. package/dist/pd-icon-brand/dist/icons/youtube.js +9 -0
  40. package/dist/pd-menu/PdMenu.d.ts +7 -1
  41. package/dist/pd-menu/PdMenu.d.ts.map +1 -1
  42. package/dist/pd-menu/PdMenu.js +40 -3
  43. package/dist/pd-socialmedia/PdSocialmedia.d.ts +1 -0
  44. package/dist/pd-socialmedia/PdSocialmedia.d.ts.map +1 -1
  45. package/dist/pd-socialmedia/PdSocialmedia.js +24 -4
  46. package/dist/pd-socialmedia/pd-socialmedia-model.d.ts +1 -1
  47. package/dist/pd-socialmedia/pd-socialmedia-model.d.ts.map +1 -1
  48. package/dist/pd-socialmedia/pd-socialmedia-model.js +224 -0
  49. package/dist/types.d.ts +8 -0
  50. package/dist/types.d.ts.map +1 -1
  51. package/package.json +4 -4
  52. package/dist/pd-contact-us/pd-contact-us.stories.d.ts +0 -37
  53. package/dist/pd-contact-us/pd-contact-us.stories.d.ts.map +0 -1
  54. package/dist/pd-footer/pd-footer.stories.d.ts +0 -48
  55. package/dist/pd-footer/pd-footer.stories.d.ts.map +0 -1
  56. package/dist/pd-login/pd-login.stories.d.ts +0 -55
  57. package/dist/pd-login/pd-login.stories.d.ts.map +0 -1
  58. package/dist/pd-menu/pd-menu.stories.d.ts +0 -62
  59. package/dist/pd-menu/pd-menu.stories.d.ts.map +0 -1
  60. package/dist/pd-socialmedia/pd-socialmedia.stories.d.ts +0 -53
  61. package/dist/pd-socialmedia/pd-socialmedia.stories.d.ts.map +0 -1
  62. package/dist/pd-toast/pd-toast.stories.d.ts +0 -47
  63. package/dist/pd-toast/pd-toast.stories.d.ts.map +0 -1
  64. package/dist/stories/01_index.stories.d.ts +0 -37
  65. package/dist/stories/01_index.stories.d.ts.map +0 -1
@@ -49,6 +49,7 @@ export declare class PdSocialmedia extends LitElement {
49
49
  private _searchSocialProviders;
50
50
  private _openAddSuggestItem;
51
51
  private _closeAddSuggestedItem;
52
+ private _renderIcon;
52
53
  private _findProvider;
53
54
  private _toUrl;
54
55
  private emitChange;
@@ -1 +1 @@
1
- {"version":3,"file":"PdSocialmedia.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/PdSocialmedia.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAoB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG1E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,6EAA6E;IAE7E,OAAO,UAAS;IAEhB,oCAAoC;IAEpC,SAAS,EAAE,WAAW,EAAE,CAAM;IAE9B,+DAA+D;IAE/D,SAAS,EAAE,cAAc,EAAE,CAAoB;IAE/C,mDAAmD;IAEnD,kBAAkB,UAAS;IAE3B,iDAAiD;IAEjD,kBAAkB,UAAS;IAE3B,cAAc;IAEd,OAAO,CAAC,mBAAmB,CAA+B;IAE1D,cAAc;IAEd,OAAO,CAAC,kBAAkB,CAAuB;IAEjD,cAAc;IAEd,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmC;IAEvD,MAAM,CAAC,MAAM,0BA0IX;IAEF,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOvD,OAAO,CAAC,KAAK,EAAE,WAAW;IAM1B,WAAW,CAAC,KAAK,EAAE,MAAM;IAOhC,IAAI,KAAK,kBAER;IAGD,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,UAAU;IA+CpB,SAAS,CAAC,UAAU;IAwDpB,OAAO,CAAC,aAAa;YA+DP,sBAAsB;IAoBpC,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,sBAAsB,CAG5B;IAGF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,UAAU;CASnB"}
1
+ {"version":3,"file":"PdSocialmedia.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/PdSocialmedia.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAoB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQ1E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,6EAA6E;IAE7E,OAAO,UAAS;IAEhB,oCAAoC;IAEpC,SAAS,EAAE,WAAW,EAAE,CAAM;IAE9B,+DAA+D;IAE/D,SAAS,EAAE,cAAc,EAAE,CAAoB;IAE/C,mDAAmD;IAEnD,kBAAkB,UAAS;IAE3B,iDAAiD;IAEjD,kBAAkB,UAAS;IAE3B,cAAc;IAEd,OAAO,CAAC,mBAAmB,CAA+B;IAE1D,cAAc;IAEd,OAAO,CAAC,kBAAkB,CAAuB;IAEjD,cAAc;IAEd,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmC;IAEvD,MAAM,CAAC,MAAM,0BAuJX;IAEF,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOvD,OAAO,CAAC,KAAK,EAAE,WAAW;IAM1B,WAAW,CAAC,KAAK,EAAE,MAAM;IAOhC,IAAI,KAAK,kBAER;IAGD,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,UAAU;IA+CpB,SAAS,CAAC,UAAU;IAwDpB,OAAO,CAAC,aAAa;YA+DP,sBAAsB;IAoBpC,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,sBAAsB,CAG5B;IAGF,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,UAAU;CASnB"}
@@ -8,6 +8,8 @@ import '@progressive-development/pd-forms/pd-input';
8
8
  import '@progressive-development/pd-icon/pd-icon';
9
9
  import { SOCIAL_PROVIDERS } from './pd-socialmedia-model.js';
10
10
  import { pdIcons } from '@progressive-development/pd-icon';
11
+ import { brandIconMap } from '../pd-icon-brand/dist/brand-icon-map.js';
12
+ import { defaultBrandIcon } from '../pd-icon-brand/dist/icons/default-brand.js';
11
13
 
12
14
  var __defProp = Object.defineProperty;
13
15
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -87,7 +89,7 @@ let PdSocialmedia = class extends LitElement {
87
89
  const title = `${label}: ${href}`;
88
90
  const content = html`
89
91
  <div class="icon-tile" title=${title}>
90
- ${provider?.icon ?? "link"}
92
+ ${this._renderIcon(provider)}
91
93
  ${this.showLabelBelowIcon ? html`<div class="icon-label">${label}</div>` : nothing}
92
94
  </div>
93
95
  `;
@@ -139,7 +141,7 @@ let PdSocialmedia = class extends LitElement {
139
141
  return html`
140
142
  <div class="row">
141
143
  <div class="provider">
142
- ${meta?.icon ?? "link"}<span>${label}</span>
144
+ ${this._renderIcon(meta)}<span>${label}</span>
143
145
  </div>
144
146
  <div class="value">${item.value}</div>
145
147
  <button
@@ -167,7 +169,7 @@ let PdSocialmedia = class extends LitElement {
167
169
  id="scValueId"
168
170
  maxlength="250"
169
171
  span="full"
170
- label="${`${provider.icon} ${provider.label}`}"
172
+ label="${provider.label}"
171
173
  helperTxt="${`Pattern: ${provider.pattern}`}"
172
174
  placeholder="${provider.placeholder || `Eingabe ${provider.inputKind}`}"
173
175
  valueName="providerValue"
@@ -223,7 +225,7 @@ let PdSocialmedia = class extends LitElement {
223
225
  (v) => !includedIds.includes(v.id) && (v.label.toLowerCase().includes(input.toLowerCase()) || v.category.toLowerCase().includes(input.toLowerCase()) || v.aliases?.join()?.toLowerCase().includes(input.toLowerCase()))
224
226
  ).map((e) => ({
225
227
  id: e.id,
226
- name: `${e.icon || ""} ${e.label || "--"}`,
228
+ name: e.label || "--",
227
229
  subInfo: html`<b><em>${e.category || "--"}:</em></b> ${e.aliases?.join(
228
230
  ","
229
231
  ) || e.id}`,
@@ -232,6 +234,11 @@ let PdSocialmedia = class extends LitElement {
232
234
  );
233
235
  }
234
236
  // --- Private helpers ---
237
+ _renderIcon(provider) {
238
+ const svgIcon = provider ? brandIconMap.get(provider.id) : void 0;
239
+ const icon = svgIcon ?? defaultBrandIcon;
240
+ return html`<span class="brand-icon">${icon}</span>`;
241
+ }
235
242
  _findProvider(id) {
236
243
  if (!id) return void 0;
237
244
  return this.providers?.find((p) => p.id === id);
@@ -283,6 +290,19 @@ PdSocialmedia.styles = css`
283
290
  min-width: 2.25rem;
284
291
  }
285
292
 
293
+ .brand-icon {
294
+ display: inline-flex;
295
+ align-items: center;
296
+ justify-content: center;
297
+ width: 1.5em;
298
+ height: 1.5em;
299
+ }
300
+
301
+ .brand-icon svg {
302
+ width: 100%;
303
+ height: 100%;
304
+ }
305
+
286
306
  .icon-tile a,
287
307
  .icon-tile button[role="link"] {
288
308
  display: inline-flex;
@@ -3,7 +3,7 @@ export interface SocialProvider {
3
3
  id: string;
4
4
  label: string;
5
5
  aliases?: string[];
6
- category: "Social" | "Music" | "Streaming" | "DJ/Booking" | "Catalog";
6
+ category: "Social" | "Music" | "Streaming" | "DJ/Booking" | "Catalog" | "Messaging" | "Developer" | "Design" | "Community" | "Blogging" | "Support";
7
7
  icon: string;
8
8
  brandColor?: string;
9
9
  inputKind: ProviderInputKind;
@@ -1 +1 @@
1
- {"version":3,"file":"pd-socialmedia-model.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/pd-socialmedia-model.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEjC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAiP5C,CAAC"}
1
+ {"version":3,"file":"pd-socialmedia-model.d.ts","sourceRoot":"","sources":["../../src/pd-socialmedia/pd-socialmedia-model.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,KAAK,GAAG,IAAI,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EACJ,QAAQ,GACR,OAAO,GACP,WAAW,GACX,YAAY,GACZ,SAAS,GACT,WAAW,GACX,WAAW,GACX,QAAQ,GACR,WAAW,GACX,UAAU,GACV,SAAS,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEjC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAkd5C,CAAC"}
@@ -234,6 +234,230 @@ const SOCIAL_PROVIDERS = [
234
234
  placeholder: "linkedin.com/in/deinname",
235
235
  pattern: /^https?:\/\/(www\.)?linkedin\.com\/.+/i,
236
236
  toUrl: (input) => ensureHttps(trim(input))
237
+ },
238
+ {
239
+ id: "xing",
240
+ label: "Xing",
241
+ aliases: ["xing profil"],
242
+ category: "Social",
243
+ icon: "🔗",
244
+ brandColor: "#006567",
245
+ inputKind: "url",
246
+ placeholder: "xing.com/profile/deinname",
247
+ pattern: /^https?:\/\/(www\.)?xing\.com\/.+/i,
248
+ toUrl: (input) => ensureHttps(trim(input))
249
+ },
250
+ {
251
+ id: "github",
252
+ label: "GitHub",
253
+ aliases: ["gh", "git"],
254
+ category: "Developer",
255
+ icon: "🐙",
256
+ brandColor: "#181717",
257
+ inputKind: "username",
258
+ placeholder: "deinname",
259
+ pattern: /^[A-Za-z0-9-]{1,39}$/,
260
+ normalize: (raw) => trim(raw),
261
+ toUrl: (input) => `https://github.com/${trim(input)}`
262
+ },
263
+ {
264
+ id: "whatsapp",
265
+ label: "WhatsApp",
266
+ aliases: ["wa"],
267
+ category: "Messaging",
268
+ icon: "💬",
269
+ brandColor: "#25D366",
270
+ inputKind: "url",
271
+ placeholder: "wa.me/491234567890 oder Telefonnummer",
272
+ pattern: /^(\+?[0-9]{7,15}|https?:\/\/(wa\.me|api\.whatsapp\.com)\/.+)$/i,
273
+ normalize: (raw) => {
274
+ const s = trim(raw);
275
+ const m = s.match(/wa\.me\/(\+?[0-9]+)/);
276
+ return m ? m[1] : s.replace(/[^0-9+]/g, "");
277
+ },
278
+ toUrl: (input) => {
279
+ const s = trim(input);
280
+ if (/^https?:\/\//i.test(s)) return s;
281
+ return `https://wa.me/${s.replace(/[^0-9]/g, "")}`;
282
+ }
283
+ },
284
+ {
285
+ id: "telegram",
286
+ label: "Telegram",
287
+ aliases: ["tg"],
288
+ category: "Messaging",
289
+ icon: "💬",
290
+ brandColor: "#26A5E4",
291
+ inputKind: "username",
292
+ placeholder: "@deinname oder t.me/deinname",
293
+ pattern: /^[A-Za-z0-9_]{5,32}$/,
294
+ normalize: (raw) => stripAt(trim(raw)).replace(/^https?:\/\/t\.me\//i, ""),
295
+ toUrl: (input) => `https://t.me/${stripAt(trim(input))}`
296
+ },
297
+ {
298
+ id: "stackoverflow",
299
+ label: "Stack Overflow",
300
+ aliases: ["so", "stack overflow"],
301
+ category: "Developer",
302
+ icon: "📋",
303
+ brandColor: "#F58025",
304
+ inputKind: "url",
305
+ placeholder: "stackoverflow.com/users/123456/deinname",
306
+ pattern: /^https?:\/\/(www\.)?stackoverflow\.com\/users\/.+/i,
307
+ toUrl: (input) => ensureHttps(trim(input))
308
+ },
309
+ {
310
+ id: "dribbble",
311
+ label: "Dribbble",
312
+ aliases: ["dribble"],
313
+ category: "Design",
314
+ icon: "🏀",
315
+ brandColor: "#EA4C89",
316
+ inputKind: "username",
317
+ placeholder: "deinname",
318
+ pattern: /^[A-Za-z0-9_-]{1,40}$/,
319
+ normalize: (raw) => trim(raw),
320
+ toUrl: (input) => `https://dribbble.com/${trim(input)}`
321
+ },
322
+ {
323
+ id: "behance",
324
+ label: "Behance",
325
+ aliases: ["be"],
326
+ category: "Design",
327
+ icon: "🎨",
328
+ brandColor: "#1769FF",
329
+ inputKind: "username",
330
+ placeholder: "deinname",
331
+ pattern: /^[A-Za-z0-9_-]{1,40}$/,
332
+ normalize: (raw) => trim(raw),
333
+ toUrl: (input) => `https://www.behance.net/${trim(input)}`
334
+ },
335
+ // --- Additional Social / Community ---
336
+ {
337
+ id: "pinterest",
338
+ label: "Pinterest",
339
+ aliases: ["pin"],
340
+ category: "Social",
341
+ icon: "📌",
342
+ brandColor: "#BD081C",
343
+ inputKind: "username",
344
+ placeholder: "deinname",
345
+ pattern: /^[A-Za-z0-9_-]{3,30}$/,
346
+ normalize: (raw) => trim(raw),
347
+ toUrl: (input) => `https://pinterest.com/${trim(input)}`
348
+ },
349
+ {
350
+ id: "threads",
351
+ label: "Threads",
352
+ aliases: ["meta threads"],
353
+ category: "Social",
354
+ icon: "🧵",
355
+ brandColor: "#000000",
356
+ inputKind: "username",
357
+ placeholder: "@deinname",
358
+ pattern: /^[A-Za-z0-9._]{1,30}$/,
359
+ normalize: (raw) => stripAt(trim(raw)),
360
+ toUrl: (input) => `https://www.threads.net/@${stripAt(trim(input))}`
361
+ },
362
+ {
363
+ id: "bluesky",
364
+ label: "Bluesky",
365
+ aliases: ["bsky"],
366
+ category: "Social",
367
+ icon: "🦋",
368
+ brandColor: "#0085FF",
369
+ inputKind: "username",
370
+ placeholder: "deinname.bsky.social",
371
+ pattern: /^[A-Za-z0-9._-]+(\.[A-Za-z0-9._-]+)*$/,
372
+ normalize: (raw) => trim(raw),
373
+ toUrl: (input) => `https://bsky.app/profile/${trim(input)}`
374
+ },
375
+ {
376
+ id: "snapchat",
377
+ label: "Snapchat",
378
+ aliases: ["snap"],
379
+ category: "Social",
380
+ icon: "👻",
381
+ brandColor: "#FFFC00",
382
+ inputKind: "username",
383
+ placeholder: "deinname",
384
+ pattern: /^[A-Za-z0-9._-]{3,15}$/,
385
+ normalize: (raw) => trim(raw),
386
+ toUrl: (input) => `https://www.snapchat.com/add/${trim(input)}`
387
+ },
388
+ {
389
+ id: "discord",
390
+ label: "Discord",
391
+ aliases: ["dc"],
392
+ category: "Community",
393
+ icon: "💬",
394
+ brandColor: "#5865F2",
395
+ inputKind: "url",
396
+ placeholder: "discord.gg/invite-code",
397
+ pattern: /^https?:\/\/(www\.)?(discord\.(gg|com\/invite))\/.+/i,
398
+ toUrl: (input) => ensureHttps(trim(input))
399
+ },
400
+ {
401
+ id: "reddit",
402
+ label: "Reddit",
403
+ aliases: ["subreddit"],
404
+ category: "Community",
405
+ icon: "🤖",
406
+ brandColor: "#FF4500",
407
+ inputKind: "url",
408
+ placeholder: "reddit.com/r/... oder /user/...",
409
+ pattern: /^https?:\/\/(www\.)?reddit\.com\/.+/i,
410
+ toUrl: (input) => ensureHttps(trim(input))
411
+ },
412
+ {
413
+ id: "vimeo",
414
+ label: "Vimeo",
415
+ aliases: ["vimeo channel"],
416
+ category: "Streaming",
417
+ icon: "🎬",
418
+ brandColor: "#1AB7EA",
419
+ inputKind: "url",
420
+ placeholder: "vimeo.com/deinname",
421
+ pattern: /^https?:\/\/(www\.)?vimeo\.com\/.+/i,
422
+ toUrl: (input) => ensureHttps(trim(input))
423
+ },
424
+ {
425
+ id: "mastodon",
426
+ label: "Mastodon",
427
+ aliases: ["fediverse", "masto"],
428
+ category: "Social",
429
+ icon: "🐘",
430
+ brandColor: "#6364FF",
431
+ inputKind: "url",
432
+ placeholder: "mastodon.social/@deinname",
433
+ pattern: /^https?:\/\/.+\/@.+/i,
434
+ toUrl: (input) => ensureHttps(trim(input))
435
+ },
436
+ {
437
+ id: "medium",
438
+ label: "Medium",
439
+ aliases: ["blog"],
440
+ category: "Blogging",
441
+ icon: "✍️",
442
+ brandColor: "#000000",
443
+ inputKind: "username",
444
+ placeholder: "@deinname",
445
+ pattern: /^@?[A-Za-z0-9._-]{1,40}$/,
446
+ normalize: (raw) => stripAt(trim(raw)),
447
+ toUrl: (input) => `https://medium.com/@${stripAt(trim(input))}`
448
+ },
449
+ {
450
+ id: "patreon",
451
+ label: "Patreon",
452
+ aliases: ["patron"],
453
+ category: "Support",
454
+ icon: "❤️",
455
+ brandColor: "#FF424D",
456
+ inputKind: "username",
457
+ placeholder: "deinname",
458
+ pattern: /^[A-Za-z0-9_-]{1,40}$/,
459
+ normalize: (raw) => trim(raw),
460
+ toUrl: (input) => `https://www.patreon.com/${trim(input)}`
237
461
  }
238
462
  ];
239
463
 
package/dist/types.d.ts CHANGED
@@ -5,6 +5,14 @@ export interface PdFooterLink {
5
5
  key: string;
6
6
  name: string;
7
7
  }
8
+ /**
9
+ * A footer section with a heading and a list of links.
10
+ * Used for hierarchical (2-level) footer navigation columns.
11
+ */
12
+ export interface PdFooterSection {
13
+ heading: string;
14
+ links: PdFooterLink[];
15
+ }
8
16
  /**
9
17
  * Datentyp für den "madeBy"-Block.
10
18
  */
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progressive-development/pd-page",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "Progressive development page helper, teaser, menu, footer.",
5
5
  "author": "PD Progressive Development",
6
6
  "license": "MIT",
@@ -35,10 +35,10 @@
35
35
  "pwa-helpers": "^0.9.1",
36
36
  "tslib": "^2.8.1",
37
37
  "@progressive-development/pd-icon": "1.0.2",
38
- "@progressive-development/pd-contact": "1.0.3",
39
38
  "@progressive-development/pd-shared-styles": "0.3.2",
40
- "@progressive-development/pd-forms": "1.0.2",
41
- "@progressive-development/pd-dialog": "1.0.2"
39
+ "@progressive-development/pd-contact": "1.0.4",
40
+ "@progressive-development/pd-dialog": "1.0.3",
41
+ "@progressive-development/pd-forms": "1.0.3"
42
42
  },
43
43
  "customElements": "custom-elements.json",
44
44
  "keywords": [
@@ -1,37 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/web-components-vite';
2
- import { PdContactData } from '@progressive-development/pd-contact';
3
- /**
4
- * Story arguments interface for pd-contact-us component.
5
- * Maps to the component's public API.
6
- */
7
- interface PdContactUsArgs {
8
- /** Contact data for address display */
9
- contact: PdContactData;
10
- }
11
- /**
12
- * ## pd-contact-us
13
- *
14
- * Contact section with company address card and message form.
15
- *
16
- * ### Features
17
- * - **Address Display**: Shows company contact information via pd-contact card
18
- * - **Contact Form**: Name, email, phone, and message fields with validation
19
- * - **Responsive Layout**: Card and form wrap below each other on narrow screens
20
- * - **Localization**: All labels localized via @lit/localize
21
- * - **Email/Phone Types**: Proper input types for better mobile UX
22
- *
23
- * ### Accessibility
24
- * - Form fields use proper input types (email, tel)
25
- * - Required fields are marked for screen readers
26
- * - Submit button uses native button semantics
27
- */
28
- declare const meta: Meta<PdContactUsArgs>;
29
- export default meta;
30
- type Story = StoryObj<PdContactUsArgs>;
31
- /** Default contact section with company info and message form. Interactive via Controls panel. */
32
- export declare const Default: Story;
33
- /** All contact data configurations at a glance: full, standard, and minimal. */
34
- export declare const AllVariants: Story;
35
- /** CSS Custom Properties — Branded and Redesigned variants. */
36
- export declare const CustomStyling: Story;
37
- //# sourceMappingURL=pd-contact-us.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pd-contact-us.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/pd-contact-us.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,eAAe;IACvB,uCAAuC;IACvC,OAAO,EAAE,aAAa,CAAC;CACxB;AAoCD;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CA8D/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,kGAAkG;AAClG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,gFAAgF;AAChF,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA2D3B,CAAC"}
@@ -1,48 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/web-components-vite';
2
- import { PdFooterLink, PdFooterMadeBy } from '../types.js';
3
- /**
4
- * Story arguments interface for pd-footer component.
5
- * Maps to the component's public API.
6
- */
7
- interface PdFooterArgs {
8
- /** Footer navigation links */
9
- footerLinks: PdFooterLink[];
10
- /** Copyright text */
11
- copyright: string;
12
- /** Version string */
13
- version: string;
14
- /** Developer/agency reference */
15
- madeBy?: PdFooterMadeBy;
16
- }
17
- /**
18
- * ## pd-footer
19
- *
20
- * Application footer with navigation links, copyright info, version display, and developer reference.
21
- *
22
- * ### Features
23
- * - Configurable footer links with click events
24
- * - Copyright text and version string display
25
- * - Developer/agency reference with email (mailto:) or external link
26
- * - Responsive layout with flex-wrap for links
27
- * - Full keyboard accessibility (Tab, Enter, Space on links and madeBy)
28
- *
29
- * ### Accessibility
30
- * - Uses `<nav>` element with `aria-label` for footer navigation landmark
31
- * - Footer links use `role="button"` and `tabindex="0"`
32
- * - Focus-visible styling for keyboard users
33
- * - Made-by link opens in new tab with noopener,noreferrer for security
34
- */
35
- declare const meta: Meta<PdFooterArgs>;
36
- export default meta;
37
- type Story = StoryObj<PdFooterArgs>;
38
- /** Default footer with links, copyright, and version. Interactive via Controls panel. */
39
- export declare const Default: Story;
40
- /** Footer with developer/agency reference — email opens mailto:, link opens in new tab. */
41
- export declare const WithMadeBy: Story;
42
- /** Minimal footer configurations — different content combinations. */
43
- export declare const MinimalConfigurations: Story;
44
- /** Overview of all footer configurations at a glance. */
45
- export declare const AllVariants: Story;
46
- /** CSS Custom Properties -- Branded and Redesigned variants. */
47
- export declare const CustomStyling: Story;
48
- //# sourceMappingURL=pd-footer.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pd-footer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,gBAAgB,CAAC;AAMxB;;;GAGG;AACH,UAAU,YAAY;IACpB,8BAA8B;IAC9B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,qBAAqB;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AA+BD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CA8E5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,yFAAyF;AACzF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,2FAA2F;AAC3F,eAAO,MAAM,UAAU,EAAE,KA0CxB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,EAAE,KAkCnC,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,WAAW,EAAE,KA8CzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAgF3B,CAAC"}
@@ -1,55 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/web-components-vite';
2
- /**
3
- * Story arguments interface for pd-login component.
4
- * Maps to the component's public API.
5
- */
6
- interface PdLoginArgs {
7
- /** Shows loading state on the submit button */
8
- loading: boolean;
9
- /** Error message to display above the form */
10
- errorMessage: string;
11
- /** Success message to display above the form */
12
- successMessage: string;
13
- /** Hide the forgot password link */
14
- hideForgotPassword: boolean;
15
- }
16
- /**
17
- * ## pd-login
18
- *
19
- * Login form component for email/password authentication with a built-in forgot password flow.
20
- *
21
- * ### Features
22
- * - Email and password fields with built-in validation (via pd-form-container)
23
- * - Loading state that disables the submit button and shows a spinner
24
- * - Error and success message display via pd-notice-box
25
- * - Built-in forgot password view with automatic email prefill
26
- * - Enter key submits the form from any input field
27
- * - Localized labels via @lit/localize
28
- *
29
- * ### Views
30
- * - **login**: Default form with email, password, and forgot password link
31
- * - **forgot-password**: Password reset form with email field only
32
- *
33
- * ### Accessibility
34
- * - Uses pd-form-container for proper form semantics and validation
35
- * - Submit button disabled until form is valid (prevents empty submissions)
36
- * - Loading state uses aria-busy on the button
37
- * - Error messages displayed in pd-notice-box for screen reader visibility
38
- */
39
- declare const meta: Meta<PdLoginArgs>;
40
- export default meta;
41
- type Story = StoryObj<PdLoginArgs>;
42
- /** Default login form with standard labels. Interactive via Controls panel. */
43
- export declare const Default: Story;
44
- /** Overview of all login form states — default, loading, error, success, and no forgot password. */
45
- export declare const AllStates: Story;
46
- /** Forgot password view — demonstrates the built-in password reset flow. */
47
- export declare const ForgotPasswordFlow: Story;
48
- /**
49
- * Interactive login with simulated authentication.
50
- * Use test@example.com / password123 for success, anything else for error.
51
- */
52
- export declare const InteractiveDemo: Story;
53
- /** CSS Custom Properties -- Branded and Redesigned variants. */
54
- export declare const CustomStyling: Story;
55
- //# sourceMappingURL=pd-login.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pd-login.stories.d.ts","sourceRoot":"","sources":["../../src/pd-login/pd-login.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAOrE,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,cAAc,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AA8BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAsF3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,+EAA+E;AAC/E,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,oGAAoG;AACpG,eAAO,MAAM,SAAS,EAAE,KAkDvB,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,EAAE,KAwChC,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA+C7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAkE3B,CAAC"}
@@ -1,62 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import { Meta, StoryObj } from '@storybook/web-components-vite';
3
- import { PdMenuItem } from '../types.js';
4
- import { ButtonData } from '@progressive-development/pd-forms';
5
- /**
6
- * Story arguments interface for pd-menu component.
7
- * Maps to the component's public API.
8
- */
9
- interface PdMenuArgs {
10
- /** Main menu items */
11
- menuItems: PdMenuItem[];
12
- /** Top menu items (profile, settings, etc.) */
13
- topMenuItems: PdMenuItem[];
14
- /** Available language options (ButtonData with text and value) */
15
- locales: ButtonData[];
16
- /** Currently selected language (value from ButtonData) */
17
- selectedLocale: string;
18
- /** Disable responsive burger menu */
19
- noBurgerMenu: boolean;
20
- /** Custom logo slot content */
21
- logo?: TemplateResult;
22
- }
23
- export declare const ticomiLogo: TemplateResult<1>;
24
- /**
25
- * ## pd-menu
26
- *
27
- * Responsive application navigation menu with burger menu, language selector, and scroll-to-section support.
28
- *
29
- * ### Features
30
- * - Configurable main menu items with scroll-to-section navigation
31
- * - Top menu bar for secondary actions (profile, settings)
32
- * - Responsive burger menu for mobile devices (collapses below 768px)
33
- * - Built-in language selector via pd-button-select-group
34
- * - Logo slot with click-to-navigate support
35
- * - Active section highlighting based on scroll position
36
- * - Full keyboard accessibility (Tab, Enter, Space, Escape)
37
- *
38
- * ### Accessibility
39
- * - Uses `<nav>` with `aria-label` for navigation landmark
40
- * - Menu items have `role="menuitem"` and `tabindex="0"`
41
- * - Burger menu button has `aria-expanded` and `aria-controls`
42
- * - Escape key closes the burger menu
43
- * - Focus-visible styling for keyboard users
44
- */
45
- declare const meta: Meta<PdMenuArgs>;
46
- export default meta;
47
- type Story = StoryObj<PdMenuArgs>;
48
- /** Default menu with basic navigation items. Interactive via Controls panel. */
49
- export declare const Default: Story;
50
- /** Menu with a custom logo in the slotLogo slot. */
51
- export declare const WithLogo: Story;
52
- /** Menu with logo, top items (profile), and language selector. */
53
- export declare const FullFeatured: Story;
54
- /** Menu with noBurgerMenu — always shows full desktop layout regardless of screen width. */
55
- export declare const WithoutBurger: Story;
56
- /** Compact top-only menu without main navigation — useful for secondary page headers. */
57
- export declare const CompactTopMenu: Story;
58
- /** Overview of different menu configurations at a glance. */
59
- export declare const AllVariants: Story;
60
- /** CSS Custom Properties -- Branded and Redesigned variants. */
61
- export declare const CustomStyling: Story;
62
- //# sourceMappingURL=pd-menu.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"pd-menu.stories.d.ts","sourceRoot":"","sources":["../../src/pd-menu/pd-menu.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,cAAc,CAAC;AAMtB;;;GAGG;AACH,UAAU,UAAU;IAClB,sBAAsB;IACtB,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,+CAA+C;IAC/C,YAAY,EAAE,UAAU,EAAE,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,0DAA0D;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,YAAY,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAMD,eAAO,MAAM,UAAU,mBAiEtB,CAAC;AAiCF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA4E1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAMlC,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAMF,oDAAoD;AACpD,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAMF,kEAAkE;AAClE,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,aAAa,EAAE,KA+B3B,CAAC;AAMF,yFAAyF;AACzF,eAAO,MAAM,cAAc,EAAE,KA6B5B,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA2F3B,CAAC"}
@@ -1,53 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/web-components-vite';
2
- import { SocialProvider } from './pd-socialmedia-model.js';
3
- import { SocialEntry } from '../types.js';
4
- /**
5
- * Story arguments interface for pd-socialmedia component.
6
- * Maps to the component's public API.
7
- */
8
- interface PdSocialmediaArgs {
9
- /** View mode (icons) or edit mode (list with delete) */
10
- summary: boolean;
11
- /** Social media entries */
12
- items: SocialEntry[];
13
- /** Provider metadata definitions */
14
- providers: SocialProvider[];
15
- /** Show label below icon in view mode */
16
- showLabelBelowIcon: boolean;
17
- /** Open links in new tab */
18
- openLinksInNewTab: boolean;
19
- }
20
- /**
21
- * ## pd-socialmedia
22
- *
23
- * Social media profiles display and editor component.
24
- *
25
- * ### Features
26
- * - **View Mode** (`summary`): Displays social icons with optional labels below
27
- * - **Edit Mode**: Suggestion box for adding providers and list with delete for removing
28
- * - **Provider Injection**: Custom provider definitions can be injected via `providers` property
29
- * - **Link Behavior**: Configurable to open in same or new tab
30
- * - **Responsive**: Icons wrap on smaller screens
31
- *
32
- * ### Accessibility
33
- * - View mode renders a `<ul>` list with `aria-label`
34
- * - Icons are clickable links with `aria-label` per provider
35
- * - Edit mode uses `<button>` elements with `aria-label` for delete actions
36
- * - Focus-visible styling on delete buttons
37
- */
38
- declare const meta: Meta<PdSocialmediaArgs>;
39
- export default meta;
40
- type Story = StoryObj<PdSocialmediaArgs>;
41
- /** Default view with social icons. Interactive via Controls panel. */
42
- export declare const Default: Story;
43
- /** All view mode configurations at a glance. */
44
- export declare const AllVariants: Story;
45
- /** Many entries demonstrating wrapping behavior. */
46
- export declare const LongList: Story;
47
- /** Edit mode with suggestion box for adding and delete buttons for removing entries. */
48
- export declare const EditMode: Story;
49
- /** Injecting custom provider definitions alongside the defaults. */
50
- export declare const CustomProviders: Story;
51
- /** CSS Custom Properties — Branded and Redesigned variants. */
52
- export declare const CustomStyling: Story;
53
- //# sourceMappingURL=pd-socialmedia.stories.d.ts.map