@progressive-development/pd-content 0.7.17 → 0.9.2

package/dist/pd-edit-content.js

@@ -1,224 +1,8 @@
-import { html, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
-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;
-};
-const editIcon = html`<svg
-  class="edit"
-  viewBox="0 0 19 19"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g>
-    <path
-      d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
-      fill="var(--edit-fill-color)"
-    />
-    <path
-      d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
-      fill="var(--edit-fill-color)"
-    />
-    <path
-      d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
-      fill="var(--edit-fill-color)"
-    />
-  </g>
-</svg>`;
-let PdEditContent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.contentTitle = "";
-    this.data = [];
-    this.editLinks = [];
-    this.editDisabled = false;
-  }
-  render() {
-    var _a;
-    return html`
-      <div class="header">
-        ${this.stepNumber ? html`
-              <div class="circle">
-                <span class="step-number">${this.stepNumber}</span>
-              </div>
-            ` : null}
-        <h4>${this.contentTitle}</h4>
-      </div>
-      <div>
-        ${((_a = this.data) == null ? void 0 : _a.length) ? html`
-              <div class="param-data">
-                ${this.data.map(
-      (entry) => html`<div>
-                      <span class="label">${entry.name}</span>
-                      <span class="value">${entry.val}</span>
-                    </div>`
-    )}
-              </div>
-            ` : null}
-        <slot></slot>
-        <div class="link-row">
-          ${!this.editDisabled ? html`
-                <a @click="${this._editContent}">
-                  <div class="link-item">
-                    ${editIcon} Bewerk ${this.contentTitle}
-                  </div>
-                </a>
-              ` : null}
-          ${this.editLinks.map(
-      (link) => html`
-              <a data-link="${link.key}" @click="${this._editContent}">
-                <div class="link-item">
-                  ${PdEditContent._getLinkLogo(link)} ${link.txt}
-                </div>
-              </a>
-            `
-    )}
-        </div>
-      </div>
-    `;
-  }
-  static _getLinkLogo(link) {
-    if (link.icon) return link.icon;
-    if (link.defaultIcon) return editIcon;
-    return "";
-  }
-  _editContent(e) {
-    var _a, _b;
-    const link = (_b = (_a = e.currentTarget) == null ? void 0 : _a.dataset) == null ? void 0 : _b.link;
-    this.dispatchEvent(
-      new CustomEvent("edit-content", {
-        detail: { step: this.stepNumber, link },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-PdEditContent.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  css`
-      :host {
-        display: block;
-      }
+import { PdEditContent } from './pd-edit-content/PdEditContent.js';
 
-      h4 {
-        font-family: var(--pd-default-font-title-family);
-        font-size: var(--pd-ec-font-title-size, 1.2em);
-        margin: 0 0 2px 0;
-        line-height: 40px;
-        color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
-        padding-left: 5px;
-      }
+const tag = "pd-edit-content";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdEditContent);
+}
 
-      .header {
-        display: flex;
-        gap: 5px;
-        background-color: var(--pd-ec-bg-col, var(--pd-default-col));
-        align-items: center;
-      }
-
-      .circle {
-        margin-left: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 27px;
-        height: 27px;
-        border-radius: 50%;
-        background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
-      }
-
-      .step-number {
-        font-family: var(--pd-default-font-title-family);
-        font-size: var(--pd-ec-font-title-size, 1.2em);
-        font-weight: var(--pd-ec-nr-font-weight, bold);
-        color: var(--pd-ec-bg-col, var(--pd-default-col));
-      }
-
-      .label {
-        display: inline-block;
-        font-weight: bold;
-        width: 200px;
-        padding-top: 10px;
-      }
-
-      a {
-        cursor: pointer;
-        font-family: var(--pd-default-font-link-family);
-        font-size: var(--pd-default-font-link-size);
-        color: var(--pd-default-font-link-col);
-        --edit-fill-color: var(--pd-default-font-link-col);
-      }
-
-      a:hover {
-        color: var(--pd-default-font-link-col-hover);
-        --edit-fill-color: var(--pd-default-font-link-col-hover);
-      }
-
-      .edit {
-        width: 1.1em;
-      }
-
-      /* 
-        could used as class for given svg icons, workaround class 
-        hard coded for specific icon => maybe use custom properties here, but not for that hack...
-      */
-      .own-edit-icon {
-        width: 2em;
-        margin-top: -10px;
-      }
-
-      .link-row {
-        padding: 5px 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 15px;
-      }
-
-      .link-item {
-        display: flex;
-        gap: 2px;
-        white-space: nowrap;
-        align-items: center;
-        pointer-events: none;
-      }
-
-      .param-data {
-        padding-bottom: 10px;
-      }
-
-      @media (max-width: 360px) {
-        .label {
-          width: 130px;
-        }
-      }
-    `
-];
-__decorateClass([
-  property({ type: Number })
-], PdEditContent.prototype, "stepNumber", 2);
-__decorateClass([
-  property({ type: String })
-], PdEditContent.prototype, "contentTitle", 2);
-__decorateClass([
-  property({ type: Array })
-], PdEditContent.prototype, "data", 2);
-__decorateClass([
-  property({ type: Array })
-], PdEditContent.prototype, "editLinks", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdEditContent.prototype, "editDisabled", 2);
-PdEditContent = __decorateClass([
-  customElement("pd-edit-content")
-], PdEditContent);
-export {
-  PdEditContent
-};
+export { PdEditContent };

package/dist/pd-more-info/PdMoreInfo.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * @tagname pd-more-info
+ *
+ * `pd-more-info` Komponente zeigt zuerst einen kompakten Text (Slot `small-view`)
+ * und erlaubt es dem Nutzer, bei Klick weitere Informationen (Slot `large-view`) einzublenden.
+ *
+ * @slot small-view - Der kompakte Textblock für die erste Ansicht
+ * @slot large-view - Der erweiterte Textblock nach Klick auf "Mehr Informationen"
+ *
+ * @cssprop --pd-default-font-content-col - Textfarbe
+ * @cssprop --pd-default-font-content-size - Textgröße
+ * @cssprop --pd-default-font-link-family - Schriftart für Link
+ * @cssprop --pd-default-font-link-size - Schriftgröße für Link
+ * @cssprop --pd-default-font-link-col - Linkfarbe
+ * @cssprop --pd-default-font-link-col-hover - Hoverfarbe für Link
+ */
+export declare class PdMoreInfo extends LitElement {
+    private _lessInfo;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    private _showMoreInfo;
+    private _showLessInfo;
+}
+//# sourceMappingURL=PdMoreInfo.d.ts.map

package/dist/pd-more-info/PdMoreInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdMoreInfo.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/PdMoreInfo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAsBpC;IAEO,MAAM;IAoBf,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAWtB"}

package/dist/pd-more-info/PdMoreInfo.js

@@ -0,0 +1,80 @@
+import { css, LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+
+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 PdMoreInfo = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._lessInfo = true;
+  }
+  render() {
+    return html`
+      <p>
+        ${this._lessInfo ? html`
+              <slot name="small-view"></slot>
+              <a @click=${this._showMoreInfo}>
+                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
+              </a>
+            ` : html`
+              <slot name="large-view"></slot>
+              <a @click=${this._showLessInfo}>
+                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
+              </a>
+            `}
+      </p>
+    `;
+  }
+  _showMoreInfo() {
+    this._lessInfo = false;
+  }
+  _showLessInfo() {
+    this._lessInfo = true;
+    const rect = this.getBoundingClientRect();
+    window.scrollBy({
+      top: rect.top - 150,
+      left: 0,
+      behavior: "smooth"
+    });
+  }
+};
+PdMoreInfo.styles = [
+  css`
+      :host {
+        display: block;
+      }
+
+      p {
+        color: var(--pd-default-font-content-col);
+        font-size: var(--pd-default-font-content-size);
+      }
+
+      a {
+        cursor: pointer;
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+      }
+
+      a:hover {
+        color: var(--pd-default-font-link-col-hover);
+      }
+    `
+];
+__decorateClass([
+  state()
+], PdMoreInfo.prototype, "_lessInfo", 2);
+PdMoreInfo = __decorateClass([
+  localized()
+], PdMoreInfo);
+
+export { PdMoreInfo };

package/dist/pd-more-info/pd-more-info.d.ts

@@ -0,0 +1,3 @@
+import { PdMoreInfo } from './PdMoreInfo.js';
+export { PdMoreInfo };
+//# sourceMappingURL=pd-more-info.d.ts.map

package/dist/pd-more-info/pd-more-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-more-info.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/pd-more-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/pd-more-info/pd-more-info.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-more-info.stories.d.ts","sourceRoot":"","sources":["../../src/pd-more-info/pd-more-info.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,mBAAmB,CAAC;wBAQtB,IAAI;AANT,wBAMU;AAyCV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAGzC,eAAO,MAAM,eAAe,SAA+B,CAAC"}

package/dist/pd-more-info.d.ts

@@ -1,23 +1,2 @@
-import { LitElement, CSSResultGroup } from 'lit';
-/**
- * `pd-more-info` Komponente zeigt zuerst einen kompakten Text (Slot `small-view`)
- * und erlaubt es dem Nutzer, bei Klick weitere Informationen (Slot `large-view`) einzublenden.
- *
- * @slot small-view - Der kompakte Textblock für die erste Ansicht
- * @slot large-view - Der erweiterte Textblock nach Klick auf "Mehr Informationen"
- *
- * @cssprop --pd-default-font-content-col - Textfarbe
- * @cssprop --pd-default-font-content-size - Textgröße
- * @cssprop --pd-default-font-link-family - Schriftart für Link
- * @cssprop --pd-default-font-link-size - Schriftgröße für Link
- * @cssprop --pd-default-font-link-col - Linkfarbe
- * @cssprop --pd-default-font-link-col-hover - Hoverfarbe für Link
- */
-export declare class PdMoreInfo extends LitElement {
-    private _lessInfo;
-    static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
-    private _showMoreInfo;
-    private _showLessInfo;
-}
-//# sourceMappingURL=pd-more-info.d.ts.map
+export * from './pd-more-info/pd-more-info'
+export {}

package/dist/pd-more-info.js

@@ -1,83 +1,8 @@
-import { css, LitElement, html } from "lit";
-import { state, customElement } from "lit/decorators.js";
-import { localized, msg } from "@lit/localize";
-import { PdFontStyles } from "@progressive-development/pd-shared-styles";
-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 PdMoreInfo = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._lessInfo = true;
-  }
-  render() {
-    return html`
-      <p>
-        ${this._lessInfo ? html`
-              <slot name="small-view"></slot>
-              <a @click=${this._showMoreInfo}>
-                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
-              </a>
-            ` : html`
-              <slot name="large-view"></slot>
-              <a @click=${this._showLessInfo}>
-                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
-              </a>
-            `}
-      </p>
-    `;
-  }
-  _showMoreInfo() {
-    this._lessInfo = false;
-  }
-  _showLessInfo() {
-    this._lessInfo = true;
-    const rect = this.getBoundingClientRect();
-    window.scrollBy({
-      top: rect.top - 150,
-      left: 0,
-      behavior: "smooth"
-    });
-  }
-};
-PdMoreInfo.styles = [
-  PdFontStyles,
-  css`
-      :host {
-        display: block;
-      }
+import { PdMoreInfo } from './pd-more-info/PdMoreInfo.js';
 
-      p {
-        color: var(--pd-default-font-content-col);
-        font-size: var(--pd-default-font-content-size);
-      }
+const tag = "pd-more-info";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdMoreInfo);
+}
 
-      a {
-        cursor: pointer;
-        font-family: var(--pd-default-font-link-family);
-        font-size: var(--pd-default-font-link-size);
-        color: var(--pd-default-font-link-col);
-      }
-
-      a:hover {
-        color: var(--pd-default-font-link-col-hover);
-      }
-    `
-];
-__decorateClass([
-  state()
-], PdMoreInfo.prototype, "_lessInfo", 2);
-PdMoreInfo = __decorateClass([
-  customElement("pd-more-info"),
-  localized()
-], PdMoreInfo);
-export {
-  PdMoreInfo
-};
+export { PdMoreInfo };

package/dist/pd-panel-viewer/PdPanel.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+/**
+ * @tagname pd-panel
+ */
+export declare class PdPanel extends LitElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=PdPanel.d.ts.map

package/dist/pd-panel-viewer/PdPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdPanel.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AAE5C;;GAEG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BAsBX;IAEF,MAAM;CAOP"}

package/dist/pd-panel-viewer/PdPanel.js

@@ -0,0 +1,38 @@
+import { LitElement, css, html } from 'lit';
+
+class PdPanel extends LitElement {
+  static {
+    this.styles = css`
+    :host {
+      background: var(--pd-panel-bg, #afc1d2);
+      border-radius: var(--pd-panel-border-radius, 0.2em);
+    }
+
+    /* Default styles for content */
+    #content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    #content > slot::slotted(*) {
+      margin: 0;
+    }
+  `;
+  }
+  render() {
+    return html`
+      <div id="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+export { PdPanel };

package/dist/pd-panel-viewer/PdPanelViewer.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * @tagname pd-panel-viewer
+ */
+export declare class PdPanelViewer extends LitElement {
+    withProgress: boolean;
+    deltaCalc: number;
+    _index: number;
+    _panData: any;
+    _update: {};
+    static styles: import('lit').CSSResult;
+    get index(): number;
+    set index(value: number);
+    render(): import('lit').TemplateResult<1>;
+    firstUpdated(): void;
+    update(changedProperties: any): void;
+    next(): void;
+    previous(): void;
+}
+//# sourceMappingURL=PdPanelViewer.d.ts.map

package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,OAAO,0CAA0C,CAAC;AAIlD;;GAEG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAGd,MAAM,SAAK;IAIX,QAAQ,EAAE,GAAG,CAAM;IAGnB,OAAO,KAAM;IAEb,MAAM,CAAC,MAAM,0BAkEX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IAmCN,YAAY;IAoBZ,MAAM,CAAC,iBAAiB,EAAE,GAAG;IAkC7B,IAAI;IASJ,QAAQ;CAOT"}