Merge branch 'main' into 1672-editing-error

docs/CHANGELOG.md

@@ -4,10 +4,12 @@
 
 ## v4.95.0 Features
 
+- `[About]` Added copy to clipboard button. ([#8438](https://github.com/infor-design/enterprise/issues/8438))
 - `[Module Nav]` Added setting `disableSwitcher` to disable nav switcher. ([#8381](https://github.com/infor-design/enterprise/issues/8381))
 
 ## v4.95.0 Fixes
 
+- `[Contextual Action Panel]` Fixed added padding on contextual action panel. ([#8553](https://github.com/infor-design/enterprise/issues/8553))
 - `[Datagrid]` Fixed an error editing on non first page in server side paging datagrid. ([#8537](https://github.com/infor-design/enterprise-ng/issues/1672))
 - `[Forms]` Fixed fileupload layout in compact form. ([#8537](https://github.com/infor-design/enterprise/issues/8537))
 
@@ -24,6 +26,7 @@
 ## v4.94.0 Fixes
 
 - `[Avatar]` Is no longer round by default. To use it in module nav add the new `square` class. ([#8539](https://github.com/infor-design/enterprise/issues/8539))
+- `[Hierarchy]` Fix broken size on avatars on hierarchy. ([#8584](https://github.com/infor-design/enterprise/issues/8584))
 - `[Bar]` Fixed axis label visibility by adding font-size in `axis-labels` container. ([#8431](https://github.com/infor-design/enterprise/issues/8431))
 - `[Button]` Added start and stop methods for generative timeout. ([#8541](https://github.com/infor-design/enterprise/issues/8541))
 - `[Calendar]` Fixed event icon not properly rendered across week view mode. ([#8456](https://github.com/infor-design/enterprise/issues/8456))

src/components/about/_about.scss

@@ -118,3 +118,9 @@ html[dir='rtl'] {
     }
   }
 }
+
+#copy-to-clipboard {
+  top: 375px;
+  right: 20px;
+  position: absolute;
+}

src/components/about/about.js

@@ -19,6 +19,7 @@ const COMPONENT_NAME = 'about';
  * @param {boolean} [settings.useDefaultCopyright=true] Add the Legal Approved Infor Copyright Text.
  * @param {string} [settings.version] Semantic Version Number for example (4.0.0).
  * @param {array|object} [settings.attributes=null] Add extra attributes like id's to the toast element. For example `attributes: { name: 'id', value: 'my-unique-id' }`
+ * @param {array|object} [settings.showCopyButton=true] Show copy to clipboard button
 */
 const ABOUT_DEFAULTS = {
   appName: 'Infor Application Name',
@@ -28,6 +29,7 @@ const ABOUT_DEFAULTS = {
   productName: undefined,
   useDefaultCopyright: true,
   version: undefined,
+  showCopyButton: true
 };
 
 function About(element, settings) {
@@ -143,18 +145,48 @@ About.prototype = {
     $('.modal-body', this.modal)[0].tabIndex = 0;
 
     this.modal.appendTo('body');
+
     this.modal.modal({
       trigger: this.isBody ? 'immediate' : 'click',
       attributes: this.settings.attributes
     });
 
+    if (this.settings.showCopyButton) {
+      $(`<button type="button" class="btn-icon" id="copy-to-clipboard" title="${Locale.translate('CopyToClipboard')}">
+          <span>${Locale.translate('CopyToClipboard')}</span>
+          <svg role="presentation" aria-hidden="true" focusable="false" class="icon">
+            <use href="#icon-copy"></use>
+          </svg>
+        </button>`).prependTo(this.modal.find('.modal-body-wrapper')).on('click', () => {
+        this.copyToClipBoard();
+      }).tooltip();
+    }
+
     // Link the About API to the Modal API
     const modalAPI = this.modal.data('modal');
     modalAPI.aboutAPI = this;
 
     return this;
   },
 
+  /**
+   * Copy inner text to clipboard
+   */
+  copyToClipBoard() {
+    const container = document.createElement('div');
+    container.innerHTML = this.modal.find('.modal-body').html();
+    container.style.position = 'fixed';
+    container.style.pointerEvents = 'none';
+    container.style.opacity = 0;
+    document.body.appendChild(container);
+    window.getSelection().removeAllRanges();
+    const range = document.createRange();
+    range.selectNode(container);
+    window.getSelection().addRange(range);
+    document.execCommand('copy');
+    document.body.removeChild(container);
+  },
+
   /**
    * Return the browser specs. Currently returns browse, os, cookiesEnabled and locale
    * @returns {string} The specs of the browser.

src/components/contextualactionpanel/contextualactionpanel.js

@@ -255,7 +255,7 @@ ContextualActionPanel.prototype = {
       }
 
       if (!isIframe) {
-        children.wrapAll('<div class="modal-content"></div>').wrapAll(`<div class="modal-body ${this.settings.detailRefId !== null ? 'padding-x-16 has-back-button' : ''}"></div>`);
+        children.wrapAll('<div class="modal-content"></div>').wrapAll(`<div class="modal-body ${this.settings.detailRefId !== undefined ? 'padding-x-16 has-back-button' : ''}"></div>`);
         this.panel.addClass('modal');
       }
     }

src/components/hierarchy/_hierarchy-base.scss

@@ -37,7 +37,7 @@
     display: table;
     margin: 0 auto;
 
-    @media (max-width: $breakpoint-slim - 1px) {
+    @media (max-width: ($breakpoint-slim - 1px)) {
       width: 100%;
     }
 
@@ -132,6 +132,10 @@
     &.azure08 {
       border-left-color: $ids-color-palette-azure-80;
 
+      .image-initials {
+        background-color: $ids-color-palette-azure-80;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-azure-80;
       }
@@ -140,6 +144,10 @@
     &.turquoise02 {
       border-left-color: $ids-color-palette-turquoise-20;
 
+      .image-initials {
+        background-color: $ids-color-palette-turquoise-20;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-turquoise-20;
       }
@@ -148,6 +156,10 @@
     &.amethyst06 {
       border-left-color: $ids-color-palette-amethyst-60;
 
+      .image-initials {
+        background-color: $ids-color-palette-amethyst-60;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-amethyst-60;
       }
@@ -156,6 +168,10 @@
     &.slate06 {
       border-left-color: $ids-color-palette-slate-60;
 
+      .image-initials {
+        background-color: $ids-color-palette-slate-60;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-slate-60;
       }
@@ -164,6 +180,10 @@
     &.amber06 {
       border-left-color: $ids-color-palette-amber-60;
 
+      .image-initials {
+        background-color: $ids-color-palette-amber-60;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-amber-60;
       }
@@ -172,6 +192,10 @@
     &.emerald07 {
       border-left-color: $ids-color-palette-emerald-70;
 
+      .image-initials {
+        background-color: $ids-color-palette-emerald-70;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-emerald-70;
       }
@@ -180,6 +204,10 @@
     &.ruby06 {
       border-left-color: $ids-color-palette-ruby-60;
 
+      .image-initials {
+        background-color: $ids-color-palette-ruby-60;
+      }
+
       .image-placeholder {
         border: 2px solid $ids-color-palette-ruby-60;
       }
@@ -193,7 +221,6 @@
     img,
     .image-placeholder {
       border-radius: 50%;
-      display: inline-block;
       float: left;
       height: 55px;
       margin-left: 14px;
@@ -202,9 +229,9 @@
     }
 
     .image-initials {
-      display: inline-block;
       float: left;
       height: 55px;
+      min-height: 55px;
       line-height: 5.5rem;
       margin-left: 14px;
       margin-top: 10px;

src/components/locale/cultures/en-US.js

@@ -147,6 +147,7 @@ Soho.Locale.addCulture('en-US', {
     Contrast: { id: 'Contrast', value: 'Contrast', comment: 'Name of the high contrast theme' },
     CookiesEnabled: { id: 'CookiesEnabled', value: 'Cookies enabled', comment: 'Returns if browser cookies are enabled or not.' },
     Copy: { id: 'Copy', value: 'Copy', comment: 'Copy tooltip' },
+    CopyToClipboard: { id: 'CopyToClipboard', value: 'Copy to clipboard', comment: 'Copy to clipboard' },
     Croatian: { id: 'Croatian', value: 'Croatian', comment: 'Croatian (Croatia) language' },
     CssClass: { id: 'CssClass', value: 'Css class', comment: 'Label for entering a Css Class name' },
     Cut: { id: 'Cut', value: 'Cut', comment: 'Cut tooltip' },

src/utils/utils.js

@@ -413,7 +413,6 @@ $.copyToClipboard = function (text) { // eslint-disable-line
     try {
       return document.execCommand('copy'); // Security exception may be thrown by some browsers.
     } catch (ex) {
-      // console.warn('Copy to clipboard failed.', ex);
       return false;
     } finally {
       document.body.removeChild(textarea);