ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

package/src/lib/misc/w-filter-panel/query-builder/query-builder.component.html

@@ -1,197 +0,0 @@
-<div [ngClass]="getClassNames('switchRow')">
-
-  @if (allowCollapse) {
-    <a (click)="toggleCollapse()" [ngClass]="getClassNames('arrowIconButton', data.collapsed ? 'collapsed' : null)">
-      @if (getArrowIconTemplate(); as template) {
-        <ng-container *ngTemplateOutlet="template; context: getArrowIconContext()"></ng-container>
-      } @else {
-        <i [ngClass]="getClassNames('arrowIcon')"></i>
-      }
-    </a>
-  }
-
-  @if (getButtonGroupTemplate(); as template) {
-    <div [ngClass]="getClassNames('buttonGroup', 'rightAlign')">
-      <ng-container *ngTemplateOutlet="template; context: getButtonGroupContext()"></ng-container>
-    </div>
-  } @else {
-    <div [ngClass]="getClassNames('buttonGroup', 'rightAlign')">
-      <button type="button" (click)="addRule()" [ngClass]="getClassNames('button')" [disabled]=disabled>
-        <i [ngClass]="getClassNames('addIcon')"></i> Rule
-      </button>
-      @if (allowRuleset) {
-        <button type="button" (click)="addRuleSet()" [ngClass]="getClassNames('button')" [disabled]=disabled>
-          <i [ngClass]="getClassNames('addIcon')"></i> Ruleset
-        </button>
-      }
-      @if (!!parentValue && allowRuleset) {
-        <button type="button" (click)="removeRuleSet()" [ngClass]="getClassNames('button', 'removeButton')" [disabled]=disabled>
-          <i [ngClass]="getClassNames('removeIcon')"></i>
-        </button>
-      }
-    </div>
-  }
-
-
-  @if (getSwitchGroupTemplate(); as template) {
-    <ng-container *ngTemplateOutlet="template; context: getSwitchGroupContext()"></ng-container>
-  } @else {
-    @if (data) {
-      <div [ngClass]="getClassNames('switchGroup', 'transition')">
-        <div [ngClass]="getClassNames('switchControl')">
-          <input type="radio" [ngClass]="getClassNames('switchRadio')" [(ngModel)]="data.condition" [disabled]=disabled
-            value="and" #andOption />
-          <label (click)="changeCondition(andOption.value)" [ngClass]="getClassNames('switchLabel')">AND</label>
-        </div>
-        <div [ngClass]="getClassNames('switchControl')">
-          <input type="radio" [ngClass]="getClassNames('switchRadio')" [(ngModel)]="data.condition" [disabled]=disabled
-            value="or" #orOption />
-          <label (click)="changeCondition(orOption.value)" [ngClass]="getClassNames('switchLabel')">OR</label>
-        </div>
-      </div>
-    }
-  }
-
-</div>
-
-<div #treeContainer (transitionend)="transitionEnd($event)" [ngClass]="getClassNames('treeContainer', data.collapsed ? 'collapsed' : null)">
-  @if (data && data.rules) {
-    <ul [ngClass]="getClassNames('tree')">
-      @for (rule of data.rules; track rule; let i = $index) {
-        @if ({ruleset: !!rule.rules, invalid: !config.allowEmptyRulesets && rule.rules && rule.rules.length === 0}; as local) {
-          <li [ngClass]="getQueryItemClassName(local)">
-            @if (!local.ruleset) {
-              @if (getRemoveButtonTemplate(); as template) {
-                <div [ngClass]="getClassNames('buttonGroup', 'rightAlign')">
-                  <ng-container *ngTemplateOutlet="template; context: getRemoveButtonContext(rule)"></ng-container>
-                </div>
-              } @else {
-                <div [ngClass]="getClassNames('removeButtonSize', 'rightAlign')">
-                  <button type="button" [ngClass]="getClassNames('button', 'removeButton')" (click)="removeRule(rule, data)" [disabled]=disabled>
-                    <i [ngClass]="getClassNames('removeIcon')"></i>
-                  </button>
-                </div>
-              }
-              @if (entities?.length! > 0) {
-                <div class="q-inline-block-display">
-                  @if (getEntityTemplate(); as template) {
-                    <ng-container *ngTemplateOutlet="template; context: getEntityContext(rule)"></ng-container>
-                  } @else {
-                    <div [ngClass]="getClassNames('entityControlSize')">
-                      <select [ngClass]="getClassNames('entityControl')" [(ngModel)]="rule.entity" (ngModelChange)="changeEntity($event, rule,i,data)"
-                        [disabled]="disabled">
-                        @for (entity of entities; track entity) {
-                          <option [ngValue]="entity.value">
-                            {{entity.name}}
-                          </option>
-                        }
-                      </select>
-                    </div>
-                  }
-                </div>
-              }
-              @if (getFieldTemplate(); as template) {
-                <ng-container *ngTemplateOutlet="template; context: getFieldContext(rule)"></ng-container>
-              } @else {
-                <div [ngClass]="getClassNames('fieldControlSize')">
-                  <select [ngClass]="getClassNames('fieldControl')" [(ngModel)]="rule.field" (ngModelChange)="changeField($event, rule)"
-                    [disabled]="disabled">
-                    @for (field of getFields(rule.entity); track field) {
-                      <option [ngValue]="field.value">
-                        {{field.name}}
-                      </option>
-                    }
-                  </select>
-                </div>
-              }
-              @if (getOperatorTemplate(); as template) {
-                <ng-container *ngTemplateOutlet="template; context: getOperatorContext(rule)"></ng-container>
-              } @else {
-                <div [ngClass]="getClassNames('operatorControlSize')">
-                  <select [ngClass]="getClassNames('operatorControl')" [(ngModel)]="rule.operator" (ngModelChange)="changeOperator(rule)"
-                    [disabled]="disabled">
-                    @for (operator of getOperators(rule.field); track operator) {
-                      <option [ngValue]="operator">
-                        {{operator}}
-                      </option>
-                    }
-                  </select>
-                </div>
-              }
-              @if (findTemplateForRule(rule); as template) {
-                <ng-container *ngTemplateOutlet="template; context: getInputContext(rule)"></ng-container>
-              } @else {
-                <div [ngClass]="getClassNames('inputControlSize')">
-                  @switch (getInputType(rule.field, rule.operator)) {
-                    @case ('string') {
-                      <input [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled" type="text">
-                    }
-                    @case ('number') {
-                      <input [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled" type="number">
-                    }
-                    @case ('date') {
-                      <input [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled" type="date">
-                    }
-                    @case ('time') {
-                      <input [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled" type="time">
-                    }
-                    @case ('category') {
-                      <select [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled">
-                        @for (opt of getOptions(rule.field); track opt) {
-                          <option [ngValue]="opt.value">
-                            {{opt.name}}
-                          </option>
-                        }
-                      </select>
-                    }
-                    @case ('multiselect') {
-                      <select [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled" multiple>
-                        @for (opt of getOptions(rule.field); track opt) {
-                          <option [ngValue]="opt.value">
-                            {{opt.name}}
-                          </option>
-                        }
-                      </select>
-                    }
-                    @case ('boolean') {
-                      <input [ngClass]="getClassNames('inputControl')" [(ngModel)]="rule.value" (ngModelChange)="changeInput()"
-                        [disabled]="disabled" type="checkbox">
-                    }
-                  }
-                </div>
-              }
-            }
-            @if (local.ruleset) {
-              <query-builder [data]="rule" [disabled]="disabled" [parentTouchedCallback]="parentTouchedCallback || onTouchedCallback"
-                [parentChangeCallback]="parentChangeCallback || onChangeCallback" [parentInputTemplates]="parentInputTemplates || inputTemplates"
-                [parentOperatorTemplate]="parentOperatorTemplate || operatorTemplate" [parentFieldTemplate]="parentFieldTemplate || fieldTemplate"
-                [parentEntityTemplate]="parentEntityTemplate || entityTemplate" [parentSwitchGroupTemplate]="parentSwitchGroupTemplate || switchGroupTemplate"
-                [parentButtonGroupTemplate]="parentButtonGroupTemplate || buttonGroupTemplate" [parentRemoveButtonTemplate]="parentRemoveButtonTemplate || removeButtonTemplate"
-                [parentEmptyWarningTemplate]="parentEmptyWarningTemplate || emptyWarningTemplate" [parentArrowIconTemplate]="parentArrowIconTemplate || arrowIconTemplate"
-                [parentValue]="data" [classNames]="classNames" [config]="config" [allowRuleset]="allowRuleset"
-                [allowCollapse]="allowCollapse" [emptyMessage]="emptyMessage" [operatorMap]="operatorMap">
-              </query-builder>
-            }
-            @if (getEmptyWarningTemplate(); as template) {
-              @if (local.invalid) {
-                <ng-container *ngTemplateOutlet="template; context: getEmptyWarningContext()"></ng-container>
-              }
-            } @else {
-              @if (local.invalid) {
-                <p [ngClass]="getClassNames('emptyWarning')">
-                  {{emptyMessage}}
-                </p>
-              }
-            }
-          </li>
-        }
-      }
-    </ul>
-  }
-</div>

package/src/lib/misc/w-filter-panel/query-builder/query-builder.component.scss

@@ -1,219 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-
-  .q-icon {
-    font-style: normal;
-    font-size: 12px;
-  }
-
-  .q-remove-icon {
-    &::before {
-      content: '❌'
-    }
-  }
-
-  .q-arrow-icon-button {
-    float: left;
-    margin: 4px 6px 4px 0;
-    transform: rotate(90deg);
-    transition: linear 0.25s transform;
-    cursor: pointer;
-
-    &.q-collapsed {
-      transform: rotate(0);
-    }
-  }
-
-  .q-arrow-icon {
-    &::before {
-      content: '▶'
-    }
-  }
-
-  .q-add-icon {
-    color: #555;
-    &::before {
-      content: '➕'
-    }
-  }
-
-  .q-remove-button {
-    color: #B3415D;
-    width: 31px;
-  }
-
-  .q-switch-group, .q-button-group {
-    font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
-    overflow: hidden;
-  }
-
-  .q-right-align {
-    float: right;
-  }
-
-  .q-button {
-    margin-left: 8px;
-    padding: 0 8px;
-    background-color: white;
-
-    &:disabled {
-      display: none;
-    }
-  }
-
-  .q-control-size {
-    display: inline-block;
-    vertical-align: top;
-    padding-right: 10px;
-  }
-
-  .q-input-control, .q-operator-control, .q-field-control, .q-entity-control {
-    display: inline-block;
-    padding: 5px 8px;
-    color: #555;
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-    width: auto;
-
-    &:disabled {
-      border-color: transparent;
-    }
-  }
-
-  .q-operator-control, .q-field-control,.q-entity-control, .q-input-control:not([type='checkbox']) {
-    min-height: 32px;
-    -webkit-appearance: none;
-  }
-
-  .q-switch-label, .q-button {
-    float: left;
-    margin-bottom: 0;
-    font-size: 14px;
-    line-height: 30px;
-    font-weight: normal;
-    text-align: center;
-    text-shadow: none;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-
-    &:hover {
-      cursor: pointer;
-      background-color: #F0F0F0;
-    }
-  }
-
-  .q-switch-label {
-    background-color: #e4e4e4;
-    padding: 0 8px;
-  }
-
-  .q-switch-radio {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    width: 1px;
-    border: 0;
-    overflow: hidden;
-
-    &:checked + .q-switch-label {
-      border: 1px solid rgb(97, 158, 215);
-      background: white;
-      color: rgb(49, 118, 179);
-    }
-
-    &:disabled + .q-switch-label {
-      display: none;
-    }
-
-    &:checked:disabled + .q-switch-label {
-      display: initial;
-      color: initial;
-      cursor: default;
-      border-color: transparent;
-    }
-  }
-
-  .q-invalid-ruleset {
-    border: 1px solid rgba(179, 65, 93, 0.5) !important;
-    background: rgba(179, 65, 93, 0.1) !important;
-  }
-
-  .q-empty-warning {
-    color: rgb(141, 37, 46);
-    text-align: center;
-  }
-
-  .q-ruleset {
-    border: 1px solid #CCC;
-  }
-
-  .q-rule {
-    border: 1px solid #CCC;
-    background: white;
-  }
-
-  .q-transition {
-    -webkit-transition: all 0.1s ease-in-out;
-    -moz-transition:    all 0.1s ease-in-out;
-    -ms-transition:     all 0.1s ease-in-out;
-    -o-transition:      all 0.1s ease-in-out;
-    transition:         all 0.1s ease-in-out;
-  }
-
-  .q-tree-container {
-    width: 100%;
-    overflow: hidden;
-    transition: ease-in 0.25s max-height;
-
-    &.q-collapsed {
-      max-height: 0 !important;
-    }
-  }
-
-  .q-tree {
-    list-style: none;
-    margin: 4px 0 2px;
-  }
-
-  .q-row {
-    padding: 6px 8px;
-    margin-top: 6px;
-  }
-
-  .q-connector {
-    position: relative;
-
-    &::before {
-      top: -5px;
-      border-width: 0 0 2px 2px;
-    }
-
-    &::after {
-      border-width: 0 0 0 2px;
-      top: 50%;
-    }
-
-    &::before, &::after {
-      content: '';
-      left: -12px;
-      border-color: #CCC;
-      border-style: solid;
-      width: 9px;
-      height: calc(50% + 6px);
-      position: absolute;
-    }
-
-    &:last-child::after {
-      content: none;
-    }
-  }
-
-  .q-inline-block-display{
-    display: inline-block;
-    vertical-align: top;
-  }
-}

package/src/lib/misc/w-filter-panel/query-builder/query-builder.component.spec.ts

@@ -1,27 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { CommonModule } from '@angular/common';
-import { FormsModule, } from '@angular/forms';
-import { QueryBuilderComponent } from './query-builder.component';
-
-describe('QueryBuilderComponent', () => {
-  let component: QueryBuilderComponent;
-  let fixture: ComponentFixture<QueryBuilderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [ CommonModule, FormsModule ],
-      declarations: [ QueryBuilderComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(QueryBuilderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});