ids-enterprise-ng 18.6.0-dev.17 → 18.6.0-dev.18

package/.eslintrc.json

@@ -0,0 +1,81 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+        "allowImportExportEverywhere": true,
+        "project": [
+          "projects/ids-enterprise-ng/tsconfig.lib.json",
+          "projects/ids-enterprise-ng/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/component-class-suffix": [
+          "error",
+          {
+            "suffixes": [
+              "Component"
+            ]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "soho",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-class-suffix": [
+          "error",
+          {
+            "suffixes": [
+              "Directive"
+            ]
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "soho",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-attribute-decorator": "error",
+        "@angular-eslint/no-forward-ref": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "brace-style": [
+          "error",
+          "1tbs"
+        ],
+        "id-blacklist": "off",
+        "id-match": "off",
+        "no-multiple-empty-lines": "error",
+        "no-redeclare": "error",
+        "no-underscore-dangle": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/karma.conf.js

@@ -0,0 +1,86 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+const process = require('process');
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+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'),
+      require('karma-phantomjs-launcher'),
+      require('karma-mocha-reporter')
+    ],
+    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
+    },
+    mochaReporter: {
+      output: 'autowatch',
+    },
+    files: [
+      { pattern: '../../node_modules/jquery/dist/jquery.js', watched: false  },
+      { pattern: '../../node_modules/d3/dist/d3.js', watched: false  },
+      { pattern: '../../node_modules/ids-enterprise/dist/js/sohoxi.js', watched: false },
+      { pattern: '../../node_modules/ids-enterprise/dist/js/cultures/en-US.js', watched: false },
+      { pattern: '../../node_modules/ids-enterprise/dist/js/cultures/it-IT.js', watched: false },
+      { pattern: '../../node_modules/ids-enterprise/dist/js/cultures/nl-NL.js', watched: false },
+      { pattern: '../../node_modules/ids-enterprise/dist/js/cultures/hi-IN.js', watched: false },
+      { pattern: '../../node_modules/ids-enterprise/dist/js/cultures/sv-SE.js', watched: false },
+      { pattern: '../../node_modules/ids-enterprise/dist/css/theme-classic-light.css', watched: false },
+    ],
+    preprocessors: {
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+        { type: 'lcov' }
+      ]
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul', 'kjhtml', 'mocha']
+      : ['progress', 'kjhtml', 'mocha'],
+    mocha:{
+      outputFile: 'tests/results.txt'
+    },
+    customLaunchers: {
+      ChromeDebug: {
+          base: 'Chrome',
+          flags: [ '--remote-debugging-port=9333' ]
+      },
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--no-sandbox',
+          '--headless'
+        ]
+      }
+    },
+    port: 9876,
+    logLevel: config.LOG_ERROR,
+    autoWatch: true,
+    browsers: ['ChromeHeadlessNoSandbox'],
+    captureTimeout: 23000,
+    browserDisconnectTolerance: 12, //this one helps
+    browserDisconnectTimeout : 23000,
+    browserNoActivityTimeout : 23000,
+    singleRun: true,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ids-enterprise-ng",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "angular",
+    "classlist.js",
+    "d3",
+    "ids-enterprise",
+    "jquery"
+  ]
+}

package/ng-package.prod.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ids-enterprise-ng",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "angular",
+    "classlist.js",
+    "d3",
+    "ids-enterprise",
+    "jquery"
+  ]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ids-enterprise-ng",
   "slug": "ids-enterprise-ng",
-  "version": "18.6.0-dev.17",
+  "version": "18.6.0-dev.18",
   "peerDependencies": {
     "@angular/common": "^18.2.7",
     "@angular/core": "^18.2.7",
@@ -10,7 +10,7 @@
     "ids-enterprise": "^4.99.1",
     "@types/jquery": "3.5.16",
     "@types/d3": "7.4.0",
-    "ids-enterprise-typings": "18.6.0-dev.16"
+    "ids-enterprise-typings": "18.6.0-dev.18"
   },
   "description": "Infor Design System (IDS) Enterprise Angular Components",
   "repository": {
@@ -27,21 +27,7 @@
     "url": "https://inforwiki.atlassian.net/jira/software/c/projects/IDS/issues"
   },
   "homepage": "https://oxford.awsdev.infor.com/infor-design/enterprise-ng",
-  "module": "fesm2022/ids-enterprise-ng.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ids-enterprise-ng.mjs",
-      "esm": "./esm2022/ids-enterprise-ng.mjs",
-      "default": "./fesm2022/ids-enterprise-ng.mjs"
-    }
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

package/src/lib/about/soho-about.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SohoAboutService } from './soho-about.service';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+  ],
+  exports: [
+  ],
+  providers: [
+    SohoAboutService
+  ]
+})
+export class SohoAboutModule {}

package/src/lib/about/soho-about.ref.ts

@@ -0,0 +1,250 @@
+import { NgZone } from "@angular/core";
+/**
+ * Wrapper for the jQuery about control.
+ */
+export class SohoAboutRef {
+  private eventGuard: SohoAboutDialogEventGuard | null | undefined = {};
+
+  /** Selector referencing the about-dialog after it has been moved to the dialog container. */
+  private jQueryElement?: JQuery;
+
+  /** Soho Control Api */
+  private _about?: SohoAboutStatic;
+
+  /** Dialog placeholder, defaults to $('body')*/
+  private _placeholder: JQuery;
+
+  // -------------------------------------------
+  // Default options block
+  // -------------------------------------------
+
+  /**
+   * Cached options.
+   */
+  private _options: SohoAboutOptions = {};
+
+  /**
+   * Sets the whole options block for this modal dialog.
+   *
+   * @param options - the options to set.
+   */
+  options(options?: SohoAboutOptions): SohoAboutRef {
+    this._options = options || {};
+    return this;
+  }
+
+  /**
+   * Sets the appName on the about dialog
+   *
+   * @param appName - the application name
+   */
+  appName(appName: string): SohoAboutRef {
+    this._options.appName = appName;
+    return this;
+  }
+
+  /**
+   * Sets the additional 'content' that the about dialog displays.
+   *
+   * @param content - the additional text content
+   */
+  content(content: string): SohoAboutRef {
+    this._options.content = content;
+    return this;
+  }
+
+  /**
+   * Sets the copyrightYear of the about dialog.
+   */
+  copyrightYear(copyrightYear: string): SohoAboutRef {
+    this._options.copyrightYear = copyrightYear;
+    return this;
+  }
+
+  /**
+   * Sets Whether or not to show the deviceSpecs
+   *
+   * @param deviceSpecs - if true; the about dialog will show device info
+   */
+  deviceSpecs(deviceSpecs: boolean): SohoAboutRef {
+    this._options.deviceSpecs = deviceSpecs;
+    return this;
+  }
+
+  /**
+   * Sets The Additional productName
+   *
+   * @param productName - the product name
+   */
+  productName(productName: string): SohoAboutRef {
+    this._options.productName = productName;
+    return this;
+  }
+
+  /**
+   * Sets The Additional productName
+   *
+   * @param productName - the product name
+   */
+  useDefaultCopyright(useDefaultCopyright: boolean): SohoAboutRef {
+    this._options.useDefaultCopyright = useDefaultCopyright;
+    return this;
+  }
+
+  /**
+   * Sets about dialog version
+   *
+   * @param version - the semantic version no fx 4.0.1
+   */
+  version(version: string): SohoAboutRef {
+    this._options.version = version;
+    return this;
+  }
+
+  /**
+   * Add extra attributes like id's to the component
+   *
+   * @param attributes - the array or object of attributes to add
+   */
+  attributes(attributes: Array<Object> | Object): SohoAboutRef {
+    this._options.attributes = attributes;
+    return this;
+  }
+
+  /**
+   * Constructor.
+   *
+   * @param placeholder for the about dialog; defaults to the body.
+   */
+  constructor(private ngZone: NgZone) {
+    this._placeholder = $('body');
+  }
+
+  /**
+   * Displays the about dialog.
+   *
+   * @return the dialog ref.
+   */
+  open(): SohoAboutRef {
+    // Returns the body!
+    this._placeholder.about(this._options);
+
+    // Need a better way of locating the about dialog dialog.
+    this.jQueryElement = this._placeholder.find('.about');
+    this._about = this.jQueryElement.data('about');
+
+    this.jQueryElement?.off('beforeopen.about').on('beforeopen.about', ((event: any) => this.ngZone.run(() => this.onBeforeOpen(event))));
+    this.jQueryElement?.off('close.about').on('close.about', ((event: any) => this.ngZone.run(() => this.onClose(event))));
+    this.jQueryElement?.off('afterclose.about').on('afterclose.about', ((event: any) => this.ngZone.run(() => this.onAfterClose(event))));
+
+    return this;
+  }
+
+  /**
+   * Closes the about dialog, if open.
+   *
+   * @param dialogResult - optional result - held for the caller.
+   */
+  close(): SohoAboutRef {
+    if (this._about) {
+      this._about.close();
+    }
+    return this;
+  }
+
+  /**
+   * Registers a before open guard.
+   *
+   * @param eventFn - the function to call before openning the dialog.
+   */
+  beforeOpen(eventFn: (dialogRef?: SohoAboutRef) => boolean): SohoAboutRef {
+    (this.eventGuard as any).beforeOpen = eventFn;
+    return this;
+  }
+
+  /**
+   * Registers a closed guard.
+   *
+   * @param eventFn - the function to call before openning the dialog.
+   */
+  closed(eventFn: (dialogRef?: SohoAboutRef) => boolean): SohoAboutRef {
+    (this.eventGuard as any).closed = eventFn;
+    return this;
+  }
+
+  /**
+   * Registers a after close guard.
+   *
+   * @param eventFn - the function to call before openning the dialog.
+   */
+  afterClose(eventFn: (dialogRef?: SohoAboutRef) => boolean): SohoAboutRef {
+    (this.eventGuard as any).afterClose = eventFn;
+    return this;
+  }
+
+  /**
+   * Handles the 'beforeOpen' event, fired before the modal dialog
+   * has been opened.
+   *
+   * @param event - full event object.
+   *
+   * @return true if the dialog can be opened; otherwise false if veoted.
+   */
+  private onBeforeOpen(_event: any): boolean {
+    const fn: Function = (this.eventGuard?.beforeOpen as any);
+    return fn ? fn.call(this.eventGuard, this) : true;
+  }
+
+  /**
+   * Handles the 'closed' event, fired before the modal dialog
+   * has been opened.
+   *
+   * @param event - full event object.
+   *
+   * @return true if the dialog can be opened; otherwise false if veoted.
+   */
+  private onClose(_event: any): boolean {
+    const fn: Function = (this.eventGuard?.closed as any);
+    return fn ? fn.call(this.eventGuard, this) : true;
+  }
+
+  /**
+   * Handles the 'afterClose' event, fired before the modal dialog
+   * has been opened.
+   *
+   * @param event - full event object.
+   *
+   * @return true if the dialog can be opened; otherwise false if veoted.
+   */
+  private onAfterClose(_event: any): boolean {
+    const fn: Function = (this.eventGuard?.afterClose as any);
+    return fn ? fn.call(this.eventGuard, this) : true;
+  }
+}
+
+
+/**
+ * Event Handlers.
+ */
+export interface SohoAboutDialogEventGuard {
+  /**
+   * Invoked before a modal is opened.
+   *
+   * @return false to veto the open action; otherwise true.
+   */
+  beforeOpen?(dialogRef: SohoAboutRef): boolean;
+
+  /**
+   * Invoked when closing a modal.
+   *
+   * @return false to veto the open action; otherwise true.
+   */
+  closed?(dialogRef: SohoAboutRef): boolean;
+
+  /**
+   * Invoked after the modal is closed.
+   *
+   * @return false to veto the open action; otherwise true.
+   */
+  afterClose?(dialogRef: SohoAboutRef): boolean;
+}

package/src/lib/about/soho-about.service.ts

@@ -0,0 +1,29 @@
+import { Injectable, NgZone } from '@angular/core';
+import { SohoAboutRef } from './soho-about.ref';
+
+/**
+ * This service is used to create about dialogs.
+ */
+@Injectable()
+export class SohoAboutService {
+  /**
+   * Constructor.
+   */
+  constructor(private readonly ngZone: NgZone) {
+  }
+
+  /**
+   * Creates a about defined by the given info, returning a reference to the
+   * associated about dialog that can be interacted with.
+   *
+   * The about dialog won't be open until open is called on the returned instance,
+   * see the about ref api for further methods.
+   *
+   * @parent options - a compete set of options; can be null.
+   *
+   * @return the about reference.
+   */
+  about(options?: SohoAboutOptions): SohoAboutRef {
+    return new SohoAboutRef(this.ngZone).options(options);
+  }
+}

package/src/lib/accordion/README.md

@@ -0,0 +1,101 @@
+# SoHoXi Angular Component : Accordion
+
+## Description
+
+This component provides access from Angular to the SoHoXi `accordion` control.
+
+The Accordion is a grouped set of collapsible panels used to navigate sections of
+related content. Each panel consists of two levels: the top level identifies the
+category or section header, and the second level provides the associated options.
+
+### Usage
+
+To use the Soho accordion, you must make sure the `SohoComponentsModule` is included in
+the application your component resides in.
+
+In the markup for you angular component, simply add elements named `soho-accordion`, for example:
+
+```html
+<soho-accordion>
+  <soho-accordion-header>Header Content</soho-accordion-header>
+  <soho-accordion-pane>
+    <span>Pane Content</span>
+  </soho-accordion-pane>
+
+  <soho-accordion-header>Header Content</soho-accordion-header>
+  <soho-accordion-pane>
+    <div class="radio-group">
+      ...
+    </div>
+  </soho-accordion-pane>
+  ...
+</soho-accordion>
+```
+
+## Inputs
+
+The 'accordion' component provides a number of options to control its behavior, and presentation.
+
+| Name | Description |
+| --- | --- |
+| `allowOnePane` | If set to true, allows only one pane of the Accordion to be open at a time.  If an Accordion pane is open, and that pane contains sub-headers, only one of the pane's sub-headers can be open at a time. (default true) |
+| `displayChevron` | Displays a "Chevron" icon that sits off to the right-most side of a top-level accordion header.  Used in place of an Expander (+/-) if enabled. |
+| `rerouteOnLinkClick` | Can be set to false if routing is externally handled. |
+| `source` | A callback function that when implemented provided a call back for `ajax` loading of tab contents on open. |
+
+Changes to these properties will dynamically update the component.
+
+## Methods
+
+| Name | Description |
+| --- | --- |
+| `collapse(h: SohoHeaderComponent)` | Collapses the specified header. |
+| `collapseAll` | Collapses all accordion headers. |
+| `disable` | Disable the accordion. |
+| `enable` | Enable the accordion. |
+| `expand(h: SohoHeaderComponent)` | Expand the given Panel on the Accordion. |
+| `expandAll` | Expands all accordion headers, if possible. |
+| `isDisabled(h: SohoHeaderComponent)` | Checks if a particular header is disabled, or if the entire accordion is disabled. |
+| `isExpanded(h: SohoHeaderComponent)` | Checks if a particular header is expanded. |
+| `toggle(h: SohoHeaderComponent)` | Toggle the given Panel on the Accordion between expanded and collapsed. |
+| `updated` | Update the control with changes. |
+
+## Outputs
+
+This component fires the following events.
+
+| Name | Description |
+| --- | --- |
+| `aftercollapse` | Fires after a pane is collapsed. |
+| `afterexpand` | Fires after a pane is expanded. |
+| `beforecollapse` | Fires before a pane is collapsed. |
+| `beforeexpand` | Fires before a pane is expanded. |
+| `beforeselect` | Fires before a pane is selected. |
+| `collapse` | Fires when collapsed a pane is initiated. |
+| `expand` | Fires when expanding a pane is initiated. |
+| `followLink` | If the anchor is a real link, follow the link and die here. This indicates the link has been followed. |
+| `selected` | Fires when a panel is opened. |
+
+## Examples
+
+<!-- markdownlint-disable MD013 -->
+
+```html
+<soho-accordion [allowOnePane]="false" (selected)="onSelected($event)">
+  <soho-accordion-header>Favourites</soho-accordion-header>
+  <soho-accordion-pane>
+  </soho-accordion-pane>
+
+  <soho-accordion-header>Process Reports</soho-accordion-header>
+  <soho-accordion-pane>
+  </soho-accordion-pane>
+
+  <soho-accordion-header>Brand Name</soho-accordion-header>
+  <soho-accordion-pane>Magnetic holistic, integrate envisioneer value podcasting leverage, "granular supply-chains systems supply-chains repurpose transform rss-capable seamless; robust disintermediate." Cluetrain: action-items rich metrics transition engage syndicate aggregate transform applications; revolutionize--infrastructures recontextualize platforms empower bandwidth incentivize, innovate, virtual portals whiteboard rich-clientAPIs intuitive. Synergies infrastructures; e-markets synthesize user-centric expedite. ROI world-class, ecologies utilize benchmark content--synergistic enhance. Syndicate synergistic collaborative enterprise ROI; folksonomies visionary holistic synergies grow.</soho-accordion-pane>
+
+  <soho-accordion-header>Material</soho-accordion-header>
+  <soho-accordion-pane>Revolutionize implement infrastructures social front-end, world-class bricks-and-clicks extensible recontextualize? User-contributed e-business relationships widgets bleeding-edge transform, "viral world-class, unleash sexy embrace cross-media best-of-breed wireless, functionalities." Markets, "transition architectures, redefine infomediaries world-class back-end harness, mindshare blogospheres; schemas disintermediate rich," benchmark integrated markets blogging synergies dynamic social back-end convergence. Reinvent A-list A-list B2C rss-capable, mesh bandwidth mission-critical disintermediate strategize networks distributed integrated bleeding-edge rss-capable partnerships incubate, web-enabled e-markets. A-list channels enhance citizen-media, value solutions beta-test platforms enable interfaces, transition interfaces one-to-one expedite scalable.</soho-accordion-pane>
+</soho-accordion>
+```
+
+<!-- markdownlint-enable MD013 -->

package/src/lib/accordion/soho-accordion-header.component.html

@@ -0,0 +1,5 @@
+<a href="#" aria-haspopup="true" role="button" [attr.aria-expanded]="isExpanded">
+  <span>
+    <ng-content></ng-content>
+  </span>
+</a>