@knora/viewer
Version:
Knora ui module: viewer
1 lines • 56.3 kB
JSON
{"__symbolic":"module","version":4,"exports":[{"from":"./lib/list/grid-view/grid-view.component"},{"from":"./lib/list/list-view/list-view.component"},{"from":"./lib/properties-view/properties-view.component"},{"from":"./lib/resource-view/resource-view.component"},{"from":"./lib/list/table-view/table-view.component"},{"from":"./lib/search-results/search-results.component"},{"from":"./lib/integer-value/integer-value.component"},{"from":"./lib/interval-value/interval-value.component"},{"from":"./lib/link-value/link-value.component"},{"from":"./lib/list-value/list-value.component"},{"from":"./lib/text-value/text-value-as-html/text-value-as-html.component"},{"from":"./lib/text-value/text-value-as-string/text-value-as-string.component"},{"from":"./lib/text-value/text-value-as-xml/text-value-as-xml.component"},{"from":"./lib/textfile-value/textfile-value.component"},{"from":"./lib/uri-value/uri-value.component"}],"metadata":{"KuiViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":49,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":51,"character":8},{"__symbolic":"reference","module":"@knora/core","name":"KuiCoreModule","line":52,"character":8},{"__symbolic":"reference","module":"@knora/action","name":"KuiActionModule","line":53,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":54,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":55,"character":8},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":56,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":57,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":58,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":59,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":60,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":61,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":62,"character":8},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":63,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":64,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":65,"character":8},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":66,"character":8},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":67,"character":8},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":68,"character":8},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":69,"character":8},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":70,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":71,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":72,"character":8}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":81,"character":1},"arguments":[{"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}"]}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"imageCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"activateRegion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"currentImageIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":92,"character":5}}]}],"regionHovered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":161,"character":36}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateImages":[{"__symbolic":"method"}],"updateRegions":[{"__symbolic":"method"}],"highlightRegion":[{"__symbolic":"method"}],"unhighlightAllRegions":[{"__symbolic":"method"}],"setupViewer":[{"__symbolic":"method"}],"openImages":[{"__symbolic":"method"}],"removeOverlays":[{"__symbolic":"method"}],"renderRegions":[{"__symbolic":"method"}],"createSVGOverlay":[{"__symbolic":"method"}],"addSVGAttributesRectangle":[{"__symbolic":"method"}],"addSVGAttributesPolygon":[{"__symbolic":"method"}],"addSVGAttributesCircle":[{"__symbolic":"method"}],"image2ViewPortCoords":[{"__symbolic":"method"}],"createSVGPolygonPointsAttribute":[{"__symbolic":"method"}],"getCurrentImage":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kui-text-value-as-html","template":"<div>{{valueObject.html}}</div>","styles":[""]}]}],"members":{"referredResourceClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":5}}]}],"ontologyInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"bindEvents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":49,"character":28}]}],"refResClicked":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":61,"character":5},"arguments":["click",["$event.target"]]}]}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kui-text-value-as-xml","template":"<span>{{valueObject.xml}}</span>","styles":[""]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"kui-textfile-value","template":"<a target=\"_blank\" href=\"{{valueObject.fileUrl}}\">{{valueObject.filename}}</a>\n","styles":[""]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"calendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"era":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getJSDate":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"valueObject":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"referredResourceClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"refResClicked":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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}"]}]}],"members":{"result":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"ontologyInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":23,"character":25}]}],"openResource":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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}"]}]}],"members":{"result":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"ontologyInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":23,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"openResource":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"kui-table-view","template":"<p>\n table-view works!\n</p>\n","styles":[""]}]}],"members":{"result":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"ontologyInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"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}}"]}]}],"members":{"iri":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"allProps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"kuiStillImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":5},"arguments":["kuiStillImage",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":84,"character":9},"arguments":[{"__symbolic":"reference","module":"@knora/core","name":"KnoraApiConnectionToken","line":84,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@knora/api","name":"KnoraApiConnection","line":84,"character":69},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":85,"character":26},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":86,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"getResource":[{"__symbolic":"method"}],"openLink":[{"__symbolic":"method"}],"refreshProperties":[{"__symbolic":"method"}],"toggleProps":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"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}}"]}]}],"members":{"propArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"allProps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":41,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"openLink":[{"__symbolic":"method"}]}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"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}"]}]}],"members":{"complexView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core"