@momentumcms/ui 0.5.1 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5311,7 +5311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5311
5311
|
/**
|
|
5312
5312
|
* Table header cell (th) component.
|
|
5313
5313
|
*
|
|
5314
|
-
*
|
|
5314
|
+
* GridCell manages the `role` attribute imperatively. Pass `role="columnheader"`
|
|
5315
|
+
* when used inside `<mcms-table-header>` for correct ARIA semantics.
|
|
5315
5316
|
*
|
|
5316
5317
|
* @example
|
|
5317
5318
|
* ```html
|
|
@@ -5319,8 +5320,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5319
5320
|
* ```
|
|
5320
5321
|
*/
|
|
5321
5322
|
class TableHead {
|
|
5322
|
-
/** ARIA role for the header cell (forwarded to GridCell). */
|
|
5323
|
-
role = input('columnheader', ...(ngDevMode ? [{ debugName: "role" }] : []));
|
|
5324
5323
|
/** Whether this column is disabled. */
|
|
5325
5324
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
5326
5325
|
/** Number of columns to span. */
|
|
@@ -5334,7 +5333,7 @@ class TableHead {
|
|
|
5334
5333
|
return `${base} ${this.class()}`.trim();
|
|
5335
5334
|
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
5336
5335
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TableHead, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: TableHead, isStandalone: true, selector: "mcms-table-head", inputs: {
|
|
5336
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: TableHead, isStandalone: true, selector: "mcms-table-head", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1$4.GridCell, inputs: ["disabled", "disabled", "colSpan", "colSpan", "rowSpan", "rowSpan", "role", "role"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:table-cell}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5338
5337
|
}
|
|
5339
5338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TableHead, decorators: [{
|
|
5340
5339
|
type: Component,
|
|
@@ -5346,7 +5345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5346
5345
|
], host: {
|
|
5347
5346
|
'[class]': 'hostClasses()',
|
|
5348
5347
|
}, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:table-cell}\n"] }]
|
|
5349
|
-
}], propDecorators: {
|
|
5348
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
5350
5349
|
|
|
5351
5350
|
/**
|
|
5352
5351
|
* Table data cell (td) component with selection support.
|
|
@@ -6018,17 +6017,17 @@ class DataTable {
|
|
|
6018
6017
|
<mcms-table-header>
|
|
6019
6018
|
<mcms-table-row>
|
|
6020
6019
|
@if (selectable()) {
|
|
6021
|
-
<mcms-table-head class="w-12">
|
|
6020
|
+
<mcms-table-head role="columnheader" class="w-12">
|
|
6022
6021
|
<mcms-skeleton class="h-4 w-4" />
|
|
6023
6022
|
</mcms-table-head>
|
|
6024
6023
|
}
|
|
6025
6024
|
@for (col of columns(); track col.field) {
|
|
6026
|
-
<mcms-table-head [style.width]="col.width" [style.min-width]="col.minWidth || '100px'">
|
|
6025
|
+
<mcms-table-head role="columnheader" [style.width]="col.width" [style.min-width]="col.minWidth || '100px'">
|
|
6027
6026
|
<mcms-skeleton class="h-4 w-20" />
|
|
6028
6027
|
</mcms-table-head>
|
|
6029
6028
|
}
|
|
6030
6029
|
@if (rowActions().length > 0) {
|
|
6031
|
-
<mcms-table-head class="w-12" />
|
|
6030
|
+
<mcms-table-head role="columnheader" class="w-12" />
|
|
6032
6031
|
}
|
|
6033
6032
|
</mcms-table-row>
|
|
6034
6033
|
</mcms-table-header>
|
|
@@ -6067,7 +6066,7 @@ class DataTable {
|
|
|
6067
6066
|
<mcms-table-header>
|
|
6068
6067
|
<mcms-table-row>
|
|
6069
6068
|
@if (selectable()) {
|
|
6070
|
-
<mcms-table-head class="w-12">
|
|
6069
|
+
<mcms-table-head role="columnheader" class="w-12">
|
|
6071
6070
|
<mcms-checkbox
|
|
6072
6071
|
[value]="allSelected()"
|
|
6073
6072
|
[indeterminate]="someSelected()"
|
|
@@ -6078,6 +6077,7 @@ class DataTable {
|
|
|
6078
6077
|
}
|
|
6079
6078
|
@for (col of columns(); track col.field) {
|
|
6080
6079
|
<mcms-table-head
|
|
6080
|
+
role="columnheader"
|
|
6081
6081
|
[style.width]="col.width"
|
|
6082
6082
|
[style.min-width]="col.minWidth || '100px'"
|
|
6083
6083
|
[style.text-align]="col.align || 'left'"
|
|
@@ -6113,7 +6113,7 @@ class DataTable {
|
|
|
6113
6113
|
</mcms-table-head>
|
|
6114
6114
|
}
|
|
6115
6115
|
@if (rowActions().length > 0) {
|
|
6116
|
-
<mcms-table-head class="w-12" />
|
|
6116
|
+
<mcms-table-head role="columnheader" class="w-12" />
|
|
6117
6117
|
}
|
|
6118
6118
|
</mcms-table-row>
|
|
6119
6119
|
</mcms-table-header>
|
|
@@ -6216,7 +6216,7 @@ class DataTable {
|
|
|
6216
6216
|
/>
|
|
6217
6217
|
</div>
|
|
6218
6218
|
}
|
|
6219
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mcms-table", inputs: ["enableSelection", "disabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "enableRangeSelection", "class"] }, { kind: "component", type: TableHeader, selector: "mcms-table-header, thead[mcms-table-header]", inputs: ["class"] }, { kind: "component", type: TableBody, selector: "mcms-table-body", inputs: ["class"] }, { kind: "component", type: TableRow, selector: "mcms-table-row", inputs: ["rowIndex", "selected", "class"] }, { kind: "component", type: TableHead, selector: "mcms-table-head", inputs: ["
|
|
6219
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mcms-table", inputs: ["enableSelection", "disabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "enableRangeSelection", "class"] }, { kind: "component", type: TableHeader, selector: "mcms-table-header, thead[mcms-table-header]", inputs: ["class"] }, { kind: "component", type: TableBody, selector: "mcms-table-body", inputs: ["class"] }, { kind: "component", type: TableRow, selector: "mcms-table-row", inputs: ["rowIndex", "selected", "class"] }, { kind: "component", type: TableHead, selector: "mcms-table-head", inputs: ["disabled", "colSpan", "rowSpan", "class"] }, { kind: "component", type: TableCell, selector: "mcms-table-cell", inputs: ["disabled", "selected", "colSpan", "rowSpan", "class"], outputs: ["selectedChange"] }, { kind: "component", type: Checkbox, selector: "mcms-checkbox", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "describedBy", "indeterminate", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: EmptyState, selector: "mcms-empty-state", inputs: ["title", "description", "size", "class"] }, { kind: "component", type: Pagination, selector: "mcms-pagination", inputs: ["currentPage", "totalPages", "siblingCount", "class"], outputs: ["pageChange"] }, { kind: "component", type: SearchInput, selector: "mcms-search-input", inputs: ["value", "placeholder", "debounce", "disabled", "ariaLabel", "class"], outputs: ["valueChange", "searchChange", "clear"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "directive", type: DropdownTrigger, selector: "[mcmsDropdownTrigger]", inputs: ["mcmsDropdownTrigger", "dropdownSide", "dropdownAlign", "dropdownOffset", "dropdownDisabled"], outputs: ["opened", "closed"], exportAs: ["mcmsDropdownTrigger"] }, { kind: "component", type: DropdownMenu, selector: "mcms-dropdown-menu", inputs: ["disabled", "wrap", "typeaheadDelay", "class"], outputs: ["itemSelected"] }, { kind: "component", type: DropdownMenuItem, selector: "button[mcms-dropdown-item], a[mcms-dropdown-item]", inputs: ["value", "disabled", "shortcut", "class"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6220
6220
|
}
|
|
6221
6221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataTable, decorators: [{
|
|
6222
6222
|
type: Component,
|
|
@@ -6267,17 +6267,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6267
6267
|
<mcms-table-header>
|
|
6268
6268
|
<mcms-table-row>
|
|
6269
6269
|
@if (selectable()) {
|
|
6270
|
-
<mcms-table-head class="w-12">
|
|
6270
|
+
<mcms-table-head role="columnheader" class="w-12">
|
|
6271
6271
|
<mcms-skeleton class="h-4 w-4" />
|
|
6272
6272
|
</mcms-table-head>
|
|
6273
6273
|
}
|
|
6274
6274
|
@for (col of columns(); track col.field) {
|
|
6275
|
-
<mcms-table-head [style.width]="col.width" [style.min-width]="col.minWidth || '100px'">
|
|
6275
|
+
<mcms-table-head role="columnheader" [style.width]="col.width" [style.min-width]="col.minWidth || '100px'">
|
|
6276
6276
|
<mcms-skeleton class="h-4 w-20" />
|
|
6277
6277
|
</mcms-table-head>
|
|
6278
6278
|
}
|
|
6279
6279
|
@if (rowActions().length > 0) {
|
|
6280
|
-
<mcms-table-head class="w-12" />
|
|
6280
|
+
<mcms-table-head role="columnheader" class="w-12" />
|
|
6281
6281
|
}
|
|
6282
6282
|
</mcms-table-row>
|
|
6283
6283
|
</mcms-table-header>
|
|
@@ -6316,7 +6316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6316
6316
|
<mcms-table-header>
|
|
6317
6317
|
<mcms-table-row>
|
|
6318
6318
|
@if (selectable()) {
|
|
6319
|
-
<mcms-table-head class="w-12">
|
|
6319
|
+
<mcms-table-head role="columnheader" class="w-12">
|
|
6320
6320
|
<mcms-checkbox
|
|
6321
6321
|
[value]="allSelected()"
|
|
6322
6322
|
[indeterminate]="someSelected()"
|
|
@@ -6327,6 +6327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6327
6327
|
}
|
|
6328
6328
|
@for (col of columns(); track col.field) {
|
|
6329
6329
|
<mcms-table-head
|
|
6330
|
+
role="columnheader"
|
|
6330
6331
|
[style.width]="col.width"
|
|
6331
6332
|
[style.min-width]="col.minWidth || '100px'"
|
|
6332
6333
|
[style.text-align]="col.align || 'left'"
|
|
@@ -6362,7 +6363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6362
6363
|
</mcms-table-head>
|
|
6363
6364
|
}
|
|
6364
6365
|
@if (rowActions().length > 0) {
|
|
6365
|
-
<mcms-table-head class="w-12" />
|
|
6366
|
+
<mcms-table-head role="columnheader" class="w-12" />
|
|
6366
6367
|
}
|
|
6367
6368
|
</mcms-table-row>
|
|
6368
6369
|
</mcms-table-header>
|
|
@@ -9179,10 +9180,12 @@ class KitchenSinkPage {
|
|
|
9179
9180
|
<mcms-table-caption>A list of recent invoices.</mcms-table-caption>
|
|
9180
9181
|
<mcms-table-header>
|
|
9181
9182
|
<mcms-table-row>
|
|
9182
|
-
<mcms-table-head>Invoice</mcms-table-head>
|
|
9183
|
-
<mcms-table-head>Status</mcms-table-head>
|
|
9184
|
-
<mcms-table-head>Method</mcms-table-head>
|
|
9185
|
-
<mcms-table-head style="text-align: right;"
|
|
9183
|
+
<mcms-table-head role="columnheader">Invoice</mcms-table-head>
|
|
9184
|
+
<mcms-table-head role="columnheader">Status</mcms-table-head>
|
|
9185
|
+
<mcms-table-head role="columnheader">Method</mcms-table-head>
|
|
9186
|
+
<mcms-table-head role="columnheader" style="text-align: right;"
|
|
9187
|
+
>Amount</mcms-table-head
|
|
9188
|
+
>
|
|
9186
9189
|
</mcms-table-row>
|
|
9187
9190
|
</mcms-table-header>
|
|
9188
9191
|
<mcms-table-body>
|
|
@@ -9423,7 +9426,7 @@ class KitchenSinkPage {
|
|
|
9423
9426
|
// Sidebar
|
|
9424
9427
|
Sidebar, selector: "mcms-sidebar", inputs: ["width", "collapsedWidth", "collapsed", "class"] }, { kind: "component", type: SidebarHeader, selector: "mcms-sidebar-header", inputs: ["class"] }, { kind: "component", type: SidebarContent, selector: "mcms-sidebar-content", inputs: ["class"] }, { kind: "component", type: SidebarFooter, selector: "mcms-sidebar-footer", inputs: ["class"] }, { kind: "component", type: SidebarNav, selector: "mcms-sidebar-nav", inputs: ["ariaLabel", "class"] }, { kind: "component", type: SidebarNavItem, selector: "mcms-sidebar-nav-item", inputs: ["label", "href", "icon", "badge", "active", "disabled", "exact", "class"], outputs: ["clicked"] }, { kind: "component", type: SidebarSection, selector: "mcms-sidebar-section", inputs: ["title", "collapsible", "expanded", "class"], outputs: ["expandedChange"] }, { kind: "component", type:
|
|
9425
9428
|
// Table
|
|
9426
|
-
Table, selector: "mcms-table", inputs: ["enableSelection", "disabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "enableRangeSelection", "class"] }, { kind: "component", type: TableHeader, selector: "mcms-table-header, thead[mcms-table-header]", inputs: ["class"] }, { kind: "component", type: TableBody, selector: "mcms-table-body", inputs: ["class"] }, { kind: "component", type: TableRow, selector: "mcms-table-row", inputs: ["rowIndex", "selected", "class"] }, { kind: "component", type: TableHead, selector: "mcms-table-head", inputs: ["
|
|
9429
|
+
Table, selector: "mcms-table", inputs: ["enableSelection", "disabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "enableRangeSelection", "class"] }, { kind: "component", type: TableHeader, selector: "mcms-table-header, thead[mcms-table-header]", inputs: ["class"] }, { kind: "component", type: TableBody, selector: "mcms-table-body", inputs: ["class"] }, { kind: "component", type: TableRow, selector: "mcms-table-row", inputs: ["rowIndex", "selected", "class"] }, { kind: "component", type: TableHead, selector: "mcms-table-head", inputs: ["disabled", "colSpan", "rowSpan", "class"] }, { kind: "component", type: TableCell, selector: "mcms-table-cell", inputs: ["disabled", "selected", "colSpan", "rowSpan", "class"], outputs: ["selectedChange"] }, { kind: "component", type: TableCaption, selector: "mcms-table-caption", inputs: ["class"] }, { kind: "component", type:
|
|
9427
9430
|
// Data Display
|
|
9428
9431
|
Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: Avatar, selector: "mcms-avatar", inputs: ["size", "class", "ariaLabel"] }, { kind: "component", type: AvatarFallback, selector: "mcms-avatar-fallback", inputs: ["delayMs", "class"] }, { kind: "component", type: Separator, selector: "mcms-separator", inputs: ["orientation", "decorative", "class"] }, { kind: "component", type:
|
|
9429
9432
|
// Command
|
|
@@ -10028,10 +10031,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
10028
10031
|
<mcms-table-caption>A list of recent invoices.</mcms-table-caption>
|
|
10029
10032
|
<mcms-table-header>
|
|
10030
10033
|
<mcms-table-row>
|
|
10031
|
-
<mcms-table-head>Invoice</mcms-table-head>
|
|
10032
|
-
<mcms-table-head>Status</mcms-table-head>
|
|
10033
|
-
<mcms-table-head>Method</mcms-table-head>
|
|
10034
|
-
<mcms-table-head style="text-align: right;"
|
|
10034
|
+
<mcms-table-head role="columnheader">Invoice</mcms-table-head>
|
|
10035
|
+
<mcms-table-head role="columnheader">Status</mcms-table-head>
|
|
10036
|
+
<mcms-table-head role="columnheader">Method</mcms-table-head>
|
|
10037
|
+
<mcms-table-head role="columnheader" style="text-align: right;"
|
|
10038
|
+
>Amount</mcms-table-head
|
|
10039
|
+
>
|
|
10035
10040
|
</mcms-table-row>
|
|
10036
10041
|
</mcms-table-header>
|
|
10037
10042
|
<mcms-table-body>
|