@progressive-development/pd-contact 0.9.1 → 1.0.0

package/dist/pd-contact/pd-contact-edit.stories.d.ts

@@ -1,18 +1,53 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ inputFields, requiredFields, withPropertyDate, contact }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '../types.js';
+/**
+ * Story arguments interface for pd-contact (edit mode).
+ * Maps to the component's public API when used as an editable form.
+ */
+interface PdContactEditArgs {
+    /** List of input fields to display (empty = all fields) */
+    inputFields: string[];
+    /** List of required field keys for validation */
+    requiredFields: string[];
+    /** Show property date selection field */
+    withPropertyDate: boolean;
+    /** Pre-populated contact data */
+    contact?: PdContactData;
+}
+/**
+ * ## pd-contact (Edit Mode)
+ *
+ * Contact form component for creating and editing contact information with
+ * built-in validation support.
+ *
+ * ### Features
+ * - Private/Business contact type toggle via radio group
+ * - Configurable visible fields via `inputFields` array
+ * - Required field validation via `requiredFields` array
+ * - Optional property/building year selection
+ * - Auto-complete hints for browser autofill
+ * - Integration with pd-form-container for validation lifecycle
+ *
+ * ### Form Methods
+ * - `triggerValidate()` — triggers validation and returns Promise<boolean>
+ * - `getValues()` — returns current form data as PdContactData
+ * - `valid` — getter for current validation state
+ */
+declare const meta: Meta<PdContactEditArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const ContactForm: Story;
-export declare const ContactFormRequiredFields: Story;
-export declare const ContactFormRequiredFields2: Story;
-export declare const ContactFormPropertyDate: Story;
-export declare const ContactFormWithInputFields1: Story;
-export declare const ContactFormWithInputFields2: Story;
-export declare const ContactPreparedForm: Story;
-export declare const ContactPreparedFormCompany: Story;
-export declare const ContactPreparedFormPropertyDate: Story;
+type Story = StoryObj<PdContactEditArgs>;
+/** Default empty contact form with all fields visible. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Contact form pre-filled with private person data (first name, last name, address). */
+export declare const PrepopulatedPrivate: Story;
+/** Contact form pre-filled with company data (company name, VAT number). */
+export declare const PrepopulatedCompany: Story;
+/** Form with all fields marked as required — shows validation indicators. */
+export declare const AllFieldsRequired: Story;
+/** Demonstrates showing only a subset of fields using the inputFields array. */
+export declare const CustomFieldSelection: Story;
+/** Form with the optional property/building year selection field enabled. */
+export declare const WithPropertyDate: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-contact-edit.stories.d.ts.map

package/dist/pd-contact/pd-contact-edit.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-edit.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAehE,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,IAAI;;;;CAmCM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA2BtB,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAevC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAIxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAIrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAIzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAIzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAIxC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAQ7C,CAAC"}
+{"version":3,"file":"pd-contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-edit.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAWL,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6CAA6C,CAAC;AAMrD;;;GAGG;AACH,UAAU,iBAAiB;IACzB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iDAAiD;IACjD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,yCAAyC;IACzC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iCAAiC;IACjC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAuED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAmFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,0FAA0F;AAC1F,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,EAAE,KAoClC,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAuE3B,CAAC"}

package/dist/pd-contact/pd-contact-view.stories.d.ts

@@ -1,13 +1,55 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ summary, phoneMailLink, contact, withPropertyDate }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '../types.js';
+/**
+ * Story arguments interface for pd-contact (view mode).
+ * Maps to the component's public API when used as a read-only display.
+ */
+interface PdContactViewArgs {
+    /** Show summary view (read-only display) */
+    summary: boolean;
+    /** Render phone and email as clickable links */
+    phoneMailLink: boolean;
+    /** View type: 'detail' or 'card' (business card) */
+    viewType: "detail" | "card";
+    /** Card layout mode: 'auto', 'horizontal', or 'vertical' */
+    cardLayout: "auto" | "horizontal" | "vertical";
+    /** Contact data to display */
+    contact: PdContactData;
+}
+/**
+ * ## pd-contact (View Mode)
+ *
+ * Contact display component for showing contact information in read-only mode.
+ * Supports two view types: detail (structured list) and card (business card layout).
+ *
+ * ### Features
+ * - Detail view with structured address, phone, email, and social media display
+ * - Business card view with logo, responsive layout, and social media integration
+ * - Private and business contact support (company name, VAT number)
+ * - Clickable phone/email links with icons
+ * - Card view with container-query-based responsive layout (auto/horizontal/vertical)
+ * - CSS custom properties for full visual customization
+ * - CSS part `card-wrapper` for external card styling
+ *
+ * ### View Types
+ * - `detail` — Traditional structured contact display (default)
+ * - `card` — Business card layout with logo and social media
+ */
+declare const meta: Meta<PdContactViewArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const ContactView: Story;
-export declare const ContactCompanyView: Story;
-export declare const ContactViewPropertyDate: Story;
-export declare const ContactViewPhone: Story;
+type Story = StoryObj<PdContactViewArgs>;
+/** Default contact view showing a private person. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All detail view variants at a glance: private, company, with title/social media. */
+export declare const AllDetailVariants: Story;
+/** Detail view with titleName as header, website link, and social media integration. */
+export declare const DetailWithTitleAndSocialMedia: Story;
+/** Business card with auto-responsive layout — switches between horizontal (>500px) and vertical (<500px). */
+export declare const CardDefault: Story;
+/** Card view with all three layout modes side by side. */
+export declare const CardLayouts: Story;
+/** Card view with different content configurations: without logo, without social media, minimal. */
+export declare const CardContentVariations: Story;
+/** CSS Custom Properties — Branded and Redesigned card variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-contact-view.stories.d.ts.map

package/dist/pd-contact/pd-contact-view.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-contact-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-view.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,IAAI;;;;CAYM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA2BtB,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAQrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}
+{"version":3,"file":"pd-contact-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-view.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,iBAAiB,CAAC;AAMzB;;;GAGG;AACH,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4DAA4D;IAC5D,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;IAC/C,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;CACxB;AAyED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAgFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,qFAAqF;AACrF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,EAAE,KA0C/B,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,6BAA6B,EAAE,KAY3C,CAAC;AAMF,8GAA8G;AAC9G,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,KAwCzB,CAAC;AAMF,oGAAoG;AACpG,eAAO,MAAM,qBAAqB,EAAE,KA+CnC,CAAC;AAMF,oEAAoE;AACpE,eAAO,MAAM,aAAa,EAAE,KAuF3B,CAAC"}

package/dist/pd-page/dist/pd-socialmedia/PdSocialmedia.js

@@ -0,0 +1,426 @@
+import { css, LitElement, html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import '@progressive-development/pd-forms/pd-suggestion-box';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-button';
+import '@progressive-development/pd-forms/pd-input';
+import '@progressive-development/pd-icon/pd-icon';
+import { SOCIAL_PROVIDERS } from './pd-socialmedia-model.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdSocialmedia = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.summary = false;
+    this.initItems = [];
+    this.providers = SOCIAL_PROVIDERS;
+    this.showLabelBelowIcon = false;
+    this.openLinksInSameTab = false;
+    this._pendingAddProvider = null;
+    this._currentInputValue = null;
+    this._editItems = [];
+    this._openAddSuggestItem = (e) => {
+      const metaProvider = e.detail;
+      const providerId = metaProvider?.id;
+      if (!providerId) return;
+      this._pendingAddProvider = metaProvider;
+      this._currentInputValue = null;
+    };
+    this._closeAddSuggestedItem = (_e) => {
+      this._pendingAddProvider = null;
+      this._currentInputValue = null;
+    };
+  }
+  willUpdate(_changedProperties) {
+    if (_changedProperties.has("initItems")) {
+      this._editItems = [...this.initItems || []];
+    }
+  }
+  // --- Public API helpers ---
+  addItem(entry) {
+    const next = [...this._editItems, entry];
+    this._editItems = next;
+    this.emitChange();
+  }
+  removeIndex(index) {
+    const next = this._editItems.slice();
+    next.splice(index, 1);
+    this._editItems = next;
+    this.emitChange();
+  }
+  get value() {
+    return this._editItems;
+  }
+  // --- Render ---
+  render() {
+    return this.summary ? this.renderView() : this.renderEdit();
+  }
+  renderView() {
+    const items = this._editItems ?? [];
+    const empty = items.length === 0;
+    return html`
+      <ul
+        class="view-list"
+        aria-label="${msg("Social-Media-Profile", {
+      id: "pd.socialmedia.aria.label"
+    })}"
+      >
+        ${empty ? html`<li>
+              <span
+                >${msg("Keine Einträge", { id: "pd.socialmedia.empty" })}</span
+              >
+            </li>` : items.map((item) => {
+      const provider = this._findProvider(item.providerId);
+      const label = provider?.label ?? item.label ?? item.providerId;
+      const href = this._toUrl(provider, item.value);
+      const title = `${label}: ${href}`;
+      const content = html`
+                <div class="icon-tile" title=${title}>
+                  ${provider?.icon ?? "link"}
+                  ${this.showLabelBelowIcon ? html`<div class="icon-label">${label}</div>` : nothing}
+                </div>
+              `;
+      return html` <li>
+                ${href ? html` <a
+                      href=${href}
+                      target=${this.openLinksInSameTab ? "_self" : "_blank"}
+                      rel="noopener noreferrer"
+                      aria-label=${label}
+                      >${content}</a
+                    >` : html`<div class="icon-tile" aria-label=${label}>
+                      ${content}
+                    </div>`}
+              </li>`;
+    })}
+      </ul>
+    `;
+  }
+  renderEdit() {
+    return html`
+      <div class="edit">
+        <div>
+          <pd-form-row>
+            <pd-suggestion-box
+              id="suggesBoxId"
+              span="full"
+              label="${msg("Neuer Eintrag", {
+      id: "pd.socialmedia.new.entry"
+    })}"
+              minCharsToSearch="1"
+              placeholder="${msg("Socialmedia eingeben...", {
+      id: "pd.socialmedia.placeholder"
+    })}"
+              .callFunction="${this._searchSocialProviders.bind(this)}"
+              @element-selected="${this._openAddSuggestItem}"
+              @element-unselected="${this._closeAddSuggestedItem}"
+              @pd-form-element-change="${(e) => e.stopPropagation()}"
+              @pd-form-element-register="${(e) => e.stopPropagation()}"
+              @pd-form-element-unregister="${(e) => e.stopPropagation()}"
+            ></pd-suggestion-box>
+          </pd-form-row>
+          ${this._pendingAddProvider !== null ? this._renderAddRow() : ""}
+        </div>
+
+        <div class="edit-list">
+          ${this._editItems?.map((item, i) => {
+      const meta = this._findProvider(item.providerId);
+      const label = meta?.label ?? item.providerId;
+      return html`
+              <div class="row">
+                <div class="provider">
+                  ${meta?.icon ?? "link"}<span>${label}</span>
+                </div>
+                <div class="value">${item.value}</div>
+                <button
+                  class="btn-icon danger"
+                  @click=${() => this.removeIndex(i)}
+                  aria-label="${msg("Eintrag löschen", {
+        id: "pd.socialmedia.delete"
+      })}"
+                >
+                  <pd-icon icon="${pdIcons.ICON_DELETE_NEW}"></pd-icon>
+                </button>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+  _renderAddRow() {
+    const provider = this._pendingAddProvider;
+    if (!provider) return html`<p>! Missing Provider !</p>`;
+    return html`
+      <pd-form-row class="no-padding">
+        <pd-input
+          id="scValueId"
+          maxlength="250"
+          span="full"
+          label="${`${provider.icon} ${provider.label}`}"
+          helperTxt="${`Pattern: ${provider.pattern}`}"
+          placeholder="${provider.placeholder || `Eingabe ${provider.inputKind}`}"
+          valueName="providerValue"
+          @pd-form-element-change="${(e) => {
+      this._currentInputValue = e.detail.value;
+      e.stopPropagation();
+    }}"
+          @pd-form-element-register="${(e) => e.stopPropagation()}"
+          @pd-form-element-unregister="${(e) => e.stopPropagation()}"
+          required
+        ></pd-input>
+      </pd-form-row>
+      <div class="current-input-url">
+        URL:
+        <a
+          target="_blank"
+          href="${this._toUrl(provider, this._currentInputValue || "") || ""}"
+          >${this._toUrl(provider, this._currentInputValue || "")}</a
+        >
+      </div>
+
+      <div class="add-button-group">
+        <pd-button
+          icon="${pdIcons.ICON_CLOSE}"
+          text="${msg("Abbrechen", { id: "pd.socialmedia.cancel" })}"
+          @button-clicked="${() => {
+      this._currentInputValue = null;
+      this._pendingAddProvider = null;
+      this._suggestForm?.reset();
+    }}"
+        ></pd-button>
+        <pd-button
+          icon="${pdIcons.ICON_SYNC}"
+          text="${msg("Speichern", { id: "pd.socialmedia.save" })}"
+          @button-clicked="${() => {
+      this.addItem({
+        providerId: this._pendingAddProvider?.id || "",
+        value: this._currentInputValue || ""
+      });
+      this._currentInputValue = null;
+      this._pendingAddProvider = null;
+      this._suggestForm?.reset();
+    }}"
+        ></pd-button>
+      </div>
+    `;
+  }
+  // --- Suggest Box Helper
+  async _searchSocialProviders(input) {
+    const includedIds = this._editItems.map((item) => item.providerId);
+    return Promise.resolve(
+      SOCIAL_PROVIDERS.filter(
+        (v) => !includedIds.includes(v.id) && (v.label.toLowerCase().includes(input.toLowerCase()) || v.category.toLowerCase().includes(input.toLowerCase()) || v.aliases?.join()?.toLowerCase().includes(input.toLowerCase()))
+      ).map((e) => ({
+        id: e.id,
+        name: `${e.icon || ""} ${e.label || "--"}`,
+        subInfo: html`<b><em>${e.category || "--"}:</em></b> ${e.aliases?.join(
+          ","
+        ) || e.id}`,
+        objectValue: e
+      }))
+    );
+  }
+  // --- Private helpers ---
+  _findProvider(id) {
+    if (!id) return void 0;
+    return this.providers?.find((p) => p.id === id);
+  }
+  _toUrl(meta, raw) {
+    const v = raw?.trim();
+    if (!v) return null;
+    if (meta?.toUrl) return meta.toUrl(v);
+    if (/^https?:\/\//i.test(v)) return v;
+    return null;
+  }
+  emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("items-change", {
+        detail: { items: this._editItems },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+PdSocialmedia.styles = css`
+    :host {
+      display: block;
+    }
+
+    /* View: icons row */
+    .view-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--pd-gap, 0.5rem);
+      align-items: center;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .view-list li:hover .icon-tile .icon-label {
+      color: var(--pd-default-hover-col);
+    }
+
+    .icon-tile {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.25rem;
+      padding: 0.25rem;
+      min-width: 2.25rem;
+    }
+
+    .icon-tile a,
+    .icon-tile button[role="link"] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+      outline: none;
+      border: none;
+      background: none;
+      cursor: pointer;
+    }
+
+    .icon-label {
+      font-size: 0.75rem;
+      line-height: 1;
+      color: var(--pd-sc-text-muted, var(--pd-default-disabled-col));
+      text-align: center;
+      max-width: 6rem;
+    }
+
+    /* Edit: list */
+    .edit {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .edit-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 0;
+      padding: 0 var(--pd-spacing-xs);
+      border-radius: var(--pd-radius-md);
+      max-width: 500px;
+    }
+
+    .edit-list > .row:nth-child(odd) {
+      background: var(--pd-sc-row-bg-odd-col, var(--pd-default-bg-light-col));
+    }
+
+    .edit-list > .row:nth-child(even) {
+      background: var(--pd-sc-row-bg-even-col, var(--pd-default-bg-dark-col));
+    }
+
+    .edit-list > .row:hover {
+      background: var(--pd-sc-row-bg-col-hover, var(--pd-default-lightest-col));
+    }
+
+    .provider {
+      font-family: var(--pd-default-font-title-family);
+      color: var(--pd-sc-edit-provider-col, var(--pd-default-font-title-col));
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-width: 10rem;
+    }
+
+    .value {
+      font-family: var(--pd-default-font-input-family);
+      font-size: 0.95rem;
+      color: var(--pd-sc-edit-value-col, var(--pd-default-font-input-col));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .btn-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      border: none;
+      background: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+    }
+
+    .btn-icon:hover {
+      background: var(--pd-surface-200, rgba(0, 0, 0, 0.05));
+    }
+
+    .danger {
+      --pd-icon-col: var(--pd-default-error-col, #c0392b);
+    }
+
+    .btn-icon:focus-visible {
+      outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+      outline-offset: 2px;
+    }
+
+    .current-input-url {
+      color: var(--pd-sc-text-muted, var(--pd-default-disabled-col));
+      padding-top: 0.2rem;
+      font-size: 1rem;
+    }
+
+    .add-button-group {
+      padding-top: 0.5rem;
+      --pd-button-font-size: 1rem;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdSocialmedia.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Array })
+], PdSocialmedia.prototype, "initItems", 2);
+__decorateClass([
+  property({ type: Array })
+], PdSocialmedia.prototype, "providers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSocialmedia.prototype, "showLabelBelowIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdSocialmedia.prototype, "openLinksInSameTab", 2);
+__decorateClass([
+  state()
+], PdSocialmedia.prototype, "_pendingAddProvider", 2);
+__decorateClass([
+  state()
+], PdSocialmedia.prototype, "_currentInputValue", 2);
+__decorateClass([
+  state()
+], PdSocialmedia.prototype, "_editItems", 2);
+__decorateClass([
+  query("#suggesBoxId")
+], PdSocialmedia.prototype, "_suggestForm", 2);
+PdSocialmedia = __decorateClass([
+  localized()
+], PdSocialmedia);
+
+export { PdSocialmedia };