@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
337 lines (330 loc) • 34 kB
JavaScript
import * as i7 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i0 from '@angular/core';
import { Injectable, Component, Input, HostListener, Inject, NgModule } from '@angular/core';
import * as i6$1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i8 from 'ngx-bootstrap/tooltip';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import * as i2 from '@c8y/ngx-components';
import { gettext, CoreModule, CommonModule, ListGroupModule, FormsModule as FormsModule$1, ModalModule, hookDrawer } from '@c8y/ngx-components';
import * as i6 from '@angular/common';
import { DOCUMENT } from '@angular/common';
import * as i5 from '@angular/router';
import * as i1 from '@ngx-translate/core';
import { uniqBy, cloneDeep } from 'lodash-es';
import * as i1$1 from 'ngx-bootstrap/modal';
import { firstValueFrom, map } from 'rxjs';
import * as i4 from '@c8y/ngx-components/icon-selector';
class BookmarkService {
constructor(translateService, userPreferencesService, options) {
this.translateService = translateService;
this.userPreferencesService = userPreferencesService;
this.options = options;
this.USER_PREFERENCES_BOOKMARKS_KEY = 'bookmarks';
}
async updateBookmarksInStorage(newBookmarks) {
const existingBookmarks = await this.getBookmarks();
const mergedBookmarks = [...newBookmarks, ...existingBookmarks];
const cleanedBookmarks = uniqBy(mergedBookmarks, 'id').filter((bookmark) => !bookmark.markToRemove);
this.setUserPreferencesBookmarks(cleanedBookmarks);
}
getCurrentActiveNodeIcon(document) {
const BOOKMARK = 'bookmark';
const iconElement = this.getIconElement(document);
if (!iconElement) {
return BOOKMARK;
}
const iconClassName = iconElement.className;
const iconName = this.extractIconName(iconClassName);
return iconName || BOOKMARK;
}
extractIconName(input) {
const iconRegex = /\b(dlt-)?c8y-icon-(\w+(?:-\w+)*)\b/g;
const matches = [...input.matchAll(iconRegex)];
const match = matches?.pop();
if (!match) {
return null;
}
const [, prefix, name] = match;
return prefix ? name : `c8y-${name}`;
}
async getBookmarks() {
return await firstValueFrom(this.userPreferencesService
.get(this.USER_PREFERENCES_BOOKMARKS_KEY)
.pipe(map((bookmarks) => bookmarks ?? [])));
}
generateRandomID() {
const array = new Uint8Array(16);
crypto.getRandomValues(array);
return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
}
convertBookmarkLinkToObject(title, url, icon) {
const globalTitle = this.options.globalTitle ?? 'Cumulocity';
return {
id: this.generateRandomID(),
label: title.includes(globalTitle)
? title.replace(`${globalTitle} - `, '')
: this.translateService.instant(gettext('Bookmark')),
url,
icon
};
}
getIconElement(document) {
const currentActiveNode = document.querySelectorAll('.link.active');
if (!currentActiveNode.length) {
return null;
}
const activeNode = currentActiveNode.item(0);
return activeNode.firstElementChild.firstChild;
}
setUserPreferencesBookmarks(bookmarks) {
this.userPreferencesService.set(this.USER_PREFERENCES_BOOKMARKS_KEY, bookmarks);
this.updatedBookmarks = bookmarks;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarkService, deps: [{ token: i1.TranslateService }, { token: i2.UserPreferencesService }, { token: i2.OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarkService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarkService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.UserPreferencesService }, { type: i2.OptionsService }] });
class EditBookmarksComponent {
constructor(bsModalRef, alertService, bookmarkService, iconSelector) {
this.bsModalRef = bsModalRef;
this.alertService = alertService;
this.bookmarkService = bookmarkService;
this.iconSelector = iconSelector;
this.confirmRemoveColumnButtons = [
{
label: gettext('Cancel'),
action: () => Promise.resolve(false)
},
{
label: gettext('Delete'),
status: 'danger',
action: () => Promise.resolve(true)
}
];
this.result = new Promise(resolve => {
this._close = resolve;
});
}
ngOnInit() {
this.bookmarksToUpdate = cloneDeep(this.bookmarks);
}
handleKeyboardEvent(event) {
if (event.key === 'Escape') {
this.close();
}
}
close() {
if (this.bookmarkService.updatedBookmarks) {
this._close(this.bookmarkService.updatedBookmarks);
}
this.bsModalRef.hide();
}
async drop(event) {
try {
moveItemInArray(this.bookmarks, event.previousIndex, event.currentIndex);
moveItemInArray(this.bookmarksToUpdate, event.previousIndex, event.currentIndex);
await this.bookmarkService.updateBookmarksInStorage(this.bookmarksToUpdate);
this.alertService.success(gettext('Bookmarks order updated.'));
}
catch {
this.alertService.success(gettext('Bookmarks order failed to update.'));
}
}
async updateBookmark(updatedBookmark, type) {
try {
this.bookmarksToUpdate = this.updateBookmarkProperty(updatedBookmark, type);
await this.bookmarkService.updateBookmarksInStorage(this.bookmarksToUpdate);
if (type !== 'markToRemove') {
this.alertService.success(gettext('Bookmark updated.'));
}
}
catch {
if (type !== 'markToRemove') {
this.alertService.warning(gettext('Bookmark update failed'));
}
}
}
updateBookmarkProperty(updatedBookmark, type) {
const update = {
icon: (bookmark) => ({ ...bookmark, icon: updatedBookmark.icon }),
label: (bookmark) => ({ ...bookmark, label: updatedBookmark.label }),
markToRemove: (bookmark) => ({ ...bookmark, markToRemove: true })
}[type];
return this.bookmarksToUpdate.map(bookmark => bookmark.id === updatedBookmark.id ? update(bookmark) : bookmark);
}
async changeBookmarkIcon(updatedBookmark) {
try {
const newIcon = await this.iconSelector.selectIcon();
updatedBookmark.icon = newIcon;
await this.updateBookmark(updatedBookmark, 'icon');
}
catch {
// nothing to do
}
}
async removeBookmark(poConfirm, bookmarkToDelete) {
poConfirm.message = gettext('This action is irreversible.');
try {
const remove = await poConfirm.show(this.confirmRemoveColumnButtons);
if (!remove) {
return;
}
await this.updateBookmark(bookmarkToDelete, 'markToRemove');
const bookmarkIndex = this.bookmarks.findIndex(bookmark => bookmark.id === bookmarkToDelete.id);
if (bookmarkIndex === -1) {
return;
}
this.bookmarks.splice(bookmarkIndex, 1);
this.alertService.success(gettext('Bookmark removed.'));
}
catch (err) {
/**
* Prevents an alert message from being displayed if the user clicks outside of a popover.
*/
if (err) {
this.alertService.warning(gettext('Bookmarks deletion failed.'));
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditBookmarksComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.AlertService }, { token: BookmarkService }, { token: i4.IconSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditBookmarksComponent, selector: "c8y-edit-bookmarks", inputs: { bookmarks: "bookmarks" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"viewport-modal\">\n <div class=\"modal-header dialog-header\">\n <i [c8yIcon]=\"'bookmark'\"></i>\n <div\n class=\"h4\"\n id=\"modal-title\"\n translate\n >\n Bookmarks\n </div>\n </div>\n <div\n class=\"inner-scroll\"\n id=\"modal-body\"\n >\n <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n <p class=\"text-medium text-16\">\n {{ 'Reorder, edit or delete bookmarks.' | translate }}\n </p>\n </div>\n <c8y-list-group\n class=\"cdk-droplist no-border-last\"\n *ngIf=\"bookmarks.length; else emptyList\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"bookmarks?.length < 2\"\n >\n <c8y-li\n *ngFor=\"let bookmark of bookmarks\"\n cdkDrag\n >\n <c8y-li-drag-handle\n title=\"{{ 'Drag to reorder' | translate }}\"\n cdkDragHandle\n >\n <i c8yIcon=\"drag-reorder\"></i>\n </c8y-li-drag-handle>\n <c8y-li-icon\n class=\"icon-24 p-relative changeIcon a-s-stretch\"\n style=\"{{ bookmarks?.length < 2 ? 'padding-left: 16px!important' : '' }}\"\n *ngIf=\"bookmark.icon\"\n >\n <i [c8yIcon]=\"bookmark.icon\"></i>\n <button\n class=\"btn btn-default btn-xs\"\n [attr.aria-label]=\"'Change icon' | translate\"\n tooltip=\"{{ 'Change icon' | translate }}\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n [delay]=\"500\"\n [adaptivePosition]=\"false\"\n (click)=\"changeBookmarkIcon(bookmark)\"\n >\n <i c8yIcon=\"replace\"></i>\n </button>\n </c8y-li-icon>\n\n <div class=\"d-flex gap-8 a-i-center\">\n <form\n class=\"d-flex flex-grow\"\n name=\"bookmarksForm\"\n #bookmarksForm=\"ngForm\"\n >\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control fit-w\"\n title=\"{{ bookmark.label }}\"\n id=\"label\"\n name=\"label\"\n type=\"text\"\n [(ngModel)]=\"bookmark.label\"\n #label=\"ngModel\"\n maxlength=\"50\"\n [placeholder]=\"'e.g. My bookmark' | translate\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n (click)=\"updateBookmark(bookmark, 'label'); label.control.markAsPristine()\"\n [disabled]=\"label.invalid\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </form>\n <c8y-popover-confirm\n class=\"d-block\"\n [title]=\"'Delete bookmark' | translate\"\n [placement]=\"'left'\"\n [outsideClick]=\"true\"\n [adaptivePosition]=\"true\"\n [container]=\"''\"\n #poConfirm\n >\n <button\n class=\"btn btn-dot btn-dot--danger m-l-auto\"\n title=\"{{ 'Delete' | translate }}\"\n type=\"button\"\n (click)=\"removeBookmark(poConfirm, bookmark)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </c8y-popover-confirm>\n </div>\n </c8y-li>\n </c8y-list-group>\n </div>\n <div class=\"modal-footer\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n (click)=\"close()\"\n >\n {{ 'Close' | translate }}\n </button>\n </div>\n</div>\n<ng-template #emptyList>\n <c8y-ui-empty-state\n [icon]=\"'bookmark'\"\n [title]=\"'No bookmarks yet' | translate\"\n [subtitle]=\"\n 'Navigate to the desired page, open the right drawer and click the "Add current page" button.'\n | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i6$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditBookmarksComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-edit-bookmarks', template: "<div class=\"viewport-modal\">\n <div class=\"modal-header dialog-header\">\n <i [c8yIcon]=\"'bookmark'\"></i>\n <div\n class=\"h4\"\n id=\"modal-title\"\n translate\n >\n Bookmarks\n </div>\n </div>\n <div\n class=\"inner-scroll\"\n id=\"modal-body\"\n >\n <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n <p class=\"text-medium text-16\">\n {{ 'Reorder, edit or delete bookmarks.' | translate }}\n </p>\n </div>\n <c8y-list-group\n class=\"cdk-droplist no-border-last\"\n *ngIf=\"bookmarks.length; else emptyList\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"bookmarks?.length < 2\"\n >\n <c8y-li\n *ngFor=\"let bookmark of bookmarks\"\n cdkDrag\n >\n <c8y-li-drag-handle\n title=\"{{ 'Drag to reorder' | translate }}\"\n cdkDragHandle\n >\n <i c8yIcon=\"drag-reorder\"></i>\n </c8y-li-drag-handle>\n <c8y-li-icon\n class=\"icon-24 p-relative changeIcon a-s-stretch\"\n style=\"{{ bookmarks?.length < 2 ? 'padding-left: 16px!important' : '' }}\"\n *ngIf=\"bookmark.icon\"\n >\n <i [c8yIcon]=\"bookmark.icon\"></i>\n <button\n class=\"btn btn-default btn-xs\"\n [attr.aria-label]=\"'Change icon' | translate\"\n tooltip=\"{{ 'Change icon' | translate }}\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n [delay]=\"500\"\n [adaptivePosition]=\"false\"\n (click)=\"changeBookmarkIcon(bookmark)\"\n >\n <i c8yIcon=\"replace\"></i>\n </button>\n </c8y-li-icon>\n\n <div class=\"d-flex gap-8 a-i-center\">\n <form\n class=\"d-flex flex-grow\"\n name=\"bookmarksForm\"\n #bookmarksForm=\"ngForm\"\n >\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control fit-w\"\n title=\"{{ bookmark.label }}\"\n id=\"label\"\n name=\"label\"\n type=\"text\"\n [(ngModel)]=\"bookmark.label\"\n #label=\"ngModel\"\n maxlength=\"50\"\n [placeholder]=\"'e.g. My bookmark' | translate\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n (click)=\"updateBookmark(bookmark, 'label'); label.control.markAsPristine()\"\n [disabled]=\"label.invalid\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </form>\n <c8y-popover-confirm\n class=\"d-block\"\n [title]=\"'Delete bookmark' | translate\"\n [placement]=\"'left'\"\n [outsideClick]=\"true\"\n [adaptivePosition]=\"true\"\n [container]=\"''\"\n #poConfirm\n >\n <button\n class=\"btn btn-dot btn-dot--danger m-l-auto\"\n title=\"{{ 'Delete' | translate }}\"\n type=\"button\"\n (click)=\"removeBookmark(poConfirm, bookmark)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </c8y-popover-confirm>\n </div>\n </c8y-li>\n </c8y-list-group>\n </div>\n <div class=\"modal-footer\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n (click)=\"close()\"\n >\n {{ 'Close' | translate }}\n </button>\n </div>\n</div>\n<ng-template #emptyList>\n <c8y-ui-empty-state\n [icon]=\"'bookmark'\"\n [title]=\"'No bookmarks yet' | translate\"\n [subtitle]=\"\n 'Navigate to the desired page, open the right drawer and click the "Add current page" button.'\n | translate\n \"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.AlertService }, { type: BookmarkService }, { type: i4.IconSelectorService }], propDecorators: { bookmarks: [{
type: Input
}], handleKeyboardEvent: [{
type: HostListener,
args: ['document:keydown', ['$event']]
}] } });
class BookmarksComponent {
constructor(document, translateService, bookmarksService, alertService, bookmarkService, bsModalService, router, headerService) {
this.document = document;
this.translateService = translateService;
this.bookmarksService = bookmarksService;
this.alertService = alertService;
this.bookmarkService = bookmarkService;
this.bsModalService = bsModalService;
this.router = router;
this.headerService = headerService;
this.emptyMessageHeader = this.translateService.instant(gettext('No bookmarks yet'));
this.emptyMessageBody = this.translateService.instant(gettext('Navigate to the desired page and click the "Add current page" button. Editing, deleting and reordering are possible by clicking on the cog wheel.'));
this.addButtonText = this.translateService.instant(gettext('Add current page'));
this.drawerOpen$ = this.headerService.rightDrawerOpen$;
}
async ngOnInit() {
this.bookmarks = await this.bookmarkService.getBookmarks();
}
async addBookmark() {
const currentHref = this.document.location.href;
if (this.bookmarks.some(bookmark => bookmark.url === currentHref)) {
this.alertService.warning(gettext('Bookmark with the same URL is already added.'));
return;
}
const linkObject = this.bookmarkService.convertBookmarkLinkToObject(this.document.title, currentHref, this.bookmarksService.getCurrentActiveNodeIcon(this.document));
this.bookmarks.push(linkObject);
await this.bookmarkService.updateBookmarksInStorage(this.bookmarks);
this.alertService.success(gettext('Bookmark added.'));
}
async editBookmarks() {
try {
const initialState = {
bookmarks: cloneDeep(this.bookmarks)
};
const modalRef = this.bsModalService.show(EditBookmarksComponent, {
class: 'modal-md',
ariaDescribedby: 'modal-body',
ariaLabelledBy: 'modal-title',
initialState: initialState,
ignoreBackdropClick: true
}).content;
this.bookmarks = await modalRef.result;
}
catch (err) {
return;
}
}
openUrl(url) {
const parsedUrl = new URL(url);
if (parsedUrl.hostname === location.hostname &&
parsedUrl.pathname.includes(location.pathname)) {
this.router.navigateByUrl(parsedUrl.hash.substring(1));
return;
}
// only possible if the external bookmark URL has been saved using the API
if (parsedUrl.hostname !== location.hostname) {
return;
}
window.open(url, '_self');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarksComponent, deps: [{ token: DOCUMENT }, { token: i1.TranslateService }, { token: BookmarkService }, { token: i2.AlertService }, { token: BookmarkService }, { token: i1$1.BsModalService }, { token: i5.Router }, { token: i2.HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookmarksComponent, selector: "c8y-bookmarks", ngImport: i0, template: "<div class=\"separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top\">\n <i c8yIcon=\"bookmark\"></i>\n <span class=\"text-bold\">{{ 'Bookmarks' | translate }}</span>\n <button\n class=\"btn-dot m-l-auto\"\n tooltip=\"{{ 'Edit bookmarks' | translate }}\"\n [attr.aria-label]=\"'Edit bookmarks' | translate\"\n container=\"body\"\n placement=\"left\"\n [adaptivePosition]=\"false\"\n [delay]=\"500\"\n (click)=\"editBookmarks()\"\n type=\"button\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i c8yIcon=\"cog\" class=\"text-14 m-0\"></i>\n </button>\n</div>\n<div class=\"c8y-right-drawer__item p-t-0 p-b-8\" *ngIf=\"bookmarks?.length\">\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"addBookmark()\"\n type=\"button\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i c8yIcon=\"plus-circle-o\" class=\"m-t-0 m-b-0 text-14\"></i>\n <span>{{ addButtonText }}</span>\n </button>\n</div>\n<ng-container *ngFor=\"let bookmark of bookmarks\">\n <button\n title=\"{{ bookmark.label }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n (click)=\"openUrl(bookmark.url)\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i [c8yIcon]=\"bookmark.icon\" *ngIf=\"bookmark.icon\"></i>\n <span class=\"text-truncate\">{{ bookmark.label }}</span>\n </button>\n</ng-container>\n<div class=\"p-t-8 p-b-8\">\n <ng-container *ngIf=\"!bookmarks?.length\">\n <span class=\"c8y-right-drawer__item text-muted text-bold text-14 p-b-0\">\n {{ emptyMessageHeader }}\n </span>\n <span class=\"c8y-right-drawer__item text-12 p-t-0\">\n <span class=\"text-muted\">{{ emptyMessageBody }}</span>\n </span>\n <div class=\"c8y-right-drawer__item\">\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"addBookmark()\"\n type=\"button\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i c8yIcon=\"plus-circle-o\" class=\"m-t-0 m-b-0 text-14\"></i>\n <span>{{ addButtonText }}</span>\n </button>\n </div>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarksComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-bookmarks', template: "<div class=\"separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top\">\n <i c8yIcon=\"bookmark\"></i>\n <span class=\"text-bold\">{{ 'Bookmarks' | translate }}</span>\n <button\n class=\"btn-dot m-l-auto\"\n tooltip=\"{{ 'Edit bookmarks' | translate }}\"\n [attr.aria-label]=\"'Edit bookmarks' | translate\"\n container=\"body\"\n placement=\"left\"\n [adaptivePosition]=\"false\"\n [delay]=\"500\"\n (click)=\"editBookmarks()\"\n type=\"button\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i c8yIcon=\"cog\" class=\"text-14 m-0\"></i>\n </button>\n</div>\n<div class=\"c8y-right-drawer__item p-t-0 p-b-8\" *ngIf=\"bookmarks?.length\">\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"addBookmark()\"\n type=\"button\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i c8yIcon=\"plus-circle-o\" class=\"m-t-0 m-b-0 text-14\"></i>\n <span>{{ addButtonText }}</span>\n </button>\n</div>\n<ng-container *ngFor=\"let bookmark of bookmarks\">\n <button\n title=\"{{ bookmark.label }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n (click)=\"openUrl(bookmark.url)\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i [c8yIcon]=\"bookmark.icon\" *ngIf=\"bookmark.icon\"></i>\n <span class=\"text-truncate\">{{ bookmark.label }}</span>\n </button>\n</ng-container>\n<div class=\"p-t-8 p-b-8\">\n <ng-container *ngIf=\"!bookmarks?.length\">\n <span class=\"c8y-right-drawer__item text-muted text-bold text-14 p-b-0\">\n {{ emptyMessageHeader }}\n </span>\n <span class=\"c8y-right-drawer__item text-12 p-t-0\">\n <span class=\"text-muted\">{{ emptyMessageBody }}</span>\n </span>\n <div class=\"c8y-right-drawer__item\">\n <button\n class=\"btn btn-default btn-sm\"\n (click)=\"addBookmark()\"\n type=\"button\"\n [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n >\n <i c8yIcon=\"plus-circle-o\" class=\"m-t-0 m-b-0 text-14\"></i>\n <span>{{ addButtonText }}</span>\n </button>\n </div>\n </ng-container>\n</div>\n" }]
}], ctorParameters: () => [{ type: DOCUMENT, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i1.TranslateService }, { type: BookmarkService }, { type: i2.AlertService }, { type: BookmarkService }, { type: i1$1.BsModalService }, { type: i5.Router }, { type: i2.HeaderService }] });
class BookmarksModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BookmarksModule, declarations: [BookmarksComponent, EditBookmarksComponent], imports: [CoreModule,
CommonModule,
ListGroupModule,
DragDropModule,
FormsModule,
FormsModule$1,
ModalModule, i8.TooltipModule], exports: [BookmarksComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarksModule, providers: [
hookDrawer({
component: BookmarksComponent,
position: 'right',
priority: 50,
id: 'bookmarks'
})
], imports: [CoreModule,
CommonModule,
ListGroupModule,
DragDropModule,
FormsModule,
FormsModule$1,
ModalModule,
TooltipModule.forRoot()] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookmarksModule, decorators: [{
type: NgModule,
args: [{
declarations: [BookmarksComponent, EditBookmarksComponent],
imports: [
CoreModule,
CommonModule,
ListGroupModule,
DragDropModule,
FormsModule,
FormsModule$1,
ModalModule,
TooltipModule.forRoot()
],
exports: [BookmarksComponent],
providers: [
hookDrawer({
component: BookmarksComponent,
position: 'right',
priority: 50,
id: 'bookmarks'
})
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BookmarksComponent, BookmarksModule, EditBookmarksComponent };
//# sourceMappingURL=c8y-ngx-components-bookmarks.mjs.map