@knora/viewer
Version:
Knora ui module: viewer
2,160 lines • 125 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@knora/api'), require('@knora/core'), require('@angular/router'), require('@angular/material'), require('@angular/common'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/card'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/datepicker'), require('@angular/material/expansion'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/list'), require('@angular/material/paginator'), require('@angular/material/slide-toggle'), require('@angular/material/tabs'), require('@angular/material/toolbar'), require('@angular/material/tooltip'), require('@knora/action')) :
typeof define === 'function' && define.amd ? define('@knora/viewer', ['exports', '@angular/core', '@knora/api', '@knora/core', '@angular/router', '@angular/material', '@angular/common', '@angular/flex-layout', '@angular/forms', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/card', '@angular/material/checkbox', '@angular/material/core', '@angular/material/datepicker', '@angular/material/expansion', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/list', '@angular/material/paginator', '@angular/material/slide-toggle', '@angular/material/tabs', '@angular/material/toolbar', '@angular/material/tooltip', '@knora/action'], factory) :
(global = global || self, factory((global.knora = global.knora || {}, global.knora.viewer = {}), global.ng.core, global.api, global['@knora/core'], global.ng.router, global.ng.material, global.ng.common, global.ng['flex-layout'], global.ng.forms, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.card, global.ng.material.checkbox, global.ng.material.core, global.ng.material.datepicker, global.ng.material.expansion, global.ng.material['form-field'], global.ng.material.icon, global.ng.material.input, global.ng.material.list, global.ng.material.paginator, global.ng.material['slide-toggle'], global.ng.material.tabs, global.ng.material.toolbar, global.ng.material.tooltip, global['@knora/action']));
}(this, (function (exports, core, api, core$1, router, material, common, flexLayout, forms, autocomplete, button, card, checkbox, core$2, datepicker, expansion, formField, icon, input, list, paginator, slideToggle, tabs, toolbar, tooltip, action) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __exportStar(m, exports) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
var MovingImageComponent = /** @class */ (function () {
function MovingImageComponent() {
}
MovingImageComponent.prototype.ngOnInit = function () {
};
MovingImageComponent = __decorate([
core.Component({
selector: 'kui-moving-image',
template: "<!-- video container -->\n<div class=\"moving-image-viewer\">\n\n <!-- video source -->\n <video></video>\n\n <!-- timeline incl. preview -->\n <div class=\"kui-mi-timeline\">\n\n </div>\n <div class=\"kui-mi-navigation\">\n\n\n </div>\n\n</div>\n",
styles: [""]
}),
__metadata("design:paramtypes", [])
], MovingImageComponent);
return MovingImageComponent;
}());
/**
* Represents a region.
* Contains a reference to the resource representing the region and its geometries.
*/
var ImageRegion = /** @class */ (function () {
/**
*
* @param regionResource a resource of type Region
*/
function ImageRegion(regionResource) {
this.regionResource = regionResource;
}
/**
* Get all geometry information belonging to this region.
*
* @returns
*/
ImageRegion.prototype.getGeometries = function () {
return this.regionResource.properties[api.Constants.HasGeometry];
};
return ImageRegion;
}());
/**
* Represents an image including its regions.
*/
var StillImageRepresentation = /** @class */ (function () {
/**
*
* @param stillImageFileValue a [[ReadStillImageFileValue]] representing an image.
* @param regions the regions belonging to the image.
*/
function StillImageRepresentation(stillImageFileValue, regions) {
this.stillImageFileValue = stillImageFileValue;
this.regions = regions;
}
return StillImageRepresentation;
}());
/**
* Represents a geometry belonging to a specific region.
*/
var GeometryForRegion = /** @class */ (function () {
/**
*
* @param geometry the geometrical information.
* @param region the region the geometry belongs to.
*/
function GeometryForRegion(geometry, region) {
this.geometry = geometry;
this.region = region;
}
return GeometryForRegion;
}());
/**
* This component creates a OpenSeadragon viewer instance.
* Accepts an array of ReadResource containing (among other resources) ReadStillImageFileValues to be rendered.
* @member resources - resources containing (among other resources) the StillImageFileValues and incoming regions to be rendered. (Use as angular @Input data binding property.)
*/
var StillImageComponent = /** @class */ (function () {
function StillImageComponent(elementRef) {
this.elementRef = elementRef;
this.currentImageIndex = new core.EventEmitter();
this.regionHovered = new core.EventEmitter();
this.regions = {};
}
StillImageComponent_1 = StillImageComponent;
/**
* Calculates the surface of a rectangular region.
*
* @param geom the region's geometry.
* @returns the surface.
*/
StillImageComponent.surfaceOfRectangularRegion = function (geom) {
if (geom.type !== 'rectangle') {
console.log('expected rectangular region, but ' + geom.type + ' given');
return 0;
}
var w = Math.max(geom.points[0].x, geom.points[1].x) - Math.min(geom.points[0].x, geom.points[1].x);
var h = Math.max(geom.points[0].y, geom.points[1].y) - Math.min(geom.points[0].y, geom.points[1].y);
return w * h;
};
/**
* Prepare tile sources from the given sequence of [[ReadStillImageFileValue]].
*
* @param imagesToDisplay the given file values to de displayed.
* @returns the tile sources to be passed to OSD viewer.
*/
StillImageComponent.prepareTileSourcesFromFileValues = function (imagesToDisplay) {
var e_1, _a;
var imageXOffset = 0;
var imageYOffset = 0;
var tileSources = [];
try {
for (var imagesToDisplay_1 = __values(imagesToDisplay), imagesToDisplay_1_1 = imagesToDisplay_1.next(); !imagesToDisplay_1_1.done; imagesToDisplay_1_1 = imagesToDisplay_1.next()) {
var image = imagesToDisplay_1_1.value;
var sipiBasePath = image.iiifBaseUrl + '/' + image.filename;
var width = image.dimX;
var height = image.dimY;
// construct OpenSeadragon tileSources according to https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#open
tileSources.push({
// construct IIIF tileSource configuration according to
// http://iiif.io/api/image/2.1/#technical-properties
// see also http://iiif.io/api/image/2.0/#a-implementation-notes
'tileSource': {
'@context': 'http://iiif.io/api/image/2/context.json',
'@id': sipiBasePath,
'height': height,
'width': width,
'profile': ['http://iiif.io/api/image/2/level2.json'],
'protocol': 'http://iiif.io/api/image',
'tiles': [{
'scaleFactors': [1, 2, 4, 8, 16, 32],
'width': 1024
}]
},
'x': imageXOffset,
'y': imageYOffset
});
imageXOffset++;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (imagesToDisplay_1_1 && !imagesToDisplay_1_1.done && (_a = imagesToDisplay_1.return)) _a.call(imagesToDisplay_1);
}
finally { if (e_1) throw e_1.error; }
}
return tileSources;
};
StillImageComponent.prototype.ngOnChanges = function (changes) {
if (changes['images'] && changes['images'].isFirstChange()) {
this.setupViewer();
// this.currentImageIri.emit(this.images[this.viewer.currentPage()].stillImageFileValue.id);
}
if (changes['images']) {
this.openImages();
this.renderRegions();
this.unhighlightAllRegions();
if (this.activateRegion !== undefined) {
this.highlightRegion(this.activateRegion);
}
}
else if (changes['activateRegion']) {
this.unhighlightAllRegions();
if (this.activateRegion !== undefined) {
this.highlightRegion(this.activateRegion);
}
}
if (this.viewer) {
// console.log(this.viewer);
// this.currentImageIndex.emit(this.viewer.currentPage());
}
};
StillImageComponent.prototype.ngOnInit = function () {
// initialisation is done on first run of ngOnChanges
};
StillImageComponent.prototype.ngOnDestroy = function () {
if (this.viewer) {
this.viewer.destroy();
this.viewer = undefined;
}
};
/**
* Renders all ReadStillImageFileValues to be found in [[this.images]].
* (Although this.images is a Angular Input property, the built-in change detection of Angular does not detect changes in complex objects or arrays, only reassignment of objects/arrays.
* Use this method if additional ReadStillImageFileValues were added to this.images after creation/assignment of the this.images array.)
*/
StillImageComponent.prototype.updateImages = function () {
if (!this.viewer) {
this.setupViewer();
}
this.openImages();
};
/**
* Renders all regions to be found in [[this.images]].
* (Although this.images is a Angular Input property, the built-in change detection of Angular does not detect changes in complex objects or arrays, only reassignment of objects/arrays.
* Use this method if additional regions were added to the resources.images)
*/
StillImageComponent.prototype.updateRegions = function () {
if (!this.viewer) {
this.setupViewer();
}
this.renderRegions();
};
/**
* Highlights the polygon elements associated with the given region.
*
* @param regionIri the Iri of the region whose polygon elements should be highlighted..
*/
StillImageComponent.prototype.highlightRegion = function (regionIri) {
var e_2, _a;
var activeRegion = this.regions[regionIri];
if (activeRegion !== undefined) {
try {
for (var activeRegion_1 = __values(activeRegion), activeRegion_1_1 = activeRegion_1.next(); !activeRegion_1_1.done; activeRegion_1_1 = activeRegion_1.next()) {
var pol = activeRegion_1_1.value;
pol.setAttribute('class', 'roi-svgoverlay active');
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (activeRegion_1_1 && !activeRegion_1_1.done && (_a = activeRegion_1.return)) _a.call(activeRegion_1);
}
finally { if (e_2) throw e_2.error; }
}
}
};
/**
* Unhighlights the polygon elements of all regions.
*
*/
StillImageComponent.prototype.unhighlightAllRegions = function () {
var e_3, _a;
for (var reg in this.regions) {
if (this.regions.hasOwnProperty(reg)) {
try {
for (var _b = __values(this.regions[reg]), _c = _b.next(); !_c.done; _c = _b.next()) {
var pol = _c.value;
pol.setAttribute('class', 'roi-svgoverlay');
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
}
}
};
/**
* Initializes the OpenSeadragon viewer
*/
StillImageComponent.prototype.setupViewer = function () {
var viewerContainer = this.elementRef.nativeElement.getElementsByClassName('osd-container')[0];
var osdOptions = {
element: viewerContainer,
sequenceMode: true,
showReferenceStrip: true,
showNavigator: true,
zoomInButton: 'KUI_OSD_ZOOM_IN',
zoomOutButton: 'KUI_OSD_ZOOM_OUT',
previousButton: 'KUI_OSD_PREV_PAGE',
nextButton: 'KUI_OSD_NEXT_PAGE',
homeButton: 'KUI_OSD_HOME',
fullPageButton: 'KUI_OSD_FULL_PAGE',
rotateLeftButton: 'KUI_OSD_ROTATE_LEFT',
rotateRightButton: 'KUI_OSD_ROTATE_RIGHT' // doesn't work yet
};
this.viewer = new OpenSeadragon.Viewer(osdOptions);
this.viewer.addHandler('full-screen', function (args) {
if (args.fullScreen) {
viewerContainer.classList.add('fullscreen');
}
else {
viewerContainer.classList.remove('fullscreen');
}
});
this.viewer.addHandler('resize', function (args) {
args.eventSource.svgOverlay().resize();
});
var fileValues = this.images.map(function (img) {
return img;
});
this.viewer.addHandler('page', function (event) {
console.log('event on page', event);
console.log('Now on page', event.page);
var index = event.page;
console.log('= id', fileValues[index].id);
var id = fileValues[index].id;
// return id;
});
//
// this.currentImageIri.emit(this.viewer.getCurrentImage());
};
/**
* Adds all images in this.images to the viewer.
* Images are positioned in a horizontal row next to each other.
*/
StillImageComponent.prototype.openImages = function () {
// imageXOffset controls the x coordinate of the left side of each image in the OpenSeadragon viewport coordinate system.
// The first image has its left side at x = 0, and all images are scaled to have a width of 1 in viewport coordinates.
// see also: https://openseadragon.github.io/examples/viewport-coordinates/
var fileValues = this.images.map(function (img) {
return img;
});
// display only the defined range of this.images
var tileSources = StillImageComponent_1.prepareTileSourcesFromFileValues(fileValues);
this.removeOverlays();
this.viewer.open(tileSources);
};
/**
* Removes SVG overlays from the DOM.
*/
StillImageComponent.prototype.removeOverlays = function () {
var e_4, _a;
for (var reg in this.regions) {
if (this.regions.hasOwnProperty(reg)) {
try {
for (var _b = __values(this.regions[reg]), _c = _b.next(); !_c.done; _c = _b.next()) {
var pol = _c.value;
if (pol instanceof SVGPolygonElement) {
pol.remove();
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
}
}
this.regions = {};
// TODO: make this work by using osdviewer's addOverlay method
this.viewer.clearOverlays();
};
/**
* Adds a ROI-overlay to the viewer for every region of every image in this.images
*/
StillImageComponent.prototype.renderRegions = function () {
var e_5, _a;
this.removeOverlays();
var imageXOffset = 0; // see documentation in this.openImages() for the usage of imageXOffset
try {
for (var _b = __values(this.images), _c = _b.next(); !_c.done; _c = _b.next()) {
var image = _c.value;
var aspectRatio = (image.dimY / image.dimX);
// collect all geometries belonging to this page
var geometries = [];
/* TODO: knora-api-js-lib integration needs another region handling?
image.regions.map((reg) => {
this.regions[reg.regionResource.id] = [];
const geoms = reg.getGeometries();
geoms.map((geom) => {
const geomForReg = new GeometryForRegion(geom.geometry, reg.regionResource);
geometries.push(geomForReg);
});
});
// sort all geometries belonging to this page
geometries.sort((geom1, geom2) => {
if (geom1.geometry.type === 'rectangle' && geom2.geometry.type === 'rectangle') {
const surf1 = StillImageComponent.surfaceOfRectangularRegion(geom1.geometry);
const surf2 = StillImageComponent.surfaceOfRectangularRegion(geom2.geometry);
// if reg1 is smaller than reg2, return 1
// reg1 then comes after reg2 and thus is rendered later
if (surf1 < surf2) {
return 1;
} else {
return -1;
}
} else {
return 0;
}
});
// render all geometries for this page
for (const geom of geometries) {
const geometry = geom.geometry;
this.createSVGOverlay(geom.region.id, geometry, aspectRatio, imageXOffset, geom.region.label);
}
*/
imageXOffset++;
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_5) throw e_5.error; }
}
};
/**
* Creates and adds a ROI-overlay to the viewer
* @param regionIri the Iri of the region.
* @param geometry - the geometry describing the ROI
* @param aspectRatio - the aspectRatio (h/w) of the image on which the geometry should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the geometry should be placed
* @param toolTip - the tooltip which should be displayed on mousehover of the svg element
*/
StillImageComponent.prototype.createSVGOverlay = function (regionIri, geometry, aspectRatio, xOffset, toolTip) {
var _this = this;
var lineColor = geometry.lineColor;
var lineWidth = geometry.lineWidth;
var svgElement;
switch (geometry.type) {
case 'rectangle':
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); // yes, we render rectangles as svg polygon elements
this.addSVGAttributesRectangle(svgElement, geometry, aspectRatio, xOffset);
break;
case 'polygon':
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
this.addSVGAttributesPolygon(svgElement, geometry, aspectRatio, xOffset);
break;
case 'circle':
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.addSVGAttributesCircle(svgElement, geometry, aspectRatio, xOffset);
break;
default:
console.log('ERROR: StillImageOSDViewerComponent.createSVGOverlay: unknown geometryType: ' + geometry.type);
return;
}
svgElement.id = 'roi-svgoverlay-' + Math.random() * 10000;
svgElement.setAttribute('class', 'roi-svgoverlay');
svgElement.setAttribute('style', 'stroke: ' + lineColor + '; stroke-width: ' + lineWidth + 'px;');
// event when a region is clicked (output)
svgElement.addEventListener('click', function () {
_this.regionHovered.emit(regionIri);
}, false);
var svgTitle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
svgTitle.textContent = toolTip;
var svgGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
svgGroup.appendChild(svgTitle);
svgGroup.appendChild(svgElement);
var overlay = this.viewer.svgOverlay();
overlay.node().appendChild(svgGroup); // TODO: use method osdviewer's method addOverlay
this.regions[regionIri].push(svgElement);
};
/**
* Adds the necessary attributes to create a ROI-overlay of type 'rectangle' to a SVGElement
* @param svgElement - an SVGElement (should have type 'polygon' (sic))
* @param geometry - the geometry describing the rectangle
* @param aspectRatio - the aspectRatio (h/w) of the image on which the circle should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the circle should be placed
*/
StillImageComponent.prototype.addSVGAttributesRectangle = function (svgElement, geometry, aspectRatio, xOffset) {
var pointA = geometry.points[0];
var pointB = geometry.points[1];
// geometry.points contains two diagonally opposed corners of the rectangle, but the order of the corners is arbitrary.
// We therefore construct the upperleft (UL), lowerright (LR), upperright (UR) and lowerleft (LL) positions of the corners with min and max operations.
var positionUL = new api.Point2D(Math.min(pointA.x, pointB.x), Math.min(pointA.y, pointB.y));
var positionLR = new api.Point2D(Math.max(pointA.x, pointB.x), Math.max(pointA.y, pointB.y));
var positionUR = new api.Point2D(Math.max(pointA.x, pointB.x), Math.min(pointA.y, pointB.y));
var positionLL = new api.Point2D(Math.min(pointA.x, pointB.x), Math.max(pointA.y, pointB.y));
var points = [positionUL, positionUR, positionLR, positionLL];
var viewCoordPoints = this.image2ViewPortCoords(points, aspectRatio, xOffset);
var pointsString = this.createSVGPolygonPointsAttribute(viewCoordPoints);
svgElement.setAttribute('points', pointsString);
};
/**
* Adds the necessary attributes to create a ROI-overlay of type 'polygon' to a SVGElement
* @param svgElement - an SVGElement (should have type 'polygon')
* @param geometry - the geometry describing the polygon
* @param aspectRatio - the aspectRatio (h/w) of the image on which the circle should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the circle should be placed
*/
StillImageComponent.prototype.addSVGAttributesPolygon = function (svgElement, geometry, aspectRatio, xOffset) {
var viewCoordPoints = this.image2ViewPortCoords(geometry.points, aspectRatio, xOffset);
var pointsString = this.createSVGPolygonPointsAttribute(viewCoordPoints);
svgElement.setAttribute('points', pointsString);
};
/**
* Adds the necessary attributes to create a ROI-overlay of type 'circle' to a SVGElement
* @param svgElement - an SVGElement (should have type 'circle')
* @param geometry - the geometry describing the circle
* @param aspectRatio - the aspectRatio (h/w) of the image on which the circle should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the circle should be placed
*/
StillImageComponent.prototype.addSVGAttributesCircle = function (svgElement, geometry, aspectRatio, xOffset) {
var viewCoordPoints = this.image2ViewPortCoords(geometry.points, aspectRatio, xOffset);
var cx = String(viewCoordPoints[0].x);
var cy = String(viewCoordPoints[0].y);
// geometry.radius contains not the radius itself, but the coordinates of a (arbitrary) point on the circle.
// We therefore have to calculate the length of the vector geometry.radius to get the actual radius. -> sqrt(x^2 + y^2)
// Since geometry.radius has its y coordinate scaled to the height of the image,
// we need to multiply it with the aspectRatio to get to the scale used by Openseadragon, analoguous to this.image2ViewPortCoords()
var radius = String(Math.sqrt(geometry.radius.x * geometry.radius.x + aspectRatio * aspectRatio * geometry.radius.y * geometry.radius.y));
svgElement.setAttribute('cx', cx);
svgElement.setAttribute('cy', cy);
svgElement.setAttribute('r', radius);
};
/**
* Maps a Point2D[] with coordinates relative to an image to a new Point2D[] with coordinates in the viewport coordinate system of Openseadragon
* see also: https://openseadragon.github.io/examples/viewport-coordinates/
* @param points - an array of points in coordinate system relative to an image
* @param aspectRatio - the aspectRatio (h/w) of the image
* @param xOffset - the x-offset in viewport coordinates of the image
* @returns - a new Point2D[] with coordinates in the viewport coordinate system of Openseadragon
*/
StillImageComponent.prototype.image2ViewPortCoords = function (points, aspectRatio, xOffset) {
return points.map(function (point) {
return new api.Point2D(point.x + xOffset, point.y * aspectRatio);
});
};
/**
* Returns a string in the format expected by the 'points' attribute of a SVGElement
* @param points - an array of points to be serialized to a string
* @returns - the points serialized to a string in the format expected by the 'points' attribute of a SVGElement
*/
StillImageComponent.prototype.createSVGPolygonPointsAttribute = function (points) {
var pointsString = '';
for (var i in points) {
if (points.hasOwnProperty(i)) {
pointsString += points[i].x;
pointsString += ',';
pointsString += points[i].y;
pointsString += ' ';
}
}
return pointsString;
};
StillImageComponent.prototype.getCurrentImage = function () {
};
var StillImageComponent_1;
StillImageComponent.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
__decorate([
core.Input(),
__metadata("design:type", Array)
], StillImageComponent.prototype, "images", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], StillImageComponent.prototype, "imageCaption", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], StillImageComponent.prototype, "activateRegion", void 0);
__decorate([
core.Output(),
__metadata("design:type", core.EventEmitter)
], StillImageComponent.prototype, "currentImageIndex", void 0);
__decorate([
core.Output(),
__metadata("design:type", Object)
], StillImageComponent.prototype, "regionHovered", void 0);
StillImageComponent = StillImageComponent_1 = __decorate([
core.Component({
selector: 'kui-still-image',
template: "<div class=\"still-image-viewer\">\n <div class=\"navigation left\">\n <button mat-button class=\"full-size\" id=\"KUI_OSD_PREV_PAGE\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- main content with navigation and osd viewer -->\n <div class=\"content\">\n\n <!-- openseadragon (osd) viewer -->\n <div class=\"osd-container\"></div>\n <!-- /openseadragon (osd) -->\n\n <!-- footer with image caption e.g. copyright information -->\n <div class=\"footer\">\n <p class=\"mat-caption\" [innerHtml]=\"imageCaption\"></p>\n </div>\n\n <!-- action panel with tools for image -->\n <mat-toolbar class=\"action\">\n <mat-toolbar-row>\n <!-- home button -->\n <span>\n <button mat-icon-button id=\"KUI_OSD_HOME\">\n <mat-icon>home</mat-icon>\n </button>\n </span>\n <!-- zoom buttons -->\n <span class=\"fill-remaining-space\"></span>\n <span>\n <button mat-icon-button id=\"KUI_OSD_ZOOM_IN\">\n <mat-icon>add</mat-icon>\n </button>\n <button mat-icon-button id=\"KUI_OSD_ZOOM_OUT\">\n <mat-icon>remove</mat-icon>\n </button>\n </span>\n <!-- window button -->\n <span class=\"fill-remaining-space\"></span>\n <span>\n <button mat-icon-button id=\"KUI_OSD_FULL_PAGE\">\n <mat-icon>fullscreen</mat-icon>\n </button>\n </span>\n </mat-toolbar-row>\n </mat-toolbar>\n\n </div>\n\n <div class=\"navigation\">\n <button mat-button class=\"full-size\" id=\"KUI_OSD_NEXT_PAGE\" (click)=\"getCurrentImage()\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n </div>\n\n</div>\n\n<!-- simple image viewer e.g. as a preview -->\n<!-- TODO: handle images array -->\n<!--<img *ngIf=\"simple && images?.length === 1; else osdViewer\" [src]=\"simpleImageExample\">-->\n\n\n<!--\n <div>\n <span *ngIf=\"images.length > 1\" (click)=\"gotoLeft()\"><<</span>\n <span *ngIf=\"images.length > 1\" (click)=\"gotoRight()\">>></span>\n </div>\n-->\n",
styles: [".still-image-viewer{display:-webkit-inline-box;display:inline-flex;height:400px;max-width:960px;width:100%}@media (max-height:636px){.still-image-viewer{height:300px}}.still-image-viewer .navigation{height:calc(400px + 64px + 24px);width:36px}.still-image-viewer .navigation .mat-button.full-size{height:100%!important;width:36px!important;padding:0!important;min-width:36px!important}.still-image-viewer .content{height:calc(400px + 64px + 24px);max-width:calc(960px - (2 * 36px));width:calc(100% - (2 * 36px))}.still-image-viewer .content .osd-container{color:#ccc;background-color:#000;height:400px}.still-image-viewer .content .osd-container.fullscreen{max-width:100vw}.still-image-viewer .content .footer p{color:#ccc;background-color:#000;height:24px;margin:0;padding:0 16px}::ng-deep .roi-svgoverlay{opacity:.4;fill:transparent;stroke:#00695c;stroke-width:2px;vector-effect:non-scaling-stroke}.roi-svgoverlay:focus,::ng-deep .roi-svgoverlay:hover{opacity:1}::ng-deep .roi-svgoverlay.active{opacity:1}"]
}),
__metadata("design:paramtypes", [core.ElementRef])
], StillImageComponent);
return StillImageComponent;
}());
var BooleanValueComponent = /** @class */ (function () {
function BooleanValueComponent() {
}
Object.defineProperty(BooleanValueComponent.prototype, "valueObject", {
get: function () {
return this._booleanValueObj;
},
set: function (value) {
this._booleanValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadBooleanValue),
__metadata("design:paramtypes", [api.ReadBooleanValue])
], BooleanValueComponent.prototype, "valueObject", null);
BooleanValueComponent = __decorate([
core.Component({
selector: 'kui-boolean-value',
template: "<mat-checkbox [checked]=\"valueObject.bool\" readonly=\"true\"></mat-checkbox>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], BooleanValueComponent);
return BooleanValueComponent;
}());
var ColorValueComponent = /** @class */ (function () {
function ColorValueComponent() {
}
Object.defineProperty(ColorValueComponent.prototype, "valueObject", {
get: function () {
return this._colorValueObj;
},
set: function (value) {
this._colorValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadColorValue),
__metadata("design:paramtypes", [api.ReadColorValue])
], ColorValueComponent.prototype, "valueObject", null);
ColorValueComponent = __decorate([
core.Component({
selector: 'kui-color-value',
template: "<span [style.background-color]=\"valueObject.color\">{{valueObject.color}}</span>\n",
styles: [".fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.mat-form-field{width:36px;overflow-x:visible}"]
}),
__metadata("design:paramtypes", [])
], ColorValueComponent);
return ColorValueComponent;
}());
var DateValueComponent = /** @class */ (function () {
function DateValueComponent() {
}
Object.defineProperty(DateValueComponent.prototype, "calendar", {
get: function () {
return this._calendar;
},
set: function (value) {
this._calendar = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DateValueComponent.prototype, "era", {
get: function () {
return this._era;
},
set: function (value) {
this._era = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DateValueComponent.prototype, "valueObject", {
get: function () {
return this._dateValueObj;
},
set: function (value) {
this._dateValueObj = value;
var dateOrRange = this.valueObject.date;
if (dateOrRange instanceof api.KnoraPeriod) {
// period (start and end dates)
this.period = true;
this.dates = [this.getJSDate(dateOrRange.start), this.getJSDate(dateOrRange.end)];
}
else {
// single date
this.period = false;
this.dates = [this.getJSDate(dateOrRange)];
}
},
enumerable: true,
configurable: true
});
/**
* Converts a `KnoraDate` to a JS Date, providing necessary formatting information.
* JULIAN and GREGORIAN calendar are the only available for the moment.
*
* @param date the date to be converted.
* @return DateFormatter.
*/
DateValueComponent.prototype.getJSDate = function (date) {
if (date.precision === api.Precision.yearPrecision) {
return {
format: 'yyyy',
date: new Date(date.year.toString()),
era: date.era,
calendar: date.calendar
};
}
else if (date.precision === api.Precision.monthPrecision) {
return {
format: 'MMMM ' + 'yyyy',
date: new Date(date.year, date.month - 1, 1),
era: date.era,
calendar: date.calendar
};
}
else if (date.precision === api.Precision.dayPrecision) {
return {
format: 'longDate',
date: new Date(date.year, date.month - 1, date.day),
era: date.era,
calendar: date.calendar
};
}
else {
console.error('Error: incorrect precision for date');
}
};
__decorate([
core.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], DateValueComponent.prototype, "calendar", null);
__decorate([
core.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], DateValueComponent.prototype, "era", null);
__decorate([
core.Input(),
__metadata("design:type", api.ReadDateValue),
__metadata("design:paramtypes", [api.ReadDateValue])
], DateValueComponent.prototype, "valueObject", null);
DateValueComponent = __decorate([
core.Component({
selector: 'kui-date-value',
template: "<span *ngIf=\"period; else preciseDate\">\n {{dates[0].date | date: dates[0].format}}\n <span *ngIf=\"era\">\n {{dates[0].era}}\n </span>\n - {{dates[1].date | date: dates[1].format}}\n <span *ngIf=\"era\">\n {{dates[1].era}}\n </span>\n\n <span *ngIf=\"calendar\">\n ({{dates[0].calendar}})\n </span>\n</span>\n\n<ng-template #preciseDate>\n\n <span>\n {{dates[0].date | date: dates[0].format}}\n <span *ngIf=\"era\">\n {{dates[0].era}}\n </span>\n <span *ngIf=\"calendar\">\n ({{dates[0].calendar}})\n </span>\n </span>\n\n</ng-template>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], DateValueComponent);
return DateValueComponent;
}());
var DecimalValueComponent = /** @class */ (function () {
function DecimalValueComponent() {
}
Object.defineProperty(DecimalValueComponent.prototype, "valueObject", {
get: function () {
return this._decimalValueObj;
},
set: function (value) {
this._decimalValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadDecimalValue),
__metadata("design:paramtypes", [api.ReadDecimalValue])
], DecimalValueComponent.prototype, "valueObject", null);
DecimalValueComponent = __decorate([
core.Component({
selector: 'kui-decimal-value',
template: "<span>{{valueObject.decimal}}</span>",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], DecimalValueComponent);
return DecimalValueComponent;
}());
var GeometryValueComponent = /** @class */ (function () {
function GeometryValueComponent() {
}
Object.defineProperty(GeometryValueComponent.prototype, "valueObject", {
get: function () {
return this._geomValueObj;
},
set: function (value) {
this._geomValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadGeomValue),
__metadata("design:paramtypes", [api.ReadGeomValue])
], GeometryValueComponent.prototype, "valueObject", null);
GeometryValueComponent = __decorate([
core.Component({
selector: 'kui-geometry-value',
template: "<span>{{valueObject.geometry}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], GeometryValueComponent);
return GeometryValueComponent;
}());
var GeonameValueComponent = /** @class */ (function () {
function GeonameValueComponent() {
}
GeonameValueComponent.prototype.ngOnInit = function () {
};
GeonameValueComponent = __decorate([
core.Component({
selector: 'kui-geoname-value',
template: "<p>\n geoname-value works!\n</p>",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], GeonameValueComponent);
return GeonameValueComponent;
}());
var IntegerValueComponent = /** @class */ (function () {
function IntegerValueComponent() {
}
Object.defineProperty(IntegerValueComponent.prototype, "valueObject", {
get: function () {
return this._integerValueObj;
},
set: function (value) {
this._integerValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadIntValue),
__metadata("design:paramtypes", [api.ReadIntValue])
], IntegerValueComponent.prototype, "valueObject", null);
IntegerValueComponent = __decorate([
core.Component({
selector: 'kui-integer-value',
template: "<span>{{valueObject.int}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], IntegerValueComponent);
return IntegerValueComponent;
}());
var IntervalValueComponent = /** @class */ (function () {
function IntervalValueComponent() {
}
Object.defineProperty(IntervalValueComponent.prototype, "valueObject", {
get: function () {
return this._intervalValueObj;
},
set: function (value) {
this._intervalValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadIntervalValue),
__metadata("design:paramtypes", [api.ReadIntervalValue])
], IntervalValueComponent.prototype, "valueObject", null);
IntervalValueComponent = __decorate([
core.Component({
selector: 'kui-interval-value',
template: "<span>{{valueObject.start}} - {{valueObject.end}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], IntervalValueComponent);
return IntervalValueComponent;
}());
var LinkValueComponent = /** @class */ (function () {
function LinkValueComponent() {
this.referredResourceClicked = new core.EventEmitter();
}
Object.defineProperty(LinkValueComponent.prototype, "valueObject", {
get: function () {
return this._linkValueObj;
},
set: function (value) {
this._linkValueObj = value;
if (this.valueObject.linkedResource !== undefined) {
this.referredResource = this.valueObject.linkedResource.label;
}
else {
this.referredResource = this.valueObject.linkedResourceIri;
}
},
enumerable: true,
configurable: true
});
LinkValueComponent.prototype.refResClicked = function () {
this.referredResourceClicked.emit(this._linkValueObj);
};
__decorate([
core.Input(),
__metadata("design:type", api.ReadLinkValue),
__metadata("design:paramtypes", [api.ReadLinkValue])
], LinkValueComponent.prototype, "valueObject", null);
__decorate([
core.Output(),
__metadata("design:type", core.EventEmitter)
], LinkValueComponent.prototype, "referredResourceClicked", void 0);
LinkValueComponent = __decorate([
core.Component({
selector: 'kui-link-value',
template: "<a class=\"kui-link\" (click)=\"refResClicked()\">{{referredResource}}</a>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], LinkValueComponent);
return LinkValueComponent;
}());
var ListValueComponent = /** @class */ (function () {
function ListValueComponent() {
}
Object.defineProperty(ListValueComponent.prototype, "valueObject", {
get: function () {
return this._listValueObj;
},
set: function (value) {
this._listValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadListValue),
__metadata("design:paramtypes", [api.ReadListValue])
], ListValueComponent.prototype, "valueObject", null);
ListValueComponent = __decorate([
core.Component({
selector: 'kui-list-value',
template: "<span>{{valueObject.listNodeLabel}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], ListValueComponent);
return ListValueComponent;
}());
var TextValueAsHtmlComponent = /** @class */ (function () {
function TextValueAsHtmlComponent(el) {
this.el = el;
this.referredResourceClicked = new core.EventEmitter();
}
Object.defineProperty(TextValueAsHtmlComponent.prototype, "ontologyInfo", {
get: function () {
return this._ontoInfo;
},
set: function (value) {
this._ontoInfo = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextValueAsHtmlComponent.prototype, "bindEvents", {
get: function () {
return this._bindEvents;
},
set: function (value) {
this._bindEvents = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextValueAsHtmlComponent.prototype, "valueObject", {
get: function () {
return this._htmlValueObj;
},
set: function (value) {
this._htmlValueObj = value;
if (this.el.nativeElement.innerHTML) {
this.el.nativeElement.innerHTML = this.valueObject.html;
}
},
enumerable: true,
configurable: true
});
TextValueAsHtmlComponent.prototype.refResClicked = function (refResourceIri) {
this.referredResourceClicked.emit(refResourceIri);
};
/**
* Binds a click event to standoff links that shows the referred resource.
*
* @param targetElement
*/
TextValueAsHtmlComponent.prototype.onClick = function (targetElement) {
if (this._bindEvents && targetElement.nodeName.toLowerCase() === 'a'
&& targetElement.className.toLowerCase().indexOf('salsah-link') >= 0
&& targetElement.href !== undefined) {
this.refResClicked(targetElement.href);
// prevent propagation
return false;
}
else if (this.bindEvents && targetElement.nodeName.toLowerCase() === 'a' && targetElement.href !== undefined) {
// open link in a new window
window.open(targetElement.href, '_blank');
// prevent propagation
return false;
}
else {
// prevent propagation
return false;
}
};
TextValueAsHtmlComponent.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
__decorate([
core.Output(),
__metadata("design:type", core.EventEmitter)
], TextValueAsHtmlComponent.prototype, "referredResourceClicked", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], TextValueAsHtmlComponent.prototype, "ontologyInfo", null);
__decorate([
core.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], TextValueAsHtmlComponent.prototype, "bindEvents", null);
__decorate([
core.Input(),
__metadata("design:type", api.ReadTextValueAsHtml),
__metadata("design:paramtypes", [api.ReadTextValueAsHtml])
], TextValueAsHtmlComponent.prototype, "valueObject", null);
__decorate([
core.HostListener('click', ['$event.target']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TextValueAsHtmlComponent.prototype, "onClick", null);
TextValueAsHtmlComponent = __decorate([
core.Component({
selector: 'kui-text-value-as-html',
template: "<div>{{valueObject.html}}</div>",
styles: [""]
}),
__metadata("design:paramtypes", [core.ElementRef])
], TextValueAsHtmlComponent);
return TextValueAsHtmlComponent;
}());
var TextValueAsStringComponent = /** @class */ (function () {
function TextValueAsStringComponent() {
this.regexUrl = /(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/;
}
Object.defineProperty(TextValueAsStringComponent.prototype, "valueObject", {
get: function () {
return this._textStringValueObj;
},
set: function (value) {
// console.log(value);
var str = value.text;
if (this.regexUrl.exec(str)) {
var url = this.regexUrl.exec(str)[0];
var newStr = str.replace(this.regexUrl, '<a class="kui-link" href="' + url + '">' + url + '</a>');
value.text = newStr;
this._textStringValueObj = value;
}
else {
this._textStringValueObj = value;
}
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadTextValueAsString),
__metadata("design:paramtypes", [api.ReadTextValueAsString])
], TextValueAsStringComponent.prototype, "valueObject", null);
TextValueAsStringComponent = __decorate([
core.Component({
selector: 'kui-text-value-as-string',
template: "<span [innerHTML]=\"valueObject.text\"></span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.kui-link:hover{box-shadow:0 -10px 0 rgba(0,105,92,.25) inset}"]
}),
__metadata("design:paramtypes", [])
], TextValueAsStringComponent);
return TextValueAsStringComponent;
}());
var TextValueAsXmlComponent = /** @class */ (function () {
function TextValueAsXmlComponent() {
}
Object.defineProperty(TextValueAsXmlComponent.prototype, "valueObject", {
get: function () {
return this._xmlValueObj;
},
set: function (value) {
this._xmlValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", api.ReadTextValueAsXml),
__metadata("design:paramtypes", [api.ReadTextValueAsXml])
], TextValueAsXmlComponent.prototype, "valueObject", null);
TextValueAsXmlComponent = __decorate([
core.Component({
selector: 'kui-text-value-as-xml',
template: "<span>{{valueObject.xml}}</span>",
styles: [""]
}),
__metadata("design:paramtypes", [])
], TextValueAsXmlComponent);
return TextValueAsXmlComponent;
}());
// TEMP CLASS DEFINITION BECAUSE MISSING IN KNORA/API LIB
// TODO: this class must be replaced with the new definition from the lib
var ReadTextFileValue = /** @class */ (function (_super) {
__extends(ReadTextFileValue, _super);
function ReadTextFileValue() {
return _super !== null && _super.apply(this, arguments) || this;
}
return ReadTextFileValue;
}(api.ReadFileValue));
var TextfileValueComponent = /** @class */ (function () {
function TextfileValueComponent() {
}
Object.defineProperty(TextfileValueComponent.prototype, "valueObject", {
get: function () {
return this._textfileValueObj;
},
set: function (value) {
this._textfileValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", ReadTextFileValue),
__metadata("design:paramtypes", [ReadTextFileValue])
], TextfileValueComponent.prototype, "valueObject", null);
TextfileValueComponent = __decorate([
core.Component({
selector: 'kui-textfile-value',
template: "<a target=\"_blank\" href=\"{{valueObject.fileUrl}}\">{{valueObject.filename}}</a>\n",
styles: [""]
}),
__metadata("design:paramtypes", [])
], TextfileValueComponent);
return TextfileValueComponent;
}());
var UriValueComponent = /** @class */ (function () {
function UriValueComponent() {
}
Object.defineProperty(UriValueComponent.prototype, "valueObject", {
get: function () {
return this.__uriValueObj;
},
set: function (value) {
this.__uriValueObj = value;
},
enumerable: true,
configurable: true
});
UriValueComponent.prototype.ngOnChanges = function () {
if (this.label === undefined) {
this.displayString = this.__uriValueObj.uri;
}
else {
this.displayString = this.label;
}
};
__decorate([
core.Input(),
__metadata("design:type", api.ReadUriValue),
__metadata("design:paramtypes", [api.ReadUriValue])
], UriValueComponent.prototype, "valueObject", null);
__decorate([
core.Input(),
__metadata("design:type", String)
], UriValueComponent.prototype, "label", void 0);
UriValueComponent = __decorate([
core.Component({
selector: ' kui-uri-value',
template: "<a href=\"{{valueObject.uri}}\" target=\"_blank\" class=\"kui-link\">{{displayString}}</a>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], UriValueComponent);
return UriValueComponent;
}());
var GridViewComponent = /** @class */ (function () {
function GridViewComponent(_router) {
this._router = _router;
}
GridViewComponent.prototype.ngOnInit = function () {
};
/**
* Navigate to the resource viewer when clicking on one resource of the search result grid
* @param {string} id
*/
GridViewComponent.prototype.openResource = function (id) {
var url = '/resource/' + encodeURIComponent(id);
this._router.navigate([url]);
};
GridViewComponent.ctorParameters = function () { return [
{ type: router.Router }
]; };
__decorate([
core.Input(),
__metadata("design:type", Object)
], GridViewComponent.prototype, "result", void 0);
__decorate([
core.Input(),
__metadata("design:type", core$1.OntologyInformation)
], GridViewComponent.prototype, "ontologyInfo", void 0);
GridViewComponent = __decorate([
core.Component({
selector: 'kui-grid-view',
template: "<div>\n <!-- <kui-progress-indicator *ngIf=\"isLoading\" [color]=\"'#D88958'\"></kui-progress-indicator> -->\n\n <div fxLayout=\"row wrap\" fxLayout.xs=\"column\" fxLayoutGap=\"grid\">\n\n <div fxFlex.xs=\"100\" fxFlex.sm=\"50\" fxFlex.md=\"33.3\" fxFlex.lg=\"25\" fxFlex.xl=\"20\" *ngFor=\"let res of result\"\n class=\"gv-preview\">\n <mat-card class=\"link\" (click)=\"openResource(res.id)\">\n\n <mat-card-subtitle>{{res.entityInfo.classes[res.type].label}}</mat-card-subtitle>\n <mat-card-title>{{res.label}}</mat-card-title>\n\n\n <mat-card-content *ngFor=\"let prop of res.properties | kuiKey\">\n <div *ngFor=\"let val of prop.value | kuiKey\">\n <span class=\"lv-prop-label\">\n {{res.entityInfo.properties[val.value.property].label}}: \n </span>\n\n <div class=\"lv-html-text\">\n {{val.value.strval | kuiTruncate:['200', '...']}}\n </div>\n </div>\n </mat-card-content>\n\n </mat-card>\n </div>\n </div>\n\n\n</div>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.gv-preview{margin:6px 0;padding:24px;word-wrap:break-word;border-radius:5px}.gv-preview .mat-card{height:180px;color:rgba(0,0,0,.81);overflow:hidden;padding-bottom:25px}.gv-preview .mat-card:hover{background:rgba(0,105,92,.39);color:#000}.gv-preview .mat-card:active{background:rgba(0,105,92,.61)}.gv-preview .mat-card .mat-card-title{font-size:12pt;font-weight:600}"]
}),
__metadata("design:paramtypes", [router.Router])
], GridViewComponent);
return GridViewComponent;
}());
var ListViewComponent = /** @class */ (function () {
function ListViewComponent(_router) {
this._router = _router;
}
/**
* Navigate to the resource viewer when clicking on one resource of the search result list
* @param {string} id
*/
ListViewComponent.prototype.openResource = function (id) {
var url = '/resource/' + encodeURIComponent(id);
this._router.navigate([url]);
};
ListViewComponent.ctorParameters = function () { return [
{ type: router.Router }
]; };
__decorate([
core.Input(),
__metadata("design:type", Array)
], ListViewComponent.prototype, "result", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], ListViewComponent.prototype, "ontologyInfo", void 0);
ListViewComponent = __decorate([
core.Component({
selector: 'kui-list-view',
template: "<div>\n <!-- <kui-progress-indicator *ngIf=\"isLoading\" [color]=\"'#D88958'\"></kui-progress-indicator> -->\n\n <mat-list class=\"list-view lv-items\" *ngFor=\"let res of result; let i = index; let last = last;\">\n <mat-list-item class=\"link\" (click)=\"openResource(res.id)\">\n <mat-icon matListIcon>image_search</mat-icon>\n <p matLine class=\"lv-res-label\">{{res.entityInfo.classes[res.type].label}}</p>\n <h3 matLine class=\"lv-label\">{{res.label}}</h3>\n\n <div matLine *ngFor=\"let prop of res.properties | kuiKey\">\n\n <div matLine *ngFor=\"let val of prop.value | kuiKey\">\n\n <span class=\"lv-prop-label\">\n {{res.entityInfo.properties[val.value.property].label}}: \n </span>\n\n <div class=\"lv-html-text\">\n {{val.value.strval | kuiTruncate:['256', '...']}}\n </div>\n\n </div>\n\n </div>\n\n </mat-list-item>\n\n <mat-divider *ngIf=\"!last\"></mat-divider>\n\n </mat-list>\n</div>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54);font-style:italic}.lv-html-text{position:relative;overflow:hidden}.mat-list .mat-list-item .mat-line{white-space:normal!important}.list-view .mat-list-item{height:auto;min-height:40px;padding:8px 0}.lv-label{font-weight:700!important;font-size:16px!important;line-height:1.5}.lv-res-label{color:rgba(0,0,0,.54);font-size:14px!important}"]
}),
__metadata("design:paramtypes", [router.Router])
], ListViewComponent);
return ListViewComponent;
}());
/**
* Shows all metadata (properties) in the resource viewer
*
*/
var PropertiesViewComponent = /** @class */ (function () {
function PropertiesViewComponent(_router) {
this._router = _router;
/**
* Show all properties, even they don't have a value.
*
* @param {boolean} [allProps]
*/
this.allProps = false;
/**
* Show toolbar with project info and some action tools
*
* @param {boolean} [toolbar]
*/
this.toolbar = false;
this.loading = false;
}
PropertiesViewComponent.prototype.ngOnInit = function () {
};
/**
* Navigate to the incoming resource view.
*
* @param {string} id Incoming resource iri
*/
PropertiesViewComponent.prototype.openLink = function (id) {
this.loading = true;
// this.routeChanged.emit(id);
this._router.navigate(['/resource/' + encodeURIComponent(id)]);
};
PropertiesViewComponent.ctorParameters = function () { return [
{ type: router.Router }
]; };
__decorate([
core.Input(),
__metadata("design:type", Object)
], PropertiesViewComponent.prototype, "propArray", void 0);
__decorate([
core.Input(),
__metadata("design:type", Boolean)
], PropertiesViewComponent.prototype, "allProps", void 0);
__decorate([
core.Input(),
__metadata("design:type", Boolean)
], PropertiesViewComponent.prototype, "toolbar", void 0);
PropertiesViewComponent = __decorate([
core.Component({
selector: 'kui-properties-view',
template: "<!-- properties -->\n<div class=\"properties-container\">\n <div class=\"properties\" *ngIf=\"!loading\">\n\n <!-- list of properties -->\n <div *ngFor=\"let prop of propArray; let last = last\">\n <!-- show property; all in case of showAll === true or only the ones with prop.values -->\n <div class=\"property\" *ngIf=\"allProps || prop.values\">\n <div class=\"property-label\">\n <!-- label of the property -->\n <h3 class=\"label mat-subheading-1\">\n {{prop.propDef.label}}\n </h3>\n </div>\n <div class=\"property-value\">\n\n <!-- the value(s) of the property -->\n <div class=\"property-value-item\" *ngFor=\"let val of prop.values; let lastItem = last\">\n\n <span *ngIf=\"prop.values\" [class.list]=\"prop.values.length > 1\"\n [class.lastItem]=\"lastItem\">{{val.strval}}</span>\n\n <!-- TODO: reactivate switch by value type as soon the new viewer elements are ready -->\n <!--\n <span [ngSwitch]=\"val.type\" [class.list]=\"prop.values.length > 1\" [class.lastItem]=\"lastItem\">\n <kui-text-value-as-string *ngSwitchCase=\"KnoraConstants.TextValue\" [valueObject]=\"val\">\n </kui-text-value-as-string>\n <kui-text-value-as-xml *ngSwitchCase=\"KnoraConstants.TextValueAsXml\" [valueObject]=\"val\">\n </kui-text-value-as-xml>\n <kui-date-value *ngSwitchCase=\"KnoraConstants.ReadDateValue\" [valueObject]=\"val\"\n [calendar]=\"true\" [era]=\"true\">\n </kui-date-value>\n <kui-link-value class=\"app-link\" *ngSwitchCase=\"KnoraConstants.ReadLinkValue\"\n [valueObject]=\"val\"\n (referredResourceClicked)=\"openLink(val.referredResourceIri)\">\n </kui-link-value>\n <kui-integer-value *ngSwitchCase=\"KnoraConstants.IntValue\" [valueObject]=\"val\">\n </kui-integer-value>\n <kui-decimal-value *ngSwitchCase=\"KnoraConstants.DecimalValue\" [valueObject]=\"val\">\n </kui-decimal-value>\n <kui-geometry-value *ngSwitchCase=\"KnoraConstants.GeomValue\" [valueObject]=\"val\">\n </kui-geometry-value>\n <kui-color-value *ngSwitchCase=\"KnoraConstants.ColorValue\" [valueObject]=\"val\">\n </kui-color-value>\n <kui-uri-value *ngSwitchCase=\"KnoraConstants.UriValue\" [valueObject]=\"val\">\n </kui-uri-value>\n <kui-boolean-value *ngSwitchCase=\"KnoraConstants.BooleanValue\" [valueObject]=\"val\">\n </kui-boolean-value>\n <kui-interval-value *ngSwitchCase=\"KnoraConstants.IntervalValue\" [valueObject]=\"val\">\n </kui-interval-value>\n <kui-list-value *ngSwitchCase=\"KnoraConstants.ReadListValue\" [valueObject]=\"val\">\n </kui-list-value>\n <kui-textfile-value *ngSwitchCase=\"KnoraConstants.FileValueHasFilename\" [valueObject]=\"val\">\n </kui-textfile-value>\n <span *ngSwitchDefault>Not supported {{val.type}}</span>\n <br>\n </span>\n -->\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- TODO / QUESTION: What happend to incoming links and annotations? -->\n <div class=\"incoming\">\n\n <!-- annotations are resources like region, sequence etc. -->\n <!-- TODO: we can't display incoming annotations as expected\n <div class=\"annotations\">\n <!-- *ngIf=\"annotations?.length > 0\"> --\n <h3 class=\"label mat-subheading-1\">\n Annotations\n </h3>\n <mat-list *ngFor=\"let annotation of annotations\">\n <mat-list-item class=\"kui-link\" (click)=\"openLink(annotation.id)\">\n <span>{{annotation.label}}</span>\n </mat-list-item>\n </mat-list>\n </div>\n -->\n\n <!-- incoming links -->\n <!-- <div class=\"links\" *ngIf=\"incomingLinks?.length > 0\">\n <h3 class=\"label mat-subheading-1\">\n Links\n </h3>\n <ul>\n <li *ngFor=\"let incoming of incomingLinks\" class=\"kui-link\" (click)=\"openLink(incoming.id)\">\n {{incoming.label}}\n </li>\n </ul>\n </div> -->\n </div>\n </div>\n</div>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.properties-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr);gap:16px}.properties-container .incoming,.properties-container .properties{margin-top:16px}.properties-container .properties{-ms-grid-column:1;-ms-grid-column-span:4;grid-column:1/span 4}.properties-container .properties .property{-ms-grid-row:1;grid-row:1/1;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);gap:16px}.properties-container .properties .property .property-label,.properties-container .properties .property .property-value{padding:2px;overflow-wrap:break-word}.properties-container .properties .property .property-label{-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/span 1}.properties-container .properties .property .property-label .label{text-align:right}.properties-container .properties .property .property-value{padding-top:5px;-ms-grid-column:2;-ms-grid-column-span:3;grid-column:2/span 3}.properties-container .incoming{-ms-grid-column:5;-ms-grid-column-span:2;grid-column:5/span 2;display:-ms-grid;display:grid;gap:16px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:(minmax(60px,auto))[6];grid-template-rows:repeat(6,minmax(60px,auto))}.properties-container .incoming .annotations,.properties-container .incoming .links{padding:16px;-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/span 2;border-radius:6px}.properties-container .incoming .annotations ul,.properties-container .incoming .links ul{-webkit-padding-start:5px;padding-inline-start:5px;list-style-type:none}.properties-container .incoming .annotations ul li,.properties-container .incoming .links ul li{margin-bottom:10px;text-indent:-8px}.properties-container .incoming .annotations ul li:before,.properties-container .incoming .links ul li:before{content:\"- \"}.properties-container .incoming .annotations{background:rgba(245,222,179,.39)}.properties-container .incoming .links{background:rgba(222,184,135,.39)}.label{color:rgba(0,0,0,.54)}@media screen and (max-width:768px){.incoming,.properties{-ms-grid-column:1!important;-ms-grid-column-span:6!important;grid-column:1/span 6!important;gap:0!important}.incoming .property,.properties .property{gap:0!important}.incoming .annotations,.incoming .links,.incoming .property-label,.incoming .property-value,.properties .annotations,.properties .links,.properties .property-label,.properties .property-value{-ms-grid-column:1!important;-ms-grid-column-span:4!important;grid-column:1/span 4!important}h3.label{text-align:left!important;margin:16px 0 0!important}}"]
}),
__metadata("design:paramtypes", [router.Router])
], PropertiesViewComponent);
return PropertiesViewComponent;
}());
// list of file value iris; TODO: not yet well done. It should be defined in global knora constants in knora-api-js-lib
var FileRepresentation = /** @class */ (function () {
function FileRepresentation() {
}
FileRepresentation.list = [
api.Constants.KnoraApiV2 + api.Constants.Delimiter + 'hasAudioFileValue',
api.Constants.KnoraApiV2 + api.Constants.Delimiter + 'hasDDDFileValue',
api.Constants.KnoraApiV2 + api.Constants.Delimiter + 'hasMovingImageFileValue',
api.Constants.KnoraApiV2 + api.Constants.Delimiter + 'hasStillImageFileValue',
api.Constants.KnoraApiV2 + api.Constants.Delimiter + 'hasTextFileValue'
];
return FileRepresentation;
}());
var jsonld = require('jsonld');
var ResourceViewComponent = /** @class */ (function () {
function ResourceViewComponent(knoraApiConnection, _route, _router) {
this.knoraApiConnection = knoraApiConnection;
this._route = _route;
this._router = _router;
/**
* Show all properties, even they don't have a value.
*
* @param {boolean} [allProps]
*/
this.allProps = false;
/**
* Show toolbar with project info and some action tools on top of properties if true.
*
* @param {boolean} [toolbar]
*/
this.toolbar = false;
this.propArray = [];
this.Constants = api.Constants;
}
ResourceViewComponent.prototype.ngOnInit = function () {
// this.getResource(this.iri);
};
ResourceViewComponent.prototype.ngOnChanges = function () {
this.getResource(this.iri);
// console.log(this.kuiStillImage.k;
};
/**
* Get a read resource sequence with ontology information and incoming resources.
*
* @param {string} id Resource iri
*/
ResourceViewComponent.prototype.getResource = function (id) {
var _this = this;
this.loading = true;
this.error = undefined;
this.knoraApiConnection.v2.res.getResource(id).subscribe(function (response) {
var e_1, _a;
_this.resource = response;
// console.log(response);
// get list of all properties
var hasProps = _this.resource.entityInfo.classes[_this.resource.type].propertiesList;
var i = 0;
try {
for (var hasProps_1 = __values(hasProps), hasProps_1_1 = hasProps_1.next(); !hasProps_1_1.done; hasProps_1_1 = hasProps_1.next()) {
var hasProp = hasProps_1_1.value;
var index = hasProp.propertyIndex;
if (FileRepresentation.list.includes(index)) {
// property value is of type hasFileRepresentations
_this.fileRepresentation = _this.resource.properties[index];
}
else {
// filter all properties by type ResourcePropertyDefinition
if (_this.resource.entityInfo.properties[index] &&
_this.resource.entityInfo.properties[index] instanceof api.ResourcePropertyDefinition) {
var tempProp = {
guiDef: hasProp,
propDef: _this.resource.entityInfo.properties[index],
values: _this.resource.properties[index]
};
_this.propArray.push(tempProp);
}
}
i++;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (hasProps_1_1 && !hasProps_1_1.done && (_a = hasProps_1.return)) _a.call(hasProps_1);
}
finally { if (e_1) throw e_1.error; }
}
// sort properties by guiOrder
_this.propArray.sort(function (a, b) { return (a.guiDef.guiOrder > b.guiDef.guiOrder) ? 1 : -1; });
// console.log(this.propArray);
// TODO: get info about file representation to load corresponding media view
_this.loading = false;
// setTimeout(() => {
// });
}, function (error) {
console.error(error);
_this.loading = false;
});
};
/**
* Get incoming links for a resource.
*
* @param offset
* @param callback
*/
// getIncomingLinks(offset: number, callback?: (numberOfResources: number) => void): void {
// this.loading = true;
// this._incomingService.getIncomingLinksForResource(this.sequence.resources[0].id, offset).subscribe(
// (incomingResources: ReadResourcesSequence) => {
// // update ontology information
// this.ontologyInfo.updateOntologyInformation(incomingResources.ontologyInformation);
// // Append elements incomingResources to this.sequence.incomingLinks
// Array.prototype.push.apply(this.sequence.resources[0].incomingLinks, incomingResources.resources);
// // if callback is given, execute function with the amount of incoming resources as the parameter
// if (callback !== undefined) {
// callback(incomingResources.resources.length);
// }
// this.loading = false;
// },
// (error: any) => {
// console.error(error);
// this.loading = false;
// }
// );
// }
ResourceViewComponent.prototype.openLink = function (id) {
this.loading = true;
// this.routeChanged.emit(id);
this._router.navigate(['/resource/' + encodeURIComponent(id)]);
};
ResourceViewComponent.prototype.refreshProperties = function (index) {
// console.log('from still-image-component: ', index);
// TODO: commented for knora-api-js-lib:
// this.currentResource = this.sequence.resources[0].incomingFileRepresentations[index];
};
ResourceViewComponent.prototype.toggleProps = function (show) {
this.allProps = !this.allProps;
};
ResourceViewComponent.ctorParameters = function () { return [
{ type: api.KnoraApiConnection, decorators: [{ type: core.Inject, args: [core$1.KnoraApiConnectionToken,] }] },
{ type: router.ActivatedRoute },
{ type: router.Router }
]; };
__decorate([
core.Input(),
__metadata("design:type", String)
], ResourceViewComponent.prototype, "iri", void 0);
__decorate([
core.Input(),
__metadata("design:type", Boolean)
], ResourceViewComponent.prototype, "allProps", void 0);
__decorate([
core.Input(),
__metadata("design:type", Boolean)
], ResourceViewComponent.prototype, "toolbar", void 0);
__decorate([
core.ViewChild('kuiStillImage', { static: false }),
__metadata("design:type", StillImageComponent)
], ResourceViewComponent.prototype, "kuiStillImage", void 0);
ResourceViewComponent = __decorate([
core.Component({
selector: 'kui-resource-view',
template: "<kui-progress-indicator *ngIf=\"loading\"></kui-progress-indicator>\n<div class=\"resource-view\" *ngIf=\"!error && !loading && resource\">\n\n <!-- media: show file representation -->\n <div *ngIf=\"fileRepresentation\">\n <div [ngSwitch]=\"fileRepresentation[0].type\" class=\"media\">\n\n <kui-still-image *ngSwitchCase=\"Constants.StillImageFileValue\" #kuiStillImage class=\"osd-viewer\"\n [images]=\"fileRepresentation\">\n </kui-still-image>\n\n <!-- TODO: switch through all other media type --\n <kui-moving-image></kui-moving-image>\n <kui-audio></kui-audio>\n <kui-ddd></kui-ddd>\n <kui-document></kui-document>\n\n <kui-collection></kui-collection>\n\n <kui-annotation></kui-annotation>\n <kui-link-obj></kui-link-obj>\n <kui-object></kui-object>\n <kui-region></kui-region>\n <kui-text></kui-text>\n -->\n\n <kui-message *ngSwitchDefault [medium]=\"true\"\n [message]=\"{status: 501, statusMsg: 'Not yet implemented', statusText: fileRepresentation[0].type + ' is not yet implemented'}\">\n </kui-message>\n\n </div>\n </div>\n\n <!-- properties / meta data -->\n <!-- tabs with header toolbar and properties -->\n <mat-tab-group animationDuration=\"0ms\" class=\"full-width data\">\n <!-- first tab for the main resource e.g. book -->\n <mat-tab [label]=\"resource.entityInfo?.classes[resource.type].label\">\n <!-- header with project / ontology / resource class info / ark url -->\n <kui-properties-toolbar *ngIf=\"toolbar\" [projectiri]=\"resource.attachedToProject\" [allProps]=\"allProps\"\n (toggleProps)=\"toggleProps($event)\">\n </kui-properties-toolbar>\n\n <kui-properties-view [propArray]=\"propArray\" [toolbar]=\"toolbar\" [allProps]=\"allProps\">\n </kui-properties-view>\n\n </mat-tab>\n\n <!-- TODO: second tab for a \"part-of\"-resource e.g. book page -->\n <!-- TODO: knora-api-js-lib: incoming file representations is empty; can't test it -->\n <!-- <mat-tab *ngIf=\"resource.incomingReferences.length > 0 && activeResource\"\n [label]=\"sequence.ontologyInformation.getLabelForResourceClass(activeResource.type)\">\n </mat-tab> -->\n\n <!-- TODO: third tab for a \"region\"-resource e.g. region on book page -->\n <!-- <mat-tab></mat-tab> -->\n </mat-tab-group>\n</div>\n\n<!-- in case of an error show the following message -->\n<div class=\"resource-view error content large middle\" *ngIf=\"error\">\n <kui-message *ngIf=\"error\" [message]=\"error\" [medium]=\"true\"></kui-message>\n</div>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.resource-view{max-width:960px;margin:0 auto}.resource-view .media{height:500px;display:block;margin:0 auto}.resource-view .data{min-height:700px;padding:24px 36px}.hidden{display:none}.property{margin-bottom:12px}.property .property-value-item{min-height:48px;height:auto}.property .property-value-item li{list-style-type:none}.property .property-value-item li.list:before{content:\"- \"}.property .property-value-item li.lastItem{margin-bottom:12px}@media (max-width:576px){.resource-view .resource .media{width:auto}}"]
}),
__param(0, core.Inject(core$1.KnoraApiConnectionToken)),
__metadata("design:paramtypes", [api.KnoraApiConnection,
router.ActivatedRoute,
router.Router])
], ResourceViewComponent);
return ResourceViewComponent;
}());
var TableViewComponent = /** @class */ (function () {
function TableViewComponent() {
}
TableViewComponent.prototype.ngOnInit = function () {
};
__decorate([
core.Input(),
__metadata("design:type", Object)
], TableViewComponent.prototype, "result", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], TableViewComponent.prototype, "ontologyInfo", void 0);
TableViewComponent = __decorate([
core.Component({
selector: 'kui-table-view',
template: "<p>\n table-view works!\n</p>\n",
styles: [""]
}),
__metadata("design:paramtypes", [])
], TableViewComponent);
return TableViewComponent;
}());
/**
* The search-results gets the search mode and parameters from routes or inputs,
* and returns the corresponding resources that are displayed in a list or a grid.
* The results can be filtered by project.
*/
var SearchResultsComponent = /** @class */ (function () {
function SearchResultsComponent(knoraApiConnection, _route,
// private _searchService: SearchService,
_searchParamsService, _router) {
this.knoraApiConnection = knoraApiConnection;
this._route = _route;
this._searchParamsService = _searchParamsService;
this._router = _router;
/**
* @param {boolean} [complexView] If true it shows 3 ways to display the search results: list or grid or table
*
*/
this.complexView = false;
/**
* @param [viewAs] Show result as list, grid or tabel. Default value is list
*/
this.viewAs = 'list';
this.result = [];
// rerender: boolean = false;
this.badRequest = false;
this.loading = true;
this.pagingLimit = 25;
}
SearchResultsComponent.prototype.ngOnInit = function () {
// page offset is 0
};
SearchResultsComponent.prototype.ngOnChanges = function () {
var _this = this;
this._route.paramMap.subscribe(function (params) {
// get the search mode
if (!_this.searchMode) {
_this.searchMode = params.get('mode');
}
// get the project iri
if (params.get('project') && (_this.projectIri !== decodeURIComponent(params.get('project')))) {
_this.projectIri = decodeURIComponent(params.get('project'));
}
// new search query or old one?
_this.initSearch = (_this.searchQuery !== params.get('q') || _this.searchQuery !== _this.gravSearchQuery);
// init pageIndex and results
if (!_this.pageEvent || _this.initSearch) {
_this.resetPage();
}
// get query params depending on the search mode
if (_this.searchMode === 'fulltext') {
_this.searchQuery = params.get('q');
_this.badRequest = _this.searchQuery.length < 3;
}
else if (_this.searchMode === 'extended') {
_this.gravsearchGenerator = _this._searchParamsService.getSearchParams();
if (!_this.searchQuery) {
_this.generateGravsearchQuery();
}
else {
_this.gravSearchQuery = _this.searchQuery;
}
}
// get results
// this.rerender = true;
_this.getResult();
});
};
SearchResultsComponent.prototype.resetPage = function () {
this.pageEvent = new material.PageEvent();
this.pageEvent.pageIndex = 0;
this.result = [];
};
/**
* Generates the Gravsearch query for the current offset.
* @ignore
*/
SearchResultsComponent.prototype.generateGravsearchQuery = function () {
var gravsearch = this.gravsearchGenerator.generateGravsearch(this.pageEvent.pageIndex);
if (gravsearch === false) {
// no valid search params (application has been reloaded)
// go to root
this._router.navigate([''], { relativeTo: this._route });
return;
}
else {
this.gravSearchQuery = gravsearch;
}
};
/**
* Get search result from Knora - 2 cases: simple search and extended search
* @ignore
*/
SearchResultsComponent.prototype.getResult = function () {
var _this = this;
this.loading = true;
// reset the error message
this.errorMessage = undefined;
// FULLTEXT SEARCH
if (this.searchMode === 'fulltext') {
// this.rerender = true;
if (this.badRequest) {
this.errorMessage = undefined;
// TODO: fix that!
/*
this.errorMessage.error.toString errorInfo =
'A search value is expected to have at least length of 3 characters.';
*/
this.loading = false;
// this.rerender = false;
}
else {
var searchParams = void 0;
if (this.projectIri !== undefined) {
searchParams = { limitToProject: this.projectIri };
}
if (this.pageEvent.pageIndex === 0) {
// perform count query
this.knoraApiConnection.v2.search.doFulltextSearchCountQuery(this.searchQuery, this.pageEvent.pageIndex, searchParams).subscribe(function (response) {
_this.numberOfAllResults = response.numberOfResults;
}, function (error) {
_this.errorMessage = error;
});
}
// perform full text search
this.knoraApiConnection.v2.search.doFulltextSearch(this.searchQuery, this.pageEvent.pageIndex, searchParams).subscribe(function (response) {
// this.processSearchResults(response);
// console.log('', response);
_this.result = response;
_this.loading = false;
}, function (error) {
_this.errorMessage = error;
console.error(error);
_this.loading = false;
});
}
// EXTENDED SEARCH
}
else if (this.searchMode === 'extended') {
// perform count query
if (this.pageEvent.pageIndex === 0) {
this.knoraApiConnection.v2.search.doExtendedSearchCountQuery(this.gravSearchQuery).subscribe(function (response) {
_this.numberOfAllResults = response.numberOfResults;
}, function (error) {
_this.errorMessage = error;
});
}
this.knoraApiConnection.v2.search.doExtendedSearch(this.gravSearchQuery).subscribe(function (response) {
// this.processSearchResults(response);
_this.result = response;
_this.loading = false;
}, function (error) {
_this.errorMessage = error;
_this.loading = false;
});
}
else {
// TODO: fix this
/*
this.errorMessage = new ApiResponseError();
this.errorMessage.errorInfo = `search mode invalid: ${
this.searchMode
}`;
*/
}
};
/**
* Converts search results from JSON-LD to a [[ReadResourcesSequence]] and requests information about ontology entities.
* This function is passed to `subscribe` as a pointer (instead of redundantly defining the same lambda function).
* @ignore
*
* @param {ReadResourcesSequence} searchResult the answer to a search request.
*/
SearchResultsComponent.prototype.processSearchResults = function (searchResult) {
// console.log(searchResult);
// assign ontology information to a variable so it can be used in the component's template
if (this.ontologyInfo === undefined) {
// init ontology information
// TODO: how do we get ontologyInfo from knora-api-js-lib ReadResource[]
this.ontologyInfo = searchResult[0].entityInfo;
}
else {
// update ontology information
// TODO: fix this
// this.ontologyInfo. .updateOntologyInformation(searchResult[0].entityInfo);
}
// append results to search results
this.result = this.result.concat(searchResult);
// console.log('search results', this.result);
this.loading = false;
// this.rerender = false;
};
/**
* Loads the next page of results.
* The results will be appended to the existing ones.
* @ignore
*
* @param {number} offset
* @returns void
*/
SearchResultsComponent.prototype.loadMore = function (page) {
this.pageEvent = page;
if (this.searchMode === 'extended') {
this.generateGravsearchQuery();
}
this.getResult();
};
SearchResultsComponent.ctorParameters = function () { return [
{ type: api.KnoraApiConnection, decorators: [{ type: core.Inject, args: [core$1.KnoraApiConnectionToken,] }] },
{ type: router.ActivatedRoute },
{ type: core$1.SearchParamsService },
{ type: router.Router }
]; };
__decorate([
core.Input(),
__metadata("design:type", Boolean)
], SearchResultsComponent.prototype, "complexView", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], SearchResultsComponent.prototype, "viewAs", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], SearchResultsComponent.prototype, "searchQuery", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], SearchResultsComponent.prototype, "searchMode", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], SearchResultsComponent.prototype, "projectIri", void 0);
SearchResultsComponent = __decorate([
core.Component({
selector: 'kui-search-results',
template: "<!-- header / toolbar to select view and pagination -->\n<div class=\"search-results-header\">\n <span class=\"switch-view\" *ngIf=\"complexView\">\n <span class=\"switch-view-label\">Show as</span>\n <button mat-button (click)=\"viewAs = 'list'\" [class.active]=\"viewAs === 'list'\">\n <mat-icon>view_list</mat-icon> List\n </button>\n <button mat-button (click)=\"viewAs = 'grid'\" [class.active]=\"viewAs === 'grid'\">\n <mat-icon>view_module</mat-icon> Grid\n </button>\n <!-- TODO: add button to show as table, if possible (filter by same resource class) -->\n </span>\n <span class=\"fill-remaining-space\"></span>\n <span class=\"page-navigation\">\n <mat-paginator [length]=\"numberOfAllResults\" [pageSize]=\"25\" [hidePageSize]=\"true\"\n [pageIndex]=\"pageEvent.pageIndex\" (page)=\"loadMore($event)\">\n </mat-paginator>\n </span>\n</div>\n\n<!-- container with search results -->\n<div class=\"search-results-container\">\n <kui-progress-indicator *ngIf=\"loading\"></kui-progress-indicator>\n\n <div class=\"search-results\" *ngIf=\"!loading && numberOfAllResults > 0 && result\">\n <div [ngSwitch]=\"viewAs\">\n <kui-list-view *ngSwitchCase=\"'list'\" [result]=\"result\"></kui-list-view>\n <kui-grid-view *ngSwitchCase=\"'grid'\" [result]=\"result\"></kui-grid-view>\n <!-- TODO: implement table view -->\n <!-- <kui-table-view *ngSwitchCase=\"'table'\" [result]=\"result\"></kui-table-view> -->\n </div>\n\n </div>\n\n <!-- In case of 0 result -->\n <div class=\"search-results zero\" *ngIf=\"!loading && numberOfAllResults === 0\">\n <kui-message\n [message]=\"{status: 404, statusMsg: 'No results', statusText: 'Sorry, but we couldn\\'t find any results matching your search'}\"\n [medium]=\"true\">\n </kui-message>\n </div>\n\n</div>\n\n<!-- footer with pagination -->\n<div class=\"search-results-footer\" *ngIf=\"numberOfAllResults > 25 && !loading\">\n <span class=\"fill-remaining-space\"></span>\n <span class=\"page-navigation\">\n <mat-paginator [length]=\"numberOfAllResults\" [pageSize]=\"25\" [hidePageSize]=\"true\"\n [pageIndex]=\"pageEvent.pageIndex\" (page)=\"loadMore($event)\">\n </mat-paginator>\n </span>\n</div>\n",
styles: [".search-results-footer,.search-results-header{display:-webkit-box;display:flex;box-sizing:border-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;white-space:nowrap;padding:0 16px;height:58px;width:100%;z-index:1;background:#fff}.search-results-header{border-bottom:1px solid rgba(0,0,0,.12);position:-webkit-sticky!important;position:sticky!important;top:64px}.search-results-header .switch-view-label{margin-right:16px}button.active{background-color:#e0e0e0}.load-panel{width:100%}.load-panel .center{display:block;line-height:24px;margin:12px auto}.tab-icon{margin-right:8px}"]
}),
__param(0, core.Inject(core$1.KnoraApiConnectionToken)),
__metadata("design:paramtypes", [api.KnoraApiConnection,
router.ActivatedRoute,
core$1.SearchParamsService,
router.Router])
], SearchResultsComponent);
return SearchResultsComponent;
}());
var PropertiesToolbarComponent = /** @class */ (function () {
function PropertiesToolbarComponent(knoraApiConnection) {
this.knoraApiConnection = knoraApiConnection;
this.toggleProps = new core.EventEmitter();
}
PropertiesToolbarComponent.prototype.ngOnInit = function () {
var _this = this;
// get project information
this.knoraApiConnection.admin.projectsEndpoint.getProjectByIri(this.projectiri).subscribe(function (response) {
_this.project = response.body.project;
}, function (error) {
console.error(error);
});
};
PropertiesToolbarComponent.ctorParameters = function () { return [
{ type: api.KnoraApiConnection, decorators: [{ type: core.Inject, args: [core$1.KnoraApiConnectionToken,] }] }
]; };
__decorate([
core.Input(),
__metadata("design:type", String)
], PropertiesToolbarComponent.prototype, "projectiri", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], PropertiesToolbarComponent.prototype, "ontologyiri", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], PropertiesToolbarComponent.prototype, "arkurl", void 0);
__decorate([
core.Input(),
__metadata("design:type", Boolean)
], PropertiesToolbarComponent.prototype, "allProps", void 0);
__decorate([
core.Output(),
__metadata("design:type", core.EventEmitter)
], PropertiesToolbarComponent.prototype, "toggleProps", void 0);
PropertiesToolbarComponent = __decorate([
core.Component({
selector: 'kui-properties-toolbar',
template: "<div class=\"toolbar\" *ngIf=\"project\">\n <!-- project info -->\n <h3 class=\"label mat-subheading-1\">This source belongs to\n <a [href]=\"'/project/' + project.shortcode\">\n {{project.shortname}}\n <mat-icon inline>open_in_new</mat-icon>\n </a>\n </h3>\n <!-- open_in_new icon -->\n <span class=\"fill-remaining-space\"></span>\n\n <!-- tools: share, add to favorites, edit, delete etc. -->\n <span>\n <button mat-button>\n <mat-icon>star_border</mat-icon>\n </button>\n\n <button mat-button (click)=\"toggleProps.emit(!allProps)\">\n <mat-icon>edit</mat-icon>\n </button>\n\n <button mat-button>\n <mat-icon>delete</mat-icon>\n </button>\n\n <button mat-button>\n <mat-icon>share</mat-icon>\n </button>\n </span>\n\n</div>\n",
styles: [".toolbar{display:-webkit-box;display:flex;box-sizing:border-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;white-space:nowrap;padding:0 16px;width:100%;background:#f5f5f5;color:rgba(0,0,0,.87)}.toolbar .label{margin:0!important}"]
}),
__param(0, core.Inject(core$1.KnoraApiConnectionToken)),
__metadata("design:paramtypes", [api.KnoraApiConnection])
], PropertiesToolbarComponent);
return PropertiesToolbarComponent;
}());
var KuiViewerModule = /** @class */ (function () {
function KuiViewerModule() {
}
KuiViewerModule = __decorate([
core.NgModule({
imports: [
common.CommonModule,
core$1.KuiCoreModule,
action.KuiActionModule,
autocomplete.MatAutocompleteModule,
button.MatButtonModule,
card.MatCardModule,
checkbox.MatCheckboxModule,
datepicker.MatDatepickerModule,
expansion.MatExpansionModule,
formField.MatFormFieldModule,
input.MatInputModule,
icon.MatIconModule,
list.MatListModule,
material.MatMenuModule,
core$2.MatNativeDateModule,
paginator.MatPaginatorModule,
slideToggle.MatSlideToggleModule,
tabs.MatTabsModule,
toolbar.MatToolbarModule,
tooltip.MatTooltipModule,
forms.ReactiveFormsModule,
flexLayout.FlexLayoutModule
],
declarations: [
MovingImageComponent,
StillImageComponent,
TextValueAsHtmlComponent,
TextValueAsStringComponent,
TextValueAsXmlComponent,
TextfileValueComponent,
DateValueComponent,
IntegerValueComponent,
ColorValueComponent,
DecimalValueComponent,
UriValueComponent,
BooleanValueComponent,
GeometryValueComponent,
GeonameValueComponent,
IntervalValueComponent,
ListValueComponent,
LinkValueComponent,
ListViewComponent,
GridViewComponent,
TableViewComponent,
ResourceViewComponent,
PropertiesViewComponent,
SearchResultsComponent,
PropertiesToolbarComponent
],
exports: [
MovingImageComponent,
StillImageComponent,
TextValueAsHtmlComponent,
TextValueAsStringComponent,
TextValueAsXmlComponent,
TextfileValueComponent,
DateValueComponent,
IntegerValueComponent,
ColorValueComponent,
DecimalValueComponent,
UriValueComponent,
BooleanValueComponent,
GeometryValueComponent,
GeonameValueComponent,
IntervalValueComponent,
ListValueComponent,
LinkValueComponent,
ListViewComponent,
GridViewComponent,
TableViewComponent,
ResourceViewComponent,
PropertiesViewComponent,
SearchResultsComponent
]
})
], KuiViewerModule);
return KuiViewerModule;
}());
exports.BooleanValueComponent = BooleanValueComponent;
exports.ColorValueComponent = ColorValueComponent;
exports.DateValueComponent = DateValueComponent;
exports.DecimalValueComponent = DecimalValueComponent;
exports.FileRepresentation = FileRepresentation;
exports.GeometryForRegion = GeometryForRegion;
exports.GeometryValueComponent = GeometryValueComponent;
exports.GeonameValueComponent = GeonameValueComponent;
exports.GridViewComponent = GridViewComponent;
exports.ImageRegion = ImageRegion;
exports.IntegerValueComponent = IntegerValueComponent;
exports.IntervalValueComponent = IntervalValueComponent;
exports.KuiViewerModule = KuiViewerModule;
exports.LinkValueComponent = LinkValueComponent;
exports.ListValueComponent = ListValueComponent;
exports.ListViewComponent = ListViewComponent;
exports.MovingImageComponent = MovingImageComponent;
exports.PropertiesViewComponent = PropertiesViewComponent;
exports.ReadTextFileValue = ReadTextFileValue;
exports.ResourceViewComponent = ResourceViewComponent;
exports.SearchResultsComponent = SearchResultsComponent;
exports.StillImageComponent = StillImageComponent;
exports.StillImageRepresentation = StillImageRepresentation;
exports.TableViewComponent = TableViewComponent;
exports.TextValueAsHtmlComponent = TextValueAsHtmlComponent;
exports.TextValueAsStringComponent = TextValueAsStringComponent;
exports.TextValueAsXmlComponent = TextValueAsXmlComponent;
exports.TextfileValueComponent = TextfileValueComponent;
exports.UriValueComponent = UriValueComponent;
exports.ɵa = MovingImageComponent;
exports.ɵb = StillImageComponent;
exports.ɵc = TextValueAsHtmlComponent;
exports.ɵd = TextValueAsStringComponent;
exports.ɵe = TextValueAsXmlComponent;
exports.ɵf = TextfileValueComponent;
exports.ɵg = DateValueComponent;
exports.ɵh = IntegerValueComponent;
exports.ɵi = ColorValueComponent;
exports.ɵj = DecimalValueComponent;
exports.ɵk = UriValueComponent;
exports.ɵl = BooleanValueComponent;
exports.ɵm = GeometryValueComponent;
exports.ɵn = GeonameValueComponent;
exports.ɵo = IntervalValueComponent;
exports.ɵp = ListValueComponent;
exports.ɵq = LinkValueComponent;
exports.ɵr = ListViewComponent;
exports.ɵs = GridViewComponent;
exports.ɵt = TableViewComponent;
exports.ɵu = ResourceViewComponent;
exports.ɵv = PropertiesViewComponent;
exports.ɵw = SearchResultsComponent;
exports.ɵx = PropertiesToolbarComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=knora-viewer.umd.js.map