diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js index 93533887..fe4d2afa 100644 --- a/src/components/accordion/index.js +++ b/src/components/accordion/index.js @@ -1,15 +1,20 @@ -export default { - template: ` -
- - -
-
-
- `, - controllerAs: '$ctrl', - transclude: true, - bindings: { - title: '@', - }, -}; +import angular from 'angular'; + +export const accordion = angular + .module('blipComponents.accordion', []) + .component('accordion', { + template: ` +
+ + +
+
+
+ `, + controllerAs: '$ctrl', + transclude: true, + bindings: { + title: '@', + }, + }) + .name; diff --git a/src/components/avatarArray/AvatarArray.component.ts b/src/components/avatarArray/AvatarArray.component.ts index f4227618..fb85da29 100644 --- a/src/components/avatarArray/AvatarArray.component.ts +++ b/src/components/avatarArray/AvatarArray.component.ts @@ -1,5 +1,6 @@ import './AvatarArray.scss'; import template from './AvatarArrayView.html'; +import * as angular from 'angular'; class AvatarArray { public members: Array; @@ -7,7 +8,6 @@ class AvatarArray { constructor(private $scope) { this.$scope.$watch('$ctrl.members', (newValue, oldValue) => { - // if (newValue !== oldValue) { setTimeout(() => { let array = Array.from( document.querySelectorAll('.avatar-array > tooltip'), @@ -21,17 +21,19 @@ class AvatarArray { x.style.zIndex = String(100 - index); }); }, 0); - // } }); } } -export const AvatarArrayComponent = { - controller: AvatarArray, - controllerAs: '$ctrl', - bindings: { - members: ' - Card content goes here - - Card footer goes here - - - */ -export const CardComponent = { - template: CardView, - controller: class { - collapsable: boolean; - collapsed: any; - itemTitle: boolean; - sparams: any; - sref: any; - $state: any; - - constructor($state) { - this.$state = $state; - } - - get href() { - return this.$state.href(this.sref, this.sparams); - } - - get hasTitle() { - return (this.itemTitle && typeof this.itemTitle === 'string'); - } - - get showContent() { - return (!this.collapsed && this.collapsable); - } - - toggleCollapse() { - this.collapsed == true ? this.collapsed = false : this.collapsed = true; - } - - $onInit() { - this.collapsed = true; - } - }, - controllerAs: '$ctrl', - transclude: { - 'cardFooter': '?cardFooter', - }, - bindings: { - itemTitle: '@', - collapsable: ' - - - `, -}; +export const Checkbox = angular + .module('blipComponents.checkbox', []) + .component('checkbox', { + controller: CheckboxComponent, + controllerAs: '$ctrl', + transclude: true, + require: { + ngModel: 'ngModel', + }, + bindings: { + group: '@?', + checked: '@?', + refer: '@?', + disabled: ' + + + `, + }) + .name; diff --git a/src/components/chips/chips.component.ts b/src/components/chips/chips.component.ts index 616ccb29..bac325b4 100644 --- a/src/components/chips/chips.component.ts +++ b/src/components/chips/chips.component.ts @@ -1,6 +1,7 @@ -import template from './ChipsView.html'; +import * as angular from 'angular'; import { Component } from 'decorators'; import './_chips.scss'; +import { IComponentOptions } from 'angular'; @Component({ selector: 'chips', @@ -12,7 +13,7 @@ import './_chips.scss'; {{item.text}} `, }) -export class ChipsComponent { +class Chips { data: any; hideRemove: boolean; onRemove: (obj: any) => {}; @@ -23,3 +24,8 @@ export class ChipsComponent { this.onRemove({ $data: this.data, $removedItem: item }); } } + +export const ChipsComponent = angular + .module('blipComponents.chips', []) + .component('chips', Chips) + .name; diff --git a/src/components/colorPicker/colorPicker.component.ts b/src/components/colorPicker/colorPicker.component.ts index 03ddd0e8..bb962c3e 100644 --- a/src/components/colorPicker/colorPicker.component.ts +++ b/src/components/colorPicker/colorPicker.component.ts @@ -1,4 +1,5 @@ import './colorPicker.scss'; +import * as angular from 'angular'; export class ColorPickerComponent { colorBlock: HTMLCanvasElement; @@ -196,22 +197,25 @@ export class ColorPickerComponent { } } -export const colorPicker = { - controller: ColorPickerComponent, - controllerAs: '$ctrl', - bindings: { - inputColor: '=', - id: '@', - }, - template: ` -
- -
-
- - +export const colorPicker = angular + .module('blipComponents.colorPicker', []) + .component('colorPicker', { + controller: ColorPickerComponent, + controllerAs: '$ctrl', + bindings: { + inputColor: '=', + id: '@', + }, + template: ` +
+ +
+
+ + +
+
- -
-
`, -}; +
`, + }) + .name; diff --git a/src/components/confusionMatrix/confusionMatrix.component.ts b/src/components/confusionMatrix/confusionMatrix.component.ts index 74c35082..8cba474b 100644 --- a/src/components/confusionMatrix/confusionMatrix.component.ts +++ b/src/components/confusionMatrix/confusionMatrix.component.ts @@ -1,3 +1,4 @@ +import * as angular from 'angular'; import './ConfusionMatrix.scss'; import template from './ConfusionMatrixView.html'; @@ -130,12 +131,15 @@ export class ConfusionMatrixComponent { } } -export const ConfusionMatrix = { - controller: ConfusionMatrixComponent, - controllerAs: '$ctrl', - template, - bindings: { - matrix: '<', - keys: '<', - }, -}; +export const ConfusionMatrix = angular + .module('blipComponents.confusionMatrix', []) + .component('confusionMatrix', { + controller: ConfusionMatrixComponent, + controllerAs: '$ctrl', + template, + bindings: { + matrix: '<', + keys: '<', + }, + }) + .name; diff --git a/src/components/contentBoxes/index.js b/src/components/contentBoxes/index.js index 065fbf5d..901833f0 100644 --- a/src/components/contentBoxes/index.js +++ b/src/components/contentBoxes/index.js @@ -1,15 +1,19 @@ +import angular from 'angular'; import controller from './ContentBoxesController'; import template from './ContentBoxesView.html'; import './ContentBoxes.scss'; -export default { - controller, - template, - bindings: { - ngModel: '<', - maxDepth: '<', - childLevelItems: ' */ -export default { - controller: class { - tabs: any[]; - onChangeTab: ($event) => void; - constructor(private $rootScope: IScope) { - this.tabs = []; - } +export const contentTabs = angular + .module('blipComponents.contentTabs', []) + .component('contentTabs', { + controller: class { + tabs: any[]; + onChangeTab: ($event) => void; + constructor(private $rootScope: IScope) { + this.tabs = []; + } - showTab(tab) { - if (!tab.disabled && !tab.tabHref) { - this.$rootScope.$broadcast(ChangeTabEvent); - tab.showTab = true; - tab.isActive = true; - if (this.onChangeTab) { - const pos = this.tabs.findIndex( - (t) => t.tabTitle === tab.tabTitle, - ); - this.onChangeTab(EventEmitter({ pos })); + showTab(tab) { + if (!tab.disabled && !tab.tabHref) { + this.$rootScope.$broadcast(ChangeTabEvent); + tab.showTab = true; + tab.isActive = true; + if (this.onChangeTab) { + const pos = this.tabs.findIndex( + (t) => t.tabTitle === tab.tabTitle, + ); + this.onChangeTab(EventEmitter({ pos })); + } } } - } - }, - controllerAs: '$ctrl', - template, - bindings: { - onChangeTab: '&?', - }, - transclude: true, -}; + }, + controllerAs: '$ctrl', + template, + bindings: { + onChangeTab: '&?', + }, + transclude: true, + }) + .name; diff --git a/src/components/contentTabs/tab/index.ts b/src/components/contentTabs/tab/index.ts index 83152916..5fa0f0a1 100644 --- a/src/components/contentTabs/tab/index.ts +++ b/src/components/contentTabs/tab/index.ts @@ -1,36 +1,41 @@ -export const TabComponent = { - controller: class { - isActive: boolean; - showTab: boolean; - contentTabsCtrl: any; +import * as angular from 'angular'; - constructor(private $scope) { - this.showTab = false; - this.isActive = false; +export const TabComponent = angular + .module('blipComponents.tabComponent', []) + .component('tab', { + controller: class { + isActive: boolean; + showTab: boolean; + contentTabsCtrl: any; - $scope.$on('ChangeTab', () => { + constructor(private $scope) { this.showTab = false; this.isActive = false; - }); - } - $onInit() { - let parentCtrl = this.contentTabsCtrl; - if (parentCtrl.tabs.length == 0) { - this.showTab = true; - this.isActive = true; + $scope.$on('ChangeTab', () => { + this.showTab = false; + this.isActive = false; + }); + } + + $onInit() { + let parentCtrl = this.contentTabsCtrl; + if (parentCtrl.tabs.length == 0) { + this.showTab = true; + this.isActive = true; + } + parentCtrl.tabs.push(this); } - parentCtrl.tabs.push(this); + }, + controllerAs: '$ctrl', + template: '
', + transclude: true, + require: { + contentTabsCtrl: '^^contentTabs' + }, + bindings: { + tabTitle: '@', + tabHref: '@?', } - }, - controllerAs: '$ctrl', - template: '
', - transclude: true, - require: { - contentTabsCtrl: '^^contentTabs' - }, - bindings: { - tabTitle: '@', - tabHref: '@?', - } -}; + }) + .name; diff --git a/src/components/dropdownItem/index.ts b/src/components/dropdownItem/index.ts index e1916dfc..1caaf157 100644 --- a/src/components/dropdownItem/index.ts +++ b/src/components/dropdownItem/index.ts @@ -1,3 +1,4 @@ +import * as angular from 'angular'; import { DropdownItemController } from './DropdownItemController'; import template from './DropdownItemView.html'; @@ -16,22 +17,25 @@ import template from './DropdownItemView.html'; * @param {boolean} closeOnClick - Determines if menu should close when content is clicked * @param {expression} onOpen - Callback when dropdown is opened */ -export const dropdownItem = { - bindings: { - itemTitle: '@', - hideIcon: '
- - `, - controller: class { - constructor($element, $scope, $timeout) { - 'ngInject'; +export const expandable = angular + .module('blipComponents.expandable', []) + .component('expandable', { + transclude: true, + template: ` +
+ + `, + controller: class { + constructor($element, $scope, $timeout) { + 'ngInject'; - this.$element = $element; - this.$timeout = $timeout; - this.$scope = $scope; + this.$element = $element; + this.$timeout = $timeout; + this.$scope = $scope; - this.$scope.$on(Collapse, () => (this.collapsed = true)); - this.$scope.$on(Expand, () => (this.collapsed = false)); - this.$scope.$on(Toggle, () => this.toggle()); - } + this.$scope.$on(Collapse, () => (this.collapsed = true)); + this.$scope.$on(Expand, () => (this.collapsed = false)); + this.$scope.$on(Toggle, () => this.toggle()); + } - $onInit() { - this._initialCollapsed = this.collapsed !== false; - this.collapsed = this._initialCollapsed; - this.$timeout(() => - this.$timeout( - () => - (this.collapsed = - this._initialCollapsed && this.needsExpansion), - ), - ); - } + $onInit() { + this._initialCollapsed = this.collapsed !== false; + this.collapsed = this._initialCollapsed; + this.$timeout(() => + this.$timeout( + () => + (this.collapsed = + this._initialCollapsed && this.needsExpansion), + ), + ); + } - toggle() { - this.collapsed = !this.collapsed; - } + toggle() { + this.collapsed = !this.collapsed; + } - get needsExpansion() { - const div = this.$element.find('div')[0]; - return ( - div.scrollHeight > div.offsetHeight || - div.scrollWidth > div.offsetWidth - ); - } + get needsExpansion() { + const div = this.$element.find('div')[0]; + return ( + div.scrollHeight > div.offsetHeight || + div.scrollWidth > div.offsetWidth + ); + } - get style() { - return this.collapsed - ? { - 'white-space': 'nowrap', - 'text-overflow': 'ellipsis', - overflow: 'hidden', - 'max-height': this.height || '1.6em', - } - : { - 'white-space': 'inherit', - overflow: 'inherit', - 'max-height': 'auto', - }; - } - }, - controllerAs: '$ctrl', - bindings: { - title: '@?', - height: '@?', - collapsed: '=?', - }, -}; + get style() { + return this.collapsed + ? { + 'white-space': 'nowrap', + 'text-overflow': 'ellipsis', + overflow: 'hidden', + 'max-height': this.height || '1.6em', + } + : { + 'white-space': 'inherit', + overflow: 'inherit', + 'max-height': 'auto', + }; + } + }, + controllerAs: '$ctrl', + bindings: { + title: '@?', + height: '@?', + collapsed: '=?', + }, + }) + .name; diff --git a/src/components/expandableContent/expandableContent.component.ts b/src/components/expandableContent/expandableContent.component.ts index 30e9fcaa..cac6e16a 100644 --- a/src/components/expandableContent/expandableContent.component.ts +++ b/src/components/expandableContent/expandableContent.component.ts @@ -1,3 +1,4 @@ +import * as angular from 'angular'; import './expandableContent.scss'; import template from './ExpandableContentView.html'; import { IScope } from 'angular'; @@ -45,17 +46,20 @@ class ExpandableContent { } } -export const ExpandableContentComponent = { - controller: ExpandableContent, - transclude: { - itemHeader: '?itemHeader', - itemBody: '?itemBody', - }, - bindings: { - headerItems: '@?', - bodyItems: '@?', - defaultState: '', -}; +export const ExpandableList = angular + .module('blipComponents.expandableList', []) + .component('expandableList', { + controller: ExpandableListComponent, + transclude: true, + require: {}, + bindings: { + extras: '', + }); diff --git a/src/components/formField/index.js b/src/components/formField/index.js index bee622f9..f656dbf6 100644 --- a/src/components/formField/index.js +++ b/src/components/formField/index.js @@ -1,22 +1,26 @@ +import angular from 'angular'; import './formField.scss'; -export default { - template: ` -
- -
-
- `, - controllerAs: '$ctrl', - controller: class { - get isSmall() { - return typeof this.small === 'string'; - } - }, - transclude: true, - bindings: { - name: '@', - label: '@', - small: '@', - }, -}; +export const formField = angular + .module('blipComponents.formField', []) + .component('formField', { + template: ` +
+ +
+
+ `, + controllerAs: '$ctrl', + controller: class { + get isSmall() { + return typeof this.small === 'string'; + } + }, + transclude: true, + bindings: { + name: '@', + label: '@', + small: '@', + }, + }) + .name; diff --git a/src/components/icon-dpr/index.ts b/src/components/icon-dpr/index.ts index 9f053f36..a0bee183 100644 --- a/src/components/icon-dpr/index.ts +++ b/src/components/icon-dpr/index.ts @@ -2,35 +2,39 @@ // * DEPRECATED: Use component instead // */ import './icon-dpr.scss'; +import * as angular from 'angular'; -export const iconDpr = { - template: '', - controller: function() { - 'ngInject'; - this.size = this.size || 's'; - this.classes = this.iconClass - ? `icon icon-${this.iconClass}` - : `icon icon-material icon-${this.size}`; +export const iconDpr = angular + .module('blipComponents.iconDpr', []) + .component('iconDpr', { + template: '', + controller: function() { + 'ngInject'; + this.size = this.size || 's'; + this.classes = this.iconClass + ? `icon icon-${this.iconClass}` + : `icon icon-material icon-${this.size}`; - if (typeof this.avatar === 'string') { - this.classes += ' icon-avatar'; - } + if (typeof this.avatar === 'string') { + this.classes += ' icon-avatar'; + } - if (typeof this.border === 'string') { - this.classes += ' icon-border'; - } + if (typeof this.border === 'string') { + this.classes += ' icon-border'; + } - if (typeof this.round === 'string') { - this.classes += ' round'; - } - }, - controllerAs: '$ctrl', - transclude: true, - bindings: { - size: '@', - avatar: '@', - border: '@', - round: '@', - iconClass: '@?', - }, -}; + if (typeof this.round === 'string') { + this.classes += ' round'; + } + }, + controllerAs: '$ctrl', + transclude: true, + bindings: { + size: '@', + avatar: '@', + border: '@', + round: '@', + iconClass: '@?', + }, + }) + .name; diff --git a/src/components/icon/icon.component.ts b/src/components/icon/icon.component.ts index 94d23786..fd821b12 100644 --- a/src/components/icon/icon.component.ts +++ b/src/components/icon/icon.component.ts @@ -1,3 +1,4 @@ +import * as angular from 'angular'; import { IComponentController } from 'angular'; import { strToEl } from 'data/function'; @@ -48,13 +49,16 @@ class IconController implements IComponentController { } } -export const IconComponent = { - controller: IconController, - controllerAs: '$ctrl', - bindings: { - name: '@?', - color: '@?', - width: '@?', - height: '@?', - } -}; +export const IconComponent = angular + .module('blipComponents.iconComponent', []) + .component('icon', { + controller: IconController, + controllerAs: '$ctrl', + bindings: { + name: '@?', + color: '@?', + width: '@?', + height: '@?', + } + }) + .name; diff --git a/src/components/iconButton/index.js b/src/components/iconButton/index.js index c16a87c2..6f2b5282 100644 --- a/src/components/iconButton/index.js +++ b/src/components/iconButton/index.js @@ -1,23 +1,27 @@ import './iconButton.scss'; +import * as angular from 'angular'; -export default { - template: ` - - `, - controller: function() { - 'ngInject'; - this.color = this.color || 'disabled'; - }, - controllerAs: '$ctrl', - transclude: true, - bindings: { - color: '@', - size: '@', - btnSize: '@', - round: '@', - iconClass: '@', - disabled: '=?', - }, -}; +export const iconButton = angular + .module('blipComponents.iconButton', []) + .component('iconButton', { + template: ` + + `, + controller: function() { + 'ngInject'; + this.color = this.color || 'disabled'; + }, + controllerAs: '$ctrl', + transclude: true, + bindings: { + color: '@', + size: '@', + btnSize: '@', + round: '@', + iconClass: '@', + disabled: '=?', + }, + }) + .name; diff --git a/src/components/infoHeader/infoHeader.component.ts b/src/components/infoHeader/infoHeader.component.ts index e1ad62e3..ece5dc06 100644 --- a/src/components/infoHeader/infoHeader.component.ts +++ b/src/components/infoHeader/infoHeader.component.ts @@ -1,3 +1,5 @@ +import * as angular from 'angular'; + export class InfoHeaderComponent { showInfo: boolean; constructor() {} @@ -8,27 +10,30 @@ export class InfoHeaderComponent { } } -export const InfoHeader = { - controller: InfoHeaderComponent, - transclude: { - header: '?header', - info: '?info', - extra: '?extra' - }, - bindings: { - showInfo: ' - - - - +export const InfoHeader = angular + .module('blipComponents.infoHeader', []) + .component('infoHeader', { + controller: InfoHeaderComponent, + transclude: { + header: '?header', + info: '?info', + extra: '?extra' + }, + bindings: { + showInfo: ' + + + + + + - - - - `, -}; + + `, + }) + .name; diff --git a/src/components/inputList/index.js b/src/components/inputList/index.js index 2e11a60b..620ef69a 100644 --- a/src/components/inputList/index.js +++ b/src/components/inputList/index.js @@ -1,3 +1,4 @@ +import * as angular from 'angular'; import './inputList.scss'; import controller from './InputListController'; import template from './InputListView.html'; @@ -6,26 +7,29 @@ export const RepeatedItem = 'inputListRepeatedItem'; export const SuccessfullyInsert = 'successfullyInsert'; export const ClearInput = 'clearInput'; -export default { - require: { - ngModel: '?ngModel', - }, - template, - controller, - controllerAs: '$ctrl', - transclude: true, - bindings: { - maxItems: ' @@ -38,16 +40,19 @@ class ListItems { } } -export const ListItemsComponent = { - controller: ListItems, - controllerAs: '$ctrl', - template: ` -
- utils.misc.selectAll -
-
`, - transclude: true, - bindings: { - selectAll: ' + utils.misc.selectAll + +
`, + transclude: true, + bindings: { + selectAll: 'LocalLoading) + .name; diff --git a/src/components/materialInput/materialInput.component.ts b/src/components/materialInput/materialInput.component.ts index 7fb84189..8a065f15 100644 --- a/src/components/materialInput/materialInput.component.ts +++ b/src/components/materialInput/materialInput.component.ts @@ -105,14 +105,17 @@ export class MaterialInputComponent { } } -export const materialInput = { - controller: MaterialInputComponent, - controllerAs: '$ctrl', - transclude: true, - bindings: { - initialValue: ' - `, -}; +export const materialInput = angular + .module('blipComponents.materialInput', []) + .component('materialInput', { + controller: MaterialInputComponent, + controllerAs: '$ctrl', + transclude: true, + bindings: { + initialValue: ' + `, + }) + .name; diff --git a/src/components/radio/radio.components.ts b/src/components/radio/radio.components.ts index 332582b3..2b8c0fbf 100644 --- a/src/components/radio/radio.components.ts +++ b/src/components/radio/radio.components.ts @@ -1,4 +1,5 @@ import './radio.scss'; +import * as angular from 'angular'; export class RadioComponent { public value: string; @@ -21,26 +22,29 @@ export class RadioComponent { } } -export const Radio = { - controller: RadioComponent, - controllerAs: '$ctrl', - transclude: true, - require: { - ngModel: '?ngModel', - }, - bindings: { - value: '@', - group: '@', - refer: '@', - checked: '@?', - }, - template: ` - - - `, -}; +export const Radio = angular + .module('blipComponents.radio', []) + .component('radio', { + controller: RadioComponent, + controllerAs: '$ctrl', + transclude: true, + require: { + ngModel: '?ngModel', + }, + bindings: { + value: '@', + group: '@', + refer: '@', + checked: '@?', + }, + template: ` + + + `, + }) + .name; diff --git a/src/components/savingState/savingState.component.ts b/src/components/savingState/savingState.component.ts index 60de6268..6c41d4bb 100644 --- a/src/components/savingState/savingState.component.ts +++ b/src/components/savingState/savingState.component.ts @@ -1,3 +1,4 @@ +import * as angular from 'angular'; import './savingState.scss'; import * as saveSpinner from 'assets/img/loading3.png'; import * as saveCheck from 'assets/img/checked.png'; @@ -10,19 +11,22 @@ export class SavingStateComponent { } } -export const savingState = { - controller: SavingStateComponent, - controllerAs: '$ctrl', - transclude: true, - bindings: {}, - template: `
-
- - utils.misc.savedMsg -
-
- - utils.misc.savingMsg -
-
`, -}; +export const savingState = angular + .module('blipComponents.savingState', []) + .component('savingState', { + controller: SavingStateComponent, + controllerAs: '$ctrl', + transclude: true, + bindings: {}, + template: `
+
+ + utils.misc.savedMsg +
+
+ + utils.misc.savingMsg +
+
`, + }) + .name; diff --git a/src/components/scrollContent/index.js b/src/components/scrollContent/index.js index 366a2c66..1efc52ca 100644 --- a/src/components/scrollContent/index.js +++ b/src/components/scrollContent/index.js @@ -1,24 +1,26 @@ +import angular from 'angular'; import './scrollContent.scss'; -let ScrollContentComponent = { - template: ` -
- `, - controller: class { - get style() { - return { - 'max-height': - typeof this.height === 'number' - ? `${this.height}px` - : 'auto', - }; - } - }, - controllerAs: '$ctrl', - transclude: true, - bindings: { - height: '<', - }, -}; - -export default ScrollContentComponent; +export const ScrollContentComponent = angular + .module('blipComponents.scrollContent', []) + .component('scrollContent', { + template: ` +
+ `, + controller: class { + get style() { + return { + 'max-height': + typeof this.height === 'number' + ? `${this.height}px` + : 'auto', + }; + } + }, + controllerAs: '$ctrl', + transclude: true, + bindings: { + height: '<', + }, + }) + .name; diff --git a/src/components/searchInput/searchInput.component.ts b/src/components/searchInput/searchInput.component.ts index ed13d10b..bc0dd8ce 100644 --- a/src/components/searchInput/searchInput.component.ts +++ b/src/components/searchInput/searchInput.component.ts @@ -1,63 +1,66 @@ -import './searchInput.scss'; import angular from 'angular'; +import './searchInput.scss'; -export const SearchInputComponent = { - controller: class { - ngModel: any; - onInputChange: any; - input: any; +export const SearchInputComponent = angular + .module('blipComponents.searchInput', []) + .component('searchInput', { + controller: class { + ngModel: any; + onInputChange: any; + input: any; - constructor(private $document, private $timeout, private $element) {} + constructor(private $document, private $timeout, private $element) {} - focusInput() { - if (!this.input) { - const inputElement = this.$element[0].querySelector('#search-input-area input'); - if (!inputElement) { - return; - } - this.input = inputElement; - this.input.addEventListener('blur', () => { - if (this.input.value) { + focusInput() { + if (!this.input) { + const inputElement = this.$element[0].querySelector('#search-input-area input'); + if (!inputElement) { return; } + this.input = inputElement; + this.input.addEventListener('blur', () => { + if (this.input.value) { + return; + } + this.input.classList.remove('input-focused'); + }); + } + + if (this.input.getAttribute('class').indexOf('input-focused') > -1) { this.input.classList.remove('input-focused'); - }); + } else { + this.input.classList.add('input-focused'); + this.$timeout(() => { + this.input.focus(); + }, 0); + } } - if (this.input.getAttribute('class').indexOf('input-focused') > -1) { - this.input.classList.remove('input-focused'); - } else { - this.input.classList.add('input-focused'); - this.$timeout(() => { - this.input.focus(); - }, 0); + $onChange() { + this.onInputChange(); } - } - - $onChange() { - this.onInputChange(); - } - set model(value) { - if (this.ngModel) { - this.ngModel.$setViewValue(value); + set model(value) { + if (this.ngModel) { + this.ngModel.$setViewValue(value); + } + } + get model() { + return this.ngModel ? this.ngModel.$viewValue : undefined; } - } - get model() { - return this.ngModel ? this.ngModel.$viewValue : undefined; - } - }, - controllerAs: '$ctrl', - template: ` -
- -
-
`, - transclude: true, - bindings: { - onInputChange: '&', - }, - require: { - ngModel: '?ngModel', - }, -}; + }, + controllerAs: '$ctrl', + template: ` +
+ +
+
`, + transclude: true, + bindings: { + onInputChange: '&', + }, + require: { + ngModel: '?ngModel', + }, + }) + .name; diff --git a/src/components/sidenavMenu/index.js b/src/components/sidenavMenu/index.js index 588b18a9..a164e961 100644 --- a/src/components/sidenavMenu/index.js +++ b/src/components/sidenavMenu/index.js @@ -1,18 +1,21 @@ -export default { - template: ` -
    -
- `, - controller: class { - get isOrdered() { - return typeof this.ordered === 'string'; - } - }, - controllerAs: '$ctrl', - transclude: true, - bindings: { - ordered: '@', - }, -}; +export const sidenavMenu = angular + .module('blipComponents.sidenavMenu', []) + .component('sidenavMenu', { + template: ` +
    +
+ `, + controller: class { + get isOrdered() { + return typeof this.ordered === 'string'; + } + }, + controllerAs: '$ctrl', + transclude: true, + bindings: { + ordered: '@', + }, + }) + .name; diff --git a/src/components/sidenavMenuItem/index.ts b/src/components/sidenavMenuItem/index.ts index 5fccfb98..aaa174cd 100644 --- a/src/components/sidenavMenuItem/index.ts +++ b/src/components/sidenavMenuItem/index.ts @@ -1,157 +1,161 @@ +import * as angular from 'angular'; import template from './SidenavMenuItemView.html'; import './SidenavMenuItem.scss'; export const SideNavToggleEventNewChildren = 'SideNavToggleExpand'; export const SideNavToggleEventExpand = 'SideNavToggleExpand2'; -export default { - template: template, - controller: class { - sparams: any; - sref: any; - icon: any; - parent: any; - childrenActive: boolean; - _isNewFather: boolean; - _isNewChildren: boolean; - hasChildren: any; - preventDefault: boolean; - isNew: boolean; - $onInit: () => void; - - constructor( - private $state, - private $element, - private $rootScope, - private AccountService, - ) { - 'ngInject'; - this.$rootScope = $rootScope; - this.$state = $state; - this.$element = $element; - this.AccountService = AccountService; - this.hasChildren = this.hasChildren || false; - this.preventDefault = this.preventDefault == false ? false : true; - this._isNewChildren = false; - this._isNewFather = false; - - if (this.$state.includes(this.sref)) { - this.childrenActive = true; - this._isNewChildren = true; - this._isNewFather = true; - } - this.$onInit = () => { - this.parent = this._findParent(); - if (this.parent) { - this.parent.hasChildren = true; +export const sidenavMenuItem = angular + .module('blipComponents.sidenavMenuItem', []) + .component('sidenavMenuItem', { + template: template, + controller: class { + sparams: any; + sref: any; + icon: any; + parent: any; + childrenActive: boolean; + _isNewFather: boolean; + _isNewChildren: boolean; + hasChildren: any; + preventDefault: boolean; + isNew: boolean; + $onInit: () => void; + + constructor( + private $state, + private $element, + private $rootScope, + private AccountService, + ) { + 'ngInject'; + this.$rootScope = $rootScope; + this.$state = $state; + this.$element = $element; + this.AccountService = AccountService; + this.hasChildren = this.hasChildren || false; + this.preventDefault = this.preventDefault == false ? false : true; + this._isNewChildren = false; + this._isNewFather = false; + + if (this.$state.includes(this.sref)) { + this.childrenActive = true; + this._isNewChildren = true; + this._isNewFather = true; } + this.$onInit = () => { + this.parent = this._findParent(); + if (this.parent) { + this.parent.hasChildren = true; + } - $rootScope.$on(SideNavToggleEventNewChildren, () => { - this._isNewChildren = false; - }); + $rootScope.$on(SideNavToggleEventNewChildren, () => { + this._isNewChildren = false; + }); - $rootScope.$on(SideNavToggleEventExpand, () => { - this._isNewFather = false; - }); + $rootScope.$on(SideNavToggleEventExpand, () => { + this._isNewFather = false; + }); - }; - } + }; + } - toggleExpand(e) { - this.childrenActive = true; + toggleExpand(e) { + this.childrenActive = true; - if (this.isNew) { - localStorage.setItem(`clicked-${this.sref}`, 'true'); - this.isNew = false; - } - if (this._isNewChildren && this._isNewFather) { - this.$rootScope.$broadcast(SideNavToggleEventExpand); - } else { - this.$rootScope.$broadcast(SideNavToggleEventExpand); - this._isNewChildren = true; - if (this.hasChildren) { - this._isNewFather = true; - if (this.preventDefault) { - e.preventDefault(); - } + if (this.isNew) { + localStorage.setItem(`clicked-${this.sref}`, 'true'); + this.isNew = false; + } + if (this._isNewChildren && this._isNewFather) { + this.$rootScope.$broadcast(SideNavToggleEventExpand); } else { - this.$rootScope.$broadcast(SideNavToggleEventNewChildren); + this.$rootScope.$broadcast(SideNavToggleEventExpand); this._isNewChildren = true; - this.parent = this._findParent(); - - if (this.parent) { - this.parent._isNewFather = true; - this.childrenActive = true; + if (this.hasChildren) { + this._isNewFather = true; + if (this.preventDefault) { + e.preventDefault(); + } + } else { + this.$rootScope.$broadcast(SideNavToggleEventNewChildren); + this._isNewChildren = true; + this.parent = this._findParent(); + + if (this.parent) { + this.parent._isNewFather = true; + this.childrenActive = true; + } } } } - } - - get isChildrenActive() { - //Remove when reports are removed from sidenav - if (this.sparams && this.$state.params.reportId) { - return ( - this.$state.includes(this.sref) && - this.$state.params.reportId === this.sparams.reportId - ); - } - return this.$state.includes(this.sref); - } - - get spanStyle() { - return { - 'margin-left': this.hasIcon ? '0.9rem' : '0', - }; - } - - get hasIcon() { - return typeof this.icon === 'string'; - } - - get chevronIcon() { - return this._isNewFather ? '\uE316' : '\uE313'; - } - - get href() { - return this.$state.href(this.sref, this.sparams); - } - - get isExpanded() { - return this._isNewChildren ? true : false; - } - - set isExpanded(value) { - this._isNewChildren = value; - } - - _findParent(levelMin = 3, levelMax = 4) { - let $parent = this.$element.parent(); - for ( - let i = levelMin; - i < levelMax; - i++, $parent = $parent.parent() - ) { - if ($parent.controller('menuItem')) { - return $parent.controller('menuItem'); + get isChildrenActive() { + //Remove when reports are removed from sidenav + if (this.sparams && this.$state.params.reportId) { + return ( + this.$state.includes(this.sref) && + this.$state.params.reportId === this.sparams.reportId + ); } + + return this.$state.includes(this.sref); + } + + get spanStyle() { + return { + 'margin-left': this.hasIcon ? '0.9rem' : '0', + }; + } + + get hasIcon() { + return typeof this.icon === 'string'; + } + + get chevronIcon() { + return this._isNewFather ? '\uE316' : '\uE313'; + } + + get href() { + return this.$state.href(this.sref, this.sparams); + } + + get isExpanded() { + return this._isNewChildren ? true : false; + } + + set isExpanded(value) { + this._isNewChildren = value; } - return undefined; - } - }, - controllerAs: '$ctrl', - transclude: true, - bindings: { - title: '@', - subtitle: '@', - icon: '@', - active: '@', - sref: '@', - sparams: '<', - preventDefault: 'ChipsComponent) - .component('contentTabs', ContentTabsComponent) - .component('tab', TabComponent) - .component('confusionMatrix', ConfusionMatrix) - .component('letterAvatar', letterAvatar) - .component('subheaderIcons', SubheaderIconsComponent) - .component('localLoading', LocalLoadingComponent) - .component('searchInput', SearchInputComponent) - .component('listItems', ListItemsComponent) + // .component('iconButton', iconButton) + // .component('infoHeader', InfoHeader) + // .component('inputList', inputList) + // .component('scrollContent', ScrollContentComponent) + // .component('sidenavMenu', sidenavMenu) + // .component('sidenavMenuItem', sidenavMenuItem) + // .component('switch', SwitchComponent) + // .component('timepicker', TimepickerComponent) + // .component('toggleButton', ToggleButtonComponent) + // .component('dropdownItem', dropdownItem) + // .component('chips', ChipsComponent) + // .component('contentTabs', ContentTabsComponent) + // .component('tab', TabComponent) + // .component('confusionMatrix', ConfusionMatrix) + // .component('letterAvatar', letterAvatar) + // .component('subheaderIcons', SubheaderIconsComponent) + // .component('localLoading', LocalLoadingComponent) + // .component('searchInput', SearchInputComponent) + // .component('listItems', ListItemsComponent) .component('listItem', ListItemComponent) .component('customSelect', CustomSelectComponent) .component('selectItem', SelectItemComponent)