invensys-ng 22.1.2 → 22.1.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.
- package/fesm2022/invensys-ng.mjs +154 -15
- package/fesm2022/invensys-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/types/invensys-ng.d.ts +7 -1
package/fesm2022/invensys-ng.mjs
CHANGED
|
@@ -14,6 +14,7 @@ import { animate, state, style, transition, trigger } from "@angular/animations"
|
|
|
14
14
|
import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
|
|
15
15
|
import { Chart, registerables } from "chart.js";
|
|
16
16
|
import * as i1 from "@angular/platform-browser";
|
|
17
|
+
import { CdkDrag, CdkDragHandle, CdkDropList, moveItemInArray } from "@angular/cdk/drag-drop";
|
|
17
18
|
var __defProp = Object.defineProperty;
|
|
18
19
|
var __exportAll = (all, no_symbols) => {
|
|
19
20
|
let target = {};
|
|
@@ -6753,8 +6754,8 @@ var IStepper = class IStepper {
|
|
|
6753
6754
|
predicate: IStep
|
|
6754
6755
|
}],
|
|
6755
6756
|
ngImport: i0,
|
|
6756
|
-
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <li class=\"i-stepper__item\"\n [class.i-stepper__item--active]=\"activeIndex === index\"\n [class.i-stepper__item--completed]=\"step.completed\"\n [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n <button class=\"i-stepper__trigger\" type=\"button\"\n [attr.id]=\"componentId + '-step-' + index\"\n [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n [attr.aria-controls]=\"componentId + '-panel-' + index\"\n [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n [disabled]=\"!canSelect(index)\"\n (click)=\"selectStep($event, index)\"\n (keydown)=\"onKeyDown($event, index)\">\n <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n @else { {{ index + 1 }} }\n </span>\n <span class=\"i-stepper__copy\">\n <span class=\"i-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n }\n </span>\n @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n @if (step.completed) {\n <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n } @else if (!last) {\n <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n </li>\n }\n </ol>\n @for (step of steps; track step; let index = $index) {\n <section class=\"i-stepper__panel\"\n [class.i-stepper__panel--active]=\"activeIndex === index\"\n [attr.id]=\"componentId + '-panel-' + index\"\n [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n </section>\n }\n</div>\n",
|
|
6757
|
-
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;width:100%;min-width:0}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:
|
|
6757
|
+
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <div class=\"i-stepper__body\">\n <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <li class=\"i-stepper__item\"\n [class.i-stepper__item--active]=\"activeIndex === index\"\n [class.i-stepper__item--completed]=\"step.completed\"\n [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n <button class=\"i-stepper__trigger\" type=\"button\"\n [attr.id]=\"componentId + '-step-' + index\"\n [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n [attr.aria-controls]=\"componentId + '-panel-' + index\"\n [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n [disabled]=\"!canSelect(index)\"\n (click)=\"selectStep($event, index)\"\n (keydown)=\"onKeyDown($event, index)\">\n <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n @else { {{ index + 1 }} }\n </span>\n <span class=\"i-stepper__copy\">\n <span class=\"i-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n }\n </span>\n @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n @if (step.completed) {\n <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n } @else if (!last) {\n <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n </li>\n }\n </ol>\n @for (step of steps; track step; let index = $index) {\n <section class=\"i-stepper__panel\"\n [class.i-stepper__panel--active]=\"activeIndex === index\"\n [attr.id]=\"componentId + '-panel-' + index\"\n [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n </section>\n }\n </div>\n <div class=\"i-stepper__actions\"><ng-content select=\"[stepperActions]\" /></div>\n</div>\n",
|
|
6758
|
+
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;min-width:0;padding-top:24px}.i-stepper__panel--active{display:flow-root}.i-stepper__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.i-stepper__actions:empty{display:none}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}@container (max-width: 768px){.i-stepper--vertical .i-stepper__body{flex-direction:column}.i-stepper--vertical .i-stepper__navigation,.i-stepper--vertical .i-stepper__panel{flex-basis:auto;width:100%}}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}\n"],
|
|
6758
6759
|
dependencies: [{
|
|
6759
6760
|
kind: "directive",
|
|
6760
6761
|
type: NgClass,
|
|
@@ -6785,8 +6786,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6785
6786
|
standalone: true,
|
|
6786
6787
|
imports: [NgClass, NgTemplateOutlet],
|
|
6787
6788
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
6788
|
-
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <li class=\"i-stepper__item\"\n [class.i-stepper__item--active]=\"activeIndex === index\"\n [class.i-stepper__item--completed]=\"step.completed\"\n [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n <button class=\"i-stepper__trigger\" type=\"button\"\n [attr.id]=\"componentId + '-step-' + index\"\n [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n [attr.aria-controls]=\"componentId + '-panel-' + index\"\n [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n [disabled]=\"!canSelect(index)\"\n (click)=\"selectStep($event, index)\"\n (keydown)=\"onKeyDown($event, index)\">\n <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n @else { {{ index + 1 }} }\n </span>\n <span class=\"i-stepper__copy\">\n <span class=\"i-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n }\n </span>\n @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n @if (step.completed) {\n <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n } @else if (!last) {\n <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n </li>\n }\n </ol>\n @for (step of steps; track step; let index = $index) {\n <section class=\"i-stepper__panel\"\n [class.i-stepper__panel--active]=\"activeIndex === index\"\n [attr.id]=\"componentId + '-panel-' + index\"\n [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n </section>\n }\n</div>\n",
|
|
6789
|
-
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;width:100%;min-width:0}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:
|
|
6789
|
+
template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n <div class=\"i-stepper__body\">\n <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <li class=\"i-stepper__item\"\n [class.i-stepper__item--active]=\"activeIndex === index\"\n [class.i-stepper__item--completed]=\"step.completed\"\n [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n <button class=\"i-stepper__trigger\" type=\"button\"\n [attr.id]=\"componentId + '-step-' + index\"\n [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n [attr.aria-controls]=\"componentId + '-panel-' + index\"\n [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n [disabled]=\"!canSelect(index)\"\n (click)=\"selectStep($event, index)\"\n (keydown)=\"onKeyDown($event, index)\">\n <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n @else { {{ index + 1 }} }\n </span>\n <span class=\"i-stepper__copy\">\n <span class=\"i-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n }\n </span>\n @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n @if (step.completed) {\n <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n } @else if (!last) {\n <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n </li>\n }\n </ol>\n @for (step of steps; track step; let index = $index) {\n <section class=\"i-stepper__panel\"\n [class.i-stepper__panel--active]=\"activeIndex === index\"\n [attr.id]=\"componentId + '-panel-' + index\"\n [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n </section>\n }\n </div>\n <div class=\"i-stepper__actions\"><ng-content select=\"[stepperActions]\" /></div>\n</div>\n",
|
|
6790
|
+
styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;min-width:0;padding-top:24px}.i-stepper__panel--active{display:flow-root}.i-stepper__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.i-stepper__actions:empty{display:none}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}@container (max-width: 768px){.i-stepper--vertical .i-stepper__body{flex-direction:column}.i-stepper--vertical .i-stepper__navigation,.i-stepper--vertical .i-stepper__panel{flex-basis:auto;width:100%}}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}\n"]
|
|
6790
6791
|
}]
|
|
6791
6792
|
}],
|
|
6792
6793
|
propDecorators: {
|
|
@@ -9779,11 +9780,13 @@ var IOrderedList = class IOrderedList {
|
|
|
9779
9780
|
onRemove = new EventEmitter();
|
|
9780
9781
|
announcement = "";
|
|
9781
9782
|
move(index, direction) {
|
|
9782
|
-
|
|
9783
|
-
|
|
9783
|
+
this.reorder(index, index + direction);
|
|
9784
|
+
}
|
|
9785
|
+
reorder(index, target) {
|
|
9786
|
+
if (this.readonly || this.disabled || index === target || index < 0 || index >= this.items.length || target < 0 || target >= this.items.length) return;
|
|
9784
9787
|
const items = [...this.items];
|
|
9785
9788
|
const item = items[index];
|
|
9786
|
-
|
|
9789
|
+
moveItemInArray(items, index, target);
|
|
9787
9790
|
this.announcement = `${this.itemLabel(item)} moved to position ${target + 1}.`;
|
|
9788
9791
|
this.itemsChange.emit(items);
|
|
9789
9792
|
this.onMove.emit({
|
|
@@ -9833,8 +9836,8 @@ var IOrderedList = class IOrderedList {
|
|
|
9833
9836
|
onRemove: "onRemove"
|
|
9834
9837
|
},
|
|
9835
9838
|
ngImport: i0,
|
|
9836
|
-
template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\">\n @for (item of items; track itemKey(item); let index = $index) {\n <li class=\"i-ordered-list__item\">\n <
|
|
9837
|
-
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}
|
|
9839
|
+
template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\"\n cdkDropList [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n @for (item of items; track itemKey(item); let index = $index) {\n <li class=\"i-ordered-list__item\" cdkDrag cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\" [cdkDragDisabled]=\"readonly || disabled\">\n <button type=\"button\" class=\"i-ordered-list__drag-handle\" cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder ' + itemLabel(item) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"move(index, -1); $event.preventDefault()\"\n (keydown.arrowdown)=\"move(index, 1); $event.preventDefault()\">\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <div class=\"i-ordered-list__content\">\n <strong>{{ itemLabel(item) }}</strong>\n @if (itemTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n index: index,\n readonly: readonly || disabled,\n }\"\n />\n }\n </div>\n <div\n class=\"i-ordered-list__actions\"\n role=\"group\"\n [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n >\n <i-button\n icon=\"pi pi-arrow-up\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' up'\"\n title=\"Move up\"\n [disabled]=\"readonly || disabled || index === 0\"\n (clicked)=\"move(index, -1)\"\n />\n <i-button\n icon=\"pi pi-arrow-down\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' down'\"\n title=\"Move down\"\n [disabled]=\"readonly || disabled || index === items.length - 1\"\n (clicked)=\"move(index, 1)\"\n />\n @if (removable) {\n <i-button\n icon=\"pi pi-times\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove ' + itemLabel(item)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n }\n </div>\n </li>\n }\n</ol>\n@if (!items.length) {\n <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n announcement\n}}</span>\n",
|
|
9840
|
+
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__drag-handle{display:grid;flex:0 0 2rem;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-ordered-list__drag-handle:active{cursor:grabbing}.i-ordered-list__drag-handle:disabled{cursor:default;opacity:.4}.i-ordered-list__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-ordered-list__item.cdk-drag-preview{box-sizing:border-box;list-style:none;box-shadow:0 8px 24px #00000026}.i-ordered-list__item.cdk-drag-placeholder{opacity:.25}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:3rem}}\n"],
|
|
9838
9841
|
dependencies: [
|
|
9839
9842
|
{
|
|
9840
9843
|
kind: "directive",
|
|
@@ -9846,6 +9849,67 @@ var IOrderedList = class IOrderedList {
|
|
|
9846
9849
|
"ngTemplateOutletInjector"
|
|
9847
9850
|
]
|
|
9848
9851
|
},
|
|
9852
|
+
{
|
|
9853
|
+
kind: "directive",
|
|
9854
|
+
type: CdkDrag,
|
|
9855
|
+
selector: "[cdkDrag]",
|
|
9856
|
+
inputs: [
|
|
9857
|
+
"cdkDragData",
|
|
9858
|
+
"cdkDragLockAxis",
|
|
9859
|
+
"cdkDragRootElement",
|
|
9860
|
+
"cdkDragBoundary",
|
|
9861
|
+
"cdkDragStartDelay",
|
|
9862
|
+
"cdkDragFreeDragPosition",
|
|
9863
|
+
"cdkDragDisabled",
|
|
9864
|
+
"cdkDragConstrainPosition",
|
|
9865
|
+
"cdkDragPreviewClass",
|
|
9866
|
+
"cdkDragPreviewContainer",
|
|
9867
|
+
"cdkDragScale"
|
|
9868
|
+
],
|
|
9869
|
+
outputs: [
|
|
9870
|
+
"cdkDragStarted",
|
|
9871
|
+
"cdkDragReleased",
|
|
9872
|
+
"cdkDragEnded",
|
|
9873
|
+
"cdkDragEntered",
|
|
9874
|
+
"cdkDragExited",
|
|
9875
|
+
"cdkDragDropped",
|
|
9876
|
+
"cdkDragMoved"
|
|
9877
|
+
],
|
|
9878
|
+
exportAs: ["cdkDrag"]
|
|
9879
|
+
},
|
|
9880
|
+
{
|
|
9881
|
+
kind: "directive",
|
|
9882
|
+
type: CdkDragHandle,
|
|
9883
|
+
selector: "[cdkDragHandle]",
|
|
9884
|
+
inputs: ["cdkDragHandleDisabled"]
|
|
9885
|
+
},
|
|
9886
|
+
{
|
|
9887
|
+
kind: "directive",
|
|
9888
|
+
type: CdkDropList,
|
|
9889
|
+
selector: "[cdkDropList], cdk-drop-list",
|
|
9890
|
+
inputs: [
|
|
9891
|
+
"cdkDropListConnectedTo",
|
|
9892
|
+
"cdkDropListData",
|
|
9893
|
+
"cdkDropListOrientation",
|
|
9894
|
+
"id",
|
|
9895
|
+
"cdkDropListLockAxis",
|
|
9896
|
+
"cdkDropListDisabled",
|
|
9897
|
+
"cdkDropListSortingDisabled",
|
|
9898
|
+
"cdkDropListEnterPredicate",
|
|
9899
|
+
"cdkDropListSortPredicate",
|
|
9900
|
+
"cdkDropListAutoScrollDisabled",
|
|
9901
|
+
"cdkDropListAutoScrollStep",
|
|
9902
|
+
"cdkDropListElementContainer",
|
|
9903
|
+
"cdkDropListHasAnchor"
|
|
9904
|
+
],
|
|
9905
|
+
outputs: [
|
|
9906
|
+
"cdkDropListDropped",
|
|
9907
|
+
"cdkDropListEntered",
|
|
9908
|
+
"cdkDropListExited",
|
|
9909
|
+
"cdkDropListSorted"
|
|
9910
|
+
],
|
|
9911
|
+
exportAs: ["cdkDropList"]
|
|
9912
|
+
},
|
|
9849
9913
|
{
|
|
9850
9914
|
kind: "component",
|
|
9851
9915
|
type: IButton,
|
|
@@ -9888,12 +9952,15 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9888
9952
|
standalone: true,
|
|
9889
9953
|
imports: [
|
|
9890
9954
|
NgTemplateOutlet,
|
|
9955
|
+
CdkDrag,
|
|
9956
|
+
CdkDragHandle,
|
|
9957
|
+
CdkDropList,
|
|
9891
9958
|
IButton,
|
|
9892
9959
|
NoContentComponent
|
|
9893
9960
|
],
|
|
9894
9961
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
9895
|
-
template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\">\n @for (item of items; track itemKey(item); let index = $index) {\n <li class=\"i-ordered-list__item\">\n <
|
|
9896
|
-
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}
|
|
9962
|
+
template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\"\n cdkDropList [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n @for (item of items; track itemKey(item); let index = $index) {\n <li class=\"i-ordered-list__item\" cdkDrag cdkDragLockAxis=\"y\"\n cdkDragPreviewContainer=\"parent\" [cdkDragDisabled]=\"readonly || disabled\">\n <button type=\"button\" class=\"i-ordered-list__drag-handle\" cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder ' + itemLabel(item) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"move(index, -1); $event.preventDefault()\"\n (keydown.arrowdown)=\"move(index, 1); $event.preventDefault()\">\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <div class=\"i-ordered-list__content\">\n <strong>{{ itemLabel(item) }}</strong>\n @if (itemTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n index: index,\n readonly: readonly || disabled,\n }\"\n />\n }\n </div>\n <div\n class=\"i-ordered-list__actions\"\n role=\"group\"\n [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n >\n <i-button\n icon=\"pi pi-arrow-up\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' up'\"\n title=\"Move up\"\n [disabled]=\"readonly || disabled || index === 0\"\n (clicked)=\"move(index, -1)\"\n />\n <i-button\n icon=\"pi pi-arrow-down\"\n size=\"small\"\n [text]=\"true\"\n [ariaLabel]=\"'Move ' + itemLabel(item) + ' down'\"\n title=\"Move down\"\n [disabled]=\"readonly || disabled || index === items.length - 1\"\n (clicked)=\"move(index, 1)\"\n />\n @if (removable) {\n <i-button\n icon=\"pi pi-times\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove ' + itemLabel(item)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n }\n </div>\n </li>\n }\n</ol>\n@if (!items.length) {\n <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n announcement\n}}</span>\n",
|
|
9963
|
+
styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__drag-handle{display:grid;flex:0 0 2rem;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-ordered-list__drag-handle:active{cursor:grabbing}.i-ordered-list__drag-handle:disabled{cursor:default;opacity:.4}.i-ordered-list__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-ordered-list__item.cdk-drag-preview{box-sizing:border-box;list-style:none;box-shadow:0 8px 24px #00000026}.i-ordered-list__item.cdk-drag-placeholder{opacity:.25}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:3rem}}\n"]
|
|
9897
9964
|
}]
|
|
9898
9965
|
}],
|
|
9899
9966
|
propDecorators: {
|
|
@@ -9922,6 +9989,7 @@ var IRuleEditor = class IRuleEditor {
|
|
|
9922
9989
|
readonly = false;
|
|
9923
9990
|
disabled = false;
|
|
9924
9991
|
rulesChange = new EventEmitter();
|
|
9992
|
+
announcement = "";
|
|
9925
9993
|
booleanOptions = [{
|
|
9926
9994
|
key: "true",
|
|
9927
9995
|
label: "True"
|
|
@@ -9975,6 +10043,13 @@ var IRuleEditor = class IRuleEditor {
|
|
|
9975
10043
|
...changes
|
|
9976
10044
|
} : rule));
|
|
9977
10045
|
}
|
|
10046
|
+
reorder(index, target) {
|
|
10047
|
+
if (this.readonly || this.disabled || index === target || index < 0 || index >= this.rules.length || target < 0 || target >= this.rules.length) return;
|
|
10048
|
+
const rules = [...this.rules];
|
|
10049
|
+
moveItemInArray(rules, index, target);
|
|
10050
|
+
this.announcement = `${this.field(this.rules[index])?.label ?? "Rule"} moved to position ${target + 1}.`;
|
|
10051
|
+
this.rulesChange.emit(rules);
|
|
10052
|
+
}
|
|
9978
10053
|
remove(index) {
|
|
9979
10054
|
if (this.readonly || this.disabled || index < 0 || index >= this.rules.length) return;
|
|
9980
10055
|
this.rulesChange.emit(this.rules.filter((_, i) => i !== index));
|
|
@@ -10006,8 +10081,8 @@ var IRuleEditor = class IRuleEditor {
|
|
|
10006
10081
|
},
|
|
10007
10082
|
outputs: { rulesChange: "rulesChange" },
|
|
10008
10083
|
ngImport: i0,
|
|
10009
|
-
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button\n icon=\"pi pi-plus\"\n size=\"small\"\n [disabled]=\"!canAdd\"\n (clicked)=\"add()\"\n >{{ addLabel }}</i-button\n >\n </div>\n <div class=\"i-rule-editor__rules\">\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <
|
|
10010
|
-
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}
|
|
10084
|
+
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button\n icon=\"pi pi-plus\"\n size=\"small\"\n [disabled]=\"!canAdd\"\n (clicked)=\"add()\"\n >{{ addLabel }}</i-button\n >\n </div>\n <div class=\"i-rule-editor__rules\" cdkDropList\n [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n cdkDrag cdkDragLockAxis=\"y\" cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"readonly || disabled\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <button type=\"button\" class=\"i-rule-editor__drag-handle\" cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder rule ' + (index + 1) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"reorder(index, index - 1); $event.preventDefault()\"\n (keydown.arrowdown)=\"reorder(index, index + 1); $event.preventDefault()\">\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <i-select\n label=\"Field\"\n [options]=\"fields\"\n optionLabel=\"label\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"field(rule)\"\n (ngModelChange)=\"changeField(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <i-select\n [label]=\"operatorLabel\"\n [options]=\"operatorsFor(field(rule))\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"operator(rule)\"\n (ngModelChange)=\"changeOperator(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (operator(rule)?.requiresValue !== false) {\n @if (field(rule)?.type === \"boolean\") {\n <i-select\n label=\"Value\"\n [options]=\"booleanOptions\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"booleanValue(rule)\"\n (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n } @else {\n <i-input-text\n label=\"Value\"\n [type]=\"field(rule)?.type ?? 'text'\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"rule.value\"\n (ngModelChange)=\"\n update(index, { value: $event == null ? '' : '' + $event })\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n }\n }\n <i-button\n icon=\"pi pi-trash\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove rule ' + (index + 1)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n </div>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n <span class=\"i-rule-editor__announcement\" role=\"status\" aria-live=\"polite\">{{ announcement }}</span>\n</div>\n",
|
|
10085
|
+
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__drag-handle{display:grid;place-items:center;width:2rem;height:2rem;padding:0;margin-bottom:.125rem;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-rule-editor__drag-handle:active{cursor:grabbing}.i-rule-editor__drag-handle:disabled{cursor:default;opacity:.4}.i-rule-editor__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:5}.i-rule-editor__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-rule-editor__row.cdk-drag-preview{box-sizing:border-box;box-shadow:0 8px 24px #00000026}.i-rule-editor__row.cdk-drag-placeholder{opacity:.25}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"],
|
|
10011
10086
|
dependencies: [
|
|
10012
10087
|
{
|
|
10013
10088
|
kind: "ngmodule",
|
|
@@ -10031,6 +10106,67 @@ var IRuleEditor = class IRuleEditor {
|
|
|
10031
10106
|
outputs: ["ngModelChange"],
|
|
10032
10107
|
exportAs: ["ngModel"]
|
|
10033
10108
|
},
|
|
10109
|
+
{
|
|
10110
|
+
kind: "directive",
|
|
10111
|
+
type: CdkDrag,
|
|
10112
|
+
selector: "[cdkDrag]",
|
|
10113
|
+
inputs: [
|
|
10114
|
+
"cdkDragData",
|
|
10115
|
+
"cdkDragLockAxis",
|
|
10116
|
+
"cdkDragRootElement",
|
|
10117
|
+
"cdkDragBoundary",
|
|
10118
|
+
"cdkDragStartDelay",
|
|
10119
|
+
"cdkDragFreeDragPosition",
|
|
10120
|
+
"cdkDragDisabled",
|
|
10121
|
+
"cdkDragConstrainPosition",
|
|
10122
|
+
"cdkDragPreviewClass",
|
|
10123
|
+
"cdkDragPreviewContainer",
|
|
10124
|
+
"cdkDragScale"
|
|
10125
|
+
],
|
|
10126
|
+
outputs: [
|
|
10127
|
+
"cdkDragStarted",
|
|
10128
|
+
"cdkDragReleased",
|
|
10129
|
+
"cdkDragEnded",
|
|
10130
|
+
"cdkDragEntered",
|
|
10131
|
+
"cdkDragExited",
|
|
10132
|
+
"cdkDragDropped",
|
|
10133
|
+
"cdkDragMoved"
|
|
10134
|
+
],
|
|
10135
|
+
exportAs: ["cdkDrag"]
|
|
10136
|
+
},
|
|
10137
|
+
{
|
|
10138
|
+
kind: "directive",
|
|
10139
|
+
type: CdkDragHandle,
|
|
10140
|
+
selector: "[cdkDragHandle]",
|
|
10141
|
+
inputs: ["cdkDragHandleDisabled"]
|
|
10142
|
+
},
|
|
10143
|
+
{
|
|
10144
|
+
kind: "directive",
|
|
10145
|
+
type: CdkDropList,
|
|
10146
|
+
selector: "[cdkDropList], cdk-drop-list",
|
|
10147
|
+
inputs: [
|
|
10148
|
+
"cdkDropListConnectedTo",
|
|
10149
|
+
"cdkDropListData",
|
|
10150
|
+
"cdkDropListOrientation",
|
|
10151
|
+
"id",
|
|
10152
|
+
"cdkDropListLockAxis",
|
|
10153
|
+
"cdkDropListDisabled",
|
|
10154
|
+
"cdkDropListSortingDisabled",
|
|
10155
|
+
"cdkDropListEnterPredicate",
|
|
10156
|
+
"cdkDropListSortPredicate",
|
|
10157
|
+
"cdkDropListAutoScrollDisabled",
|
|
10158
|
+
"cdkDropListAutoScrollStep",
|
|
10159
|
+
"cdkDropListElementContainer",
|
|
10160
|
+
"cdkDropListHasAnchor"
|
|
10161
|
+
],
|
|
10162
|
+
outputs: [
|
|
10163
|
+
"cdkDropListDropped",
|
|
10164
|
+
"cdkDropListEntered",
|
|
10165
|
+
"cdkDropListExited",
|
|
10166
|
+
"cdkDropListSorted"
|
|
10167
|
+
],
|
|
10168
|
+
exportAs: ["cdkDropList"]
|
|
10169
|
+
},
|
|
10034
10170
|
{
|
|
10035
10171
|
kind: "component",
|
|
10036
10172
|
type: IButton,
|
|
@@ -10117,14 +10253,17 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10117
10253
|
standalone: true,
|
|
10118
10254
|
imports: [
|
|
10119
10255
|
FormsModule,
|
|
10256
|
+
CdkDrag,
|
|
10257
|
+
CdkDragHandle,
|
|
10258
|
+
CdkDropList,
|
|
10120
10259
|
IButton,
|
|
10121
10260
|
IInputText,
|
|
10122
10261
|
ISelect,
|
|
10123
10262
|
NoContentComponent
|
|
10124
10263
|
],
|
|
10125
10264
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
10126
|
-
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button\n icon=\"pi pi-plus\"\n size=\"small\"\n [disabled]=\"!canAdd\"\n (clicked)=\"add()\"\n >{{ addLabel }}</i-button\n >\n </div>\n <div class=\"i-rule-editor__rules\">\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <
|
|
10127
|
-
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}
|
|
10265
|
+
template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n <div class=\"i-rule-editor__toolbar\">\n <i-button\n icon=\"pi pi-plus\"\n size=\"small\"\n [disabled]=\"!canAdd\"\n (clicked)=\"add()\"\n >{{ addLabel }}</i-button\n >\n </div>\n <div class=\"i-rule-editor__rules\" cdkDropList\n [cdkDropListDisabled]=\"readonly || disabled\"\n (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n @for (rule of rules; track $index; let index = $index) {\n <div\n class=\"i-rule-editor__row\"\n cdkDrag cdkDragLockAxis=\"y\" cdkDragPreviewContainer=\"parent\"\n [cdkDragDisabled]=\"readonly || disabled\"\n role=\"group\"\n [attr.aria-label]=\"'Rule ' + (index + 1)\"\n >\n <button type=\"button\" class=\"i-rule-editor__drag-handle\" cdkDragHandle\n [disabled]=\"readonly || disabled\"\n [attr.aria-label]=\"'Reorder rule ' + (index + 1) + '. Use up and down arrow keys.'\"\n title=\"Drag to reorder\"\n (keydown.arrowup)=\"reorder(index, index - 1); $event.preventDefault()\"\n (keydown.arrowdown)=\"reorder(index, index + 1); $event.preventDefault()\">\n <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n </button>\n <i-select\n label=\"Field\"\n [options]=\"fields\"\n optionLabel=\"label\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"field(rule)\"\n (ngModelChange)=\"changeField(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <i-select\n [label]=\"operatorLabel\"\n [options]=\"operatorsFor(field(rule))\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"operator(rule)\"\n (ngModelChange)=\"changeOperator(index, $event)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (operator(rule)?.requiresValue !== false) {\n @if (field(rule)?.type === \"boolean\") {\n <i-select\n label=\"Value\"\n [options]=\"booleanOptions\"\n optionLabel=\"label\"\n [filter]=\"false\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"booleanValue(rule)\"\n (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n } @else {\n <i-input-text\n label=\"Value\"\n [type]=\"field(rule)?.type ?? 'text'\"\n [readonly]=\"readonly || disabled\"\n [fluid]=\"true\"\n [ngModel]=\"rule.value\"\n (ngModelChange)=\"\n update(index, { value: $event == null ? '' : '' + $event })\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n }\n }\n <i-button\n icon=\"pi pi-trash\"\n size=\"small\"\n severity=\"danger\"\n [text]=\"true\"\n [ariaLabel]=\"'Remove rule ' + (index + 1)\"\n title=\"Remove\"\n [disabled]=\"readonly || disabled\"\n (clicked)=\"remove(index)\"\n />\n </div>\n } @empty {\n <i-no-content [message]=\"emptyMessage\" />\n }\n </div>\n <span class=\"i-rule-editor__announcement\" role=\"status\" aria-live=\"polite\">{{ announcement }}</span>\n</div>\n",
|
|
10266
|
+
styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__drag-handle{display:grid;place-items:center;width:2rem;height:2rem;padding:0;margin-bottom:.125rem;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-rule-editor__drag-handle:active{cursor:grabbing}.i-rule-editor__drag-handle:disabled{cursor:default;opacity:.4}.i-rule-editor__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:5}.i-rule-editor__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-rule-editor__row.cdk-drag-preview{box-sizing:border-box;box-shadow:0 8px 24px #00000026}.i-rule-editor__row.cdk-drag-placeholder{opacity:.25}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"]
|
|
10128
10267
|
}]
|
|
10129
10268
|
}],
|
|
10130
10269
|
propDecorators: {
|