@stratusjs/angular 0.7.6 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stratusjs/angular",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "This is the angular package for StratusJS.",
   "scripts": {},
   "repository": {

package/src/core/dialog.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dialog.interface.ts"],"names":[],"mappings":"","file":"dialog.interface.js"}

package/src/tree/tree-node.component.html

@@ -71,7 +71,7 @@
         {{node.model.get('url') || node.model.get('route') || 'No route set!'}}
     </small>
 
-    <span class="hover-show position-absolute svg-grey">
+    <span class="hover-box hover-show position-absolute svg-grey">
         <a mat-button
            (click)="openDialogClick(node)"
            (dblclick)="openDialogDblClick(node)">

package/src/tree/tree-node.component.min.html

@@ -1 +1 @@
-<div class="tree-node-content" [class.display-none]="parent && !isExpanded(parent)" [attr.data-id]="node.id" [attr.id]="'node-'+node.id"><a mat-icon-button class="hover-box" *ngIf="!hasChild(node)" disabled="disabled"></a><a mat-icon-button class="hover-box" *ngIf="hasChild(node)" (click)="toggleExpandedClick(node)" (dblclick)="toggleExpandedDblClick(node)" [attr.aria-label]="'toggle ' + getName(node)"><mat-icon class="mat-icon-rtl-mirror">{{isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon></a><mat-icon class="type-icon hover-box" aria-hidden="true" *ngIf="node.model.get('content.contentType.iconResourcePath')" [svgIcon]="getSvg(Stratus.BaseUrl + node.model.get('content.contentType.iconResourcePath')) | async"></mat-icon><mat-icon class="type-icon hover-box" aria-hidden="true" *ngIf="!node.model.get('content.contentType.iconResourcePath')" [svgIcon]="getSvg(Stratus.BaseUrl + 'sitetheorycore/images/menuTypeIcon/default.svg') | async"></mat-icon><span cdkDragPlaceholder class="node-name hover-box" [attr.data-id]="node.id" [attr.id]="'node-'+node.id" [class.visibility-off]="node.model.get('status') === 0" [innerHTML]="getName(node)" (click)="openDialogClick(node)" (dblclick)="openDialogDblClick(node)"></span><small class="hover-box" [class.route-none]="!node.model.get('route')" [class.type-none]="!node.model.get('content.contentType.iconResourcePath')">{{node.model.get('url') || node.model.get('route') || 'No route set!'}} </small><span class="hover-show position-absolute svg-grey"><a mat-button (click)="openDialogClick(node)" (dblclick)="openDialogDblClick(node)"><mat-icon svgIcon="tree_edit" aria-hidden="false" aria-label="Edit Item">Edit</mat-icon></a><a mat-button (click)="destroy()"><mat-icon svgIcon="tree_delete" aria-hidden="false" aria-label="Delete Item">Delete</mat-icon></a><a mat-button [class.visibility-off]="node.model.get('status') === 0" (click)="toggleStatus()"><mat-icon svgIcon="tree_visibility" aria-hidden="false" aria-label="Toggle Visibility">Visibility</mat-icon></a><a mat-button [disabled]="!node.model.id" (click)="addChild()"><mat-icon svgIcon="tree_add" aria-hidden="false" aria-label="Add Child">Add Child</mat-icon></a></span><div cdkDropList [id]="tree.uid + '_node_' + node.id + '_drop_list'" [cdkDropListConnectedTo]="tree.dropLists" [cdkDropListData]="node" [cdkDropListDisabled]="false" (cdkDropListDropped)="tree.onDragDrop($event)" [cdkDropListSortingDisabled]="tree.cdkDropListSortingDisabled" class="tree-node-drop-list"><sa-tree-node cdkDrag *ngFor="let child of node.children" (cdkDragMoved)="tree.onDragMove($event)" [cdkDragData]="child" [tree]="tree" [parent]="node" [node]="child" class="tree-node"></sa-tree-node></div></div>
+<div class="tree-node-content" [class.display-none]="parent && !isExpanded(parent)" [attr.data-id]="node.id" [attr.id]="'node-'+node.id"><a mat-icon-button class="hover-box" *ngIf="!hasChild(node)" disabled="disabled"></a><a mat-icon-button class="hover-box" *ngIf="hasChild(node)" (click)="toggleExpandedClick(node)" (dblclick)="toggleExpandedDblClick(node)" [attr.aria-label]="'toggle ' + getName(node)"><mat-icon class="mat-icon-rtl-mirror">{{isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon></a><mat-icon class="type-icon hover-box" aria-hidden="true" *ngIf="node.model.get('content.contentType.iconResourcePath')" [svgIcon]="getSvg(Stratus.BaseUrl + node.model.get('content.contentType.iconResourcePath')) | async"></mat-icon><mat-icon class="type-icon hover-box" aria-hidden="true" *ngIf="!node.model.get('content.contentType.iconResourcePath')" [svgIcon]="getSvg(Stratus.BaseUrl + 'sitetheorycore/images/menuTypeIcon/default.svg') | async"></mat-icon><span cdkDragPlaceholder class="node-name hover-box" [attr.data-id]="node.id" [attr.id]="'node-'+node.id" [class.visibility-off]="node.model.get('status') === 0" [innerHTML]="getName(node)" (click)="openDialogClick(node)" (dblclick)="openDialogDblClick(node)"></span><small class="hover-box" [class.route-none]="!node.model.get('route')" [class.type-none]="!node.model.get('content.contentType.iconResourcePath')">{{node.model.get('url') || node.model.get('route') || 'No route set!'}} </small><span class="hover-box hover-show position-absolute svg-grey"><a mat-button (click)="openDialogClick(node)" (dblclick)="openDialogDblClick(node)"><mat-icon svgIcon="tree_edit" aria-hidden="false" aria-label="Edit Item">Edit</mat-icon></a><a mat-button (click)="destroy()"><mat-icon svgIcon="tree_delete" aria-hidden="false" aria-label="Delete Item">Delete</mat-icon></a><a mat-button [class.visibility-off]="node.model.get('status') === 0" (click)="toggleStatus()"><mat-icon svgIcon="tree_visibility" aria-hidden="false" aria-label="Toggle Visibility">Visibility</mat-icon></a><a mat-button [disabled]="!node.model.id" (click)="addChild()"><mat-icon svgIcon="tree_add" aria-hidden="false" aria-label="Add Child">Add Child</mat-icon></a></span><div cdkDropList [id]="tree.uid + '_node_' + node.id + '_drop_list'" [cdkDropListConnectedTo]="tree.dropLists" [cdkDropListData]="node" [cdkDropListDisabled]="false" (cdkDropListDropped)="tree.onDragDrop($event)" [cdkDropListSortingDisabled]="tree.cdkDropListSortingDisabled" class="tree-node-drop-list"><sa-tree-node cdkDrag *ngFor="let child of node.children" (cdkDragMoved)="tree.onDragMove($event)" [cdkDragData]="child" [tree]="tree" [parent]="node" [node]="child" class="tree-node"></sa-tree-node></div></div>

package/src/tree/tree.component.css

@@ -33,23 +33,47 @@
   border-bottom: 2px solid #00b7ff !important;
 }
 .tree .tree-node {
-  display: block;
+  display: grid;
+  vertical-align: middle;
+  place-content: center start;
   cursor: move;
 }
 .tree .tree-node a, .tree .tree-node mat-button, .tree .tree-node mat-icon-button {
   cursor: pointer;
 }
+.tree .tree-node .hover-box {
+  padding-right: 0.5rem;
+}
 .tree .tree-node .hover-box:hover ~ .hover-show {
   display: unset;
 }
 .tree .tree-node .hover-show {
   display: none;
+  padding-bottom: 1rem;
+  padding-right: 5rem;
 }
 .tree .tree-node .hover-show:hover {
   display: unset;
 }
 .tree .tree-node .tree-node {
-  padding-left: 40px;
+  padding-left: 2.5rem;
+}
+.tree .tree-node .tree-node .tree-node-content {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.tree .tree-node .tree-node .tree-node-content .node-name {
+  font-size: 10pt;
+}
+.tree .tree-node .tree-node-content {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-right: 0.5rem;
+}
+.tree .tree-node .tree-node-content .node-name {
+  font-weight: bold;
+  font-size: 15pt;
+  padding-right: 0.5rem;
 }
 .tree .tree-node .tree-node-content .visibility-off {
   opacity: 0.5;
@@ -67,6 +91,27 @@
 .tree .tree-node .tree-node-content .mat-button-disabled {
   height: 24px;
 }
+.tree .tree-node.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.tree .cdk-drop-list-dragging .hover-show {
+  display: none !important;
+}
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 0 !important;
+}
+.cdk-drag-preview .hover-show {
+  display: none !important;
+}
+.cdk-drag-placeholder {
+  opacity: 50%;
+}
+.cdk-drag-placeholder .hover-show {
+  display: none !important;
+}
+
 .tree-dialog-content .form-field {
   width: 320px;
 }

package/src/tree/tree.component.css.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/angular/src/tree/tree.component.scss"],"names":[],"mappings":"AAAA;AAMI;EACE;;AAIF;EACE;;AAKF;EACE;;AAIF;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;;AAKJ;EAEE;EASA;;AACA;EACE;;AAIA;EACE;;AAEF;EACE;;AACA;EACE;;AAKN;EACE;;AAIA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AA4GN;EACE;;AAEF;EACE;;AAQA;EAEE;;AAKF;EACE","file":"tree.component.css","sourcesContent":["/* Based on Angular Material 8+ */\n.tree {\n  //margin: 0 25px 25px 0;\n  //display: inline-block;\n  //vertical-align: top;\n  .display {\n    &-none {\n      display: none;\n    }\n  }\n  .position {\n    &-absolute {\n      position: absolute;\n    }\n  }\n  // SVG Colors\n  .svg-grey {\n    svg g {\n      fill: #666666;\n    }\n  }\n  .visibility-off {\n    svg g {\n      fill: #FF5B3A;\n    }\n  }\n  .full {\n    &-width {\n      width: 100%;\n    }\n  }\n  ul, li {\n    margin-top: 0;\n    margin-bottom: 0;\n    list-style-type: none;\n  }\n  .float-right {\n    position: relative;\n    float: right;\n  }\n  .drop {\n    &-inside {\n      border: 2px solid #00b7ff !important;\n      //padding-top: 5px;\n      //padding-bottom: 5px;\n    }\n    &-before {\n      border-top: 2px solid #00b7ff !important;\n      //padding-top: 5px;\n      //padding-bottom: 5px;\n    }\n    &-after {\n      border-bottom: 2px solid #00b7ff !important;\n      //padding-top: 5px;\n      //padding-bottom: 5px;\n    }\n  }\n  .tree-node {\n    // We have to use 'block' since 'flex' makes the Drag & Drop even more inaccurate\n    display: block;\n    //padding: 20px 10px;\n    //border-bottom: solid 1px #ccc;\n    //color: rgba(0, 0, 0, 0.87);\n    //display: flex;\n    //flex-direction: row;\n    //align-items: center;\n    //justify-content: space-between;\n    //box-sizing: border-box;\n    cursor: move;\n    a, mat-button, mat-icon-button {\n      cursor: pointer;\n    }\n    // only show certain elements on hover\n    .hover {\n      &-box:hover ~ .hover-show {\n        display: unset;\n      }\n      &-show {\n        display: none;\n        &:hover {\n          display: unset;\n        }\n      }\n    }\n\n    .tree-node { // be explicit for child padding\n      padding-left: 40px;\n      //border-left: dashed 1px #222222;\n    }\n    .tree-node-content {\n      .visibility-off {\n        opacity: 0.5;\n      }\n      .type-icon {\n        height: 15px;\n        width: 22px;\n      }\n      .type-none {\n        padding-left: 6px;\n      }\n      .route-none {\n        color: #FF5B3A;\n      }\n      .mat-button-disabled {\n        height: 24px;\n      }\n    }\n    &-drag {\n      &-preview {\n        //box-sizing: border-box;\n        //border-radius: 4px;\n        //padding: 10px;\n        //box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);\n      }\n    }\n    &-drop-list {\n      //border: solid 1px #ccc;\n      //min-height: 20px;\n      //border-radius: 4px;\n      //overflow: hidden;\n      //display: block;\n    }\n    &.cdk-drop-list-dragging {\n      .tree-node:not(.cdk-drag-placeholder) {\n        //transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n      }\n    }\n    &:last-child {\n      //border: none;\n    }\n  }\n  .cdk {\n    &-drag {\n      &-preview {\n        //box-sizing: border-box;\n        //border-radius: 4px;\n        //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n        //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n        //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n      }\n      &-placeholder {\n        //opacity: 0;\n      }\n      &-animating {\n        //transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n      }\n    }\n    &-drop-list {\n      &-dragging {\n        //min-width: 100px;\n        //min-height: 20px;\n        //border-style: dashed !important;\n        //border-radius: 4px !important;\n        //background: lightgreen !important;\n        //.tree-node-drop-list {\n        //  min-width: 100px;\n        //  min-height: 20px;\n        //  border-style: dashed !important;\n        //  border-radius: 4px !important;\n        //}\n        //&.tree-node-drop-list {\n        //  min-width: 100px;\n        //  min-height: 20px;\n        //  border-style: dashed !important;\n        //  border-radius: 4px !important;\n        //}\n      }\n      &-receiving {\n        //min-width: 100px;\n        //min-height: 20px;\n        //border-style: dashed !important;\n        //border-radius: 4px !important;\n        //background: lightyellow !important;\n        .tree-node-drop-list {\n          //min-width: 100px;\n          //min-height: 20px;\n          //border-style: dashed !important;\n          //border-radius: 4px !important;\n          //background: lightcyan !important;\n        }\n        &.tree-node-drop-list {\n          //min-width: 100px;\n          //min-height: 20px;\n          //border-style: dashed !important;\n          //border-radius: 4px !important;\n          //background: lightsalmon !important;\n        }\n      }\n    }\n  }\n}\n//.tree-node {\n//  z-index: 994;\n//  .tree-node {\n//    z-index: 995;\n//    .tree-node {\n//      z-index: 996;\n//      .tree-node {\n//        z-index: 997;\n//        .tree-node {\n//          z-index: 998;\n//          .tree-node {\n//            z-index: 999;\n//          }\n//        }\n//      }\n//    }\n//  }\n//}\n\n// Tree Dialog\n.tree-dialog-content {\n  .form-field {\n    width: 320px;\n  }\n  .dialog-form {\n    margin-top: 20px;\n  }\n  .radio {\n    &-group {\n      //display: flex;\n      //flex-direction: column;\n      //margin: 15px 0;\n    }\n    &-button {\n      //margin: 5px;\n      padding: 0 5px;\n    }\n  }\n  // SVG Colors\n  .svg-grey {\n    svg g {\n      fill: #666666;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["packages/angular/src/tree/tree.component.scss"],"names":[],"mappings":"AAAA;AAMI;EACE;;AAIF;EACE;;AAKF;EACE;;AAIF;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIF;EACE;;AAKJ;EAKE;EASA;EACA;EAiBA;;AAeA;EACE;;AAIA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAKN;EAEE;;AACA;EACE;EACA;;AACA;EACE;;AAON;EAME;EACA;EACA;;AAPA;EACE;EACA;EACA;;AASF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAmBF;EACE;;AA2CA;EACE;;AAiDN;EACE;EACA;EAIA;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;;AAWN;EACE;;AAEF;EACE;;AAQA;EAEE;;AAKF;EACE","file":"tree.component.css","sourcesContent":["/* Based on Angular Material 8+ */\n.tree {\n  //margin: 0 25px 25px 0;\n  //display: inline-block;\n  //vertical-align: top;\n  .display {\n    &-none {\n      display: none;\n    }\n  }\n  .position {\n    &-absolute {\n      position: absolute;\n    }\n  }\n  // SVG Colors\n  .svg-grey {\n    svg g {\n      fill: #666666;\n    }\n  }\n  .visibility-off {\n    svg g {\n      fill: #FF5B3A;\n    }\n  }\n  .full {\n    &-width {\n      width: 100%;\n    }\n  }\n  ul, li {\n    margin-top: 0;\n    margin-bottom: 0;\n    list-style-type: none;\n  }\n  .float-right {\n    position: relative;\n    float: right;\n  }\n  // Drop Location Borders\n  .drop {\n    &-inside {\n      border: 2px solid #00b7ff !important;\n      //padding-top: 5px;\n      //padding-bottom: 5px;\n    }\n    &-before {\n      border-top: 2px solid #00b7ff !important;\n      //padding-top: 5px;\n      //padding-bottom: 5px;\n    }\n    &-after {\n      border-bottom: 2px solid #00b7ff !important;\n      //padding-top: 5px;\n      //padding-bottom: 5px;\n    }\n  }\n  .tree-node {\n    // We have to use 'block' since 'flex' makes the Drag & Drop even more inaccurate\n    //display: block;\n\n    // Grid works better for alignment and Drag & Drop calculations\n    display: grid;\n\n    // Padding Options\n    //padding-top: .225rem;\n    //padding-bottom: .225rem;\n    //padding: 20px 10px;\n\n    // Height & Alignment\n    //min-height: 2.5rem;\n    vertical-align: middle;\n    place-content: center start;\n\n    // Debug Borders\n    //border: dashed 1px #ccc;\n\n    //color: rgba(0, 0, 0, 0.87);\n\n    // Flex Design (Doesn't work well with Drag & Drop(\n    //display: flex;\n    //flex-direction: row;\n\n    // Flex Alignment\n    //align-items: center;\n    //justify-content: space-between;\n    //box-sizing: border-box;\n\n    // Cursor\n    cursor: move;\n\n    // Alternate Indentation Calculations\n    //&:before {\n    //  position: absolute;\n    //  top: 15px;\n    //  left: 0;\n    //  width: 10px;\n    //  height: 1px;\n    //  margin: auto;\n    //  content: '';\n    //  background-color: #666;\n    //}\n\n    // Material Buttons\n    a, mat-button, mat-icon-button {\n      cursor: pointer;\n    }\n    // only show certain elements on hover\n    .hover {\n      &-box {\n        padding-right: 0.5rem;\n      }\n      &-box:hover ~ .hover-show {\n        display: unset;\n      }\n      &-show {\n        display: none;\n        padding-bottom: 1rem;\n        padding-right: 5rem;\n        &:hover {\n          display: unset;\n        }\n      }\n    }\n\n    .tree-node {\n      // be explicit for child padding\n      padding-left: 2.5rem;\n      .tree-node-content {\n        padding-top: 0.25rem;\n        padding-bottom: 0.25rem;\n        .node-name {\n          font-size: 10pt;\n        }\n      }\n\n      // Debug Borders\n      //border: dashed 1px #ccc;\n    }\n    .tree-node-content {\n      .node-name {\n        font-weight: bold;\n        font-size: 15pt;\n        padding-right: 0.5rem;\n      }\n      padding-top: 1rem;\n      padding-bottom: 1rem;\n      padding-right: 0.5rem;\n      //.mat-icon-button {\n      //  width: auto;\n      //  height: auto;\n      //}\n      .visibility-off {\n        opacity: 0.5;\n      }\n      .type-icon {\n        height: 15px;\n        width: 22px;\n      }\n      .type-none {\n        padding-left: 6px;\n      }\n      .route-none {\n        color: #FF5B3A;\n      }\n      .mat-button-disabled {\n        height: 24px;\n      }\n    }\n    &-drag {\n      &-preview {\n        //box-sizing: border-box;\n        //border-radius: 4px;\n        //padding: 10px;\n        //box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);\n      }\n    }\n    &-drop-list {\n      //border: solid 1px #ccc;\n      //min-height: 20px;\n      //border-radius: 4px;\n      //overflow: hidden;\n      //display: block;\n    }\n    &.cdk-drop-list-dragging {\n      .tree-node:not(.cdk-drag-placeholder) {\n        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n      }\n    }\n    &:last-child {\n      //border: none;\n    }\n  }\n  .cdk {\n    // NOTE: Much of these Drag Selectors won't work, since this element gets pulled out of the Tree Element when being dragged.\n    &-drag {\n      &-preview {\n        //box-sizing: border-box;\n        //border-radius: 4px;\n        //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n        //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n        //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n      }\n      &-placeholder {\n        //opacity: 0;\n      }\n      &-animating {\n        //transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n      }\n    }\n    &-drop-list {\n      &-dragging {\n        //min-width: 100px;\n        //min-height: 20px;\n        //border-style: dashed !important;\n        //border-radius: 4px !important;\n        //background: lightgreen !important;\n        //.tree-node-drop-list {\n        //  min-width: 100px;\n        //  min-height: 20px;\n        //  border-style: dashed !important;\n        //  border-radius: 4px !important;\n        //}\n        //&.tree-node-drop-list {\n        //  min-width: 100px;\n        //  min-height: 20px;\n        //  border-style: dashed !important;\n        //  border-radius: 4px !important;\n        //}\n        .hover-show {\n          display: none !important;\n        }\n      }\n      &-receiving {\n        //min-width: 100px;\n        //min-height: 20px;\n        //border-style: dashed !important;\n        //border-radius: 4px !important;\n        //background: lightyellow !important;\n        .tree-node-drop-list {\n          //min-width: 100px;\n          //min-height: 20px;\n          //border-style: dashed !important;\n          //border-radius: 4px !important;\n          //background: lightcyan !important;\n        }\n        &.tree-node-drop-list {\n          //min-width: 100px;\n          //min-height: 20px;\n          //border-style: dashed !important;\n          //border-radius: 4px !important;\n          //background: lightsalmon !important;\n        }\n      }\n    }\n  }\n}\n//.tree-node {\n//  z-index: 994;\n//  .tree-node {\n//    z-index: 995;\n//    .tree-node {\n//      z-index: 996;\n//      .tree-node {\n//        z-index: 997;\n//        .tree-node {\n//          z-index: 998;\n//          .tree-node {\n//            z-index: 999;\n//          }\n//        }\n//      }\n//    }\n//  }\n//}\n\n// NOTE: CDK Drag needs to be outside .tree, since this element gets pulled out of the Tree Element when being dragged.\n.cdk {\n  &-drag {\n    &-preview {\n      box-sizing: border-box;\n      border-radius: 4px;\n      //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n      //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n      //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n      padding: 0 !important;\n      .hover-show {\n        display: none !important;\n      }\n    }\n    &-placeholder {\n      opacity: 50%;\n      .hover-show {\n        display: none !important;\n      }\n    }\n    //&-animating {\n    //  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n    //}\n  }\n}\n\n// Tree Dialog\n.tree-dialog-content {\n  .form-field {\n    width: 320px;\n  }\n  .dialog-form {\n    margin-top: 20px;\n  }\n  .radio {\n    &-group {\n      //display: flex;\n      //flex-direction: column;\n      //margin: 15px 0;\n    }\n    &-button {\n      //margin: 5px;\n      padding: 0 5px;\n    }\n  }\n  // SVG Colors\n  .svg-grey {\n    svg g {\n      fill: #666666;\n    }\n  }\n}\n"]}

package/src/tree/tree.component.min.css

@@ -1 +1 @@
-.tree .display-none{display:none}.tree .position-absolute{position:absolute}.tree .svg-grey svg g{fill:#666}.tree .visibility-off svg g{fill:#ff5b3a}.tree .full-width{width:100%}.tree li,.tree ul{margin-top:0;margin-bottom:0;list-style-type:none}.tree .float-right{position:relative;float:right}.tree .drop-inside{border:2px solid #00b7ff!important}.tree .drop-before{border-top:2px solid #00b7ff!important}.tree .drop-after{border-bottom:2px solid #00b7ff!important}.tree .tree-node{display:block;cursor:move}.tree .tree-node a,.tree .tree-node mat-button,.tree .tree-node mat-icon-button{cursor:pointer}.tree .tree-node .hover-box:hover~.hover-show{display:unset}.tree .tree-node .hover-show{display:none}.tree .tree-node .hover-show:hover{display:unset}.tree .tree-node .tree-node{padding-left:40px}.tree .tree-node .tree-node-content .visibility-off{opacity:.5}.tree .tree-node .tree-node-content .type-icon{height:15px;width:22px}.tree .tree-node .tree-node-content .type-none{padding-left:6px}.tree .tree-node .tree-node-content .route-none{color:#ff5b3a}.tree .tree-node .tree-node-content .mat-button-disabled{height:24px}.tree-dialog-content .form-field{width:320px}.tree-dialog-content .dialog-form{margin-top:20px}.tree-dialog-content .radio-button{padding:0 5px}.tree-dialog-content .svg-grey svg g{fill:#666}
+.tree .display-none{display:none}.tree .position-absolute{position:absolute}.tree .svg-grey svg g{fill:#666}.tree .visibility-off svg g{fill:#ff5b3a}.tree .full-width{width:100%}.tree li,.tree ul{margin-top:0;margin-bottom:0;list-style-type:none}.tree .float-right{position:relative;float:right}.tree .drop-inside{border:2px solid #00b7ff!important}.tree .drop-before{border-top:2px solid #00b7ff!important}.tree .drop-after{border-bottom:2px solid #00b7ff!important}.tree .tree-node{display:grid;vertical-align:middle;place-content:center start;cursor:move}.tree .tree-node a,.tree .tree-node mat-button,.tree .tree-node mat-icon-button{cursor:pointer}.tree .tree-node .hover-box{padding-right:.5rem}.tree .tree-node .hover-box:hover~.hover-show{display:unset}.tree .tree-node .hover-show{display:none;padding-bottom:1rem;padding-right:5rem}.tree .tree-node .hover-show:hover{display:unset}.tree .tree-node .tree-node{padding-left:2.5rem}.tree .tree-node .tree-node .tree-node-content{padding-top:.25rem;padding-bottom:.25rem}.tree .tree-node .tree-node .tree-node-content .node-name{font-size:10pt}.tree .tree-node .tree-node-content{padding-top:1rem;padding-bottom:1rem;padding-right:.5rem}.tree .tree-node .tree-node-content .node-name{font-weight:700;font-size:15pt;padding-right:.5rem}.tree .tree-node .tree-node-content .visibility-off{opacity:.5}.tree .tree-node .tree-node-content .type-icon{height:15px;width:22px}.tree .tree-node .tree-node-content .type-none{padding-left:6px}.tree .tree-node .tree-node-content .route-none{color:#ff5b3a}.tree .tree-node .tree-node-content .mat-button-disabled{height:24px}.tree .tree-node.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.tree .cdk-drop-list-dragging .hover-show{display:none!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;padding:0!important}.cdk-drag-preview .hover-show{display:none!important}.cdk-drag-placeholder{opacity:50%}.cdk-drag-placeholder .hover-show{display:none!important}.tree-dialog-content .form-field{width:320px}.tree-dialog-content .dialog-form{margin-top:20px}.tree-dialog-content .radio-button{padding:0 5px}.tree-dialog-content .svg-grey svg g{fill:#666}

package/src/tree/tree.component.scss

@@ -38,6 +38,7 @@
     position: relative;
     float: right;
   }
+  // Drop Location Borders
   .drop {
     &-inside {
       border: 2px solid #00b7ff !important;
@@ -57,37 +58,99 @@
   }
   .tree-node {
     // We have to use 'block' since 'flex' makes the Drag & Drop even more inaccurate
-    display: block;
+    //display: block;
+
+    // Grid works better for alignment and Drag & Drop calculations
+    display: grid;
+
+    // Padding Options
+    //padding-top: .225rem;
+    //padding-bottom: .225rem;
     //padding: 20px 10px;
-    //border-bottom: solid 1px #ccc;
+
+    // Height & Alignment
+    //min-height: 2.5rem;
+    vertical-align: middle;
+    place-content: center start;
+
+    // Debug Borders
+    //border: dashed 1px #ccc;
+
     //color: rgba(0, 0, 0, 0.87);
+
+    // Flex Design (Doesn't work well with Drag & Drop(
     //display: flex;
     //flex-direction: row;
+
+    // Flex Alignment
     //align-items: center;
     //justify-content: space-between;
     //box-sizing: border-box;
+
+    // Cursor
     cursor: move;
+
+    // Alternate Indentation Calculations
+    //&:before {
+    //  position: absolute;
+    //  top: 15px;
+    //  left: 0;
+    //  width: 10px;
+    //  height: 1px;
+    //  margin: auto;
+    //  content: '';
+    //  background-color: #666;
+    //}
+
+    // Material Buttons
     a, mat-button, mat-icon-button {
       cursor: pointer;
     }
     // only show certain elements on hover
     .hover {
+      &-box {
+        padding-right: 0.5rem;
+      }
       &-box:hover ~ .hover-show {
         display: unset;
       }
       &-show {
         display: none;
+        padding-bottom: 1rem;
+        padding-right: 5rem;
         &:hover {
           display: unset;
         }
       }
     }
 
-    .tree-node { // be explicit for child padding
-      padding-left: 40px;
-      //border-left: dashed 1px #222222;
+    .tree-node {
+      // be explicit for child padding
+      padding-left: 2.5rem;
+      .tree-node-content {
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
+        .node-name {
+          font-size: 10pt;
+        }
+      }
+
+      // Debug Borders
+      //border: dashed 1px #ccc;
     }
     .tree-node-content {
+      .node-name {
+        font-weight: bold;
+        font-size: 15pt;
+        padding-right: 0.5rem;
+      }
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      padding-right: 0.5rem;
+      //.mat-icon-button {
+      //  width: auto;
+      //  height: auto;
+      //}
       .visibility-off {
         opacity: 0.5;
       }
@@ -122,7 +185,7 @@
     }
     &.cdk-drop-list-dragging {
       .tree-node:not(.cdk-drag-placeholder) {
-        //transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
       }
     }
     &:last-child {
@@ -130,6 +193,7 @@
     }
   }
   .cdk {
+    // NOTE: Much of these Drag Selectors won't work, since this element gets pulled out of the Tree Element when being dragged.
     &-drag {
       &-preview {
         //box-sizing: border-box;
@@ -164,6 +228,9 @@
         //  border-style: dashed !important;
         //  border-radius: 4px !important;
         //}
+        .hover-show {
+          display: none !important;
+        }
       }
       &-receiving {
         //min-width: 100px;
@@ -208,6 +275,32 @@
 //  }
 //}
 
+// NOTE: CDK Drag needs to be outside .tree, since this element gets pulled out of the Tree Element when being dragged.
+.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);
+      padding: 0 !important;
+      .hover-show {
+        display: none !important;
+      }
+    }
+    &-placeholder {
+      opacity: 50%;
+      .hover-show {
+        display: none !important;
+      }
+    }
+    //&-animating {
+    //  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    //}
+  }
+}
+
 // Tree Dialog
 .tree-dialog-content {
   .form-field {

package/src/editor/quill-break-blot.plugin.js

@@ -1,38 +0,0 @@
-System.register(["quill", "@stratusjs/core/environment"], function (exports_1, context_1) {
-    "use strict";
-    var quill_1, environment_1, Break, Embed, QuillBreak;
-    var __moduleName = context_1 && context_1.id;
-    return {
-        setters: [
-            function (quill_1_1) {
-                quill_1 = quill_1_1;
-            },
-            function (environment_1_1) {
-                environment_1 = environment_1_1;
-            }
-        ],
-        execute: function () {
-            Break = quill_1.default.import('blots/break');
-            Embed = quill_1.default.import('blots/embed');
-            QuillBreak = class QuillBreak extends Break {
-                length() {
-                    return 1;
-                }
-                value() {
-                    return '\n';
-                }
-                insertInto(parent, ref) {
-                    if (environment_1.cookie('env')) {
-                        console.log('insertInto:', parent, ref);
-                    }
-                    Embed.prototype.insertInto.call(this, parent, ref);
-                }
-            };
-            exports_1("QuillBreak", QuillBreak);
-            QuillBreak.blotName = 'break';
-            QuillBreak.tagName = 'BR';
-        }
-    };
-});
-
-//# sourceMappingURL=quill-break-blot.plugin.js.map

package/src/editor/quill-break-blot.plugin.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["quill-break-blot.plugin.ts"],"names":[],"mappings":";;;;;;;;;;;;;;YAKM,KAAK,GAAG,eAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;YACnC,KAAK,GAAG,eAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;YAWzC,aAAA,MAAa,UAAW,SAAQ,KAAK;gBACjC,MAAM;oBACF,OAAO,CAAC,CAAA;gBACZ,CAAC;gBACD,KAAK;oBACD,OAAO,IAAI,CAAA;gBACf,CAAC;gBAED,UAAU,CAAC,MAAW,EAAE,GAAQ;oBAC5B,IAAI,oBAAM,CAAC,KAAK,CAAC,EAAE;wBACf,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,CAAC,CAAA;qBAC1C;oBACD,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,CAAA;gBACtD,CAAC;aACJ,CAAA;;YAED,UAAU,CAAC,QAAQ,GAAG,OAAO,CAAA;YAC7B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;QACzB,CAAC","file":"quill-break-blot.plugin.js"}

package/src/editor/quill-break-blot.plugin.min.js

@@ -1 +0,0 @@
-System.register(["quill","@stratusjs/core/environment"],function(t,e){"use strict";var n,r,o,s,i;e&&e.id;return{setters:[function(t){n=t},function(t){r=t}],execute:function(){o=n.default.import("blots/break"),s=n.default.import("blots/embed"),t("QuillBreak",i=class extends o{length(){return 1}value(){return"\n"}insertInto(t,e){r.cookie("env")&&console.log("insertInto:",t,e),s.prototype.insertInto.call(this,t,e)}}),i.blotName="break",i.tagName="BR"}}});

package/src/editor/quill-html-edit.plugin.js

@@ -1,164 +0,0 @@
-System.register(["quill"], function (exports_1, context_1) {
-    "use strict";
-    var quill_1, debug, Logger, QuillHtmlEditPlugin;
-    var __moduleName = context_1 && context_1.id;
-    function $create(elName) {
-        return document.createElement(elName);
-    }
-    function $setAttr(el, key, value) {
-        return el.setAttribute(key, value);
-    }
-    function launchPopupEditor(quill, options) {
-        const htmlFromEditor = quill.container.querySelector('.ql-editor').innerHTML;
-        const popupContainer = $create('div');
-        const overlayContainer = $create('div');
-        const msg = options.msg || 'Edit HTML here, when you click "OK" the quill editor\'s contents will be replaced';
-        const cancelText = options.cancelText || 'Cancel';
-        const okText = options.okText || 'Ok';
-        $setAttr(overlayContainer, 'class', 'ql-html-overlayContainer');
-        $setAttr(popupContainer, 'class', 'ql-html-popupContainer');
-        const popupTitle = $create('i');
-        $setAttr(popupTitle, 'class', 'ql-html-popupTitle');
-        popupTitle.innerText = msg;
-        const textContainer = $create('div');
-        textContainer.appendChild(popupTitle);
-        $setAttr(textContainer, 'class', 'ql-html-textContainer');
-        const textArea = $create('textarea');
-        $setAttr(textArea, 'class', 'ql-html-textArea');
-        textArea.value = formatHTML(htmlFromEditor);
-        const buttonCancel = $create('button');
-        buttonCancel.innerHTML = cancelText;
-        $setAttr(buttonCancel, 'class', 'ql-html-buttonCancel');
-        const buttonOk = $create('button');
-        buttonOk.innerHTML = okText;
-        const buttonGroup = $create('div');
-        $setAttr(buttonGroup, 'class', 'ql-html-buttonGroup');
-        buttonGroup.appendChild(buttonCancel);
-        buttonGroup.appendChild(buttonOk);
-        textContainer.appendChild(textArea);
-        textContainer.appendChild(buttonGroup);
-        popupContainer.appendChild(textContainer);
-        overlayContainer.appendChild(popupContainer);
-        document.body.appendChild(overlayContainer);
-        buttonCancel.onclick = () => {
-            document.body.removeChild(overlayContainer);
-        };
-        overlayContainer.onclick = buttonCancel.onclick;
-        popupContainer.onclick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        buttonOk.onclick = () => {
-            const output = textArea.value.split(/\r?\n/g).map((el) => el.trim());
-            const noNewlines = output.join('');
-            quill.container.querySelector('.ql-editor').innerHTML = noNewlines;
-            document.body.removeChild(overlayContainer);
-        };
-    }
-    function formatHTML(code) {
-        'use strict';
-        const stripWhiteSpaces = true;
-        const stripEmptyLines = true;
-        const whitespace = ' '.repeat(2);
-        let currentIndent = 0;
-        const newlineChar = '\n';
-        let char = null;
-        let nextChar = null;
-        let result = '';
-        for (let pos = 0; pos <= code.length; pos++) {
-            char = code.substr(pos, 1);
-            nextChar = code.substr(pos + 1, 1);
-            const isBrTag = code.substr(pos, 4) === '<br>';
-            const isOpeningTag = char === '<' && nextChar !== '/' && !isBrTag;
-            const isClosingTag = char === '<' && nextChar === '/' && !isBrTag;
-            if (isBrTag) {
-                result += newlineChar;
-                currentIndent--;
-                pos += 4;
-            }
-            if (isOpeningTag) {
-                result += newlineChar + whitespace.repeat(currentIndent);
-                currentIndent++;
-            }
-            else if (isClosingTag) {
-                if (--currentIndent < 0) {
-                    currentIndent = 0;
-                }
-                result += newlineChar + whitespace.repeat(currentIndent);
-            }
-            else if (stripWhiteSpaces === true && char === ' ' && nextChar === ' ') {
-                char = '';
-            }
-            else if (stripEmptyLines === true && char === newlineChar) {
-                if (code.substr(pos, code.substr(pos).indexOf('<')).trim() === '') {
-                    char = '';
-                }
-            }
-            result += char;
-        }
-        Logger.log('formatHTML', {
-            before: code,
-            after: result
-        });
-        return result;
-    }
-    return {
-        setters: [
-            function (quill_1_1) {
-                quill_1 = quill_1_1;
-            }
-        ],
-        execute: function () {
-            debug = false;
-            Logger = {
-                prefixString() {
-                    return `</> quill-html-edit-button: `;
-                },
-                get log() {
-                    if (!debug) {
-                        return () => { };
-                    }
-                    const boundLogFn = console.log.bind(console, this.prefixString());
-                    return boundLogFn;
-                }
-            };
-            QuillHtmlEditPlugin = class QuillHtmlEditPlugin {
-                constructor(quill, options) {
-                    debug = options && options.debug;
-                    Logger.log('logging enabled');
-                    const toolbarModule = quill.getModule('toolbar');
-                    if (!toolbarModule) {
-                        throw new Error('quill.htmlEditButton requires the "toolbar" module to be included too');
-                    }
-                    this.registerDivModule();
-                    const toolbarEl = toolbarModule.container;
-                    const buttonContainer = $create('span');
-                    $setAttr(buttonContainer, 'class', 'ql-formats');
-                    const button = $create('button');
-                    button.innerHTML = options.buttonHTML || '&lt;&gt;';
-                    button.title = options.buttonTitle || 'Show HTML source';
-                    button.onclick = (e) => {
-                        e.preventDefault();
-                        launchPopupEditor(quill, options);
-                    };
-                    buttonContainer.appendChild(button);
-                    toolbarEl.appendChild(buttonContainer);
-                }
-                registerDivModule() {
-                    const Block = quill_1.default.import('blots/block');
-                    class Div extends Block {
-                    }
-                    Div.tagName = 'div';
-                    Div.blotName = 'div';
-                    Div.allowedChildren = Block.allowedChildren;
-                    Div.allowedChildren.push(Block);
-                    quill_1.default.register(Div);
-                }
-            };
-            exports_1("QuillHtmlEditPlugin", QuillHtmlEditPlugin);
-            exports_1("default", QuillHtmlEditPlugin);
-        }
-    };
-});
-
-//# sourceMappingURL=quill-html-edit.plugin.js.map

package/src/editor/quill-html-edit.plugin.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["quill-html-edit.plugin.ts"],"names":[],"mappings":"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","file":"quill-html-edit.plugin.js"}

package/src/editor/quill-html-edit.plugin.min.js

@@ -1 +0,0 @@
-System.register(["quill"],function(t,e){"use strict";var n,l,o,i;e&&e.id;function r(t){return document.createElement(t)}function s(t,e,n){return t.setAttribute(e,n)}function c(t,e){const n=t.container.querySelector(".ql-editor").innerHTML,l=r("div"),i=r("div"),c=e.msg||'Edit HTML here, when you click "OK" the quill editor\'s contents will be replaced',u=e.cancelText||"Cancel",d=e.okText||"Ok";s(i,"class","ql-html-overlayContainer"),s(l,"class","ql-html-popupContainer");const a=r("i");s(a,"class","ql-html-popupTitle"),a.innerText=c;const p=r("div");p.appendChild(a),s(p,"class","ql-html-textContainer");const h=r("textarea");s(h,"class","ql-html-textArea"),h.value=function(t){const e=" ".repeat(2);let n=0;let l=null,i=null,r="";for(let o=0;o<=t.length;o++){l=t.substr(o,1),i=t.substr(o+1,1);const s="<br>"===t.substr(o,4),c="<"===l&&"/"===i&&!s;s&&(r+="\n",n--,o+=4),"<"===l&&"/"!==i&&!s?(r+="\n"+e.repeat(n),n++):c?(--n<0&&(n=0),r+="\n"+e.repeat(n)):(" "===l&&" "===i||"\n"===l&&""===t.substr(o,t.substr(o).indexOf("<")).trim())&&(l=""),r+=l}return o.log("formatHTML",{before:t,after:r}),r}(n);const b=r("button");b.innerHTML=u,s(b,"class","ql-html-buttonCancel");const m=r("button");m.innerHTML=d;const g=r("div");s(g,"class","ql-html-buttonGroup"),g.appendChild(b),g.appendChild(m),p.appendChild(h),p.appendChild(g),l.appendChild(p),i.appendChild(l),document.body.appendChild(i),b.onclick=()=>{document.body.removeChild(i)},i.onclick=b.onclick,l.onclick=t=>{t.preventDefault(),t.stopPropagation()},m.onclick=()=>{const e=h.value.split(/\r?\n/g).map(t=>t.trim()).join("");t.container.querySelector(".ql-editor").innerHTML=e,document.body.removeChild(i)}}return{setters:[function(t){n=t}],execute:function(){l=!1,o={prefixString:()=>"</> quill-html-edit-button: ",get log(){if(!l)return()=>{};return console.log.bind(console,this.prefixString())}},t("QuillHtmlEditPlugin",i=class{constructor(t,e){l=e&&e.debug,o.log("logging enabled");const n=t.getModule("toolbar");if(!n)throw new Error('quill.htmlEditButton requires the "toolbar" module to be included too');this.registerDivModule();const i=n.container,u=r("span");s(u,"class","ql-formats");const d=r("button");d.innerHTML=e.buttonHTML||"&lt;&gt;",d.title=e.buttonTitle||"Show HTML source",d.onclick=n=>{n.preventDefault(),c(t,e)},u.appendChild(d),i.appendChild(u)}registerDivModule(){const t=n.default.import("blots/block");class e extends t{}e.tagName="div",e.blotName="div",e.allowedChildren=t.allowedChildren,e.allowedChildren.push(t),n.default.register(e)}}),t("default",i)}}});

package/src/editor/quill-image-format.plugin.js

@@ -1,50 +0,0 @@
-System.register(["quill"], function (exports_1, context_1) {
-    "use strict";
-    var quill_1, BaseImage, ATTRIBUTES, QuillImageFormatPlugin;
-    var __moduleName = context_1 && context_1.id;
-    return {
-        setters: [
-            function (quill_1_1) {
-                quill_1 = quill_1_1;
-            }
-        ],
-        execute: function () {
-            BaseImage = quill_1.default.import('formats/image');
-            ATTRIBUTES = [
-                'alt',
-                'height',
-                'width',
-                'stratus-src',
-                'stratusSrc'
-            ];
-            QuillImageFormatPlugin = class QuillImageFormatPlugin extends BaseImage {
-                constructor() {
-                    super(...arguments);
-                    this.blotName = 'imageCustom';
-                    this.tagName = 'IMG';
-                }
-                format(name, value) {
-                    console.log('format:', name, value, this.domNode.getAttribute('src'));
-                    if (ATTRIBUTES.indexOf(name) === -1) {
-                        super.format(name, value);
-                        return;
-                    }
-                    if (!value) {
-                        this.domNode.removeAttribute(name);
-                        return;
-                    }
-                    if (name === 'stratus-src') {
-                        console.log('stratus-src:', value);
-                    }
-                    if (name === 'stratusSrc') {
-                        console.log('stratusSrc:', value);
-                    }
-                    this.domNode.setAttribute(name, value);
-                }
-            };
-            exports_1("QuillImageFormatPlugin", QuillImageFormatPlugin);
-        }
-    };
-});
-
-//# sourceMappingURL=quill-image-format.plugin.js.map

package/src/editor/quill-image-format.plugin.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["quill-image-format.plugin.ts"],"names":[],"mappings":";;;;;;;;;;;YACM,SAAS,GAAG,eAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CAAA;YAEzC,UAAU,GAAG;gBACf,KAAK;gBACL,QAAQ;gBACR,OAAO;gBACP,aAAa;gBACb,YAAY;aACf,CAAA;YAED,yBAAA,MAAa,sBAAuB,SAAQ,SAAS;gBAArD;;oBAGI,aAAQ,GAAG,aAAa,CAAA;oBACxB,YAAO,GAAG,KAAK,CAAA;gBA2DnB,CAAC;gBApBG,MAAM,CAAC,IAAS,EAAE,KAAU;oBACxB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;oBACrE,IAAI,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;wBACjC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;wBACzB,OAAM;qBACT;oBACD,IAAI,CAAC,KAAK,EAAE;wBACR,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;wBAClC,OAAM;qBACT;oBACD,IAAI,IAAI,KAAK,aAAa,EAAE;wBACxB,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,CAAA;qBAErC;oBACD,IAAI,IAAI,KAAK,YAAY,EAAE;wBACvB,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;qBAEpC;oBACD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;gBAC1C,CAAC;aACJ,CAAA;;QACD,CAAC","file":"quill-image-format.plugin.js"}

package/src/editor/quill-image-format.plugin.min.js

@@ -1 +0,0 @@
-System.register(["quill"],function(t,s){"use strict";var e,r,o;s&&s.id;return{setters:[function(t){e=t}],execute:function(){r=e.default.import("formats/image"),o=["alt","height","width","stratus-src","stratusSrc"],t("QuillImageFormatPlugin",class extends r{constructor(){super(...arguments),this.blotName="imageCustom",this.tagName="IMG"}format(t,s){console.log("format:",t,s,this.domNode.getAttribute("src")),-1!==o.indexOf(t)?s?("stratus-src"===t&&console.log("stratus-src:",s),"stratusSrc"===t&&console.log("stratusSrc:",s),this.domNode.setAttribute(t,s)):this.domNode.removeAttribute(t):super.format(t,s)}})}}});