@progressive-development/pd-content 0.0.15 → 0.0.17

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

package/src/PdEditContent.js

@@ -131,6 +131,7 @@
 
        .link-row {
           padding-top: 5px;
+          padding-bottom: 5px;
           display: flex;
           flex-wrap: wrap;
           gap: 15px;
@@ -141,6 +142,7 @@
           gap: 2px;
           white-space: nowrap;
           align-items: center;
+          pointer-events: none;
        }
 
        .param-data {
@@ -210,10 +212,8 @@
                  </a>
                `}
            ${this.editLinks.map(
-             link => html` <a               
-               data-link="${link.key}"
-               @click="${this._editContent}"
-             >
+             link => html`
+             <a data-link="${link.key}" @click="${this._editContent}">
                 <div class="link-item">${PdEditContent._getLinkLogo(link)} ${link.txt}</div>
              </a>`
            )}
@@ -232,8 +232,8 @@
      return '';
    }
  
-   _editContent(e) {
-     const { link } = e.target.dataset;
+   _editContent(e) {     
+     const { link } = e.target.dataset;     
      this.dispatchEvent(
        new CustomEvent('edit-content', {
          detail: {

package/stories/edit-content.stories.js

@@ -3,10 +3,7 @@ import '../pd-edit-content.js';
 
 export default {
   title: 'PdContent/Edit Content',
-  component: 'pd-edit-content',
-  argTypes: {
-    
-  },
+  component: 'pd-edit-content'
 };
 
 const testIcon1 = html`<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
@@ -53,7 +50,9 @@ function BasicEditTemplate({editData}) {
     
     <pd-box-view style="--squi-box-columns: 2;">
     
-      <pd-edit-content contentTitle="Test content with slot">
+      <pd-edit-content contentTitle="Test content with slot" @edit-content="${(e) => {
+        console.log("event: ", e);
+      }}">
         <p>Some content for edit, could be added as own slot</p>      
         <ul>
           <li>Das ist auch drinne</li>
@@ -99,7 +98,14 @@ function BasicEditTemplate({editData}) {
 
 function NumberEditTemplate({editData}) {  
   return html`
-    <pd-box-view style="--squi-box-columns: 2;">
+    <style>
+      .edit-boxes {
+        display: flex;
+        flex-flow: column;
+        gap: 10px;
+      }
+    </style>
+    <div class="edit-boxes">
       <pd-edit-content contentTitle="Test content with params and step number" 
         .data="${editData}" stepNumber="1">        
       </pd-edit-content>
@@ -115,9 +121,11 @@ function NumberEditTemplate({editData}) {
       <pd-edit-content contentTitle="Test content with params and step number" 
         .data="${editData}" stepNumber="4">        
       </pd-edit-content>
-    </pd-box-view>`;
+    </div>`;
 }
 
+
+
 export const EditContent = BasicEditTemplate.bind({});
 EditContent.args = {  
   editData: [