v0.3.39

addon/components/date-time-input.hbs

@@ -1,4 +1,4 @@
-<div class="ui-date-time-input grid grid-cols-2 gap-2" ...attributes>
+<div class="ui-date-time-input grid grid-cols-2 gap-2" {{did-update this.updateValue @value}} ...attributes>
     <Input @type="date" @value={{this.date}} min={{@minDate}} max={{@maxDate}} aria-label="Date Input" class="border-0 m-0 p-0 bg-transparent" {{on "input" (fn this.update "date")}} />
     <Input @type="time" @value={{this.time}} min={{@minTime}} max={{@maxTime}} aria-label="Time Input" class="border-0 m-0 p-0 bg-transparent" {{on "input" (fn this.update "time")}} />
-</div>
+</div>

addon/components/date-time-input.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { parse, format, isValid } from 'date-fns';
+import { parse, parseISO, format, isValid } from 'date-fns';
 
 export default class DateTimeInputComponent extends Component {
     @tracked timeFormat = 'HH:mm';
@@ -13,10 +13,14 @@ export default class DateTimeInputComponent extends Component {
     constructor() {
         super(...arguments);
 
-        const value = this.parseValue(this.args.value);
+        this.syncValue(this.args.value);
+    }
+
+    syncValue(value) {
+        const parsedValue = this.parseValue(value);
 
-        this.date = value ? format(value, this.dateFormat) : null;
-        this.time = value ? format(value, this.timeFormat) : null;
+        this.date = parsedValue ? format(parsedValue, this.dateFormat) : null;
+        this.time = parsedValue ? format(parsedValue, this.timeFormat) : null;
     }
 
     parseValue(value) {
@@ -25,49 +29,81 @@ export default class DateTimeInputComponent extends Component {
         }
 
         if (typeof value === 'string') {
-            const parsedValue = parse(value, this.dateTimeFormat, new Date());
+            const dateTimeValue = parse(value, this.dateTimeFormat, new Date());
+
+            if (isValid(dateTimeValue)) {
+                return dateTimeValue;
+            }
+
+            const isoLocalValue = value.match(/^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})/);
 
-            if (isValid(parsedValue)) {
-                return parsedValue;
+            if (isoLocalValue) {
+                const localDateTimeValue = parse(`${isoLocalValue[1]} ${isoLocalValue[2]}`, this.dateTimeFormat, new Date());
+
+                if (isValid(localDateTimeValue)) {
+                    return localDateTimeValue;
+                }
+            }
+
+            const isoValue = parseISO(value);
+
+            if (isValid(isoValue)) {
+                return isoValue;
             }
         }
 
         return null;
     }
 
+    @action updateValue(value) {
+        this.syncValue(value);
+    }
+
     /**
-     * Update component value
+     * Update component value.
      *
      * @param {*} prop
      * @param {*} { target }
      * @memberof DateTimeInputComponent
      */
     @action update(prop, { target }) {
-        const { onUpdate } = this.args;
+        const { onUpdate, onChange } = this.args;
         let { dateTimeFormat, date, time } = this;
         let { value } = target;
-        let dateTime, dateTimeInstance;
+        let dateTimeInstance;
+
+        this[prop] = value;
 
         if (prop === 'time') {
-            if (date) {
-                dateTimeInstance = parse(`${date} ${value}`, dateTimeFormat, new Date());
-            } else {
-                dateTimeInstance = parse(`${value}`, this.timeFormat, new Date());
-            }
+            time = value;
+            dateTimeInstance = date ? parse(`${date} ${time}`, dateTimeFormat, new Date()) : parse(`${time}`, this.timeFormat, new Date());
         }
 
         if (prop === 'date') {
-            if (time) {
-                dateTimeInstance = parse(`${value} ${time}`, dateTimeFormat, new Date());
-            } else {
-                dateTimeInstance = parse(`${value}`, this.dateFormat, new Date());
+            date = value;
+            dateTimeInstance = time ? parse(`${date} ${time}`, dateTimeFormat, new Date()) : parse(`${date}`, this.dateFormat, new Date());
+        }
+
+        if (!dateTimeInstance || !isValid(dateTimeInstance)) {
+            if (typeof onUpdate === 'function') {
+                onUpdate(null, null);
             }
+
+            if (typeof onChange === 'function') {
+                onChange(null, null);
+            }
+
+            return;
         }
 
-        dateTime = format(dateTimeInstance, dateTimeFormat);
+        const dateTime = format(dateTimeInstance, dateTimeFormat);
 
         if (typeof onUpdate === 'function') {
             onUpdate(dateTimeInstance, dateTime);
         }
+
+        if (typeof onChange === 'function') {
+            onChange(dateTimeInstance, dateTime);
+        }
     }
 }

addon/components/layout/header.hbs

@@ -18,11 +18,7 @@
                 Pass `@mutateMenuItems={{fn}}` to mutate items before rendering
                 (same contract as the previous static implementation).
             --}}
-            <Layout::Header::SmartNavMenu
-                class="next-catalog-menu-items mr-4"
-                @maxVisible={{or @maxVisibleNavItems 5}}
-                @mutateMenuItems={{@mutateMenuItems}}
-            />
+            <Layout::Header::SmartNavMenu class="next-catalog-menu-items mr-4" @maxVisible={{or @maxVisibleNavItems 5}} @mutateMenuItems={{@mutateMenuItems}} />
         {{/unless}}
         <div id="view-header-left-content-a"></div>
         {{yield}}
@@ -32,7 +28,10 @@
         <Layout::Header::LoadingIndicator />
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
-            <div class="flex-1 flex items-center pr-1 space-x-1">
+            <div id="view-header-tray-items" class="flex-1 flex items-center pr-1 gap-1">
+                <RegistryYield @registry="header-tray-items" as |RegistryComponent|>
+                    <RegistryComponent @header={{this}} />
+                </RegistryYield>
                 <LocaleSelectorTray />
                 <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
                 <ChatTray />
@@ -63,4 +62,4 @@
             </div>
         </div>
     </div>
-</header>
+</header>

addon/components/layout/resource/card.js

@@ -10,7 +10,7 @@ export default class LayoutResourceCardComponent extends Component {
     }
 
     get cardClass() {
-        const baseClasses = 'bg-white dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden';
+        const baseClasses = 'bg-gray-50 dark:bg-gray-700/50 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden';
         return this.args.class ? `${baseClasses} ${this.args.class}` : baseClasses;
     }
 

addon/components/lazy-engine-component.hbs

@@ -5,4 +5,4 @@
         {{component this.resolvedComponent params=this.params}}
     {{/if}}
 {{/if}}
-<div {{did-update this.handleChange @component @params}} />
+<div hidden {{did-update this.handleChange @component @params}} />

addon/components/locale-selector-tray.hbs

@@ -6,7 +6,7 @@
         @calculatePosition={{this.calculatePosition}}
         @verticalPosition={{@verticalPosition}}
         @horizontalPosition={{@horizontalPosition}}
-        @renderInPlace={{or @renderInPlace (not (media "isMobile"))}}
+        @renderInPlace={{this.renderInPlace}}
         as |dd|
     >
         <dd.Trigger class="{{@triggerClass}} local-selector-tray-trigger {{if (media 'isMobile') 'is-mobile'}}">

addon/components/locale-selector-tray.js

@@ -13,6 +13,15 @@ export default class LocaleSelectorTrayComponent extends Component {
     @tracked locales = [];
     @tracked currentLocale;
 
+    get renderInPlace() {
+        if (this.media.isMobile) return false;
+        if (typeof this.args.renderInPlace === 'boolean') {
+            return this.args.renderInPlace;
+        }
+
+        return false;
+    }
+
     /**
      * Creates an instance of LocaleSelectorComponent.
      * @memberof LocaleSelectorComponent

addon/components/metadata-viewer.hbs

@@ -26,7 +26,13 @@
                     {{#each-in @metadata as |key value|}}
                         <tr>
                             <td>{{key}}</td>
-                            <td>{{value}}</td>
+                            <td>
+                                {{#if (or (is-array @value) (is-object @value))}}
+                                    {{format-json @value}}
+                                {{else}}
+                                    {{value}}
+                                {{/if}}
+                            </td>
                         </tr>
                     {{/each-in}}
                 </tbody>

addon/components/notification-tray.hbs

@@ -7,7 +7,7 @@
         @calculatePosition={{this.calculatePosition}}
         @verticalPosition={{@verticalPosition}}
         @horizontalPosition={{@horizontalPosition}}
-        @renderInPlace={{or @renderInPlace (not (media "isMobile"))}}
+        @renderInPlace={{this.renderInPlace}}
         as |dd|
     >
         <dd.Trigger class="{{@triggerClass}} local-selector-tray-trigger {{if (media 'isMobile') 'is-mobile'}}">

addon/components/notification-tray.js

@@ -45,6 +45,15 @@ export default class NotificationTrayComponent extends Component {
      */
     @tracked notificationSound = new Audio('/sounds/notification-sound.mp3');
 
+    get renderInPlace() {
+        if (this.media.isMobile) return false;
+        if (typeof this.args.renderInPlace === 'boolean') {
+            return this.args.renderInPlace;
+        }
+
+        return false;
+    }
+
     /**
      * Creates an instance of the NotificationTrayComponent
      */

addon/components/table/cell/dropdown.hbs

@@ -6,7 +6,7 @@
         @size="xs"
         @horizontalPosition="left"
         @calculatePosition={{this.calculatePosition}}
-        @renderInPlace={{true}}
+        @renderInPlace={{this.renderInPlace}}
         @onOpen={{this.onOpen}}
         @onClose={{this.onClose}}
         as |dd|
@@ -25,4 +25,4 @@
             {{/each}}
         </div>
     </DropdownButton>
-</div>
+</div>

addon/components/table/cell/dropdown.js

@@ -7,7 +7,7 @@ export default class TableCellDropdownComponent extends Component {
     defaultButtonText = 'Actions';
 
     @computed('args.column.ddButtonText', 'defaultButtonText') get buttonText() {
-        const { ddButtonText } = this.args.column;
+        const { ddButtonText } = this.args.column ?? {};
 
         if (ddButtonText === undefined) {
             return this.defaultButtonText;
@@ -20,25 +20,43 @@ export default class TableCellDropdownComponent extends Component {
         return ddButtonText;
     }
 
+    get renderInPlace() {
+        return this.args.column?.renderInPlace ?? true;
+    }
+
     @action setupComponent(dropdownWrapperNode) {
         const tableCellNode = this.getOwnerTableCell(dropdownWrapperNode);
-        tableCellNode.style.overflow = 'visible';
+
+        if (tableCellNode) {
+            tableCellNode.style.overflow = 'visible';
+        }
+
         this.tableCellNode = tableCellNode;
     }
 
     @action onOpen() {
-        this.tableCellNode.style.zIndex = parseInt(this.tableCellNode.style.zIndex) + 1;
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 0;
+        this.tableCellNode.style.zIndex = currentZIndex + 1;
     }
 
     @action onClose() {
-        this.tableCellNode.style.zIndex = parseInt(this.tableCellNode.style.zIndex) - 1;
+        if (!this.tableCellNode) {
+            return;
+        }
+
+        const currentZIndex = Number.parseInt(this.tableCellNode.style.zIndex, 10) || 1;
+        this.tableCellNode.style.zIndex = currentZIndex - 1;
     }
 
     @action getOwnerTableCell(dropdownWrapperNode) {
         while (dropdownWrapperNode) {
             dropdownWrapperNode = dropdownWrapperNode.parentNode;
 
-            if (dropdownWrapperNode.tagName.toLowerCase() === 'td') {
+            if (dropdownWrapperNode?.tagName?.toLowerCase() === 'td') {
                 return dropdownWrapperNode;
             }
         }
@@ -57,15 +75,19 @@ export default class TableCellDropdownComponent extends Component {
     }
 
     @action calculatePosition(trigger, content) {
+        if (typeof this.args.column?.calculatePosition === 'function') {
+            return this.args.column.calculatePosition(trigger, content);
+        }
+
         const triggerRect = trigger.getBoundingClientRect();
         const contentRect = content?.getBoundingClientRect?.();
         const contentWidth = contentRect?.width || 224;
 
-        let style = {
+        const style = {
             position: 'fixed',
             marginTop: '0px',
-            left: `${triggerRect.left - contentWidth - 3}px`,
-            top: `${triggerRect.top}px`,
+            left: triggerRect.left - contentWidth - 3,
+            top: triggerRect.top,
         };
 
         return { style };

addon/components/table/cell/dropdown/action-item.hbs

@@ -1,8 +1,8 @@
 {{#if this.visible}}
-    {{#if @columnAction.separator}}
-        <div class="next-dd-menu-seperator"></div>
-    {{else}}
-        {{#if this.isVisible}}
+    {{#if this.isVisible}}
+        {{#if @columnAction.separator}}
+            <div class="next-dd-menu-seperator"></div>
+        {{else}}
             <div role="group" class="px-1">
                 <a
                     href="javascript:;"
@@ -30,4 +30,4 @@
             </div>
         {{/if}}
     {{/if}}
-{{/if}}
+{{/if}}

addon/helpers/format-json.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function formatJson([jsonable]) {
+    return JSON.stringify(jsonable, null, 2);
+});