@ascentgl/ads-ui 21.134.0 → 21.135.0
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.
|
@@ -11639,11 +11639,11 @@ class AdsHistoryStepperComponent {
|
|
|
11639
11639
|
}
|
|
11640
11640
|
}
|
|
11641
11641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsHistoryStepperComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsHistoryStepperComponent, isStandalone: false, selector: "ads-history-stepper", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cdk-virtual-scroll-viewport [itemSize]=\"ITEM_HEIGHT\" class=\"stepper-viewport\">\n <div *cdkVirtualFor=\"let item of listItems(); trackBy: trackItem\" class=\"list-item\">\n @if (item.dateHeader) {\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"item.dateHeader\">\n <span class=\"date-label\">{{ item.dateHeader }}</span>\n </div>\n }\n\n <div class=\"history-event\">\n <div class=\"event-indicator-column\" aria-hidden=\"true\">\n <div class=\"event-indicator\">\n <div class=\"indicator-bubble\">\n <ads-icon [name]=\"resolveIconName(item.event.action)\" theme=\"light\" stroke=\"light\" size=\"xxxs\" />\n </div>\n </div>\n @if (!item.isLast) {\n <div class=\"event-connector\"></div>\n }\n </div>\n\n <div class=\"event-content\">\n <div class=\"event-header\">\n <span class=\"event-action\">{{ item.event.actionLabel ?? item.event.action }}</span>\n @if (item.event.contextTag) {\n <ads-tag\n [id]=\"'history-tag-' + item.event.contextTag.label\"\n [tag]=\"item.event.contextTag.label\"\n [color]=\"resolveTagColor(item.event.contextTag.color)\"\n [textColor]=\"'white'\"\n [removable]=\"false\"\n />\n }\n @if (item.event.fieldName) {\n <span class=\"event-field-name\">{{ item.event.fieldName }}</span>\n }\n </div>\n\n @if (item.event.oldValue || item.event.newValue) {\n <div class=\"event-value\">\n @if (item.event.oldValue) {\n <span class=\"old-value\">{{ item.event.oldValue }}</span>\n @if (item.event.action !== HistoryAction.Removed) {\n <span class=\"value-arrow\" aria-hidden=\"true\">\u2192</span>\n }\n }\n @if (item.event.newValue) {\n <span class=\"new-value\">{{ item.event.newValue }}</span>\n }\n </div>\n }\n\n <div class=\"event-meta\">\n <span class=\"meta-time\">{{ item.event.time }}</span>\n @if (item.event.user) {\n <div class=\"meta-separator\" aria-hidden=\"true\"></div>\n <span class=\"meta-user\">{{ item.event.user }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;height:100%}.stepper-viewport{height:100%;width:100%}.list-item{display:flex;flex-direction:column;width:100%}.date-separator{display:flex;align-items:center;gap:16px;padding:8px 0;color:var(--color-medium);font-size:14px;line-height:18px}.date-separator:before,.date-separator:after{content:\"\";flex:1;height:1px;background-color:var(--color-muted)}.history-event{display:flex;gap:8px;align-items:stretch;min-width:0}.event-indicator-column{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:22px}.event-indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px}.indicator-bubble{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:3px solid var(--color-light);background-color:transparent;box-sizing:border-box;flex-shrink:0}.indicator-bubble ::ng-deep ads-icon{width:10px!important;height:10px!important}.indicator-bubble ::ng-deep ads-icon svg{width:10px!important;height:10px!important}.event-connector{flex:1;width:4px;background-color:var(--color-light);min-height:86px;margin:4px 0;border-radius:80px}.event-content{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding-bottom:16px}.event-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.event-action{color:var(--color-dark);font-size:16px;font-weight:600;line-height:21px}.event-field-name{color:var(--color-dark);font-size:16px;font-weight:400;line-height:21px}.event-value{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:16px;line-height:21px}.old-value{color:var(--color-medium);text-decoration:line-through}.value-arrow{color:var(--color-medium)}.new-value{color:var(--color-dark)}.event-meta{display:flex;align-items:center;gap:6px;color:var(--color-medium);font-size:14px;line-height:18px}.meta-separator{width:3px;height:3px;border-radius:50%;background-color:var(--color-medium);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }] }); }
|
|
11642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsHistoryStepperComponent, isStandalone: false, selector: "ads-history-stepper", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cdk-virtual-scroll-viewport [itemSize]=\"ITEM_HEIGHT\" class=\"stepper-viewport\">\n <div *cdkVirtualFor=\"let item of listItems(); trackBy: trackItem\" class=\"list-item\">\n @if (item.dateHeader) {\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"item.dateHeader\">\n <span class=\"date-label\">{{ item.dateHeader }}</span>\n </div>\n }\n\n <div class=\"history-event\">\n <div class=\"event-indicator-column\" aria-hidden=\"true\">\n <div class=\"event-indicator\">\n <div class=\"indicator-bubble\">\n <ads-icon [name]=\"resolveIconName(item.event.action)\" theme=\"light\" stroke=\"light\" size=\"xxxs\" />\n </div>\n </div>\n @if (!item.isLast) {\n <div class=\"event-connector\"></div>\n }\n </div>\n\n <div class=\"event-content\">\n <div class=\"event-header\">\n <span class=\"event-action\">{{ item.event.actionLabel ?? item.event.action }}</span>\n @if (item.event.contextTag) {\n <ads-tag\n [id]=\"'history-tag-' + item.event.contextTag.label\"\n [tag]=\"item.event.contextTag.label\"\n [color]=\"resolveTagColor(item.event.contextTag.color)\"\n [textColor]=\"'white'\"\n [removable]=\"false\"\n />\n }\n @if (item.event.fieldName) {\n <span class=\"event-field-name\">{{ item.event.fieldName }}</span>\n }\n </div>\n\n @if (item.event.oldValue || item.event.newValue) {\n <div class=\"event-value\">\n @if (item.event.oldValue) {\n <span class=\"old-value\">{{ item.event.oldValue }}</span>\n @if (item.event.action !== HistoryAction.Removed) {\n <span class=\"value-arrow\" aria-hidden=\"true\">\u2192</span>\n }\n }\n @if (item.event.newValue) {\n <span class=\"new-value\">{{ item.event.newValue }}</span>\n }\n </div>\n }\n\n <div class=\"event-meta\">\n <span class=\"meta-time\">{{ item.event.time }}</span>\n @if (item.event.user) {\n <div class=\"meta-separator\" aria-hidden=\"true\"></div>\n <span class=\"meta-user\">{{ item.event.user }}</span>\n }\n @if (item.event.role) {\n <div class=\"meta-separator\" aria-hidden=\"true\"></div>\n <span class=\"meta-user\">{{ item.event.role }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;height:100%}.stepper-viewport{height:100%;width:100%}.list-item{display:flex;flex-direction:column;width:100%}.date-separator{display:flex;align-items:center;gap:16px;padding:8px 0;color:var(--color-medium);font-size:14px;line-height:18px}.date-separator:before,.date-separator:after{content:\"\";flex:1;height:1px;background-color:var(--color-muted)}.history-event{display:flex;gap:8px;align-items:stretch;min-width:0}.event-indicator-column{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:22px}.event-indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px}.indicator-bubble{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:3px solid var(--color-light);background-color:transparent;box-sizing:border-box;flex-shrink:0}.indicator-bubble ::ng-deep ads-icon{width:10px!important;height:10px!important}.indicator-bubble ::ng-deep ads-icon svg{width:10px!important;height:10px!important}.event-connector{flex:1;width:4px;background-color:var(--color-light);min-height:86px;margin:4px 0;border-radius:80px}.event-content{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding-bottom:16px}.event-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.event-action{color:var(--color-dark);font-size:16px;font-weight:600;line-height:21px}.event-field-name{color:var(--color-dark);font-size:16px;font-weight:400;line-height:21px}.event-value{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:16px;line-height:21px}.old-value{color:var(--color-medium);text-decoration:line-through}.value-arrow{color:var(--color-medium)}.new-value{color:var(--color-dark)}.event-meta{display:flex;align-items:center;gap:6px;color:var(--color-medium);font-size:14px;line-height:18px}.meta-separator{width:3px;height:3px;border-radius:50%;background-color:var(--color-medium);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }] }); }
|
|
11643
11643
|
}
|
|
11644
11644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsHistoryStepperComponent, decorators: [{
|
|
11645
11645
|
type: Component,
|
|
11646
|
-
args: [{ selector: 'ads-history-stepper', standalone: false, template: "<cdk-virtual-scroll-viewport [itemSize]=\"ITEM_HEIGHT\" class=\"stepper-viewport\">\n <div *cdkVirtualFor=\"let item of listItems(); trackBy: trackItem\" class=\"list-item\">\n @if (item.dateHeader) {\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"item.dateHeader\">\n <span class=\"date-label\">{{ item.dateHeader }}</span>\n </div>\n }\n\n <div class=\"history-event\">\n <div class=\"event-indicator-column\" aria-hidden=\"true\">\n <div class=\"event-indicator\">\n <div class=\"indicator-bubble\">\n <ads-icon [name]=\"resolveIconName(item.event.action)\" theme=\"light\" stroke=\"light\" size=\"xxxs\" />\n </div>\n </div>\n @if (!item.isLast) {\n <div class=\"event-connector\"></div>\n }\n </div>\n\n <div class=\"event-content\">\n <div class=\"event-header\">\n <span class=\"event-action\">{{ item.event.actionLabel ?? item.event.action }}</span>\n @if (item.event.contextTag) {\n <ads-tag\n [id]=\"'history-tag-' + item.event.contextTag.label\"\n [tag]=\"item.event.contextTag.label\"\n [color]=\"resolveTagColor(item.event.contextTag.color)\"\n [textColor]=\"'white'\"\n [removable]=\"false\"\n />\n }\n @if (item.event.fieldName) {\n <span class=\"event-field-name\">{{ item.event.fieldName }}</span>\n }\n </div>\n\n @if (item.event.oldValue || item.event.newValue) {\n <div class=\"event-value\">\n @if (item.event.oldValue) {\n <span class=\"old-value\">{{ item.event.oldValue }}</span>\n @if (item.event.action !== HistoryAction.Removed) {\n <span class=\"value-arrow\" aria-hidden=\"true\">\u2192</span>\n }\n }\n @if (item.event.newValue) {\n <span class=\"new-value\">{{ item.event.newValue }}</span>\n }\n </div>\n }\n\n <div class=\"event-meta\">\n <span class=\"meta-time\">{{ item.event.time }}</span>\n @if (item.event.user) {\n <div class=\"meta-separator\" aria-hidden=\"true\"></div>\n <span class=\"meta-user\">{{ item.event.user }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;height:100%}.stepper-viewport{height:100%;width:100%}.list-item{display:flex;flex-direction:column;width:100%}.date-separator{display:flex;align-items:center;gap:16px;padding:8px 0;color:var(--color-medium);font-size:14px;line-height:18px}.date-separator:before,.date-separator:after{content:\"\";flex:1;height:1px;background-color:var(--color-muted)}.history-event{display:flex;gap:8px;align-items:stretch;min-width:0}.event-indicator-column{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:22px}.event-indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px}.indicator-bubble{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:3px solid var(--color-light);background-color:transparent;box-sizing:border-box;flex-shrink:0}.indicator-bubble ::ng-deep ads-icon{width:10px!important;height:10px!important}.indicator-bubble ::ng-deep ads-icon svg{width:10px!important;height:10px!important}.event-connector{flex:1;width:4px;background-color:var(--color-light);min-height:86px;margin:4px 0;border-radius:80px}.event-content{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding-bottom:16px}.event-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.event-action{color:var(--color-dark);font-size:16px;font-weight:600;line-height:21px}.event-field-name{color:var(--color-dark);font-size:16px;font-weight:400;line-height:21px}.event-value{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:16px;line-height:21px}.old-value{color:var(--color-medium);text-decoration:line-through}.value-arrow{color:var(--color-medium)}.new-value{color:var(--color-dark)}.event-meta{display:flex;align-items:center;gap:6px;color:var(--color-medium);font-size:14px;line-height:18px}.meta-separator{width:3px;height:3px;border-radius:50%;background-color:var(--color-medium);flex-shrink:0}\n"] }]
|
|
11646
|
+
args: [{ selector: 'ads-history-stepper', standalone: false, template: "<cdk-virtual-scroll-viewport [itemSize]=\"ITEM_HEIGHT\" class=\"stepper-viewport\">\n <div *cdkVirtualFor=\"let item of listItems(); trackBy: trackItem\" class=\"list-item\">\n @if (item.dateHeader) {\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"item.dateHeader\">\n <span class=\"date-label\">{{ item.dateHeader }}</span>\n </div>\n }\n\n <div class=\"history-event\">\n <div class=\"event-indicator-column\" aria-hidden=\"true\">\n <div class=\"event-indicator\">\n <div class=\"indicator-bubble\">\n <ads-icon [name]=\"resolveIconName(item.event.action)\" theme=\"light\" stroke=\"light\" size=\"xxxs\" />\n </div>\n </div>\n @if (!item.isLast) {\n <div class=\"event-connector\"></div>\n }\n </div>\n\n <div class=\"event-content\">\n <div class=\"event-header\">\n <span class=\"event-action\">{{ item.event.actionLabel ?? item.event.action }}</span>\n @if (item.event.contextTag) {\n <ads-tag\n [id]=\"'history-tag-' + item.event.contextTag.label\"\n [tag]=\"item.event.contextTag.label\"\n [color]=\"resolveTagColor(item.event.contextTag.color)\"\n [textColor]=\"'white'\"\n [removable]=\"false\"\n />\n }\n @if (item.event.fieldName) {\n <span class=\"event-field-name\">{{ item.event.fieldName }}</span>\n }\n </div>\n\n @if (item.event.oldValue || item.event.newValue) {\n <div class=\"event-value\">\n @if (item.event.oldValue) {\n <span class=\"old-value\">{{ item.event.oldValue }}</span>\n @if (item.event.action !== HistoryAction.Removed) {\n <span class=\"value-arrow\" aria-hidden=\"true\">\u2192</span>\n }\n }\n @if (item.event.newValue) {\n <span class=\"new-value\">{{ item.event.newValue }}</span>\n }\n </div>\n }\n\n <div class=\"event-meta\">\n <span class=\"meta-time\">{{ item.event.time }}</span>\n @if (item.event.user) {\n <div class=\"meta-separator\" aria-hidden=\"true\"></div>\n <span class=\"meta-user\">{{ item.event.user }}</span>\n }\n @if (item.event.role) {\n <div class=\"meta-separator\" aria-hidden=\"true\"></div>\n <span class=\"meta-user\">{{ item.event.role }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;height:100%}.stepper-viewport{height:100%;width:100%}.list-item{display:flex;flex-direction:column;width:100%}.date-separator{display:flex;align-items:center;gap:16px;padding:8px 0;color:var(--color-medium);font-size:14px;line-height:18px}.date-separator:before,.date-separator:after{content:\"\";flex:1;height:1px;background-color:var(--color-muted)}.history-event{display:flex;gap:8px;align-items:stretch;min-width:0}.event-indicator-column{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:22px}.event-indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px}.indicator-bubble{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:3px solid var(--color-light);background-color:transparent;box-sizing:border-box;flex-shrink:0}.indicator-bubble ::ng-deep ads-icon{width:10px!important;height:10px!important}.indicator-bubble ::ng-deep ads-icon svg{width:10px!important;height:10px!important}.event-connector{flex:1;width:4px;background-color:var(--color-light);min-height:86px;margin:4px 0;border-radius:80px}.event-content{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding-bottom:16px}.event-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.event-action{color:var(--color-dark);font-size:16px;font-weight:600;line-height:21px}.event-field-name{color:var(--color-dark);font-size:16px;font-weight:400;line-height:21px}.event-value{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:16px;line-height:21px}.old-value{color:var(--color-medium);text-decoration:line-through}.value-arrow{color:var(--color-medium)}.new-value{color:var(--color-dark)}.event-meta{display:flex;align-items:center;gap:6px;color:var(--color-medium);font-size:14px;line-height:18px}.meta-separator{width:3px;height:3px;border-radius:50%;background-color:var(--color-medium);flex-shrink:0}\n"] }]
|
|
11647
11647
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }] } });
|
|
11648
11648
|
|
|
11649
11649
|
class AdsHistoryStepperModule {
|