@elasticias/ui 1.0.31 → 1.0.33
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.
|
@@ -5190,6 +5190,21 @@ class EfDataCardComponent {
|
|
|
5190
5190
|
* Children that own their own click. Opening the row on top of them would
|
|
5191
5191
|
* run two things from one gesture.
|
|
5192
5192
|
*/
|
|
5193
|
+
/**
|
|
5194
|
+
* Cells that exist for a control of their own rather than for the row's
|
|
5195
|
+
* content: the drag handle, the select box, the actions menu. The
|
|
5196
|
+
* component already treats `select` and `actions` as structural when it
|
|
5197
|
+
* decides what is a data column; a click belongs to the cell's own job.
|
|
5198
|
+
*
|
|
5199
|
+
* Guarding only the control itself was not enough. A select cell is wider
|
|
5200
|
+
* than its checkbox, so a click in the padding beside it fell through to
|
|
5201
|
+
* the row and opened the record — throwing away a multi-select that was
|
|
5202
|
+
* still being built, from a miss of about 20px.
|
|
5203
|
+
*/
|
|
5204
|
+
static STRUCTURAL_CELL = 'td.tbl-drag, td[data-col="select"], td[data-col="actions"]';
|
|
5205
|
+
isStructuralCell(target) {
|
|
5206
|
+
return !!target?.closest(EfDataCardComponent.STRUCTURAL_CELL);
|
|
5207
|
+
}
|
|
5193
5208
|
static INTERACTIVE_CHILD = 'button, a, input, select, textarea, label, [role="button"], [role="menu"], [role="menuitem"]';
|
|
5194
5209
|
/**
|
|
5195
5210
|
* Bounded by the row on purpose. The row itself is given `role="button"`
|
|
@@ -5228,6 +5243,8 @@ class EfDataCardComponent {
|
|
|
5228
5243
|
onRowClick(row, event) {
|
|
5229
5244
|
if (!this.rowDoubleClickable())
|
|
5230
5245
|
return;
|
|
5246
|
+
if (this.isStructuralCell(event.target))
|
|
5247
|
+
return;
|
|
5231
5248
|
if (this.isInteractiveTarget(event.target, event.currentTarget))
|
|
5232
5249
|
return;
|
|
5233
5250
|
if (this.hasTextSelection())
|
|
@@ -7224,11 +7241,11 @@ class EfModuleRailComponent {
|
|
|
7224
7241
|
return row.kind === 'module' ? `m:${row.module.id}` : `d:${index}`;
|
|
7225
7242
|
}
|
|
7226
7243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfModuleRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7227
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfModuleRailComponent, isStandalone: true, selector: "ef-module-rail", inputs: { badges: "badges" }, ngImport: i0, template: "<nav class=\"ef-module-rail\" aria-label=\"Modules\">\n <div class=\"ef-module-rail__logo-slot\">\n <ng-content select=\"[logo]\"></ng-content>\n </div>\n\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'divider') {\n <span class=\"ef-module-rail__divider\" aria-hidden=\"true\"></span>\n } @else {\n <button\n type=\"button\"\n class=\"ef-module-rail__btn\"\n [class.is-active]=\"activeId() === row.module.id\"\n [attr.data-module]=\"row.module.id\"\n [attr.aria-current]=\"activeId() === row.module.id ? 'page' : null\"\n [style.--m-color]=\"'var(--' + row.module.accent + ')'\"\n [pTooltip]=\"row.module.labelKey | translate\"\n tooltipPosition=\"right\"\n (click)=\"onSelect(row.module)\"\n >\n <i class=\"ef-module-rail__icon\" [class]=\"row.module.icon\" aria-hidden=\"true\"></i>\n\n @if (badgeFor(row.module.id); as badge) {\n <span class=\"ef-module-rail__badge\">{{ badge }}</span>\n }\n\n <span class=\"ef-module-rail__sr\">{{ row.module.labelKey | translate }}</span>\n </button>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:0 0 64px;width:64px;background:var(--
|
|
7244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfModuleRailComponent, isStandalone: true, selector: "ef-module-rail", inputs: { badges: "badges" }, ngImport: i0, template: "<nav class=\"ef-module-rail\" aria-label=\"Modules\">\n <div class=\"ef-module-rail__logo-slot\">\n <ng-content select=\"[logo]\"></ng-content>\n </div>\n\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'divider') {\n <span class=\"ef-module-rail__divider\" aria-hidden=\"true\"></span>\n } @else {\n <button\n type=\"button\"\n class=\"ef-module-rail__btn\"\n [class.is-active]=\"activeId() === row.module.id\"\n [attr.data-module]=\"row.module.id\"\n [attr.aria-current]=\"activeId() === row.module.id ? 'page' : null\"\n [style.--m-color]=\"'var(--' + row.module.accent + ')'\"\n [pTooltip]=\"row.module.labelKey | translate\"\n tooltipPosition=\"right\"\n (click)=\"onSelect(row.module)\"\n >\n <i class=\"ef-module-rail__icon\" [class]=\"row.module.icon\" aria-hidden=\"true\"></i>\n\n @if (badgeFor(row.module.id); as badge) {\n <span class=\"ef-module-rail__badge\">{{ badge }}</span>\n }\n\n <span class=\"ef-module-rail__sr\">{{ row.module.labelKey | translate }}</span>\n </button>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:0 0 64px;width:64px;background:var(--rail-bg);color:var(--rail-fg)}.ef-module-rail{display:flex;flex-direction:column;align-items:center;height:100%;padding:12px 0;gap:4px}.ef-module-rail__logo-slot{display:flex;align-items:center;justify-content:center;min-height:40px;width:40px;margin-bottom:4px}.ef-module-rail__logo-slot:empty{display:none}.ef-module-rail__logo-slot:not(:empty)+.ef-module-rail__divider,.ef-module-rail__logo-slot:has(*)+.ef-module-rail__divider{display:block}.ef-module-rail__divider{height:1px;width:32px;background:var(--rail-rule);margin:4px 0;flex-shrink:0}.ef-module-rail__btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--rail-fg-mute);border-radius:var(--r-md);cursor:pointer;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}.ef-module-rail__btn:hover{color:#fff;background:var(--rail-hover)}.ef-module-rail__btn:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-300, #b87a99) 80%,transparent);outline-offset:2px}.ef-module-rail__btn.is-active{color:#fff;background:var(--rail-active)}.ef-module-rail__btn.is-active:before{content:\"\";position:absolute;inset-inline-end:-10px;top:8px;bottom:8px;width:3px;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--m-color, var(--tenant-300, #b87a99))}.ef-module-rail__icon{font-size:20px;line-height:1}.ef-module-rail__badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--tenant-500);color:#fff;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1}:host-context([dir=rtl]) .ef-module-rail__badge{right:auto;left:4px}.ef-module-rail__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7228
7245
|
}
|
|
7229
7246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfModuleRailComponent, decorators: [{
|
|
7230
7247
|
type: Component,
|
|
7231
|
-
args: [{ selector: 'ef-module-rail', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TooltipModule, TranslateModule], template: "<nav class=\"ef-module-rail\" aria-label=\"Modules\">\n <div class=\"ef-module-rail__logo-slot\">\n <ng-content select=\"[logo]\"></ng-content>\n </div>\n\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'divider') {\n <span class=\"ef-module-rail__divider\" aria-hidden=\"true\"></span>\n } @else {\n <button\n type=\"button\"\n class=\"ef-module-rail__btn\"\n [class.is-active]=\"activeId() === row.module.id\"\n [attr.data-module]=\"row.module.id\"\n [attr.aria-current]=\"activeId() === row.module.id ? 'page' : null\"\n [style.--m-color]=\"'var(--' + row.module.accent + ')'\"\n [pTooltip]=\"row.module.labelKey | translate\"\n tooltipPosition=\"right\"\n (click)=\"onSelect(row.module)\"\n >\n <i class=\"ef-module-rail__icon\" [class]=\"row.module.icon\" aria-hidden=\"true\"></i>\n\n @if (badgeFor(row.module.id); as badge) {\n <span class=\"ef-module-rail__badge\">{{ badge }}</span>\n }\n\n <span class=\"ef-module-rail__sr\">{{ row.module.labelKey | translate }}</span>\n </button>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:0 0 64px;width:64px;background:var(--
|
|
7248
|
+
args: [{ selector: 'ef-module-rail', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TooltipModule, TranslateModule], template: "<nav class=\"ef-module-rail\" aria-label=\"Modules\">\n <div class=\"ef-module-rail__logo-slot\">\n <ng-content select=\"[logo]\"></ng-content>\n </div>\n\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'divider') {\n <span class=\"ef-module-rail__divider\" aria-hidden=\"true\"></span>\n } @else {\n <button\n type=\"button\"\n class=\"ef-module-rail__btn\"\n [class.is-active]=\"activeId() === row.module.id\"\n [attr.data-module]=\"row.module.id\"\n [attr.aria-current]=\"activeId() === row.module.id ? 'page' : null\"\n [style.--m-color]=\"'var(--' + row.module.accent + ')'\"\n [pTooltip]=\"row.module.labelKey | translate\"\n tooltipPosition=\"right\"\n (click)=\"onSelect(row.module)\"\n >\n <i class=\"ef-module-rail__icon\" [class]=\"row.module.icon\" aria-hidden=\"true\"></i>\n\n @if (badgeFor(row.module.id); as badge) {\n <span class=\"ef-module-rail__badge\">{{ badge }}</span>\n }\n\n <span class=\"ef-module-rail__sr\">{{ row.module.labelKey | translate }}</span>\n </button>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:0 0 64px;width:64px;background:var(--rail-bg);color:var(--rail-fg)}.ef-module-rail{display:flex;flex-direction:column;align-items:center;height:100%;padding:12px 0;gap:4px}.ef-module-rail__logo-slot{display:flex;align-items:center;justify-content:center;min-height:40px;width:40px;margin-bottom:4px}.ef-module-rail__logo-slot:empty{display:none}.ef-module-rail__logo-slot:not(:empty)+.ef-module-rail__divider,.ef-module-rail__logo-slot:has(*)+.ef-module-rail__divider{display:block}.ef-module-rail__divider{height:1px;width:32px;background:var(--rail-rule);margin:4px 0;flex-shrink:0}.ef-module-rail__btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--rail-fg-mute);border-radius:var(--r-md);cursor:pointer;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}.ef-module-rail__btn:hover{color:#fff;background:var(--rail-hover)}.ef-module-rail__btn:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-300, #b87a99) 80%,transparent);outline-offset:2px}.ef-module-rail__btn.is-active{color:#fff;background:var(--rail-active)}.ef-module-rail__btn.is-active:before{content:\"\";position:absolute;inset-inline-end:-10px;top:8px;bottom:8px;width:3px;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--m-color, var(--tenant-300, #b87a99))}.ef-module-rail__icon{font-size:20px;line-height:1}.ef-module-rail__badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--tenant-500);color:#fff;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1}:host-context([dir=rtl]) .ef-module-rail__badge{right:auto;left:4px}.ef-module-rail__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
7232
7249
|
}], propDecorators: { badges: [{
|
|
7233
7250
|
type: Input
|
|
7234
7251
|
}] } });
|