@meshmakers/octo-ui 3.4.1490 → 3.5.0

package/lib/runtime-browser/styles/_button.scss

@@ -1,5 +1,36 @@
 @use "variables" as *;
 
+// Disabled solid primary (AB#3444): a muted, neutral surface with muted text — not the accent at
+// reduced opacity, which still read as a clickable primary on the dark canvas. Covers native
+// `disabled`, Kendo's `.k-disabled` and the focusable disabled-with-reason pattern
+// (`aria-disabled="true"`, mm-action-button), and pins the look on hover/active so nothing
+// reacts. Pointer events stay on (Kendo sets none on disabled buttons) so the not-allowed cursor
+// shows; a natively disabled button still fires no clicks, a disabled link is rendered as a
+// button by mm-action-button and aria-disabled buttons swallow their clicks themselves.
+@mixin octo-button-primary-disabled($icons: false) {
+  // One compact selector on purpose: this mixin is included under long parent selector lists,
+  // and nested selector lists multiply with them. `[class]` (always present on a Kendo button)
+  // lifts the rule by one attribute so it also beats the `:hover:not(:disabled)` rules declared
+  // before it — an aria-disabled button is not `:disabled`, so those would otherwise match.
+  // No box-shadow here: the focus ring of a focusable disabled button must stay visible.
+  &:is(:disabled, .k-disabled, [aria-disabled="true"])[class] {
+    opacity: 1;
+    filter: none;
+    background: color-mix(in srgb, var(--theme-text-muted, #77869c) 16%, transparent);
+    border-color: var(--theme-border-default, rgba(128, 128, 128, 0.2));
+    color: var(--theme-text-muted, #77869c);
+    cursor: not-allowed;
+    pointer-events: auto;
+
+    @if $icons {
+      :is(.k-svg-icon, .k-icon, svg) {
+        fill: var(--theme-text-muted, #77869c);
+        color: var(--theme-text-muted, #77869c);
+      }
+    }
+  }
+}
+
 // Deep Sea button (AB#5526): flat base/outline style with a flat primary
 // variant. No gradients, no glows, sentence case. Internal to octo.styles():
 // toolbars, dialogs and widget configs in _styles.scss include it (renamed
@@ -70,6 +101,11 @@
     }
   }
 
+  // One `:is()` instead of nesting in the list above: keeps the output small (AB#3444).
+  &:is(.k-button-solid-primary, .k-button-primary, [themecolor="primary"]) {
+    @include octo-button-primary-disabled;
+  }
+
   // Selected FLAT toggles (e.g. the list view's row-filter command, `themeColor="primary"
   // fillMode="flat"`): the primary branch above has the same specificity as `.k-selected` and
   // comes later, so it would paint selected and unselected alike. This rule is more specific and

package/lib/runtime-browser/styles/_styles.scss

@@ -1603,6 +1603,9 @@
       &:active:not(:disabled) {
         background: var(--theme-accent-hover, var(--octo-mint));
       }
+
+      // Icons follow: the block above paints them with --theme-text-on-accent explicitly.
+      @include octo-button-primary-disabled($icons: true);
     }
 
     &.k-button-solid-secondary {
@@ -1756,6 +1759,24 @@
         }
       }
     }
+
+    // Focusable disabled-with-reason buttons (`aria-disabled="true"`, mm-action-button, AB#3444):
+    // they are not natively disabled, so the `:not(:disabled)` hover rules above would still
+    // light them up. Keep them still and show the not-allowed cursor.
+    &[aria-disabled="true"] {
+      cursor: not-allowed;
+
+      &.k-button-flat:not(.k-button-flat-error):not(.k-button-flat-primary):hover,
+      &.k-button-outline-base:hover {
+        background: transparent;
+        color: var(--theme-text-secondary, var(--ash-blue));
+      }
+
+      &.k-button-solid-base:hover {
+        background: var(--theme-bg-elevated, transparent);
+        border-color: var(--theme-border-default, var(--octo-mint-30));
+      }
+    }
   }
 
   // Grid - Deep Sea: surface body, elevated header band, neutral hairlines

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshmakers/octo-ui",
-  "version": "3.4.1490",
+  "version": "3.5.00",
   "peerDependencies": {
     "@ngx-translate/core": "^17.0.0 || ^18.0.0",
     "@angular/animations": "^22.0.0",

package/types/meshmakers-octo-ui-entity-forms.d.ts

@@ -225,7 +225,11 @@ interface ResolvedListColumn {
     field: string;
     label: string;
     width?: number;
-    display: 'text' | 'chip' | 'date' | 'mono';
+    /**
+     * Cell rendering. `icon` (AB#5623) shows a BOOLEAN column as a check / x icon with an accessible
+     * name (other value types render as `text`).
+     */
+    display: 'text' | 'chip' | 'date' | 'mono' | 'icon';
     kind: 'attribute' | 'system';
     /**
      * CK value type of an attribute column (ENUM, BOOLEAN, DATE_TIME, ...). The list formats the
@@ -1614,12 +1618,22 @@ interface EntityListCellLabels {
     /** Text of a cell holding an unset placeholder (AB#5623). Default "Not configured". */
     notConfigured?: string;
 }
+/**
+ * How BOOLEAN list columns without an explicit `display` render (AB#5623): `'text'` (Yes / No,
+ * default) or `'icon'` (check / x icon named "<column>: Yes|No", filterable as boolean).
+ */
+type EntityListBooleanDisplay = 'text' | 'icon';
+/** Options of {@link toEntityListColumn}. */
+interface EntityListColumnOptions {
+    /** See {@link EntityListBooleanDisplay}. Default `'text'`. */
+    booleanDisplay?: EntityListBooleanDisplay;
+}
 /**
  * Maps a resolved list column onto an `mm-list-view` column definition. Cells are formatted by the
  * CK value type like the reference display of the form (AB#5547): ENUM → the enum value's name
  * (the API returns the key), BOOLEAN → yes/no, dates → localized date and time.
  */
-declare function toEntityListColumn(column: ResolvedListColumn, labels?: EntityListCellLabels, unsetPlaceholders?: EntityFormUnsetPlaceholderLookup): TableColumn;
+declare function toEntityListColumn(column: ResolvedListColumn, labels?: EntityListCellLabels, unsetPlaceholders?: EntityFormUnsetPlaceholderLookup, options?: EntityListColumnOptions): TableColumn;
 /**
  * `<mm-entity-list>` — the list view of a resolved entity form.
  *
@@ -1687,6 +1701,18 @@ declare class EntityListComponent {
      * absent = no row classes (unchanged). See {@link EntityListRowClass}.
      */
     readonly rowClass: _angular_core.InputSignal<EntityListRowClass | null | undefined>;
+    /**
+     * How BOOLEAN columns without an explicit display render (AB#5623): `'text'` (Yes / No, default)
+     * or `'icon'` (check / x with an accessible name, boolean filter). A column's own
+     * `display: icon` always renders as icon.
+     */
+    readonly booleanDisplay: _angular_core.InputSignal<EntityListBooleanDisplay>;
+    /**
+     * Row field used as the row's human label (AB#5623): row action names ("Actions for <label>"),
+     * the delete confirmation target. A dotted path reads a nested value. Absent = today's
+     * behaviour (`name`, then `rtWellKnownName`, display name, `rtId`).
+     */
+    readonly rowLabelField: _angular_core.InputSignal<string | null | undefined>;
     /** "New" was confirmed; carries the concrete type (after the subtype picker for abstract types). */
     readonly createRequested: _angular_core.OutputEmitterRef<EntityListCreateRequest>;
     /** A row was opened. */
@@ -1698,6 +1724,8 @@ declare class EntityListComponent {
     protected readonly listViewMessages: _angular_core.Signal<{
         searchPlaceholder: string;
         noRecords: string;
+        booleanYes: string;
+        booleanNo: string;
     }>;
     protected readonly columns: _angular_core.Signal<TableColumn[]>;
     protected readonly canCreate: _angular_core.Signal<boolean>;
@@ -1735,7 +1763,7 @@ declare class EntityListComponent {
     private onDelete;
     private copy;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntityListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityListComponent, "mm-entity-list", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "canWrite": { "alias": "canWrite"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "listStateKey": { "alias": "listStateKey"; "required": false; "isSignal": true; }; "showTypeColumn": { "alias": "showTypeColumn"; "required": false; "isSignal": true; }; "defaultSort": { "alias": "defaultSort"; "required": false; "isSignal": true; }; "labelResolver": { "alias": "labelResolver"; "required": false; "isSignal": true; }; "toolbarActions": { "alias": "toolbarActions"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "rowMenuActions": { "alias": "rowMenuActions"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; }, { "createRequested": "createRequested"; "openRequested": "openRequested"; "deleted": "deleted"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityListComponent, "mm-entity-list", never, { "model": { "alias": "model"; "required": true; "isSignal": true; }; "canWrite": { "alias": "canWrite"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "listStateKey": { "alias": "listStateKey"; "required": false; "isSignal": true; }; "showTypeColumn": { "alias": "showTypeColumn"; "required": false; "isSignal": true; }; "defaultSort": { "alias": "defaultSort"; "required": false; "isSignal": true; }; "labelResolver": { "alias": "labelResolver"; "required": false; "isSignal": true; }; "toolbarActions": { "alias": "toolbarActions"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "rowMenuActions": { "alias": "rowMenuActions"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "booleanDisplay": { "alias": "booleanDisplay"; "required": false; "isSignal": true; }; "rowLabelField": { "alias": "rowLabelField"; "required": false; "isSignal": true; }; }, { "createRequested": "createRequested"; "openRequested": "openRequested"; "deleted": "deleted"; }, never, never, true, never>;
 }
 /**
  * `System.Communication/SftpConfiguration` → `SFTP configuration`.
@@ -1918,6 +1946,18 @@ declare class EntityPageComponent implements HasUnsavedChanges {
      * route data `entityListRowClass`, then `ENTITY_LIST_ROW_CLASS`.
      */
     readonly listRowClass: _angular_core.InputSignal<EntityListRowClass | null | undefined>;
+    /**
+     * How the list renders BOOLEAN columns (AB#5623), passed to `mm-entity-list`'s `booleanDisplay`:
+     * `'text'` (default) or `'icon'`. Falls back to route data `entityListBooleanDisplay`.
+     */
+    readonly listBooleanDisplay: _angular_core.InputSignal<EntityListBooleanDisplay | undefined>;
+    /**
+     * Field naming a row / entity for people (AB#5623): passed to `mm-entity-list`'s
+     * `rowLabelField` (row action names, delete confirmation) and used for the dialog / page title
+     * ("Edit <label>") and the delete confirmation of the open entity. Falls back to route data
+     * `entityListRowLabelField`; absent = today's behaviour (`name`, well-known name, display name, rtId).
+     */
+    readonly listRowLabelField: _angular_core.InputSignal<string | undefined>;
     /** Emitted for every list / create / edit transition. */
     readonly navigate: _angular_core.OutputEmitterRef<EntityPageNavigateEvent>;
     /** Emitted after a successful create or update (not for "no changes"). Hosts refresh their lists on it. */
@@ -1967,6 +2007,10 @@ declare class EntityPageComponent implements HasUnsavedChanges {
     protected readonly effectiveDefaultSort: _angular_core.Signal<readonly EntityListSortDescriptor[] | undefined>;
     /** The list's row class callback: input, else route data `entityListRowClass` (else the list's token). */
     protected readonly effectiveListRowClass: _angular_core.Signal<EntityListRowClass | undefined>;
+    /** Row label field: input, else route data `entityListRowLabelField`, else none (default naming). */
+    protected readonly effectiveRowLabelField: _angular_core.Signal<string | undefined>;
+    /** Boolean columns of the list: input, else route data `entityListBooleanDisplay`, else text. */
+    protected readonly effectiveListBooleanDisplay: _angular_core.Signal<EntityListBooleanDisplay>;
     /** The prefill of the current create form (AB#5623), computed when the form opens. */
     protected readonly createInitialValues: _angular_core.WritableSignal<Readonly<Record<string, unknown>> | null>;
     /** Base model with translated title / description (list header). */
@@ -2057,7 +2101,7 @@ declare class EntityPageComponent implements HasUnsavedChanges {
     /** The host prefill for a create form of the given type. */
     private initialValuesFor;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntityPageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityPageComponent, "mm-entity-page", never, { "formKey": { "alias": "formKey"; "required": false; "isSignal": true; }; "ckTypeId": { "alias": "ckTypeId"; "required": false; "isSignal": true; }; "rtId": { "alias": "rtId"; "required": false; "isSignal": true; }; "canWrite": { "alias": "canWrite"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "routerNavigation": { "alias": "routerNavigation"; "required": false; "isSignal": true; }; "actionBarPosition": { "alias": "actionBarPosition"; "required": false; "isSignal": true; }; "labelResolver": { "alias": "labelResolver"; "required": false; "isSignal": true; }; "defaultSort": { "alias": "defaultSort"; "required": false; "isSignal": true; }; "initialValues": { "alias": "initialValues"; "required": false; "isSignal": true; }; "beforeSave": { "alias": "beforeSave"; "required": false; "isSignal": true; }; "listToolbarActions": { "alias": "listToolbarActions"; "required": false; "isSignal": true; }; "listRowActions": { "alias": "listRowActions"; "required": false; "isSignal": true; }; "listRowMenuActions": { "alias": "listRowMenuActions"; "required": false; "isSignal": true; }; "editMode": { "alias": "editMode"; "required": false; "isSignal": true; }; "listRowClass": { "alias": "listRowClass"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; "saved": "saved"; "deleted": "deleted"; }, ["pageActions"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityPageComponent, "mm-entity-page", never, { "formKey": { "alias": "formKey"; "required": false; "isSignal": true; }; "ckTypeId": { "alias": "ckTypeId"; "required": false; "isSignal": true; }; "rtId": { "alias": "rtId"; "required": false; "isSignal": true; }; "canWrite": { "alias": "canWrite"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "routerNavigation": { "alias": "routerNavigation"; "required": false; "isSignal": true; }; "actionBarPosition": { "alias": "actionBarPosition"; "required": false; "isSignal": true; }; "labelResolver": { "alias": "labelResolver"; "required": false; "isSignal": true; }; "defaultSort": { "alias": "defaultSort"; "required": false; "isSignal": true; }; "initialValues": { "alias": "initialValues"; "required": false; "isSignal": true; }; "beforeSave": { "alias": "beforeSave"; "required": false; "isSignal": true; }; "listToolbarActions": { "alias": "listToolbarActions"; "required": false; "isSignal": true; }; "listRowActions": { "alias": "listRowActions"; "required": false; "isSignal": true; }; "listRowMenuActions": { "alias": "listRowMenuActions"; "required": false; "isSignal": true; }; "editMode": { "alias": "editMode"; "required": false; "isSignal": true; }; "listRowClass": { "alias": "listRowClass"; "required": false; "isSignal": true; }; "listBooleanDisplay": { "alias": "listBooleanDisplay"; "required": false; "isSignal": true; }; "listRowLabelField": { "alias": "listRowLabelField"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; "saved": "saved"; "deleted": "deleted"; }, ["pageActions"], never, true, never>;
 }
 
 /**
@@ -2134,6 +2178,16 @@ interface EntityFormRoutesOptions {
      * key `entityPageEditMode`.
      */
     editMode?: 'page' | 'dialog';
+    /**
+     * `'icon'` renders the list's BOOLEAN columns as check / x icons (AB#5623). Default `'text'`.
+     * Route data key `entityListBooleanDisplay`.
+     */
+    booleanDisplay?: 'text' | 'icon';
+    /**
+     * Field naming a row / entity for people (AB#5623): row action names, dialog / page title and
+     * delete confirmations. Route data key `entityListRowLabelField`.
+     */
+    rowLabelField?: string;
     /** Label of the create breadcrumb. Default `New`. */
     newBreadcrumbLabel?: string;
     /** Label of the edit breadcrumb. Default `{{entityName}}`. */
@@ -2591,4 +2645,4 @@ declare function toCkTypeInfo(raw: RawCkType): CkTypeInfo;
 declare function toCkRecordInfo(raw: RawCkRecord): CkRecordInfo;
 
 export { BUILT_IN_DEFAULT_FORM, DEFAULT_ENTITY_FORMS_MESSAGES, DEFAULT_GENERATED_SECTION_TITLE, DEFAULT_SECTION_KEY, ENTITY_FORM_ACTION_CONFIRMATION, ENTITY_FORM_BEFORE_SAVE, ENTITY_FORM_DANGER_CONFIRMATION, ENTITY_FORM_FALLBACK_FORMS, ENTITY_FORM_LABEL_RESOLVER, ENTITY_FORM_SECRET_KEY_RING_CONFIGURED, ENTITY_FORM_SECRET_PLACEHOLDER_VALUES, ENTITY_FORM_UNSET_PLACEHOLDER_VALUES, ENTITY_LIST_ROW_CLASS, ENTITY_PAGE_NEW, ENTITY_PAGE_TYPE_QUERY_PARAM, EntityFormComponent, EntityFormDataService, EntityFormRecordsFieldComponent, EntityFormReferenceFieldComponent, EntityFormSaveVeto, EntityFormSecretEditorComponent, EntityFormService, EntityListComponent, EntityListDataSourceDirective, EntityPageActionsDirective, EntityPageComponent, GENERATED_SECTION_KEY, SYSTEM_PROPERTIES, associationFieldKey, associationRoleName, autoEditorFor, buildChangeSet, canonicaliseEntityFormPrefill, canonicalisePath, ckTypeDisplayName, ckTypeShortName, confirmEntityFormAction, confirmEntityFormDanger, entityDeleteConfirmation, entityFormCatalog, entityFormKey, entityFormPrefillState, entityFormRoutes, entityFormTypeTitles, entityFormUnsetPlaceholderFields, entityFormUnsetPlaceholderLookup, entityListAttributeNames, entityListIncludesDerivedTypes, formatEntityFormsMessage, humanizeCkTypeName, isChainEndForm, isEditorCompatible, isEntityFormSaveVeto, isEntityFormUnsetPlaceholder, isSecretMetaData, isVisible, localizeEntityForm, localizeEntityFormTitle, localizeEntityListColumns, mergeEntityFormPrefill, mergeEntityFormsMessages, parseDefault, parseEntityForm, parseEntityForms, parseVisibleWhen, pickEntityForm, provideEntityFormFallbacks, resolveEntityForm, resolveEntityFormLabel, resolveListDefaultSort, runEntityFormBeforeSave, secretMetaDataMarker, secretStatusLabelsOf, selectFallbackForms, shortTypeName, toAttributeInputs, toCkRecordInfo, toCkTypeInfo, toEntityListColumn, toEntityListRow, toFormValue, toKebabTypeKey, toListViewRowClass, withFallbackForms };
-export type { BuildChangeSetOptions, CanonicalPath, CkAssociationRoleInfo, CkAttributeInfo, CkRecordInfo, CkTypeInfo, EntityFormActionConfirmation, EntityFormActionRequest, EntityFormBeforeSaveContext, EntityFormBeforeSaveHook, EntityFormBeforeSaveOutcome, EntityFormBeforeSaveResult, EntityFormCatalogEntry, EntityFormChangeSet, EntityFormColumnDef, EntityFormDangerConfirmation, EntityFormDefinition, EntityFormEditor, EntityFormFieldDef, EntityFormLabelKind, EntityFormLabelRequest, EntityFormLabelResolver, EntityFormLoadKey, EntityFormLoadResult, EntityFormMode, EntityFormPrefillOptions, EntityFormPrefillValues, EntityFormRecordColumn, EntityFormReferenceValue, EntityFormRoutesOptions, EntityFormSecretFieldState, EntityFormSectionDef, EntityFormSortDef, EntityFormSource, EntityFormTargetRef, EntityFormUnsetPlaceholderLookup, EntityFormUnsetPlaceholderTarget, EntityFormUnsetPlaceholderValues, EntityFormValueState, EntityFormsMessages, EntityListCellLabels, EntityListCreateRequest, EntityListOpenRequest, EntityListRow, EntityListRowClass, EntityListSortDescriptor, EntityPageActionBarPosition, EntityPageActionsContext, EntityPageDeletedEvent, EntityPageEditMode, EntityPageInitialValues, EntityPageNavigateEvent, EntityPageSavedEvent, EntityPageView, RawRtEntityRow, ReadOnlyMode, ResolveEntityFormOptions, ResolvedEntityForm, ResolvedField, ResolvedListColumn, ResolvedSection, VisibleWhenRule };
+export type { BuildChangeSetOptions, CanonicalPath, CkAssociationRoleInfo, CkAttributeInfo, CkRecordInfo, CkTypeInfo, EntityFormActionConfirmation, EntityFormActionRequest, EntityFormBeforeSaveContext, EntityFormBeforeSaveHook, EntityFormBeforeSaveOutcome, EntityFormBeforeSaveResult, EntityFormCatalogEntry, EntityFormChangeSet, EntityFormColumnDef, EntityFormDangerConfirmation, EntityFormDefinition, EntityFormEditor, EntityFormFieldDef, EntityFormLabelKind, EntityFormLabelRequest, EntityFormLabelResolver, EntityFormLoadKey, EntityFormLoadResult, EntityFormMode, EntityFormPrefillOptions, EntityFormPrefillValues, EntityFormRecordColumn, EntityFormReferenceValue, EntityFormRoutesOptions, EntityFormSecretFieldState, EntityFormSectionDef, EntityFormSortDef, EntityFormSource, EntityFormTargetRef, EntityFormUnsetPlaceholderLookup, EntityFormUnsetPlaceholderTarget, EntityFormUnsetPlaceholderValues, EntityFormValueState, EntityFormsMessages, EntityListBooleanDisplay, EntityListCellLabels, EntityListColumnOptions, EntityListCreateRequest, EntityListOpenRequest, EntityListRow, EntityListRowClass, EntityListSortDescriptor, EntityPageActionBarPosition, EntityPageActionsContext, EntityPageDeletedEvent, EntityPageEditMode, EntityPageInitialValues, EntityPageNavigateEvent, EntityPageSavedEvent, EntityPageView, RawRtEntityRow, ReadOnlyMode, ResolveEntityFormOptions, ResolvedEntityForm, ResolvedField, ResolvedListColumn, ResolvedSection, VisibleWhenRule };