croco-html 0.1.1 → 0.1.2

package/lib/services/files-query.service.d.ts

@@ -0,0 +1,42 @@
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import * as i0 from "@angular/core";
+export interface GetListResult<T> {
+    totalCount: number;
+    list: Array<T>;
+}
+export interface DbFileNoDataWithRelations {
+    id: number;
+    fileName: string;
+    relations: Array<FileRelationModel>;
+}
+export interface FileRelationModel {
+    entityTypeFullName: string;
+    entityKey: string;
+    relationName: string;
+    relationValue: string;
+    relationCustomData: string;
+}
+export interface SearchFiles {
+    fileName: string;
+    q: string;
+    count: number | null;
+    offSet: number;
+}
+export interface GetListSearchModel {
+    count: number | null;
+    offSet: number;
+}
+export interface FileNameAndIdModel {
+    fileId: number;
+    fileName: string;
+}
+export declare class FilesQueryService {
+    private _httpClient;
+    _baseControllerUrl: string;
+    constructor(_httpClient: HttpClient, baseUrl: string);
+    getFilesWithRelations(model: SearchFiles): Observable<GetListResult<DbFileNoDataWithRelations>>;
+    getFiles(model: SearchFiles): Observable<GetListResult<FileNameAndIdModel>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilesQueryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FilesQueryService>;
+}

package/package.json

@@ -1,15 +1,35 @@
-{
-  "name": "croco-html",
-  "version": "0.1.1",
-  "peerDependencies": {
-    "@angular/common": ">=13.3.11",
-    "@angular/core": ">=13.3.11",
-    "@angular/material": ">=13.3.9",
-    "@angular/cdk": ">=13.3.9",
-    "ngx-clipboard": ">=15.1.0",
-    "@ng-select/ng-select": ">=9.0.2"
-  },
-  "dependencies": {
-    "tslib": ">=2.2.0"
-  }
+{
+  "name": "croco-html",
+  "version": "0.1.2",
+  "peerDependencies": {
+    "@angular/common": ">=13.3.11",
+    "@angular/core": ">=13.3.11",
+    "@angular/material": ">=13.3.9",
+    "@angular/cdk": ">=13.3.9",
+    "ngx-clipboard": ">=15.1.0",
+    "@ng-select/ng-select": ">=9.0.2"
+  },
+  "dependencies": {
+    "tslib": ">=2.2.0"
+  },
+  "module": "fesm2015/croco-html.mjs",
+  "es2020": "fesm2020/croco-html.mjs",
+  "esm2020": "esm2020/croco-html.mjs",
+  "fesm2020": "fesm2020/croco-html.mjs",
+  "fesm2015": "fesm2015/croco-html.mjs",
+  "typings": "croco-html.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./croco-html.d.ts",
+      "esm2020": "./esm2020/croco-html.mjs",
+      "es2020": "./fesm2020/croco-html.mjs",
+      "es2015": "./fesm2015/croco-html.mjs",
+      "node": "./fesm2015/croco-html.mjs",
+      "default": "./fesm2020/croco-html.mjs"
+    }
+  },
+  "sideEffects": false
 }

package/{src/public-api.ts → public-api.d.ts}

@@ -1,7 +1,3 @@
-/*
- * Public API Surface of croco-html
- */
-
 export * from './lib/components';
 export * from './lib/pipes';
 export * from './lib/extensions';

package/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/croco-html'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/croco-html",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/components/add-files-btn/add-files-btn.component.html

@@ -1,14 +0,0 @@
-<div [hidden]="true">
-    <app-upload-files-btn #fakeBtn 
-        (onFilesUploaded)="filesUploadedHandler($event)" 
-        [btnText]="'Добавить изображения'"
-        [createLocalCopiesNow]="true"
-        (postFilesStarted)="postFilesStartedEventHandler($event)" 
-        [extAccepts]="'image/*'"></app-upload-files-btn>
-</div>
-
-<div>
-    <button class="w-100" 
-        (click)="handleClick()"
-        mat-stroked-button>Добавить изображения</button>
-</div>

package/src/lib/components/add-files-btn/add-files-btn.component.ts

@@ -1,61 +0,0 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { FileImageTagDataConsts } from '../../extensions/ImageMethods';
-import { HtmlBodyTag } from '../../models/models';
-import { BaseApiResponseWithFilesIds } from '../../services/file-upload.service';
-import { FilePostingStarted, UploadFilesBtnComponent } from '../upload-files-btn/upload-files-btn.component';
-
-@Component({
-  selector: 'croco-add-files-btn',
-  templateUrl: './add-files-btn.component.html',
-  styleUrls: ['./add-files-btn.component.css']
-})
-export class AddFilesBtnComponent implements OnInit {
-
-  @Output()
-  postFilesStarted = new EventEmitter<FilePostingStarted>();
-
-  @ViewChild("fakeBtn")
-  fakeBtn!: UploadFilesBtnComponent;
-
-  fileIds:number[] = [];
-
-  constructor() { }
-
-  @Output()
-  filesTagsReady = new EventEmitter<HtmlBodyTag[]>();
-
-  postFilesStartedEventHandler(data: FilePostingStarted){
-    this.postFilesStarted.emit(data);
-  }
-
-  filesUploadedHandler(data: BaseApiResponseWithFilesIds){
-    this.fileIds = data.responseObject;
-
-    let fileTags:HtmlBodyTag[] = [];
-
-    for(let i=0; i < this.fileIds.length; i++){
-      let fileTag: HtmlBodyTag = {
-        presentOrEdit: true,
-        tagDescription: {
-          tag: FileImageTagDataConsts.TagName,
-          displayValue: "Изображение"
-        },
-        attributes: {
-          [FileImageTagDataConsts.FileIdAttrName]: this.fileIds[i]
-        },
-        innerHtml: ""
-      };
-
-      fileTags.push(fileTag);
-    }
-
-    this.filesTagsReady.emit(fileTags);
-  }
-
-  handleClick(){
-    this.fakeBtn.clickFileInput();
-  }
-
-  ngOnInit(): void {
-  }
-}

package/src/lib/components/editor/external-video-block/external-video-block.component.html

@@ -1,27 +0,0 @@
-<div *ngIf="tag.presentOrEdit">
-    
-    <div>
-        Ссылка на YouTube: {{data.youtubeLink}}
-    </div>
-
-    <div style="height: 10px;"></div>
-
-    <croco-html-xml-tag-external-video [tagData]="tagData">
-    </croco-html-xml-tag-external-video>
-</div>
-
-<div *ngIf="!tag.presentOrEdit">
-    <div>
-        <form [formGroup]="myForm">
-            <mat-form-field class="w-100">
-                <input matInput placeholder="Ссылка на YouTube"
-                    new-autocomplete="off"
-                    autocomplete="off"
-                    formControlName="youtubeLink"
-                    [(ngModel)]="data.youtubeLink"
-                    (ngModelChange)="linkChanged()">
-            </mat-form-field>
-        </form>
-    </div>
-</div>
-

package/src/lib/components/editor/external-video-block/external-video-block.component.ts

@@ -1,45 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { ExternalVideoTagData, ExternalVideoSupportedTypes } from '../../../extensions/VideoMethods';
-import { HtmlBodyTag } from '../../../models/models';
-
-@Component({
-  selector: 'croco-html-external-video-block',
-  templateUrl: './external-video-block.component.html',
-  styleUrls: ['./external-video-block.component.css']
-})
-export class ExternalVideoBlockComponent implements OnInit {
-
-  @Input()
-  tag: HtmlBodyTag;
-
-  @Output()
-  onTagUpdated = new EventEmitter<HtmlBodyTag>();
-
-  myForm = new FormGroup({
-    youtubeLink: new FormControl()
-  });
-
-  defaultLink = "https://youtu.be/jzBneaWSswY";
-
-  data = {
-    youtubeLink: this.defaultLink
-  }
-
-  tagData: ExternalVideoTagData = {
-    link: this.defaultLink,
-    type: ExternalVideoSupportedTypes.Youtube
-  };
-
-  linkChanged(){
-    this.tagData.link = this.data.youtubeLink;
-    this.tag.attributes = this.tagData;
-  }
-
-  ngOnInit(): void {
-    this.linkChanged();
-
-    this.tagData = this.tag.attributes as ExternalVideoTagData;
-    this.data.youtubeLink = this.tagData.link;
-  }
-}

package/src/lib/components/editor/html-raw-editor/html-raw-editor.component.html

@@ -1,17 +0,0 @@
-<div *ngIf="tag.presentOrEdit">
-    <div [innerHTML]="tag.innerHtml"></div>
-</div>
-
-<div *ngIf="!tag.presentOrEdit">
-    <div style="height: 10px;">
-    </div>
-    <div>
-        <mat-form-field class="w-100">
-            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                placeholder="Внутренняя разметка тега"
-                [(ngModel)]="tag.innerHtml"></textarea>
-        </mat-form-field>
-    </div>
-</div>
-

package/src/lib/components/editor/html-raw-editor/html-raw-editor.component.ts

@@ -1,22 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { HtmlBodyTag } from '../../../models/models';
-
-@Component({
-  selector: 'croco-html-html-raw-editor',
-  templateUrl: './html-raw-editor.component.html',
-  styleUrls: ['./html-raw-editor.component.css']
-})
-export class HtmlRawEditorComponent implements OnInit {
-
-  @Input()
-  tag: HtmlBodyTag;
-
-  @Output()
-  onTagUpdated = new EventEmitter<HtmlBodyTag>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/components/editor/image-editor/image-editor.component.css

@@ -1,7 +0,0 @@
-.error-block{
-    background-color: rgb(243 35 35);
-    color: white;
-    text-align: center;
-    border-radius: 10px;
-    padding: 10px;
-}

package/src/lib/components/editor/image-editor/image-editor.component.html

@@ -1,54 +0,0 @@
-<div>
-    <div style="height: 10px;">
-    </div>
-    
-    <div *ngIf="hasImageError" class="error-block">
-        Изображение не найдено по указанному идентификатору, возможно файл не существует или отсутствует на сервере.
-    </div>
-
-    <div *ngIf="hasFileId() && !hasImageError">
-        <img class="mx-auto d-block img-fluid" [src]="getSrc()" (error)="onErrorHandler()"/>
-    </div>
-
-    <div *ngIf="!hasFileId()">
-        <h5>[Изображение не выбрано]</h5>
-    </div>
-</div>
-
-<div *ngIf="!tag.presentOrEdit">
-    <div style="height: 10px;"></div>
-
-    <div style="overflow-x:auto;">
-        <mat-button-toggle-group [(ngModel)]="searchOrEdit">
-            <mat-button-toggle value="search">
-                Искать файл <mat-icon>search</mat-icon>
-            </mat-button-toggle>
-            <mat-button-toggle value="edit">
-                Указать по идентификатору <mat-icon>settings</mat-icon>
-            </mat-button-toggle>
-        </mat-button-toggle-group>
-    </div>
-    
-
-    <div style="height: 10px;"></div>
-
-    <div [hidden]="searchOrEdit !== 'search'">
-        <croco-html-file-id-select
-         [labelText]="'Выбрать файл'"
-         [(fileId)]="tag.attributes['file-id']"
-         (onFileIdChanged)="onFileIdChanged($event)">
-        </croco-html-file-id-select>
-    </div>
-
-    <div [hidden]="searchOrEdit !== 'edit'">
-        <form [formGroup]="myForm">
-            <mat-form-field class="w-100">
-                <input matInput placeholder="Идентификатор файла" new-autocomplete="off" autocomplete="off"
-                    formControlName="fileId" 
-                    type="number"
-                    [(ngModel)]="tag.attributes['file-id']"
-                    (ngModelChange)="removeImageError()">
-            </mat-form-field>
-        </form>
-    </div>
-</div>

package/src/lib/components/editor/image-editor/image-editor.component.ts

@@ -1,52 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { ImageMethods, FileImageTagDataConsts } from '../../../extensions/ImageMethods';
-import { HtmlBodyTag } from '../../../models/models';
-
-@Component({
-  selector: 'croco-html-image-editor',
-  templateUrl: './image-editor.component.html',
-  styleUrls: ['./image-editor.component.css']
-})
-export class ImageEditorComponent implements OnInit {
-
-  hasImageError = false;
-  searchOrEdit = "search";
-
-  @Input()
-  tag: HtmlBodyTag;
-
-  myForm = new FormGroup({
-    fileId:new FormControl()
-  });
-
-  onErrorHandler(){
-    this.hasImageError = true;
-  }
-
-  @Output()
-  onTagUpdated = new EventEmitter<HtmlBodyTag>();
-
-  constructor() { }
-
-  getSrc(){
-    return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
-  }
-
-  hasFileId(){
-    return this.tag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && !isNaN(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
-  }
-
-  onFileIdChanged(fileId:number){
-    this.tag.attributes[FileImageTagDataConsts.FileIdAttrName] = fileId;
-    this.removeImageError();
-  }
-
-  removeImageError(){
-    this.hasImageError = false;
-  }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/components/editor/index.ts

@@ -1,7 +0,0 @@
-export * from './external-video-block/external-video-block.component'
-export * from './html-raw-editor/html-raw-editor.component'
-export * from './image-editor/image-editor.component'
-export * from './main-editor/main-editor.component'
-export * from './main-editor-block/main-editor-block.component'
-export * from './text-editor/text-editor.component'
-export * from './visual-editor/visual-editor.component'

package/src/lib/components/editor/main-editor/main-editor.component.css

@@ -1,48 +0,0 @@
-.example-list {
-  width: 500px;
-  max-width: 100%;
-  border: solid 1px #ccc;
-  min-height: 60px;
-  display: block;
-  background: white;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.example-box:last-child {
-  border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/editor/main-editor/main-editor.component.html

@@ -1,39 +0,0 @@
-<mat-tab-group>
-  <mat-tab label="Визуальный редактор">
-
-    <div style="height: 20px;"></div>
-
-    <croco-visual-editor #visualEditor
-      [useHtmlRaw]="useHtmlRaw"
-      [html]="html"
-      (onHtmlChanged)="onHtmlChangedHandler($event)"
-      (rendered)="visualEditorRenderedHandler()">
-    </croco-visual-editor>
-
-    <div style="height: 20px;"></div>
-
-  </mat-tab>
-
-  <mat-tab label="Разметка">
-    <div style="height: 10px;"></div>
-    <form *ngIf="visualEditorRendered" [formGroup]="myForm">
-      <mat-form-field class="w-100">
-        <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize"
-          cdkAutosizeMinRows="1"
-          placeholder="Исходный код" formControlName="html" [(ngModel)]="html"
-          (ngModelChange)="textAreaModelChangedHandler()"></textarea>
-      </mat-form-field>
-    </form>
-
-    <button (click)="copyMarkUp()" 
-      mat-raised-button color="primary">
-      Копировать разметку
-    </button>
-  </mat-tab>
-  <mat-tab label="Результат">
-    <mat-card>
-      <croco-html-xml-tag-view [data]="html | topreview">
-      </croco-html-xml-tag-view>
-    </mat-card>
-  </mat-tab>
-</mat-tab-group>

package/src/lib/components/editor/main-editor/main-editor.component.ts

@@ -1,71 +0,0 @@
-import { AfterContentChecked, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { ClipboardService } from 'ngx-clipboard';
-import { VisualEditorComponent } from '../visual-editor/visual-editor.component';
-
-@Component({
-  selector: 'croco-html-main-editor',
-  templateUrl: './main-editor.component.html',
-  styleUrls: ['./main-editor.component.css']
-})
-export class MainEditorComponent implements OnInit, AfterContentChecked {
-
-  visualEditorRendered = false;
-  @ViewChild("visualEditor")
-  visualEditor!: VisualEditorComponent;
-
-  @Input()
-  showMarkUp = true;
-
-  @Input()
-  useHtmlRaw = false;
-
-  myForm = new FormGroup({
-    "html": new FormControl(),
-  });
-
-  @Input()
-  @Output()
-  html: string = "";
-
-  @Output()
-  onHtmlChanged = new EventEmitter<string>();
-
-  constructor(private _clipboardService: ClipboardService,
-    private _snackBar: MatSnackBar,
-    private _cdref: ChangeDetectorRef) { }
-
-  ngAfterContentChecked(): void {
-    this._cdref.detectChanges();
-  }
-
-  visualEditorRenderedHandler(){
-    this.visualEditorRendered = true;
-    this.recalculateBodyTags();
-  }
-
-  onHtmlChangedHandler(html: string) {
-    this.html = html;
-    this.onHtmlChanged.emit(html);
-  }
-
-  textAreaModelChangedHandler(){
-    this.recalculateBodyTags();
-    this.onHtmlChangedHandler(this.html);
-  }
-
-  recalculateBodyTags() {
-    this.visualEditor.html = this.html;
-    this.visualEditor.recalculateBodyTags();
-  }
-
-  copyMarkUp() {
-    this._snackBar.open("Разметка таблицы скопирована в буфер обмена", "Закрыть", { duration: 1500 });
-    this._clipboardService.copy(this.html);
-  }
-
-  ngOnInit(): void {
-  }
-
-}