From 9c8532a9f3ac04396e99764ca1d4e5d78f236819 Mon Sep 17 00:00:00 2001
From: Michael Shobowale <58557722+shoboske@users.noreply.github.com>
Date: Sun, 12 May 2024 19:32:19 +0300
Subject: [PATCH 1/7] Add Nigerian Naira to list of currencies

---
 addon/utils/get-currency.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/addon/utils/get-currency.js b/addon/utils/get-currency.js
index f257905..3638f7b 100644
--- a/addon/utils/get-currency.js
+++ b/addon/utils/get-currency.js
@@ -646,6 +646,18 @@ const currencies = [
         decimalSeparator: '.',
         symbolPlacement: 'before',
     },
+    {
+        iso2: 'NG',
+        name: 'Nigeria',
+        emoji: '🇳🇬',
+        code: 'NGN',
+        title: 'Nigerian Naira',
+        symbol: '₦',
+        precision: 2,
+        thousandSeparator: ',',
+        decimalSeparator: '.',
+        symbolPlacement: 'before',
+    },
     {
         iso2: 'NO',
         name: 'Norway',

From 9982685bf04992e890ccea79c92d5887dd560a44 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 14 May 2024 10:57:22 +0800
Subject: [PATCH 2/7] Improvements to stat widget, fixes to sidebar toggle, and
 fixes on select and model select component

---
 addon/components/model-select.hbs          | 61 +---------------------
 addon/components/model-select.js           |  4 ++
 addon/components/select.hbs                |  8 +--
 addon/components/select.js                 | 25 +++++----
 addon/components/stat-widget.hbs           |  8 ++-
 addon/styles/components/sidebar-toggle.css | 17 ++++++
 package.json                               |  2 +-
 7 files changed, 46 insertions(+), 79 deletions(-)

diff --git a/addon/components/model-select.hbs b/addon/components/model-select.hbs
index 3a87549..0b06fba 100644
--- a/addon/components/model-select.hbs
+++ b/addon/components/model-select.hbs
@@ -1,62 +1,5 @@
-<div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-    <PowerSelect
-        @afterOptionsComponent={{@afterOptionsComponent}}
-        @allowClear={{@allowClear}}
-        @animationEnabled={{@animationEnabled}}
-        @ariaDescribedBy={{@ariaDescribedBy}}
-        @ariaInvalid={{@ariaInvalid}}
-        @ariaLabel={{@ariaLabel}}
-        @ariaLabelledBy={{@ariaLabelledBy}}
-        @beforeOptionsComponent={{@beforeOptionsComponent}}
-        @buildSelection={{@buildSelection}}
-        @calculatePosition={{@calculatePosition}}
-        @closeOnSelect={{@closeOnSelect}}
-        @defaultHighlighted={{@defaultHighlighted}}
-        @destination={{@destination}}
-        @disabled={{@disabled}}
-        @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
-        @extra={{@extra}}
-        @groupComponent={{@groupComponent}}
-        @highlightOnHover={{@highlightOnHover}}
-        @horizontalPosition={{@horizontalPosition}}
-        @initiallyOpened={{@initiallyOpened}}
-        @loadingMessage={{@loadingMessage}}
-        @eventType={{@eventType}}
-        @matcher={{@matcher}}
-        @matchTriggerWidth={{@matchTriggerWidth}}
-        @noMatchesMessage={{@noMatchesMessage}}
-        @onBlur={{@onBlur}}
-        @onChange={{this.change}}
-        @onClose={{this.onClose}}
-        @onFocus={{@onFocus}}
-        @onInput={{this.onInput}}
-        @onKeydown={{@onKeydown}}
-        @onOpen={{this.onOpen}}
-        @options={{this._options}}
-        @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}}
-        @placeholder={{@placeholder}}
-        @placeholderComponent={{@placeholderComponent}}
-        @preventScroll={{@preventScroll}}
-        @renderInPlace={{@renderInPlace}}
-        @scrollTo={{@scrollTo}}
-        @search={{perform this.searchModels}}
-        @searchEnabled={{get-default-value @searchEnabled true}}
-        @searchField={{@searchField}}
-        @searchMessage={{@searchMessage}}
-        @searchPlaceholder={{@searchPlaceholder}}
-        @selected={{this.selectedModel}}
-        @selectedItemComponent={{@selectedItemComponent}}
-        @tabindex={{@tabindex}}
-        @triggerClass={{@triggerClass}}
-        @triggerComponent={{@triggerComponent}}
-        @triggerId={{@triggerId}}
-        @triggerRole={{@triggerRole}}
-        @typeAheadMatcher={{@typeAheadMatcher}}
-        @verticalPosition={{@verticalPosition}}
-        @withCreate={{@withCreate}}
-        ...attributes
-        as |model|
-    >
+<div class="fleetbase-model-select fleetbase-power-select ember-model-select" {{did-update this.selectedModelChanged @selectedModel}}>
+    <PowerSelect @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @animationEnabled={{@animationEnabled}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @beforeOptionsComponent={{@beforeOptionsComponent}} @buildSelection={{@buildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @extra={{@extra}} @groupComponent={{@groupComponent}} @highlightOnHover={{@highlightOnHover}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @eventType={{@eventType}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} @onChange={{this.change}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this._options}} @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchModels}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selectedModel}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass={{@triggerClass}} @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |model|>
         {{#if (has-block)}}
             {{yield model}}
         {{else}}
diff --git a/addon/components/model-select.js b/addon/components/model-select.js
index 57840f7..61d477f 100644
--- a/addon/components/model-select.js
+++ b/addon/components/model-select.js
@@ -146,6 +146,10 @@ export default class ModelSelectComponent extends Component {
         this.selectedModel = selectedModel;
     }
 
+    @action selectedModelChanged(el, [selectedModel]) {
+        this.selectedModel = selectedModel;
+    }
+
     @dropTask({ withTestWaiter: true }) findRecord = function* (modelName, id) {
         // this wrapper task is requried to avoid the following error upon fast changes
         // of selectedModel:
diff --git a/addon/components/select.hbs b/addon/components/select.hbs
index f1a1d0a..df278da 100644
--- a/addon/components/select.hbs
+++ b/addon/components/select.hbs
@@ -1,10 +1,10 @@
-<select ...attributes class="form-select {{if this.hasPlaceholder 'has--placeholder' 'has--selection'}}" {{on "change" this.select}}>
-    {{#if @placeholder}}
+<select ...attributes class="form-select {{if this.value 'has--selection' 'has--placeholder'}}" {{on "change" this.select}} {{did-update this.changed @value @placeholder}}>
+    {{#if this.placeholder}}
         <option selected disabled>
-            {{@placeholder}}
+            {{this.placeholder}}
         </option>
     {{/if}}
-    
+
     {{#if (has-block)}}
         {{#if @fetched}}
             {{#if (is-object @options)}}
diff --git a/addon/components/select.js b/addon/components/select.js
index 19958fd..9d8547a 100644
--- a/addon/components/select.js
+++ b/addon/components/select.js
@@ -1,28 +1,27 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { computed, action } from '@ember/object';
+import { isBlank } from '@ember/utils';
 
 export default class SelectComponent extends Component {
-    @tracked selected;
+    @tracked value;
+    @tracked placeholder;
 
-    @computed('selected', 'args.value') get value() {
-        if (this.selected) {
-            return this.selected;
-        }
-
-        return this.args.value;
+    constructor(owner, { value, placeholder }) {
+        super(...arguments);
+        this.value = value;
+        this.placeholder = placeholder;
     }
 
-    @computed('value', 'args.placeholder') get hasPlaceholder() {
-        return !this.value && this.args.placeholder;
+    @action changed(el, [value, placeholder]) {
+        this.value = value;
+        this.placeholder = placeholder;
     }
 
     @action select(event) {
-        const {
-            target: { value },
-        } = event;
+        const { value } = event.target;
 
-        this.selected = value;
+        this.value = value;
 
         if (typeof this.args.onSelect === 'function') {
             this.args.onSelect(value);
diff --git a/addon/components/stat-widget.hbs b/addon/components/stat-widget.hbs
index 7e7aa0b..67236e8 100644
--- a/addon/components/stat-widget.hbs
+++ b/addon/components/stat-widget.hbs
@@ -1,4 +1,8 @@
 <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm p-4 flex flex-col items-center justify-center text-center" ...attributes>
-    <h3 class="text-black dark:text-gray-100 text-lg mb-1 {{@titleClass}}">{{@title}}</h3>
-    <h2 class="text-gray-800 dark:text-white text-3xl font-bold {{@valueClass}}">{{@value}}</h2>
+    {{#if @isLoading}}
+        <Spinner @loadingMessage={{@loadingMessage}} @loadingMessageClass={{@loadingMessageClass}} @wrapperClass={{@loadingWrapperClass}} />
+    {{else}}
+        <h3 class="text-black dark:text-gray-100 text-lg mb-1 {{@titleClass}}">{{@title}}</h3>
+        <h2 class="text-gray-800 dark:text-white text-3xl font-bold {{@valueClass}}">{{@value}}</h2>
+    {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/styles/components/sidebar-toggle.css b/addon/styles/components/sidebar-toggle.css
index 8a8c07e..4df72ed 100644
--- a/addon/styles/components/sidebar-toggle.css
+++ b/addon/styles/components/sidebar-toggle.css
@@ -31,10 +31,12 @@
 .sidebar-toggle-button .cls-1 {
     fill: #fff;
 }
+
 .sidebar-toggle-button .cls-2 {
     fill: none;
     stroke-width: 18px;
 }
+
 .sidebar-toggle-button .cls-2,
 .sidebar-toggle-button .cls-3 {
     stroke: #fff;
@@ -44,3 +46,18 @@
 .sidebar-toggle-button .cls-3 {
     stroke-width: 13px;
 }
+
+body[data-theme="dark"] .sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg > rect.cls-3 {
+    stroke: #111827;
+}
+
+body[data-theme="light"] .sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg,
+body[data-theme="light"] .sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg > rect {
+    fill: #374151;
+}
+
+body[data-theme="light"] .sidebar-toggle-button .cls-1,
+body[data-theme="light"] .sidebar-toggle-button .cls-2,
+body[data-theme="light"] .sidebar-toggle-button .cls-3 {
+    fill: #374151;
+}
diff --git a/package.json b/package.json
index 3cbd0c6..84145aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.13",
+    "version": "0.2.14",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

From 4492a9c4e5736c0b7f7b7b39653a549e848b1e7d Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 14 May 2024 21:24:47 +0800
Subject: [PATCH 3/7] improvements and fixes to base components and stylings

---
 addon/components/phone-input.hbs           |  2 +-
 addon/components/phone-input.js            | 25 ++++++++++++++++-----
 addon/components/select.js                 |  3 +--
 addon/styles/components/basic-dropdown.css |  6 +++++
 addon/styles/components/input.css          | 26 +++++++++++++++++++++-
 addon/styles/layout/next.css               |  8 +++++++
 index.js                                   |  2 +-
 package.json                               |  2 +-
 pnpm-lock.yaml                             |  8 +++----
 9 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/addon/components/phone-input.hbs b/addon/components/phone-input.hbs
index 52f1950..d5cc94d 100644
--- a/addon/components/phone-input.hbs
+++ b/addon/components/phone-input.hbs
@@ -1 +1 @@
-<Input @type="tel" @value={{@value}} {{did-insert this.setupIntlTelInput}} {{on "keyup" this.onInput}} ...attributes />
\ No newline at end of file
+<Input @type="tel" @value={{@value}} {{did-insert this.setupIntlTelInput}} class="phone-input" {{on "keyup" this.onInput}} ...attributes />
\ No newline at end of file
diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js
index 99fbb46..2a9c309 100644
--- a/addon/components/phone-input.js
+++ b/addon/components/phone-input.js
@@ -10,20 +10,33 @@ export default class PhoneInputComponent extends Component {
 
     @action setupIntlTelInput(element) {
         this.iti = intlTelInput(element, {
-            customContainer: `w-full ${this.args.wrapperClass ?? ''}`,
+            containerClass: `w-full ${this.args.wrapperClass ?? ''}`,
             initialCountry: 'auto',
-            geoIpLookup: (success) => {
-                this.fetch.get('lookup/whois').then((response) => {
-                    success(response.country_code);
-                });
+            separateDialCode: true,
+            formatAsYouType: true,
+            geoIpLookup: (success, failure) => {
+                this.fetch
+                    .get('lookup/whois')
+                    .then((response) => {
+                        success(response.country_code);
+                    })
+                    .catch(failure);
             },
             utilsScript: '/assets/libphonenumber/utils.js',
         });
+
+        if (typeof this.args.onInit === 'function') {
+            this.args.onInit(this.iti);
+        }
+
+        element.addEventListener('countrychange', this.args.onCountryChange);
     }
 
     @action onInput() {
         const { onInput } = this.args;
-        const number = this.iti.getNumber();
+        const number = this.iti.getNumber(intlTelInput.utils.numberFormat.E164);
+
+        console.log(number);
 
         if (typeof onInput === 'function') {
             onInput(number, ...arguments);
diff --git a/addon/components/select.js b/addon/components/select.js
index 9d8547a..c7c4d47 100644
--- a/addon/components/select.js
+++ b/addon/components/select.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { computed, action } from '@ember/object';
-import { isBlank } from '@ember/utils';
+import { action } from '@ember/object';
 
 export default class SelectComponent extends Component {
     @tracked value;
diff --git a/addon/styles/components/basic-dropdown.css b/addon/styles/components/basic-dropdown.css
index 1172d0c..7425caf 100644
--- a/addon/styles/components/basic-dropdown.css
+++ b/addon/styles/components/basic-dropdown.css
@@ -4,6 +4,12 @@
     padding-left: 0.5rem;
 }
 
+.ember-basic-dropdown-trigger[aria-disabled='true'],
+.ember-power-select-trigger[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 .ember-power-select-multiple-option {
     margin: 0 0 0 3px;
     line-height: 1.45;
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index 4885550..5b18fd7 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -485,10 +485,34 @@ body[data-theme='dark'] .emberTagInput-tag {
     @apply bg-gray-900 shadow-sm;
 }
 
-body[data-theme='dark'] .iti__country-list {
+body[data-theme='dark'] .iti__dropdown-content {
     @apply bg-gray-900 rounded-md shadow-sm border-gray-700 mt-1;
 }
 
+.iti__search-input {
+    border: 0px;
+    border-top-left-radius: 0.375rem;
+    border-top-right-radius: 0.375rem;
+}
+
+.iti__selected-dial-code {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+body[data-theme="dark"] .iti__selected-dial-code {
+    color: #fff;
+}
+
+body[data-theme='dark'] .iti__search-input {
+    background-color: #111827;
+    border-bottom: 1px #374151 solid;
+}
+
+body[data-theme='dark'] .iti__divider {
+    border-bottom: 1px solid #374151;
+}
+
 .ui-money-input .ember-basic-dropdown > .ember-basic-dropdown-trigger {
     border: 0px;
     background: transparent;
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index c3e764e..b5ef64a 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -12,6 +12,14 @@ a,
     cursor: default;
 }
 
+a[disabled='true'],
+button[disabled='true'],
+input[disabled='true'],
+select[disabled='true'],
+textarea[disabled='true'] {
+    cursor: not-allowed;
+}
+
 .next-content-overlay .new-order-overlay-body {
     @apply px-4 pt-4 space-y-4;
 }
diff --git a/index.js b/index.js
index b2b75fc..8525748 100644
--- a/index.js
+++ b/index.js
@@ -64,7 +64,7 @@ module.exports = {
         const publicTree = this._super.treeForPublic.apply(this, arguments);
 
         // Use a Funnel to copy the `utils.js` file to `assets/libphonenumber`
-        const intlTelInputPath = path.dirname(require.resolve('intl-tel-input'));
+        const intlTelInputPath = path.dirname(require.resolve('intl-tel-input')).replace(/build\/js$/, '');
         const addonTree = [
             new Funnel(`${intlTelInputPath}/build/js`, {
                 include: ['utils.js'],
diff --git a/package.json b/package.json
index 84145aa..c44b138 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
         "ember-window-mock": "^0.9.0",
         "ember-wormhole": "^0.6.0",
         "imask": "^6.4.3",
-        "intl-tel-input": "^18.1.3",
+        "intl-tel-input": "^22.0.2",
         "postcss-at-rules-variables": "^0.3.0",
         "postcss-conditionals-renewed": "^1.0.0",
         "postcss-each": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76d6d55..4f5b68d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -158,8 +158,8 @@ dependencies:
     specifier: ^6.4.3
     version: 6.4.3
   intl-tel-input:
-    specifier: ^18.1.3
-    version: 18.1.3
+    specifier: ^22.0.2
+    version: 22.0.2
   postcss-at-rules-variables:
     specifier: ^0.3.0
     version: 0.3.0(postcss@8.4.32)
@@ -9367,8 +9367,8 @@ packages:
       hasown: 2.0.0
       side-channel: 1.0.4
 
-  /intl-tel-input@18.1.3:
-    resolution: {integrity: sha512-5pyt4HA5fZewCnmjIbNJg1bLVWgePlcbga6ilr7KfdIYUYUtAAJmhK+FWS3Y7Hoz5cbAw/q1rdihNSzOvw16xw==}
+  /intl-tel-input@22.0.2:
+    resolution: {integrity: sha512-FYDLp56aCVE+G7TJGmKCeU8LlfSztINiv54TALquMhMJumlUP1d48I6fEssbcq325vcXOrqdOO7Bbi1U/WRCcw==}
     dev: false
 
   /invariant@2.2.4:

From 8babd4ef57883ce355d363ae5b8ffa508ff9fbbb Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 15 May 2024 12:20:28 +0800
Subject: [PATCH 4/7] few styling fixes and improvement to toggle component

---
 addon/components/toggle.hbs       |  2 +-
 addon/components/toggle.js        | 21 ++++++++++++++-------
 addon/styles/components/badge.css |  2 ++
 addon/styles/layout/next.css      | 21 +++++++++++++++++++++
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/addon/components/toggle.hbs b/addon/components/toggle.hbs
index 9322788..b4592e9 100644
--- a/addon/components/toggle.hbs
+++ b/addon/components/toggle.hbs
@@ -1,4 +1,4 @@
-<div class="flex items-center {{@wrapperClass}}">
+<div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
     <span role="checkbox" tabindex="0" aria-checked="false" class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if @disabled 'opacity-50'}}" ...attributes {{on "click" (fn this.toggle this.isToggled)}}>
         <span aria-hidden="true" class="{{if this.isToggled this.activeColorClass " bg-gray-200"}} absolute h-4 w-9 mx-auto
             rounded-full transition-colors ease-in-out duration-200"></span>
diff --git a/addon/components/toggle.js b/addon/components/toggle.js
index e8badb6..536603c 100644
--- a/addon/components/toggle.js
+++ b/addon/components/toggle.js
@@ -33,14 +33,11 @@ export default class ToggleComponent extends Component {
      *
      * @memberof ToggleComponent
      */
-    constructor() {
+    constructor(owner, { isToggled, activeColor }) {
         super(...arguments);
 
-        this.isToggled = this.args.isToggled === true;
-
-        if (typeof this.args.activeColor === 'string' && this.args.activeColor.length) {
-            this.activeColor = this.args.activeColor;
-        }
+        this.isToggled = isToggled === true;
+        this.activeColor = typeof activeColor === 'string' ? activeColor : 'green';
     }
 
     /**
@@ -50,7 +47,6 @@ export default class ToggleComponent extends Component {
      */
     @action toggle(isToggled) {
         const { disabled, onToggle } = this.args;
-
         if (disabled) {
             return;
         }
@@ -61,4 +57,15 @@ export default class ToggleComponent extends Component {
             onToggle(this.isToggled);
         }
     }
+
+    /**
+     * Handle toggle argument change.
+     *
+     * @param {HTMLElement} el
+     * @param {Array} [isToggled]
+     * @memberof ToggleComponent
+     */
+    @action onChange(el, [isToggled]) {
+        this.isToggled = isToggled === true;
+    }
 }
diff --git a/addon/styles/components/badge.css b/addon/styles/components/badge.css
index 6eabeb9..4a1fb42 100644
--- a/addon/styles/components/badge.css
+++ b/addon/styles/components/badge.css
@@ -56,6 +56,7 @@
 }
 
 .status-badge[class*='5'] > span,
+.status-badge.high-status-badge > span,
 .status-badge.rejected-status-badge > span,
 .status-badge.critical-status-badge > span,
 .status-badge.disabled-status-badge > span,
@@ -66,6 +67,7 @@
 }
 
 .status-badge[class*='5'] > span svg,
+.status-badge.high-status-badge > span svg,
 .status-badge.rejected-status-badge > span svg,
 .status-badge.critical-status-badge > span svg,
 .status-badge.urgent-status-badge > span svg,
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index b5ef64a..341dcee 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -1235,6 +1235,18 @@ body[data-theme='dark'] .next-sidebar .next-sidebar-panel-container > .next-side
     @apply pl-8;
 }
 
+.next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn:hover {
+    background-color: #ffffff;
+}
+
+.next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn {
+    color: #000000;
+}
+
+body[data-theme="dark"] .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-content-panel-body .next-nav-item.next-nav-item-with-dropdown:hover .ember-basic-dropdown-trigger > span.btn-wrapper > button.btn {
+    color: #ffffff;
+}
+
 .next-org-button-trigger {
     @apply flex flex-row items-center px-3 py-1.5 rounded-md cursor-default truncate;
     max-height: 31px;
@@ -1756,12 +1768,21 @@ body[data-theme='light'] .next-dd-menu-seperator {
     height: 57px;
 }
 
+body[data-theme="light"] .text-danger,
+body[data-theme="light"] span.text-danger,
+body[data-theme="light"] a.text-danger,
 .text-danger,
 span.text-danger,
 a.text-danger {
     @apply text-red-500;
 }
 
+body[data-theme="light"] .text-danger:active,
+body[data-theme="light"] .text-danger:hover,
+body[data-theme="light"] span.text-danger:active,
+body[data-theme="light"] span.text-danger:hover,
+body[data-theme="light"] a.text-danger:active,
+body[data-theme="light"] a.text-danger:hover,
 .text-danger:active,
 .text-danger:hover,
 span.text-danger:active,

From 1bd1bccb7a75074ee77371525c1c998871bb0fc0 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 15 May 2024 12:56:28 +0800
Subject: [PATCH 5/7] added ability to add custom component in layout section
 components, added scroll handle when sending message from chat window

---
 addon/components/chat-window.js            |  8 ++--
 addon/components/layout/section/footer.hbs |  3 ++
 addon/components/layout/section/header.hbs | 54 +++++++++++++---------
 3 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index bf60b4f..f0cce28 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -50,15 +50,15 @@ export default class ChatWindowComponent extends Component {
         this.sender = this.getSenderFromParticipants(channel);
         // if not participant close window
         if (!this.sender) {
-            later(
+            return later(
                 this,
                 () => {
                     this.chat.closeChannel(channel);
                 },
                 300
             );
-            return;
         }
+
         this.listenChatChannel(channel);
         this.loadAvailableUsers.perform();
         this.chat.on('chat.closed', this.handleChatClosed.bind(this));
@@ -73,6 +73,7 @@ export default class ChatWindowComponent extends Component {
     async listenChatChannel(chatChannelRecord) {
         this.socket.listen(`chat.${chatChannelRecord.public_id}`, (socketEvent) => {
             const { event, data } = socketEvent;
+            console.log(event);
             switch (event) {
                 case 'chat.added_participant':
                 case 'chat.removed_participant':
@@ -140,6 +141,7 @@ export default class ChatWindowComponent extends Component {
         yield this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent, attachments);
         this.pendingMessageContent = '';
         this.pendingAttachmentFiles = [];
+        this.handleChatFeedScroll();
     }
 
     @action handleKeyPress(event) {
@@ -233,7 +235,7 @@ export default class ChatWindowComponent extends Component {
                 () => {
                     this.channelFeedContainerElement.scrollTop = this.channelFeedContainerElement.scrollHeight;
                 },
-                800
+                300
             );
         }
     }
diff --git a/addon/components/layout/section/footer.hbs b/addon/components/layout/section/footer.hbs
index 3c38857..f6c17de 100644
--- a/addon/components/layout/section/footer.hbs
+++ b/addon/components/layout/section/footer.hbs
@@ -1,3 +1,6 @@
 <div class="next-view-section-footer" {{vertical-offset-by "bottom" offset=@verticalOffset elements=@verticalOffsetElements}} ...attributes>
+    {{#if @footerComponent}}
+        {{component @footerComponent}}
+    {{/if}}
     {{yield}}
 </div>
\ No newline at end of file
diff --git a/addon/components/layout/section/header.hbs b/addon/components/layout/section/header.hbs
index 09dd0fe..f8c671b 100644
--- a/addon/components/layout/section/header.hbs
+++ b/addon/components/layout/section/header.hbs
@@ -1,28 +1,36 @@
 <div id="next-view-section-subheader" class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
-    <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
-        <div class="flex flex-row items-center">
-            {{#if @badge}}
-                <span class="mr-2 {{@badgeContainerClass}}">
-                    <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
-                </span>
-            {{/if}}
-            {{#if @icon}}
-                <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
-            {{/if}}
-            <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title {{@titleClass}}">{{@title}}</h2>
-            {{#if @subtitle}}
-                <div class={{@subtitleClass}}>
-                    {{@subtitle}}
+    {{#if @headerComponent}}
+        {{component @headerComponent}}
+    {{else}}
+        <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
+            {{#if @headerTitleComponent}}
+                {{component @headerTitleComponent}}
+            {{else}}
+                <div class="flex flex-row items-center">
+                    {{#if @badge}}
+                        <span class="mr-2 {{@badgeContainerClass}}">
+                            <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
+                        </span>
+                    {{/if}}
+                    {{#if @icon}}
+                        <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
+                    {{/if}}
+                    <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title {{@titleClass}}">{{@title}}</h2>
+                    {{#if @subtitle}}
+                        <div class={{@subtitleClass}}>
+                            {{@subtitle}}
+                        </div>
+                    {{/if}}
                 </div>
             {{/if}}
+            {{#if @onSearch}}
+                <Input @type="text" @value={{@searchQuery}} aria-label={{t "common.search-input"}} placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}} class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
+            {{/if}}
         </div>
-        {{#if @onSearch}}
-            <Input @type="text" @value={{@searchQuery}} aria-label={{t "common.search-input"}} placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}} class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
-        {{/if}}
-    </div>
-    {{#unless @hideActions}}
-        <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
-            {{yield}}
-        </div>
-    {{/unless}}
+        {{#unless @hideActions}}
+            <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
+                {{yield}}
+            </div>
+        {{/unless}}
+    {{/if}}
 </div>
\ No newline at end of file

From 65ba9558a6d45e64b2716464f23cf0222d824abe Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 15 May 2024 13:03:36 +0800
Subject: [PATCH 6/7] removed console.log

---
 addon/components/chat-window.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index f0cce28..cf49c31 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -73,7 +73,6 @@ export default class ChatWindowComponent extends Component {
     async listenChatChannel(chatChannelRecord) {
         this.socket.listen(`chat.${chatChannelRecord.public_id}`, (socketEvent) => {
             const { event, data } = socketEvent;
-            console.log(event);
             switch (event) {
                 case 'chat.added_participant':
                 case 'chat.removed_participant':

From 1a58d36a62f1bb75e9ef79dbd1c7087daa208c88 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 15 May 2024 13:12:29 +0800
Subject: [PATCH 7/7] removed console log from phone input component

---
 addon/components/phone-input.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js
index 2a9c309..2fdc36a 100644
--- a/addon/components/phone-input.js
+++ b/addon/components/phone-input.js
@@ -36,8 +36,6 @@ export default class PhoneInputComponent extends Component {
         const { onInput } = this.args;
         const number = this.iti.getNumber(intlTelInput.utils.numberFormat.E164);
 
-        console.log(number);
-
         if (typeof onInput === 'function') {
             onInput(number, ...arguments);
         }