ngx-dropdown-search/src/ngx-dropdown-search.component.metadata.json

A configurable dropdown box with search functionality for Angular 4.

[{"__symbolic":"module","version":3,"metadata":{"DropdownSearchSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-dropdown-search","template":"\n        <div class=\"form-group\" [ngStyle]=\"{'max-width': maxWidth}\" (mouseover)=\"elementCurrentlyHasFocus = true\" (mouseleave)=\"elementCurrentlyHasFocus = false\">\n            <div class=\"selector-container\">\n                <textarea #textarea class=\"form-control textarea-selector\" rows=\"1\" [placeholder]=\"selectedItem ? '' : placeholder\" (click)=\"displayResultsAndApplyFilter()\" (blur)=\"hideResults()\"\n                [disabled]=\"selectedItem || disabled || loading\" (keyup)=\"displayResultsAndApplyFilter()\" [(ngModel)]=\"searchFilter\"></textarea>\n                <span class=\"drop-menu\" *ngIf=\"!selectedItem && !disabled && !loading && !searchFilter\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleResultsDisplay()\"><i class=\"fa fa-caret-down caret-down-selector\" aria-hidden=\"true\"></i></span>\n                <span class=\"drop-menu-disabled\" *ngIf=\"!selectedItem && disabled && !loading\"><i class=\"fa fa-caret-down caret-down-selector\" aria-hidden=\"true\"></i></span>\n                <span class=\"drop-menu-disabled\" *ngIf=\"!selectedItem && !disabled && loading\"><i class=\"fa fa-spinner fa-pulse fa-fw\"></i></span>\n                <span class=\"drop-menu\" *ngIf=\"selectedItem\" (mousedown)=\"$event.preventDefault()\" (click)=\"resetSelectedItem()\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></span>\n                <span class=\"drop-menu\" *ngIf=\"!selectedItem && !loading && !disabled && searchFilter\" (click)=\"resetFilter()\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></span>\n            </div>\n            \n            <div *ngIf=\"displayValidationMessage && validationMessage != ''\" class=\"alert alert-danger\">\n                {{validationMessage}}\n            </div>\n            \n            <p *ngIf=\"disabled\" class=\"conditional-message\">{{conditionalMessage}}</p>\n            \n            <div *ngIf=\"selectedItem\" class=\"selected-item\">\n                <p>{{selectedItem[displayProperty]}}{{secondaryDisplayProperty ? ' ' + selectedItem[secondaryDisplayProperty] : ''}}</p>\n            </div>\n            \n            <!-- Keeping this here for now - Styles and HTML for mutliple selections -->\n            <!-- <div *ngIf=\"selectedItem\" class=\"selected-items\">\n                <p>{{selectedItem[displayProperty]}}</p>\n                <i class=\"fa fa-times\" aria-hidden=\"true\" (click)=\"resetSelectedItem()\"></i>\n            </div> -->\n            \n            <div class=\"results-container\" *ngIf=\"displayResults\" (mousedown)=\"preventBlur($event)\" (mouseup)=\"preventBlur($event)\">\n                <div *ngFor=\"let item of filteredResults\">\n                <p class=\"result-item\" (click)=\"setItem($event, item)\">{{item[displayProperty]}}{{secondaryDisplayProperty ? ' ' + item[secondaryDisplayProperty] : ''}}</p>\n                </div>\n                <div *ngIf=\"!filteredResults || filteredResults.length == 0\">\n                <p>{{noResultsMessage}}</p>\n                </div>\n            </div>\n        </div>\n    ","styles":["\n        .form-group {\n        margin: 0;\n        max-width: 100%;\n        position: relative;\n        }\n        \n        .selector-container {\n        max-width: 100%;\n        width: 100%;\n        position: relative;\n        }\n        \n        .textarea-selector {\n        resize: none;\n        padding-right: 34px;\n        overflow-x: hidden;\n        }\n        \n        .drop-menu {\n        background: linear-gradient(to bottom, white 0, #f2f2f2 100%);\n        border-color: #ccc;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        color: #333;\n        cursor: pointer;\n        display: inline-block;\n        font-size: 14px;\n        font-family: inherit;\n        font-variant: normal;\n        line-height: 20px;\n        margin: 0 10px 0 0;\n        padding: 4px 10px;\n        text-decoration: none;\n        text-shadow: 0 1px 0 white;\n        -moz-box-sizing: border-box;\n        -webkit-box-sizing: border-box;\n        -ms-box-sizing: border-box;\n        box-sizing: border-box;\n        -moz-border-radius-bottomleft: 0;\n        border-bottom-left-radius: 0;\n        -moz-border-radius-topleft: 0;\n        border-top-left-radius: 0;\n        border-top: 0;\n        border-right: 0;\n        border-bottom: 0;\n        display: block;\n        height: auto;\n        margin: 0;\n        padding: 4px 0;\n        position: absolute;\n        right: 1px;\n        top: 1px;\n        bottom: 1px;\n        width: 23px;\n        }\n        \n        .drop-menu-disabled {\n        background: linear-gradient(to bottom, #e0dede 0, #c7c6c6 100%);\n        border-color: #ccc;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        color: #333;\n        cursor: pointer;\n        display: inline-block;\n        font-size: 14px;\n        font-family: inherit;\n        font-variant: normal;\n        line-height: 20px;\n        margin: 0 10px 0 0;\n        padding: 4px 10px;\n        text-decoration: none;\n        text-shadow: 0 1px 0 white;\n        -moz-box-sizing: border-box;\n        -webkit-box-sizing: border-box;\n        -ms-box-sizing: border-box;\n        box-sizing: border-box;\n        -moz-border-radius-bottomleft: 0;\n        border-bottom-left-radius: 0;\n        -moz-border-radius-topleft: 0;\n        border-top-left-radius: 0;\n        border-top: 0;\n        border-right: 0;\n        border-bottom: 0;\n        display: block;\n        height: auto;\n        margin: 0;\n        padding: 4px 0;\n        position: absolute;\n        right: 1px;\n        top: 1px;\n        bottom: 1px;\n        width: 23px;\n        }\n        \n        .drop-menu-disabled .fa-spinner {\n        margin: 4px 0 0 2px;\n        }\n        \n        .drop-menu .fa-times {\n        padding: 4px 0 0 6px;\n        }\n        \n        .caret-down-selector {\n        padding-left: 7px;\n        padding-top: 5px;\n        }\n        \n        .results-container {\n        max-width: 100%;\n        width: 100%;\n        border: 1px solid lightgrey;\n        background-color: white;\n        border-radius: 3px;\n        position: absolute;\n        max-height: 300px;\n        overflow-y: auto;\n        z-index: 99999;\n        top: 36px;\n        }\n        \n        .results-container p {\n        padding: 5px 10px;\n        margin: 0;\n        }\n        \n        .results-container p.result-item:hover {\n        cursor: pointer;\n        background-color: #eee;\n        }\n        \n        .selected-item {\n        position: absolute;\n        top: 7px;\n        left: 12px;\n        max-width: calc(100% - 47px);\n        width: 100%;\n        }\n        \n        .selected-item p {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0;\n        }\n        \n        .selected-items {\n        position: absolute;\n        top: 5px;\n        left: 27px;\n        border: solid 1px #cccccc;\n        border-radius: 3px;\n        background-color: #fafafa;\n        padding: 1px 5px;\n        max-width: calc(100% - 47px);\n        }\n        \n        .selected-items p {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0;\n        margin-right: 15px;\n        }\n        \n        .selected-items>i.fa-times {\n        position: absolute;\n        top: 4px;\n        right: 4px;\n        }\n        \n        .selected-items>i.fa-times:hover {\n        cursor: pointer;\n        }\n        \n        .conditional-message {\n        font-size: 0.85em;\n        margin-top: 5px;\n        color: #999999;\n        }\n        \n        .alert-danger {\n        padding: 2px 10px;\n        margin-top: 5px;\n        margin-bottom: 0px;\n        }\n    "]}]}],"members":{"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"secondaryDisplayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"secondaryFilterProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resultSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"conditionalMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noResultsMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"validationMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemDeselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"textarea":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["textarea"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"toggleResultsDisplay":[{"__symbolic":"method"}],"focusTextareaAndShowResults":[{"__symbolic":"method"}],"hideResults":[{"__symbolic":"method"}],"setItem":[{"__symbolic":"method"}],"resetSelectedItem":[{"__symbolic":"method"}],"displayResultsAndApplyFilter":[{"__symbolic":"method"}],"isValid":[{"__symbolic":"method"}],"preventBlur":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownSearchSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-dropdown-search","template":"\n        <div class=\"form-group\" [ngStyle]=\"{'max-width': maxWidth}\" (mouseover)=\"elementCurrentlyHasFocus = true\" (mouseleave)=\"elementCurrentlyHasFocus = false\">\n            <div class=\"selector-container\">\n                <textarea #textarea class=\"form-control textarea-selector\" rows=\"1\" [placeholder]=\"selectedItem ? '' : placeholder\" (click)=\"displayResultsAndApplyFilter()\" (blur)=\"hideResults()\"\n                [disabled]=\"selectedItem || disabled || loading\" (keyup)=\"displayResultsAndApplyFilter()\" [(ngModel)]=\"searchFilter\"></textarea>\n                <span class=\"drop-menu\" *ngIf=\"!selectedItem && !disabled && !loading && !searchFilter\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleResultsDisplay()\"><i class=\"fa fa-caret-down caret-down-selector\" aria-hidden=\"true\"></i></span>\n                <span class=\"drop-menu-disabled\" *ngIf=\"!selectedItem && disabled && !loading\"><i class=\"fa fa-caret-down caret-down-selector\" aria-hidden=\"true\"></i></span>\n                <span class=\"drop-menu-disabled\" *ngIf=\"!selectedItem && !disabled && loading\"><i class=\"fa fa-spinner fa-pulse fa-fw\"></i></span>\n                <span class=\"drop-menu\" *ngIf=\"selectedItem\" (mousedown)=\"$event.preventDefault()\" (click)=\"resetSelectedItem()\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></span>\n                <span class=\"drop-menu\" *ngIf=\"!selectedItem && !loading && !disabled && searchFilter\" (click)=\"resetFilter()\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></span>\n            </div>\n            \n            <div *ngIf=\"displayValidationMessage && validationMessage != ''\" class=\"alert alert-danger\">\n                {{validationMessage}}\n            </div>\n            \n            <p *ngIf=\"disabled\" class=\"conditional-message\">{{conditionalMessage}}</p>\n            \n            <div *ngIf=\"selectedItem\" class=\"selected-item\">\n                <p>{{selectedItem[displayProperty]}}{{secondaryDisplayProperty ? ' ' + selectedItem[secondaryDisplayProperty] : ''}}</p>\n            </div>\n            \n            <!-- Keeping this here for now - Styles and HTML for mutliple selections -->\n            <!-- <div *ngIf=\"selectedItem\" class=\"selected-items\">\n                <p>{{selectedItem[displayProperty]}}</p>\n                <i class=\"fa fa-times\" aria-hidden=\"true\" (click)=\"resetSelectedItem()\"></i>\n            </div> -->\n            \n            <div class=\"results-container\" *ngIf=\"displayResults\" (mousedown)=\"preventBlur($event)\" (mouseup)=\"preventBlur($event)\">\n                <div *ngFor=\"let item of filteredResults\">\n                <p class=\"result-item\" (click)=\"setItem($event, item)\">{{item[displayProperty]}}{{secondaryDisplayProperty ? ' ' + item[secondaryDisplayProperty] : ''}}</p>\n                </div>\n                <div *ngIf=\"!filteredResults || filteredResults.length == 0\">\n                <p>{{noResultsMessage}}</p>\n                </div>\n            </div>\n        </div>\n    ","styles":["\n        .form-group {\n        margin: 0;\n        max-width: 100%;\n        position: relative;\n        }\n        \n        .selector-container {\n        max-width: 100%;\n        width: 100%;\n        position: relative;\n        }\n        \n        .textarea-selector {\n        resize: none;\n        padding-right: 34px;\n        overflow-x: hidden;\n        }\n        \n        .drop-menu {\n        background: linear-gradient(to bottom, white 0, #f2f2f2 100%);\n        border-color: #ccc;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        color: #333;\n        cursor: pointer;\n        display: inline-block;\n        font-size: 14px;\n        font-family: inherit;\n        font-variant: normal;\n        line-height: 20px;\n        margin: 0 10px 0 0;\n        padding: 4px 10px;\n        text-decoration: none;\n        text-shadow: 0 1px 0 white;\n        -moz-box-sizing: border-box;\n        -webkit-box-sizing: border-box;\n        -ms-box-sizing: border-box;\n        box-sizing: border-box;\n        -moz-border-radius-bottomleft: 0;\n        border-bottom-left-radius: 0;\n        -moz-border-radius-topleft: 0;\n        border-top-left-radius: 0;\n        border-top: 0;\n        border-right: 0;\n        border-bottom: 0;\n        display: block;\n        height: auto;\n        margin: 0;\n        padding: 4px 0;\n        position: absolute;\n        right: 1px;\n        top: 1px;\n        bottom: 1px;\n        width: 23px;\n        }\n        \n        .drop-menu-disabled {\n        background: linear-gradient(to bottom, #e0dede 0, #c7c6c6 100%);\n        border-color: #ccc;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        color: #333;\n        cursor: pointer;\n        display: inline-block;\n        font-size: 14px;\n        font-family: inherit;\n        font-variant: normal;\n        line-height: 20px;\n        margin: 0 10px 0 0;\n        padding: 4px 10px;\n        text-decoration: none;\n        text-shadow: 0 1px 0 white;\n        -moz-box-sizing: border-box;\n        -webkit-box-sizing: border-box;\n        -ms-box-sizing: border-box;\n        box-sizing: border-box;\n        -moz-border-radius-bottomleft: 0;\n        border-bottom-left-radius: 0;\n        -moz-border-radius-topleft: 0;\n        border-top-left-radius: 0;\n        border-top: 0;\n        border-right: 0;\n        border-bottom: 0;\n        display: block;\n        height: auto;\n        margin: 0;\n        padding: 4px 0;\n        position: absolute;\n        right: 1px;\n        top: 1px;\n        bottom: 1px;\n        width: 23px;\n        }\n        \n        .drop-menu-disabled .fa-spinner {\n        margin: 4px 0 0 2px;\n        }\n        \n        .drop-menu .fa-times {\n        padding: 4px 0 0 6px;\n        }\n        \n        .caret-down-selector {\n        padding-left: 7px;\n        padding-top: 5px;\n        }\n        \n        .results-container {\n        max-width: 100%;\n        width: 100%;\n        border: 1px solid lightgrey;\n        background-color: white;\n        border-radius: 3px;\n        position: absolute;\n        max-height: 300px;\n        overflow-y: auto;\n        z-index: 99999;\n        top: 36px;\n        }\n        \n        .results-container p {\n        padding: 5px 10px;\n        margin: 0;\n        }\n        \n        .results-container p.result-item:hover {\n        cursor: pointer;\n        background-color: #eee;\n        }\n        \n        .selected-item {\n        position: absolute;\n        top: 7px;\n        left: 12px;\n        max-width: calc(100% - 47px);\n        width: 100%;\n        }\n        \n        .selected-item p {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0;\n        }\n        \n        .selected-items {\n        position: absolute;\n        top: 5px;\n        left: 27px;\n        border: solid 1px #cccccc;\n        border-radius: 3px;\n        background-color: #fafafa;\n        padding: 1px 5px;\n        max-width: calc(100% - 47px);\n        }\n        \n        .selected-items p {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0;\n        margin-right: 15px;\n        }\n        \n        .selected-items>i.fa-times {\n        position: absolute;\n        top: 4px;\n        right: 4px;\n        }\n        \n        .selected-items>i.fa-times:hover {\n        cursor: pointer;\n        }\n        \n        .conditional-message {\n        font-size: 0.85em;\n        margin-top: 5px;\n        color: #999999;\n        }\n        \n        .alert-danger {\n        padding: 2px 10px;\n        margin-top: 5px;\n        margin-bottom: 0px;\n        }\n    "]}]}],"members":{"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"secondaryDisplayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"secondaryFilterProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resultSet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"conditionalMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noResultsMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"validationMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemDeselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"textarea":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["textarea"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"toggleResultsDisplay":[{"__symbolic":"method"}],"focusTextareaAndShowResults":[{"__symbolic":"method"}],"hideResults":[{"__symbolic":"method"}],"setItem":[{"__symbolic":"method"}],"resetSelectedItem":[{"__symbolic":"method"}],"displayResultsAndApplyFilter":[{"__symbolic":"method"}],"isValid":[{"__symbolic":"method"}],"preventBlur":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}]}}}}]