@progressive-development/pd-content 0.0.6 → 0.0.7

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.6",
+  "version": "0.0.7",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/pd-box-view.js

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

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> `;
+  }
+}