blockui-components
Version:
Various UI-Components for Angular (V.19)
560 lines (550 loc) • 73.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, Output, Input, ContentChildren, ViewChild } from '@angular/core';
import { NgIf, NgForOf } from '@angular/common';
import { render } from 'katex';
import * as i1 from '@angular/platform-browser';
class BlockuiService {
constructor() { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockuiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockuiService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockuiService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class BlockuiComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockuiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BlockuiComponent, isStandalone: true, selector: "lib-blockui", ngImport: i0, template: `
<p>
blockui works!
</p>
`, isInline: true, styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockuiComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-blockui', imports: [], template: `
<p>
blockui works!
</p>
` }]
}] });
class FileInputComponent {
label = '';
accept = ['image/*'];
multiple = false;
filesSelected = new EventEmitter();
selectedFiles = [];
previewImages = [];
ngOnInit() {
const input = document.querySelector(".custom-file-input input[type='file']");
if (input) {
input.accept = this.accept.join(',');
input.multiple = this.multiple;
}
else {
console.error("BlockUI |", "File input not found");
}
}
selectFile(event) {
if (event.target.files && event.target.files.length > 0) {
if (this.multiple) {
for (let file of event.target.files) {
if (this.selectedFiles.includes(file))
return;
if (!this.isAllowedExtension(this.getFileExtension(file))) {
console.error("BlockUI |", "File type not allowed");
alert(`Nur Dateien mit den folgenden Erweiterungen sind erlaubt: ${this.getAllowedExtensionsString()}`);
return;
}
this.selectedFiles.push(file);
const reader = new FileReader();
reader.onload = (e) => {
this.previewImages.push(e.target.result);
};
reader.readAsDataURL(file);
}
}
else {
if (this.selectedFiles.includes(event.target.files[0])) {
return;
}
else if (this.selectedFiles.length > 0) {
this.selectedFiles = [];
this.previewImages = [];
}
if (!this.isAllowedExtension(this.getFileExtension(event.target.files[0]))) {
console.error("BlockUI |", "File type not allowed");
alert(`Nur Dateien mit den folgenden Erweiterungen sind erlaubt: ${this.getAllowedExtensionsString()}`);
return;
}
this.selectedFiles.push(event.target.files[0]);
const reader = new FileReader();
reader.onload = (e) => {
this.previewImages.push(e.target.result);
};
reader.readAsDataURL(event.target.files[0]);
}
this.filesSelected.emit(this.selectedFiles);
}
}
getFileExtension(file) {
return file.name.split('.').pop() || '';
}
isAllowedExtension(extension) {
const allowedExtensions = this.getAllowedExtensionsString().split(',').map(ext => ext.trim());
return allowedExtensions.includes(extension) || false;
}
getAllowedExtensionsString() {
let extensions = [];
if (!this.accept || this.accept.length === 0 || this.accept[0] === '*/*') {
return '';
}
else if (this.accept[0] === 'image/*') {
extensions.push('jpg, jpeg, png, gif, svg, webp');
}
else if (this.accept[0] === 'video/*') {
extensions.push('mp4, webm, ogg');
}
else if (this.accept[0] === 'audio/*') {
extensions.push('mp3, wav, ogg');
}
else {
this.accept.forEach((type) => {
extensions.push(type
.replace("application/", "")
.replace("image/", "")
.replace("audio/", "")
.replace("video/", "")
.replace("+xml", ""));
});
}
return extensions.join(", ");
}
removeFile(index) {
if (index >= 0 && index < this.selectedFiles.length) {
this.selectedFiles.splice(index, 1);
this.previewImages.splice(index, 1);
this.filesSelected.emit(this.selectedFiles);
}
else {
console.error("BlockUI |", "Invalid file index");
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FileInputComponent, isStandalone: true, selector: "block-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple" }, outputs: { filesSelected: "filesSelected" }, ngImport: i0, template: "<div class=\"custom-file-input\">\r\n <input type=\"file\" (change)=\"selectFile($event)\" alt=\"\">\r\n <p *ngIf=\"!selectedFiles || selectedFiles.length === 0\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"add-image\">\r\n <path d=\"M19,10a1,1,0,0,0-1,1v3.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.71L9.41,11.12a2.79,2.79,0,0,0-3.93,0L4,12.61V7A1,1,0,0,1,5,6h8a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19.22A2.79,2.79,0,0,0,4.78,22H17.22a2.88,2.88,0,0,0,.8-.12h0a2.74,2.74,0,0,0,2-2.65V11A1,1,0,0,0,19,10ZM5,20a1,1,0,0,1-1-1V15.43l2.89-2.89a.78.78,0,0,1,1.1,0L15.46,20Zm13-1a1,1,0,0,1-.18.54L13.3,15l.71-.7a.77.77,0,0,1,1.1,0L18,17.21ZM21,4H20V3a1,1,0,0,0-2,0V4H17a1,1,0,0,0,0,2h1V7a1,1,0,0,0,2,0V6h1a1,1,0,0,0,0-2Z\"></path>\r\n </svg>\r\n Datei ausw\u00E4hlen<br>{{ getAllowedExtensionsString() }}\r\n </p>\r\n <div class=\"imagePreview\" *ngIf=\"previewImages && previewImages.length > 0\">\r\n <div class=\"img-container\" *ngFor=\"let img of previewImages; let i = index\">\r\n <img [src]=\"img\" alt=\"\" />\r\n <button class=\"delete-btn\" (click)=\"removeFile(i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" id=\"delete\">\r\n <path d=\"M24.2,12.193,23.8,24.3a3.988,3.988,0,0,1-4,3.857H12.2a3.988,3.988,0,0,1-4-3.853L7.8,12.193a1,1,0,0,1,2-.066l.4,12.11a2,2,0,0,0,2,1.923h7.6a2,2,0,0,0,2-1.927l.4-12.106a1,1,0,0,1,2,.066Zm1.323-4.029a1,1,0,0,1-1,1H7.478a1,1,0,0,1,0-2h3.1a1.276,1.276,0,0,0,1.273-1.148,2.991,2.991,0,0,1,2.984-2.694h2.33a2.991,2.991,0,0,1,2.984,2.694,1.276,1.276,0,0,0,1.273,1.148h3.1A1,1,0,0,1,25.522,8.164Zm-11.936-1h4.828a3.3,3.3,0,0,1-.255-.944,1,1,0,0,0-.994-.9h-2.33a1,1,0,0,0-.994.9A3.3,3.3,0,0,1,13.586,7.164Zm1.007,15.151V13.8a1,1,0,0,0-2,0v8.519a1,1,0,0,0,2,0Zm4.814,0V13.8a1,1,0,0,0-2,0v8.519a1,1,0,0,0,2,0Z\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".custom-file-input{position:relative;width:var(--blockui-file-input-width);height:var(--blockui-file-input-height);border-radius:var(--blockui-file-input-border-radius);border:3px dashed var(--blockui-file-input-secondary-color);display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif;overflow-x:scroll;scrollbar-width:none;-ms-overflow-style:none}.custom-file-input::-webkit-scrollbar{display:none}.custom-file-input p{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5px;text-align:center;margin:0;color:var(--blockui-file-input-primary-color)}.custom-file-input input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.custom-file-input svg{width:30px;height:30px;object-fit:cover;border-radius:5px;fill:var(--blockui-file-input-primary-color)}.custom-file-input .imagePreview{width:fit-content;height:100px;border-radius:5px;margin:0;display:flex;flex-direction:row;justify-content:left;align-items:center}.custom-file-input .imagePreview .img-container{position:relative;width:100px;height:100px;border-radius:5px}.custom-file-input .imagePreview .img-container img{width:100%;height:100%;object-fit:cover;border-radius:5px}.custom-file-input .imagePreview .img-container .delete-btn{position:absolute;bottom:0;right:0;background-color:red;border:none;outline:none;width:30px;height:30px;border-radius:5px 0;display:flex;justify-content:center;align-items:center;padding:5px;cursor:pointer}.custom-file-input .imagePreview .img-container .delete-btn svg{fill:#fff;width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileInputComponent, decorators: [{
type: Component,
args: [{ selector: 'block-file-input', imports: [
NgIf,
NgForOf
], template: "<div class=\"custom-file-input\">\r\n <input type=\"file\" (change)=\"selectFile($event)\" alt=\"\">\r\n <p *ngIf=\"!selectedFiles || selectedFiles.length === 0\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"add-image\">\r\n <path d=\"M19,10a1,1,0,0,0-1,1v3.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.71L9.41,11.12a2.79,2.79,0,0,0-3.93,0L4,12.61V7A1,1,0,0,1,5,6h8a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19.22A2.79,2.79,0,0,0,4.78,22H17.22a2.88,2.88,0,0,0,.8-.12h0a2.74,2.74,0,0,0,2-2.65V11A1,1,0,0,0,19,10ZM5,20a1,1,0,0,1-1-1V15.43l2.89-2.89a.78.78,0,0,1,1.1,0L15.46,20Zm13-1a1,1,0,0,1-.18.54L13.3,15l.71-.7a.77.77,0,0,1,1.1,0L18,17.21ZM21,4H20V3a1,1,0,0,0-2,0V4H17a1,1,0,0,0,0,2h1V7a1,1,0,0,0,2,0V6h1a1,1,0,0,0,0-2Z\"></path>\r\n </svg>\r\n Datei ausw\u00E4hlen<br>{{ getAllowedExtensionsString() }}\r\n </p>\r\n <div class=\"imagePreview\" *ngIf=\"previewImages && previewImages.length > 0\">\r\n <div class=\"img-container\" *ngFor=\"let img of previewImages; let i = index\">\r\n <img [src]=\"img\" alt=\"\" />\r\n <button class=\"delete-btn\" (click)=\"removeFile(i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" id=\"delete\">\r\n <path d=\"M24.2,12.193,23.8,24.3a3.988,3.988,0,0,1-4,3.857H12.2a3.988,3.988,0,0,1-4-3.853L7.8,12.193a1,1,0,0,1,2-.066l.4,12.11a2,2,0,0,0,2,1.923h7.6a2,2,0,0,0,2-1.927l.4-12.106a1,1,0,0,1,2,.066Zm1.323-4.029a1,1,0,0,1-1,1H7.478a1,1,0,0,1,0-2h3.1a1.276,1.276,0,0,0,1.273-1.148,2.991,2.991,0,0,1,2.984-2.694h2.33a2.991,2.991,0,0,1,2.984,2.694,1.276,1.276,0,0,0,1.273,1.148h3.1A1,1,0,0,1,25.522,8.164Zm-11.936-1h4.828a3.3,3.3,0,0,1-.255-.944,1,1,0,0,0-.994-.9h-2.33a1,1,0,0,0-.994.9A3.3,3.3,0,0,1,13.586,7.164Zm1.007,15.151V13.8a1,1,0,0,0-2,0v8.519a1,1,0,0,0,2,0Zm4.814,0V13.8a1,1,0,0,0-2,0v8.519a1,1,0,0,0,2,0Z\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".custom-file-input{position:relative;width:var(--blockui-file-input-width);height:var(--blockui-file-input-height);border-radius:var(--blockui-file-input-border-radius);border:3px dashed var(--blockui-file-input-secondary-color);display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif;overflow-x:scroll;scrollbar-width:none;-ms-overflow-style:none}.custom-file-input::-webkit-scrollbar{display:none}.custom-file-input p{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5px;text-align:center;margin:0;color:var(--blockui-file-input-primary-color)}.custom-file-input input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.custom-file-input svg{width:30px;height:30px;object-fit:cover;border-radius:5px;fill:var(--blockui-file-input-primary-color)}.custom-file-input .imagePreview{width:fit-content;height:100px;border-radius:5px;margin:0;display:flex;flex-direction:row;justify-content:left;align-items:center}.custom-file-input .imagePreview .img-container{position:relative;width:100px;height:100px;border-radius:5px}.custom-file-input .imagePreview .img-container img{width:100%;height:100%;object-fit:cover;border-radius:5px}.custom-file-input .imagePreview .img-container .delete-btn{position:absolute;bottom:0;right:0;background-color:red;border:none;outline:none;width:30px;height:30px;border-radius:5px 0;display:flex;justify-content:center;align-items:center;padding:5px;cursor:pointer}.custom-file-input .imagePreview .img-container .delete-btn svg{fill:#fff;width:100%}\n"] }]
}], propDecorators: { label: [{
type: Input
}], accept: [{
type: Input
}], multiple: [{
type: Input
}], filesSelected: [{
type: Output
}] } });
class ModalComponent {
openState = new EventEmitter();
isOpen = false;
ngOnInit() {
this.openState.subscribe((isOpen) => {
this.isOpen = isOpen;
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && this.isOpen) {
this.close();
}
});
}
close() {
this.isOpen = false;
this.openState.emit(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ModalComponent, isStandalone: true, selector: "block-modal", inputs: { openState: "openState" }, ngImport: i0, template: "<div class=\"modal\" *ngIf=\"isOpen\" (click)=\"close()\">\r\n <div class=\"window\" (click)=\"$event.stopPropagation()\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--blockui-modal-background);display:flex;justify-content:center;align-items:center;z-index:999999}.modal .window{width:var(--blockui-modal-width);max-width:var(--blockui-modal-max-width);height:var(--blockui-modal-height);max-height:var(--blockui-modal-max-height);background-color:var(--blockui-modal-background-color);border-radius:var(--blockui-modal-border-radius);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'block-modal', imports: [
NgIf
], template: "<div class=\"modal\" *ngIf=\"isOpen\" (click)=\"close()\">\r\n <div class=\"window\" (click)=\"$event.stopPropagation()\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--blockui-modal-background);display:flex;justify-content:center;align-items:center;z-index:999999}.modal .window{width:var(--blockui-modal-width);max-width:var(--blockui-modal-max-width);height:var(--blockui-modal-height);max-height:var(--blockui-modal-max-height);background-color:var(--blockui-modal-background-color);border-radius:var(--blockui-modal-border-radius);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow-y:auto}\n"] }]
}], propDecorators: { openState: [{
type: Input
}] } });
class ModalHeaderComponent {
openState = new EventEmitter();
isOpen = false;
ngOnInit() {
this.openState.subscribe((isOpen) => {
this.isOpen = isOpen;
});
}
close() {
this.isOpen = false;
this.openState.emit(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ModalHeaderComponent, isStandalone: true, selector: "block-modal-header", inputs: { openState: "openState" }, ngImport: i0, template: "<div class=\"window-header\">\r\n <ng-content></ng-content>\r\n <button class=\"close-modal-btn\" (click)=\"close()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" id=\"x\">\r\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n <path d=\"M13 1 1 13M1 1l12 12\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n</div>\r\n", styles: [".window-header{position:sticky;top:0;background-color:var(--blockui-modal-header-background-color);width:calc(100% - 40px);padding:10px 20px;z-index:500;display:flex;justify-content:space-between;align-items:center;border-bottom:var(--blockui-modal-header-border-bottom);font-family:var(--blockui-modal-header-font-family),sans-serif;color:var(--blockui-modal-header-primary-color)}.close-modal-btn{background-color:transparent;border:none;cursor:pointer;margin:0!important;padding:5px!important;display:flex;align-items:center;justify-content:center}.close-modal-btn svg g{stroke:var(--blockui-modal-header-secondary-color)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'block-modal-header', imports: [], template: "<div class=\"window-header\">\r\n <ng-content></ng-content>\r\n <button class=\"close-modal-btn\" (click)=\"close()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" id=\"x\">\r\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n <path d=\"M13 1 1 13M1 1l12 12\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n</div>\r\n", styles: [".window-header{position:sticky;top:0;background-color:var(--blockui-modal-header-background-color);width:calc(100% - 40px);padding:10px 20px;z-index:500;display:flex;justify-content:space-between;align-items:center;border-bottom:var(--blockui-modal-header-border-bottom);font-family:var(--blockui-modal-header-font-family),sans-serif;color:var(--blockui-modal-header-primary-color)}.close-modal-btn{background-color:transparent;border:none;cursor:pointer;margin:0!important;padding:5px!important;display:flex;align-items:center;justify-content:center}.close-modal-btn svg g{stroke:var(--blockui-modal-header-secondary-color)}\n"] }]
}], propDecorators: { openState: [{
type: Input
}] } });
class ModalContentComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ModalContentComponent, isStandalone: true, selector: "block-modal-content", ngImport: i0, template: "<div class=\"window-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".window-content{overflow-y:scroll;overflow-x:hidden;max-height:calc(var(--blockui-modal-max-height) - 65px);height:calc(var(--blockui-modal-height) - 5px);padding:10px 20px}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalContentComponent, decorators: [{
type: Component,
args: [{ selector: 'block-modal-content', imports: [], template: "<div class=\"window-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".window-content{overflow-y:scroll;overflow-x:hidden;max-height:calc(var(--blockui-modal-max-height) - 65px);height:calc(var(--blockui-modal-height) - 5px);padding:10px 20px}\n"] }]
}] });
class ToggleComponent {
label = '';
onToggle = new EventEmitter();
switchState(event) {
this.onToggle.emit(event.target.checked);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ToggleComponent, isStandalone: true, selector: "block-toggle", inputs: { label: "label" }, outputs: { onToggle: "onToggle" }, ngImport: i0, template: "<div class=\"toggle-wrapper\">\r\n <div class=\"toggle-container\">\r\n <input type=\"checkbox\" (change)=\"switchState($event)\" />\r\n <label></label>\r\n </div>\r\n <div class=\"toggle-label\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".toggle-wrapper{display:flex;align-items:center;width:fit-content;margin-bottom:10px}.toggle-container{position:relative;margin-right:10px;width:46px;height:25px}.toggle-container input[type=checkbox]{height:100%;width:100%;opacity:0;cursor:pointer;margin:0}.toggle-container label{position:absolute;top:0;left:0;width:calc(100% - 6px);height:100%;border-radius:25px;background:var(--blockui-toggle-color-unchecked);z-index:-1;display:flex;align-items:center;padding:0 3px}.toggle-container label:before{content:\"\";width:20px;height:20px;background-color:var(--blockui-toggle-switch-color);border-radius:50%;transition:transform .3s ease}.toggle-container input:checked+label{background-color:var(--blockui-toggle-color-checked)}.toggle-container input:checked+label:before{transform:translate(20px)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'block-toggle', imports: [], template: "<div class=\"toggle-wrapper\">\r\n <div class=\"toggle-container\">\r\n <input type=\"checkbox\" (change)=\"switchState($event)\" />\r\n <label></label>\r\n </div>\r\n <div class=\"toggle-label\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".toggle-wrapper{display:flex;align-items:center;width:fit-content;margin-bottom:10px}.toggle-container{position:relative;margin-right:10px;width:46px;height:25px}.toggle-container input[type=checkbox]{height:100%;width:100%;opacity:0;cursor:pointer;margin:0}.toggle-container label{position:absolute;top:0;left:0;width:calc(100% - 6px);height:100%;border-radius:25px;background:var(--blockui-toggle-color-unchecked);z-index:-1;display:flex;align-items:center;padding:0 3px}.toggle-container label:before{content:\"\";width:20px;height:20px;background-color:var(--blockui-toggle-switch-color);border-radius:50%;transition:transform .3s ease}.toggle-container input:checked+label{background-color:var(--blockui-toggle-color-checked)}.toggle-container input:checked+label:before{transform:translate(20px)}\n"] }]
}], propDecorators: { label: [{
type: Input
}], onToggle: [{
type: Output
}] } });
class SelectOptionComponent {
label = '';
value = '';
selected = false;
optionSelected = new EventEmitter();
selectOption() {
this.optionSelected.emit(this.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectOptionComponent, isStandalone: true, selector: "block-select-option", inputs: { label: "label", value: "value", selected: "selected" }, outputs: { optionSelected: "optionSelected" }, ngImport: i0, template: "<button [classList]=\"selected ? 'selected' : ''\" (click)=\"selectOption()\">{{ label }}</button>\r\n", styles: ["button{width:100%;padding:8px;cursor:pointer;display:flex;align-items:center;background-color:var(--blockui-select-background-color);border:none;outline:none;border-top:var(--blockui-select-border);color:var(--blockui-select-primary-color);font-family:var(--blockui-select-font-family),sans-serif;font-size:var(--blockui-select-font-size)}button.selected{background-color:var(--blockui-select-option-selected-background-color);color:var(--blockui-select-option-selected-color)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'block-select-option', imports: [], template: "<button [classList]=\"selected ? 'selected' : ''\" (click)=\"selectOption()\">{{ label }}</button>\r\n", styles: ["button{width:100%;padding:8px;cursor:pointer;display:flex;align-items:center;background-color:var(--blockui-select-background-color);border:none;outline:none;border-top:var(--blockui-select-border);color:var(--blockui-select-primary-color);font-family:var(--blockui-select-font-family),sans-serif;font-size:var(--blockui-select-font-size)}button.selected{background-color:var(--blockui-select-option-selected-background-color);color:var(--blockui-select-option-selected-color)}\n"] }]
}], propDecorators: { label: [{
type: Input
}], value: [{
type: Input
}], selected: [{
type: Input
}], optionSelected: [{
type: Output
}] } });
class SelectComponent {
value = '';
placeholder = 'Select an option';
multiple = false;
noResultsText = 'No matching options found';
optionsSelected = new EventEmitter();
_selectedOptions = [];
options;
isOpen = false;
filterText = '';
filteredOptions = [];
ngAfterContentInit() {
this.options.forEach(option => {
option.optionSelected.subscribe((value) => {
this.selectOption(value);
});
});
this.filteredOptions = this.options.toArray();
}
selectOption(value) {
this.options.forEach(option => {
if (this.multiple) {
if (option.value === value) {
option.selected = !option.selected;
if (option.selected) {
this._selectedOptions.push(option);
}
else {
const index = this._selectedOptions.indexOf(option);
if (index > -1) {
this._selectedOptions.splice(index, 1);
}
}
}
}
else {
option.selected = (option.value === value);
if (option.selected) {
this._selectedOptions = [option];
this.isOpen = false;
}
}
});
this.value = "";
this._selectedOptions.forEach((option) => {
this.value += option.label + (this.multiple ? ', ' : '');
});
if (this.multiple && this.value.length > 0) {
this.value = this.value.slice(0, -2);
}
this.optionsSelected.emit([...this._selectedOptions]);
}
toggleOptionsDropdown() {
this.isOpen = !this.isOpen;
if (this.isOpen) {
this.filterText = "";
this.filterOptions();
}
}
onInputChange(event) {
this.filterText = event.target.value;
if (!this.isOpen)
this.isOpen = true;
this.filterOptions();
}
onInputClick() {
this.isOpen = true;
this.filterText = "";
this.value = "";
this.filterOptions();
}
filterOptions() {
if (this.filterText.trim() === "") {
this.filteredOptions = this.options.toArray();
}
else {
const searchText = this.filterText.toLowerCase();
this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(searchText) ||
option.value.toLowerCase().includes(searchText));
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectComponent, isStandalone: true, selector: "block-select", inputs: { value: "value", placeholder: "placeholder", multiple: "multiple", noResultsText: "noResultsText" }, outputs: { optionsSelected: "optionsSelected" }, queries: [{ propertyName: "options", predicate: SelectOptionComponent }], ngImport: i0, template: "<div class=\"select-wrapper\">\r\n <div [classList]=\"isOpen ? 'select-container container-open' : 'select-container'\">\r\n <input type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"onInputChange($event)\"\r\n (click)=\"onInputClick()\">\r\n <button (click)=\"toggleOptionsDropdown()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"down-arrow\" [classList]=\"isOpen ? 'open' : ''\">\r\n <g>\r\n <path d=\"M12 17a1.72 1.72 0 0 1-1.33-.64l-4.21-5.1a2.1 2.1 0 0 1-.26-2.21A1.76 1.76 0 0 1 7.79 8h8.42a1.76 1.76 0 0 1 1.59 1.05 2.1 2.1 0 0 1-.26 2.21l-4.21 5.1A1.72 1.72 0 0 1 12 17z\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"select-options-container\" *ngIf=\"isOpen\">\r\n <div *ngIf=\"filteredOptions.length === 0\" class=\"no-results\">\r\n {{ noResultsText }}\r\n </div>\r\n\r\n <ng-container *ngIf=\"filterText === ''; else filtered\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n <ng-template #filtered>\r\n <button *ngFor=\"let option of filteredOptions\"\r\n [classList]=\"option.selected ? 'option-item selected' : 'option-item'\"\r\n (click)=\"selectOption(option.value)\">\r\n {{ option.label }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".select-container{position:relative;width:var(--blockui-select-width);display:flex;align-items:center;justify-content:space-between;border:var(--blockui-select-border);border-radius:var(--blockui-select-border-radius);background-color:var(--blockui-select-background-color)}.select-container input{font-size:var(--blockui-select-font-size);border:none;outline:none;width:100%;height:100%;padding:8px 0 8px 8px;border-radius:var(--blockui-select-border-radius);background-color:transparent}.select-container button{background-color:transparent;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center}.select-container button svg{width:20px;height:20px;fill:var(--blockui-select-secondary-color)}.select-container button svg.open{transform:rotate(180deg)}.select-container.container-open{border-bottom-left-radius:0;border-bottom-right-radius:0}.select-options-container{width:var(--blockui-select-width);border:var(--blockui-select-border);border-top:none;max-height:200px;overflow-y:auto}.no-results{padding:8px;text-align:center;color:var(--blockui-select-secondary-color);font-style:italic}.option-item{width:100%;padding:8px;cursor:pointer;display:flex;align-items:center;background-color:var(--blockui-select-background-color);border:none;outline:none;border-top:var(--blockui-select-border);color:var(--blockui-select-primary-color);font-family:var(--blockui-select-font-family),sans-serif;font-size:var(--blockui-select-font-size);text-align:left}.option-item.selected{background-color:var(--blockui-select-option-selected-background-color);color:var(--blockui-select-option-selected-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'block-select', imports: [
NgIf,
NgForOf
], template: "<div class=\"select-wrapper\">\r\n <div [classList]=\"isOpen ? 'select-container container-open' : 'select-container'\">\r\n <input type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"onInputChange($event)\"\r\n (click)=\"onInputClick()\">\r\n <button (click)=\"toggleOptionsDropdown()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"down-arrow\" [classList]=\"isOpen ? 'open' : ''\">\r\n <g>\r\n <path d=\"M12 17a1.72 1.72 0 0 1-1.33-.64l-4.21-5.1a2.1 2.1 0 0 1-.26-2.21A1.76 1.76 0 0 1 7.79 8h8.42a1.76 1.76 0 0 1 1.59 1.05 2.1 2.1 0 0 1-.26 2.21l-4.21 5.1A1.72 1.72 0 0 1 12 17z\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"select-options-container\" *ngIf=\"isOpen\">\r\n <div *ngIf=\"filteredOptions.length === 0\" class=\"no-results\">\r\n {{ noResultsText }}\r\n </div>\r\n\r\n <ng-container *ngIf=\"filterText === ''; else filtered\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n <ng-template #filtered>\r\n <button *ngFor=\"let option of filteredOptions\"\r\n [classList]=\"option.selected ? 'option-item selected' : 'option-item'\"\r\n (click)=\"selectOption(option.value)\">\r\n {{ option.label }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".select-container{position:relative;width:var(--blockui-select-width);display:flex;align-items:center;justify-content:space-between;border:var(--blockui-select-border);border-radius:var(--blockui-select-border-radius);background-color:var(--blockui-select-background-color)}.select-container input{font-size:var(--blockui-select-font-size);border:none;outline:none;width:100%;height:100%;padding:8px 0 8px 8px;border-radius:var(--blockui-select-border-radius);background-color:transparent}.select-container button{background-color:transparent;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center}.select-container button svg{width:20px;height:20px;fill:var(--blockui-select-secondary-color)}.select-container button svg.open{transform:rotate(180deg)}.select-container.container-open{border-bottom-left-radius:0;border-bottom-right-radius:0}.select-options-container{width:var(--blockui-select-width);border:var(--blockui-select-border);border-top:none;max-height:200px;overflow-y:auto}.no-results{padding:8px;text-align:center;color:var(--blockui-select-secondary-color);font-style:italic}.option-item{width:100%;padding:8px;cursor:pointer;display:flex;align-items:center;background-color:var(--blockui-select-background-color);border:none;outline:none;border-top:var(--blockui-select-border);color:var(--blockui-select-primary-color);font-family:var(--blockui-select-font-family),sans-serif;font-size:var(--blockui-select-font-size);text-align:left}.option-item.selected{background-color:var(--blockui-select-option-selected-background-color);color:var(--blockui-select-option-selected-color)}\n"] }]
}], propDecorators: { value: [{
type: Input
}], placeholder: [{
type: Input
}], multiple: [{
type: Input
}], noResultsText: [{
type: Input
}], optionsSelected: [{
type: Output
}], options: [{
type: ContentChildren,
args: [SelectOptionComponent]
}] } });
class VideoComponent {
videoUrl = '';
autoPlay = false;
controls = true;
loop = false;
header = false;
videoElement = null;
isPlaying = false;
isMuted = false;
isFullScreen = false;
volume = 100;
time = '0:00 / 0:00';
progress = 0;
ngAfterViewInit() {
this.videoElement = document.querySelector('video');
this.time = this.getVideoTime();
if (this.autoPlay) {
if (this.videoElement) {
this.videoElement.addEventListener('loadeddata', () => {
setTimeout(() => {
this.togglePlay();
}, 1000);
});
}
}
document.addEventListener('keydown', async (event) => {
if (event.key === 'f') {
await this.toggleFullScreen();
}
else if (event.key === ' ') {
event.preventDefault();
this.togglePlay();
}
else if (event.key === 'm') {
this.toggleMute();
}
else if (event.key === 'ArrowUp') {
if (this.videoElement && document.activeElement === this.videoElement) {
event.preventDefault();
this.volume = Math.min(this.volume + 10, 100);
this.videoElement.volume = this.volume / 100;
}
}
else if (event.key === 'ArrowDown') {
if (this.videoElement && document.activeElement === this.videoElement) {
event.preventDefault();
this.volume = Math.max(this.volume - 10, 0);
this.videoElement.volume = this.volume / 100;
}
}
else if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && document.activeElement === this.videoElement) {
if (this.videoElement) {
const currentTime = this.videoElement.currentTime;
const duration = this.videoElement.duration;
if (event.key === 'ArrowLeft') {
this.videoElement.currentTime = Math.max(currentTime - 5, 0);
}
else if (event.key === 'ArrowRight') {
this.videoElement.currentTime = Math.min(currentTime + 5, duration);
}
this.update();
}
}
});
}
togglePlay() {
this.isPlaying = !this.isPlaying;
if (this.videoElement) {
if (this.isPlaying) {
this.videoElement.play();
}
else {
this.videoElement.pause();
}
this.mouseMove(new MouseEvent('mousemove'));
}
}
toggleMute() {
this.isMuted = !this.isMuted;
if (this.videoElement) {
if (this.isMuted) {
this.videoElement.muted = true;
this.videoElement.volume = 0;
}
else {
this.videoElement.muted = false;
this.videoElement.volume = this.volume;
}
}
}
async toggleFullScreen() {
this.isFullScreen = !this.isFullScreen;
const videoElement = document.querySelector('.video-wrapper');
if (this.isFullScreen) {
if (videoElement) {
await videoElement.requestFullscreen();
}
}
else {
if (document.fullscreenElement) {
await document.exitFullscreen();
document.body.style.cursor = 'default';
}
}
}
setVolume(event) {
const inputElement = event.target;
const value = parseInt(inputElement.value, 10);
this.volume = value;
if (this.videoElement) {
if (value === 0 && !this.isMuted) {
this.isMuted = true;
this.videoElement.muted = true;
}
else if (value > 0 && this.isMuted) {
this.isMuted = false;
this.videoElement.muted = false;
this.videoElement.volume = value / 100;
}
}
}
getVideoTime() {
if (this.videoElement) {
const currentTime = this.videoElement.currentTime;
const duration = this.videoElement.duration;
if (isNaN(duration) || duration === 0) {
return '0:00 / 0:00';
}
return `${this.formatTime(currentTime)} / ${this.formatTime(duration)}`;
}
return '0:00 / 0:00';
}
formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}
setProgress(event) {
const inputElement = event.target;
const value = parseFloat(inputElement.value);
if (this.videoElement) {
this.videoElement.currentTime = (value / 100) * this.videoElement.duration;
}
this.update();
}
getProgress() {
if (this.videoElement && this.videoElement.duration > 0) {
return (this.videoElement.currentTime / this.videoElement.duration) * 100;
}
return 0;
}
update() {
if (this.videoElement) {
this.time = this.getVideoTime();
this.isPlaying = !this.videoElement.paused;
this.isMuted = this.videoElement.muted;
this.volume = Math.round(this.videoElement.volume * 100);
this.progress = this.getProgress();
const progress = document.querySelector(".progress");
if (progress) {
progress.style.width = `${this.progress}%`;
}
}
}
lastMouseX = 0;
lastMouseY = 0;
mouseMove(event) {
if (this.videoElement) {
const overlay = document.querySelector('.video-overlay');
if (overlay) {
overlay.style.opacity = '1';
}
if (this.header) {
document.querySelector('.video-header').style.opacity = '1';
}
document.body.style.cursor = 'default';
if (!this.isPlaying)
return;
this.lastMouseX = event.clientX;
this.lastMouseY = event.clientY;
setTimeout(() => {
if (this.lastMouseX === event.clientX && this.lastMouseY === event.clientY) {
if (overlay) {
overlay.style.opacity = '0';
}
if (this.header) {
document.querySelector('.video-header').style.opacity = '0';
}
if (document.fullscreenEnabled && this.isFullScreen) {
document.body.style.cursor = 'none';
}
}
}, 1500);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VideoComponent, isStandalone: true, selector: "block-video", inputs: { videoUrl: "videoUrl", autoPlay: "autoPlay", controls: "controls", loop: "loop", header: "header" }, ngImport: i0, template: "<div class=\"video-wrapper\">\r\n <div class=\"video-header\" *ngIf=\"header\">\r\n <ng-content></ng-content>\r\n </div>\r\n <video [src]=\"videoUrl\" [loop]=\"loop\" [autoplay]=\"autoPlay\" [controls]=\"false\" (timeupdate)=\"update()\" (mousemove)=\"mouseMove($event)\" (mouseleave)=\"mouseMove($event)\" (click)=\"togglePlay()\"></video>\r\n <div class=\"video-overlay\" *ngIf=\"controls\">\r\n <div class=\"progress-bar-wrapper\">\r\n <input class=\"progress-bar\" type=\"range\" min=\"0\" max=\"100\" [value]=\"progress\" (input)=\"setProgress($event)\" />\r\n <div class=\"progress-bar-background\">\r\n <div class=\"progress\"></div>\r\n </div>\r\n </div>\r\n <div class=\"video-controls\">\r\n <button (click)=\"togglePlay()\">\r\n <ng-container *ngIf=\"isPlaying; else pause\">\r\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M31 19V80M69 19V80\" stroke=\"white\" stroke-width=\"20\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n <ng-template #pause>\r\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M80.169 46.4545C82.6103 47.808 82.6103 51.192 80.169 52.5455L22.493 84.5236C20.0516 85.8772 17 84.1852 17 81.4781V17.5219C17 14.8148 20.0516 13.1228 22.493 14.4764L80.169 46.4545Z\" fill=\"white\"/>\r\n </svg>\r\n </ng-template>\r\n </button>\r\n <button (click)=\"toggleMute()\" class=\"mute-btn\">\r\n <ng-container *ngIf=\"isMuted; else unmute\">\r\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 35.8462V63.1538H25.3869L47.236 85V14L25.3869 35.8462H9Z\" fill=\"white\"/>\r\n <path d=\"M59.2426 38L84.0172 62.7746M59 62.7746L83.7746 38\" stroke=\"white\" stroke-width=\"6\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n <ng-template #unmute>\r\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 35.8462V63.1538H25.3869L47.236 85V14L25.3869 35.8462H9Z\" fill=\"white\"/>\r\n <path d=\"M54.2795 32C56.5919 32 58.8817 32.4527 61.0181 33.3321C63.1544 34.2116 65.0956 35.5006 66.7307 37.1256C68.3658 38.7507 69.6629 40.6798 70.5478 42.803C71.4327 44.9262 71.8882 47.2019 71.8882 49.5C71.8882 51.7981 71.4327 54.0738 70.5478 56.197C69.6629 58.3202 68.3658 60.2493 66.7307 61.8744C65.0956 63.4994 63.1544 64.7884 61.0181 65.6679C58.8817 66.5473 56.5919 67 54.2795 67V32Z\" fill=\"white\"/>\r\n <path d=\"M54.2795 14C58.9704 14 63.6153 14.9182 67.9491 16.7023C72.283 18.4863 76.2207 21.1012 79.5377 24.3977C82.8547 27.6942 85.4858 31.6077 87.2809 35.9147C89.0761 40.2218 90 44.8381 90 49.5C90 54.1619 89.0761 58.7782 87.2809 63.0853C85.4858 67.3923 82.8547 71.3058 79.5377 74.6023C76.2207 77.8988 72.2829 80.5137 67.9491 82.2977C63.6153 84.0818 58.9704 85 54.2795 85V73.995C57.5162 73.995 60.7212 73.3614 63.7116 72.1304C66.7019 70.8994 69.419 69.0952 71.7077 66.8206C73.9964 64.546 75.8119 61.8457 77.0505 58.8738C78.2891 55.902 78.9266 52.7167 78.9266 49.5C78.9266 46.2833 78.2891 43.098 77.0505 40.1262C75.8119 37.1543 73.9964 34.454 71.7077 32.1794C69.419 29.9048 66.7019 28.1006 63.7116 26.8696C60.7212 25.6386 57.5162 25.005 54.2795 25.005V14Z\" fill=\"white\"/>\r\n </svg>\r\n </ng-template>\r\n <div class=\"volume-bar\">\r\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"volume\" (input)=\"setVolume($event)\" />\r\n </div>\r\n </button>\r\n <span>{{ getVideoTime() }}</span>\r\n <button (click)=\"toggleFullScreen()\">\r\n <ng-container *ngIf=\"isFullScreen; else exitFullScreen\">\r\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M36 14C36 14 36 20 36 28C36 36 36 36 28 36H14\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n <path d=\"M14 63C14 63 20 63 28 63C36 63 36 63 36 71V85\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n <path d=\"M63 85C63 85 63 79 63 71C63 63 63 63 71 63H85\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n <path d=\"M85 36C85 36 79 36 71 36C63 36 63 36 63 28V14\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n <ng-template #exitFullScreen>\r\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M14 36C14 36 14 30 14 22C14 14 14 14 22 14H36\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n <path d=\"M36 85C36 85 30 85 22 85C14 85 14 85 14 77L14 63\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n <path d=\"M85 63C85 63 85 69 85 77C85 85 85 85 77 85H63\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n <path d=\"M63 14C63 14 69 14 77 14C85 14 85 14 85 22V36\" stroke=\"white\" stroke-width=\"10\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-templa