ngx-address/components/address.component.metadata.json

A simple address picker in angular.

[{"__symbolic":"module","version":4,"metadata":{"AddressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-address","template":"<div class=\"ngx-address\" [offClick]=\"onClose\">\n    <div class=\"ngx-address-title\" [ngClass]=\"{'has':_t.title.length > 0}\"\n        (click)=\"onOpen()\">\n        <span [innerHTML]=\"_t.title ? _t.title : options.placeholder\"></span>\n        <i class=\"arrow\"></i>\n    </div>\n    <div class=\"ngx-address-overlay\" *ngIf=\"_t.inited\" [hidden]=\"!_t.opened\" [ngStyle]=\"{'top.px': options.offset.y,'left.px': options.offset.x}\">\n        <div class=\"ngx-address-select-warp\">\n            <div class=\"ngx-address-select-tab\">\n                <a *ngFor=\"let item of _t.hd\" (click)=\"onTabChange(item.index)\" [ngClass]=\"{'current': item.selected}\">{{item.name}}</a>\n            </div>\n            <div class=\"ngx-address-select\" *ngFor=\"let bitem of _t.bd\" [hidden]=\"!bitem.selected\">\n                <dl *ngFor=\"let g of bitem.data.items | keys\">\n                    <dt *ngIf=\"g.key\">{{g.key}}</dt>\n                    <dd>\n                        <a *ngFor=\"let i of g.value\"\n                            (click)=\"onItem(bitem.index, g.key, i.id, i)\"\n                            [ngClass]=\"{'current': i.selected}\" title=\"{{i.name}}\" data-id=\"{{i.id}}\"\n                            href=\"javascript:;\">{{i.name}}</a>\n                    </dd>\n                </dl>\n                <dl class=\"ngx-address-tips\" *ngIf=\"bitem.data.tips && bitem.data.tips.length > 0\">\n                    <dd>\n                        <p *ngFor=\"let ti of bitem.data.tips\" data-id=\"{{ti.id}}\">{{ti.name}}</p>\n                    </dd>\n                </dl>\n            </div>\n        </div>\n    </div>\n</div>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"styles":["ngx-address { width: 100%; } .ngx-address { font-size: 12px; outline: 0; position: relative; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ngx-address * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ngx-address-title { padding: 4px 8px; border: 1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ccc; } .ngx-address-title .arrow { position: absolute; top: 10px; right: 8px; width: 10px; height: 5px; background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAIAAADzBuo/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpinDlzJgMDQ1paGgMqmDVrFpBkgkhAOGhyQCkmuFa4CrgckGT8//8/sigEwO1iwhRCdgdAgAEAbbUZNeMBbuoAAAAASUVORK5CYII=\") 0 0 no-repeat; } .ngx-address-title.has { color: #333; } .ngx-address-title.has .separator { color: #cfcfcf; padding: 0 4px; } .ngx-address-overlay { position: absolute; left: -9999px; top: -9999px; z-index: 999999; outline: 0; width: 100%; -webkit-tap-highlight-color: transparent; } .ngx-address-select-tab { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 1px solid #ccc; height: 35px; display: flex; align-items: center; justify-content: space-around; background: #f0f0f0; } .ngx-address-select-tab a { display: block; height: 100%; width: 100%; color: #333; text-align: center; line-height: 35px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; text-decoration: none; outline: 0; } .ngx-address-select-tab .current { background: #fff; border-bottom: 1px solid #fff; color: #f60; } .ngx-address-select { border: 1px #ccc solid; border-top: 0; padding: 10px 15px; background: #fff; } .ngx-address-select dl { display: flex; margin: 0; padding: 3px 0; line-height: 2; } .ngx-address-select dt { width: 35px; line-height: 2; padding-right: 10px; font-weight: 700; text-align: right; } .ngx-address-select dd { margin-left: 0; flex: 1; } .ngx-address-select a { display: inline-block; line-height: 2; text-decoration: none; color: #333; padding: 0 10px; outline: 0; text-decoration: none; white-space: nowrap; } .ngx-address-select a:hover, .ngx-address-select a:focus { background-color: #fff8f3; border-radius: 2px; color: #f60; } .ngx-address-select a.current { background-color: #f60; color: #fff; border-radius: 2px; } .ngx-address-tips { border-top: 1px solid #ccc; color: #ccc; } .ngx-address-tips p { margin: 0; line-height: 2; } "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AddressComponent"},"multi":true}],"host":{"[attr.class]":"options.className","$quoted$":["[attr.class]"]}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"values":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"onOpen":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"onTabChange":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"onItem":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}}}}]