@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
39 lines • 12.2 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../i18n.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@ng-select/ng-select";
import * as i5 from "../../i18n.pipe";
export class DropdownWithFlagComponent {
i18nService;
certified = false;
// @Input() getValue:string = '';
JobPerformerCertificates = [];
flagDropDownChange = new EventEmitter();
selectedValue = '';
constructor(i18nService) {
this.i18nService = i18nService;
}
ngOnInit() {
}
ngOnChanges() {
this.selectedValue = null;
}
onJobPerformerCertified(event) {
this.flagDropDownChange.emit(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithFlagComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n <label class=\"switch\">\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n <span class=\"switch-handle\"></span> \n </label> \n <!-- HA 19DEC23 For translation -->\n <ng-select *ngIf=\"certified\"\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n [items]=\"JobPerformerCertificates\"\n [(ngModel)]=\"selectedValue\"\n (change)=\"onJobPerformerCertified($event)\"\n placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n </ng-select>\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: i5.I18nPipe, name: "i18n" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
type: Component,
args: [{ selector: 'app-dropdown-with-flag', template: "<div class=\"she-title\">\n <label class=\"switch\">\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n <span class=\"switch-handle\"></span> \n </label> \n <!-- HA 19DEC23 For translation -->\n <ng-select *ngIf=\"certified\"\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n [items]=\"JobPerformerCertificates\"\n [(ngModel)]=\"selectedValue\"\n (change)=\"onJobPerformerCertified($event)\"\n placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n </ng-select>\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eee,#fff);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
}], ctorParameters: () => [{ type: i1.I18nService }], propDecorators: { certified: [{
type: Input
}], JobPerformerCertificates: [{
type: Input
}], flagDropDownChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24td2l0aC1mbGFnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL254dC1hcHAvc3JjL2xpYi9jb21wb25lbnRzL2Ryb3Bkb3duLXdpdGgtZmxhZy9kcm9wZG93bi13aXRoLWZsYWcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvZHJvcGRvd24td2l0aC1mbGFnL2Ryb3Bkb3duLXdpdGgtZmxhZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBUy9FLE1BQU0sT0FBTyx5QkFBeUI7SUFPakI7SUFOVixTQUFTLEdBQVUsS0FBSyxDQUFDO0lBQ2xDLGlDQUFpQztJQUN4Qix3QkFBd0IsR0FBVSxFQUFFLENBQUM7SUFDcEMsa0JBQWtCLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFDMUUsYUFBYSxHQUFVLEVBQUUsQ0FBQztJQUUxQixZQUFtQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtJQUFJLENBQUM7SUFFaEQsUUFBUTtJQUNSLENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7SUFDNUIsQ0FBQztJQUVELHVCQUF1QixDQUFDLEtBQVM7UUFDOUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxDQUFDO3dHQWpCVSx5QkFBeUI7NEZBQXpCLHlCQUF5QixvT0NUdEMsZ3NCQWNXOzs0RkRMRSx5QkFBeUI7a0JBTHJDLFNBQVM7K0JBQ0Usd0JBQXdCO2dGQUt6QixTQUFTO3NCQUFqQixLQUFLO2dCQUVHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFDSSxrQkFBa0I7c0JBQTNCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG4vLyBIQSAxOURFQzIzIGltcG9ydGVkIHRyYW5zbGF0aW9uIHNlcnZpY2VcbmltcG9ydCB7IEkxOG5TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vaTE4bi5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWRyb3Bkb3duLXdpdGgtZmxhZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kcm9wZG93bi13aXRoLWZsYWcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9wZG93bi13aXRoLWZsYWcuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duV2l0aEZsYWdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBjZXJ0aWZpZWQ6Ym9vbGVhbj0gZmFsc2U7XG4gIC8vIEBJbnB1dCgpIGdldFZhbHVlOnN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBKb2JQZXJmb3JtZXJDZXJ0aWZpY2F0ZXM6IGFueVtdID0gW107XG4gIEBPdXRwdXQoKSBmbGFnRHJvcERvd25DaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7IFxuICBzZWxlY3RlZFZhbHVlOnN0cmluZyA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBpMThuU2VydmljZTogSTE4blNlcnZpY2UpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG4gIG5nT25DaGFuZ2VzKCl7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlID0gbnVsbDtcbiAgfVxuICBcbiAgb25Kb2JQZXJmb3JtZXJDZXJ0aWZpZWQoZXZlbnQ6YW55KXtcbiAgICAgdGhpcy5mbGFnRHJvcERvd25DaGFuZ2UuZW1pdChldmVudCk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cInNoZS10aXRsZVwiPlxuICAgIDxsYWJlbCBjbGFzcz1cInN3aXRjaFwiPlxuICAgICAgPGlucHV0ICBjbGFzcz1cInN3aXRjaC1pbnB1dFwiIHR5cGU9XCJjaGVja2JveFwiIGRpc2FibGVkPVwidHJ1ZVwiIFtjaGVja2VkXT1cImNlcnRpZmllZFwiLz5cbiAgICAgIDxzcGFuIGNsYXNzPVwic3dpdGNoLWxhYmVsXCIgZGF0YS1vbj1cIkNlcnRpZmllZFwiIGRhdGEtb2ZmPVwiTm90IENlcnRpZmllZFwiPjwvc3Bhbj4gXG4gICAgICA8c3BhbiBjbGFzcz1cInN3aXRjaC1oYW5kbGVcIj48L3NwYW4+IFxuICAgIDwvbGFiZWw+IFxuICAgIDwhLS0gSEEgMTlERUMyMyBGb3IgdHJhbnNsYXRpb24gLS0+XG4gICAgPG5nLXNlbGVjdCAqbmdJZj1cImNlcnRpZmllZFwiXG4gICAgICBzdHlsZT1cIm1hcmdpbi1sZWZ0OiAzNnB4OyB3aWR0aDogMjA1cHg7IG1hcmdpbi1ib3R0b206IDhweDtcIiBcbiAgICAgIFtpdGVtc109XCJKb2JQZXJmb3JtZXJDZXJ0aWZpY2F0ZXNcIlxuICAgICAgWyhuZ01vZGVsKV09XCJzZWxlY3RlZFZhbHVlXCJcbiAgICAgIChjaGFuZ2UpPVwib25Kb2JQZXJmb3JtZXJDZXJ0aWZpZWQoJGV2ZW50KVwiXG4gICAgICBwbGFjZWhvbGRlcj1cIi0tLXt7ICdzZWxlY3QnIHwgaTE4bjppMThuU2VydmljZS5jdXJyZW50TGFuZ3VhZ2UgfX0tLS1cIj5cbiAgICA8L25nLXNlbGVjdD5cbiAgPC9kaXY+ICAgIl19