@acorex/components 22.0.0-next.3 → 22.0.0-next.30

package/combo-box/README.md

@@ -0,0 +1,26 @@
+# @acorex/components/combo-box
+
+A minimal, accessible combo box component for selecting a value from a list, built on top of `@angular/aria/combobox`.
+
+## Usage
+
+```ts
+import { AXComboBoxComponent, AXComboBoxItem } from '@acorex/components/combo-box';
+
+const items: AXComboBoxItem[] = [
+  { id: 'apple', text: 'Apple', value: 1 },
+  { id: 'banana', text: 'Banana', value: 2 },
+];
+```
+
+```html
+<ax-combo-box [items]="items" [(value)]="selected" placeholder="Select a fruit"></ax-combo-box>
+```
+
+- `id`: used for typeahead filtering and list identity
+- `text`: shown in the list and trigger/input
+- `value`: written to `[(value)]` when the item is selected (`string | number`)
+- `editable="true"` (default): a text input with typeahead filtering on `id`
+- `editable="false"`: a non-editable, select-like trigger
+- `look`: the same editor-container look schemes as other editors like `ax-text-box`
+- `ax-prefix` / `ax-suffix`: project decorators into the editor container, same as `ax-text-box`

package/fesm2022/acorex-components-calendar.mjs

@@ -479,16 +479,14 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         }
         const monthId = this._viewStartDate.monthOfYear;
         const yearId = this._viewStartDate.year;
-        this._selectedMonthOption =
-            this._monthOptions.find((month) => month.id === monthId) ?? {
-                id: monthId,
-                text: `@acorex:${this.getMonthName(this._viewStartDate, 'short')}`,
-            };
-        this._selectedYearOption =
-            this._yearOptions.find((year) => year.id === yearId) ?? {
-                id: yearId,
-                text: String(yearId),
-            };
+        this._selectedMonthOption = this._monthOptions.find((month) => month.id === monthId) ?? {
+            id: monthId,
+            text: `@acorex:${this.getMonthName(this._viewStartDate, 'short')}`,
+        };
+        this._selectedYearOption = this._yearOptions.find((year) => year.id === yearId) ?? {
+            id: yearId,
+            text: String(yearId),
+        };
     }
     /**
      *  @ignore
@@ -612,8 +610,8 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     });
                 }
             }
-            // col-start-1 col-start-2 col-start-3 col-start-4 col-start-5 col-start-6 col-start-7
-            r.cssClass[`column-start-${this._getWeekColumn(view.range.startTime)}`] = i == 0;
+            // ax-column-start-1 … ax-column-start-7 (first day of month grid offset)
+            r.cssClass[`ax-column-start-${this._getWeekColumn(view.range.startTime)}`] = i == 0;
             if (this.cellClass)
                 applyCellClass(r);
             return r;