improved leaflet loading service, fixed helpers, improved overlay cal…

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/locale-selector-tray.hbs

@@ -16,23 +16,27 @@
         </dd.Trigger>
         <dd.Content class="{{@contentClass}} locale-selector-tray-content {{if (media 'isMobile') 'is-mobile'}}">
             <div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
-                {{#each-in this.availableLocales as |key country|}}
-                    <div class="px-1">
-                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
-                            <div class="flex flex-row items-center justify-between w-full">
-                                <div class="flex-1">
-                                    <span class="mr-1">{{country.emoji}}</span>
-                                    <span>{{country.language}}</span>
-                                </div>
-                                {{#if (eq this.currentLocale key)}}
-                                    <div>
-                                        <FaIcon @icon="check" class="text-green-400" />
+                {{#if this.loadAvailableCountries.isRunning}}
+                    <Spinner />
+                {{else}}
+                    {{#each-in this.availableLocales as |key country|}}
+                        <div class="px-1">
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
+                                <div class="flex flex-row items-center justify-between w-full">
+                                    <div class="flex-1">
+                                        <span class="mr-1">{{country.emoji}}</span>
+                                        <span>{{country.language}}</span>
                                     </div>
-                                {{/if}}
-                            </div>
-                        </a>
-                    </div>
-                {{/each-in}}
+                                    {{#if (eq this.currentLocale key)}}
+                                        <div>
+                                            <FaIcon @icon="check" class="text-green-400" />
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            </a>
+                        </div>
+                    {{/each-in}}
+                {{/if}}
             </div>
         </dd.Content>
     </BasicDropdown>

addon/components/locale-selector-tray.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { debug } from '@ember/debug';
 import { task } from 'ember-concurrency-decorators';
 import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
 
@@ -94,8 +95,16 @@ export default class LocaleSelectorTrayComponent extends Component {
      * @generator
      */
     @task *loadAvailableCountries() {
-        this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] });
-        this.availableLocales = this._createAvailableLocaleMap();
+        try {
+            this.countries = yield this.fetch.get(
+                'lookup/countries',
+                { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] },
+                { fromCache: true, expirationInterval: 1, expirationIntervalUnit: 'week' }
+            );
+            this.availableLocales = this._createAvailableLocaleMap();
+        } catch (error) {
+            debug(`Locale Error: ${error.message}`);
+        }
     }
 
     /**

addon/components/overlay.js

@@ -56,6 +56,16 @@ export default class OverlayComponent extends Component {
     @action toggle() {
         this.isOpen = !this.isOpen;
 
+        if (this.isOpen) {
+            if (typeof this.args.onOpen === 'function') {
+                this.args.onOpen(this.context);
+            }
+        } else {
+            if (typeof this.args.onClose === 'function') {
+                this.args.onClose(this.context);
+            }
+        }
+
         if (typeof this.args.onToggle === 'function') {
             this.args.onToggle(this.context);
         }

addon/components/timeline/item.hbs

@@ -1 +1 @@
-<div class="timeline-item {{if this.isActive 'active animate-pulse'}}" ...attributes>{{yield @activity @context}}</div>
+<div class="timeline-item {{if this.isActive 'active'}}" ...attributes>{{yield @activity @context}}</div>

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/helpers/is-not-empty.js

@@ -1,5 +1,6 @@
 import { helper } from '@ember/component/helper';
+import { isEmpty } from '@ember/utils';
 
-export default helper(function isNotEmpty(positional /*, named*/) {
-    return positional;
+export default helper(function isNotEmpty([subject]) {
+    return !isEmpty(subject);
 });

addon/helpers/is-object.js

@@ -1,6 +1,5 @@
 import { helper } from '@ember/component/helper';
-import { isArray } from '@ember/array';
 
-export default helper(function isObject([object]) {
-    return object !== null && typeof object === 'object' && !isArray(object);
+export default helper(function isObject([obj]) {
+    return obj && typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]';
 });

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`;
+});