From 51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 Mon Sep 17 00:00:00 2001 From: Tal Gitelman Date: Sun, 10 Dec 2017 18:55:03 +0200 Subject: Final commit to master merge from Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman --- .../menu-list-ng2/menu-list-ng2.component.html | 7 + .../menu-list-ng2/menu-list-ng2.component.ts | 36 +++ .../menu-list-ng2/menu-list-ng2.module.ts | 23 ++ .../dynamic-element/dynamic-element.component.less | 3 - .../dynamic-element/dynamic-element.component.ts | 145 ----------- .../dynamic-element/dynamic-element.module.ts | 56 ----- .../checkbox/ui-element-checkbox.component.html | 1 - .../checkbox/ui-element-checkbox.component.less | 2 - .../checkbox/ui-element-checkbox.component.ts | 47 ---- .../dropdown/ui-element-dropdown.component.html | 3 - .../dropdown/ui-element-dropdown.component.less | 11 - .../dropdown/ui-element-dropdown.component.ts | 52 ---- .../input/ui-element-input.component.html | 15 -- .../input/ui-element-input.component.less | 17 -- .../input/ui-element-input.component.ts | 41 --- .../ui-element-integer-input.component.html | 15 -- .../ui-element-integer-input.component.less | 17 -- .../ui-element-integer-input.component.ts | 41 --- .../ui-element-popover-input.component.html | 26 -- .../ui-element-popover-input.component.less | 36 --- .../ui-element-popover-input.component.ts | 58 ----- .../elements-ui/ui-element-base.component.ts | 55 ---- .../filter-properties-assignment.component.html | 26 -- .../filter-properties-assignment.component.less | 45 ---- .../filter-properties-assignment.component.ts | 97 ------- .../hierarchy-display-options.ts | 32 --- .../hierarchy-navigation.component.html | 13 - .../hierarchy-navigation.component.less | 52 ---- .../hierarchy-navigation.component.ts | 48 ---- .../inputs-table/inputs-table.component.html | 49 ---- .../inputs-table/inputs-table.component.less | 164 ------------ .../inputs-table/inputs-table.component.ts | 64 ----- .../src/app/ng2/components/layout/layout.module.ts | 24 ++ .../layout/top-nav/top-nav.component.html | 53 ++++ .../layout/top-nav/top-nav.component.less | 225 +++++++++++++++++ .../components/layout/top-nav/top-nav.component.ts | 149 +++++++++++ .../ng2/components/loader/loader.component.html | 6 - .../ng2/components/loader/loader.component.less | 91 ------- .../app/ng2/components/loader/loader.component.ts | 86 ------- .../filter-properties-assignment.component.html | 27 ++ .../filter-properties-assignment.component.less | 45 ++++ .../filter-properties-assignment.component.ts | 97 +++++++ .../hierarchy-display-options.ts | 32 +++ .../hierarchy-navigation.component.html | 13 + .../hierarchy-navigation.component.less | 52 ++++ .../hierarchy-navigation.component.ts | 48 ++++ .../logic/inputs-table/inputs-table.component.html | 49 ++++ .../logic/inputs-table/inputs-table.component.less | 164 ++++++++++++ .../logic/inputs-table/inputs-table.component.ts | 62 +++++ .../dynamic-property.component.html | 67 +++++ .../dynamic-property.component.less | 84 +++++++ .../dynamic-property/dynamic-property.component.ts | 206 +++++++++++++++ .../pipes/filterChildProperties.pipe.ts | 38 +++ .../properties-table.component.html | 63 +++++ .../properties-table.component.less | 180 +++++++++++++ .../properties-table/properties-table.component.ts | 91 +++++++ .../properties-table/property-table.module.ts | 29 +++ ...select-reqiurement-or-capability.component.less | 77 ++++++ ...select-requirement-or-capability.component.html | 36 +++ .../select-requirement-or-capability.component.ts | 182 ++++++++++++++ .../select-requirement-or-capability.module.ts | 24 ++ .../error-message/error-message.component.html | 5 - .../modal/error-message/error-message.component.ts | 38 --- .../app/ng2/components/modal/modal.component.html | 20 -- .../app/ng2/components/modal/modal.component.less | 128 ---------- .../app/ng2/components/modal/modal.component.ts | 62 ----- .../src/app/ng2/components/modal/modal.module.ts | 22 -- .../popover/popover-content.component.html | 24 -- .../popover/popover-content.component.less | 77 ------ .../popover/popover-content.component.ts | 278 --------------------- .../ng2/components/popover/popover.component.ts | 179 ------------- .../app/ng2/components/popover/popover.module.ts | 47 ---- .../dynamic-property.component.html | 66 ----- .../dynamic-property.component.less | 74 ------ .../dynamic-property/dynamic-property.component.ts | 205 --------------- .../properties-table.component.html | 63 ----- .../properties-table.component.less | 166 ------------ .../properties-table/properties-table.component.ts | 92 ------- .../tooltip/tooltip-content.component.html | 12 - .../tooltip/tooltip-content.component.less | 11 - .../tooltip/tooltip-content.component.ts | 215 ---------------- .../ng2/components/tooltip/tooltip.component.ts | 109 -------- .../app/ng2/components/tooltip/tooltip.module.ts | 45 ---- .../dynamic-element/dynamic-element.component.less | 3 + .../dynamic-element/dynamic-element.component.ts | 140 +++++++++++ .../ui/dynamic-element/dynamic-element.module.ts | 43 ++++ .../checkbox/checkbox.component.html | 8 + .../checkbox/checkbox.component.less | 67 +++++ .../form-components/checkbox/checkbox.component.ts | 50 ++++ .../ui/form-components/checkbox/checkbox.module.ts | 48 ++++ .../dropdown/ui-element-dropdown.component.html | 3 + .../dropdown/ui-element-dropdown.component.less | 11 + .../dropdown/ui-element-dropdown.component.ts | 51 ++++ .../ui/form-components/form-elements.module.ts | 42 ++++ .../input/ui-element-input.component.html | 14 ++ .../input/ui-element-input.component.less | 17 ++ .../input/ui-element-input.component.ts | 41 +++ .../ui-element-integer-input.component.html | 14 ++ .../ui-element-integer-input.component.less | 17 ++ .../ui-element-integer-input.component.ts | 41 +++ .../ui-element-popover-input.component.html | 26 ++ .../ui-element-popover-input.component.less | 36 +++ .../ui-element-popover-input.component.ts | 57 +++++ .../radio-buttons/radio-button.component.less | 42 ++++ .../radio-buttons/radio-buttons.component.html | 8 + .../radio-buttons/radio-buttons.component.ts | 29 +++ .../form-components/ui-element-base.component.ts | 55 ++++ .../ng2/components/ui/loader/loader.component.html | 6 + .../ng2/components/ui/loader/loader.component.less | 91 +++++++ .../ng2/components/ui/loader/loader.component.ts | 86 +++++++ .../components/ui/menu/menu-item.component.html | 3 + .../components/ui/menu/menu-item.component.less | 13 + .../ng2/components/ui/menu/menu-item.component.ts | 44 ++++ .../components/ui/menu/menu-list.component.html | 9 + .../components/ui/menu/menu-list.component.less | 13 + .../ng2/components/ui/menu/menu-list.component.ts | 70 ++++++ .../app/ng2/components/ui/menu/menu-list.module.ts | 27 ++ .../error-message/error-message.component.html | 5 + .../modal/error-message/error-message.component.ts | 38 +++ .../ng2/components/ui/modal/modal.component.html | 21 ++ .../ng2/components/ui/modal/modal.component.less | 129 ++++++++++ .../app/ng2/components/ui/modal/modal.component.ts | 62 +++++ .../app/ng2/components/ui/modal/modal.module.ts | 22 ++ .../multi-steps-wizard-header-base.component.ts | 10 + .../multi-steps-wizard.component.html | 57 +++++ .../multi-steps-wizard.component.less | 90 +++++++ .../multi-steps-wizard.component.ts | 78 ++++++ .../multi-steps-wizard.module.ts | 22 ++ .../components/ui/navbar/navbar-routes.config.ts | 27 ++ .../ng2/components/ui/navbar/navbar.component.html | 23 ++ .../ng2/components/ui/navbar/navbar.component.less | 11 + .../ng2/components/ui/navbar/navbar.component.ts | 52 ++++ .../ng2/components/ui/navbar/navbar.metadata.ts | 31 +++ .../app/ng2/components/ui/navbar/navbar.module.ts | 36 +++ .../ui/popover/popover-content.component.html | 24 ++ .../ui/popover/popover-content.component.less | 77 ++++++ .../ui/popover/popover-content.component.ts | 278 +++++++++++++++++++++ .../ng2/components/ui/popover/popover.component.ts | 179 +++++++++++++ .../ng2/components/ui/popover/popover.module.ts | 45 ++++ .../ui/search-bar/search-bar.component.html | 5 + .../ui/search-bar/search-bar.component.less | 57 +++++ .../ui/search-bar/search-bar.component.ts | 32 +++ .../search-with-autocomplete.component.html | 6 + .../search-with-autocomplete.component.less | 34 +++ .../search-with-autocomplete.component.ts | 30 +++ .../ng2/components/ui/tabs/tab/tab.component.ts | 38 +++ .../app/ng2/components/ui/tabs/tabs.component.html | 9 + .../app/ng2/components/ui/tabs/tabs.component.less | 85 +++++++ .../app/ng2/components/ui/tabs/tabs.component.ts | 78 ++++++ .../src/app/ng2/components/ui/tabs/tabs.module.ts | 55 ++++ .../ui/tooltip/tooltip-content.component.html | 12 + .../ui/tooltip/tooltip-content.component.less | 11 + .../ui/tooltip/tooltip-content.component.ts | 215 ++++++++++++++++ .../ng2/components/ui/tooltip/tooltip.component.ts | 109 ++++++++ .../ng2/components/ui/tooltip/tooltip.module.ts | 44 ++++ .../app/ng2/components/ui/ui-elements.module.ts | 80 ++++++ 156 files changed, 5625 insertions(+), 3352 deletions(-) create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/layout/layout.module.ts create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.html delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.less delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html delete mode 100644 catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.html delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.less delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.html delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.less delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts (limited to 'catalog-ui/src/app/ng2/components') diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html new file mode 100644 index 0000000000..37686342e8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html @@ -0,0 +1,7 @@ + + + {{ item?.contents }} + + diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts new file mode 100644 index 0000000000..85d1899d96 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input } from '@angular/core'; + +declare var window:any; +@Component({ + selector: 'canvas-menu', + templateUrl: './menu-list-ng2.component.html' +}) +export class MenuListNg2Component { + @Input() props:any = { + items: [] + }; + + constructor() { + window.menu2 = this; + } +} diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts new file mode 100644 index 0000000000..957ba35c5a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { MenuListModule } from "../../ui/menu/menu-list.module"; +import { MenuListNg2Component } from "./menu-list-ng2.component"; + +export { + MenuListNg2Component +}; + +@NgModule({ + declarations: [ + MenuListNg2Component + ], + imports: [CommonModule, MenuListModule], + exports: [ + MenuListNg2Component + ], + entryComponents: [ //need to add anything that will be dynamically created + MenuListNg2Component +] +}) +export class MenuListNg2Module { +} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less deleted file mode 100644 index e219d49aa4..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less +++ /dev/null @@ -1,3 +0,0 @@ -dynamic-element { - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts deleted file mode 100644 index 246258e44f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts +++ /dev/null @@ -1,145 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core' -import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component'; -import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component'; -import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component'; -import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component"; -import {ValidationConfiguration} from "app/models"; -import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; - -@Component({ - selector: 'dynamic-element', - template: `
`, - styleUrls: ['./dynamic-element.component.less'], - entryComponents: [ - UiElementInputComponent, - UiElementDropDownComponent, - UiElementCheckBoxComponent, - UiElementPopoverInputComponent, - UiElementIntegerInputComponent - ] -}) -export class DynamicElementComponent { - - @ViewChild('target', { read: ViewContainerRef }) target: any; - @Input() type: any; - @Input() name: string; - @Input() readonly:boolean; - @Input() path:string;//optional param. used only for for subnetpoolid type - value:any; - - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') emitter: EventEmitter = new EventEmitter(); - @Input('value') set setValueValue(value) { - this.value = value; - } - - cmpRef: ComponentRef; - private isViewInitialized: boolean = false; - validation = ValidationConfiguration.validation; - - constructor( - private componentFactoryResolver: ComponentFactoryResolver, - private compiler: Compiler, - private el: ElementRef) { - } - - updateComponent() { - if (!this.isViewInitialized) { - return; - } - if (this.cmpRef) { - this.cmpRef.destroy(); - } - - // Factory to create component based on type or peroperty name. - switch(this.type) { - case 'list': - case 'integer': - this.createComponent(UiElementIntegerInputComponent); - this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; - break; - case 'string': - if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { - if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name - let pathArray = this.path.split("#"); - this.name = pathArray[pathArray.length - 2]; - } - this.createComponent(UiElementPopoverInputComponent); - } - else { - this.createComponent(UiElementInputComponent); - } - break; - case 'boolean': - //this.createComponent(UiElementCheckBoxComponent); - - this.createComponent(UiElementDropDownComponent); - - // Build drop down values - let tmp = []; - tmp.push(new DropdownValue('true','TRUE')); - tmp.push(new DropdownValue('false','FALSE')); - this.cmpRef.instance.values = tmp; - break; - default: - this.createComponent(UiElementInputComponent); - console.log("ERROR: No ui component to handle type: " + this.type); - } - - // Additional attributes in base element class - if (this.cmpRef) { - this.cmpRef.instance.name = this.name; - this.cmpRef.instance.type = this.type; - this.cmpRef.instance.value = this.value; - this.cmpRef.instance.readonly = this.readonly; - } - - // Subscribe to change event of of ui-element-basic and fire event to change the value - this.cmpRef.instance.baseEmitter.subscribe((value):void => { - this.emitter.emit(value) - }); - - } - - createComponent(ComponentToCreate:any):void { - let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate); - this.cmpRef = this.target.createComponent(factory); - } - - ngOnChanges() { - this.updateComponent(); - } - - ngAfterContentInit() { - //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value); - this.isViewInitialized = true; - this.updateComponent(); - } - - ngOnDestroy() { - if (this.cmpRef) { - this.cmpRef.destroy(); - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts deleted file mode 100644 index b57020a1d0..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from "@angular/core"; -import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component'; -import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component'; -import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component'; -import { DynamicElementComponent } from "app/ng2/components/dynamic-element/dynamic-element.component"; -import { BrowserModule } from '@angular/platform-browser' -import { FormsModule, ReactiveFormsModule } from '@angular/forms' -import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component"; -import {PopoverModule} from "../popover/popover.module"; -import {TooltipModule} from "../tooltip/tooltip.module"; -import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; - -@NgModule({ - declarations: [ - DynamicElementComponent, - UiElementInputComponent, - UiElementCheckBoxComponent, - UiElementDropDownComponent, - UiElementPopoverInputComponent, - UiElementIntegerInputComponent - ], - imports: [ - BrowserModule, - FormsModule, - PopoverModule, - ReactiveFormsModule, - TooltipModule - ], - exports: [ - DynamicElementComponent - ], - providers: [] -}) -export class DynamicElementModule { - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html deleted file mode 100644 index a3e28c5f0b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less deleted file mode 100644 index bed097fe5e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less +++ /dev/null @@ -1,2 +0,0 @@ -/deep/ ui-element-checkbox { -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts deleted file mode 100644 index f73afd42c7..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-checkbox', - templateUrl: './ui-element-checkbox.component.html', - styleUrls: ['./ui-element-checkbox.component.less'], -}) -export class UiElementCheckBoxComponent extends UiElementBase implements UiElementBaseInterface { - - constructor() { - super(); - } - - ngAfterContentInit() { - // Convert the value to boolean (instanceOf does not work, the type is undefined). - if (this.value==='true' || this.value==='false') { - this.value = this.value==='true'?true:false; - } - } - - onSave() { - this.baseEmitter.emit(this.value); - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html deleted file mode 100644 index bfb927af71..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less deleted file mode 100644 index ea3e35140e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-dropdown { - - select { - text-indent: 6px; - border: solid 1px @main_color_o; - width: 100%; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts deleted file mode 100644 index 970c61531f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, EventEmitter, Output, Input } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -export class DropdownValue { - value:string; - label:string; - - constructor(value:string,label:string) { - this.value = value; - this.label = label; - } -} - -@Component({ - selector: 'ui-element-dropdown', - templateUrl: './ui-element-dropdown.component.html', - styleUrls: ['./ui-element-dropdown.component.less'], -}) -export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { - @Input() - values: DropdownValue[]; - - constructor() { - super(); - } - - onSave() { - this.baseEmitter.emit(JSON.parse(this.value)); - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html deleted file mode 100644 index 814ebfd28b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less deleted file mode 100644 index d320c7ff8b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-input { - - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts deleted file mode 100644 index fb3b3db859..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-input', - templateUrl: './ui-element-input.component.html', - styleUrls: ['./ui-element-input.component.less'], -}) -export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { - super(); - this.pattern = this.validation.validationPatterns.comment; - } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - } - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html deleted file mode 100644 index e5518d453f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less deleted file mode 100644 index 8073c3858e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-integer-input { - - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts deleted file mode 100644 index 3339b605ca..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-integer-input', - templateUrl: './ui-element-integer-input.component.html', - styleUrls: ['./ui-element-integer-input.component.less'], -}) -export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { - super(); - this.pattern = this.validation.validationPatterns.comment; - } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); - } - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html deleted file mode 100644 index 3bd51b4e36..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
- - -
- - -
- -
- diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less deleted file mode 100644 index 5be443f7b6..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -.popover-input-wrapper { - display: flex; -} - -/deep/ ui-element-popover-input { - - .popover { - max-width: 350px; - width: 350px; - } - - .edit-subnet-wrapper { - padding: 12px; - - .subnet-value { - width: 100%; - resize: none; - } - } - - input { - padding-right: 6px; - padding-left: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts deleted file mode 100644 index 67eb8822b4..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, Input} from '@angular/core'; -import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component"; -import {ButtonsModelMap, ButtonModel} from "app/models"; -import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component" -import { PopoverComponent } from "app/ng2/components/popover/popover.component" - -@Component({ - selector: 'ui-element-popover-input', - templateUrl: './ui-element-popover-input.component.html', - styleUrls: ['./ui-element-popover-input.component.less'] -}) -export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { - @ViewChild('textArea') textArea: ElementRef; - @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; - - saveButton: ButtonModel; - buttonsArray: ButtonsModelMap; - - onSave = ():void => { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - this.popoverContentComponent.hide(); - } - } - - constructor() { - super(); - // Create Save button and insert to buttons map - this.saveButton = new ButtonModel('save', 'blue', this.onSave); - this.buttonsArray = { 'test': this.saveButton }; - - // Define the regex pattern for this controller - this.pattern = this.validation.validationPatterns.comment; - - // Disable / Enable button according to validation - //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid); - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts deleted file mode 100644 index 4bc35e814a..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, EventEmitter, Input, Output } from '@angular/core' -import { ValidationConfiguration } from "app/models"; -import { FormControl, Validators } from '@angular/forms'; - -export interface UiElementBaseInterface { - onSave(); -} - -@Component({ - template: ``, - styles: [] -}) -export class UiElementBase { - - protected validation = ValidationConfiguration.validation; - protected control: FormControl; - - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') baseEmitter: EventEmitter = new EventEmitter(); - @Input('value') set setValueValue(value) { - this.value = value; - } - - protected name: string; - protected type: string; - protected value: any; - protected pattern: any; - protected readonly:boolean; - - constructor() { - //this.control = new FormControl('', [Validators.required]); - this.control = new FormControl('', []); - } - -} diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html deleted file mode 100644 index 4d2b91f3b4..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html +++ /dev/null @@ -1,26 +0,0 @@ - - -
-
- -
- -
-
- -
-
-
- - -
-
- -
-
-
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less deleted file mode 100644 index 07f38d3011..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less +++ /dev/null @@ -1,45 +0,0 @@ -@import '../../../../assets/styles/variables'; -form{ - margin: 0 20px; - .field{ - padding:20px 0; - &:not(:last-child){ - border-bottom: solid 1px @main_color_o; - } - input{ - &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ - &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ - &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ - &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ - &:-ms-input-placeholder { font-style: italic; } /* Edge */ - } - } - /deep/ [ng-reflect-checked="true"]{ - /deep/ .checkbox-label-content{ - color: @main_color_a; - } - } -} - -.open-filter-button{ - cursor: pointer; - width: 32px; - height: 34px; - margin-left:5px; - - &.open{ - z-index: 1061; - background-color: @main_color_p; - border: solid 1px @main_color_c; - border-bottom: none; - } - .filter-icon{ - top: 8px; - right: 2px; - position: relative; - } -} - -/deep/ .popover{ - border: solid 1px @main_color_c !important; -} diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts deleted file mode 100644 index c43c30db21..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/16/2017. - */ -import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core'; -import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models"; -import {PopoverComponent} from "../popover/popover.component"; -import * as sdcConfig from "../../../../../configurations/dev" - -@Component({ - selector: 'filter-properties-assignment', - templateUrl: './filter-properties-assignment.component.html', - styleUrls: ['./filter-properties-assignment.component.less'] -}) - -export class FilterPropertiesAssignmentComponent { - @Input() componentType: string; - @Output() searchProperties: EventEmitter = new EventEmitter(); - footerButtons:ButtonsModelMap = {}; - typesOptions:Array;//All optional types - selectedTypes:Object = {}; - allSelected:boolean = false;//if all option selected - filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); - @ViewChild('filterPopover') filterPopover: PopoverComponent; - - ngOnInit() { - this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName); - this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close); - this.componentType = this.componentType.toLocaleLowerCase(); - this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType]; - } - - selectAll = () => { - _.forEach(this.typesOptions, (type) => { - this.selectedTypes[type] = this.allSelected; - }); - } - - onTypeSelected = (type:string) => { - if(!this.selectedTypes[type]){ - this.allSelected = false;//unselected 'All' - } - }; - - search = () => { - console.log('search props'); - this.filterData.selectedTypes = []; - _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => { - if(this.selectedTypes[type]){ - this.filterData.selectedTypes.push(type); - } - }); - this.searchProperties.emit(this.filterData); - this.filterPopover.hide(); - } - - close = () => { - this.filterPopover.hide(); - } - - someTypesSelectedAndThereIsPropertyName = ():boolean => { - if( _.find(Object.keys(this.selectedTypes),(key) => { - return this.selectedTypes[key]; - }) && this.filterData.propertyName ){ - return null - } - return true; - } - - clearAll = ():void => { - this.filterData.propertyName = ""; - _.forEach(this.selectedTypes,(value, key) => { - this.selectedTypes[key] = false; - }); - this.allSelected = false; - } - -} diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts deleted file mode 100644 index c8d4566653..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts +++ /dev/null @@ -1,32 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -export class HierarchyDisplayOptions { - idProperty: string; - valueProperty: string; - childrenProperty: string; - searchText:string; - constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) { - this.idProperty = idProperty; - this.valueProperty = valueProperty; - this.childrenProperty = childrenProperty; - this.searchText = searchText; - } -} diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html deleted file mode 100644 index 40a1c37cee..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
-
-
- {{item[displayOptions.valueProperty]}} -
-
- -
-
-
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less deleted file mode 100644 index 4befa2c797..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less +++ /dev/null @@ -1,52 +0,0 @@ -.navigation-wrapper { - text-align: left; -} - -.node-item { - border: 1px dotted; - border-right: none; - border-bottom: none; - width: 100%; -} - -.node-item:last-child { - border-left: none; -} - -.node-data-wrapper { - cursor: default; - height: 39px; - line-height: 39px; - position: relative; - top: -20px; - background-color: white; - margin-left: 0.7em; -} - -.children-node { - padding-left: 40px; -} - -.node-data { - margin-left: 10px; - margin-right: 10px; -} - -.node-data-wrapper.selected { - background-color: #e6f6fb; - - .node-data { - color: #009fdb; - } -} - -.node-data-wrapper:hover { - background-color: #eaeaea; -} - -.mark{ - background-color: yellow; -} - - - diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts deleted file mode 100644 index dc0a02c277..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, EventEmitter} from '@angular/core'; -import {HierarchyDisplayOptions} from './hierarchy-display-options'; - - -@Component({ - selector: 'hierarchy-navigation', - templateUrl: './hierarchy-navigation.component.html', - styleUrls: ['./hierarchy-navigation.component.less'] -}) - -export class HierarchyNavigationComponent { - @Input() displayData: Array; - @Input() selectedItem: any; - @Input() displayOptions: HierarchyDisplayOptions; - - @Output() updateSelected:EventEmitter = new EventEmitter(); - - onClick = ($event, item) => { - $event.stopPropagation(); - this.selectedItem = item; - this.updateSelected.emit(item); - }; - - onSelectedUpdate = ($event) => { - this.selectedItem = $event; - this.updateSelected.emit($event); - } -} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html deleted file mode 100644 index 2b58d0f086..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ /dev/null @@ -1,49 +0,0 @@ -
- -
-
Property Name
-
From Instance
-
Type
-
Value
-
-
-
No data to display
-
-
-
-
{{input.name}}
- -
-
-
- {{instanceNamesMap[input.instanceUniqueId]}} -
-
-
-
- {{input.type | contentAfterLastDot}} -
-
-
- - -
- -
-
- -
-
-
-
- - diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less deleted file mode 100644 index 89c7287449..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less +++ /dev/null @@ -1,164 +0,0 @@ - -@import './../../../../assets/styles/variables.less'; - -:host /deep/ input { width:100%;} - -.properties-table { - display:flex; - flex-direction:column; - flex: 1; - height:100%; - text-align:left; - - .inner-cell-div{ - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - - .table-header { - font-weight:bold; - border-top: #d2d2d2 solid 1px; - background-color: #eaeaea; - color:#191919; - - .table-cell { - font-size: 13px; - } - .valueCol { - justify-content: flex-start; - padding: 10px; - } - } - .table-header, .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; - } - - .table-body { - display:flex; - flex-direction: column; - overflow-y:auto; - flex: 1; - - .no-data { - border: #d2d2d2 solid 1px; - border-top:none; - text-align: center; - height: 100%; - padding: 20px; - } - /deep/.selected{ - background-color: #e6f6fb; - color: #009fdb; - } - } - - .table-row { - &:hover { - background-color:#f8f8f8; cursor:pointer; - } - - &:last-child { - flex: 1 0 auto; - } - .selected-row { - background-color:#e6f6fb; - } - } - - .table-cell { - font-size:13px; - flex:1; - border: #d2d2d2 solid 1px; - border-right:none; - border-top:none; - padding: 10px; - text-overflow: ellipsis; - white-space: nowrap; - - - &:last-child { - border-right:#d2d2d2 solid 1px; - } - &.col1 { - flex: 1 0 200px; - max-width:300px; - display: flex; - justify-content: space-between; - - .property-name { - flex: 1; - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 5px; - flex: 0 0 auto; - } - } - &.col2 { - flex: 0 0 150px; - max-width:150px; - } - - &.col3 { - flex:0 0 120px; - max-width:120px; - } - - &.valueCol { - flex: 1 0 auto; - min-width: 350px; - display: flex; - justify-content: flex-end; - padding: 0px; - align-items: center; - - .value-input { - flex: 1; - max-height: 24px; - border: none; - background-color: inherit; - - &:focus, &:active { - border:none; - outline:none; - } - } - - .delete-btn { - flex: 0 0 auto; - } - - .delete-button-container { - max-height: 24px; - } - - &.inner-table-container { - padding: 0px; - - .delete-button-container { - padding: 3px 5px 0 0 ; - } - } - } - - &.input-value-col { - padding: 8px; - } - - - } - - .filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts deleted file mode 100644 index 736655f3f7..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/4/2017. - */ -import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core"; -import {InputFEModel} from "app/models"; -import { ModalService } from 'app/ng2/services/modal.service'; - - - -@Component({ - selector: 'inputs-table', - templateUrl: './inputs-table.component.html', - styleUrls: ['../inputs-table/inputs-table.component.less'] -}) -export class InputsTableComponent { - - @Input() inputs: Array; - @Input() instanceNamesMap: Map; - @Input() readonly:boolean; - @Input() isLoading:boolean; - @Output() inputValueChanged: EventEmitter = new EventEmitter(); - @Output() deleteInput: EventEmitter = new EventEmitter(); - - selectedInputToDelete:InputFEModel; - - constructor(private modalService: ModalService){ - } - - onInputValueChanged = (input) => { - this.inputValueChanged.emit(input); - }; - - onDeleteInput = () => { - this.deleteInput.emit(this.selectedInputToDelete); - this.modalService.closeCurrentModal(); - }; - - openDeleteModal = (input:InputFEModel) => { - this.selectedInputToDelete = input; - this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); - } -} - - diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts new file mode 100644 index 0000000000..827209326c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { TranslateModule } from "../../shared/translator/translate.module"; +import { TopNavComponent } from "./top-nav/top-nav.component"; + +@NgModule({ + declarations: [ + TopNavComponent + ], + imports: [ + CommonModule, + FormsModule, + TranslateModule + ], + exports: [], + entryComponents: [ //need to add anything that will be dynamically created + TopNavComponent + ], + providers: [] +}) +export class LayoutModule { + +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html new file mode 100644 index 0000000000..55c4bf0460 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html @@ -0,0 +1,53 @@ + diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less new file mode 100644 index 0000000000..dc666cbf00 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less @@ -0,0 +1,225 @@ +@import "../../../../../assets/styles/variables"; +@import "../../../../../assets/styles/variables-old"; +@import "../../../../../assets/styles/mixins_old"; +@import "../../../../../assets/styles/sprite"; + +.top-nav { + position: fixed; + top: @header_height; + background-color: @main_color_p; + .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); + width: 100%; + height: @top_nav_height; + line-height: @top_nav_height; + z-index: 10; + display: flex; + flex-direction: row; + align-items: center; + + .asdc-app-title-wrapper { + flex-grow: 1; + line-height: 16px; + margin: 0 20px; + + a.asdc-app-title { + //.m_18_r; + text-decoration: none; + } + + .asdc-version { + //.m_12_r; + .opacity(0.8); + line-height: 14px; + flex-grow: 1; + } + + } + + ul.top-menu { + list-style-type: none; + margin: 0 0 0 20px; + padding: 0; + flex-grow: 999; + + & > li { + float: left; + cursor: pointer; + line-height: 50px; + height: 50px; + padding: 0 20px; + + &.selected { + border-bottom: solid 4px @main_color_a; + + a { + color: @func_color_s; + } + } + + /*&:hover { + border-bottom: solid 4px @main_color_a; + }*/ + + a { + font-family: @font-opensans-medium; + color: @main_color_m; + font-size: 16px; + display: block; + text-align: center; + text-decoration: none; + } + + &.triangle-dropdown { + padding: 0; + position: relative; + + div.triangle { + margin-top: 15px; + border-radius: 2px; + width: 17px; + height: 18px; + + //temp use - until new triangle gets in + line-height: 18px; + text-align: center; + font-size: 10px; + + &:hover { + background-color: rgba(156, 156, 156, 0.2); + + span { + .arrow-right-hover; + } + } + } + + + li a { + font-size: 16px; + } + + ul.sub-menu { + .perfect-scrollbar; + position: absolute; + left: 0; + top: 40px; + z-index: 1; + + overflow-x: hidden; + overflow-y: auto; + max-height: 0; + -webkit-transition: max-height 200ms ease-in; + -moz-transition: max-height 200ms ease-in; + -o-transition: max-height 200ms ease-in; + transition: max-height 200ms ease-in; + + padding: 0; + background-color: white; + visibility: hidden; + + li { + + height: 35px; + background-color: white; + font-size: 13px; + width: 150px; + line-height: 35px; + padding: 0 10px; + + &.disabled { + opacity: 1; + } + &.selected { + background-color: @tlv_color_v; + font-weight: bold; + } + &:hover { + color: @main_color_a; + } + span { + height: 35px; + width: 130px; + display: inline; + white-space: nowrap; + overflow: hidden; + } + } + } + &.item-click:hover ul.sub-menu, + &.item-click:active ul.sub-menu { + visibility: visible; + max-height: 500px; + border: 1px solid @func_color_b; + border-radius: 2px; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + + div ul { + + } + } + } + } + + } + + .top-search { + position: relative; + flex-grow: 1; + padding: 0 20px; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + /* font-style: italic; + }*/ + /* Firefox 18- */ + &::-moz-placeholder { + font-style: italic; + } + /* Firefox 19+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* IE 10+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* Edge */ + } + + .magnification { + position: absolute; + top: 19px; + right: 26px; + } + + } + + .notification-icon { + cursor: pointer; + flex-grow: 1; + margin: 0 10px 6px 0; + .sprite-new; + .vsp-list-icon; + + &:hover { + .vsp-list-icon-hover; + } + + &:active { + .vsp-list-icon-active; + } + + } + +} diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts new file mode 100644 index 0000000000..f48aa4801f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts @@ -0,0 +1,149 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Inject, Input, Output, EventEmitter} from "@angular/core"; +import {IHostedApplication, IUserProperties} from "app/models"; +import {MenuItemGroup, MenuItem} from "app/utils"; +import {UserService} from "../../../services/user.service"; +import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config"; +import {TranslateService} from "../../../shared/translator/translate.service"; + + +declare const window:any; +@Component({ + selector: 'top-nav', + templateUrl: './top-nav.component.html', + styleUrls:['./top-nav.component.less'] +}) +export class TopNavComponent { + @Input() public version:string; + @Input() public menuModel:Array; + @Input() public topLvlSelectedIndex:number; + @Input() public hideSearch:boolean; + @Input() public searchTerm:string; + @Input() public notificationIconCallback:Function; + @Output() public searchTermChange:EventEmitter = new EventEmitter(); + emitSearchTerm(event:string) { + this.searchTermChange.emit(event); + } + + public topLvlMenu:MenuItemGroup; + public user:IUserProperties; + + constructor(private translateService:TranslateService, + @Inject('$state') private $state:ng.ui.IStateService, + private userService:UserService, + @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + window.nav = this; + } + + private _getTopLvlSelectedIndexByState = ():number => { + if (!this.topLvlMenu.menuItems) { + return 0; + } + + let result = -1; + + //set result to current state + this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.current.name) { + result = index; + } + }); + + //if it's a different state , checking previous state param + if (result === -1) { + this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.params['previousState']) { + result = index; + } + }); + } + + if (result === -1) { + result = 0; + } + + return result; + }; + + ngOnChanges(changes) { + if (changes['menuModel']) { + console.log('menuModel was changed!'); + this.generateMenu(); + } + } + + ngOnInit() { + console.log('Nav is init!', this.menuModel); + this.user = this.userService.getLoggedinUser(); + + this.translateService.languageChangedObservable.subscribe((lang) => { + let tmpArray: Array = [ + new MenuItem(this.translateService.translate("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), + new MenuItem(this.translateService.translate("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) + ]; + + // Only designer can perform onboarding + if (this.user && this.user.role === 'DESIGNER') { + tmpArray.push(new MenuItem(this.translateService.translate("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); + _.each(this.sdcConfig.hostedApplications, (hostedApp: IHostedApplication) => { + if (hostedApp.exists) { + tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); + } + }); + } + + this.topLvlMenu = new MenuItemGroup(0, tmpArray, true); + this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex; + + this.generateMenu(); + }); + } + + generateMenu() { + if (this.menuModel && this.topLvlMenu && this.menuModel[0] !== this.topLvlMenu) { + this.menuModel.unshift(this.topLvlMenu); + } + } + + goToState(state:string, params:Array):Promise { + return new Promise((resolve, reject) => { + this.$state.go(state, params && params.length > 0 ? [0] : undefined); + resolve(true); + }); + } + + menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) { + itemGroup.itemClick = false; + + let onSuccess = ():void => { + itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); + }; + let onFailed = ():void => { + }; + + if (item.callback) { + (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); + } else { + this[item.action](item.state, item.params).then(onSuccess, onFailed); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html deleted file mode 100644 index a62aa114d9..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
-
- diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less deleted file mode 100644 index ddb9915176..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.less +++ /dev/null @@ -1,91 +0,0 @@ -@import '../../../../assets/styles/variables'; -.tlv-loader-back { - background-color: @main_color_p; - position: fixed; - top: 50px; - left: 0; - right: 0; - bottom: 0; - z-index: 9999; - opacity: 0.5; -} - -.tlv-loader-relative { position: absolute; top: 0;} - -.tlv-loader { - z-index: 10002; -} - -.loader-relative { - display: block; - position:absolute; - width: 100%; - height:100%; -} - -.loader-fixed { - display: block; - position:fixed; - top:0; - left:0; - width: 100%; - height:100%; -} - -@keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Internet Explorer */ -@-ms-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Opera < 12.1 */ -@-o-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -@keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Internet Explorer */ -@-ms-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Opera < 12.1 */ -@-o-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts deleted file mode 100644 index f66aa551e2..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 6/6/2017. - */ -import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; -@Component({ - selector: 'loader', - templateUrl: './loader.component.html', - styleUrls: ['./loader.component.less'] -}) -export class LoaderComponent { - - @Input() display: boolean; - @Input() size: string;// small || medium || large - @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. - @Input() loaderDelay: number; //optional - number of ms to delay loader display. - - private isVisible: boolean = false; - private offset : { - top: string; - left: string; - width: string; - height: string; - }; - - constructor(private viewContainerRef: ViewContainerRef) { - } - - ngOnInit() { - if (!this.size) { - this.size = 'large'; - } - if (this.display === true) { - this.changeLoaderDisplay(true); - } - } - - ngOnChanges(changes: SimpleChanges) { - if(changes.display){ - this.changeLoaderDisplay(this.display); - } - } - - private changeLoaderDisplay = (display: boolean): void => { - if (display) { - window.setTimeout((): void => { - this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. - }, this.loaderDelay || 0); - } else { - this.isVisible = false; - } - } - - private showLoader = () => { - if (this.relative === true) { - let parentElement = this.viewContainerRef.element.nativeElement.parentElement; - this.offset = { - left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, - top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, - width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, - height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined - }; - } - this.isVisible = true; - } - -} diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html new file mode 100644 index 0000000000..ddda82ab58 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html @@ -0,0 +1,27 @@ + + +
+
+ +
+ +
+
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less new file mode 100644 index 0000000000..25c1467b3b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less @@ -0,0 +1,45 @@ +@import '../../../../../assets/styles/variables'; +form{ + margin: 0 20px; + .field{ + padding:20px 0; + &:not(:last-child){ + border-bottom: solid 1px @main_color_o; + } + input{ + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + } + } + /deep/ [ng-reflect-checked="true"]{ + /deep/ .checkbox-label-content{ + color: @main_color_a; + } + } +} + +.open-filter-button{ + cursor: pointer; + width: 32px; + height: 34px; + margin-left:5px; + + &.open{ + z-index: 1061; + background-color: @main_color_p; + border: solid 1px @main_color_c; + border-bottom: none; + } + .filter-icon{ + top: 8px; + right: 2px; + position: relative; + } +} + +/deep/ .popover{ + border: solid 1px @main_color_c !important; +} diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts new file mode 100644 index 0000000000..5a9bfbcecb --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts @@ -0,0 +1,97 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/16/2017. + */ +import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core'; +import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models"; +import * as sdcConfig from "../../../../../../configurations/dev" +import {PopoverComponent} from "../../ui/popover/popover.component"; + +@Component({ + selector: 'filter-properties-assignment', + templateUrl: './filter-properties-assignment.component.html', + styleUrls: ['./filter-properties-assignment.component.less'] +}) + +export class FilterPropertiesAssignmentComponent { + @Input() componentType: string; + @Output() searchProperties: EventEmitter = new EventEmitter(); + footerButtons:ButtonsModelMap = {}; + typesOptions:Array;//All optional types + selectedTypes:Object = {}; + allSelected:boolean = false;//if all option selected + filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + @ViewChild('filterPopover') filterPopover: PopoverComponent; + + ngOnInit() { + this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName); + this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close); + this.componentType = this.componentType.toLocaleLowerCase(); + this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType]; + } + + selectAll = () => { + _.forEach(this.typesOptions, (type) => { + this.selectedTypes[type] = this.allSelected; + }); + } + + onTypeSelected = (type:string) => { + if(!this.selectedTypes[type]){ + this.allSelected = false;//unselected 'All' + } + }; + + search = () => { + console.log('search props'); + this.filterData.selectedTypes = []; + _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => { + if(this.selectedTypes[type]){ + this.filterData.selectedTypes.push(type); + } + }); + this.searchProperties.emit(this.filterData); + this.filterPopover.hide(); + } + + close = () => { + this.filterPopover.hide(); + } + + someTypesSelectedAndThereIsPropertyName = ():boolean => { + if( _.find(Object.keys(this.selectedTypes),(key) => { + return this.selectedTypes[key]; + }) && this.filterData.propertyName ){ + return null + } + return true; + } + + clearAll = ():void => { + this.filterData.propertyName = ""; + _.forEach(this.selectedTypes,(value, key) => { + this.selectedTypes[key] = false; + }); + this.allSelected = false; + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts new file mode 100644 index 0000000000..c8d4566653 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts @@ -0,0 +1,32 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +export class HierarchyDisplayOptions { + idProperty: string; + valueProperty: string; + childrenProperty: string; + searchText:string; + constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) { + this.idProperty = idProperty; + this.valueProperty = valueProperty; + this.childrenProperty = childrenProperty; + this.searchText = searchText; + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html new file mode 100644 index 0000000000..c3f9e5ac74 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html @@ -0,0 +1,13 @@ +
+
+
+ {{item[displayOptions.valueProperty]}} +
+
+ +
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less new file mode 100644 index 0000000000..4befa2c797 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less @@ -0,0 +1,52 @@ +.navigation-wrapper { + text-align: left; +} + +.node-item { + border: 1px dotted; + border-right: none; + border-bottom: none; + width: 100%; +} + +.node-item:last-child { + border-left: none; +} + +.node-data-wrapper { + cursor: default; + height: 39px; + line-height: 39px; + position: relative; + top: -20px; + background-color: white; + margin-left: 0.7em; +} + +.children-node { + padding-left: 40px; +} + +.node-data { + margin-left: 10px; + margin-right: 10px; +} + +.node-data-wrapper.selected { + background-color: #e6f6fb; + + .node-data { + color: #009fdb; + } +} + +.node-data-wrapper:hover { + background-color: #eaeaea; +} + +.mark{ + background-color: yellow; +} + + + diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts new file mode 100644 index 0000000000..dc0a02c277 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {HierarchyDisplayOptions} from './hierarchy-display-options'; + + +@Component({ + selector: 'hierarchy-navigation', + templateUrl: './hierarchy-navigation.component.html', + styleUrls: ['./hierarchy-navigation.component.less'] +}) + +export class HierarchyNavigationComponent { + @Input() displayData: Array; + @Input() selectedItem: any; + @Input() displayOptions: HierarchyDisplayOptions; + + @Output() updateSelected:EventEmitter = new EventEmitter(); + + onClick = ($event, item) => { + $event.stopPropagation(); + this.selectedItem = item; + this.updateSelected.emit(item); + }; + + onSelectedUpdate = ($event) => { + this.selectedItem = $event; + this.updateSelected.emit($event); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html new file mode 100644 index 0000000000..57e0474c66 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -0,0 +1,49 @@ +
+ +
+
Property Name
+
From Instance
+
Type
+
Value
+
+
+
No data to display
+
+
+
+
{{input.name}}
+ +
+
+
+ {{instanceNamesMap[input.instanceUniqueId]}} +
+
+
+
+ {{input.type | contentAfterLastDot}} +
+
+
+ + +
+ +
+
+ +
+
+
+
+ + diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less new file mode 100644 index 0000000000..0545874f53 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -0,0 +1,164 @@ + +@import './../../../../../assets/styles/variables.less'; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + .inner-cell-div{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + + .table-header { + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #eaeaea; + color:#191919; + + .table-cell { + font-size: 13px; + } + .valueCol { + justify-content: flex-start; + padding: 10px; + } + } + .table-header, .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + } + + .table-row { + &:hover { + background-color:#f8f8f8; cursor:pointer; + } + + &:last-child { + flex: 1 0 auto; + } + .selected-row { + background-color:#e6f6fb; + } + } + + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 200px; + max-width:300px; + display: flex; + justify-content: space-between; + + .property-name { + flex: 1; + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + } + + &.valueCol { + flex: 1 0 auto; + min-width: 350px; + display: flex; + justify-content: flex-end; + padding: 0px; + align-items: center; + + .value-input { + flex: 1; + max-height: 24px; + border: none; + background-color: inherit; + + &:focus, &:active { + border:none; + outline:none; + } + } + + .delete-btn { + flex: 0 0 auto; + } + + .delete-button-container { + max-height: 24px; + } + + &.inner-table-container { + padding: 0px; + + .delete-button-container { + padding: 3px 5px 0 0 ; + } + } + } + + &.input-value-col { + padding: 8px; + } + + + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts new file mode 100644 index 0000000000..0add1cd707 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/4/2017. + */ +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import {InputFEModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; + +@Component({ + selector: 'inputs-table', + templateUrl: './inputs-table.component.html', + styleUrls: ['../inputs-table/inputs-table.component.less'], +}) +export class InputsTableComponent { + + @Input() inputs: Array; + @Input() instanceNamesMap: Map; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Output() inputValueChanged: EventEmitter = new EventEmitter(); + @Output() deleteInput: EventEmitter = new EventEmitter(); + + selectedInputToDelete:InputFEModel; + + constructor(private modalService: ModalService){ + } + + onInputValueChanged = (input) => { + this.inputValueChanged.emit(input); + }; + + onDeleteInput = () => { + this.deleteInput.emit(this.selectedInputToDelete); + this.modalService.closeCurrentModal(); + }; + + openDeleteModal = (input:InputFEModel) => { + this.selectedInputToDelete = input; + this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); + } +} + + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html new file mode 100644 index 0000000000..14b6c7d4c0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html @@ -0,0 +1,67 @@ +
+ + +
+ +
{{property.name}}
+
+
{{property.name}}
+
+ +
+ + + +
+ +
+ + +
{{property.type | contentAfterLastDot }}
+
{{property.schema.property.type | contentAfterLastDot }}
+ + +
+ + + + Add value to list + + + + +
+ +
+ + + + +
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less new file mode 100644 index 0000000000..0adce2c99d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less @@ -0,0 +1,84 @@ +@import '../../../../../../assets/styles/variables.less'; +.flat-children-container { + .dynamic-property-row { + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); + } + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } + } +} +.dynamic-property-row { + display:flex; + flex-direction:row; + align-items: stretch; + + &.readonly{ + background-color: @tlv_color_t; + cursor: auto; + } + //for the case that the parent is disabled but the child is enabled + &:not(.readonly){ + background-color: @main_color_p; + } + + .table-cell { + flex: 1; + padding:9px; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:first-child { + flex: 0 0 50%; + border-right:#d2d2d2 solid 1px; + &:only-of-type { + flex: 1 1 100%; + border-right:none; + } + } + &.empty { + height:40px; + } + } + .property-icon { + flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; + } + +} + +.filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } +} +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; +} +.error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; +} + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts new file mode 100644 index 0000000000..04cb26d030 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts @@ -0,0 +1,206 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models"; +import { PROPERTY_TYPES } from 'app/utils'; +import { DataTypeService } from "../../../../services/data-type.service"; +import { trigger, state, style, transition, animate } from '@angular/core'; +import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils"; + + +@Component({ + selector: 'dynamic-property', + templateUrl: './dynamic-property.component.html', + styleUrls: ['./dynamic-property.component.less'], + animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] +}) +export class DynamicPropertyComponent { + + derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement + propType: DerivedPropertyType; + propPath: string; + isPropertyFEModel: boolean; + nestedLevel: number; + + @Input() canBeDeclared: boolean; + @Input() property: PropertyFEModel | DerivedFEProperty; + @Input() expandedChildId: string; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText: string; + @Input() readonly: boolean; + @Input() hasChildren: boolean; + @Input() hasDeclareOption:boolean; + + @Output() valueChanged: EventEmitter = new EventEmitter(); + @Output() expandChild: EventEmitter = new EventEmitter(); + @Output() checkProperty: EventEmitter = new EventEmitter(); + @Output() deleteItem: EventEmitter = new EventEmitter(); + @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); + @Output() mapKeyChanged: EventEmitter = new EventEmitter(); + @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); + + + constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { + } + + ngOnInit() { + this.isPropertyFEModel = this.property instanceof PropertyFEModel; + this.propType = this.property.derivedDataType; + this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; + this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; + } + + + onClickPropertyRow = (property, event) => { + // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined + event && event.stopPropagation && event.stopPropagation(); + this.clickOnPropertyRow.emit(property); + } + + + expandChildById = (id: string) => { + this.expandedChildId = id; + this.expandChild.emit(id); + } + + checkedChange = (propName: string) => { + this.checkProperty.emit(propName); + } + + getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children + return _.filter((this.property).flattenedChildren,(prop:DerivedFEProperty)=>{ + return _.startsWith(prop.propertiesName + '#', property.propertiesName); + }).length > 1; + } + + createNewChildProperty = (): void => { + + let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); + if (this.property instanceof PropertyFEModel) { + this.addChildProps(newProps, this.property.name); + } else { + this.addChildPropsToParent.emit(newProps); + } + } + + addChildProps = (newProps: Array, childPropName: string) => { + + if (this.property instanceof PropertyFEModel) { + let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children + this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator + this.expandChildById(newProps[0].propertiesName); + + + if(!newProps[0].schema.property.isSimpleType){ + if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) + this.updateMapKeyValueOnMainParent(newProps); + if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { + this.valueChanged.emit(this.property.name); + } + } + } + } + } + + updateMapKeyValueOnMainParent(childrenProps: Array){ + if (this.property instanceof PropertyFEModel) { + //Update only if all this property parents has key name + if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ + angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props + (this.property).childPropUpdated(prop); + },this); + //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) + let parentNames = (this.property).getParentNamesArray(childrenProps[0].propertiesName, []); + childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); + } + } + } + + childValueChanged = (property: DerivedFEProperty) => { //value of child property changed + + if (this.property instanceof PropertyFEModel) { // will always be the case + if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save + this.property.childPropUpdated(property); + this.dataTypeService.checkForCustomBehavior(this.property); + this.valueChanged.emit(this.property.name); + } + } + } + + deleteListOrMapItem = (item: DerivedFEProperty) => { + if (this.property instanceof PropertyFEModel) { + this.removeValueFromParent(item); + this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); + this.expandChildById(item.propertiesName); + } + } + + removeValueFromParent = (item: DerivedFEProperty, target?: any) => { + if (this.property instanceof PropertyFEModel) { + let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); + + if (item.derivedDataType == DerivedPropertyType.MAP) { + let oldKey = item.mapKey; + if (target && typeof target.value == 'string') { //allow saving empty string + let replaceKey:string = target.value; + if (!replaceKey) {//prevent delete map key + return; + } + if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists + target.setCustomValidity('This key is already exists.'); + return; + }else { + target.setCustomValidity(''); + _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); + item.mapKey = replaceKey; + //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. + if(!oldKey && !item.schema.property.isSimpleType){ + //Search this map item children and update these value on parent property valueOBj + let mapKeyFlattenChildren:Array = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { + return _.startsWith(prop.propertiesName, item.propertiesName); + }); + this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); + } + } + } + delete itemParent.valueObj[oldKey]; + } else { + let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); + itemParent.valueObj.splice(itemIndex, 1); + } + if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) + if (itemParent instanceof PropertyFEModel) { //direct child + this.valueChanged.emit(this.property.name); + } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) + this.childValueChanged(itemParent); + } + } + } + } + + preventInsertItem = (property:DerivedFEProperty):boolean => { + if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){ + return true; + } + return false; + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts new file mode 100644 index 0000000000..4520469594 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { DerivedFEProperty } from 'app/models'; + +@Pipe({ + name: 'filterChildProperties', +}) +export class FilterChildPropertiesPipe implements PipeTransform { + public transform(childProperties: Array, parentId: string) { + if (!parentId || !childProperties) return childProperties; + + let validParents: Array = [parentId]; + while (parentId.lastIndexOf('#') > 0) { + parentId = parentId.substring(0, parentId.lastIndexOf('#')); + validParents.push(parentId); + } + return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html new file mode 100644 index 0000000000..933b80f577 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -0,0 +1,63 @@ +
+ +
+
Property Name
+
Type
+
ES
+
Value
+
+
+
No data to display
+ + +
{{feInstanceNamesMap[instanceId]}}
+ +
+ +
+
+ +
+ {{property.name}} +
+
+ +
+
+
+ {{property.type | contentAfterLastDot}} +
+
+
+
+ {{property.schema.property.type | contentAfterLastDot}} +
+
+
+ + + + +
+
+ + +
+
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less new file mode 100644 index 0000000000..20da0b6ec2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less @@ -0,0 +1,180 @@ +@import './../../../../../assets/styles/variables.less'; +@import '../../../../../assets/styles/sprite'; +@smaller-screen: ~"only screen and (max-width: 1580px)"; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + + .inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + .table-header { + display: flex; + flex-direction:row; + flex: 0 0 auto; + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #f2f2f2; + + .table-cell { + color:#191919; + font-size:13px; + } + } + + .table-rows-header { + border: #d2d2d2 solid 1px; + border-top:none; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + background-color: @main_color_p; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + &.view-mode{ + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; + } + } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &.readonly{ + background-color: #f8f8f8; + cursor: auto; + } + + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } + } + + .selected-row { + background-color:#e6f6fb; + } + + .table-cell.valueCol { + padding:0px; + + } + } + } + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding:10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow:hidden; + display: flex; + min-height:40px; + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 210px; + max-width:300px; + display: flex; + justify-content: space-between; + @media @smaller-screen { flex: 0 0 25%;} + + .property-name { + flex: 1; + display: flex; + overflow: hidden; + //max-width: 90%; fix bug 327139 + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} + } + + &.valueCol { + flex: 2 0 300px; + display: flex; + @media @smaller-screen { flex: 1 0 40%;} + } + + + /deep/ .checkbox-container { + margin-right: 10px; + } + + /deep/ &.round-checkbox { + .checkbox-container input[type=checkbox].checkbox-hidden { + &:checked ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon; + } + &[disabled] ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon.disabled; + background-color:inherit; + border:none; + //animation: addDisabledCheck 4s linear; + } + } + } + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + + dynamic-property { + width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts new file mode 100644 index 0000000000..32bbb1b3a0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts @@ -0,0 +1,91 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter} from "@angular/core"; +import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models"; +import {PropertiesService} from "../../../services/properties.service"; + +@Component({ + selector: 'properties-table', + templateUrl: './properties-table.component.html', + styleUrls: ['./properties-table.component.less'] +}) +export class PropertiesTableComponent { + + @Input() fePropertiesMap: InstanceFePropertiesMap; + @Input() feInstanceNamesMap: Map; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText:string; + @Input() searchTerm:string; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Input() hasDeclareOption:boolean; + @Input() hidePropertyType:boolean; + + @Output() valueChanged: EventEmitter = new EventEmitter(); + @Output() selectPropertyRow: EventEmitter = new EventEmitter(); + @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter();//only for hasDeclareOption + + constructor (private propertiesService:PropertiesService ){ + } + + ngOnInit() { + } + + propValueChanged = (property) => { + this.valueChanged.emit(property); + }; + + // Click on main row (row of propertyFEModel) + onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { + //event && event.stopPropagation(); + this.selectedPropertyId = property.name; + let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + this.selectPropertyRow.emit(propertyRowSelectedEvent); + }; + + // Click on inner row (row of DerivedFEProperty) + onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { + let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + this.selectPropertyRow.emit(propertyRowSelectedEvent); + } + + propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { + let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; + + if (!isChecked) { + this.propertiesService.undoDisableRelatedProperties(prop, childPropName); + } else { + this.propertiesService.disableRelatedProperties(prop, childPropName); + } + this.updateCheckedPropertyCount.emit(isChecked); + } + +} + +export class PropertyRowSelectedEvent { + propertyModel:PropertyFEModel | DerivedFEProperty; + instanceName:string; + constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ + this.propertyModel = propertyModel; + this.instanceName = instanceName; + } +} + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts new file mode 100644 index 0000000000..91f33485a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts @@ -0,0 +1,29 @@ +import {NgModule} from "@angular/core"; +import {PropertiesTableComponent} from "./properties-table.component"; +import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.component"; +import {FormsModule} from "@angular/forms"; +import {UiElementsModule} from "../../ui/ui-elements.module"; +import {CommonModule} from "@angular/common"; +import {HttpModule} from "@angular/http"; +import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe"; +import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; +import {PropertiesService} from "../../../services/properties.service"; + +@NgModule({ + imports: [ + FormsModule, + HttpModule, + CommonModule, + GlobalPipesModule, + UiElementsModule + ], + declarations: [ + FilterChildPropertiesPipe, + DynamicPropertyComponent, + PropertiesTableComponent + ], + exports: [PropertiesTableComponent], + providers: [FilterChildPropertiesPipe, PropertiesService] +}) +export class PropertyTableModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less new file mode 100644 index 0000000000..edcb87db3d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less @@ -0,0 +1,77 @@ +@import './../../../../../assets/styles/variables.less'; +@import './../../../../../assets/styles/mixins.less'; +.main-container{ + color: @main_color_m; +} +.select-req-or-cap-span { + float: left; + margin-right: 15px; + font-size: 13px; +} +.select-type-label{ + .m_12_m; + margin-bottom: 2px; +} +.select-type{ + display: flex; + margin-bottom: 10px; + ui-element-dropdown{ + width: 40%; + font-size: 13px; + /deep/ select{ + height: 31px; + } + } +} +.table-and-list-container{ + display: flex; + padding-top: 10px; + .inner-container{ + height: 300px; + overflow-y: auto; + border: @main_color_o solid 1px; + } + .inner-container:not(:last-of-type){ + border-right: none; + } + .requirements-or-capabilities-container { + width: 40%; + &.empty-list{ + background-color: @tlv_color_t; + text-align: center; + &:before{ + content: 'Select "type" above'; + line-height: 298px; + } + } + .req-or-cap-item{ + border-bottom: @main_color_o solid 1px; + padding: 10px; + font-size: 13px; + &:hover:not(.selected){ + background-color:@tlv_color_t; cursor:pointer; + } + } + } + .properties-table-container{ + width: 60%; + display: flex; + &.cap-selected{ + background-color: @tlv_color_t; + border: @main_color_a solid 1px; + -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + } + properties-table{ + margin: 15px; + width: 100%; + } + } +} + +.selected{ + color: @main_color_a; + background-color: @tlv_color_v; + border-left: @main_color_a solid 4px; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html new file mode 100644 index 0000000000..bcd33efc30 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html @@ -0,0 +1,36 @@ +
+ Select: + + + +
+ +
+ +
+
+
+ {{item.getFullTitle()}} +
+
+
+ + +
+ +
+
+ diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts new file mode 100644 index 0000000000..ab67dc1850 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts @@ -0,0 +1,182 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core'; +import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models"; +import {Dictionary} from "lodash"; +import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component"; +import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service"; +import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils"; +import {Requirement} from "../../../../models/requirement"; +import {Capability, RequirementCapabilityModel} from "../../../../models/capability"; + +const REQUIREMENT = 'Requirement'; +const CAPABILITY = 'Capability'; + +@Component({ + selector: 'select-requirement-or-capability', + templateUrl: './select-requirement-or-capability.component.html', + styleUrls: ['./select-reqiurement-or-capability.component.less'] +}) + +export class SelectRequirementOrCapabilityComponent implements OnInit { + + + @Input() optionalRequirementsMap:Dictionary; //optional requirement map - key is type, value is array of requirements + @Input() optionalCapabilitiesMap:Dictionary; //optional capabilities map - key is type, value is array of capabilities + + @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability ) + + @Input() currentComponent:ComponentModel; + @Input() componentInstanceId:string; + + @Input() selectedReqOrCapModel:RequirementCapabilityModel; + + @Output() updateSelectedReqOrCap:EventEmitter = new EventEmitter(); + @Output() updateCapabilityProperties:EventEmitter> = new EventEmitter>(); + + types:Array = []; + selectedType:string; + + selectOptions:Array; + + requirementsTypes:Array = []; + capabilitiesTypes:Array = []; + + disabledSelectReqOrCapOption: boolean; // If we need to disable the option to choose requirement or capability + displayCapReqListFilterByType:RequirementCapabilityModel[]; + + capabilityProperties:InstanceFePropertiesMap; + + constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2, + private propertiesUtils:PropertiesUtils) { + this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)]; + } + + private initDefaultReqOrCapSelection = (): void => { + if(this.selectedReqOrCapOption){//for second step + this.disabledSelectReqOrCapOption = true; + } + if (this.selectedReqOrCapModel) {//init when there is selected req or cap + if (this.selectedReqOrCapModel instanceof Capability) { + this.selectedReqOrCapOption = this.selectOptions[1].value; + this.selectedType = this.selectedReqOrCapModel.type; + } else { + this.selectedReqOrCapOption = this.selectOptions[0].value; + this.selectedType = (this.selectedReqOrCapModel).capability; + } + } + if(Object.keys(this.optionalCapabilitiesMap).length === 0) { // If instance don't have capabilities + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[0].value; + } else if(Object.keys(this.optionalRequirementsMap).length === 0) { // If instance don't have requirements + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[1].value; + } + this.selectedReqOrCapOption = this.selectedReqOrCapOption || this.selectOptions[1].value; + this.types = this.selectedReqOrCapOption == this.selectOptions[0].value ? this.requirementsTypes : this.capabilitiesTypes; + setTimeout(() => { + if (this.selectedType) { + this.initCapReqListFilterByType(); + } else { + this.setDefaultValueType(); + } + }); + } + + initCapabilityPropertiesTable = ():void => { + if(this.selectedReqOrCapModel instanceof Capability ) { + let selectedCapability = this.selectedReqOrCapModel; + if(selectedCapability.properties){ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false); + } + } + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.selectedReqOrCapModel) { + if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) { + this.setCapabilityProperties(); + } + } + } + + ngOnInit() { + this.initTypesList(); + this.initDefaultReqOrCapSelection(); + this.initCapabilityPropertiesTable(); + } + + private initTypesList = ():void => { + this.requirementsTypes = _.keys(this.optionalRequirementsMap); + this.requirementsTypes.unshift('All'); + this.capabilitiesTypes = _.keys(this.optionalCapabilitiesMap); + this.capabilitiesTypes.unshift('All'); + } + + private fillInDisplayCapReqListFilterByType = (allOptionalTypesMap:Dictionary):void => { + if(this.selectedType === 'All'){ + this.displayCapReqListFilterByType = []; + _.map(allOptionalTypesMap,(reqOrCapArray:RequirementCapabilityModel[])=>{ + this.displayCapReqListFilterByType = this.displayCapReqListFilterByType.concat(reqOrCapArray); + }) + }else{ + this.displayCapReqListFilterByType = allOptionalTypesMap[this.selectedType]; + } + + // automatically select a *single* requirement or capability: + if (this.displayCapReqListFilterByType.length === 1) { + const selectedReqCap:RequirementCapabilityModel = this.displayCapReqListFilterByType[0]; + this.selectReqOrCapFromList((this.selectedType === CAPABILITY) ? selectedReqCap : selectedReqCap); + } + } + + private initCapReqListFilterByType = ():void => { + if (this.selectedReqOrCapOption === CAPABILITY) { + this.fillInDisplayCapReqListFilterByType(this.optionalCapabilitiesMap); + } else { + this.fillInDisplayCapReqListFilterByType(this.optionalRequirementsMap); + } + } + + private onTypeSelected = ():void => { + this.initCapReqListFilterByType(); + if (this.displayCapReqListFilterByType.indexOf(this.selectedReqOrCapModel) === -1) { + this.selectReqOrCapFromList(null); + } + } + + private setDefaultValueType = ():void =>{ + // automatically select a *single* type from the list: + this.selectedType = (this.types.length === 2) ? this.types[1] : this.types[0]; + this.initCapReqListFilterByType(); + } + + private onSelectRequirementOrCapability = ():void => { + this.types = this.selectedReqOrCapOption === REQUIREMENT ? this.requirementsTypes : this.capabilitiesTypes; + this.selectReqOrCapFromList(null); + this.setDefaultValueType(); + } + + private selectReqOrCapFromList = (selected:Requirement|Capability):void => { + if (this.selectedReqOrCapModel !== selected) { + this.selectedReqOrCapModel = selected; + this.updateSelectedReqOrCap.emit(selected); + } + } + + + private setCapabilityProperties = ():void => { + let selectedCapability = this.selectedReqOrCapModel; + if (selectedCapability.properties === undefined) { + this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name) + .subscribe((response:Array) => { + this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null; + this.updateCapabilityProperties.emit(response); + }, error => {}); + }else{ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false); + this.updateCapabilityProperties.emit(selectedCapability.properties); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts new file mode 100644 index 0000000000..cb12dea02a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts @@ -0,0 +1,24 @@ +import {NgModule} from "@angular/core"; +import {SelectRequirementOrCapabilityComponent} from "./select-requirement-or-capability.component"; +import {FormsModule} from "@angular/forms"; +import {FormElementsModule} from "../../ui/form-components/form-elements.module"; +import {CommonModule} from "@angular/common"; +import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module"; +import {PropertyTableModule} from "../properties-table/property-table.module"; + +@NgModule({ + declarations: [ + SelectRequirementOrCapabilityComponent + ], + imports: [ + CommonModule, + FormsModule, + FormElementsModule, + GlobalPipesModule, + PropertyTableModule], + + exports: [SelectRequirementOrCapabilityComponent], + providers: [] +}) +export class SelectRequirementOrCapabilityModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html deleted file mode 100644 index 433bd4fd6f..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
Error code: {{input.messageId}}
-
Status code: {{input.status}}
-
{{input.message}}
-
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts deleted file mode 100644 index c0d6673412..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by ngordon on 7/30/2017. - */ -import { Component, Input } from '@angular/core'; -import { ServerErrorResponse } from 'app/models'; - -@Component({ - selector: 'error-message', - templateUrl: './error-message.component.html' -}) - -export class ErrorMessageComponent { - @Input() input: ServerErrorResponse; - - constructor() { - } - -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html deleted file mode 100644 index d843867cdb..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
- {{ input.title }} - -
-
-
{{input.content}}
-
-
- -
- -
-
-
-
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less deleted file mode 100644 index c87162afb0..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.less +++ /dev/null @@ -1,128 +0,0 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../assets/styles/mixins'; -@import '../../../../assets/styles/sprite-old'; -/deep/ modal { - display: none; - - .custom-modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1000; - overflow: auto; - margin: auto; - display: flex; - align-items: center; - - .ng2-modal-content { - background: #fff; - width: 100%; - box-shadow: 0 5px 15px rgba(0,0,0,.5); - border-radius: 4px; - .ng2-modal-body{ - padding: 20px; - } - - .ng2-modal-header{ - .m_18_m; - font-weight: bold; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - height: 50px; - line-height: 50px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: left; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0px 20px; - - &.modal-type-standard { - border-bottom: solid 3px @main_color_a; - } - - &.modal-type-error { - border-bottom: solid 3px @func_color_q; - } - - &.modal-type-alert{ - border-bottom: solid 3px @main_color_h; - } - - .title{ - .s_18_m; - -webkit-box-flex: 999; - -ms-flex-positive: 999; - flex-grow: 999; - } - .close-button{ - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } - } - - .ng2-modal-footer{ - background-color: @tlv_color_t; - padding: 17px 30px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - border-radius: 4px; - button{ - margin: 0 12px 0 6px; - } - } - } - } - - .modal-background { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: #000; - opacity: 0.5; - z-index: 900; - } -} - -.xl { - width: 1200px; -} - -.l { - width: 875px; -} - -.md { - width: 650px; -} - -.sm { - width: 552px; -} - -.xsm { - width: 432px; -} - -body.modal-open { - overflow: hidden; -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts deleted file mode 100644 index 89db8d1140..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 6/1/2017. - */ -import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; -import {ViewContainerRef, ViewChild} from '@angular/core'; -import * as $ from 'jquery'; -import { ButtonsModelMap, ModalModel } from 'app/models'; - -@Component({ - selector: 'modal', - templateUrl: './modal.component.html', - styleUrls:['modal.component.less'] -}) - -export class ModalComponent implements OnInit, OnDestroy { - @Input() input: ModalModel; - @Input() dynamicContent: any; - @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. - private modalElement: JQuery; - - constructor( el: ElementRef ) { - this.modalElement = $(el.nativeElement); - } - - ngOnInit(): void { - this.modalElement.appendTo('body'); - } - - ngOnDestroy(): void { - this.modalElement.remove(); - } - - open(): void { - this.modalElement.show(); - $('body').addClass('modal-open'); - } - - close(): void { - this.modalElement.hide(); - $('body').removeClass('modal-open'); - } -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts deleted file mode 100644 index 892f6993dd..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from "@angular/core"; -import { CommonModule } from '@angular/common'; -import { ModalService } from 'app/ng2/services/modal.service'; -import { ModalComponent } from "app/ng2/components/modal/modal.component"; -import { ErrorMessageComponent } from "./error-message/error-message.component"; - -@NgModule({ - declarations: [ - ModalComponent, - ErrorMessageComponent - ], - imports: [CommonModule], - exports: [], - entryComponents: [ //need to add anything that will be dynamically created - ModalComponent, - ErrorMessageComponent - ], - providers: [ModalService] -}) -export class ModalModule { - -} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/popover/popover-content.component.html deleted file mode 100644 index 6d76f0ad06..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
-
-
-
- {{ title }} - -
- -
- -
-
- - diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less deleted file mode 100644 index 04cdd3914b..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../assets/styles/mixins'; -@import '../../../../assets/styles/sprite-old'; -.popover .virtual-area { - height: 11px; - width: 100%; - position: absolute; -} -.popover.top .virtual-area { - bottom: -11px; -} -.popover.bottom .virtual-area { - top: -11px; -} -.popover.left .virtual-area { - right: -11px; -} -.popover.right .virtual-area { - left: -11px; -} -.popover.hide-arrow{ - margin: 0; -} - -.popover-header{ - .m_14_m; - font-weight: bold; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - height: 40px; - line-height: 48px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: left; - border-bottom: solid 1px @main_color_o; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0px 20px; - max-width:350px; - - .title{ - flex: 1; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .close-button{ - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } -} - -.popover-footer{ - background-color: @tlv_color_t; - height: 40px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - button{ - margin: 8px 12px 8px 6px; - } -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts deleted file mode 100644 index 6eb36287d0..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts +++ /dev/null @@ -1,278 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core"; -import {ButtonsModelMap} from "app/models"; -import {PopoverComponent} from "./popover.component"; - -@Component({ - selector: "popover-content", - templateUrl:'./popover-content.component.html', - styleUrls:['popover-content.component.less'] -}) -export class PopoverContentComponent implements AfterViewInit, OnDestroy { - - @Input() public title: string; - @Input() public buttons:ButtonsModelMap; - - @Input() - content: string; - - @Input() - placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom"; - - @Input() - animation: boolean = true; - - @Input() - closeOnClickOutside: boolean = false; - - @Input() - closeOnMouseOutside: boolean = false; - - @Input() - hideArrow: boolean = false; - - @ViewChild("popoverDiv") - popoverDiv: ElementRef; - - buttonsNames:Array; - - popover: PopoverComponent; - onCloseFromOutside = new EventEmitter(); - top: number = -10000; - left: number = -10000; - isIn: boolean = false; - displayType: string = "none"; - effectivePlacement: string; - - onDocumentMouseDown = (event: any) => { - const element = this.element.nativeElement; - if (!element || !this.popover) return; - if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return; - this.hide(); - this.onCloseFromOutside.emit(undefined); - }; - - - constructor(protected element: ElementRef, - protected cdr: ChangeDetectorRef, - protected renderer: Renderer) { - } - - listenClickFunc: any; - listenMouseFunc: any; - - ngAfterViewInit(): void { - this.buttonsNames = Object.keys(this.buttons); - if (this.closeOnClickOutside) - this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event)); - if (this.closeOnMouseOutside) - this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event)); - - this.show(); - this.cdr.detectChanges(); - } - - ngOnDestroy() { - if (this.closeOnClickOutside) - this.listenClickFunc(); - if (this.closeOnMouseOutside) - this.listenMouseFunc(); - } - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - show(): void { - if (!this.popover || !this.popover.getElement()) - return; - - const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement); - this.displayType = "block"; - this.top = p.top; - this.left = p.left; - this.isIn = true; - } - - hide(): void { - this.top = -10000; - this.left = -10000; - this.isIn = true; - this.popover.hide(); - } - - hideFromPopover() { - this.top = -10000; - this.left = -10000; - this.isIn = true; - } - - // ------------------------------------------------------------------------- - // Protected Methods - // ------------------------------------------------------------------------- - - protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { - let positionStrParts = positionStr.split("-"); - let pos0 = positionStrParts[0]; - let pos1 = positionStrParts[1] || "center"; - let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); - let targetElWidth = targetEl.offsetWidth; - let targetElHeight = targetEl.offsetHeight; - - this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl); - - let shiftWidth: any = { - center: function (): number { - return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; - }, - left: function (): number { - return hostElPos.left; - }, - right: function (): number { - return hostElPos.left + hostElPos.width - targetElWidth; - } - }; - - let shiftHeight: any = { - center: function (): number { - return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; - }, - top: function (): number { - return hostElPos.top; - }, - bottom: function (): number { - return hostElPos.top + hostElPos.height - targetElHeight; - } - }; - - let targetElPos: { top: number, left: number }; - switch (pos0) { - case "right": - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left + hostElPos.width - }; - break; - - case "left": - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left - targetElWidth - }; - break; - - case "bottom": - targetElPos = { - top: hostElPos.top + hostElPos.height, - left: shiftWidth[pos1]() - }; - break; - - default: - targetElPos = { - top: hostElPos.top - targetElHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElPos; - } - - protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { - let offsetParentBCR = { top: 0, left: 0 }; - const elBCR = this.offset(nativeEl); - const offsetParentEl = this.parentOffsetEl(nativeEl); - if (offsetParentEl !== window.document) { - offsetParentBCR = this.offset(offsetParentEl); - offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; - offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; - } - - const boundingClientRect = nativeEl.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeEl.offsetWidth, - height: boundingClientRect.height || nativeEl.offsetHeight, - top: elBCR.top - offsetParentBCR.top, - left: elBCR.left - offsetParentBCR.left - }; - } - - protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } { - const boundingClientRect = nativeEl.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeEl.offsetWidth, - height: boundingClientRect.height || nativeEl.offsetHeight, - top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), - left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) - }; - } - - protected getStyle(nativeEl: HTMLElement, cssProp: string): string { - if ((nativeEl as any).currentStyle) // IE - return (nativeEl as any).currentStyle[cssProp]; - - if (window.getComputedStyle) - return (window.getComputedStyle as any)(nativeEl)[cssProp]; - - // finally try and get inline style - return (nativeEl.style as any)[cssProp]; - } - - protected isStaticPositioned(nativeEl: HTMLElement): boolean { - return (this.getStyle(nativeEl, "position") || "static" ) === "static"; - } - - protected parentOffsetEl(nativeEl: HTMLElement): any { - let offsetParent: any = nativeEl.offsetParent || window.document; - while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { - offsetParent = offsetParent.offsetParent; - } - return offsetParent || window.document; - } - - protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string { - const placementParts = placement.split(" "); - if (placementParts[0] !== "auto") { - return placement; - } - - const hostElBoundingRect = hostElement.getBoundingClientRect(); - - const desiredPlacement = placementParts[1] || "bottom"; - - if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) { - return "bottom"; - } - if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) { - return "top"; - } - if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) { - return "right"; - } - if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) { - return "left"; - } - - return desiredPlacement; - } -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/popover/popover.component.ts deleted file mode 100644 index e976bc7bf2..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover.component.ts +++ /dev/null @@ -1,179 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; -import {PopoverContentComponent} from "./popover-content.component"; - -@Directive({ - selector: "[popover]", - exportAs: "popover" -}) -export class PopoverComponent implements OnChanges { - - protected PopoverComponent = PopoverContentComponent; - protected popover: ComponentRef; - protected visible: boolean; - - - constructor(protected viewContainerRef: ViewContainerRef, - protected resolver: ComponentFactoryResolver) { - } - - @Input("popover") - content: string|PopoverContentComponent; - - @Input() - popoverDisabled: boolean; - - @Input() - popoverAnimation: boolean; - - @Input() - popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right"; - - @Input() - popoverTitle: string; - - @Input() - popoverOnHover: boolean = false; - - @Input() - popoverCloseOnClickOutside: boolean; - - @Input() - popoverCloseOnMouseOutside: boolean; - - @Input() - popoverDismissTimeout: number = 0; - - @Output() - onShown = new EventEmitter(); - - @Output() - onHidden = new EventEmitter(); - - @HostListener("click") - showOrHideOnClick(): void { - if (this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.toggle(); - } - - @HostListener("focusin") - @HostListener("mouseenter") - showOnHover(): void { - if (!this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.show(); - } - - @HostListener("focusout") - @HostListener("mouseleave") - hideOnHover(): void { - if (this.popoverCloseOnMouseOutside) return; - if (!this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.hide(); - } - - ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { - if (changes["popoverDisabled"]) { - if (changes["popoverDisabled"].currentValue) { - this.hide(); - } - } - } - - toggle() { - if (!this.visible) { - this.show(); - } else { - this.hide(); - } - } - - show() { - if (this.visible) return; - - this.visible = true; - if (typeof this.content === "string") { - const factory = this.resolver.resolveComponentFactory(this.PopoverComponent); - if (!this.visible) - return; - - this.popover = this.viewContainerRef.createComponent(factory); - const popover = this.popover.instance as PopoverContentComponent; - popover.popover = this; - popover.content = this.content as string; - if (this.popoverPlacement !== undefined) - popover.placement = this.popoverPlacement; - if (this.popoverAnimation !== undefined) - popover.animation = this.popoverAnimation; - if (this.popoverTitle !== undefined) - popover.title = this.popoverTitle; - if (this.popoverCloseOnClickOutside !== undefined) - popover.closeOnClickOutside = this.popoverCloseOnClickOutside; - if (this.popoverCloseOnMouseOutside !== undefined) - popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; - - popover.onCloseFromOutside.subscribe(() => this.hide()); - if (this.popoverDismissTimeout > 0) - setTimeout(() => this.hide(), this.popoverDismissTimeout); - } else { - const popover = this.content as PopoverContentComponent; - popover.popover = this; - if (this.popoverPlacement !== undefined) - popover.placement = this.popoverPlacement; - if (this.popoverAnimation !== undefined) - popover.animation = this.popoverAnimation; - if (this.popoverTitle !== undefined) - popover.title = this.popoverTitle; - if (this.popoverCloseOnClickOutside !== undefined) - popover.closeOnClickOutside = this.popoverCloseOnClickOutside; - if (this.popoverCloseOnMouseOutside !== undefined) - popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; - - popover.onCloseFromOutside.subscribe(() => this.hide()); - if (this.popoverDismissTimeout > 0) - setTimeout(() => this.hide(), this.popoverDismissTimeout); - popover.show(); - } - - this.onShown.emit(this); - } - - hide() { - if (!this.visible) return; - - this.visible = false; - if (this.popover) - this.popover.destroy(); - - if (this.content instanceof PopoverContentComponent) - (this.content as PopoverContentComponent).hideFromPopover(); - - this.onHidden.emit(this); - } - - getElement() { - return this.viewContainerRef.element.nativeElement; - } - -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/popover/popover.module.ts deleted file mode 100644 index a9605c17b6..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover.module.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/17/2017. - */ -import {NgModule} from "@angular/core"; -import { CommonModule } from '@angular/common'; -import {PopoverComponent} from "./popover.component"; -import {PopoverContentComponent} from "./popover-content.component"; - -@NgModule({ - declarations: [ - PopoverComponent, - PopoverContentComponent - ], - imports: [ - // PopoverComponent, - // PopoverContentComponent - CommonModule - ], - exports: [ - PopoverComponent, - PopoverContentComponent - ], - providers: [] -}) -export class PopoverModule { - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html deleted file mode 100644 index 3ffc9c16be..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html +++ /dev/null @@ -1,66 +0,0 @@ -
- - -
- -
{{property.name}}
-
-
{{property.name}}
-
- -
- - - -
- -
- - -
{{property.type | contentAfterLastDot }}
-
{{property.schema.property.type | contentAfterLastDot }}
- - -
- - - - Add value to list - - - - -
- -
- - - - -
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less deleted file mode 100644 index 48d3d035d0..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less +++ /dev/null @@ -1,74 +0,0 @@ -@import '../../../../../assets/styles/variables.less'; -.flat-children-container { - .dynamic-property-row { - /*create nested left border classes for up to 10 levels of nesting*/ - .nested-border-loop(@i) when (@i > 0) { - @size: (@i - 1) *2; - &.nested-level-@{i} .table-cell:first-child { - border-left: ~"solid @{size}px #009fdb"; - } - .nested-border-loop(@i - 1) - } - .nested-border-loop(10); - } - dynamic-property { - &:first-child .dynamic-property-row.with-top-border { - border-top:solid 1px #d2d2d2; - } - &:not(:last-child) .dynamic-property-row { - border-bottom:solid 1px #d2d2d2; - } - } -} -.dynamic-property-row { - display:flex; - flex-direction:row; - align-items: stretch; - - .table-cell { - flex: 1; - padding:9px; - justify-content: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:first-child { - flex: 0 0 50%; - border-right:#d2d2d2 solid 1px; - &:only-of-type { - flex: 1 1 100%; - border-right:none; - } - } - &.empty { - height:40px; - } - } - .property-icon { - flex: 0 0 auto; - margin-right:10px; - align-self:center; - cursor:pointer; - } - -} - -.filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } -} -.inner-cell-div{ - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - display: inline; - padding-left: 8px; -} -.error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts deleted file mode 100644 index 9cf043098b..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts +++ /dev/null @@ -1,205 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, EventEmitter} from "@angular/core"; -import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models"; -import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils'; -import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils"; -import { DataTypeService } from "../../../services/data-type.service"; -import { trigger, state, style, transition, animate } from '@angular/core'; - - -@Component({ - selector: 'dynamic-property', - templateUrl: './dynamic-property.component.html', - styleUrls: ['./dynamic-property.component.less'], - animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] -}) -export class DynamicPropertyComponent { - - derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement - propType: DerivedPropertyType; - propPath: string; - isPropertyFEModel: boolean; - nestedLevel: number; - - @Input() canBeDeclared: boolean; - @Input() property: PropertyFEModel | DerivedFEProperty; - @Input() expandedChildId: string; - @Input() selectedPropertyId: string; - @Input() propertyNameSearchText: string; - @Input() readonly: boolean; - @Input() hasChildren: boolean; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() expandChild: EventEmitter = new EventEmitter(); - @Output() checkProperty: EventEmitter = new EventEmitter(); - @Output() deleteItem: EventEmitter = new EventEmitter(); - @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); - @Output() mapKeyChanged: EventEmitter = new EventEmitter(); - @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); - - - constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { - } - - ngOnInit() { - this.isPropertyFEModel = this.property instanceof PropertyFEModel; - this.propType = this.property.derivedDataType; - this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; - this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; - } - - - onClickPropertyRow = (property, event) => { - // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined - event && event.stopPropagation && event.stopPropagation(); - this.clickOnPropertyRow.emit(property); - } - - - expandChildById = (id: string) => { - this.expandedChildId = id; - this.expandChild.emit(id); - } - - checkedChange = (propName: string) => { - this.checkProperty.emit(propName); - } - - getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children - return _.filter((this.property).flattenedChildren,(prop:DerivedFEProperty)=>{ - return _.startsWith(prop.propertiesName + '#', property.propertiesName); - }).length > 1; - } - - createNewChildProperty = (): void => { - - let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); - if (this.property instanceof PropertyFEModel) { - this.addChildProps(newProps, this.property.name); - } else { - this.addChildPropsToParent.emit(newProps); - } - } - - addChildProps = (newProps: Array, childPropName: string) => { - - if (this.property instanceof PropertyFEModel) { - let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children - this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator - this.expandChildById(newProps[0].propertiesName); - - - if(!newProps[0].schema.property.isSimpleType){ - if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) - this.updateMapKeyValueOnMainParent(newProps); - if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { - this.valueChanged.emit(this.property.name); - } - } - } - } - } - - updateMapKeyValueOnMainParent(childrenProps: Array){ - if (this.property instanceof PropertyFEModel) { - //Update only if all this property parents has key name - if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ - angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props - (this.property).childPropUpdated(prop); - },this); - //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) - let parentNames = (this.property).getParentNamesArray(childrenProps[0].propertiesName, []); - childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); - } - } - } - - childValueChanged = (property: DerivedFEProperty) => { //value of child property changed - - if (this.property instanceof PropertyFEModel) { // will always be the case - if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save - this.property.childPropUpdated(property); - this.dataTypeService.checkForCustomBehavior(this.property); - this.valueChanged.emit(this.property.name); - } - } - } - - deleteListOrMapItem = (item: DerivedFEProperty) => { - if (this.property instanceof PropertyFEModel) { - this.removeValueFromParent(item); - this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); - this.expandChildById(item.propertiesName); - } - } - - removeValueFromParent = (item: DerivedFEProperty, target?: any) => { - if (this.property instanceof PropertyFEModel) { - let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); - - if (item.derivedDataType == DerivedPropertyType.MAP) { - let oldKey = item.mapKey; - if (target && typeof target.value == 'string') { //allow saving empty string - let replaceKey:string = target.value; - if (!replaceKey) {//prevent delete map key - return; - } - if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists - target.setCustomValidity('This key is already exists.'); - return; - }else { - target.setCustomValidity(''); - _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); - item.mapKey = replaceKey; - //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. - if(!oldKey && !item.schema.property.isSimpleType){ - //Search this map item children and update these value on parent property valueOBj - let mapKeyFlattenChildren:Array = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { - return _.startsWith(prop.propertiesName, item.propertiesName); - }); - this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); - } - } - } - delete itemParent.valueObj[oldKey]; - } else { - let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); - itemParent.valueObj.splice(itemIndex, 1); - } - if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) - if (itemParent instanceof PropertyFEModel) { //direct child - this.valueChanged.emit(this.property.name); - } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) - this.childValueChanged(itemParent); - } - } - } - } - - preventInsertItem = (property:DerivedFEProperty):boolean => { - if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){ - return true; - } - return false; - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html deleted file mode 100644 index a9dc499e7d..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ /dev/null @@ -1,63 +0,0 @@ -
- -
-
Property Name
-
Type
-
ES
-
Value
-
-
-
No data to display
- - -
{{feInstanceNamesMap[instanceId]}}
- -
- -
-
- -
- {{property.name}} -
-
- -
-
-
- {{property.type | contentAfterLastDot}} -
-
-
-
- {{property.schema.property.type | contentAfterLastDot}} -
-
-
- - - - -
-
- - - -
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less deleted file mode 100644 index 9ede84faff..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ /dev/null @@ -1,166 +0,0 @@ -@import './../../../../assets/styles/variables.less'; -@import '../../../../assets/styles/sprite'; -@smaller-screen: ~"only screen and (max-width: 1580px)"; - -:host /deep/ input { width:100%;} - -.properties-table { - display:flex; - flex-direction:column; - flex: 1; - height:100%; - text-align:left; - - - .inner-cell-div{ - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - .table-header { - display: flex; - flex-direction:row; - flex: 0 0 auto; - font-weight:bold; - border-top: #d2d2d2 solid 1px; - background-color: #f2f2f2; - - .table-cell { - color:#191919; - font-size:13px; - } - } - - .table-rows-header { - border: #d2d2d2 solid 1px; - border-top:none; - } - - .table-body { - display:flex; - flex-direction: column; - overflow-y:auto; - flex: 1; - - .no-data { - border: #d2d2d2 solid 1px; - border-top:none; - text-align: center; - height: 100%; - padding: 20px; - } - /deep/.selected{ - background-color: #e6f6fb; - color: #009fdb; - } - .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; - - &:hover:not(.selected){ - background-color:#f8f8f8; cursor:pointer; - } - - .selected-row { - background-color:#e6f6fb; - } - - .table-cell.valueCol { - padding:0px; - - } - } - } - .table-cell { - font-size:13px; - flex:1; - border: #d2d2d2 solid 1px; - border-right:none; - border-top:none; - padding:10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow:hidden; - display: flex; - min-height:40px; - - &:last-child { - border-right:#d2d2d2 solid 1px; - } - &.col1 { - flex: 1 0 210px; - max-width:300px; - display: flex; - justify-content: space-between; - @media @smaller-screen { flex: 0 0 25%;} - - .property-name { - flex: 1; - display: flex; - max-width: 90%; - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 5px; - flex: 0 0 auto; - } - } - &.col2 { - flex: 0 0 150px; - max-width:150px; - @media @smaller-screen { flex: 0 0 20%;} - } - - &.col3 { - flex:0 0 120px; - max-width:120px; - @media @smaller-screen { flex: 0 0 15%;} - } - - &.valueCol { - flex: 2 0 300px; - display: flex; - @media @smaller-screen { flex: 1 0 40%;} - } - - - /deep/ .checkbox-container { - margin-right: 10px; - } - - /deep/ &.round-checkbox { - .checkbox-container input[type=checkbox].checkbox-hidden { - &:checked ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon; - } - &[disabled] ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon.disabled; - background-color:inherit; - border:none; - //animation: addDisabledCheck 4s linear; - } - } - } - } - - .filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } - } - - dynamic-property { - width:100%; - &:last-child /deep/ .dynamic-property-row { - border-bottom:none; - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts deleted file mode 100644 index afb7189348..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core"; -import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models"; -import {PropertiesService} from "../../services/properties.service"; -import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component'; -import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; - -@Component({ - selector: 'properties-table', - templateUrl: './properties-table.component.html', - styleUrls: ['./properties-table.component.less'] -}) -export class PropertiesTableComponent { - - @Input() fePropertiesMap: InstanceFePropertiesMap; - @Input() feInstanceNamesMap: Map; - @Input() selectedPropertyId: string; - @Input() displayDeleteButton: boolean; - @Input() propertyNameSearchText:string; - @Input() searchTerm:string; - @Input() readonly:boolean; - @Input() isLoading:boolean; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() selectPropertyRow: EventEmitter = new EventEmitter(); - @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter(); - //@Output() selectInstanceRow: EventEmitter = new EventEmitter(); - - - constructor ( private propertiesService:PropertiesService ){ - } - - - propValueChanged = (property) => { - !property.isDeclared && this.valueChanged.emit(property); - }; - - // Click on main row (row of propertyFEModel) - onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { - //event && event.stopPropagation(); - this.selectedPropertyId = property.name; - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); - this.selectPropertyRow.emit(propertyRowSelectedEvent); - }; - - // Click on inner row (row of DerivedFEProperty) - onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); - this.selectPropertyRow.emit(propertyRowSelectedEvent); - } - - propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { - let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; - - if (!isChecked) { - this.propertiesService.undoDisableRelatedProperties(prop, childPropName); - } else { - this.propertiesService.disableRelatedProperties(prop, childPropName); - } - this.updateCheckedPropertyCount.emit(isChecked); - } - -} - -export class PropertyRowSelectedEvent { - propertyModel:PropertyFEModel | DerivedFEProperty; - instanceName:string; - constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ - this.propertyModel = propertyModel; - this.instanceName = instanceName; - } -} - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html deleted file mode 100644 index 1fbf45e39f..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less deleted file mode 100644 index 1ff496f840..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.tooltip-inner { - word-wrap: break-word; - max-width: 300px; -} - -.tooltip.bottom .tooltip-arrow { - border-bottom-color: #000 !important; -} - - - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts deleted file mode 100644 index 4dcb64c499..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts +++ /dev/null @@ -1,215 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core"; - -@Component -({ - selector: "tooltip-content", - templateUrl: "./tooltip-content.component.html", - styleUrls: ["./tooltip-content.component.less"] -}) - -export class TooltipContentComponent implements AfterViewInit { - - // ------------------------------------------------------------------------- - // Inputs / Outputs - // ------------------------------------------------------------------------- - - @Input() hostElement: HTMLElement; - @Input() content: string; - @Input() placement: "top"|"bottom"|"left"|"right" = "bottom"; - @Input() animation: boolean = true; - - // ------------------------------------------------------------------------- - // Properties - // ------------------------------------------------------------------------- - - top: number = -100000; - left: number = -100000; - isIn: boolean = false; - isFade: boolean = false; - - // ------------------------------------------------------------------------- - // Constructor - // ------------------------------------------------------------------------- - - constructor(private element: ElementRef, - private cdr: ChangeDetectorRef) { - } - - // ------------------------------------------------------------------------- - // Lifecycle callbacks - // ------------------------------------------------------------------------- - - ngAfterViewInit(): void { - this.show(); - this.cdr.detectChanges(); - } - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - show(): void { - if(!this.hostElement) { - return; - } - - const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement); - this.top = position.top; - this.left = position.left; - this.isIn = true; - if (this.animation) { - this.isFade = true; - } - } - - hide(): void { - this.top = -100000; - this.left = -100000; - this.isIn = true; - if(this.animation) { - this.isFade = false; - } - } - - // ------------------------------------------------------------------------- - // Private Methods - // ------------------------------------------------------------------------- - - private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} { - let positionStrParts = positionStr.split("-"); - let pos0 = positionStrParts[0]; - let pos1 = positionStrParts[1] || "center"; - let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem); - let targetElemWidth = targetElem.offsetWidth; - let targetElemHeight = targetElem.offsetHeight; - let shiftWidth: any = { - center(): number { - return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2; - }, - left(): number { - return hostElemPosition.left; - }, - right(): number { - return hostElemPosition.left + hostElemPosition.width; - } - }; - - let shiftHeight: any = { - center: function (): number { - return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2; - }, - top: function (): number { - return hostElemPosition.top; - }, - bottom: function (): number { - return hostElemPosition.top + hostElemPosition.height; - } - } - - let targetElemPosition: {top: number, left: number}; - - switch (pos0) { - case "right": - targetElemPosition = { - top: shiftHeight[pos1](), - left: shiftWidth[pos0]() - }; - break; - - case "left": - targetElemPosition = { - top: shiftHeight[pos1](), - left: hostElemPosition.left - targetElemWidth - }; - break; - - case "bottom": - targetElemPosition = { - top: shiftHeight[pos0](), - left: shiftWidth[pos1]() - }; - break; - - default: - targetElemPosition = { - top: hostElemPosition.top - targetElemHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElemPosition; - } - - - private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} { - let offsetParentCBR = {top: 0, left: 0}; - const elemBCR = this.offset(nativeElem); - const offsetParentElem = this.parentOffsetElem(nativeElem); - if(offsetParentElem !== window.document) { - offsetParentCBR = this.offset(offsetParentElem); - offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop; - offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop; - } - - const boundingClientRect = nativeElem.getBoundingClientRect(); - - return { - width: boundingClientRect.width || nativeElem.offsetWidth, - height: boundingClientRect.height || nativeElem.offsetHeight, - top: elemBCR.top - offsetParentCBR.top, - left: elemBCR.left - offsetParentCBR.left - }; - } - - private offset(nativeElem:any): {width: number, height: number, top: number, left: number} { - const boundingClientRect = nativeElem.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeElem.offsetWidth, - height: boundingClientRect.height || nativeElem.offsetHeight, - top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), - left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) - }; - } - - private getStyle(nativeElem: HTMLElement, cssProperty: string): string { - if(window.getComputedStyle) { - return (window.getComputedStyle(nativeElem) as any)[cssProperty]; - } - - return (nativeElem.style as any)[cssProperty]; - } - - private isStaticPositioned(nativeElem: HTMLElement): boolean { - return (this.getStyle(nativeElem, "position") || "static") === "static"; - } - - private parentOffsetElem(nativeElem: HTMLElement): any { - let offsetParent: any = nativeElem.offsetParent || window.document; - while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { - offsetParent = offsetParent.offsetParent; - } - - return offsetParent || window.document; - } -} diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts deleted file mode 100644 index 79d35c6e0e..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts +++ /dev/null @@ -1,109 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { - Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener -} from "@angular/core"; -import {TooltipContentComponent} from "./tooltip-content.component"; - -@Directive ({ - selector: "[tooltip]" -}) -export class TooltipComponent { - - // ------------------------------------------------------------------------- - // Properties - // ------------------------------------------------------------------------- - - private tooltip: ComponentRef; - private visible: boolean; - private delayInProgress: boolean = false; - - // ------------------------------------------------------------------------- - // Constructor - // ------------------------------------------------------------------------- - - constructor(private viewContainerRef: ViewContainerRef, - private resolver: ComponentFactoryResolver) { - } - - // ------------------------------------------------------------------------- - // Inputs / Outputs - // ------------------------------------------------------------------------- - - @Input("tooltip") content: string|TooltipContentComponent; - @Input() tooltipDisabled: boolean; - @Input() tooltipAnimation: boolean = true; - @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; - @Input() tooltipDelay: number = 1500; - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - @HostListener("mouseenter") - show(): void { - if(this.tooltipDisabled || this.visible || this.content === "") { - return; - } - if (this.tooltipDelay && !this.delayInProgress) { - this.delayInProgress = true; - setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); - return; - } - - this.visible = true; - if (typeof this.content === "string") { - const factory = this.resolver.resolveComponentFactory(TooltipContentComponent); - if (!this.visible) { - return; - } - - this.tooltip = this.viewContainerRef.createComponent(factory); - this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement; - this.tooltip.instance.content = this.content as string; - this.tooltip.instance.placement = this.tooltipPlacement; - this.tooltip.instance.animation = this.tooltipAnimation; - } else { - const tooltip = this.content as TooltipContentComponent; - tooltip.hostElement = this.viewContainerRef.element.nativeElement; - tooltip.placement = this.tooltipPlacement; - tooltip.animation = this.tooltipAnimation; - tooltip.show(); - } - } - - @HostListener("mouseleave") - hide(): void { - this.delayInProgress = false; - if (!this.visible) { - return; - } - - this.visible = false; - if (this.tooltip) { - this.tooltip.destroy(); - } - if (this.content instanceof TooltipContentComponent) { - (this.content as TooltipContentComponent).hide(); - } - } -} - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts deleted file mode 100644 index 84a3987081..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {NgModule} from "@angular/core"; -import {TooltipContentComponent} from "./tooltip-content.component"; -import {TooltipComponent} from "./tooltip.component"; -import {CommonModule} from "@angular/common"; - -@NgModule({ - declarations: [ - TooltipComponent, - TooltipContentComponent, - ], - imports: [ - CommonModule - ], - exports: [ - TooltipComponent, - TooltipContentComponent, - ], - entryComponents: [ - TooltipContentComponent - ], - providers: [] -}) -export class TooltipModule { - -} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less new file mode 100644 index 0000000000..e219d49aa4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less @@ -0,0 +1,3 @@ +dynamic-element { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts new file mode 100644 index 0000000000..53d1590b1c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts @@ -0,0 +1,140 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core' +import {ValidationConfiguration} from "app/models"; +import {UiElementInputComponent} from "../form-components/input/ui-element-input.component"; +import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component"; +import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component"; +import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component"; +import {PROPERTY_DATA} from "../../../../utils/constants"; + +@Component({ + selector: 'dynamic-element', + template: `
`, + styleUrls: ['./dynamic-element.component.less'], + entryComponents: [ + UiElementInputComponent, + UiElementDropDownComponent, + UiElementPopoverInputComponent, + UiElementIntegerInputComponent + ] +}) +export class DynamicElementComponent { + + @ViewChild('target', { read: ViewContainerRef }) target: any; + @Input() type: any; + @Input() name: string; + @Input() readonly:boolean; + @Input() path:string;//optional param. used only for for subnetpoolid type + value:any; + + // Two way binding for value (need to write the "Change" word like this) + @Output('valueChange') emitter: EventEmitter = new EventEmitter(); + @Input('value') set setValueValue(value) { + this.value = value; + } + + cmpRef: ComponentRef; + private isViewInitialized: boolean = false; + validation = ValidationConfiguration.validation; + + constructor( + private componentFactoryResolver: ComponentFactoryResolver, + private compiler: Compiler, + private el: ElementRef) { + } + + updateComponent() { + if (!this.isViewInitialized) { + return; + } + if (this.cmpRef) { + this.cmpRef.destroy(); + } + + // Factory to create component based on type or peroperty name. + switch(true) { + case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1: + if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name + let pathArray = this.path.split("#"); + this.name = pathArray[pathArray.length - 2]; + } + this.createComponent(UiElementPopoverInputComponent); + break; + case this.type == 'integer': + this.createComponent(UiElementIntegerInputComponent); + this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; + break; + case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1: + case this.type == 'string': + this.createComponent(UiElementInputComponent); + break; + case this.type == 'boolean': + + this.createComponent(UiElementDropDownComponent); + + // Build drop down values + let tmp = []; + tmp.push(new DropdownValue(true,'TRUE')); + tmp.push(new DropdownValue(false,'FALSE')); + this.cmpRef.instance.values = tmp; + break; + default: + this.createComponent(UiElementInputComponent); + console.log("ERROR: No ui component to handle type: " + this.type); + } + + // Additional attributes in base element class + if (this.cmpRef) { + this.cmpRef.instance.name = this.name; + this.cmpRef.instance.type = this.type; + this.cmpRef.instance.value = this.value; + this.cmpRef.instance.readonly = this.readonly; + } + + // Subscribe to change event of of ui-element-basic and fire event to change the value + this.cmpRef.instance.baseEmitter.subscribe((value):void => { + this.emitter.emit(value) + }); + + } + + createComponent(ComponentToCreate:any):void { + let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate); + this.cmpRef = this.target.createComponent(factory); + } + + ngOnChanges() { + this.updateComponent(); + } + + ngAfterContentInit() { + this.isViewInitialized = true; + this.updateComponent(); + } + + ngOnDestroy() { + if (this.cmpRef) { + this.cmpRef.destroy(); + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts new file mode 100644 index 0000000000..50b22505a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts @@ -0,0 +1,43 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from "@angular/core"; +import {PopoverModule} from "../popover/popover.module"; +import {TooltipModule} from "../tooltip/tooltip.module"; +import {DynamicElementComponent} from "./dynamic-element.component"; +import {FormElementsModule} from "../form-components/form-elements.module"; + +@NgModule({ + declarations: [ + DynamicElementComponent, + ], + imports: [ + PopoverModule, + TooltipModule, + FormElementsModule + ], + exports: [ + DynamicElementComponent + ], + providers: [] +}) +export class DynamicElementModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html new file mode 100644 index 0000000000..872bf90329 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html @@ -0,0 +1,8 @@ +
+
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less new file mode 100644 index 0000000000..9df2680b6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less @@ -0,0 +1,67 @@ + @import '../../../../../../assets/styles/tlv-sprite'; +@import '../../../../../../assets/styles/sprite'; + + +.checkbox-container { + display:inline-block; + position:relative; + text-align: left; + height: 20px; + + + .checkbox-icon { + display: inline-block; + } + + .checkbox-label { + font-weight: inherit; + font-size: inherit; + } + + .checkbox-label-content { + margin-left:2px; + } + + .checkbox-icon::before { + .tlv-sprite; + background-position: -10px -60px; + width: 14px; + height: 14px; + content: ''; + display: inline-block; + margin-right: 0px; + margin-top: -2px; + vertical-align: middle; + } + + input[type=checkbox].checkbox-hidden { + width:0; + height:0; + display:none; + &:checked ~ .checkbox-icon::before{ + .sprite-new; + .filled-checkbox-icon + } + &[disabled] ~ .checkbox-icon::before { + /* TODO: add disabled styles here */ + background-image: none; + background-color: #EFEFEF; + border-radius: 2px; + border: solid #CCC 1px; + } + } + + .checkbox-animation { + background-color: #009fdb; + position: absolute; + left: 2px; + top: 4px; + width:10px; + height:10px; + border-radius: 50%; + z-index: 1; + pointer-events: none; + opacity:0; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts new file mode 100644 index 0000000000..c8da016174 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts @@ -0,0 +1,50 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; + +@Component({ + selector: 'checkbox', + templateUrl: './checkbox.component.html', + styleUrls: ['./checkbox.component.less'], + encapsulation: ViewEncapsulation.None + // animations: [ + // trigger('checkEffect', [ + // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), + // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), + // transition('1 => 0', animate('150ms ease-out')), + // transition('0 => 1', animate('150ms ease-in')) + // ]) + // ] +}) +export class CheckboxComponent { + + @Input() checkboxStyle: string; + @Input() label: string; + @Input() checked: boolean; + @Input() disabled: boolean; + @Output() checkedChange: EventEmitter = new EventEmitter(); + + toggleState(newValue:boolean) { + this.checkedChange.emit(newValue); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts new file mode 100644 index 0000000000..4ac7f2d7cd --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { CheckboxComponent } from './checkbox.component'; + + +@NgModule({ + imports: [CommonModule, BrowserModule, FormsModule], + declarations: [CheckboxComponent], + bootstrap: [], + exports: [CheckboxComponent] +}) +export class CheckboxModule { } + +/** README: **/ + +/** USAGE Example: + *In page.module.ts: import CheckboxModule + *In HTML: + * + */ + +/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) + * + * To create or override styles: + * Use /deep/ or >>> prefix to override styles via other components stylesheets + */ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html new file mode 100644 index 0000000000..c6b8384183 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html @@ -0,0 +1,3 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less new file mode 100644 index 0000000000..ea3e35140e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less @@ -0,0 +1,11 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-dropdown { + + select { + text-indent: 6px; + border: solid 1px @main_color_o; + width: 100%; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts new file mode 100644 index 0000000000..5abf32c61b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts @@ -0,0 +1,51 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Output, Input} from '@angular/core' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +export class DropdownValue { + value:any; + label:string; + + constructor(value:any,label:string) { + this.value = value; + this.label = label; + } +} + +@Component({ + selector: 'ui-element-dropdown', + templateUrl: './ui-element-dropdown.component.html', + styleUrls: ['./ui-element-dropdown.component.less'], +}) +export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { + @Input() + values: DropdownValue[]|string[]; + + constructor() { + super(); + } + + onSave() { + this.baseEmitter.emit(this.value); + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts new file mode 100644 index 0000000000..e5bdf1f557 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts @@ -0,0 +1,42 @@ +/** + * Created by rc2122 on 9/5/2017. + */ +import {NgModule} from "@angular/core"; +import {BrowserModule} from "@angular/platform-browser"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component"; +import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component"; +import {UiElementInputComponent} from "./input/ui-element-input.component"; +import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component"; +import {UiElementBase} from "./ui-element-base.component"; +import {CheckboxModule} from "./checkbox/checkbox.module"; +import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component"; +import {PopoverModule} from "../popover/popover.module"; +import {TooltipModule} from "../tooltip/tooltip.module"; + + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + PopoverModule, + ReactiveFormsModule, + TooltipModule, + CheckboxModule], + + declarations: [UiElementDropDownComponent, + UiElementInputComponent, + UiElementIntegerInputComponent, + UiElementPopoverInputComponent, + UiElementBase, + RadioButtonComponent], + + exports: [UiElementDropDownComponent, + UiElementInputComponent, + UiElementIntegerInputComponent, + UiElementPopoverInputComponent, + RadioButtonComponent, + TooltipModule, + CheckboxModule] +}) +export class FormElementsModule { } \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html new file mode 100644 index 0000000000..b7d7c859c7 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html @@ -0,0 +1,14 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less new file mode 100644 index 0000000000..d320c7ff8b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts new file mode 100644 index 0000000000..fb3b3db859 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +@Component({ + selector: 'ui-element-input', + templateUrl: './ui-element-input.component.html', + styleUrls: ['./ui-element-input.component.less'], +}) +export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html new file mode 100644 index 0000000000..9fbc9e1094 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html @@ -0,0 +1,14 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less new file mode 100644 index 0000000000..8073c3858e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-integer-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts new file mode 100644 index 0000000000..1667f4393d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +@Component({ + selector: 'ui-element-integer-input', + templateUrl: './ui-element-integer-input.component.html', + styleUrls: ['./ui-element-integer-input.component.less'], +}) +export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + //this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html new file mode 100644 index 0000000000..3bd51b4e36 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html @@ -0,0 +1,26 @@ +
+ + +
+ + +
+ +
+ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less new file mode 100644 index 0000000000..5be443f7b6 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less @@ -0,0 +1,36 @@ +@import '../../../../../../assets/styles/variables'; + +.popover-input-wrapper { + display: flex; +} + +/deep/ ui-element-popover-input { + + .popover { + max-width: 350px; + width: 350px; + } + + .edit-subnet-wrapper { + padding: 12px; + + .subnet-value { + width: 100%; + resize: none; + } + } + + input { + padding-right: 6px; + padding-left: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts new file mode 100644 index 0000000000..61688df3f0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts @@ -0,0 +1,57 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, Input} from '@angular/core'; +import {ButtonsModelMap, ButtonModel} from "app/models"; +import {PopoverContentComponent} from "../../popover/popover-content.component"; +import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component"; + +@Component({ + selector: 'ui-element-popover-input', + templateUrl: './ui-element-popover-input.component.html', + styleUrls: ['./ui-element-popover-input.component.less'] +}) +export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { + @ViewChild('textArea') textArea: ElementRef; + @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; + + saveButton: ButtonModel; + buttonsArray: ButtonsModelMap; + + onSave = ():void => { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value); + this.popoverContentComponent.hide(); + } + } + + constructor() { + super(); + // Create Save button and insert to buttons map + this.saveButton = new ButtonModel('save', 'blue', this.onSave); + this.buttonsArray = { 'test': this.saveButton }; + + // Define the regex pattern for this controller + this.pattern = this.validation.validationPatterns.comment; + + // Disable / Enable button according to validation + //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less new file mode 100644 index 0000000000..b929486b10 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less @@ -0,0 +1,42 @@ +@import './../../../../../../assets/styles/variables.less'; +.radio-buttons-container{ + display: flex; + &.vertical{ + flex-direction: column; + } + &.horizontal{ + flex-direction: row; + } +} +.radio-button { + margin: 0 10px 10px 0; + display: flex; +} + +input[type=radio] { + width:0; + height:0; + display:none; + &[disabled] ~ .radio-button { + + } +} + +.shown-radio-button{ + border: @main_color_n solid 1px; + height: 14px; + width: 14px; + border-radius: 50%; + padding: 1px; + margin: auto 5px; + .selected{ + background-color: @main_color_a; + height: 100%; + width: 100%; + border-radius: 50%; + } +} +span{ + margin: auto 0; + color: @func_color_s; +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html new file mode 100644 index 0000000000..6c927301db --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html @@ -0,0 +1,8 @@ +
+
+ +
+ {{option.key}} +
+
+ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts new file mode 100644 index 0000000000..0f80e2ad44 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts @@ -0,0 +1,29 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { RadioButtonModel } from 'app/models' +import {UiElementBaseInterface, UiElementBase} from "../ui-element-base.component"; + +@Component({ + selector: 'radio-buttons', + templateUrl: './radio-buttons.component.html', + styleUrls: ['./radio-button.component.less'] +}) +export class RadioButtonComponent extends UiElementBase implements UiElementBaseInterface { + + onSave() { + this.baseEmitter.emit(this.value); + } + + @Input() options:Array; + @Input() readonly:boolean; + @Input() direction:string = 'vertical'; //get 'horizontal' | 'vertical' + value:any; + + select(value:any) { + this.value = value; + this.baseEmitter.emit(this.value); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts new file mode 100644 index 0000000000..ae2013ff70 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core' +import { ValidationConfiguration } from "app/models"; +import { FormControl, Validators } from '@angular/forms'; + +export interface UiElementBaseInterface { + onSave(); +} + +@Component({ + template: ``, + styles: [] +}) +export class UiElementBase { + + protected validation = ValidationConfiguration.validation; + protected control: FormControl; + + // Two way binding for value (need to write the "Change" word like this) + @Output('valueChange') baseEmitter: EventEmitter = new EventEmitter(); + @Input('value') set setValueValue(value) { + this.value = value; + } + + @Input() name: string; + @Input() type: string; + @Input() value: any; + @Input() pattern: any; + @Input() readonly:boolean; + + constructor() { + //this.control = new FormControl('', [Validators.required]); + this.control = new FormControl('', []); + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html new file mode 100644 index 0000000000..a62aa114d9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html @@ -0,0 +1,6 @@ +
+
+
+
+ diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less new file mode 100644 index 0000000000..006c3bfa43 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less @@ -0,0 +1,91 @@ +@import '../../../../../assets/styles/variables'; +.tlv-loader-back { + background-color: @main_color_p; + position: fixed; + top: 50px; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + opacity: 0.5; +} + +.tlv-loader-relative { position: absolute; top: 0;} + +.tlv-loader { + z-index: 10002; +} + +.loader-relative { + display: block; + position:absolute; + width: 100%; + height:100%; +} + +.loader-fixed { + display: block; + position:fixed; + top:0; + left:0; + width: 100%; + height:100%; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Internet Explorer */ +@-ms-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +@keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Internet Explorer */ +@-ms-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts new file mode 100644 index 0000000000..f66aa551e2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts @@ -0,0 +1,86 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 6/6/2017. + */ +import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; +@Component({ + selector: 'loader', + templateUrl: './loader.component.html', + styleUrls: ['./loader.component.less'] +}) +export class LoaderComponent { + + @Input() display: boolean; + @Input() size: string;// small || medium || large + @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. + @Input() loaderDelay: number; //optional - number of ms to delay loader display. + + private isVisible: boolean = false; + private offset : { + top: string; + left: string; + width: string; + height: string; + }; + + constructor(private viewContainerRef: ViewContainerRef) { + } + + ngOnInit() { + if (!this.size) { + this.size = 'large'; + } + if (this.display === true) { + this.changeLoaderDisplay(true); + } + } + + ngOnChanges(changes: SimpleChanges) { + if(changes.display){ + this.changeLoaderDisplay(this.display); + } + } + + private changeLoaderDisplay = (display: boolean): void => { + if (display) { + window.setTimeout((): void => { + this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. + }, this.loaderDelay || 0); + } else { + this.isVisible = false; + } + } + + private showLoader = () => { + if (this.relative === true) { + let parentElement = this.viewContainerRef.element.nativeElement.parentElement; + this.offset = { + left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, + top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, + width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, + height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined + }; + } + this.isVisible = true; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html new file mode 100644 index 0000000000..54640c9414 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less new file mode 100644 index 0000000000..ceb4409144 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less @@ -0,0 +1,13 @@ +@import "../../../../../assets/styles/variables"; + +.w-sdc-menu-item { + font-size: 14px; + line-height: 14px; + color: @main_color_m; + padding: 3px 6px; + + &:hover { + cursor: pointer; + background-color: @main_color_c; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts new file mode 100644 index 0000000000..8b2006634e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts @@ -0,0 +1,44 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'menu-item', + templateUrl: './menu-item.component.html', + styleUrls:['./menu-item.component.less'] +}) +export class MenuItemComponent { + @Input() action:Function; + @Input() styleClass:any; + + public parentMenu:any; + + constructor() { + } + + performAction() { + this.action(); + + if (this.parentMenu && typeof(this.parentMenu.close) === 'function') { + this.parentMenu.close(); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html new file mode 100644 index 0000000000..98c4d26fdd --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html @@ -0,0 +1,9 @@ +
+ + + +
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less new file mode 100644 index 0000000000..1b45ea775c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less @@ -0,0 +1,13 @@ +.w-sdc-menu-list { + position: fixed; + z-index: 100; + + border-style: solid; + border-width: 1px; + border-color: #d8d8d8; + box-sizing: border-box; + background-color: #ffffff; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + width: 91px; + padding: 6px 0; +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts new file mode 100644 index 0000000000..290c8d06af --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts @@ -0,0 +1,70 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, ContentChildren, SimpleChanges, QueryList } from '@angular/core'; +import { MenuItemComponent } from "./menu-item.component"; +import { Point } from "app/models"; + +@Component({ + selector: 'menu-list', + templateUrl: './menu-list.component.html', + styleUrls:['./menu-list.component.less'] +}) +export class MenuListComponent { + @Input('open') inputOpen:boolean = false; + @Input('position') inputPosition:Point = new Point(); + @Input() styleClass:any; + + @ContentChildren(MenuItemComponent) menuItems:QueryList; + + private position:Point; + private isOpen:boolean = false; + + constructor() { + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.inputOpen) { + (changes.inputOpen.currentValue) ? this.open() : this.close(); + } + if (changes.inputPosition) { + this.changePosition(changes.inputPosition.currentValue); + } + } + + ngAfterContentInit() { + this.menuItems.forEach((c) => c.parentMenu = this); + this.menuItems.changes.subscribe((list) => { + list.forEach((c) => c.parentMenu = this); + }); + } + + open(): void { + this.isOpen = true; + } + + close(): void { + this.isOpen = false; + } + + changePosition(position:Point) { + this.position = position; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts new file mode 100644 index 0000000000..fdbbf59f48 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { MenuListComponent } from "./menu-list.component"; +import { MenuItemComponent } from "./menu-item.component"; + +export { + MenuListComponent, + MenuItemComponent +}; + +@NgModule({ + declarations: [ + MenuListComponent, + MenuItemComponent + ], + imports: [CommonModule], + exports: [ + MenuListComponent, + MenuItemComponent + ], + entryComponents: [ //need to add anything that will be dynamically created + MenuListComponent, + MenuItemComponent + ] +}) +export class MenuListModule { +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html new file mode 100644 index 0000000000..433bd4fd6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html @@ -0,0 +1,5 @@ +
+
Error code: {{input.messageId}}
+
Status code: {{input.status}}
+
{{input.message}}
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts new file mode 100644 index 0000000000..c0d6673412 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by ngordon on 7/30/2017. + */ +import { Component, Input } from '@angular/core'; +import { ServerErrorResponse } from 'app/models'; + +@Component({ + selector: 'error-message', + templateUrl: './error-message.component.html' +}) + +export class ErrorMessageComponent { + @Input() input: ServerErrorResponse; + + constructor() { + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html new file mode 100644 index 0000000000..9a0fdf6bf4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html @@ -0,0 +1,21 @@ +
+
+
+ {{ input.title }} + +
+
+
{{input.content}}
+
+
+ +
+ +
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less new file mode 100644 index 0000000000..fac1ae74a8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less @@ -0,0 +1,129 @@ +@import '../../../../../assets/styles/variables'; +@import '../../../../../assets/styles/mixins'; +@import '../../../../../assets/styles/sprite-old'; +/deep/ modal { + display: none; +} + +.custom-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 15007; + overflow: auto; + margin: auto; + display: flex; + align-items: center; + + .ng2-modal-content { + background: #fff; + width: 100%; + box-shadow: 0 5px 15px rgba(0,0,0,.5); + border-radius: 4px; + .ng2-modal-body{ + padding: 20px; + } + + .ng2-modal-header{ + .m_18_r; + font-weight: bold; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 50px; + line-height: 50px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + + .title{ + .s_18_r; + -webkit-box-flex: 999; + -ms-flex-positive: 999; + flex-grow: 999; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } + } + + .ng2-modal-footer{ + background-color: @tlv_color_t; + padding: 17px 30px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + border-radius: 4px; + button{ + margin: 0 12px 0 6px; + } + } + } +} + +.modal-background { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #000; + opacity: 0.5; + z-index: 900; +} + + +.xl { + width: 1200px; +} + +.l { + width: 875px; +} + +.md { + width: 650px; +} + +.sm { + width: 552px; +} + +.xsm { + width: 432px; +} + +body.modal-open { + overflow: hidden; +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts new file mode 100644 index 0000000000..89db8d1140 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 6/1/2017. + */ +import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; +import {ViewContainerRef, ViewChild} from '@angular/core'; +import * as $ from 'jquery'; +import { ButtonsModelMap, ModalModel } from 'app/models'; + +@Component({ + selector: 'modal', + templateUrl: './modal.component.html', + styleUrls:['modal.component.less'] +}) + +export class ModalComponent implements OnInit, OnDestroy { + @Input() input: ModalModel; + @Input() dynamicContent: any; + @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. + private modalElement: JQuery; + + constructor( el: ElementRef ) { + this.modalElement = $(el.nativeElement); + } + + ngOnInit(): void { + this.modalElement.appendTo('body'); + } + + ngOnDestroy(): void { + this.modalElement.remove(); + } + + open(): void { + this.modalElement.show(); + $('body').addClass('modal-open'); + } + + close(): void { + this.modalElement.hide(); + $('body').removeClass('modal-open'); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts new file mode 100644 index 0000000000..c38e60194b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { ModalService } from 'app/ng2/services/modal.service'; +import { ErrorMessageComponent } from "./error-message/error-message.component"; +import {ModalComponent} from "./modal.component"; + +@NgModule({ + declarations: [ + ModalComponent, + ErrorMessageComponent + ], + imports: [CommonModule], + exports: [ModalComponent, ErrorMessageComponent], + entryComponents: [ //need to add anything that will be dynamically created + ModalComponent, + ErrorMessageComponent + ], + providers: [ModalService] +}) +export class ModalModule { + +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts new file mode 100644 index 0000000000..0c1669ec4b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts @@ -0,0 +1,10 @@ +/** + * Created by rc2122 on 9/27/2017. + */ +import {Component, Input} from "@angular/core"; +@Component({ +}) +export class WizardHeaderBaseComponent { + + @Input() currentStepIndex:number; +} diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html new file mode 100644 index 0000000000..9884b233ac --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html @@ -0,0 +1,57 @@ +
+
+
+ {{ input.title }} + +
+
+
+
+
+
+
{{step.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ + + +
+ +
+
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less new file mode 100644 index 0000000000..3a2168aeb0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less @@ -0,0 +1,90 @@ +@import './../../../../../assets/styles/variables.less'; + +@circle_size: 13px; + +.custom-modal{ + font-family: @font-opensans-regular; +} + +/deep/ multi-steps-wizard { + display: none; +} + +.ng2-modal-header{ + border: none !important; +} + +.ng2-modal-body{ + padding-top: 0 !important; +} + +header{ + margin-bottom: 10px; + .dynamic-header-container{ + position: relative; + top: -9px; + } + .steps-header{ + display: flex; + .step-title{ + flex: 1; + .title-text{ + width: 100%; + text-align: center; + line-height: 40px; + background-color: @tlv_color_u; + font-size: 13px; + } + .line{ + width: calc(~'100% - @{circle_size}'); + position: relative; + left: calc(~'(100% - @{circle_size})/2 * (-1)'); + float: left; + height: 2px; + .inner-line{ + background-color: @main_color_a; + height: 100%; + } + } + .circle{ + margin:0 auto; + border: @main_color_o solid 1px; + height: @circle_size; + width: @circle_size; + border-radius: 50%; + position: relative; + top: -@circle_size/2; + background-color: @main_color_p; + z-index: 1; + } + .full-circle{ + border-color: @main_color_a; + background-color: @main_color_a; + } + &.active{ + color: @main_color_a; + font-family: @font-opensans-medium; + .circle{ + border-color: @main_color_a; + } + } + } + } +} + +.navigation-buttons{ + padding-left: 6px; + border-left: 1px solid @main_color_a; + .navigation-button{ + padding: 0 8px; + .navigation-icon{ + margin: 3px 0; + &.blue-arrow-back{ + float: left; + } + &.white-arrow-next{ + float: right; + } + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts new file mode 100644 index 0000000000..9219a30738 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts @@ -0,0 +1,78 @@ +/** + * Created by rc2122 on 8/15/2017. + */ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +import { + Component, ElementRef, forwardRef, Inject, Input, trigger, state, style, + transition, animate, ViewChild, ViewContainerRef, ComponentRef +} from "@angular/core"; +import {StepModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; +import {ModalComponent} from "../modal/modal.component"; +import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component"; + + +@Component({ + selector: 'multi-steps-wizard', + templateUrl: './multi-steps-wizard.component.html', + styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'], + animations: [ + trigger('displayLineAnimation', [ + state('true', style({ + width: '100%', + })), + state('false', style({ + width:'0px', + })), + transition('* => *', animate('500ms')), + ]), + ], +}) +export class MultiStepsWizardComponent extends ModalComponent { + + @Input() steps:Array; + @Input() callback: Function; + @Input() data:any; + @Input() dynamicHeader: ComponentRef; + + @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef; + constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) { + super(el); + } + + private currentStepIndex:number = 0; + + nextStep = ():void => { + if(this.currentStepIndex + 1 < this.steps.length){ + this.currentStepIndex++; + this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component); + this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex; + } + } + + prevStep = ():void => { + if(this.currentStepIndex > 0){ + this.currentStepIndex--; + this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component); + this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex; + } + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts new file mode 100644 index 0000000000..3db217d282 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts @@ -0,0 +1,22 @@ +/** + * Created by rc2122 on 8/15/2017. + */ +import { NgModule } from "@angular/core"; +import {MultiStepsWizardComponent} from "./multi-steps-wizard.component"; +import {CommonModule} from "@angular/common"; +import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module"; + +@NgModule({ + declarations: [ + MultiStepsWizardComponent + ], + imports: [CommonModule + ], + exports: [], + entryComponents: [ + MultiStepsWizardComponent + ], + providers: [] +}) +export class MultiStepsWizardModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts new file mode 100644 index 0000000000..ac58cbd063 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts @@ -0,0 +1,27 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { MenuType, RouteInfo } from './navbar.metadata'; + +export const ROUTES: RouteInfo[] = [ + { path: 'page1', title: 'Logo', menuType: MenuType.BRAND }, + { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT }, + { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT } +]; diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html new file mode 100644 index 0000000000..d783be4c27 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html @@ -0,0 +1,23 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less new file mode 100644 index 0000000000..3e5165b798 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less @@ -0,0 +1,11 @@ +.active { + color: #ffffff; +} +.navbar-toggler { + border: solid 1px #cccccc; + color: #ff0000; +} +.navbar { + background-color: #0000ff; + border-radius: 0; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts new file mode 100644 index 0000000000..68a26c4780 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts @@ -0,0 +1,52 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, OnInit, ViewEncapsulation} from '@angular/core'; +import { ROUTES } from './navbar-routes.config'; +import { MenuType, RouteInfo } from './navbar.metadata'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: [ './navbar.component.less' ], + encapsulation: ViewEncapsulation.None +}) +export class NavbarComponent implements OnInit { + public menuItems: Array; + public brandMenu: RouteInfo; + isCollapsed = true; + + constructor() {} + + ngOnInit() { + this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); + this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; + } + + public get menuIcon(): string { + return this.isCollapsed ? '☰' : '✖'; + } + + public getMenuItemClasses(menuItem: any) { + return { + 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT + }; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts new file mode 100644 index 0000000000..71cc3cb59f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts @@ -0,0 +1,31 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +export enum MenuType { + BRAND, + LEFT, + RIGHT +} + +export interface RouteInfo { + path: string; + title: string; + menuType: MenuType; +} diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts new file mode 100644 index 0000000000..4a754dfe99 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { NavbarComponent } from "./navbar.component"; + +@NgModule({ + imports: [ + RouterModule, + CommonModule + ], + declarations: [ NavbarComponent ], + exports: [ + NavbarComponent + ] +}) +export class NavbarModule {} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html new file mode 100644 index 0000000000..6d76f0ad06 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html @@ -0,0 +1,24 @@ +
+
+
+
+ {{ title }} + +
+ +
+ +
+
+ + diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less new file mode 100644 index 0000000000..fbdec0b16b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less @@ -0,0 +1,77 @@ +@import '../../../../../assets/styles/variables'; +@import '../../../../../assets/styles/mixins'; +@import '../../../../../assets/styles/sprite-old'; +.popover .virtual-area { + height: 11px; + width: 100%; + position: absolute; +} +.popover.top .virtual-area { + bottom: -11px; +} +.popover.bottom .virtual-area { + top: -11px; +} +.popover.left .virtual-area { + right: -11px; +} +.popover.right .virtual-area { + left: -11px; +} +.popover.hide-arrow{ + margin: 0; +} + +.popover-header{ + .m_14_m; + font-weight: bold; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 40px; + line-height: 48px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + border-bottom: solid 1px @main_color_o; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + max-width:350px; + + .title{ + flex: 1; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } +} + +.popover-footer{ + background-color: @tlv_color_t; + height: 40px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + button{ + margin: 8px 12px 8px 6px; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts new file mode 100644 index 0000000000..6eb36287d0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts @@ -0,0 +1,278 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core"; +import {ButtonsModelMap} from "app/models"; +import {PopoverComponent} from "./popover.component"; + +@Component({ + selector: "popover-content", + templateUrl:'./popover-content.component.html', + styleUrls:['popover-content.component.less'] +}) +export class PopoverContentComponent implements AfterViewInit, OnDestroy { + + @Input() public title: string; + @Input() public buttons:ButtonsModelMap; + + @Input() + content: string; + + @Input() + placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom"; + + @Input() + animation: boolean = true; + + @Input() + closeOnClickOutside: boolean = false; + + @Input() + closeOnMouseOutside: boolean = false; + + @Input() + hideArrow: boolean = false; + + @ViewChild("popoverDiv") + popoverDiv: ElementRef; + + buttonsNames:Array; + + popover: PopoverComponent; + onCloseFromOutside = new EventEmitter(); + top: number = -10000; + left: number = -10000; + isIn: boolean = false; + displayType: string = "none"; + effectivePlacement: string; + + onDocumentMouseDown = (event: any) => { + const element = this.element.nativeElement; + if (!element || !this.popover) return; + if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return; + this.hide(); + this.onCloseFromOutside.emit(undefined); + }; + + + constructor(protected element: ElementRef, + protected cdr: ChangeDetectorRef, + protected renderer: Renderer) { + } + + listenClickFunc: any; + listenMouseFunc: any; + + ngAfterViewInit(): void { + this.buttonsNames = Object.keys(this.buttons); + if (this.closeOnClickOutside) + this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event)); + if (this.closeOnMouseOutside) + this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event)); + + this.show(); + this.cdr.detectChanges(); + } + + ngOnDestroy() { + if (this.closeOnClickOutside) + this.listenClickFunc(); + if (this.closeOnMouseOutside) + this.listenMouseFunc(); + } + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + show(): void { + if (!this.popover || !this.popover.getElement()) + return; + + const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement); + this.displayType = "block"; + this.top = p.top; + this.left = p.left; + this.isIn = true; + } + + hide(): void { + this.top = -10000; + this.left = -10000; + this.isIn = true; + this.popover.hide(); + } + + hideFromPopover() { + this.top = -10000; + this.left = -10000; + this.isIn = true; + } + + // ------------------------------------------------------------------------- + // Protected Methods + // ------------------------------------------------------------------------- + + protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { + let positionStrParts = positionStr.split("-"); + let pos0 = positionStrParts[0]; + let pos1 = positionStrParts[1] || "center"; + let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); + let targetElWidth = targetEl.offsetWidth; + let targetElHeight = targetEl.offsetHeight; + + this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl); + + let shiftWidth: any = { + center: function (): number { + return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; + }, + left: function (): number { + return hostElPos.left; + }, + right: function (): number { + return hostElPos.left + hostElPos.width - targetElWidth; + } + }; + + let shiftHeight: any = { + center: function (): number { + return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; + }, + top: function (): number { + return hostElPos.top; + }, + bottom: function (): number { + return hostElPos.top + hostElPos.height - targetElHeight; + } + }; + + let targetElPos: { top: number, left: number }; + switch (pos0) { + case "right": + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left + hostElPos.width + }; + break; + + case "left": + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left - targetElWidth + }; + break; + + case "bottom": + targetElPos = { + top: hostElPos.top + hostElPos.height, + left: shiftWidth[pos1]() + }; + break; + + default: + targetElPos = { + top: hostElPos.top - targetElHeight, + left: shiftWidth[pos1]() + }; + break; + } + + return targetElPos; + } + + protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { + let offsetParentBCR = { top: 0, left: 0 }; + const elBCR = this.offset(nativeEl); + const offsetParentEl = this.parentOffsetEl(nativeEl); + if (offsetParentEl !== window.document) { + offsetParentBCR = this.offset(offsetParentEl); + offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; + offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; + } + + const boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: elBCR.top - offsetParentBCR.top, + left: elBCR.left - offsetParentBCR.left + }; + } + + protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } { + const boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), + left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) + }; + } + + protected getStyle(nativeEl: HTMLElement, cssProp: string): string { + if ((nativeEl as any).currentStyle) // IE + return (nativeEl as any).currentStyle[cssProp]; + + if (window.getComputedStyle) + return (window.getComputedStyle as any)(nativeEl)[cssProp]; + + // finally try and get inline style + return (nativeEl.style as any)[cssProp]; + } + + protected isStaticPositioned(nativeEl: HTMLElement): boolean { + return (this.getStyle(nativeEl, "position") || "static" ) === "static"; + } + + protected parentOffsetEl(nativeEl: HTMLElement): any { + let offsetParent: any = nativeEl.offsetParent || window.document; + while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + return offsetParent || window.document; + } + + protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string { + const placementParts = placement.split(" "); + if (placementParts[0] !== "auto") { + return placement; + } + + const hostElBoundingRect = hostElement.getBoundingClientRect(); + + const desiredPlacement = placementParts[1] || "bottom"; + + if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) { + return "bottom"; + } + if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) { + return "top"; + } + if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) { + return "right"; + } + if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) { + return "left"; + } + + return desiredPlacement; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts new file mode 100644 index 0000000000..e976bc7bf2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts @@ -0,0 +1,179 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; +import {PopoverContentComponent} from "./popover-content.component"; + +@Directive({ + selector: "[popover]", + exportAs: "popover" +}) +export class PopoverComponent implements OnChanges { + + protected PopoverComponent = PopoverContentComponent; + protected popover: ComponentRef; + protected visible: boolean; + + + constructor(protected viewContainerRef: ViewContainerRef, + protected resolver: ComponentFactoryResolver) { + } + + @Input("popover") + content: string|PopoverContentComponent; + + @Input() + popoverDisabled: boolean; + + @Input() + popoverAnimation: boolean; + + @Input() + popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right"; + + @Input() + popoverTitle: string; + + @Input() + popoverOnHover: boolean = false; + + @Input() + popoverCloseOnClickOutside: boolean; + + @Input() + popoverCloseOnMouseOutside: boolean; + + @Input() + popoverDismissTimeout: number = 0; + + @Output() + onShown = new EventEmitter(); + + @Output() + onHidden = new EventEmitter(); + + @HostListener("click") + showOrHideOnClick(): void { + if (this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.toggle(); + } + + @HostListener("focusin") + @HostListener("mouseenter") + showOnHover(): void { + if (!this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.show(); + } + + @HostListener("focusout") + @HostListener("mouseleave") + hideOnHover(): void { + if (this.popoverCloseOnMouseOutside) return; + if (!this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.hide(); + } + + ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { + if (changes["popoverDisabled"]) { + if (changes["popoverDisabled"].currentValue) { + this.hide(); + } + } + } + + toggle() { + if (!this.visible) { + this.show(); + } else { + this.hide(); + } + } + + show() { + if (this.visible) return; + + this.visible = true; + if (typeof this.content === "string") { + const factory = this.resolver.resolveComponentFactory(this.PopoverComponent); + if (!this.visible) + return; + + this.popover = this.viewContainerRef.createComponent(factory); + const popover = this.popover.instance as PopoverContentComponent; + popover.popover = this; + popover.content = this.content as string; + if (this.popoverPlacement !== undefined) + popover.placement = this.popoverPlacement; + if (this.popoverAnimation !== undefined) + popover.animation = this.popoverAnimation; + if (this.popoverTitle !== undefined) + popover.title = this.popoverTitle; + if (this.popoverCloseOnClickOutside !== undefined) + popover.closeOnClickOutside = this.popoverCloseOnClickOutside; + if (this.popoverCloseOnMouseOutside !== undefined) + popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; + + popover.onCloseFromOutside.subscribe(() => this.hide()); + if (this.popoverDismissTimeout > 0) + setTimeout(() => this.hide(), this.popoverDismissTimeout); + } else { + const popover = this.content as PopoverContentComponent; + popover.popover = this; + if (this.popoverPlacement !== undefined) + popover.placement = this.popoverPlacement; + if (this.popoverAnimation !== undefined) + popover.animation = this.popoverAnimation; + if (this.popoverTitle !== undefined) + popover.title = this.popoverTitle; + if (this.popoverCloseOnClickOutside !== undefined) + popover.closeOnClickOutside = this.popoverCloseOnClickOutside; + if (this.popoverCloseOnMouseOutside !== undefined) + popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; + + popover.onCloseFromOutside.subscribe(() => this.hide()); + if (this.popoverDismissTimeout > 0) + setTimeout(() => this.hide(), this.popoverDismissTimeout); + popover.show(); + } + + this.onShown.emit(this); + } + + hide() { + if (!this.visible) return; + + this.visible = false; + if (this.popover) + this.popover.destroy(); + + if (this.content instanceof PopoverContentComponent) + (this.content as PopoverContentComponent).hideFromPopover(); + + this.onHidden.emit(this); + } + + getElement() { + return this.viewContainerRef.element.nativeElement; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts new file mode 100644 index 0000000000..d8cacc1696 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts @@ -0,0 +1,45 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/17/2017. + */ +import {NgModule} from "@angular/core"; +import { CommonModule } from '@angular/common'; +import {PopoverComponent} from "./popover.component"; +import {PopoverContentComponent} from "./popover-content.component"; + +@NgModule({ + declarations: [ + PopoverComponent, + PopoverContentComponent + ], + imports: [ + CommonModule + ], + exports: [ + PopoverComponent, + PopoverContentComponent + ], + providers: [] +}) +export class PopoverModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html new file mode 100644 index 0000000000..36629594b0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html @@ -0,0 +1,5 @@ +
+ + x + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less new file mode 100644 index 0000000000..751fceec35 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less @@ -0,0 +1,57 @@ +.search-bar-container { + display:flex; + border-radius: 4px; + box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); + + .search-bar-input { + border: 1px solid #cdcdcd; + border-radius: 4px; + border-right:none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + outline:none; + padding:2px 50px 2px 10px; + color: #5a5a5a; + font-size: 1em; + font-style: italic; + } + + .clear-search-x { + position:absolute; + right:40px; + top:5px; + padding: 0 5px; + + &:hover { + border-radius:2px; + background-color: #ebebeb; + cursor:pointer; + } + } + + .search-bar-button { + background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; + background-color: rgba(234, 234, 234, 0.88); + width: 30px; + height: 30px; + padding: 0; + cursor:pointer; + border:solid 1px #cdcdcd; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + + &:hover { + background-position:-126px -1275px; + } + + &:active { + background-color: rgba(31, 171, 223, 0.88); + background-position:-45px -1275px; + border-left:none; + } + &:focus { + outline:none; + } + + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts new file mode 100644 index 0000000000..08bdf2030f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'search-bar', + templateUrl: './search-bar.component.html', + styleUrls: ['./search-bar.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchBarComponent { + + @Input() placeholder: string; + @Input() class: string; + @Input() searchQuery: string; + @Output() searchChanged: EventEmitter = new EventEmitter(); + @Output() searchButtonClicked: EventEmitter = new EventEmitter(); + + searchButtonClick = (): void => { + if (this.searchQuery) { //do not allow empty search + this.searchButtonClicked.emit(this.searchQuery); + } + } + + searchQueryChange = ($event): void => { + this.searchChanged.emit($event); + } + + private clearSearchQuery = (): void => { + this.searchQuery = ""; + this.searchButtonClicked.emit(this.searchQuery); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html new file mode 100644 index 0000000000..c9769ba5ae --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html @@ -0,0 +1,6 @@ +
+ +
+
{{item}}
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less new file mode 100644 index 0000000000..f1830846d3 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less @@ -0,0 +1,34 @@ +.search-with-autocomplete-container{ + &.autocomplete-visible { + + .search-bar-input { + border-bottom-left-radius: 0; + } + .search-bar-button { + border-bottom-right-radius: 0; + } + .autocomplete-results { + border: solid 1px #d2d2d2; + border-top:none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + background-color: #fff; + padding: 10px 20px; + width:100%; + position:absolute; + max-height: 200px; + overflow-y: scroll; + } + + .autocomplete-result-item { + color:#5a5a5a; + padding: 5px 0; + cursor:pointer; + + &:hover { + color: #999; + } + } + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts new file mode 100644 index 0000000000..ced056d1fc --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { SearchBarComponent } from '../search-bar/search-bar.component'; + +@Component({ + selector: 'search-with-autocomplete', + templateUrl: './search-with-autocomplete.component.html', + styleUrls: ['./search-with-autocomplete.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchWithAutoCompleteComponent { + + @Input() searchPlaceholder: string; + @Input() searchBarClass: string; + @Input() searchQuery: string; + @Input() autoCompleteValues: Array; + @Output() searchChanged: EventEmitter = new EventEmitter(); + @Output() searchButtonClicked: EventEmitter = new EventEmitter(); + + searchChange = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchChanged.emit(searchTerm); + } + + updateSearch = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchButtonClicked.emit(searchTerm); + this.autoCompleteValues = []; + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts new file mode 100644 index 0000000000..bad7b80a51 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input } from '@angular/core'; +import { ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'tab', + template: ` +
+ +
+ `, + encapsulation: ViewEncapsulation.None +}) +export class Tab { + @Input('tabTitle') title: string; + @Input() active:boolean = false; + @Input() indication?: number; + +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html new file mode 100644 index 0000000000..57cf5d46c9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html @@ -0,0 +1,9 @@ +
+
+ {{tab.title}} +
{{tab.indication}}
+
+
+
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less new file mode 100644 index 0000000000..f7b18b1cc8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less @@ -0,0 +1,85 @@ +@import '../../../../../assets/styles/variables'; + +tab { + height: 100%; +} + +.tabs { + display:flex; + flex: 0 0 auto; + flex-direction:row; +} + +.tab { + flex: 1 0 auto; + cursor: pointer; + padding: .5em; +} + +.tab-content-container { + flex: 1; + width:100%; + overflow-y:hidden; + overflow-x:hidden; +} + +.tab-content { + height:100%; +} + +/*Tab styles*/ +.tabs{ + &.round-tabs .tab{ + background-color: #f8f8f8; + color: #959595; + border: solid 1px #d2d2d2; + border-bottom:none; + border-left:none; + position:relative; + + &:first-child { + border-left:solid 1px #d2d2d2; + } + + &.active { + background-color:#009fdb; + color:#e9e9e9; + border-color:#009fdb; + } + + .tab-indication { + position: absolute; + top: -10px; + background-color: #009fdb; + right: 10px; + padding: 2px 0; + border-radius: 15px; + border: solid 1px #d2d2d2; + color:white; + width: 25px; + height: 25px; + text-align: center; + + } + } + + &.simple-tabs .tab { + font-size: 12px; + color: @main_color_n; + + &:after { + display:block; + content: ''; + border-bottom: 2px solid @main_color_a; + transform: scaleX(0); + transition: transform 200ms ease-in-out; + } + + &.active { + color: @main_color_a; + &:after { + transform: scaleX(1.2); + } + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts new file mode 100644 index 0000000000..21d2bbad43 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts @@ -0,0 +1,78 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core'; +import { Tab } from './tab/tab.component'; +import { ViewEncapsulation } from '@angular/core'; +import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; + +@Component({ + selector: 'tabs', + templateUrl: './tabs.component.html', + styleUrls: ['./tabs.component.less'], + encapsulation: ViewEncapsulation.None, + animations: [ + trigger('indicatorAnimation', [ + transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), + transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ]) + ]) + ] +}) +export class Tabs implements AfterContentInit { + + @Input() tabStyle: string; + @Input() hideIndicationOnTabChange?: boolean = false; + @ContentChildren(Tab) tabs: QueryList; + @Output() tabChanged: EventEmitter = new EventEmitter(); + + + ngAfterContentInit() { + //after contentChildren are set, determine active tab. If no active tab set, activate the first one + let activeTabs = this.tabs.filter((tab) => tab.active); + + if (activeTabs.length === 0) { + this.selectTab(this.tabs.first); + } + } + + selectTab(tab: Tab) { + //activate the tab the user clicked. + this.tabs.toArray().forEach(tab => { + tab.active = false; + if (this.hideIndicationOnTabChange && tab.indication) { + tab.indication = null; + } + }); + tab.active = true; + this.tabChanged.emit(tab); + } + + triggerTabChange(tabTitle) { + this.tabs.toArray().forEach(tab => { + tab.active = (tab.title == tabTitle) ? true : false; + }); + } + + setTabIndication(tabTitle:string, indication?:number) { + let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle); + selectedTab.indication = indication || null; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts new file mode 100644 index 0000000000..1300c41a90 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' + +import { Tabs } from './tabs.component'; +import { Tab } from './tab/tab.component'; + + +@NgModule({ + imports: [BrowserModule], + declarations: [Tabs, Tab], + bootstrap: [], + exports: [Tabs, Tab] +}) +export class TabModule { } + +/** README: **/ + +/** USAGE Example: + *In page.module.ts: import TabModule + *In HTML: + * + * Content of tab 1 + * Content of tab 2 + * ... + * + */ + +/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) + * Existing options: + * tabStyle="round-tabs" will provide generic rounded tab look + * + * To create or override styles: + * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active". + * Use /deep/ or >>> prefix to override styles via other components stylesheets + */ diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html new file mode 100644 index 0000000000..1fbf45e39f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html @@ -0,0 +1,12 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less new file mode 100644 index 0000000000..1ff496f840 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less @@ -0,0 +1,11 @@ +.tooltip-inner { + word-wrap: break-word; + max-width: 300px; +} + +.tooltip.bottom .tooltip-arrow { + border-bottom-color: #000 !important; +} + + + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts new file mode 100644 index 0000000000..4dcb64c499 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts @@ -0,0 +1,215 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core"; + +@Component +({ + selector: "tooltip-content", + templateUrl: "./tooltip-content.component.html", + styleUrls: ["./tooltip-content.component.less"] +}) + +export class TooltipContentComponent implements AfterViewInit { + + // ------------------------------------------------------------------------- + // Inputs / Outputs + // ------------------------------------------------------------------------- + + @Input() hostElement: HTMLElement; + @Input() content: string; + @Input() placement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() animation: boolean = true; + + // ------------------------------------------------------------------------- + // Properties + // ------------------------------------------------------------------------- + + top: number = -100000; + left: number = -100000; + isIn: boolean = false; + isFade: boolean = false; + + // ------------------------------------------------------------------------- + // Constructor + // ------------------------------------------------------------------------- + + constructor(private element: ElementRef, + private cdr: ChangeDetectorRef) { + } + + // ------------------------------------------------------------------------- + // Lifecycle callbacks + // ------------------------------------------------------------------------- + + ngAfterViewInit(): void { + this.show(); + this.cdr.detectChanges(); + } + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + show(): void { + if(!this.hostElement) { + return; + } + + const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement); + this.top = position.top; + this.left = position.left; + this.isIn = true; + if (this.animation) { + this.isFade = true; + } + } + + hide(): void { + this.top = -100000; + this.left = -100000; + this.isIn = true; + if(this.animation) { + this.isFade = false; + } + } + + // ------------------------------------------------------------------------- + // Private Methods + // ------------------------------------------------------------------------- + + private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} { + let positionStrParts = positionStr.split("-"); + let pos0 = positionStrParts[0]; + let pos1 = positionStrParts[1] || "center"; + let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem); + let targetElemWidth = targetElem.offsetWidth; + let targetElemHeight = targetElem.offsetHeight; + let shiftWidth: any = { + center(): number { + return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2; + }, + left(): number { + return hostElemPosition.left; + }, + right(): number { + return hostElemPosition.left + hostElemPosition.width; + } + }; + + let shiftHeight: any = { + center: function (): number { + return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2; + }, + top: function (): number { + return hostElemPosition.top; + }, + bottom: function (): number { + return hostElemPosition.top + hostElemPosition.height; + } + } + + let targetElemPosition: {top: number, left: number}; + + switch (pos0) { + case "right": + targetElemPosition = { + top: shiftHeight[pos1](), + left: shiftWidth[pos0]() + }; + break; + + case "left": + targetElemPosition = { + top: shiftHeight[pos1](), + left: hostElemPosition.left - targetElemWidth + }; + break; + + case "bottom": + targetElemPosition = { + top: shiftHeight[pos0](), + left: shiftWidth[pos1]() + }; + break; + + default: + targetElemPosition = { + top: hostElemPosition.top - targetElemHeight, + left: shiftWidth[pos1]() + }; + break; + } + + return targetElemPosition; + } + + + private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} { + let offsetParentCBR = {top: 0, left: 0}; + const elemBCR = this.offset(nativeElem); + const offsetParentElem = this.parentOffsetElem(nativeElem); + if(offsetParentElem !== window.document) { + offsetParentCBR = this.offset(offsetParentElem); + offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop; + offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop; + } + + const boundingClientRect = nativeElem.getBoundingClientRect(); + + return { + width: boundingClientRect.width || nativeElem.offsetWidth, + height: boundingClientRect.height || nativeElem.offsetHeight, + top: elemBCR.top - offsetParentCBR.top, + left: elemBCR.left - offsetParentCBR.left + }; + } + + private offset(nativeElem:any): {width: number, height: number, top: number, left: number} { + const boundingClientRect = nativeElem.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeElem.offsetWidth, + height: boundingClientRect.height || nativeElem.offsetHeight, + top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), + left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) + }; + } + + private getStyle(nativeElem: HTMLElement, cssProperty: string): string { + if(window.getComputedStyle) { + return (window.getComputedStyle(nativeElem) as any)[cssProperty]; + } + + return (nativeElem.style as any)[cssProperty]; + } + + private isStaticPositioned(nativeElem: HTMLElement): boolean { + return (this.getStyle(nativeElem, "position") || "static") === "static"; + } + + private parentOffsetElem(nativeElem: HTMLElement): any { + let offsetParent: any = nativeElem.offsetParent || window.document; + while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + + return offsetParent || window.document; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts new file mode 100644 index 0000000000..79d35c6e0e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts @@ -0,0 +1,109 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { + Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener +} from "@angular/core"; +import {TooltipContentComponent} from "./tooltip-content.component"; + +@Directive ({ + selector: "[tooltip]" +}) +export class TooltipComponent { + + // ------------------------------------------------------------------------- + // Properties + // ------------------------------------------------------------------------- + + private tooltip: ComponentRef; + private visible: boolean; + private delayInProgress: boolean = false; + + // ------------------------------------------------------------------------- + // Constructor + // ------------------------------------------------------------------------- + + constructor(private viewContainerRef: ViewContainerRef, + private resolver: ComponentFactoryResolver) { + } + + // ------------------------------------------------------------------------- + // Inputs / Outputs + // ------------------------------------------------------------------------- + + @Input("tooltip") content: string|TooltipContentComponent; + @Input() tooltipDisabled: boolean; + @Input() tooltipAnimation: boolean = true; + @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() tooltipDelay: number = 1500; + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + @HostListener("mouseenter") + show(): void { + if(this.tooltipDisabled || this.visible || this.content === "") { + return; + } + if (this.tooltipDelay && !this.delayInProgress) { + this.delayInProgress = true; + setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); + return; + } + + this.visible = true; + if (typeof this.content === "string") { + const factory = this.resolver.resolveComponentFactory(TooltipContentComponent); + if (!this.visible) { + return; + } + + this.tooltip = this.viewContainerRef.createComponent(factory); + this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement; + this.tooltip.instance.content = this.content as string; + this.tooltip.instance.placement = this.tooltipPlacement; + this.tooltip.instance.animation = this.tooltipAnimation; + } else { + const tooltip = this.content as TooltipContentComponent; + tooltip.hostElement = this.viewContainerRef.element.nativeElement; + tooltip.placement = this.tooltipPlacement; + tooltip.animation = this.tooltipAnimation; + tooltip.show(); + } + } + + @HostListener("mouseleave") + hide(): void { + this.delayInProgress = false; + if (!this.visible) { + return; + } + + this.visible = false; + if (this.tooltip) { + this.tooltip.destroy(); + } + if (this.content instanceof TooltipContentComponent) { + (this.content as TooltipContentComponent).hide(); + } + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts new file mode 100644 index 0000000000..24478cd716 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts @@ -0,0 +1,44 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {NgModule} from "@angular/core"; +import {TooltipContentComponent} from "./tooltip-content.component"; +import {TooltipComponent} from "./tooltip.component"; +import {CommonModule} from "@angular/common"; + +@NgModule({ + declarations: [ + TooltipComponent, + TooltipContentComponent, + ], + imports: [ + ], + exports: [ + TooltipComponent, + TooltipContentComponent, + ], + entryComponents: [ + TooltipContentComponent + ], + providers: [] +}) +export class TooltipModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts new file mode 100644 index 0000000000..526096524c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts @@ -0,0 +1,80 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { NavbarModule } from "./navbar/navbar.module"; +import {DynamicElementModule} from "./dynamic-element/dynamic-element.module"; +import {FormElementsModule} from "./form-components/form-elements.module"; +import {LoaderComponent} from "./loader/loader.component"; +import {ModalModule} from "./modal/modal.module"; +import {PopoverModule} from "./popover/popover.module"; +import {SearchBarComponent} from "./search-bar/search-bar.component"; +import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component"; +import {TabModule} from "./tabs/tabs.module"; +import {TooltipModule} from "./tooltip/tooltip.module"; +import {CommonModule} from "@angular/common"; +import {FormsModule} from "@angular/forms"; +import {BrowserModule} from "@angular/platform-browser"; +import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module"; +import {MenuListModule} from "./menu/menu-list.module"; +import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module"; + +@NgModule({ + declarations: [ + LoaderComponent, + SearchBarComponent, + SearchWithAutoCompleteComponent + ], + + imports: [ + BrowserModule, + FormsModule, + CommonModule, + DynamicElementModule, + NavbarModule, + FormElementsModule, + ModalModule, + PopoverModule, + TabModule, + TooltipModule, + MultiStepsWizardModule, + MenuListModule, + MenuListNg2Module + ], + exports: [ + LoaderComponent, + MultiStepsWizardModule, + SearchBarComponent, + SearchWithAutoCompleteComponent, + DynamicElementModule, + NavbarModule, + FormElementsModule, + ModalModule, + PopoverModule, + TabModule, + TooltipModule, + MenuListModule, + MenuListNg2Module + ], + + entryComponents: [SearchWithAutoCompleteComponent] +}) + +export class UiElementsModule {} -- cgit 1.2.3-korg