@dile/lib 0.1.9 → 0.2.1

package/index.js

@@ -4,7 +4,9 @@ export {
   positiveFeedback,
   neutralFeedback,
   startLoading,
-  stopLoading
+  stopLoading,
+  modalMessage,
+  modalClose,
 } from './src/redux/feedback-slice.js';
 export { 
   userSlice,
@@ -17,8 +19,8 @@ export { DileFeedback } from './src/lib/DileFeedback.js';
 export { DileState } from './src/lib/DileState.js';
 export { DileAppRouter } from './src/lib/DileAppRouter.js';
 export { DileAppNavigate } from './src/lib/DileAppNavigate.js';
-
 export { DileAppFeedback } from './src/components/DileAppFeedback.js';
+export { DileAppModalFeedback } from './src/components/DileAppModalFeedback.js';
 export { DileAppLoading } from './src/components/DileAppLoading.js';
 export { DileAuthGuard } from './src/components/DileAuthGuard.js';
 export { DileRouterLink } from './src/components/DileRouterLink.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/lib",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "Common App libraries, mixins and helpers",
   "main": "index.js",
   "scripts": {
@@ -22,10 +22,11 @@
   "homepage": "https://dile-components.com/",
   "license": "MIT",
   "dependencies": {
-    "@dile/ui": "^2.8.1",
+    "@dile/icons": "^2.4.1",
+    "@dile/ui": "^2.8.3",
     "@lit-labs/router": "^0.1.4",
     "@reduxjs/toolkit": "^2.5.1",
     "lit": "^2.7.0 || ^3.0.0"
   },
-  "gitHead": "eae8a7897e7baf3b5b3a9f4ab8a9f94e85e94ec5"
+  "gitHead": "fbb7a5933a1ea456601ab8af86da1586b1c1a34e"
 }

package/src/components/DileAppModalFeedback.js

@@ -0,0 +1,99 @@
+import { LitElement, html, css } from 'lit';
+import { DileState } from '../lib/DileState.js';
+import '@dile/ui/components/modal/modal.js';
+import '@dile/ui/components/icon/icon.js';
+import '@dile/ui/components/button/button.js';
+import { modalClose } from '../redux/feedback-slice.js';
+
+export const DileAppModalFeedback = (store) => class extends DileState(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      .content {
+        display: flex;
+        margin-bottom: 0.75rem;
+        gap: 0.5rem;
+        align-items: center;
+      }
+      .message {
+        flex-grow: 1;
+      }
+      .icon {
+        display: flex;
+        --dile-icon-size: 32px;
+      }
+      .warning {
+        --dile-icon-color: var(--dile-alert-warning-color, #d7b740);
+      }
+      .success {
+        --dile-icon-color: var(--dile-alert-success-color, #00900f);
+      }
+      .error {
+        --dile-icon-color: var(--dile-alert-error-color, #cf3535);
+      }
+      .neutral {
+        --dile-icon-color: var(--dile-alert-neutral-color, #2889a7);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      incomingMsg: { type: Object },
+      modalOpened: { type: Boolean },
+    }
+  }
+
+  constructor() {
+    super();
+  }
+
+  get elmodal() {
+    return this.shadowRoot.getElementById('modal');
+  }
+
+  stateChanged(state) {
+    this.incomingMsg = state.feedback.modalMessage; 
+    this.modalOpened = state.feedback.modalOpened;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('modalOpened')) {
+      if(this.modalOpened) {
+          this.elmodal.open();
+      } else if(this.elmodal.opened) {
+          this.elmodal.close();
+      }
+    }
+  }
+  
+  render() {
+    return html`
+      ${this.modalElement}
+    `;
+  }
+
+  get modalElement() {
+      return html`
+        <dile-modal id="modal" blocking @dile-modal-closed=${this.close}>
+          <div class="content">
+            ${this.incomingMsg?.icon
+              ? html`<div class="icon"><dile-icon class="${this.incomingMsg.iconClass}" .icon="${this.incomingMsg.icon}"></dile-icon></div>`
+              : ''
+            }
+            
+            <div class="message">${this.incomingMsg?.message}</div>
+          </div>
+          <div class="actions">
+            <dile-button class="cancel" @click="${this.close}">${this.incomingMsg?.label}</dile-button>
+          </div>
+        </dile-modal>
+      `
+  }
+
+  close() {
+    store.dispatch(modalClose());
+  }
+}

package/src/lib/DileFeedback.js

@@ -1,4 +1,37 @@
-import { positiveFeedback, negativeFeedback, neutralFeedback, startLoading, stopLoading } from '../redux/feedback-slice';
+import { infoIcon, warningIcon,  doneIcon, errorIcon} from '@dile/icons';
+
+import { 
+  positiveFeedback, 
+  negativeFeedback, 
+  neutralFeedback, 
+  startLoading, 
+  stopLoading,
+  modalMessage,
+  modalClose,
+} from '../redux/feedback-slice';
+
+const AVAILABLE_ICONS = [
+  {
+    name: 'info',
+    icon: infoIcon,
+    iconClass: 'neutral',
+  },
+  {
+    name: 'warning',
+    icon: warningIcon,
+    iconClass: 'warning',
+  },
+  {
+    name: 'success',
+    icon: doneIcon,
+    iconClass: 'success',
+  },
+  {
+    name: 'error',
+    icon: errorIcon,
+    iconClass: 'error',
+  },
+];
 
 export const DileFeedback = (store) => (Superclass) => class extends Superclass {
   positiveFeedback(msg) { 
@@ -16,4 +49,17 @@ export const DileFeedback = (store) => (Superclass) => class extends Superclass
   stopLoading() {
     store.dispatch(stopLoading());
   }
+  modalFeedback(msg, label = "Close", icon = null) {
+    let selectedIcon = AVAILABLE_ICONS.find(item => item.name == icon);
+    store.dispatch(modalMessage({
+      message: msg,
+      label,
+      icon: selectedIcon?.icon,
+      iconClass: selectedIcon?.iconClass
+    }));
+  }
+
+  closeModalFeedback() {
+    store.dispatch(modalClose())
+  }
 }

package/src/redux/feedback-slice.js

@@ -1,10 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+const MODAL_DEFAULT_MESSAGE = {
+  message: '',
+  icon: null,
+  iconClass: null,
+  label: 'Close',
+}
+
 export const feedbackSlice = createSlice({
   name: 'feedback',
   initialState: {
     message: null,
     loading: false,
+    modalMessage: null,
+    modalOpened: false,
   },
   reducers: {
     positiveFeedback(state, action) {
@@ -30,6 +39,16 @@ export const feedbackSlice = createSlice({
     },
     stopLoading(state) {
       state.loading = false;
+    },
+    modalMessage(state, action) {
+      state.modalMessage = {
+        ...MODAL_DEFAULT_MESSAGE,
+        ...action.payload,
+      }
+      state.modalOpened = true;
+    },
+    modalClose(state) {
+      state.modalOpened = false;
     }
   }
 });
@@ -40,4 +59,6 @@ export const {
   neutralFeedback,
   startLoading,
   stopLoading,
+  modalMessage,
+  modalClose,
 } = feedbackSlice.actions;