@progressive-development/pd-content 0.0.5 → 0.0.7

package/index.js

@@ -1 +1 @@
-export { PdContent } from './src/PdContent.js';
+

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development content components. ",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development UG",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -18,7 +18,9 @@
   },
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-icon": "0.0.4"
+    "@progressive-development/pd-icon": "0.0.4",
+    "@progressive-development/pd-dialog": "0.0.7",
+    "pwa-helpers": "^0.9.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/pd-box-view.js

@@ -0,0 +1,3 @@
+import { PdBoxView } from './src/PdBoxView.js';
+
+window.customElements.define('pd-box-view', PdBoxView);

package/pd-more-info.js

@@ -0,0 +1,3 @@
+import { PdMoreInfo } from './src/PdMoreInfo.js';
+
+window.customElements.define('pd-more-info', PdMoreInfo);

package/pd-resize-content.js

@@ -0,0 +1,3 @@
+import { PdResizeContent } from './src/PdResizeContent.js';
+
+window.customElements.define('pd-resize-content', PdResizeContent);

package/src/PdBoxView.js

@@ -0,0 +1,49 @@
+import { html, css, LitElement } from 'lit';
+
+export class PdBoxView extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: grid;
+          grid-template-columns: repeat(
+            var(--squi-box-columns, 4),
+            minmax(var(--squi-box-min-width, 100px), 1fr)
+          );
+          /*grid-auto-rows: minmax(var(--squi-box-min-height, 100px), 1fr); Für mobile 1 cloum auskommentiert, ging auch für große Ansicht, also eher hinderlich?*/
+          gap: var(--squi-box-gap, 25px);
+        }
+
+        @media (min-width: 580px) {
+          .button-icon squi-icon {
+            margin: 0 0.5rem;
+          }
+          .button-icon.small squi-icon {
+            padding-right: 0.5rem;
+          }
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      primary: { type: Boolean },
+      gradient: { type: Boolean },
+      disabled: { type: Boolean },
+      text: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.primary = false;
+    this.gradient = true;
+    this.disabled = false;
+    this.text = 'Ok';
+  }
+
+  render() {
+    return html` <slot></slot> `;
+  }
+}

package/src/PdMoreInfo.js

@@ -0,0 +1,89 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+/* eslint-disable lit-a11y/anchor-is-valid */
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdMoreInfo extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      p {
+        line-height: 1.3em;
+        margin: 10px;
+        margin-left: 0px;
+
+        color: #323031;
+        font-size: 1.1rem;
+      }
+
+      a {
+        font-size: 1.1rem;
+        color: blue;
+      }
+
+      a:hover {
+        color: purple;
+        cursor: pointer;
+        border-bottom: 1px solid purple;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      _lessInfo: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this._lessInfo = true;
+  }
+
+  render() {
+    if (this._lessInfo) {
+      return html`
+        <p>
+          <slot name="small-view"></slot>
+          <a @click="${this._showMoreInfo}">Meer informatie</a>
+        </p>
+      `;
+    }
+    return html`
+      <p>
+        <slot name="large-view"></slot>
+        <a @click="${this._showLessInfo}">Minder informatie</a>
+      </p>
+    `;
+  }
+
+  _showMoreInfo() {
+    this._lessInfo = false;
+  }
+
+  _showLessInfo() {
+    this._lessInfo = true;
+
+    // scroll to position (otherwise on mobile lost in content...)
+    const rect = this.getBoundingClientRect();
+    // https://www.mediaevent.de/javascript/scroll.html
+    window.scrollBy({
+      top: rect.top - 150,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }
+}

package/src/PdResizeContent.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { LitElement, html, css } from 'lit';
+
+import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
+
+import '@progressive-development/pd-dialog/pd-popup.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdResizeContent extends LitElement {
+  /**
+   * Fired when free date clicked => At the moment only for freeDates
+   * @event book-date
+   */
+
+  /**
+   * Fired when date or ZIP should edited by the user
+   * @event edit-selection
+   */
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      h3 {
+        color: #084c61;
+        font-family: Oswald;
+      }
+
+      p {
+        color: #084c61;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      resizeWidth: { type: String },
+      _hideContent: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.resizeWidth = '1232px';
+    this._hideContent = false;
+  }
+
+  firstUpdated() {
+    installMediaQueryWatcher(`(min-width: ${this.resizeWidth})`, matches => {
+      if (matches) {
+        this._hideContent = false;
+      } else {
+        this._hideContent = true;
+      }
+    });
+  }
+
+  render() {
+    if (this._hideContent) {
+      return html`
+        <pd-popup>
+          <div slot="small-view"><slot name="preview-content"></slot></div>
+          <div slot="content"><slot name="resize-content"></slot></div>
+        </pd-popup>
+      `;
+    }
+    return html` <slot name="resize-content"></slot> `;
+  }
+}