@indice/ng-components 0.2.138-beta → 0.2.139

package/CHANGELOG.md

@@ -0,0 +1 @@
+# INDICE ANGULAR Components Change log

package/README.md

@@ -1,4 +1,4 @@
-# INDICE ANGULAR Components
-
-Indice common components for Angular 2+
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+# INDICE ANGULAR Components
+
+Indice common components for Angular 2+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ng-components'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-components",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": [
+      "./src/assets/styles/*.*"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indice/ng-components",
-  "version": "0.2.138-beta",
+  "version": "0.2.139",
   "description": "Indice common components for Angular v12",
   "repository": {
     "type": "git",
@@ -36,11 +36,20 @@
   "dependencies": {
     "tslib": "^2.0.0"
   },
-  "main": "bundles/indice-ng-components.umd.js",
-  "module": "fesm2015/indice-ng-components.js",
-  "es2015": "fesm2015/indice-ng-components.js",
-  "esm2015": "esm2015/indice-ng-components.js",
-  "fesm2015": "fesm2015/indice-ng-components.js",
-  "typings": "indice-ng-components.d.ts",
-  "sideEffects": false
-}
+  "devDependencies": {
+    "@angular/common": "12.0.1",
+    "@angular/core": "12.0.1",
+    "@angular/router": "^12.0.1",
+    "@indice/ng-auth": "^0.1.4",
+    "oidc-client": "^1.11.5",
+    "@tailwindcss/aspect-ratio": "^0.2.0",
+    "@tailwindcss/forms": "^0.3.2",
+    "@tailwindcss/line-clamp": "^0.2.0",
+    "@tailwindcss/typography": "^0.4.0",
+    "rxjs": "^6.6.7",
+    "patch-package": "^6.4.7",
+    "postcss": "^8.4.12",
+    "scss-bundle": "^3.1.2",
+    "tailwindcss": "^2.1.2"
+  }
+}

package/scripts/css-bundle.ts

@@ -0,0 +1,33 @@
+const pathLib = require('path');
+const scssBundler = require('scss-bundle');
+const fs = require('fs-extra');
+
+/** Bundles all SCSS files into a single file */
+async function bundleScss(): Promise<void> {
+  console.log('running bundleScss');
+  const isolatedStyles = ['modal.css'];
+  const bundler = new scssBundler.Bundler();
+  const sourcePath = './projects/ng-components/src/_styles.css';
+  const { found, bundledContent, imports } = await bundler.bundle(sourcePath, ['./src/**/*.css', './src/**/*.scss']);
+  if (imports) {
+    console.log('running bundleScss - imports found');
+    const cwd = process.cwd();
+
+    const filesNotFound = imports.filter((x: any) => !x.found).map((x: any) => pathLib.relative(cwd, x.filePath));
+
+    if (filesNotFound.length) {
+      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
+      throw new Error('One or more SCSS imports failed');
+    }
+  }
+
+  if (found) {
+    await fs.writeFile('./dist/ng-components/_styles.css', bundledContent);
+    isolatedStyles.forEach((f) => {
+      fs.copy(`./projects/ng-components/src/assets/styles/${f}`, `./dist/ng-components/${f}`);
+    });
+    console.log('running bundleScss - finidshed file');
+  }
+}
+
+bundleScss();

package/src/_styles.css

@@ -0,0 +1,36 @@
+@import './assets/styles/base.css';
+@import './assets/styles/components.css';
+@import './assets/styles/nav-links.css';
+
+@import './assets/styles/shell-layout.css';
+@import './assets/styles/view-layout.css';
+@import './assets/styles/model-view-layout.css';
+@import './assets/styles/form-layout.css';
+@import './assets/styles/side-view-layout.css';
+
+@import './assets/styles/side-pane.css';
+@import './assets/styles/cards.css';
+@import './assets/styles/pager.css';
+@import './assets/styles/drop-down-menu.css';
+@import './assets/styles/collapsible-panel.css';
+@import './assets/styles/list-view.css';
+@import './assets/styles/date-picker.component.css';
+@import './assets/styles/toast.css';
+@import './assets/styles/avatar-initials.css';
+@import './assets/styles/toggle.css';
+@import './assets/styles/modal.css';
+
+@import './assets/styles/notifications-indicator.component.css';
+@import './assets/styles/indice-ng-icons-inline.css';
+
+.modal-active {
+  overflow: hidden;
+}
+
+button:active {
+  transform: translateY(2px);
+}
+
+a:active {
+  transform: translateY(2px);
+}

package/src/_tests/utilities.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilitiesService } from '../lib/services/utilities.service';
+
+describe('UtilitiesService', () => {
+  let service: UtilitiesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UtilitiesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/assets/styles/avatar-initials.css

@@ -0,0 +1,37 @@
+@layer components {
+
+  .avatar-container {
+    @apply inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-800;
+  }
+
+  .avatar-container-large {
+    @apply inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-500;
+  }
+
+  .avatar-text {
+    @apply text-sm font-medium leading-none text-blue-300;
+  }
+
+  .avatar-text-large {
+    @apply text-xl font-medium leading-none text-white;
+  }
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.circle img {
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+}
+
+.circle .initials {
+  color: #FFFFFF;
+  font-size: 20px;
+  line-height: 19px;
+  letter-spacing: 0.2625px;
+}

package/src/assets/styles/base.css

@@ -0,0 +1,46 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@layer base {
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  a {
+    @apply text-gray-600;
+  }
+
+  select {
+    @apply max-w-lg block focus:ring-gray-300 ring-opacity-25 focus:border-gray-300 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-200 rounded-sm;
+  }
+
+  input[type=text] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=password] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=email] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=number] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  textarea {
+    @apply shadow-sm focus:ring-gray-500 focus:border-gray-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm;
+  }
+
+}

package/src/assets/styles/cards.css

@@ -0,0 +1,71 @@
+@layer components {
+  .card-deck-busy{
+    @apply animate-pulse;
+  }
+  
+  .cards-deck-1 {
+    @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1;
+  }
+
+  .cards-deck-2 {
+    @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2;
+  }
+
+  .cards-deck-3 {
+    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3;
+  }
+
+  .cards-deck-4 {
+    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
+  }
+
+  .card {
+    @apply relative h-full border border-gray-200 bg-white shadow-sm rounded-sm overflow-hidden;
+  }
+
+  .card-body {
+    @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6;
+  }
+
+  .card-img-top {
+    @apply object-cover w-full h-48;
+  }
+
+  .card-header {
+    @apply inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 border-b border-gray-200;
+  }
+
+  .card-footer {
+    @apply absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 border-t border-gray-200;
+  }
+
+  .kpi-tile-title-container {
+    @apply  uppercase mb-2 overflow-ellipsis overflow-hidden;
+  }
+
+  .kpi-tile-action {
+    @apply hover:text-gray-500;
+  }
+
+  .kpi-tile-value {
+    @apply text-6xl font-thin my-6;
+  }
+
+  .gallery-deck-1 {
+    @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2;
+  }
+
+  .gallery-deck-2 {
+    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
+  }
+  
+
+  .gallery-deck-3 {
+    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
+  }
+  
+
+  .gallery-deck-4 {
+    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
+  }
+}

package/src/assets/styles/collapsible-panel.css

@@ -0,0 +1,25 @@
+@layer components {
+  .collapsible-panel-container {
+    @apply bg-white border border-gray-200 mb-2;
+  }
+
+  .collapsible-panel-container-shadow {
+    @apply shadow-sm;
+  }
+
+  .collapsible-panel-container-inner {
+    @apply relative border-b border-gray-200;
+  }
+
+  .collapsible-panel-button {
+    @apply w-full px-8 py-6 text-left;
+  }
+
+  .collapsible-panel-button-content-container {
+    @apply flex items-center justify-between;
+  }
+
+  .collapsible-panel-content-container {
+    @apply relative overflow-hidden transition-all duration-700;
+  }
+}

package/src/assets/styles/components.css

@@ -0,0 +1,34 @@
+@layer components {
+
+  .md-visible {
+    @apply hidden md:block;
+  }
+
+  .btn-outline {
+    @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm;
+  }
+
+  .btn-outline:disabled {
+    @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
+  }
+
+
+  .btn-view-header {
+    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-900;
+  }
+
+
+  .btn-form-view-header {
+    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+  }
+
+  .btn-form-view-header-search {
+    @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+  }
+
+  .selected-view-indicator {
+    @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
+  }
+
+}
+

package/src/assets/styles/drop-down-menu.css

@@ -0,0 +1,50 @@
+@layer components {
+  .dropdown-container {
+    @apply relative w-auto;
+  }
+
+  .dropdown-button {
+    @apply bg-white relative w-full border border-gray-300 rounded-sm shadow-sm pl-3 pr-10 py-2 text-left cursor-default
+  focus:outline-none focus:border-gray-500 sm:text-sm;
+  }
+
+  .dropdown-selected-text {
+    @apply block truncate;
+  }
+
+  .dropdown-button-icon {
+    @apply absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none;
+  }
+
+  .dropdown-arrow {
+    @apply h-5 w-5 text-gray-400;
+  }
+
+  .dropdown-ul {
+    @apply absolute z-50 mt-1 w-auto bg-white shadow-lg max-h-60 rounded-sm py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm overflow-x-hidden;
+  }
+
+  .dropdown-li {
+    @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 min-w-max;
+  }
+
+  .dropdown-li-selected {
+    @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 min-w-max;
+  }
+
+  .dropdown-li-text {
+    @apply font-normal block truncate;
+  }
+
+  .dropdown-li-selected-text {
+    @apply font-semibold block truncate;
+  }
+
+  .dropdown-li-selected-indicator-container {
+    @apply text-gray-600 absolute inset-y-0 right-0 flex items-center pr-4;
+  }
+
+  .dropdown-li-selected-indicator {
+    @apply h-5 w-5;
+  }
+}

package/src/assets/styles/form-layout.css

@@ -0,0 +1,49 @@
+@layer components {
+  .form-layout-container {
+    @apply bg-white shadow-sm border border-gray-200 rounded-sm;
+  }
+
+  .form-header {
+    @apply px-4 py-5 sm:px-6 bg-gray-50 sm:flex sm:items-center sm:justify-between;
+  }
+
+  .form-header-inner {
+    @apply flex-1 min-w-0;
+  }
+
+  .form-title {
+    @apply text-lg leading-6 font-medium text-gray-900;
+  }
+
+  .form-subtitle {
+    @apply mt-1 max-w-2xl text-sm text-gray-500;
+  }
+
+  .form-header-actions {
+    @apply mt-4 flex md:mt-0 md:ml-4;
+  }
+
+  .form-content-container {
+    @apply border-t border-gray-200 px-4 py-5 sm:p-0;
+  }
+
+  .form-content-container-inner {
+    @apply flex flex-col pt-4;
+  }
+
+  .form-header-search-input {
+    @apply block w-60 bg-gray-50 rounded-sm text-sm text-gray-900 placeholder-gray-500 outline-none;
+  }
+
+  .field-label {
+    @apply block text-sm py-2 font-medium text-gray-500;
+  }
+
+  .field-info {
+    @apply mt-2 text-xs text-gray-400 py-2;
+  }
+
+  .form-actions {
+    @apply px-4 py-3 bg-gray-100 text-gray-700 text-right sm:px-6 flex justify-end;
+  }
+}