verben-ng-ui 1.4.0 → 1.4.2

package/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/verben-ng-ui",
+  "assets": [
+    "./assets",
+    "./styles",
+    "./THEMING.md",
+    "./INTEGRATION.md"
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "lodash",
+    "xlsx"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verben-ng-ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "author": "Verbena Logic",
   "repository": {
     "type": "git",
@@ -15,6 +15,9 @@
     "javascript",
     "typescript"
   ],
+  "scripts": {
+    "build-watch": "ng build --watch"
+  },
   "peerDependencies": {
     "@angular/cdk": "^14.0.0 || ^18.0.0",
     "@angular/common": "^14.0.0 || ^18.0.0",
@@ -27,305 +30,8 @@
     "xlsx": "^0.18.5"
   },
   "sideEffects": false,
-  "module": "fesm2022/verben-ng-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/verben-ng-ui.mjs",
-      "esm": "./esm2022/verben-ng-ui.mjs",
-      "default": "./fesm2022/verben-ng-ui.mjs"
-    },
-    "./src/lib/control-options": {
-      "types": "./src/lib/control-options/index.d.ts",
-      "esm2022": "./esm2022/src/lib/control-options/verben-ng-ui-src-lib-control-options.mjs",
-      "esm": "./esm2022/src/lib/control-options/verben-ng-ui-src-lib-control-options.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-control-options.mjs"
-    },
-    "./src/lib/convert-to-integer": {
-      "types": "./src/lib/convert-to-integer/index.d.ts",
-      "esm2022": "./esm2022/src/lib/convert-to-integer/verben-ng-ui-src-lib-convert-to-integer.mjs",
-      "esm": "./esm2022/src/lib/convert-to-integer/verben-ng-ui-src-lib-convert-to-integer.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-convert-to-integer.mjs"
-    },
-    "./src/lib/email-validator": {
-      "types": "./src/lib/email-validator/index.d.ts",
-      "esm2022": "./esm2022/src/lib/email-validator/verben-ng-ui-src-lib-email-validator.mjs",
-      "esm": "./esm2022/src/lib/email-validator/verben-ng-ui-src-lib-email-validator.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-email-validator.mjs"
-    },
-    "./src/lib/convert-to-number": {
-      "types": "./src/lib/convert-to-number/index.d.ts",
-      "esm2022": "./esm2022/src/lib/convert-to-number/verben-ng-ui-src-lib-convert-to-number.mjs",
-      "esm": "./esm2022/src/lib/convert-to-number/verben-ng-ui-src-lib-convert-to-number.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-convert-to-number.mjs"
-    },
-    "./src/lib/models": {
-      "types": "./src/lib/models/index.d.ts",
-      "esm2022": "./esm2022/src/lib/models/verben-ng-ui-src-lib-models.mjs",
-      "esm": "./esm2022/src/lib/models/verben-ng-ui-src-lib-models.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-models.mjs"
-    },
-    "./src/lib/number-range": {
-      "types": "./src/lib/number-range/index.d.ts",
-      "esm2022": "./esm2022/src/lib/number-range/verben-ng-ui-src-lib-number-range.mjs",
-      "esm": "./esm2022/src/lib/number-range/verben-ng-ui-src-lib-number-range.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-number-range.mjs"
-    },
-    "./src/lib/phone-number": {
-      "types": "./src/lib/phone-number/index.d.ts",
-      "esm2022": "./esm2022/src/lib/phone-number/verben-ng-ui-src-lib-phone-number.mjs",
-      "esm": "./esm2022/src/lib/phone-number/verben-ng-ui-src-lib-phone-number.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-phone-number.mjs"
-    },
-    "./src/lib/required-input": {
-      "types": "./src/lib/required-input/index.d.ts",
-      "esm2022": "./esm2022/src/lib/required-input/verben-ng-ui-src-lib-required-input.mjs",
-      "esm": "./esm2022/src/lib/required-input/verben-ng-ui-src-lib-required-input.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-required-input.mjs"
-    },
-    "./src/lib/theme": {
-      "types": "./src/lib/theme/index.d.ts",
-      "esm2022": "./esm2022/src/lib/theme/verben-ng-ui-src-lib-theme.mjs",
-      "esm": "./esm2022/src/lib/theme/verben-ng-ui-src-lib-theme.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-theme.mjs"
-    },
-    "./src/lib/services": {
-      "types": "./src/lib/services/index.d.ts",
-      "esm2022": "./esm2022/src/lib/services/verben-ng-ui-src-lib-services.mjs",
-      "esm": "./esm2022/src/lib/services/verben-ng-ui-src-lib-services.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-services.mjs"
-    },
-    "./src/lib/theme-switcher": {
-      "types": "./src/lib/theme-switcher/index.d.ts",
-      "esm2022": "./esm2022/src/lib/theme-switcher/verben-ng-ui-src-lib-theme-switcher.mjs",
-      "esm": "./esm2022/src/lib/theme-switcher/verben-ng-ui-src-lib-theme-switcher.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-theme-switcher.mjs"
-    },
-    "./src/lib/validate": {
-      "types": "./src/lib/validate/index.d.ts",
-      "esm2022": "./esm2022/src/lib/validate/verben-ng-ui-src-lib-validate.mjs",
-      "esm": "./esm2022/src/lib/validate/verben-ng-ui-src-lib-validate.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-validate.mjs"
-    },
-    "./src/lib/validate-input": {
-      "types": "./src/lib/validate-input/index.d.ts",
-      "esm2022": "./esm2022/src/lib/validate-input/verben-ng-ui-src-lib-validate-input.mjs",
-      "esm": "./esm2022/src/lib/validate-input/verben-ng-ui-src-lib-validate-input.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-validate-input.mjs"
-    },
-    "./src/lib/verbena-button": {
-      "types": "./src/lib/verbena-button/index.d.ts",
-      "esm2022": "./esm2022/src/lib/verbena-button/verben-ng-ui-src-lib-verbena-button.mjs",
-      "esm": "./esm2022/src/lib/verbena-button/verben-ng-ui-src-lib-verbena-button.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-verbena-button.mjs"
-    },
-    "./src/lib/verbena-badge": {
-      "types": "./src/lib/verbena-badge/index.d.ts",
-      "esm2022": "./esm2022/src/lib/verbena-badge/verben-ng-ui-src-lib-verbena-badge.mjs",
-      "esm": "./esm2022/src/lib/verbena-badge/verben-ng-ui-src-lib-verbena-badge.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-verbena-badge.mjs"
-    },
-    "./src/lib/verbena-switch": {
-      "types": "./src/lib/verbena-switch/index.d.ts",
-      "esm2022": "./esm2022/src/lib/verbena-switch/verben-ng-ui-src-lib-verbena-switch.mjs",
-      "esm": "./esm2022/src/lib/verbena-switch/verben-ng-ui-src-lib-verbena-switch.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-verbena-switch.mjs"
-    },
-    "./src/lib/verbena-textarea": {
-      "types": "./src/lib/verbena-textarea/index.d.ts",
-      "esm2022": "./esm2022/src/lib/verbena-textarea/verben-ng-ui-src-lib-verbena-textarea.mjs",
-      "esm": "./esm2022/src/lib/verbena-textarea/verben-ng-ui-src-lib-verbena-textarea.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-verbena-textarea.mjs"
-    },
-    "./src/lib/verbena-input": {
-      "types": "./src/lib/verbena-input/index.d.ts",
-      "esm2022": "./esm2022/src/lib/verbena-input/verben-ng-ui-src-lib-verbena-input.mjs",
-      "esm": "./esm2022/src/lib/verbena-input/verben-ng-ui-src-lib-verbena-input.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-verbena-input.mjs"
-    },
-    "./src/lib/components/card-data-view": {
-      "types": "./src/lib/components/card-data-view/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/card-data-view/verben-ng-ui-src-lib-components-card-data-view.mjs",
-      "esm": "./esm2022/src/lib/components/card-data-view/verben-ng-ui-src-lib-components-card-data-view.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-card-data-view.mjs"
-    },
-    "./src/lib/components/card": {
-      "types": "./src/lib/components/card/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/card/verben-ng-ui-src-lib-components-card.mjs",
-      "esm": "./esm2022/src/lib/components/card/verben-ng-ui-src-lib-components-card.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-card.mjs"
-    },
-    "./src/lib/components/chip": {
-      "types": "./src/lib/components/chip/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/chip/verben-ng-ui-src-lib-components-chip.mjs",
-      "esm": "./esm2022/src/lib/components/chip/verben-ng-ui-src-lib-components-chip.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-chip.mjs"
-    },
-    "./src/lib/components/data-columns": {
-      "types": "./src/lib/components/data-columns/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-columns/verben-ng-ui-src-lib-components-data-columns.mjs",
-      "esm": "./esm2022/src/lib/components/data-columns/verben-ng-ui-src-lib-components-data-columns.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-columns.mjs"
-    },
-    "./src/lib/components/data-filter": {
-      "types": "./src/lib/components/data-filter/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-filter/verben-ng-ui-src-lib-components-data-filter.mjs",
-      "esm": "./esm2022/src/lib/components/data-filter/verben-ng-ui-src-lib-components-data-filter.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-filter.mjs"
-    },
-    "./src/lib/components/data-export": {
-      "types": "./src/lib/components/data-export/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-export/verben-ng-ui-src-lib-components-data-export.mjs",
-      "esm": "./esm2022/src/lib/components/data-export/verben-ng-ui-src-lib-components-data-export.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-export.mjs"
-    },
-    "./src/lib/components/data-table": {
-      "types": "./src/lib/components/data-table/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-table/verben-ng-ui-src-lib-components-data-table.mjs",
-      "esm": "./esm2022/src/lib/components/data-table/verben-ng-ui-src-lib-components-data-table.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-table.mjs"
-    },
-    "./src/lib/components/data-sort": {
-      "types": "./src/lib/components/data-sort/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-sort/verben-ng-ui-src-lib-components-data-sort.mjs",
-      "esm": "./esm2022/src/lib/components/data-sort/verben-ng-ui-src-lib-components-data-sort.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-sort.mjs"
-    },
-    "./src/lib/components/data-view": {
-      "types": "./src/lib/components/data-view/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-view/verben-ng-ui-src-lib-components-data-view.mjs",
-      "esm": "./esm2022/src/lib/components/data-view/verben-ng-ui-src-lib-components-data-view.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-view.mjs"
-    },
-    "./src/lib/components/data-import": {
-      "types": "./src/lib/components/data-import/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-import/verben-ng-ui-src-lib-components-data-import.mjs",
-      "esm": "./esm2022/src/lib/components/data-import/verben-ng-ui-src-lib-components-data-import.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-import.mjs"
-    },
-    "./src/lib/components/date-picker": {
-      "types": "./src/lib/components/date-picker/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/date-picker/verben-ng-ui-src-lib-components-date-picker.mjs",
-      "esm": "./esm2022/src/lib/components/date-picker/verben-ng-ui-src-lib-components-date-picker.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-date-picker.mjs"
-    },
-    "./src/lib/components/data-xport": {
-      "types": "./src/lib/components/data-xport/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-xport/verben-ng-ui-src-lib-components-data-xport.mjs",
-      "esm": "./esm2022/src/lib/components/data-xport/verben-ng-ui-src-lib-components-data-xport.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-xport.mjs"
-    },
-    "./src/lib/components/drop-down": {
-      "types": "./src/lib/components/drop-down/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/drop-down/verben-ng-ui-src-lib-components-drop-down.mjs",
-      "esm": "./esm2022/src/lib/components/drop-down/verben-ng-ui-src-lib-components-drop-down.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-drop-down.mjs"
-    },
-    "./src/lib/components/data-extend": {
-      "types": "./src/lib/components/data-extend/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/data-extend/verben-ng-ui-src-lib-components-data-extend.mjs",
-      "esm": "./esm2022/src/lib/components/data-extend/verben-ng-ui-src-lib-components-data-extend.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-data-extend.mjs"
-    },
-    "./src/lib/components/icons": {
-      "types": "./src/lib/components/icons/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/icons/verben-ng-ui-src-lib-components-icons.mjs",
-      "esm": "./esm2022/src/lib/components/icons/verben-ng-ui-src-lib-components-icons.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-icons.mjs"
-    },
-    "./src/lib/components/image": {
-      "types": "./src/lib/components/image/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/image/verben-ng-ui-src-lib-components-image.mjs",
-      "esm": "./esm2022/src/lib/components/image/verben-ng-ui-src-lib-components-image.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-image.mjs"
-    },
-    "./src/lib/components/notification": {
-      "types": "./src/lib/components/notification/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/notification/verben-ng-ui-src-lib-components-notification.mjs",
-      "esm": "./esm2022/src/lib/components/notification/verben-ng-ui-src-lib-components-notification.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-notification.mjs"
-    },
-    "./src/lib/components/pop-up": {
-      "types": "./src/lib/components/pop-up/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/pop-up/verben-ng-ui-src-lib-components-pop-up.mjs",
-      "esm": "./esm2022/src/lib/components/pop-up/verben-ng-ui-src-lib-components-pop-up.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-pop-up.mjs"
-    },
-    "./src/lib/components/sort-table": {
-      "types": "./src/lib/components/sort-table/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/sort-table/verben-ng-ui-src-lib-components-sort-table.mjs",
-      "esm": "./esm2022/src/lib/components/sort-table/verben-ng-ui-src-lib-components-sort-table.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-sort-table.mjs"
-    },
-    "./src/lib/components/number-input": {
-      "types": "./src/lib/components/number-input/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/number-input/verben-ng-ui-src-lib-components-number-input.mjs",
-      "esm": "./esm2022/src/lib/components/number-input/verben-ng-ui-src-lib-components-number-input.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-number-input.mjs"
-    },
-    "./src/lib/components/shared": {
-      "types": "./src/lib/components/shared/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/shared/verben-ng-ui-src-lib-components-shared.mjs",
-      "esm": "./esm2022/src/lib/components/shared/verben-ng-ui-src-lib-components-shared.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-shared.mjs"
-    },
-    "./src/lib/components/svg": {
-      "types": "./src/lib/components/svg/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/svg/verben-ng-ui-src-lib-components-svg.mjs",
-      "esm": "./esm2022/src/lib/components/svg/verben-ng-ui-src-lib-components-svg.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-svg.mjs"
-    },
-    "./src/lib/components/table-filter": {
-      "types": "./src/lib/components/table-filter/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/table-filter/verben-ng-ui-src-lib-components-table-filter.mjs",
-      "esm": "./esm2022/src/lib/components/table-filter/verben-ng-ui-src-lib-components-table-filter.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-table-filter.mjs"
-    },
-    "./src/lib/components/tooltip": {
-      "types": "./src/lib/components/tooltip/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/tooltip/verben-ng-ui-src-lib-components-tooltip.mjs",
-      "esm": "./esm2022/src/lib/components/tooltip/verben-ng-ui-src-lib-components-tooltip.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-tooltip.mjs"
-    },
-    "./src/lib/components/verben-dialogue": {
-      "types": "./src/lib/components/verben-dialogue/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/verben-dialogue/verben-ng-ui-src-lib-components-verben-dialogue.mjs",
-      "esm": "./esm2022/src/lib/components/verben-dialogue/verben-ng-ui-src-lib-components-verben-dialogue.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-verben-dialogue.mjs"
-    },
-    "./src/lib/components/verben-mail": {
-      "types": "./src/lib/components/verben-mail/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/verben-mail/verben-ng-ui-src-lib-components-verben-mail.mjs",
-      "esm": "./esm2022/src/lib/components/verben-mail/verben-ng-ui-src-lib-components-verben-mail.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-verben-mail.mjs"
-    },
-    "./src/lib/components/verben-time-picker": {
-      "types": "./src/lib/components/verben-time-picker/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/verben-time-picker/verben-ng-ui-src-lib-components-verben-time-picker.mjs",
-      "esm": "./esm2022/src/lib/components/verben-time-picker/verben-ng-ui-src-lib-components-verben-time-picker.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-verben-time-picker.mjs"
-    },
-    "./src/lib/components/verbena-tab": {
-      "types": "./src/lib/components/verbena-tab/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/verbena-tab/verben-ng-ui-src-lib-components-verbena-tab.mjs",
-      "esm": "./esm2022/src/lib/components/verbena-tab/verben-ng-ui-src-lib-components-verbena-tab.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-verbena-tab.mjs"
-    },
-    "./src/lib/components/verbena-icon": {
-      "types": "./src/lib/components/verbena-icon/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/verbena-icon/verben-ng-ui-src-lib-components-verbena-icon.mjs",
-      "esm": "./esm2022/src/lib/components/verbena-icon/verben-ng-ui-src-lib-components-verbena-icon.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-verbena-icon.mjs"
-    },
-    "./src/lib/components/visible-column": {
-      "types": "./src/lib/components/visible-column/index.d.ts",
-      "esm2022": "./esm2022/src/lib/components/visible-column/verben-ng-ui-src-lib-components-visible-column.mjs",
-      "esm": "./esm2022/src/lib/components/visible-column/verben-ng-ui-src-lib-components-visible-column.mjs",
-      "default": "./fesm2022/verben-ng-ui-src-lib-components-visible-column.mjs"
-    }
+  "devDependencies": {
+    "@types/lodash": "^4.17.10",
+    "autoprefixer": "^10.4.20"
   }
-}
+}

package/src/lib/components/card/card.component.css

@@ -0,0 +1,20 @@
+  .card {
+    border: 1px solid var(--vbn-color-border);
+    border-radius: var(--vbn-radius-sm);
+    overflow: hidden;
+    box-shadow: var(--vbn-shadow-sm);
+  }
+  .card-header {
+    background-color: var(--vbn-color-surface-alt);
+    padding: 10px 15px;
+    border-bottom: 1px solid var(--vbn-color-border);
+  }
+  .card-body {
+    padding: 15px;
+  }
+  .card-footer {
+    background-color: var(--vbn-color-surface-alt);
+    padding: 10px 15px;
+    border-top: 1px solid var(--vbn-color-border);
+  }
+  

package/src/lib/components/card/card.component.html

@@ -0,0 +1,23 @@
+  <div class="card"
+  [style.background-color]="bgColor"
+  [style.margin]="mg"
+  [style.border]="border"
+  [style.border-radius]="borderRadius"
+  [style.color]="textColor"
+  [style.width]="width"
+  [style.height]="height"
+  [ngClass]="disabled?'disable':''"
+  [style.aspect-ratio]="aspectRatio"
+  [style.padding]="pd"
+  >
+    <div class="card-header" *ngIf="hasHeader">
+      <ng-content select="[card-header]"></ng-content>
+    </div>
+    <div class="card-body" *ngIf="hasBody">
+      <ng-content select="[card-body]"></ng-content>
+    </div>
+    <div class="card-footer" *ngIf="hasFooter">
+      <ng-content select="[card-footer]"></ng-content>
+    </div>
+  </div>
+  

package/src/lib/components/card/card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/card/card.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { Component, ContentChild, ElementRef, AfterContentInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'verben-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css']
+})
+
+export class CardComponent implements AfterContentInit {
+  hasHeader = false;
+  hasFooter = false;
+  hasBody = false;
+  @Input() pd = '10px';
+  @Input() mg = '0px';
+  @Input() height?:string ;
+  @Input() width?:string ;
+  @Input() textColor?:string ;
+  @Input() bgColor?:string ;
+  @Input() border?:string ;
+  @Input() borderRadius?:string ;
+  @Input() disabled:boolean=false ;
+  @Input() aspectRatio?:number ;
+  @ContentChild('card-header', { static: false }) cardHeader: ElementRef | undefined;
+  @ContentChild('card-body', { static: false }) cardBody: ElementRef | undefined;
+  @ContentChild('card-footer', { static: false }) cardFooter: ElementRef | undefined;
+
+  ngAfterContentInit() {
+    this.hasHeader = !this.cardHeader;
+    this.hasBody = !this.cardBody;
+    this.hasFooter = !this.cardFooter;
+  }
+}

package/src/lib/components/card/card.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CardComponent } from './card.component';
+
+@NgModule({
+  declarations: [CardComponent],
+  imports: [CommonModule],
+  exports: [CardComponent],
+})
+export class CardModule {}

package/src/lib/components/card/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.css

@@ -0,0 +1,3 @@
+:host{
+  padding: 0px 15px;
+}

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.html

@@ -0,0 +1 @@
+  <ng-content></ng-content>  

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardDataViewFooterComponent } from './card-data-view-footer.component';
+
+describe('CardDataViewFooterComponent', () => {
+  let component: CardDataViewFooterComponent;
+  let fixture: ComponentFixture<CardDataViewFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardDataViewFooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardDataViewFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/card-data-view/card-data-view-footer/card-data-view-footer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'verben-card-data-view-footer',
+  templateUrl: './card-data-view-footer.component.html',
+  styleUrl: './card-data-view-footer.component.css'
+})
+export class CardDataViewFooterComponent {
+
+}

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.css

@@ -0,0 +1,7 @@
+:host{
+      padding: 15px;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+}

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.html

@@ -0,0 +1 @@
+  <ng-content></ng-content>  

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardDataViewHeaderComponent } from './card-data-view-header.component';
+
+describe('CardDataViewHeaderComponent', () => {
+  let component: CardDataViewHeaderComponent;
+  let fixture: ComponentFixture<CardDataViewHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardDataViewHeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardDataViewHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/card-data-view/card-data-view-header/card-data-view-header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'verben-card-data-view-header',
+  templateUrl: './card-data-view-header.component.html',
+  styleUrl: './card-data-view-header.component.css'
+})
+export class CardDataViewHeaderComponent {
+
+}

package/src/lib/components/card-data-view/card-data-view.component.css

@@ -0,0 +1,59 @@
+.container {
+  gap: 10px;
+}
+
+:host {
+  border-radius: 12px;
+}
+
+.master-detail-container {
+  display: grid;
+  grid-template-columns: 30% 70%;
+  gap: 15px;
+  justify-content: center;
+}
+
+.master-only-container {
+  display: grid;
+  grid-template-columns: 100%;
+  justify-content: center;
+}
+
+.paginator-text {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.toRight {
+  align-self: flex-end;
+}
+
+.card-detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 15px 20px 20px 20px;
+}
+
+::ng-deep
+  .master-detail-container
+  > div
+  > verben-left-card-data-view
+  > verben-left-card-data {
+  display: flex !important;
+  flex-direction: column;
+}
+
+::ng-deep
+  .master-detail-container
+  > div
+  .cdk-virtual-scroll-content-wrapper
+  > verben-left-card-data-view
+  > verben-left-card-data {
+  display: flex !important;
+  flex-direction: column;
+}