styling and functionality improvements

addon/components/badge.hbs

@@ -1,16 +1,21 @@
-<div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
-    <span class="inline-flex items-center {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
-        <svg class="{{unless @hideText 'mr-1.5'}} h-2 w-2 {{if @hideStatusDot 'hidden'}}" fill="currentColor" viewBox="0 0 8 8">
-            <circle cx="4" cy="4" r="3"></circle>
-        </svg>
+<div class="status-badge {{safe-dasherize (or @type @status "info")}}-status-badge {{@wrapperClass}}" ...attributes>
+    <span
+        class="status-badge-inner-wrap inline-flex items-center
+            {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}}
+            text-xs font-medium leading-4 whitespace-no-wrap
+            {{@spanClass}}"
+    >
+        {{#unless (or @hideStatusDot @hideIcon)}}
+            <FaIcon @icon={{or @icon "circle"}} @size={{or @size "xs"}} @prefix={{or @iconPrefix "fas"}} class="{{@iconClass}} {{unless @hideText 'mr-1.5'}}" />
+        {{/unless}}
         {{#if (has-block)}}
             {{yield @status}}
         {{else}}
             {{#unless @hideText}}
                 {{#if @disableHumanize}}
-                    {{@status}}
+                    {{or @text @status}}
                 {{else}}
-                    {{safe-humanize @status}}
+                    {{safe-humanize (or @text @status)}}
                 {{/if}}
             {{/unless}}
         {{/if}}

addon/components/checkbox.js

@@ -63,9 +63,9 @@ export default class CheckboxComponent extends Component {
      * @param {*} { permission = null }
      * @memberof ButtonComponent
      */
-    constructor(owner, { value = false, permission = null, disabled = false, visible = true }) {
+    constructor(owner, { value = false, checked = null, permission = null, disabled = false, visible = true }) {
         super(...arguments);
-        this.checked = value;
+        this.checked = checked === null ? value : checked;
         this.permissionRequired = permission;
         this.visible = visible;
         this.disabled = disabled;

addon/components/info-block.hbs

@@ -1,17 +1,17 @@
-<div class="ui-input-info-block rounded-md" ...attributes>
-    <div class="flex">
-        <div class="flex-shrink-0">
-            <FaIcon @icon={{or @icon "info-circle"}} />
+<div class="ui-input-info-block {{or @type 'info'}} {{or @size "base"}}" ...attributes>
+    <div class="ui-input-info-block-inner flex {{@innerWrapperClass}}">
+        <div class="ui-input-info-block-icon-container flex-shrink-0 {{@iconWrapperClass}}">
+            <FaIcon @icon={{or @icon "info-circle"}} @size={{or @iconSize "md"}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
         </div>
-        <div class="ml-3 flex-1 md:flex md:justify-between">
-            <div class="ui-input-info-block-text text-sm subpixel-antialiased {{@blockClass}}">
+        <div class="ui-input-info-block-yield-container ml-3 flex-1 md:flex md:justify-between {{@blockContainerClass}}">
+            <div class="ui-input-info-block-text subpixel-antialiased {{@blockClass}}">
                 {{#if (has-block)}}
                     {{yield}}
                 {{else}}
                     <span class={{@textClass}}>{{@text}}</span>
                     {{#if @exampleText}}
-                        <div>
-                            <code class="mt-3 break-text subpixel-antialiased text-xs font-mono">{{@exampleText}}</code>
+                        <div class={{@exampleTextWrapperClass}}>
+                            <code class="mt-3 break-text subpixel-antialiased text-xs font-mono {{@exampleTextClass}}">{{@exampleText}}</code>
                         </div>
                     {{/if}}
                 {{/if}}

addon/components/layout/header.js

@@ -60,7 +60,11 @@ export default class LayoutHeaderComponent extends Component {
         // Prepare menuItems
         const menuItems = [
             {
-                text: [this.currentUser.email, this.currentUser.companyName],
+                text: [
+                    this.currentUser.companyName,
+                    this.currentUser.email,
+                    { component: 'badge', disableHumanize: true, text: this.currentUser.roleName, status: 'info', hideStatusDot: false, wrapperClass: 'mt-1' },
+                ],
                 class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
                 wrapperClass: 'next-dd-session-user-wrapper',
             },
@@ -193,6 +197,14 @@ export default class LayoutHeaderComponent extends Component {
     mergeUserMenuItems(userMenuItems = []) {
         // Prepare menu items
         const menuItems = [
+            {
+                text: [this.currentUser.name, { component: 'badge', disableHumanize: true, text: this.currentUser.roleName, status: 'info', hideStatusDot: false, wrapperClass: 'mt-1' }],
+                class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
+                wrapperClass: 'next-dd-session-user-wrapper',
+            },
+            {
+                seperator: true,
+            },
             {
                 id: 'view-profile-user-nav-item',
                 wrapperClass: 'view-profile-user-nav-item',

addon/components/layout/header/dropdown/item.hbs

@@ -4,12 +4,49 @@
             <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
         {{/if}}
         <div class="inline-flex flex-col {{@item.inlineClass}}">
-            {{#if (is-array @item.text)}}
-                {{#each @item.text as |line|}}
-                    <div class="{{@item.class}}">{{line}}</div>
-                {{/each}}
+            {{#if @item.intl}}
+                {{#if (is-array @item.intl)}}
+                    {{#each @item.intl as |intl|}}
+                        <div class="{{@item.class}}">{{t intl}}</div>
+                    {{/each}}
+                {{else}}
+                    <div class="{{@item.class}}">{{t @item.intl}}</div>
+                {{/if}}
             {{else}}
-                <div class="{{@item.class}}">{{@item.text}}</div>
+                {{#if (is-array @item.text)}}
+                    {{#each @item.text as |line|}}
+                        {{#if (is-object line)}}
+                            <div class="{{@item.class}}">
+                                {{#if line.component}}
+                                    {{component
+                                        line.component
+                                        item=line
+                                        text=line.text
+                                        label=(or line.label line.text)
+                                        status=(or line.status line.text)
+                                        type=line.type
+                                        onClick=line.onClick
+                                        hideStatusDot=line.hideStatusDot
+                                        disableHumanize=line.disableHumanize
+                                        class=line.class
+                                        wrapperClass=line.wrapperClass
+                                        spanClass=line.spanClass
+                                        textClass=line.textClass
+                                        icon=line.icon
+                                        iconClass=line.iconClass
+                                        iconSize=line.iconSize
+                                    }}
+                                {{else}}
+                                    <div class="{{line.class}}">{{line.text}}</div>
+                                {{/if}}
+                            </div>
+                        {{else}}
+                            <div class="{{@item.class}}">{{line}}</div>
+                        {{/if}}
+                    {{/each}}
+                {{else}}
+                    <div class="{{@item.class}}">{{@item.text}}</div>
+                {{/if}}
             {{/if}}
         </div>
     </div>
@@ -21,7 +58,11 @@
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
-            <span>{{@item.text}}</span>
+            {{#if @item.intl}}
+                <span>{{t @item.intl}}</span>
+            {{else}}
+                <span>{{@item.text}}</span>
+            {{/if}}
         </LinkTo>
     </div>
 {{/if}}
@@ -38,7 +79,11 @@
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
-            <span>{{@item.text}}</span>
+            {{#if @item.intl}}
+                <span>{{t @item.intl}}</span>
+            {{else}}
+                <span>{{@item.text}}</span>
+            {{/if}}
         </a>
     </div>
 {{/if}}
@@ -49,7 +94,11 @@
             {{#if @item.icon}}
                 <FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
             {{/if}}
-            <span>{{@item.text}}</span>
+            {{#if @item.intl}}
+                <span>{{t @item.intl}}</span>
+            {{else}}
+                <span>{{@item.text}}</span>
+            {{/if}}
         </a>
     </div>
 {{/if}}

addon/components/toggle.hbs

@@ -1,5 +1,5 @@
 {{#if this.visible}}
-    <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
+    <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled @disabled}}>
         <span
             role="checkbox"
             tabindex="0"

addon/components/toggle.js

@@ -95,7 +95,10 @@ export default class ToggleComponent extends Component {
      * @param {Array} [isToggled]
      * @memberof ToggleComponent
      */
-    @action onChange(el, [isToggled]) {
+    @action onChange(el, [isToggled, disabled = null]) {
         this.isToggled = isToggled === true;
+        if (disabled !== null) {
+            this.disabled = disabled;
+        }
     }
 }

addon/modifiers/set-max-height.js

@@ -0,0 +1,34 @@
+import { modifier } from 'ember-modifier';
+import numbersOnly from '../utils/numbers-only';
+
+export default modifier(function setMaxHeight(element, [height]) {
+    if (height === undefined || height === null) {
+        return;
+    }
+
+    let heightValue = height;
+    let unit = '';
+
+    // Check if height is a string with a unit
+    if (typeof height === 'string') {
+        const match = height.match(/^(\d+(?:\.\d+)?)(\D+)?$/);
+        if (match !== null) {
+            heightValue = match[1];
+            unit = match[2] || '';
+        }
+    }
+
+    // Convert the height value to pixels
+    if (unit === 'em') {
+        heightValue *= 16; // 1em = 16px
+    } else if (unit === 'rem') {
+        heightValue *= 16; // 1rem = 16px (assuming default font size of 16px)
+    } else if (unit === 'pt') {
+        heightValue *= 1.33; // 1pt = 1.33px (assuming 96dpi)
+    } else if (unit === 'pc') {
+        heightValue *= 16; // 1pc = 16px (assuming 12pt = 16px)
+    }
+
+    // Set the max height of the element by the value
+    element.style.maxHeight = `${numbersOnly(heightValue)}px`;
+});