[{"__symbolic":"module","version":3,"metadata":{"SkySelectFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-select-field","template":"<div class=\"sky-select-field\">\n  <ng-container\n    *ngTemplateOutlet=\"(selectMode === 'multiple') ? multipleSelectMode : singleSelectMode \">\n  </ng-container>\n</div>\n\n<ng-template #multipleSelectMode>\n  <div class=\"sky-select-field-multiple-select-mode\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledBy\"\n      [disabled]=\"disabled\"\n      (click)=\"openPicker()\">\n      <i\n        class=\"fa fa-plus-circle\"\n        aria-hidden=\"true\">\n      </i>\n      {{ multipleSelectOpenButtonText }}\n    </button>\n    <sky-tokens\n      *ngIf=\"tokens && tokens.length\"\n      [disabled]=\"disabled\"\n      [displayWith]=\"descriptorKey\"\n      [tokens]=\"tokens\"\n      (tokensChange)=\"onTokensChange($event)\"\n      (tokenSelected)=\"openPicker()\">\n    </sky-tokens>\n  </div>\n</ng-template>\n\n<ng-template #singleSelectMode>\n  <div class=\"sky-select-field-single-select-mode\">\n    <div\n      class=\"sky-input-group sky-btn sky-btn-default\"\n      role=\"button\"\n      [attr.tabindex]=\"(disabled) ? false : 0\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledBy\"\n      [attr.title]=\"singleSelectOpenButtonTitle\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      (click)=\"openPicker()\"\n      (keydown.enter)=\"openPicker();$event.preventDefault();$event.stopPropagation();\">\n      <div class=\"sky-form-control\">\n        {{ singleSelectModeValue }}\n        <div\n          *ngIf=\"!singleSelectModeValue\"\n          class=\"sky-deemphasized\">\n          {{ singleSelectPlaceholderText }}\n        </div>\n      </div>\n      <div class=\"sky-input-group-btn\">\n        <button\n          *ngIf=\"singleSelectModeValue\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.title]=\"singleSelectClearButtonTitle\"\n          [disabled]=\"disabled\"\n          (click)=\"clearSelection();$event.stopPropagation();\"\n          (keydown.enter)=\"clearSelection();$event.preventDefault();$event.stopPropagation();\">\n          <i\n            class=\"fa fa-times\"\n            aria-hidden=\"true\">\n          </i>\n        </button>\n      </div>\n      <div class=\"sky-input-group-btn\">\n        <button\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.title]=\"'select_field_single_select_open_button_title' | skyResources\"\n          [disabled]=\"disabled\"\n          (click)=\"openPicker();$event.stopPropagation();\">\n          <i\n            class=\"fa fa-sort\"\n            aria-hidden=\"true\">\n          </i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n","styles":[".sky-select-field-multiple-select-mode > .sky-btn {\n  margin-bottom: 10px;\n}\n\n.sky-select-field-single-select-mode .sky-input-group {\n  padding: 0;\n}\n\n.sky-select-field-single-select-mode .sky-input-group .sky-form-control,\n.sky-select-field-single-select-mode .sky-input-group .sky-btn {\n  border: 0;\n}\n\n.sky-select-field-single-select-mode .sky-input-group:hover {\n  cursor: pointer;\n}\n\n.sky-select-field-single-select-mode .sky-input-group .sky-form-control + .sky-input-group-btn .sky-btn {\n  padding-right: 5px;\n}\n\n.sky-select-field-single-select-mode .sky-input-group .sky-input-group-btn + .sky-input-group-btn .sky-btn {\n  padding-left: 5px;\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"providers":[{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SkySelectFieldComponent"},"multi":true}]}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"descriptorKey":[{"__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"}}]}],"selectMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multipleSelectOpenButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singleSelectClearButtonTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singleSelectOpenButtonTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singleSelectPlaceholderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pickerHeading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../modal","name":"SkyModalService"},{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"}]}],"onTokensChange":[{"__symbolic":"method"}],"openPicker":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"setTokensFromValue":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkySelectFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-select-field","template":"<div class=\"sky-select-field\">\n  <ng-container\n    *ngTemplateOutlet=\"(selectMode === 'multiple') ? multipleSelectMode : singleSelectMode \">\n  </ng-container>\n</div>\n\n<ng-template #multipleSelectMode>\n  <div class=\"sky-select-field-multiple-select-mode\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledBy\"\n      [disabled]=\"disabled\"\n      (click)=\"openPicker()\">\n      <i\n        class=\"fa fa-plus-circle\"\n        aria-hidden=\"true\">\n      </i>\n      {{ multipleSelectOpenButtonText }}\n    </button>\n    <sky-tokens\n      *ngIf=\"tokens && tokens.length\"\n      [disabled]=\"disabled\"\n      [displayWith]=\"descriptorKey\"\n      [tokens]=\"tokens\"\n      (tokensChange)=\"onTokensChange($event)\"\n      (tokenSelected)=\"openPicker()\">\n    </sky-tokens>\n  </div>\n</ng-template>\n\n<ng-template #singleSelectMode>\n  <div class=\"sky-select-field-single-select-mode\">\n    <div\n      class=\"sky-input-group sky-btn sky-btn-default\"\n      role=\"button\"\n      [attr.tabindex]=\"(disabled) ? false : 0\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledBy\"\n      [attr.title]=\"singleSelectOpenButtonTitle\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      (click)=\"openPicker()\"\n      (keydown.enter)=\"openPicker();$event.preventDefault();$event.stopPropagation();\">\n      <div class=\"sky-form-control\">\n        {{ singleSelectModeValue }}\n        <div\n          *ngIf=\"!singleSelectModeValue\"\n          class=\"sky-deemphasized\">\n          {{ singleSelectPlaceholderText }}\n        </div>\n      </div>\n      <div class=\"sky-input-group-btn\">\n        <button\n          *ngIf=\"singleSelectModeValue\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.title]=\"singleSelectClearButtonTitle\"\n          [disabled]=\"disabled\"\n          (click)=\"clearSelection();$event.stopPropagation();\"\n          (keydown.enter)=\"clearSelection();$event.preventDefault();$event.stopPropagation();\">\n          <i\n            class=\"fa fa-times\"\n            aria-hidden=\"true\">\n          </i>\n        </button>\n      </div>\n      <div class=\"sky-input-group-btn\">\n        <button\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.title]=\"'select_field_single_select_open_button_title' | skyResources\"\n          [disabled]=\"disabled\"\n          (click)=\"openPicker();$event.stopPropagation();\">\n          <i\n            class=\"fa fa-sort\"\n            aria-hidden=\"true\">\n          </i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n","styles":[".sky-select-field-multiple-select-mode > .sky-btn {\n  margin-bottom: 10px;\n}\n\n.sky-select-field-single-select-mode .sky-input-group {\n  padding: 0;\n}\n\n.sky-select-field-single-select-mode .sky-input-group .sky-form-control,\n.sky-select-field-single-select-mode .sky-input-group .sky-btn {\n  border: 0;\n}\n\n.sky-select-field-single-select-mode .sky-input-group:hover {\n  cursor: pointer;\n}\n\n.sky-select-field-single-select-mode .sky-input-group .sky-form-control + .sky-input-group-btn .sky-btn {\n  padding-right: 5px;\n}\n\n.sky-select-field-single-select-mode .sky-input-group .sky-input-group-btn + .sky-input-group-btn .sky-btn {\n  padding-left: 5px;\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"providers":[{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SkySelectFieldComponent"},"multi":true}]}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"descriptorKey":[{"__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"}}]}],"selectMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multipleSelectOpenButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singleSelectClearButtonTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singleSelectOpenButtonTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"singleSelectPlaceholderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pickerHeading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../modal","name":"SkyModalService"},{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"}]}],"onTokensChange":[{"__symbolic":"method"}],"openPicker":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"setTokensFromValue":[{"__symbolic":"method"}]}}}}]