@pepperi-addons/ngx-composite-lib-react 0.5.26 → 0.5.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.5.26",
+  "version": "0.5.28",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",
@@ -27,13 +27,18 @@
     "*.d.ts",
     "README.md",
     "elements/*",
-    "i18n/*"
+    "i18n/*",
+    "styles/**"
   ],
   "exports": {
     ".": {
       "types": "./index.d.ts",
       "default": "./index.js"
     },
+    "./styles/*": "./styles/*",
+    "./styles/*/*": "./styles/*/*",
+    "./styles/*/*/*": "./styles/*/*/*",
+    "./styles/*/*/*/*": "./styles/*/*/*/*",
     "./elements/styles.css": "./elements/styles.css",
     "./elements/main.js": "./elements/main.js",
     "./elements/runtime.js": "./elements/runtime.js",

package/pep-layout-builder2.js

@@ -426,6 +426,7 @@ export class PepLayoutBuilder2 extends React.Component {
             return existing;
         }
         const container = document.createElement('div');
+        container.style.display = 'contents';
         host.replaceChildren(container);
         const root = this.getLegacyRoot(container);
         const entry = { container, root };

package/styles/components/data-view-builder.scss

@@ -0,0 +1,65 @@
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/variables' as ngx-variables;
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/functions' as ngx-functions;
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/mixins' as ngx-mixins;
+
+/* You can add global styles to this file, and also import other style files */
+html {
+    body.inheritCursors * {
+        cursor: inherit !important;
+    }
+}
+
+@mixin mapped-field-item-container() {
+    max-width: 600px;
+    // height: 6rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ngx-variables.$border-radius-md;
+    
+    &:not(.separator-container) {
+        padding-inline: ngx-variables.$spacing-lg;
+    }
+}
+
+@mixin mapped-field-container() {
+    @include mapped-field-item-container();
+    
+    &:not(.separator-container) {
+        gap: ngx-variables.$double-content-margin;
+        @include ngx-mixins.state-regular-default(true);
+        // border-color: ngx-functions.get-pep-color(color-system-primary, color-tran-50);
+    }
+
+    .fields-wrapper {
+        display: grid;
+        width: 100%;
+        grid-template-columns: 1fr 1fr auto;
+        gap: 0.5rem;
+        padding-top: 0.5rem;
+
+        // To align with the other fields.
+        .center-button {
+            margin-top: ngx-variables.$form-field-title-height;
+        }
+    }
+
+    .separator-wrapper {
+        display: grid;
+        width: 100%;
+        grid-template-columns: 1fr auto;
+        padding-bottom: ngx-variables.$spacing-xs;
+        border-bottom: 1px solid ngx-functions.get-pep-color(color-regular, color-flat-r-20);
+
+        .list-actions {
+            display: flex;
+            gap: ngx-variables.$spacing-xs
+        }
+    }
+}
+
+.cdk-drag-preview {
+    &.mapped-field-container {
+        @include mapped-field-container();
+    }
+}