From 3780c89f539afa7c5d91b6c5abf7174ed1bae09b Mon Sep 17 00:00:00 2001 From: bmarkov Date: Fri, 26 Mar 2021 23:16:56 +0200 Subject: [PATCH] updates --- colorpicker/color-editing/angular.json | 126 ++++++ colorpicker/color-editing/package.json | 52 +++ .../color-editing/src/app/app.component.css | 0 .../color-editing/src/app/app.component.html | 1 + .../color-editing/src/app/app.component.ts | 30 ++ .../color-editing/src/app/app.module.ts | 15 + colorpicker/color-editing/src/app/main.ts | 6 + .../color-editing/src/assets/fonts.css | 13 + .../color-editing/src/assets/styles.css | 12 + colorpicker/color-editing/src/index.html | 37 ++ colorpicker/color-editing/src/main.ts | 16 + colorpicker/color-editing/src/polyfills.ts | 73 ++++ .../color-editing/src/tsconfig.app.json | 15 + colorpicker/color-editing/src/tsconfig.json | 23 ++ colorpicker/display-mode-default/angular.json | 129 ++++++ colorpicker/display-mode-default/package.json | 55 +++ .../src/app/app.component.css | 27 ++ .../src/app/app.component.html | 29 ++ .../src/app/app.component.ts | 80 ++++ .../src/app/app.module.ts | 17 + .../display-mode-default/src/app/main.ts | 6 + .../display-mode-default/src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../display-mode-default/src/index.html | 37 ++ colorpicker/display-mode-default/src/main.ts | 16 + .../display-mode-default/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../display-mode-default/src/tsconfig.json | 23 ++ colorpicker/display-mode-grid/angular.json | 129 ++++++ colorpicker/display-mode-grid/package.json | 55 +++ .../src/app/app.component.css | 18 + .../src/app/app.component.html | 35 ++ .../src/app/app.component.ts | 104 +++++ .../display-mode-grid/src/app/app.module.ts | 17 + colorpicker/display-mode-grid/src/app/main.ts | 6 + .../display-mode-grid/src/assets/fonts.css | 13 + .../display-mode-grid/src/assets/styles.css | 12 + colorpicker/display-mode-grid/src/index.html | 37 ++ colorpicker/display-mode-grid/src/main.ts | 16 + .../display-mode-grid/src/polyfills.ts | 73 ++++ .../display-mode-grid/src/tsconfig.app.json | 15 + .../display-mode-grid/src/tsconfig.json | 23 ++ .../display-mode-hexagonal/angular.json | 129 ++++++ .../display-mode-hexagonal/package.json | 55 +++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 36 ++ .../src/app/app.component.ts | 59 +++ .../src/app/app.module.ts | 17 + .../display-mode-hexagonal/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../display-mode-hexagonal/src/index.html | 37 ++ .../display-mode-hexagonal/src/main.ts | 16 + .../display-mode-hexagonal/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../display-mode-hexagonal/src/tsconfig.json | 23 ++ .../display-mode-material-grid/angular.json | 128 ++++++ .../display-mode-material-grid/package.json | 54 +++ .../src/app/app.component.css | 27 ++ .../src/app/app.component.html | 31 ++ .../src/app/app.component.ts | 76 ++++ .../src/app/app.module.ts | 16 + .../src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../display-mode-material-grid/src/index.html | 37 ++ .../display-mode-material-grid/src/main.ts | 16 + .../src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../src/tsconfig.json | 23 ++ colorpicker/display-mode-palette/angular.json | 129 ++++++ colorpicker/display-mode-palette/package.json | 55 +++ .../src/app/app.component.css | 26 ++ .../src/app/app.component.html | 20 + .../src/app/app.component.ts | 50 +++ .../src/app/app.module.ts | 17 + .../display-mode-palette/src/app/main.ts | 6 + .../display-mode-palette/src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../display-mode-palette/src/index.html | 37 ++ colorpicker/display-mode-palette/src/main.ts | 16 + .../display-mode-palette/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../display-mode-palette/src/tsconfig.json | 23 ++ colorpicker/display-mode-radial/angular.json | 129 ++++++ colorpicker/display-mode-radial/package.json | 55 +++ .../src/app/app.component.css | 4 + .../src/app/app.component.html | 28 ++ .../src/app/app.component.ts | 54 +++ .../display-mode-radial/src/app/app.module.ts | 17 + .../display-mode-radial/src/app/main.ts | 6 + .../display-mode-radial/src/assets/fonts.css | 13 + .../display-mode-radial/src/assets/styles.css | 12 + .../display-mode-radial/src/index.html | 37 ++ colorpicker/display-mode-radial/src/main.ts | 16 + .../display-mode-radial/src/polyfills.ts | 73 ++++ .../display-mode-radial/src/tsconfig.app.json | 15 + .../display-mode-radial/src/tsconfig.json | 23 ++ .../display-mode-spectrum-grid/angular.json | 129 ++++++ .../display-mode-spectrum-grid/package.json | 55 +++ .../src/app/app.component.css | 46 +++ .../src/app/app.component.html | 58 +++ .../src/app/app.component.ts | 91 ++++ .../src/app/app.module.ts | 17 + .../src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../display-mode-spectrum-grid/src/index.html | 37 ++ .../display-mode-spectrum-grid/src/main.ts | 16 + .../src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../src/tsconfig.json | 23 ++ colorpicker/editing/angular.json | 126 ++++++ colorpicker/editing/package.json | 52 +++ colorpicker/editing/src/app/app.component.css | 43 ++ .../editing/src/app/app.component.html | 28 ++ colorpicker/editing/src/app/app.component.ts | 65 +++ colorpicker/editing/src/app/app.module.ts | 15 + colorpicker/editing/src/app/main.ts | 6 + colorpicker/editing/src/assets/fonts.css | 13 + colorpicker/editing/src/assets/styles.css | 12 + colorpicker/editing/src/index.html | 37 ++ colorpicker/editing/src/main.ts | 16 + colorpicker/editing/src/polyfills.ts | 73 ++++ colorpicker/editing/src/tsconfig.app.json | 15 + colorpicker/editing/src/tsconfig.json | 23 ++ colorpicker/forms/angular.json | 126 ++++++ colorpicker/forms/package.json | 52 +++ colorpicker/forms/src/app/app.component.css | 30 ++ colorpicker/forms/src/app/app.component.html | 81 ++++ colorpicker/forms/src/app/app.component.ts | 53 +++ colorpicker/forms/src/app/app.module.ts | 16 + colorpicker/forms/src/app/main.ts | 6 + colorpicker/forms/src/assets/fonts.css | 13 + colorpicker/forms/src/assets/styles.css | 12 + colorpicker/forms/src/index.html | 37 ++ colorpicker/forms/src/main.ts | 16 + colorpicker/forms/src/polyfills.ts | 73 ++++ colorpicker/forms/src/tsconfig.app.json | 15 + colorpicker/forms/src/tsconfig.json | 23 ++ colorpicker/overview/angular.json | 126 ++++++ colorpicker/overview/package.json | 52 +++ .../overview/src/app/app.component.css | 0 .../overview/src/app/app.component.html | 4 + colorpicker/overview/src/app/app.component.ts | 29 ++ colorpicker/overview/src/app/app.module.ts | 15 + colorpicker/overview/src/app/main.ts | 6 + colorpicker/overview/src/assets/fonts.css | 13 + colorpicker/overview/src/assets/styles.css | 12 + colorpicker/overview/src/index.html | 37 ++ colorpicker/overview/src/main.ts | 16 + colorpicker/overview/src/polyfills.ts | 73 ++++ colorpicker/overview/src/tsconfig.app.json | 15 + colorpicker/overview/src/tsconfig.json | 23 ++ colorpicker/right-to-left/angular.json | 126 ++++++ colorpicker/right-to-left/package.json | 52 +++ .../right-to-left/src/app/app.component.css | 0 .../right-to-left/src/app/app.component.html | 4 + .../right-to-left/src/app/app.component.ts | 47 +++ .../right-to-left/src/app/app.module.ts | 15 + colorpicker/right-to-left/src/app/main.ts | 6 + .../right-to-left/src/assets/fonts.css | 13 + .../right-to-left/src/assets/styles.css | 12 + colorpicker/right-to-left/src/index.html | 37 ++ colorpicker/right-to-left/src/main.ts | 16 + colorpicker/right-to-left/src/polyfills.ts | 73 ++++ .../right-to-left/src/tsconfig.app.json | 15 + colorpicker/right-to-left/src/tsconfig.json | 23 ++ colorpicker/value-display-mode/angular.json | 128 ++++++ colorpicker/value-display-mode/package.json | 54 +++ .../src/app/app.component.css | 5 + .../src/app/app.component.html | 19 + .../src/app/app.component.ts | 52 +++ .../value-display-mode/src/app/app.module.ts | 16 + .../value-display-mode/src/app/main.ts | 6 + .../value-display-mode/src/assets/fonts.css | 13 + .../value-display-mode/src/assets/styles.css | 12 + colorpicker/value-display-mode/src/index.html | 37 ++ colorpicker/value-display-mode/src/main.ts | 16 + .../value-display-mode/src/polyfills.ts | 73 ++++ .../value-display-mode/src/tsconfig.app.json | 15 + .../value-display-mode/src/tsconfig.json | 23 ++ colorpicker/value-format/angular.json | 129 ++++++ colorpicker/value-format/package.json | 55 +++ .../value-format/src/app/app.component.css | 1 + .../value-format/src/app/app.component.html | 18 + .../value-format/src/app/app.component.ts | 46 +++ .../value-format/src/app/app.module.ts | 17 + colorpicker/value-format/src/app/main.ts | 6 + colorpicker/value-format/src/assets/fonts.css | 13 + .../value-format/src/assets/styles.css | 12 + colorpicker/value-format/src/index.html | 37 ++ colorpicker/value-format/src/main.ts | 16 + colorpicker/value-format/src/polyfills.ts | 73 ++++ .../value-format/src/tsconfig.app.json | 15 + colorpicker/value-format/src/tsconfig.json | 23 ++ combobox/auto-complete/angular.json | 128 ++++++ combobox/auto-complete/package.json | 54 +++ .../auto-complete/src/app/app.component.css | 3 + .../auto-complete/src/app/app.component.html | 10 + .../auto-complete/src/app/app.component.ts | 81 ++++ combobox/auto-complete/src/app/app.module.ts | 16 + combobox/auto-complete/src/app/main.ts | 6 + combobox/auto-complete/src/assets/fonts.css | 13 + combobox/auto-complete/src/assets/styles.css | 12 + combobox/auto-complete/src/index.html | 37 ++ combobox/auto-complete/src/main.ts | 16 + combobox/auto-complete/src/polyfills.ts | 73 ++++ combobox/auto-complete/src/tsconfig.app.json | 15 + combobox/auto-complete/src/tsconfig.json | 23 ++ combobox/automatic-positioning/angular.json | 126 ++++++ combobox/automatic-positioning/package.json | 52 +++ .../src/app/app.component.css | 11 + .../src/app/app.component.html | 2 + .../src/app/app.component.ts | 66 +++ .../src/app/app.module.ts | 15 + .../automatic-positioning/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + combobox/automatic-positioning/src/index.html | 37 ++ combobox/automatic-positioning/src/main.ts | 16 + .../automatic-positioning/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../automatic-positioning/src/tsconfig.json | 23 ++ combobox/basic/angular.json | 126 ++++++ combobox/basic/package.json | 52 +++ combobox/basic/src/app/app.component.css | 3 + combobox/basic/src/app/app.component.html | 22 + combobox/basic/src/app/app.component.ts | 29 ++ combobox/basic/src/app/app.module.ts | 15 + combobox/basic/src/app/main.ts | 6 + combobox/basic/src/assets/fonts.css | 13 + combobox/basic/src/assets/styles.css | 12 + combobox/basic/src/index.html | 37 ++ combobox/basic/src/main.ts | 16 + combobox/basic/src/polyfills.ts | 73 ++++ combobox/basic/src/tsconfig.app.json | 15 + combobox/basic/src/tsconfig.json | 23 ++ combobox/button-position/angular.json | 128 ++++++ combobox/button-position/package.json | 54 +++ .../button-position/src/app/app.component.css | 3 + .../src/app/app.component.html | 31 ++ .../button-position/src/app/app.component.ts | 41 ++ .../button-position/src/app/app.module.ts | 16 + combobox/button-position/src/app/main.ts | 6 + combobox/button-position/src/assets/fonts.css | 13 + .../button-position/src/assets/styles.css | 12 + combobox/button-position/src/index.html | 37 ++ combobox/button-position/src/main.ts | 16 + combobox/button-position/src/polyfills.ts | 73 ++++ .../button-position/src/tsconfig.app.json | 15 + combobox/button-position/src/tsconfig.json | 23 ++ combobox/checkboxes/angular.json | 126 ++++++ combobox/checkboxes/package.json | 52 +++ combobox/checkboxes/src/app/app.component.css | 3 + .../checkboxes/src/app/app.component.html | 22 + combobox/checkboxes/src/app/app.component.ts | 29 ++ combobox/checkboxes/src/app/app.module.ts | 15 + combobox/checkboxes/src/app/main.ts | 6 + combobox/checkboxes/src/assets/fonts.css | 13 + combobox/checkboxes/src/assets/styles.css | 12 + combobox/checkboxes/src/index.html | 37 ++ combobox/checkboxes/src/main.ts | 16 + combobox/checkboxes/src/polyfills.ts | 73 ++++ combobox/checkboxes/src/tsconfig.app.json | 15 + combobox/checkboxes/src/tsconfig.json | 23 ++ combobox/filterable/angular.json | 126 ++++++ combobox/filterable/package.json | 52 +++ combobox/filterable/src/app/app.component.css | 3 + .../filterable/src/app/app.component.html | 22 + combobox/filterable/src/app/app.component.ts | 29 ++ combobox/filterable/src/app/app.module.ts | 15 + combobox/filterable/src/app/main.ts | 6 + combobox/filterable/src/assets/fonts.css | 13 + combobox/filterable/src/assets/styles.css | 12 + combobox/filterable/src/index.html | 37 ++ combobox/filterable/src/main.ts | 16 + combobox/filterable/src/polyfills.ts | 73 ++++ combobox/filterable/src/tsconfig.app.json | 15 + combobox/filterable/src/tsconfig.json | 23 ++ combobox/forms/angular.json | 128 ++++++ combobox/forms/package.json | 54 +++ combobox/forms/src/app/app.component.css | 30 ++ combobox/forms/src/app/app.component.html | 55 +++ combobox/forms/src/app/app.component.ts | 39 ++ combobox/forms/src/app/app.module.ts | 18 + combobox/forms/src/app/main.ts | 6 + combobox/forms/src/assets/fonts.css | 13 + combobox/forms/src/assets/styles.css | 12 + combobox/forms/src/index.html | 37 ++ combobox/forms/src/main.ts | 16 + combobox/forms/src/polyfills.ts | 73 ++++ combobox/forms/src/tsconfig.app.json | 15 + combobox/forms/src/tsconfig.json | 23 ++ combobox/item-template/angular.json | 126 ++++++ combobox/item-template/package.json | 52 +++ .../item-template/src/app/app.component.css | 28 ++ .../item-template/src/app/app.component.html | 20 + .../item-template/src/app/app.component.ts | 30 ++ combobox/item-template/src/app/app.module.ts | 15 + combobox/item-template/src/app/main.ts | 6 + combobox/item-template/src/assets/fonts.css | 13 + combobox/item-template/src/assets/styles.css | 12 + combobox/item-template/src/index.html | 39 ++ combobox/item-template/src/main.ts | 16 + combobox/item-template/src/polyfills.ts | 73 ++++ combobox/item-template/src/tsconfig.app.json | 15 + combobox/item-template/src/tsconfig.json | 23 ++ combobox/methods/angular.json | 127 ++++++ combobox/methods/package.json | 53 +++ combobox/methods/src/app/app.component.css | 0 combobox/methods/src/app/app.component.html | 33 ++ combobox/methods/src/app/app.component.ts | 137 +++++++ combobox/methods/src/app/app.module.ts | 16 + combobox/methods/src/app/main.ts | 6 + combobox/methods/src/assets/fonts.css | 13 + combobox/methods/src/assets/styles.css | 12 + combobox/methods/src/index.html | 37 ++ combobox/methods/src/main.ts | 16 + combobox/methods/src/polyfills.ts | 73 ++++ combobox/methods/src/tsconfig.app.json | 15 + combobox/methods/src/tsconfig.json | 23 ++ combobox/multiple-selection-mode/angular.json | 126 ++++++ combobox/multiple-selection-mode/package.json | 52 +++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 2 + .../src/app/app.component.ts | 82 ++++ .../src/app/app.module.ts | 15 + .../multiple-selection-mode/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../multiple-selection-mode/src/index.html | 37 ++ combobox/multiple-selection-mode/src/main.ts | 16 + .../multiple-selection-mode/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../multiple-selection-mode/src/tsconfig.json | 23 ++ combobox/multiple-selection/angular.json | 126 ++++++ combobox/multiple-selection/package.json | 52 +++ .../src/app/app.component.css | 3 + .../src/app/app.component.html | 2 + .../src/app/app.component.ts | 61 +++ .../multiple-selection/src/app/app.module.ts | 15 + combobox/multiple-selection/src/app/main.ts | 6 + .../multiple-selection/src/assets/fonts.css | 13 + .../multiple-selection/src/assets/styles.css | 12 + combobox/multiple-selection/src/index.html | 37 ++ combobox/multiple-selection/src/main.ts | 16 + combobox/multiple-selection/src/polyfills.ts | 73 ++++ .../multiple-selection/src/tsconfig.app.json | 15 + combobox/multiple-selection/src/tsconfig.json | 23 ++ combobox/open-modes/angular.json | 127 ++++++ combobox/open-modes/package.json | 53 +++ combobox/open-modes/src/app/app.component.css | 3 + .../open-modes/src/app/app.component.html | 28 ++ combobox/open-modes/src/app/app.component.ts | 108 +++++ combobox/open-modes/src/app/app.module.ts | 16 + combobox/open-modes/src/app/main.ts | 6 + combobox/open-modes/src/assets/fonts.css | 13 + combobox/open-modes/src/assets/styles.css | 12 + combobox/open-modes/src/index.html | 37 ++ combobox/open-modes/src/main.ts | 16 + combobox/open-modes/src/polyfills.ts | 73 ++++ combobox/open-modes/src/tsconfig.app.json | 15 + combobox/open-modes/src/tsconfig.json | 23 ++ combobox/overview/angular.json | 127 ++++++ combobox/overview/package.json | 53 +++ combobox/overview/src/app/app.component.css | 7 + combobox/overview/src/app/app.component.html | 387 ++++++++++++++++++ combobox/overview/src/app/app.component.ts | 43 ++ combobox/overview/src/app/app.module.ts | 15 + combobox/overview/src/app/main.ts | 6 + combobox/overview/src/assets/fonts.css | 13 + combobox/overview/src/assets/styles.css | 12 + combobox/overview/src/index.html | 37 ++ combobox/overview/src/main.ts | 16 + combobox/overview/src/polyfills.ts | 73 ++++ combobox/overview/src/tsconfig.app.json | 15 + combobox/overview/src/tsconfig.json | 23 ++ combobox/popup-resizing/angular.json | 128 ++++++ combobox/popup-resizing/package.json | 54 +++ .../popup-resizing/src/app/app.component.css | 26 ++ .../popup-resizing/src/app/app.component.html | 44 ++ .../popup-resizing/src/app/app.component.ts | 61 +++ combobox/popup-resizing/src/app/app.module.ts | 16 + combobox/popup-resizing/src/app/main.ts | 6 + combobox/popup-resizing/src/assets/fonts.css | 13 + combobox/popup-resizing/src/assets/styles.css | 12 + combobox/popup-resizing/src/index.html | 37 ++ combobox/popup-resizing/src/main.ts | 16 + combobox/popup-resizing/src/polyfills.ts | 73 ++++ combobox/popup-resizing/src/tsconfig.app.json | 15 + combobox/popup-resizing/src/tsconfig.json | 23 ++ combobox/position/angular.json | 128 ++++++ combobox/position/package.json | 54 +++ combobox/position/src/app/app.component.css | 11 + combobox/position/src/app/app.component.html | 30 ++ combobox/position/src/app/app.component.ts | 104 +++++ combobox/position/src/app/app.module.ts | 15 + combobox/position/src/app/main.ts | 6 + combobox/position/src/assets/fonts.css | 13 + combobox/position/src/assets/styles.css | 12 + combobox/position/src/index.html | 37 ++ combobox/position/src/main.ts | 16 + combobox/position/src/polyfills.ts | 73 ++++ combobox/position/src/tsconfig.app.json | 15 + combobox/position/src/tsconfig.json | 23 ++ combobox/right-to-left/angular.json | 126 ++++++ combobox/right-to-left/package.json | 52 +++ .../right-to-left/src/app/app.component.css | 3 + .../right-to-left/src/app/app.component.html | 25 ++ .../right-to-left/src/app/app.component.ts | 29 ++ combobox/right-to-left/src/app/app.module.ts | 15 + combobox/right-to-left/src/app/main.ts | 6 + combobox/right-to-left/src/assets/fonts.css | 13 + combobox/right-to-left/src/assets/styles.css | 12 + combobox/right-to-left/src/index.html | 37 ++ combobox/right-to-left/src/main.ts | 16 + combobox/right-to-left/src/polyfills.ts | 73 ++++ combobox/right-to-left/src/tsconfig.app.json | 15 + combobox/right-to-left/src/tsconfig.json | 23 ++ combobox/token-template/angular.json | 126 ++++++ combobox/token-template/package.json | 52 +++ .../token-template/src/app/app.component.css | 20 + .../token-template/src/app/app.component.html | 21 + .../token-template/src/app/app.component.ts | 89 ++++ combobox/token-template/src/app/app.module.ts | 15 + combobox/token-template/src/app/main.ts | 6 + combobox/token-template/src/assets/fonts.css | 13 + combobox/token-template/src/assets/styles.css | 12 + combobox/token-template/src/index.html | 40 ++ combobox/token-template/src/main.ts | 16 + combobox/token-template/src/polyfills.ts | 73 ++++ combobox/token-template/src/tsconfig.app.json | 15 + combobox/token-template/src/tsconfig.json | 23 ++ datetimepicker/basic/angular.json | 127 ++++++ datetimepicker/basic/package.json | 53 +++ .../basic/src/app/app.component.css | 5 + .../basic/src/app/app.component.html | 2 + datetimepicker/basic/src/app/app.component.ts | 29 ++ datetimepicker/basic/src/app/app.module.ts | 15 + datetimepicker/basic/src/app/main.ts | 6 + datetimepicker/basic/src/assets/fonts.css | 13 + datetimepicker/basic/src/assets/styles.css | 12 + datetimepicker/basic/src/index.html | 37 ++ datetimepicker/basic/src/main.ts | 16 + datetimepicker/basic/src/polyfills.ts | 73 ++++ datetimepicker/basic/src/tsconfig.app.json | 15 + datetimepicker/basic/src/tsconfig.json | 23 ++ .../drop-down-display-mode/angular.json | 129 ++++++ .../drop-down-display-mode/package.json | 55 +++ .../src/app/app.component.css | 5 + .../src/app/app.component.html | 13 + .../src/app/app.component.ts | 50 +++ .../src/app/app.module.ts | 16 + .../drop-down-display-mode/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../drop-down-display-mode/src/index.html | 37 ++ .../drop-down-display-mode/src/main.ts | 16 + .../drop-down-display-mode/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../drop-down-display-mode/src/tsconfig.json | 23 ++ .../drop-down-position/angular.json | 129 ++++++ .../drop-down-position/package.json | 55 +++ .../src/app/app.component.css | 27 ++ .../src/app/app.component.html | 23 ++ .../src/app/app.component.ts | 72 ++++ .../drop-down-position/src/app/app.module.ts | 16 + .../drop-down-position/src/app/main.ts | 6 + .../drop-down-position/src/assets/fonts.css | 13 + .../drop-down-position/src/assets/styles.css | 12 + .../drop-down-position/src/index.html | 37 ++ datetimepicker/drop-down-position/src/main.ts | 16 + .../drop-down-position/src/polyfills.ts | 73 ++++ .../drop-down-position/src/tsconfig.app.json | 15 + .../drop-down-position/src/tsconfig.json | 23 ++ datetimepicker/edit-modes/angular.json | 127 ++++++ datetimepicker/edit-modes/package.json | 53 +++ .../edit-modes/src/app/app.component.css | 8 + .../edit-modes/src/app/app.component.html | 17 + .../edit-modes/src/app/app.component.ts | 31 ++ .../edit-modes/src/app/app.module.ts | 15 + datetimepicker/edit-modes/src/app/main.ts | 6 + .../edit-modes/src/assets/fonts.css | 13 + .../edit-modes/src/assets/styles.css | 12 + datetimepicker/edit-modes/src/index.html | 37 ++ datetimepicker/edit-modes/src/main.ts | 16 + datetimepicker/edit-modes/src/polyfills.ts | 73 ++++ .../edit-modes/src/tsconfig.app.json | 15 + datetimepicker/edit-modes/src/tsconfig.json | 23 ++ datetimepicker/formats/angular.json | 128 ++++++ datetimepicker/formats/package.json | 54 +++ .../formats/src/app/app.component.css | 6 + .../formats/src/app/app.component.html | 23 ++ .../formats/src/app/app.component.ts | 34 ++ datetimepicker/formats/src/app/app.module.ts | 15 + datetimepicker/formats/src/app/main.ts | 6 + datetimepicker/formats/src/assets/fonts.css | 13 + datetimepicker/formats/src/assets/styles.css | 12 + datetimepicker/formats/src/index.html | 37 ++ datetimepicker/formats/src/main.ts | 16 + datetimepicker/formats/src/polyfills.ts | 73 ++++ datetimepicker/formats/src/tsconfig.app.json | 15 + datetimepicker/formats/src/tsconfig.json | 23 ++ datetimepicker/forms/angular.json | 131 ++++++ datetimepicker/forms/package.json | 57 +++ .../forms/src/app/app.component.css | 30 ++ .../forms/src/app/app.component.html | 68 +++ datetimepicker/forms/src/app/app.component.ts | 66 +++ datetimepicker/forms/src/app/app.module.ts | 20 + datetimepicker/forms/src/app/main.ts | 6 + datetimepicker/forms/src/assets/fonts.css | 13 + datetimepicker/forms/src/assets/styles.css | 12 + datetimepicker/forms/src/index.html | 37 ++ datetimepicker/forms/src/main.ts | 16 + datetimepicker/forms/src/polyfills.ts | 73 ++++ datetimepicker/forms/src/tsconfig.app.json | 15 + datetimepicker/forms/src/tsconfig.json | 23 ++ datetimepicker/high-precision/angular.json | 127 ++++++ datetimepicker/high-precision/package.json | 53 +++ .../high-precision/src/app/app.component.css | 3 + .../high-precision/src/app/app.component.html | 3 + .../high-precision/src/app/app.component.ts | 29 ++ .../high-precision/src/app/app.module.ts | 15 + datetimepicker/high-precision/src/app/main.ts | 6 + .../high-precision/src/assets/fonts.css | 13 + .../high-precision/src/assets/styles.css | 12 + datetimepicker/high-precision/src/index.html | 37 ++ datetimepicker/high-precision/src/main.ts | 16 + .../high-precision/src/polyfills.ts | 73 ++++ .../high-precision/src/tsconfig.app.json | 15 + .../high-precision/src/tsconfig.json | 23 ++ datetimepicker/localization/angular.json | 128 ++++++ datetimepicker/localization/package.json | 54 +++ .../localization/src/app/app.component.css | 8 + .../localization/src/app/app.component.html | 16 + .../localization/src/app/app.component.ts | 41 ++ .../localization/src/app/app.module.ts | 16 + datetimepicker/localization/src/app/main.ts | 6 + .../localization/src/assets/fonts.css | 13 + .../localization/src/assets/styles.css | 12 + datetimepicker/localization/src/index.html | 37 ++ datetimepicker/localization/src/main.ts | 16 + datetimepicker/localization/src/polyfills.ts | 73 ++++ .../localization/src/tsconfig.app.json | 15 + datetimepicker/localization/src/tsconfig.json | 23 ++ datetimepicker/overview/angular.json | 127 ++++++ datetimepicker/overview/package.json | 53 +++ .../overview/src/app/app.component.css | 9 + .../overview/src/app/app.component.html | 38 ++ .../overview/src/app/app.component.ts | 31 ++ datetimepicker/overview/src/app/app.module.ts | 15 + datetimepicker/overview/src/app/main.ts | 6 + datetimepicker/overview/src/assets/fonts.css | 13 + datetimepicker/overview/src/assets/styles.css | 12 + datetimepicker/overview/src/index.html | 37 ++ datetimepicker/overview/src/main.ts | 16 + datetimepicker/overview/src/polyfills.ts | 73 ++++ datetimepicker/overview/src/tsconfig.app.json | 15 + datetimepicker/overview/src/tsconfig.json | 23 ++ datetimepicker/right-to-left/angular.json | 127 ++++++ datetimepicker/right-to-left/package.json | 53 +++ .../right-to-left/src/app/app.component.css | 9 + .../right-to-left/src/app/app.component.html | 3 + .../right-to-left/src/app/app.component.ts | 38 ++ .../right-to-left/src/app/app.module.ts | 15 + datetimepicker/right-to-left/src/app/main.ts | 6 + .../right-to-left/src/assets/fonts.css | 13 + .../right-to-left/src/assets/styles.css | 12 + datetimepicker/right-to-left/src/index.html | 37 ++ datetimepicker/right-to-left/src/main.ts | 16 + datetimepicker/right-to-left/src/polyfills.ts | 73 ++++ .../right-to-left/src/tsconfig.app.json | 15 + .../right-to-left/src/tsconfig.json | 23 ++ datetimepicker/test/angular.json | 126 ++++++ datetimepicker/test/package.json | 52 +++ datetimepicker/test/src/app/app.component.css | 5 + .../test/src/app/app.component.html | 1 + datetimepicker/test/src/app/app.component.ts | 27 ++ datetimepicker/test/src/app/app.module.ts | 15 + datetimepicker/test/src/app/main.ts | 6 + datetimepicker/test/src/assets/fonts.css | 13 + datetimepicker/test/src/assets/styles.css | 12 + datetimepicker/test/src/index.html | 37 ++ datetimepicker/test/src/main.ts | 16 + datetimepicker/test/src/polyfills.ts | 73 ++++ datetimepicker/test/src/tsconfig.app.json | 15 + datetimepicker/test/src/tsconfig.json | 23 ++ datetimepicker/time-zones/angular.json | 127 ++++++ datetimepicker/time-zones/package.json | 53 +++ .../time-zones/src/app/app.component.css | 6 + .../time-zones/src/app/app.component.html | 19 + .../time-zones/src/app/app.component.ts | 31 ++ .../time-zones/src/app/app.module.ts | 15 + datetimepicker/time-zones/src/app/main.ts | 6 + .../time-zones/src/assets/fonts.css | 13 + .../time-zones/src/assets/styles.css | 12 + datetimepicker/time-zones/src/index.html | 37 ++ datetimepicker/time-zones/src/main.ts | 16 + datetimepicker/time-zones/src/polyfills.ts | 73 ++++ .../time-zones/src/tsconfig.app.json | 15 + datetimepicker/time-zones/src/tsconfig.json | 23 ++ demos/calendar/custom-header/src/index.html | 5 +- .../events/src/app/app.component.html | 10 +- .../calendar/events/src/app/app.component.ts | 45 +- .../src/app/app.component.html | 22 +- .../src/app/app.component.ts | 59 ++- demos/calendar/important-days/src/index.html | 5 +- .../calendar/important-events/src/index.html | 5 +- .../src/app/app.component.html | 2 +- .../locale/src/app/app.component.html | 23 +- .../calendar/locale/src/app/app.component.ts | 73 ++-- .../calendar/methods/src/app/app.component.ts | 6 +- .../src/app/app.component.html | 4 +- .../src/app/app.component.html | 16 +- .../weeks-visibility/src/app/app.component.ts | 65 ++- demos/card/dismiss-on-swipe/src/index.html | 5 +- demos/card/expandable/src/index.html | 5 +- demos/card/grid-layout/src/index.html | 5 +- .../settings/src/app/app.component.html | 8 +- demos/carousel/3d-template/src/index.html | 5 +- demos/carousel/template/src/index.html | 5 +- demos/carousel/thumbnails/src/index.html | 5 +- .../src/app/app.component.html | 8 +- demos/combobox/item-template/src/index.html | 5 +- demos/combobox/token-template/src/index.html | 5 +- .../dropdownlist/item-template/src/index.html | 5 +- .../token-template-avatars/src/index.html | 5 +- .../token-template/src/index.html | 5 +- demos/fileupload/item-template/src/index.html | 5 +- .../src/app/app.component.html | 2 +- .../src/app/app.component.html | 2 +- .../src/app/app.component.html | 6 +- .../src/app/app.component.html | 6 +- .../src/app/app.component.html | 4 +- .../src/app/app.component.html | 4 +- .../gantt/custom-popup-window/src/index.html | 5 +- .../resource-panel-filtering/src/index.html | 5 +- demos/gantt/task-filtering/src/index.html | 5 +- demos/gantt/timeline-header/src/index.html | 5 +- demos/grid/column-template/src/index.html | 5 +- .../create-chart-from-grid/src/index.html | 5 +- demos/grid/custom-style/src/index.html | 5 +- .../grid/editing-custom-editor/src/index.html | 5 +- .../grid/grouping-custom-style/src/index.html | 5 +- .../row-resize/src/app/app.component.html | 2 +- demos/kanban/task-template/src/index.html | 5 +- demos/kanban/user-privileges/src/index.html | 5 +- demos/layout/dashboard/src/index.html | 5 +- demos/listbox/item-template/src/index.html | 5 +- demos/listmenu/grouped/src/index.html | 5 +- .../listmenu/kinetic-scrolling/src/index.html | 5 +- demos/listmenu/overview/src/index.html | 5 +- .../overview/src/app/app.component.html | 2 +- .../overview/src/app/app.component.html | 4 +- .../overview/src/app/app.component.html | 2 +- .../overview/src/app/app.component.html | 2 +- .../strength-template/src/index.html | 5 +- .../scheduler/doctors-schedule/src/index.html | 5 +- .../grouping-overview/src/index.html | 5 +- demos/scheduler/rooms-schedule/src/index.html | 5 +- .../server-side-mysql-php/src/index.html | 5 +- .../scheduler/travel-schedule/src/index.html | 5 +- .../overview/src/app/app.component.html | 6 +- demos/switchbutton/template/src/index.html | 5 +- demos/table/filter-template/src/index.html | 5 +- demos/table/filtering-advanced/src/index.html | 5 +- demos/table/footer-row/src/index.html | 5 +- .../multiple-headers-footers/src/index.html | 5 +- demos/table/sticky-footer/src/index.html | 5 +- demos/tabs/badges/src/index.html | 5 +- demos/tabs/title-template/src/index.html | 5 +- demos/timepicker/footer/src/index.html | 5 +- demos/toast/item-template/src/index.html | 5 +- demos/tree/item-template/src/index.html | 5 +- .../header-footer-templates/src/index.html | 5 +- demos/window/tabs/src/index.html | 5 +- docking-layout/auto-hide-item/angular.json | 129 ++++++ docking-layout/auto-hide-item/package.json | 55 +++ .../auto-hide-item/src/app/app.component.css | 26 ++ .../auto-hide-item/src/app/app.component.html | 26 ++ .../auto-hide-item/src/app/app.component.ts | 104 +++++ .../auto-hide-item/src/app/app.module.ts | 17 + docking-layout/auto-hide-item/src/app/main.ts | 6 + .../auto-hide-item/src/assets/fonts.css | 13 + .../auto-hide-item/src/assets/styles.css | 12 + docking-layout/auto-hide-item/src/index.html | 37 ++ docking-layout/auto-hide-item/src/main.ts | 16 + .../auto-hide-item/src/polyfills.ts | 73 ++++ .../auto-hide-item/src/tsconfig.app.json | 15 + .../auto-hide-item/src/tsconfig.json | 23 ++ docking-layout/auto-save-load/angular.json | 134 ++++++ docking-layout/auto-save-load/package.json | 60 +++ .../auto-save-load/src/app/app.component.css | 40 ++ .../auto-save-load/src/app/app.component.html | 9 + .../auto-save-load/src/app/app.component.ts | 176 ++++++++ .../auto-save-load/src/app/app.module.ts | 21 + docking-layout/auto-save-load/src/app/main.ts | 6 + .../auto-save-load/src/assets/fonts.css | 13 + .../auto-save-load/src/assets/styles.css | 12 + docking-layout/auto-save-load/src/index.html | 37 ++ docking-layout/auto-save-load/src/main.ts | 16 + .../auto-save-load/src/polyfills.ts | 73 ++++ .../auto-save-load/src/tsconfig.app.json | 15 + .../auto-save-load/src/tsconfig.json | 23 ++ docking-layout/drop-position/angular.json | 127 ++++++ docking-layout/drop-position/package.json | 53 +++ .../drop-position/src/app/app.component.css | 4 + .../drop-position/src/app/app.component.html | 21 + .../drop-position/src/app/app.component.ts | 108 +++++ .../drop-position/src/app/app.module.ts | 15 + docking-layout/drop-position/src/app/main.ts | 6 + .../drop-position/src/assets/fonts.css | 13 + .../drop-position/src/assets/styles.css | 12 + docking-layout/drop-position/src/index.html | 37 ++ docking-layout/drop-position/src/main.ts | 16 + docking-layout/drop-position/src/polyfills.ts | 73 ++++ .../drop-position/src/tsconfig.app.json | 15 + .../drop-position/src/tsconfig.json | 23 ++ .../insert-before-after-item/angular.json | 129 ++++++ .../insert-before-after-item/package.json | 55 +++ .../src/app/app.component.css | 17 + .../src/app/app.component.html | 18 + .../src/app/app.component.ts | 118 ++++++ .../src/app/app.module.ts | 17 + .../insert-before-after-item/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../insert-before-after-item/src/index.html | 37 ++ .../insert-before-after-item/src/main.ts | 16 + .../insert-before-after-item/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../src/tsconfig.json | 23 ++ docking-layout/insert-into-item/angular.json | 129 ++++++ docking-layout/insert-into-item/package.json | 55 +++ .../src/app/app.component.css | 19 + .../src/app/app.component.html | 17 + .../insert-into-item/src/app/app.component.ts | 117 ++++++ .../insert-into-item/src/app/app.module.ts | 17 + .../insert-into-item/src/app/main.ts | 6 + .../insert-into-item/src/assets/fonts.css | 13 + .../insert-into-item/src/assets/styles.css | 12 + .../insert-into-item/src/index.html | 37 ++ docking-layout/insert-into-item/src/main.ts | 16 + .../insert-into-item/src/polyfills.ts | 73 ++++ .../insert-into-item/src/tsconfig.app.json | 15 + .../insert-into-item/src/tsconfig.json | 23 ++ .../insert-outside-target-group/angular.json | 128 ++++++ .../insert-outside-target-group/package.json | 54 +++ .../src/app/app.component.css | 19 + .../src/app/app.component.html | 17 + .../src/app/app.component.ts | 157 +++++++ .../src/app/app.module.ts | 16 + .../src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../src/index.html | 37 ++ .../insert-outside-target-group/src/main.ts | 16 + .../src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../src/tsconfig.json | 23 ++ .../insert-top-level-item/angular.json | 128 ++++++ .../insert-top-level-item/package.json | 54 +++ .../src/app/app.component.css | 17 + .../src/app/app.component.html | 19 + .../src/app/app.component.ts | 119 ++++++ .../src/app/app.module.ts | 16 + .../insert-top-level-item/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../insert-top-level-item/src/index.html | 37 ++ .../insert-top-level-item/src/main.ts | 16 + .../insert-top-level-item/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../insert-top-level-item/src/tsconfig.json | 23 ++ docking-layout/inside-window/angular.json | 132 ++++++ docking-layout/inside-window/package.json | 58 +++ .../inside-window/src/app/app.component.css | 70 ++++ .../inside-window/src/app/app.component.html | 44 ++ .../inside-window/src/app/app.component.ts | 180 ++++++++ .../inside-window/src/app/app.module.ts | 20 + docking-layout/inside-window/src/app/main.ts | 6 + .../inside-window/src/assets/fonts.css | 13 + .../inside-window/src/assets/styles.css | 12 + docking-layout/inside-window/src/index.html | 37 ++ docking-layout/inside-window/src/main.ts | 16 + docking-layout/inside-window/src/polyfills.ts | 73 ++++ .../inside-window/src/tsconfig.app.json | 15 + .../inside-window/src/tsconfig.json | 23 ++ docking-layout/item-dock-undock/angular.json | 129 ++++++ docking-layout/item-dock-undock/package.json | 55 +++ .../src/app/app.component.css | 12 + .../src/app/app.component.html | 20 + .../item-dock-undock/src/app/app.component.ts | 88 ++++ .../item-dock-undock/src/app/app.module.ts | 17 + .../item-dock-undock/src/app/main.ts | 6 + .../item-dock-undock/src/assets/fonts.css | 13 + .../item-dock-undock/src/assets/styles.css | 12 + .../item-dock-undock/src/index.html | 37 ++ docking-layout/item-dock-undock/src/main.ts | 16 + .../item-dock-undock/src/polyfills.ts | 73 ++++ .../item-dock-undock/src/tsconfig.app.json | 15 + .../item-dock-undock/src/tsconfig.json | 23 ++ docking-layout/layout-item-group/angular.json | 127 ++++++ docking-layout/layout-item-group/package.json | 53 +++ .../src/app/app.component.css | 4 + .../src/app/app.component.html | 5 + .../src/app/app.component.ts | 102 +++++ .../layout-item-group/src/app/app.module.ts | 15 + .../layout-item-group/src/app/main.ts | 6 + .../layout-item-group/src/assets/fonts.css | 13 + .../layout-item-group/src/assets/styles.css | 12 + .../layout-item-group/src/index.html | 37 ++ docking-layout/layout-item-group/src/main.ts | 16 + .../layout-item-group/src/polyfills.ts | 73 ++++ .../layout-item-group/src/tsconfig.app.json | 15 + .../layout-item-group/src/tsconfig.json | 23 ++ docking-layout/layout-item/angular.json | 127 ++++++ docking-layout/layout-item/package.json | 53 +++ .../layout-item/src/app/app.component.css | 4 + .../layout-item/src/app/app.component.html | 3 + .../layout-item/src/app/app.component.ts | 70 ++++ .../layout-item/src/app/app.module.ts | 15 + docking-layout/layout-item/src/app/main.ts | 6 + .../layout-item/src/assets/fonts.css | 13 + .../layout-item/src/assets/styles.css | 12 + docking-layout/layout-item/src/index.html | 37 ++ docking-layout/layout-item/src/main.ts | 16 + docking-layout/layout-item/src/polyfills.ts | 73 ++++ .../layout-item/src/tsconfig.app.json | 15 + docking-layout/layout-item/src/tsconfig.json | 23 ++ docking-layout/overview/angular.json | 131 ++++++ docking-layout/overview/package.json | 57 +++ .../overview/src/app/app.component.css | 3 + .../overview/src/app/app.component.html | 3 + .../overview/src/app/app.component.ts | 86 ++++ docking-layout/overview/src/app/app.module.ts | 21 + docking-layout/overview/src/app/main.ts | 6 + docking-layout/overview/src/assets/fonts.css | 13 + docking-layout/overview/src/assets/styles.css | 12 + docking-layout/overview/src/index.html | 37 ++ docking-layout/overview/src/main.ts | 16 + docking-layout/overview/src/polyfills.ts | 73 ++++ docking-layout/overview/src/tsconfig.app.json | 15 + docking-layout/overview/src/tsconfig.json | 23 ++ docking-layout/remove-item/angular.json | 129 ++++++ docking-layout/remove-item/package.json | 55 +++ .../remove-item/src/app/app.component.css | 17 + .../remove-item/src/app/app.component.html | 15 + .../remove-item/src/app/app.component.ts | 100 +++++ .../remove-item/src/app/app.module.ts | 17 + docking-layout/remove-item/src/app/main.ts | 6 + .../remove-item/src/assets/fonts.css | 13 + .../remove-item/src/assets/styles.css | 12 + docking-layout/remove-item/src/index.html | 37 ++ docking-layout/remove-item/src/main.ts | 16 + docking-layout/remove-item/src/polyfills.ts | 73 ++++ .../remove-item/src/tsconfig.app.json | 15 + docking-layout/remove-item/src/tsconfig.json | 23 ++ docking-layout/right-to-left/angular.json | 127 ++++++ docking-layout/right-to-left/package.json | 53 +++ .../right-to-left/src/app/app.component.css | 22 + .../right-to-left/src/app/app.component.html | 1 + .../right-to-left/src/app/app.component.ts | 81 ++++ .../right-to-left/src/app/app.module.ts | 15 + docking-layout/right-to-left/src/app/main.ts | 6 + .../right-to-left/src/assets/fonts.css | 13 + .../right-to-left/src/assets/styles.css | 12 + docking-layout/right-to-left/src/index.html | 37 ++ docking-layout/right-to-left/src/main.ts | 16 + docking-layout/right-to-left/src/polyfills.ts | 73 ++++ .../right-to-left/src/tsconfig.app.json | 15 + .../right-to-left/src/tsconfig.json | 23 ++ docking-layout/snap-modes/angular.json | 129 ++++++ docking-layout/snap-modes/package.json | 55 +++ .../snap-modes/src/app/app.component.css | 17 + .../snap-modes/src/app/app.component.html | 8 + .../snap-modes/src/app/app.component.ts | 65 +++ .../snap-modes/src/app/app.module.ts | 16 + docking-layout/snap-modes/src/app/main.ts | 6 + .../snap-modes/src/assets/fonts.css | 13 + .../snap-modes/src/assets/styles.css | 12 + docking-layout/snap-modes/src/index.html | 37 ++ docking-layout/snap-modes/src/main.ts | 16 + docking-layout/snap-modes/src/polyfills.ts | 73 ++++ .../snap-modes/src/tsconfig.app.json | 15 + docking-layout/snap-modes/src/tsconfig.json | 23 ++ docking-layout/state/angular.json | 134 ++++++ docking-layout/state/package.json | 60 +++ .../state/src/app/app.component.css | 44 ++ .../state/src/app/app.component.html | 22 + docking-layout/state/src/app/app.component.ts | 238 +++++++++++ docking-layout/state/src/app/app.module.ts | 21 + docking-layout/state/src/app/main.ts | 6 + docking-layout/state/src/assets/fonts.css | 13 + docking-layout/state/src/assets/styles.css | 12 + docking-layout/state/src/index.html | 37 ++ docking-layout/state/src/main.ts | 16 + docking-layout/state/src/polyfills.ts | 73 ++++ docking-layout/state/src/tsconfig.app.json | 15 + docking-layout/state/src/tsconfig.json | 23 ++ docking-layout/update-item/angular.json | 129 ++++++ docking-layout/update-item/package.json | 55 +++ .../update-item/src/app/app.component.css | 17 + .../update-item/src/app/app.component.html | 13 + .../update-item/src/app/app.component.ts | 78 ++++ .../update-item/src/app/app.module.ts | 17 + docking-layout/update-item/src/app/main.ts | 6 + .../update-item/src/assets/fonts.css | 13 + .../update-item/src/assets/styles.css | 12 + docking-layout/update-item/src/index.html | 37 ++ docking-layout/update-item/src/main.ts | 16 + docking-layout/update-item/src/polyfills.ts | 73 ++++ .../update-item/src/tsconfig.app.json | 15 + docking-layout/update-item/src/tsconfig.json | 23 ++ .../visual-studio-style/angular.json | 130 ++++++ .../visual-studio-style/package.json | 56 +++ .../src/app/app.component.css | 59 +++ .../src/app/app.component.html | 42 ++ .../src/app/app.component.ts | 148 +++++++ .../visual-studio-style/src/app/app.module.ts | 18 + .../visual-studio-style/src/app/main.ts | 6 + .../visual-studio-style/src/assets/fonts.css | 13 + .../visual-studio-style/src/assets/styles.css | 12 + .../visual-studio-style/src/index.html | 37 ++ .../visual-studio-style/src/main.ts | 16 + .../visual-studio-style/src/polyfills.ts | 73 ++++ .../visual-studio-style/src/tsconfig.app.json | 15 + .../visual-studio-style/src/tsconfig.json | 23 ++ dropdownbutton/auto-height/angular.json | 128 ++++++ dropdownbutton/auto-height/package.json | 54 +++ .../auto-height/src/app/app.component.css | 12 + .../auto-height/src/app/app.component.html | 17 + .../auto-height/src/app/app.component.ts | 42 ++ .../auto-height/src/app/app.module.ts | 16 + dropdownbutton/auto-height/src/app/main.ts | 6 + .../auto-height/src/assets/fonts.css | 13 + .../auto-height/src/assets/styles.css | 12 + dropdownbutton/auto-height/src/index.html | 37 ++ dropdownbutton/auto-height/src/main.ts | 16 + dropdownbutton/auto-height/src/polyfills.ts | 73 ++++ .../auto-height/src/tsconfig.app.json | 15 + dropdownbutton/auto-height/src/tsconfig.json | 23 ++ .../automatic-positioning/angular.json | 127 ++++++ .../automatic-positioning/package.json | 53 +++ .../src/app/app.component.css | 21 + .../src/app/app.component.html | 12 + .../src/app/app.component.ts | 28 ++ .../src/app/app.module.ts | 15 + .../automatic-positioning/src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../automatic-positioning/src/index.html | 37 ++ .../automatic-positioning/src/main.ts | 16 + .../automatic-positioning/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../automatic-positioning/src/tsconfig.json | 23 ++ dropdownbutton/button-position/angular.json | 129 ++++++ dropdownbutton/button-position/package.json | 55 +++ .../button-position/src/app/app.component.css | 8 + .../src/app/app.component.html | 26 ++ .../button-position/src/app/app.component.ts | 72 ++++ .../button-position/src/app/app.module.ts | 17 + .../button-position/src/app/main.ts | 6 + .../button-position/src/assets/fonts.css | 13 + .../button-position/src/assets/styles.css | 12 + dropdownbutton/button-position/src/index.html | 37 ++ dropdownbutton/button-position/src/main.ts | 16 + .../button-position/src/polyfills.ts | 73 ++++ .../button-position/src/tsconfig.app.json | 15 + .../button-position/src/tsconfig.json | 23 ++ .../drop-down-open-modes/angular.json | 128 ++++++ .../drop-down-open-modes/package.json | 54 +++ .../src/app/app.component.css | 7 + .../src/app/app.component.html | 44 ++ .../src/app/app.component.ts | 96 +++++ .../src/app/app.module.ts | 17 + .../drop-down-open-modes/src/app/main.ts | 6 + .../drop-down-open-modes/src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../drop-down-open-modes/src/index.html | 37 ++ .../drop-down-open-modes/src/main.ts | 16 + .../drop-down-open-modes/src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../drop-down-open-modes/src/tsconfig.json | 23 ++ .../drop-down-position/angular.json | 128 ++++++ .../drop-down-position/package.json | 54 +++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 30 ++ .../src/app/app.component.ts | 68 +++ .../drop-down-position/src/app/app.module.ts | 16 + .../drop-down-position/src/app/main.ts | 6 + .../drop-down-position/src/assets/fonts.css | 13 + .../drop-down-position/src/assets/styles.css | 12 + .../drop-down-position/src/index.html | 37 ++ dropdownbutton/drop-down-position/src/main.ts | 16 + .../drop-down-position/src/polyfills.ts | 73 ++++ .../drop-down-position/src/tsconfig.app.json | 15 + .../drop-down-position/src/tsconfig.json | 23 ++ dropdownbutton/events/angular.json | 128 ++++++ dropdownbutton/events/package.json | 54 +++ .../events/src/app/app.component.css | 3 + .../events/src/app/app.component.html | 26 ++ .../events/src/app/app.component.ts | 60 +++ dropdownbutton/events/src/app/app.module.ts | 16 + dropdownbutton/events/src/app/main.ts | 6 + dropdownbutton/events/src/assets/fonts.css | 13 + dropdownbutton/events/src/assets/styles.css | 12 + dropdownbutton/events/src/index.html | 37 ++ dropdownbutton/events/src/main.ts | 16 + dropdownbutton/events/src/polyfills.ts | 73 ++++ dropdownbutton/events/src/tsconfig.app.json | 15 + dropdownbutton/events/src/tsconfig.json | 23 ++ dropdownbutton/methods/angular.json | 127 ++++++ dropdownbutton/methods/package.json | 53 +++ .../methods/src/app/app.component.css | 3 + .../methods/src/app/app.component.html | 32 ++ .../methods/src/app/app.component.ts | 72 ++++ dropdownbutton/methods/src/app/app.module.ts | 16 + dropdownbutton/methods/src/app/main.ts | 6 + dropdownbutton/methods/src/assets/fonts.css | 13 + dropdownbutton/methods/src/assets/styles.css | 12 + dropdownbutton/methods/src/index.html | 37 ++ dropdownbutton/methods/src/main.ts | 16 + dropdownbutton/methods/src/polyfills.ts | 73 ++++ dropdownbutton/methods/src/tsconfig.app.json | 15 + dropdownbutton/methods/src/tsconfig.json | 23 ++ dropdownbutton/overview/angular.json | 131 ++++++ dropdownbutton/overview/package.json | 57 +++ .../overview/src/app/app.component.css | 17 + .../overview/src/app/app.component.html | 21 + .../overview/src/app/app.component.ts | 141 +++++++ dropdownbutton/overview/src/app/app.module.ts | 24 ++ dropdownbutton/overview/src/app/main.ts | 6 + dropdownbutton/overview/src/assets/fonts.css | 13 + dropdownbutton/overview/src/assets/styles.css | 12 + dropdownbutton/overview/src/index.html | 37 ++ dropdownbutton/overview/src/main.ts | 16 + dropdownbutton/overview/src/polyfills.ts | 73 ++++ dropdownbutton/overview/src/tsconfig.app.json | 15 + dropdownbutton/overview/src/tsconfig.json | 23 ++ dropdownbutton/render-mode/angular.json | 127 ++++++ dropdownbutton/render-mode/package.json | 53 +++ .../render-mode/src/app/app.component.css | 5 + .../render-mode/src/app/app.component.html | 20 + .../render-mode/src/app/app.component.ts | 30 ++ .../render-mode/src/app/app.module.ts | 15 + dropdownbutton/render-mode/src/app/main.ts | 6 + .../render-mode/src/assets/fonts.css | 13 + .../render-mode/src/assets/styles.css | 12 + dropdownbutton/render-mode/src/index.html | 37 ++ dropdownbutton/render-mode/src/main.ts | 16 + dropdownbutton/render-mode/src/polyfills.ts | 73 ++++ .../render-mode/src/tsconfig.app.json | 15 + dropdownbutton/render-mode/src/tsconfig.json | 23 ++ dropdownbutton/resizing/angular.json | 128 ++++++ dropdownbutton/resizing/package.json | 54 +++ .../resizing/src/app/app.component.css | 11 + .../resizing/src/app/app.component.html | 34 ++ .../resizing/src/app/app.component.ts | 59 +++ dropdownbutton/resizing/src/app/app.module.ts | 16 + dropdownbutton/resizing/src/app/main.ts | 6 + dropdownbutton/resizing/src/assets/fonts.css | 13 + dropdownbutton/resizing/src/assets/styles.css | 12 + dropdownbutton/resizing/src/index.html | 37 ++ dropdownbutton/resizing/src/main.ts | 16 + dropdownbutton/resizing/src/polyfills.ts | 73 ++++ dropdownbutton/resizing/src/tsconfig.app.json | 15 + dropdownbutton/resizing/src/tsconfig.json | 23 ++ dropdownbutton/right-to-left/angular.json | 127 ++++++ dropdownbutton/right-to-left/package.json | 53 +++ .../right-to-left/src/app/app.component.css | 4 + .../right-to-left/src/app/app.component.html | 6 + .../right-to-left/src/app/app.component.ts | 29 ++ .../right-to-left/src/app/app.module.ts | 15 + dropdownbutton/right-to-left/src/app/main.ts | 6 + .../right-to-left/src/assets/fonts.css | 13 + .../right-to-left/src/assets/styles.css | 12 + dropdownbutton/right-to-left/src/index.html | 37 ++ dropdownbutton/right-to-left/src/main.ts | 16 + dropdownbutton/right-to-left/src/polyfills.ts | 73 ++++ .../right-to-left/src/tsconfig.app.json | 15 + .../right-to-left/src/tsconfig.json | 23 ++ .../angular.json | 126 ++++++ .../package.json | 52 +++ .../src/app/app.component.css | 4 + .../src/app/app.component.html | 2 + .../src/app/app.component.ts | 63 +++ .../src/app/app.module.ts | 15 + .../src/app/main.ts | 6 + .../src/assets/fonts.css | 13 + .../src/assets/styles.css | 12 + .../src/index.html | 37 ++ .../src/main.ts | 16 + .../src/polyfills.ts | 73 ++++ .../src/tsconfig.app.json | 15 + .../src/tsconfig.json | 23 ++ dropdownlist/auto-complete/angular.json | 126 ++++++ dropdownlist/auto-complete/package.json | 52 +++ .../auto-complete/src/app/app.component.css | 5 + .../auto-complete/src/app/app.component.html | 5 + .../auto-complete/src/app/app.component.ts | 60 +++ .../auto-complete/src/app/app.module.ts | 15 + dropdownlist/auto-complete/src/app/main.ts | 6 + .../auto-complete/src/assets/fonts.css | 13 + .../auto-complete/src/assets/styles.css | 12 + dropdownlist/auto-complete/src/index.html | 37 ++ dropdownlist/auto-complete/src/main.ts | 16 + dropdownlist/auto-complete/src/polyfills.ts | 73 ++++ .../auto-complete/src/tsconfig.app.json | 15 + dropdownlist/auto-complete/src/tsconfig.json | 23 ++ dropdownlist/auto-height/angular.json | 126 ++++++ dropdownlist/auto-height/package.json | 52 +++ dropdownlist/auto-height/src/index.html | 37 ++ dropdownlist/auto-height/src/main.ts | 16 + dropdownlist/auto-height/src/polyfills.ts | 73 ++++ .../auto-height/src/tsconfig.app.json | 15 + dropdownlist/auto-height/src/tsconfig.json | 23 ++ 1118 files changed, 38031 insertions(+), 331 deletions(-) create mode 100644 colorpicker/color-editing/angular.json create mode 100644 colorpicker/color-editing/package.json create mode 100644 colorpicker/color-editing/src/app/app.component.css create mode 100644 colorpicker/color-editing/src/app/app.component.html create mode 100644 colorpicker/color-editing/src/app/app.component.ts create mode 100644 colorpicker/color-editing/src/app/app.module.ts create mode 100644 colorpicker/color-editing/src/app/main.ts create mode 100644 colorpicker/color-editing/src/assets/fonts.css create mode 100644 colorpicker/color-editing/src/assets/styles.css create mode 100644 colorpicker/color-editing/src/index.html create mode 100644 colorpicker/color-editing/src/main.ts create mode 100644 colorpicker/color-editing/src/polyfills.ts create mode 100644 colorpicker/color-editing/src/tsconfig.app.json create mode 100644 colorpicker/color-editing/src/tsconfig.json create mode 100644 colorpicker/display-mode-default/angular.json create mode 100644 colorpicker/display-mode-default/package.json create mode 100644 colorpicker/display-mode-default/src/app/app.component.css create mode 100644 colorpicker/display-mode-default/src/app/app.component.html create mode 100644 colorpicker/display-mode-default/src/app/app.component.ts create mode 100644 colorpicker/display-mode-default/src/app/app.module.ts create mode 100644 colorpicker/display-mode-default/src/app/main.ts create mode 100644 colorpicker/display-mode-default/src/assets/fonts.css create mode 100644 colorpicker/display-mode-default/src/assets/styles.css create mode 100644 colorpicker/display-mode-default/src/index.html create mode 100644 colorpicker/display-mode-default/src/main.ts create mode 100644 colorpicker/display-mode-default/src/polyfills.ts create mode 100644 colorpicker/display-mode-default/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-default/src/tsconfig.json create mode 100644 colorpicker/display-mode-grid/angular.json create mode 100644 colorpicker/display-mode-grid/package.json create mode 100644 colorpicker/display-mode-grid/src/app/app.component.css create mode 100644 colorpicker/display-mode-grid/src/app/app.component.html create mode 100644 colorpicker/display-mode-grid/src/app/app.component.ts create mode 100644 colorpicker/display-mode-grid/src/app/app.module.ts create mode 100644 colorpicker/display-mode-grid/src/app/main.ts create mode 100644 colorpicker/display-mode-grid/src/assets/fonts.css create mode 100644 colorpicker/display-mode-grid/src/assets/styles.css create mode 100644 colorpicker/display-mode-grid/src/index.html create mode 100644 colorpicker/display-mode-grid/src/main.ts create mode 100644 colorpicker/display-mode-grid/src/polyfills.ts create mode 100644 colorpicker/display-mode-grid/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-grid/src/tsconfig.json create mode 100644 colorpicker/display-mode-hexagonal/angular.json create mode 100644 colorpicker/display-mode-hexagonal/package.json create mode 100644 colorpicker/display-mode-hexagonal/src/app/app.component.css create mode 100644 colorpicker/display-mode-hexagonal/src/app/app.component.html create mode 100644 colorpicker/display-mode-hexagonal/src/app/app.component.ts create mode 100644 colorpicker/display-mode-hexagonal/src/app/app.module.ts create mode 100644 colorpicker/display-mode-hexagonal/src/app/main.ts create mode 100644 colorpicker/display-mode-hexagonal/src/assets/fonts.css create mode 100644 colorpicker/display-mode-hexagonal/src/assets/styles.css create mode 100644 colorpicker/display-mode-hexagonal/src/index.html create mode 100644 colorpicker/display-mode-hexagonal/src/main.ts create mode 100644 colorpicker/display-mode-hexagonal/src/polyfills.ts create mode 100644 colorpicker/display-mode-hexagonal/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-hexagonal/src/tsconfig.json create mode 100644 colorpicker/display-mode-material-grid/angular.json create mode 100644 colorpicker/display-mode-material-grid/package.json create mode 100644 colorpicker/display-mode-material-grid/src/app/app.component.css create mode 100644 colorpicker/display-mode-material-grid/src/app/app.component.html create mode 100644 colorpicker/display-mode-material-grid/src/app/app.component.ts create mode 100644 colorpicker/display-mode-material-grid/src/app/app.module.ts create mode 100644 colorpicker/display-mode-material-grid/src/app/main.ts create mode 100644 colorpicker/display-mode-material-grid/src/assets/fonts.css create mode 100644 colorpicker/display-mode-material-grid/src/assets/styles.css create mode 100644 colorpicker/display-mode-material-grid/src/index.html create mode 100644 colorpicker/display-mode-material-grid/src/main.ts create mode 100644 colorpicker/display-mode-material-grid/src/polyfills.ts create mode 100644 colorpicker/display-mode-material-grid/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-material-grid/src/tsconfig.json create mode 100644 colorpicker/display-mode-palette/angular.json create mode 100644 colorpicker/display-mode-palette/package.json create mode 100644 colorpicker/display-mode-palette/src/app/app.component.css create mode 100644 colorpicker/display-mode-palette/src/app/app.component.html create mode 100644 colorpicker/display-mode-palette/src/app/app.component.ts create mode 100644 colorpicker/display-mode-palette/src/app/app.module.ts create mode 100644 colorpicker/display-mode-palette/src/app/main.ts create mode 100644 colorpicker/display-mode-palette/src/assets/fonts.css create mode 100644 colorpicker/display-mode-palette/src/assets/styles.css create mode 100644 colorpicker/display-mode-palette/src/index.html create mode 100644 colorpicker/display-mode-palette/src/main.ts create mode 100644 colorpicker/display-mode-palette/src/polyfills.ts create mode 100644 colorpicker/display-mode-palette/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-palette/src/tsconfig.json create mode 100644 colorpicker/display-mode-radial/angular.json create mode 100644 colorpicker/display-mode-radial/package.json create mode 100644 colorpicker/display-mode-radial/src/app/app.component.css create mode 100644 colorpicker/display-mode-radial/src/app/app.component.html create mode 100644 colorpicker/display-mode-radial/src/app/app.component.ts create mode 100644 colorpicker/display-mode-radial/src/app/app.module.ts create mode 100644 colorpicker/display-mode-radial/src/app/main.ts create mode 100644 colorpicker/display-mode-radial/src/assets/fonts.css create mode 100644 colorpicker/display-mode-radial/src/assets/styles.css create mode 100644 colorpicker/display-mode-radial/src/index.html create mode 100644 colorpicker/display-mode-radial/src/main.ts create mode 100644 colorpicker/display-mode-radial/src/polyfills.ts create mode 100644 colorpicker/display-mode-radial/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-radial/src/tsconfig.json create mode 100644 colorpicker/display-mode-spectrum-grid/angular.json create mode 100644 colorpicker/display-mode-spectrum-grid/package.json create mode 100644 colorpicker/display-mode-spectrum-grid/src/app/app.component.css create mode 100644 colorpicker/display-mode-spectrum-grid/src/app/app.component.html create mode 100644 colorpicker/display-mode-spectrum-grid/src/app/app.component.ts create mode 100644 colorpicker/display-mode-spectrum-grid/src/app/app.module.ts create mode 100644 colorpicker/display-mode-spectrum-grid/src/app/main.ts create mode 100644 colorpicker/display-mode-spectrum-grid/src/assets/fonts.css create mode 100644 colorpicker/display-mode-spectrum-grid/src/assets/styles.css create mode 100644 colorpicker/display-mode-spectrum-grid/src/index.html create mode 100644 colorpicker/display-mode-spectrum-grid/src/main.ts create mode 100644 colorpicker/display-mode-spectrum-grid/src/polyfills.ts create mode 100644 colorpicker/display-mode-spectrum-grid/src/tsconfig.app.json create mode 100644 colorpicker/display-mode-spectrum-grid/src/tsconfig.json create mode 100644 colorpicker/editing/angular.json create mode 100644 colorpicker/editing/package.json create mode 100644 colorpicker/editing/src/app/app.component.css create mode 100644 colorpicker/editing/src/app/app.component.html create mode 100644 colorpicker/editing/src/app/app.component.ts create mode 100644 colorpicker/editing/src/app/app.module.ts create mode 100644 colorpicker/editing/src/app/main.ts create mode 100644 colorpicker/editing/src/assets/fonts.css create mode 100644 colorpicker/editing/src/assets/styles.css create mode 100644 colorpicker/editing/src/index.html create mode 100644 colorpicker/editing/src/main.ts create mode 100644 colorpicker/editing/src/polyfills.ts create mode 100644 colorpicker/editing/src/tsconfig.app.json create mode 100644 colorpicker/editing/src/tsconfig.json create mode 100644 colorpicker/forms/angular.json create mode 100644 colorpicker/forms/package.json create mode 100644 colorpicker/forms/src/app/app.component.css create mode 100644 colorpicker/forms/src/app/app.component.html create mode 100644 colorpicker/forms/src/app/app.component.ts create mode 100644 colorpicker/forms/src/app/app.module.ts create mode 100644 colorpicker/forms/src/app/main.ts create mode 100644 colorpicker/forms/src/assets/fonts.css create mode 100644 colorpicker/forms/src/assets/styles.css create mode 100644 colorpicker/forms/src/index.html create mode 100644 colorpicker/forms/src/main.ts create mode 100644 colorpicker/forms/src/polyfills.ts create mode 100644 colorpicker/forms/src/tsconfig.app.json create mode 100644 colorpicker/forms/src/tsconfig.json create mode 100644 colorpicker/overview/angular.json create mode 100644 colorpicker/overview/package.json create mode 100644 colorpicker/overview/src/app/app.component.css create mode 100644 colorpicker/overview/src/app/app.component.html create mode 100644 colorpicker/overview/src/app/app.component.ts create mode 100644 colorpicker/overview/src/app/app.module.ts create mode 100644 colorpicker/overview/src/app/main.ts create mode 100644 colorpicker/overview/src/assets/fonts.css create mode 100644 colorpicker/overview/src/assets/styles.css create mode 100644 colorpicker/overview/src/index.html create mode 100644 colorpicker/overview/src/main.ts create mode 100644 colorpicker/overview/src/polyfills.ts create mode 100644 colorpicker/overview/src/tsconfig.app.json create mode 100644 colorpicker/overview/src/tsconfig.json create mode 100644 colorpicker/right-to-left/angular.json create mode 100644 colorpicker/right-to-left/package.json create mode 100644 colorpicker/right-to-left/src/app/app.component.css create mode 100644 colorpicker/right-to-left/src/app/app.component.html create mode 100644 colorpicker/right-to-left/src/app/app.component.ts create mode 100644 colorpicker/right-to-left/src/app/app.module.ts create mode 100644 colorpicker/right-to-left/src/app/main.ts create mode 100644 colorpicker/right-to-left/src/assets/fonts.css create mode 100644 colorpicker/right-to-left/src/assets/styles.css create mode 100644 colorpicker/right-to-left/src/index.html create mode 100644 colorpicker/right-to-left/src/main.ts create mode 100644 colorpicker/right-to-left/src/polyfills.ts create mode 100644 colorpicker/right-to-left/src/tsconfig.app.json create mode 100644 colorpicker/right-to-left/src/tsconfig.json create mode 100644 colorpicker/value-display-mode/angular.json create mode 100644 colorpicker/value-display-mode/package.json create mode 100644 colorpicker/value-display-mode/src/app/app.component.css create mode 100644 colorpicker/value-display-mode/src/app/app.component.html create mode 100644 colorpicker/value-display-mode/src/app/app.component.ts create mode 100644 colorpicker/value-display-mode/src/app/app.module.ts create mode 100644 colorpicker/value-display-mode/src/app/main.ts create mode 100644 colorpicker/value-display-mode/src/assets/fonts.css create mode 100644 colorpicker/value-display-mode/src/assets/styles.css create mode 100644 colorpicker/value-display-mode/src/index.html create mode 100644 colorpicker/value-display-mode/src/main.ts create mode 100644 colorpicker/value-display-mode/src/polyfills.ts create mode 100644 colorpicker/value-display-mode/src/tsconfig.app.json create mode 100644 colorpicker/value-display-mode/src/tsconfig.json create mode 100644 colorpicker/value-format/angular.json create mode 100644 colorpicker/value-format/package.json create mode 100644 colorpicker/value-format/src/app/app.component.css create mode 100644 colorpicker/value-format/src/app/app.component.html create mode 100644 colorpicker/value-format/src/app/app.component.ts create mode 100644 colorpicker/value-format/src/app/app.module.ts create mode 100644 colorpicker/value-format/src/app/main.ts create mode 100644 colorpicker/value-format/src/assets/fonts.css create mode 100644 colorpicker/value-format/src/assets/styles.css create mode 100644 colorpicker/value-format/src/index.html create mode 100644 colorpicker/value-format/src/main.ts create mode 100644 colorpicker/value-format/src/polyfills.ts create mode 100644 colorpicker/value-format/src/tsconfig.app.json create mode 100644 colorpicker/value-format/src/tsconfig.json create mode 100644 combobox/auto-complete/angular.json create mode 100644 combobox/auto-complete/package.json create mode 100644 combobox/auto-complete/src/app/app.component.css create mode 100644 combobox/auto-complete/src/app/app.component.html create mode 100644 combobox/auto-complete/src/app/app.component.ts create mode 100644 combobox/auto-complete/src/app/app.module.ts create mode 100644 combobox/auto-complete/src/app/main.ts create mode 100644 combobox/auto-complete/src/assets/fonts.css create mode 100644 combobox/auto-complete/src/assets/styles.css create mode 100644 combobox/auto-complete/src/index.html create mode 100644 combobox/auto-complete/src/main.ts create mode 100644 combobox/auto-complete/src/polyfills.ts create mode 100644 combobox/auto-complete/src/tsconfig.app.json create mode 100644 combobox/auto-complete/src/tsconfig.json create mode 100644 combobox/automatic-positioning/angular.json create mode 100644 combobox/automatic-positioning/package.json create mode 100644 combobox/automatic-positioning/src/app/app.component.css create mode 100644 combobox/automatic-positioning/src/app/app.component.html create mode 100644 combobox/automatic-positioning/src/app/app.component.ts create mode 100644 combobox/automatic-positioning/src/app/app.module.ts create mode 100644 combobox/automatic-positioning/src/app/main.ts create mode 100644 combobox/automatic-positioning/src/assets/fonts.css create mode 100644 combobox/automatic-positioning/src/assets/styles.css create mode 100644 combobox/automatic-positioning/src/index.html create mode 100644 combobox/automatic-positioning/src/main.ts create mode 100644 combobox/automatic-positioning/src/polyfills.ts create mode 100644 combobox/automatic-positioning/src/tsconfig.app.json create mode 100644 combobox/automatic-positioning/src/tsconfig.json create mode 100644 combobox/basic/angular.json create mode 100644 combobox/basic/package.json create mode 100644 combobox/basic/src/app/app.component.css create mode 100644 combobox/basic/src/app/app.component.html create mode 100644 combobox/basic/src/app/app.component.ts create mode 100644 combobox/basic/src/app/app.module.ts create mode 100644 combobox/basic/src/app/main.ts create mode 100644 combobox/basic/src/assets/fonts.css create mode 100644 combobox/basic/src/assets/styles.css create mode 100644 combobox/basic/src/index.html create mode 100644 combobox/basic/src/main.ts create mode 100644 combobox/basic/src/polyfills.ts create mode 100644 combobox/basic/src/tsconfig.app.json create mode 100644 combobox/basic/src/tsconfig.json create mode 100644 combobox/button-position/angular.json create mode 100644 combobox/button-position/package.json create mode 100644 combobox/button-position/src/app/app.component.css create mode 100644 combobox/button-position/src/app/app.component.html create mode 100644 combobox/button-position/src/app/app.component.ts create mode 100644 combobox/button-position/src/app/app.module.ts create mode 100644 combobox/button-position/src/app/main.ts create mode 100644 combobox/button-position/src/assets/fonts.css create mode 100644 combobox/button-position/src/assets/styles.css create mode 100644 combobox/button-position/src/index.html create mode 100644 combobox/button-position/src/main.ts create mode 100644 combobox/button-position/src/polyfills.ts create mode 100644 combobox/button-position/src/tsconfig.app.json create mode 100644 combobox/button-position/src/tsconfig.json create mode 100644 combobox/checkboxes/angular.json create mode 100644 combobox/checkboxes/package.json create mode 100644 combobox/checkboxes/src/app/app.component.css create mode 100644 combobox/checkboxes/src/app/app.component.html create mode 100644 combobox/checkboxes/src/app/app.component.ts create mode 100644 combobox/checkboxes/src/app/app.module.ts create mode 100644 combobox/checkboxes/src/app/main.ts create mode 100644 combobox/checkboxes/src/assets/fonts.css create mode 100644 combobox/checkboxes/src/assets/styles.css create mode 100644 combobox/checkboxes/src/index.html create mode 100644 combobox/checkboxes/src/main.ts create mode 100644 combobox/checkboxes/src/polyfills.ts create mode 100644 combobox/checkboxes/src/tsconfig.app.json create mode 100644 combobox/checkboxes/src/tsconfig.json create mode 100644 combobox/filterable/angular.json create mode 100644 combobox/filterable/package.json create mode 100644 combobox/filterable/src/app/app.component.css create mode 100644 combobox/filterable/src/app/app.component.html create mode 100644 combobox/filterable/src/app/app.component.ts create mode 100644 combobox/filterable/src/app/app.module.ts create mode 100644 combobox/filterable/src/app/main.ts create mode 100644 combobox/filterable/src/assets/fonts.css create mode 100644 combobox/filterable/src/assets/styles.css create mode 100644 combobox/filterable/src/index.html create mode 100644 combobox/filterable/src/main.ts create mode 100644 combobox/filterable/src/polyfills.ts create mode 100644 combobox/filterable/src/tsconfig.app.json create mode 100644 combobox/filterable/src/tsconfig.json create mode 100644 combobox/forms/angular.json create mode 100644 combobox/forms/package.json create mode 100644 combobox/forms/src/app/app.component.css create mode 100644 combobox/forms/src/app/app.component.html create mode 100644 combobox/forms/src/app/app.component.ts create mode 100644 combobox/forms/src/app/app.module.ts create mode 100644 combobox/forms/src/app/main.ts create mode 100644 combobox/forms/src/assets/fonts.css create mode 100644 combobox/forms/src/assets/styles.css create mode 100644 combobox/forms/src/index.html create mode 100644 combobox/forms/src/main.ts create mode 100644 combobox/forms/src/polyfills.ts create mode 100644 combobox/forms/src/tsconfig.app.json create mode 100644 combobox/forms/src/tsconfig.json create mode 100644 combobox/item-template/angular.json create mode 100644 combobox/item-template/package.json create mode 100644 combobox/item-template/src/app/app.component.css create mode 100644 combobox/item-template/src/app/app.component.html create mode 100644 combobox/item-template/src/app/app.component.ts create mode 100644 combobox/item-template/src/app/app.module.ts create mode 100644 combobox/item-template/src/app/main.ts create mode 100644 combobox/item-template/src/assets/fonts.css create mode 100644 combobox/item-template/src/assets/styles.css create mode 100644 combobox/item-template/src/index.html create mode 100644 combobox/item-template/src/main.ts create mode 100644 combobox/item-template/src/polyfills.ts create mode 100644 combobox/item-template/src/tsconfig.app.json create mode 100644 combobox/item-template/src/tsconfig.json create mode 100644 combobox/methods/angular.json create mode 100644 combobox/methods/package.json create mode 100644 combobox/methods/src/app/app.component.css create mode 100644 combobox/methods/src/app/app.component.html create mode 100644 combobox/methods/src/app/app.component.ts create mode 100644 combobox/methods/src/app/app.module.ts create mode 100644 combobox/methods/src/app/main.ts create mode 100644 combobox/methods/src/assets/fonts.css create mode 100644 combobox/methods/src/assets/styles.css create mode 100644 combobox/methods/src/index.html create mode 100644 combobox/methods/src/main.ts create mode 100644 combobox/methods/src/polyfills.ts create mode 100644 combobox/methods/src/tsconfig.app.json create mode 100644 combobox/methods/src/tsconfig.json create mode 100644 combobox/multiple-selection-mode/angular.json create mode 100644 combobox/multiple-selection-mode/package.json create mode 100644 combobox/multiple-selection-mode/src/app/app.component.css create mode 100644 combobox/multiple-selection-mode/src/app/app.component.html create mode 100644 combobox/multiple-selection-mode/src/app/app.component.ts create mode 100644 combobox/multiple-selection-mode/src/app/app.module.ts create mode 100644 combobox/multiple-selection-mode/src/app/main.ts create mode 100644 combobox/multiple-selection-mode/src/assets/fonts.css create mode 100644 combobox/multiple-selection-mode/src/assets/styles.css create mode 100644 combobox/multiple-selection-mode/src/index.html create mode 100644 combobox/multiple-selection-mode/src/main.ts create mode 100644 combobox/multiple-selection-mode/src/polyfills.ts create mode 100644 combobox/multiple-selection-mode/src/tsconfig.app.json create mode 100644 combobox/multiple-selection-mode/src/tsconfig.json create mode 100644 combobox/multiple-selection/angular.json create mode 100644 combobox/multiple-selection/package.json create mode 100644 combobox/multiple-selection/src/app/app.component.css create mode 100644 combobox/multiple-selection/src/app/app.component.html create mode 100644 combobox/multiple-selection/src/app/app.component.ts create mode 100644 combobox/multiple-selection/src/app/app.module.ts create mode 100644 combobox/multiple-selection/src/app/main.ts create mode 100644 combobox/multiple-selection/src/assets/fonts.css create mode 100644 combobox/multiple-selection/src/assets/styles.css create mode 100644 combobox/multiple-selection/src/index.html create mode 100644 combobox/multiple-selection/src/main.ts create mode 100644 combobox/multiple-selection/src/polyfills.ts create mode 100644 combobox/multiple-selection/src/tsconfig.app.json create mode 100644 combobox/multiple-selection/src/tsconfig.json create mode 100644 combobox/open-modes/angular.json create mode 100644 combobox/open-modes/package.json create mode 100644 combobox/open-modes/src/app/app.component.css create mode 100644 combobox/open-modes/src/app/app.component.html create mode 100644 combobox/open-modes/src/app/app.component.ts create mode 100644 combobox/open-modes/src/app/app.module.ts create mode 100644 combobox/open-modes/src/app/main.ts create mode 100644 combobox/open-modes/src/assets/fonts.css create mode 100644 combobox/open-modes/src/assets/styles.css create mode 100644 combobox/open-modes/src/index.html create mode 100644 combobox/open-modes/src/main.ts create mode 100644 combobox/open-modes/src/polyfills.ts create mode 100644 combobox/open-modes/src/tsconfig.app.json create mode 100644 combobox/open-modes/src/tsconfig.json create mode 100644 combobox/overview/angular.json create mode 100644 combobox/overview/package.json create mode 100644 combobox/overview/src/app/app.component.css create mode 100644 combobox/overview/src/app/app.component.html create mode 100644 combobox/overview/src/app/app.component.ts create mode 100644 combobox/overview/src/app/app.module.ts create mode 100644 combobox/overview/src/app/main.ts create mode 100644 combobox/overview/src/assets/fonts.css create mode 100644 combobox/overview/src/assets/styles.css create mode 100644 combobox/overview/src/index.html create mode 100644 combobox/overview/src/main.ts create mode 100644 combobox/overview/src/polyfills.ts create mode 100644 combobox/overview/src/tsconfig.app.json create mode 100644 combobox/overview/src/tsconfig.json create mode 100644 combobox/popup-resizing/angular.json create mode 100644 combobox/popup-resizing/package.json create mode 100644 combobox/popup-resizing/src/app/app.component.css create mode 100644 combobox/popup-resizing/src/app/app.component.html create mode 100644 combobox/popup-resizing/src/app/app.component.ts create mode 100644 combobox/popup-resizing/src/app/app.module.ts create mode 100644 combobox/popup-resizing/src/app/main.ts create mode 100644 combobox/popup-resizing/src/assets/fonts.css create mode 100644 combobox/popup-resizing/src/assets/styles.css create mode 100644 combobox/popup-resizing/src/index.html create mode 100644 combobox/popup-resizing/src/main.ts create mode 100644 combobox/popup-resizing/src/polyfills.ts create mode 100644 combobox/popup-resizing/src/tsconfig.app.json create mode 100644 combobox/popup-resizing/src/tsconfig.json create mode 100644 combobox/position/angular.json create mode 100644 combobox/position/package.json create mode 100644 combobox/position/src/app/app.component.css create mode 100644 combobox/position/src/app/app.component.html create mode 100644 combobox/position/src/app/app.component.ts create mode 100644 combobox/position/src/app/app.module.ts create mode 100644 combobox/position/src/app/main.ts create mode 100644 combobox/position/src/assets/fonts.css create mode 100644 combobox/position/src/assets/styles.css create mode 100644 combobox/position/src/index.html create mode 100644 combobox/position/src/main.ts create mode 100644 combobox/position/src/polyfills.ts create mode 100644 combobox/position/src/tsconfig.app.json create mode 100644 combobox/position/src/tsconfig.json create mode 100644 combobox/right-to-left/angular.json create mode 100644 combobox/right-to-left/package.json create mode 100644 combobox/right-to-left/src/app/app.component.css create mode 100644 combobox/right-to-left/src/app/app.component.html create mode 100644 combobox/right-to-left/src/app/app.component.ts create mode 100644 combobox/right-to-left/src/app/app.module.ts create mode 100644 combobox/right-to-left/src/app/main.ts create mode 100644 combobox/right-to-left/src/assets/fonts.css create mode 100644 combobox/right-to-left/src/assets/styles.css create mode 100644 combobox/right-to-left/src/index.html create mode 100644 combobox/right-to-left/src/main.ts create mode 100644 combobox/right-to-left/src/polyfills.ts create mode 100644 combobox/right-to-left/src/tsconfig.app.json create mode 100644 combobox/right-to-left/src/tsconfig.json create mode 100644 combobox/token-template/angular.json create mode 100644 combobox/token-template/package.json create mode 100644 combobox/token-template/src/app/app.component.css create mode 100644 combobox/token-template/src/app/app.component.html create mode 100644 combobox/token-template/src/app/app.component.ts create mode 100644 combobox/token-template/src/app/app.module.ts create mode 100644 combobox/token-template/src/app/main.ts create mode 100644 combobox/token-template/src/assets/fonts.css create mode 100644 combobox/token-template/src/assets/styles.css create mode 100644 combobox/token-template/src/index.html create mode 100644 combobox/token-template/src/main.ts create mode 100644 combobox/token-template/src/polyfills.ts create mode 100644 combobox/token-template/src/tsconfig.app.json create mode 100644 combobox/token-template/src/tsconfig.json create mode 100644 datetimepicker/basic/angular.json create mode 100644 datetimepicker/basic/package.json create mode 100644 datetimepicker/basic/src/app/app.component.css create mode 100644 datetimepicker/basic/src/app/app.component.html create mode 100644 datetimepicker/basic/src/app/app.component.ts create mode 100644 datetimepicker/basic/src/app/app.module.ts create mode 100644 datetimepicker/basic/src/app/main.ts create mode 100644 datetimepicker/basic/src/assets/fonts.css create mode 100644 datetimepicker/basic/src/assets/styles.css create mode 100644 datetimepicker/basic/src/index.html create mode 100644 datetimepicker/basic/src/main.ts create mode 100644 datetimepicker/basic/src/polyfills.ts create mode 100644 datetimepicker/basic/src/tsconfig.app.json create mode 100644 datetimepicker/basic/src/tsconfig.json create mode 100644 datetimepicker/drop-down-display-mode/angular.json create mode 100644 datetimepicker/drop-down-display-mode/package.json create mode 100644 datetimepicker/drop-down-display-mode/src/app/app.component.css create mode 100644 datetimepicker/drop-down-display-mode/src/app/app.component.html create mode 100644 datetimepicker/drop-down-display-mode/src/app/app.component.ts create mode 100644 datetimepicker/drop-down-display-mode/src/app/app.module.ts create mode 100644 datetimepicker/drop-down-display-mode/src/app/main.ts create mode 100644 datetimepicker/drop-down-display-mode/src/assets/fonts.css create mode 100644 datetimepicker/drop-down-display-mode/src/assets/styles.css create mode 100644 datetimepicker/drop-down-display-mode/src/index.html create mode 100644 datetimepicker/drop-down-display-mode/src/main.ts create mode 100644 datetimepicker/drop-down-display-mode/src/polyfills.ts create mode 100644 datetimepicker/drop-down-display-mode/src/tsconfig.app.json create mode 100644 datetimepicker/drop-down-display-mode/src/tsconfig.json create mode 100644 datetimepicker/drop-down-position/angular.json create mode 100644 datetimepicker/drop-down-position/package.json create mode 100644 datetimepicker/drop-down-position/src/app/app.component.css create mode 100644 datetimepicker/drop-down-position/src/app/app.component.html create mode 100644 datetimepicker/drop-down-position/src/app/app.component.ts create mode 100644 datetimepicker/drop-down-position/src/app/app.module.ts create mode 100644 datetimepicker/drop-down-position/src/app/main.ts create mode 100644 datetimepicker/drop-down-position/src/assets/fonts.css create mode 100644 datetimepicker/drop-down-position/src/assets/styles.css create mode 100644 datetimepicker/drop-down-position/src/index.html create mode 100644 datetimepicker/drop-down-position/src/main.ts create mode 100644 datetimepicker/drop-down-position/src/polyfills.ts create mode 100644 datetimepicker/drop-down-position/src/tsconfig.app.json create mode 100644 datetimepicker/drop-down-position/src/tsconfig.json create mode 100644 datetimepicker/edit-modes/angular.json create mode 100644 datetimepicker/edit-modes/package.json create mode 100644 datetimepicker/edit-modes/src/app/app.component.css create mode 100644 datetimepicker/edit-modes/src/app/app.component.html create mode 100644 datetimepicker/edit-modes/src/app/app.component.ts create mode 100644 datetimepicker/edit-modes/src/app/app.module.ts create mode 100644 datetimepicker/edit-modes/src/app/main.ts create mode 100644 datetimepicker/edit-modes/src/assets/fonts.css create mode 100644 datetimepicker/edit-modes/src/assets/styles.css create mode 100644 datetimepicker/edit-modes/src/index.html create mode 100644 datetimepicker/edit-modes/src/main.ts create mode 100644 datetimepicker/edit-modes/src/polyfills.ts create mode 100644 datetimepicker/edit-modes/src/tsconfig.app.json create mode 100644 datetimepicker/edit-modes/src/tsconfig.json create mode 100644 datetimepicker/formats/angular.json create mode 100644 datetimepicker/formats/package.json create mode 100644 datetimepicker/formats/src/app/app.component.css create mode 100644 datetimepicker/formats/src/app/app.component.html create mode 100644 datetimepicker/formats/src/app/app.component.ts create mode 100644 datetimepicker/formats/src/app/app.module.ts create mode 100644 datetimepicker/formats/src/app/main.ts create mode 100644 datetimepicker/formats/src/assets/fonts.css create mode 100644 datetimepicker/formats/src/assets/styles.css create mode 100644 datetimepicker/formats/src/index.html create mode 100644 datetimepicker/formats/src/main.ts create mode 100644 datetimepicker/formats/src/polyfills.ts create mode 100644 datetimepicker/formats/src/tsconfig.app.json create mode 100644 datetimepicker/formats/src/tsconfig.json create mode 100644 datetimepicker/forms/angular.json create mode 100644 datetimepicker/forms/package.json create mode 100644 datetimepicker/forms/src/app/app.component.css create mode 100644 datetimepicker/forms/src/app/app.component.html create mode 100644 datetimepicker/forms/src/app/app.component.ts create mode 100644 datetimepicker/forms/src/app/app.module.ts create mode 100644 datetimepicker/forms/src/app/main.ts create mode 100644 datetimepicker/forms/src/assets/fonts.css create mode 100644 datetimepicker/forms/src/assets/styles.css create mode 100644 datetimepicker/forms/src/index.html create mode 100644 datetimepicker/forms/src/main.ts create mode 100644 datetimepicker/forms/src/polyfills.ts create mode 100644 datetimepicker/forms/src/tsconfig.app.json create mode 100644 datetimepicker/forms/src/tsconfig.json create mode 100644 datetimepicker/high-precision/angular.json create mode 100644 datetimepicker/high-precision/package.json create mode 100644 datetimepicker/high-precision/src/app/app.component.css create mode 100644 datetimepicker/high-precision/src/app/app.component.html create mode 100644 datetimepicker/high-precision/src/app/app.component.ts create mode 100644 datetimepicker/high-precision/src/app/app.module.ts create mode 100644 datetimepicker/high-precision/src/app/main.ts create mode 100644 datetimepicker/high-precision/src/assets/fonts.css create mode 100644 datetimepicker/high-precision/src/assets/styles.css create mode 100644 datetimepicker/high-precision/src/index.html create mode 100644 datetimepicker/high-precision/src/main.ts create mode 100644 datetimepicker/high-precision/src/polyfills.ts create mode 100644 datetimepicker/high-precision/src/tsconfig.app.json create mode 100644 datetimepicker/high-precision/src/tsconfig.json create mode 100644 datetimepicker/localization/angular.json create mode 100644 datetimepicker/localization/package.json create mode 100644 datetimepicker/localization/src/app/app.component.css create mode 100644 datetimepicker/localization/src/app/app.component.html create mode 100644 datetimepicker/localization/src/app/app.component.ts create mode 100644 datetimepicker/localization/src/app/app.module.ts create mode 100644 datetimepicker/localization/src/app/main.ts create mode 100644 datetimepicker/localization/src/assets/fonts.css create mode 100644 datetimepicker/localization/src/assets/styles.css create mode 100644 datetimepicker/localization/src/index.html create mode 100644 datetimepicker/localization/src/main.ts create mode 100644 datetimepicker/localization/src/polyfills.ts create mode 100644 datetimepicker/localization/src/tsconfig.app.json create mode 100644 datetimepicker/localization/src/tsconfig.json create mode 100644 datetimepicker/overview/angular.json create mode 100644 datetimepicker/overview/package.json create mode 100644 datetimepicker/overview/src/app/app.component.css create mode 100644 datetimepicker/overview/src/app/app.component.html create mode 100644 datetimepicker/overview/src/app/app.component.ts create mode 100644 datetimepicker/overview/src/app/app.module.ts create mode 100644 datetimepicker/overview/src/app/main.ts create mode 100644 datetimepicker/overview/src/assets/fonts.css create mode 100644 datetimepicker/overview/src/assets/styles.css create mode 100644 datetimepicker/overview/src/index.html create mode 100644 datetimepicker/overview/src/main.ts create mode 100644 datetimepicker/overview/src/polyfills.ts create mode 100644 datetimepicker/overview/src/tsconfig.app.json create mode 100644 datetimepicker/overview/src/tsconfig.json create mode 100644 datetimepicker/right-to-left/angular.json create mode 100644 datetimepicker/right-to-left/package.json create mode 100644 datetimepicker/right-to-left/src/app/app.component.css create mode 100644 datetimepicker/right-to-left/src/app/app.component.html create mode 100644 datetimepicker/right-to-left/src/app/app.component.ts create mode 100644 datetimepicker/right-to-left/src/app/app.module.ts create mode 100644 datetimepicker/right-to-left/src/app/main.ts create mode 100644 datetimepicker/right-to-left/src/assets/fonts.css create mode 100644 datetimepicker/right-to-left/src/assets/styles.css create mode 100644 datetimepicker/right-to-left/src/index.html create mode 100644 datetimepicker/right-to-left/src/main.ts create mode 100644 datetimepicker/right-to-left/src/polyfills.ts create mode 100644 datetimepicker/right-to-left/src/tsconfig.app.json create mode 100644 datetimepicker/right-to-left/src/tsconfig.json create mode 100644 datetimepicker/test/angular.json create mode 100644 datetimepicker/test/package.json create mode 100644 datetimepicker/test/src/app/app.component.css create mode 100644 datetimepicker/test/src/app/app.component.html create mode 100644 datetimepicker/test/src/app/app.component.ts create mode 100644 datetimepicker/test/src/app/app.module.ts create mode 100644 datetimepicker/test/src/app/main.ts create mode 100644 datetimepicker/test/src/assets/fonts.css create mode 100644 datetimepicker/test/src/assets/styles.css create mode 100644 datetimepicker/test/src/index.html create mode 100644 datetimepicker/test/src/main.ts create mode 100644 datetimepicker/test/src/polyfills.ts create mode 100644 datetimepicker/test/src/tsconfig.app.json create mode 100644 datetimepicker/test/src/tsconfig.json create mode 100644 datetimepicker/time-zones/angular.json create mode 100644 datetimepicker/time-zones/package.json create mode 100644 datetimepicker/time-zones/src/app/app.component.css create mode 100644 datetimepicker/time-zones/src/app/app.component.html create mode 100644 datetimepicker/time-zones/src/app/app.component.ts create mode 100644 datetimepicker/time-zones/src/app/app.module.ts create mode 100644 datetimepicker/time-zones/src/app/main.ts create mode 100644 datetimepicker/time-zones/src/assets/fonts.css create mode 100644 datetimepicker/time-zones/src/assets/styles.css create mode 100644 datetimepicker/time-zones/src/index.html create mode 100644 datetimepicker/time-zones/src/main.ts create mode 100644 datetimepicker/time-zones/src/polyfills.ts create mode 100644 datetimepicker/time-zones/src/tsconfig.app.json create mode 100644 datetimepicker/time-zones/src/tsconfig.json create mode 100644 docking-layout/auto-hide-item/angular.json create mode 100644 docking-layout/auto-hide-item/package.json create mode 100644 docking-layout/auto-hide-item/src/app/app.component.css create mode 100644 docking-layout/auto-hide-item/src/app/app.component.html create mode 100644 docking-layout/auto-hide-item/src/app/app.component.ts create mode 100644 docking-layout/auto-hide-item/src/app/app.module.ts create mode 100644 docking-layout/auto-hide-item/src/app/main.ts create mode 100644 docking-layout/auto-hide-item/src/assets/fonts.css create mode 100644 docking-layout/auto-hide-item/src/assets/styles.css create mode 100644 docking-layout/auto-hide-item/src/index.html create mode 100644 docking-layout/auto-hide-item/src/main.ts create mode 100644 docking-layout/auto-hide-item/src/polyfills.ts create mode 100644 docking-layout/auto-hide-item/src/tsconfig.app.json create mode 100644 docking-layout/auto-hide-item/src/tsconfig.json create mode 100644 docking-layout/auto-save-load/angular.json create mode 100644 docking-layout/auto-save-load/package.json create mode 100644 docking-layout/auto-save-load/src/app/app.component.css create mode 100644 docking-layout/auto-save-load/src/app/app.component.html create mode 100644 docking-layout/auto-save-load/src/app/app.component.ts create mode 100644 docking-layout/auto-save-load/src/app/app.module.ts create mode 100644 docking-layout/auto-save-load/src/app/main.ts create mode 100644 docking-layout/auto-save-load/src/assets/fonts.css create mode 100644 docking-layout/auto-save-load/src/assets/styles.css create mode 100644 docking-layout/auto-save-load/src/index.html create mode 100644 docking-layout/auto-save-load/src/main.ts create mode 100644 docking-layout/auto-save-load/src/polyfills.ts create mode 100644 docking-layout/auto-save-load/src/tsconfig.app.json create mode 100644 docking-layout/auto-save-load/src/tsconfig.json create mode 100644 docking-layout/drop-position/angular.json create mode 100644 docking-layout/drop-position/package.json create mode 100644 docking-layout/drop-position/src/app/app.component.css create mode 100644 docking-layout/drop-position/src/app/app.component.html create mode 100644 docking-layout/drop-position/src/app/app.component.ts create mode 100644 docking-layout/drop-position/src/app/app.module.ts create mode 100644 docking-layout/drop-position/src/app/main.ts create mode 100644 docking-layout/drop-position/src/assets/fonts.css create mode 100644 docking-layout/drop-position/src/assets/styles.css create mode 100644 docking-layout/drop-position/src/index.html create mode 100644 docking-layout/drop-position/src/main.ts create mode 100644 docking-layout/drop-position/src/polyfills.ts create mode 100644 docking-layout/drop-position/src/tsconfig.app.json create mode 100644 docking-layout/drop-position/src/tsconfig.json create mode 100644 docking-layout/insert-before-after-item/angular.json create mode 100644 docking-layout/insert-before-after-item/package.json create mode 100644 docking-layout/insert-before-after-item/src/app/app.component.css create mode 100644 docking-layout/insert-before-after-item/src/app/app.component.html create mode 100644 docking-layout/insert-before-after-item/src/app/app.component.ts create mode 100644 docking-layout/insert-before-after-item/src/app/app.module.ts create mode 100644 docking-layout/insert-before-after-item/src/app/main.ts create mode 100644 docking-layout/insert-before-after-item/src/assets/fonts.css create mode 100644 docking-layout/insert-before-after-item/src/assets/styles.css create mode 100644 docking-layout/insert-before-after-item/src/index.html create mode 100644 docking-layout/insert-before-after-item/src/main.ts create mode 100644 docking-layout/insert-before-after-item/src/polyfills.ts create mode 100644 docking-layout/insert-before-after-item/src/tsconfig.app.json create mode 100644 docking-layout/insert-before-after-item/src/tsconfig.json create mode 100644 docking-layout/insert-into-item/angular.json create mode 100644 docking-layout/insert-into-item/package.json create mode 100644 docking-layout/insert-into-item/src/app/app.component.css create mode 100644 docking-layout/insert-into-item/src/app/app.component.html create mode 100644 docking-layout/insert-into-item/src/app/app.component.ts create mode 100644 docking-layout/insert-into-item/src/app/app.module.ts create mode 100644 docking-layout/insert-into-item/src/app/main.ts create mode 100644 docking-layout/insert-into-item/src/assets/fonts.css create mode 100644 docking-layout/insert-into-item/src/assets/styles.css create mode 100644 docking-layout/insert-into-item/src/index.html create mode 100644 docking-layout/insert-into-item/src/main.ts create mode 100644 docking-layout/insert-into-item/src/polyfills.ts create mode 100644 docking-layout/insert-into-item/src/tsconfig.app.json create mode 100644 docking-layout/insert-into-item/src/tsconfig.json create mode 100644 docking-layout/insert-outside-target-group/angular.json create mode 100644 docking-layout/insert-outside-target-group/package.json create mode 100644 docking-layout/insert-outside-target-group/src/app/app.component.css create mode 100644 docking-layout/insert-outside-target-group/src/app/app.component.html create mode 100644 docking-layout/insert-outside-target-group/src/app/app.component.ts create mode 100644 docking-layout/insert-outside-target-group/src/app/app.module.ts create mode 100644 docking-layout/insert-outside-target-group/src/app/main.ts create mode 100644 docking-layout/insert-outside-target-group/src/assets/fonts.css create mode 100644 docking-layout/insert-outside-target-group/src/assets/styles.css create mode 100644 docking-layout/insert-outside-target-group/src/index.html create mode 100644 docking-layout/insert-outside-target-group/src/main.ts create mode 100644 docking-layout/insert-outside-target-group/src/polyfills.ts create mode 100644 docking-layout/insert-outside-target-group/src/tsconfig.app.json create mode 100644 docking-layout/insert-outside-target-group/src/tsconfig.json create mode 100644 docking-layout/insert-top-level-item/angular.json create mode 100644 docking-layout/insert-top-level-item/package.json create mode 100644 docking-layout/insert-top-level-item/src/app/app.component.css create mode 100644 docking-layout/insert-top-level-item/src/app/app.component.html create mode 100644 docking-layout/insert-top-level-item/src/app/app.component.ts create mode 100644 docking-layout/insert-top-level-item/src/app/app.module.ts create mode 100644 docking-layout/insert-top-level-item/src/app/main.ts create mode 100644 docking-layout/insert-top-level-item/src/assets/fonts.css create mode 100644 docking-layout/insert-top-level-item/src/assets/styles.css create mode 100644 docking-layout/insert-top-level-item/src/index.html create mode 100644 docking-layout/insert-top-level-item/src/main.ts create mode 100644 docking-layout/insert-top-level-item/src/polyfills.ts create mode 100644 docking-layout/insert-top-level-item/src/tsconfig.app.json create mode 100644 docking-layout/insert-top-level-item/src/tsconfig.json create mode 100644 docking-layout/inside-window/angular.json create mode 100644 docking-layout/inside-window/package.json create mode 100644 docking-layout/inside-window/src/app/app.component.css create mode 100644 docking-layout/inside-window/src/app/app.component.html create mode 100644 docking-layout/inside-window/src/app/app.component.ts create mode 100644 docking-layout/inside-window/src/app/app.module.ts create mode 100644 docking-layout/inside-window/src/app/main.ts create mode 100644 docking-layout/inside-window/src/assets/fonts.css create mode 100644 docking-layout/inside-window/src/assets/styles.css create mode 100644 docking-layout/inside-window/src/index.html create mode 100644 docking-layout/inside-window/src/main.ts create mode 100644 docking-layout/inside-window/src/polyfills.ts create mode 100644 docking-layout/inside-window/src/tsconfig.app.json create mode 100644 docking-layout/inside-window/src/tsconfig.json create mode 100644 docking-layout/item-dock-undock/angular.json create mode 100644 docking-layout/item-dock-undock/package.json create mode 100644 docking-layout/item-dock-undock/src/app/app.component.css create mode 100644 docking-layout/item-dock-undock/src/app/app.component.html create mode 100644 docking-layout/item-dock-undock/src/app/app.component.ts create mode 100644 docking-layout/item-dock-undock/src/app/app.module.ts create mode 100644 docking-layout/item-dock-undock/src/app/main.ts create mode 100644 docking-layout/item-dock-undock/src/assets/fonts.css create mode 100644 docking-layout/item-dock-undock/src/assets/styles.css create mode 100644 docking-layout/item-dock-undock/src/index.html create mode 100644 docking-layout/item-dock-undock/src/main.ts create mode 100644 docking-layout/item-dock-undock/src/polyfills.ts create mode 100644 docking-layout/item-dock-undock/src/tsconfig.app.json create mode 100644 docking-layout/item-dock-undock/src/tsconfig.json create mode 100644 docking-layout/layout-item-group/angular.json create mode 100644 docking-layout/layout-item-group/package.json create mode 100644 docking-layout/layout-item-group/src/app/app.component.css create mode 100644 docking-layout/layout-item-group/src/app/app.component.html create mode 100644 docking-layout/layout-item-group/src/app/app.component.ts create mode 100644 docking-layout/layout-item-group/src/app/app.module.ts create mode 100644 docking-layout/layout-item-group/src/app/main.ts create mode 100644 docking-layout/layout-item-group/src/assets/fonts.css create mode 100644 docking-layout/layout-item-group/src/assets/styles.css create mode 100644 docking-layout/layout-item-group/src/index.html create mode 100644 docking-layout/layout-item-group/src/main.ts create mode 100644 docking-layout/layout-item-group/src/polyfills.ts create mode 100644 docking-layout/layout-item-group/src/tsconfig.app.json create mode 100644 docking-layout/layout-item-group/src/tsconfig.json create mode 100644 docking-layout/layout-item/angular.json create mode 100644 docking-layout/layout-item/package.json create mode 100644 docking-layout/layout-item/src/app/app.component.css create mode 100644 docking-layout/layout-item/src/app/app.component.html create mode 100644 docking-layout/layout-item/src/app/app.component.ts create mode 100644 docking-layout/layout-item/src/app/app.module.ts create mode 100644 docking-layout/layout-item/src/app/main.ts create mode 100644 docking-layout/layout-item/src/assets/fonts.css create mode 100644 docking-layout/layout-item/src/assets/styles.css create mode 100644 docking-layout/layout-item/src/index.html create mode 100644 docking-layout/layout-item/src/main.ts create mode 100644 docking-layout/layout-item/src/polyfills.ts create mode 100644 docking-layout/layout-item/src/tsconfig.app.json create mode 100644 docking-layout/layout-item/src/tsconfig.json create mode 100644 docking-layout/overview/angular.json create mode 100644 docking-layout/overview/package.json create mode 100644 docking-layout/overview/src/app/app.component.css create mode 100644 docking-layout/overview/src/app/app.component.html create mode 100644 docking-layout/overview/src/app/app.component.ts create mode 100644 docking-layout/overview/src/app/app.module.ts create mode 100644 docking-layout/overview/src/app/main.ts create mode 100644 docking-layout/overview/src/assets/fonts.css create mode 100644 docking-layout/overview/src/assets/styles.css create mode 100644 docking-layout/overview/src/index.html create mode 100644 docking-layout/overview/src/main.ts create mode 100644 docking-layout/overview/src/polyfills.ts create mode 100644 docking-layout/overview/src/tsconfig.app.json create mode 100644 docking-layout/overview/src/tsconfig.json create mode 100644 docking-layout/remove-item/angular.json create mode 100644 docking-layout/remove-item/package.json create mode 100644 docking-layout/remove-item/src/app/app.component.css create mode 100644 docking-layout/remove-item/src/app/app.component.html create mode 100644 docking-layout/remove-item/src/app/app.component.ts create mode 100644 docking-layout/remove-item/src/app/app.module.ts create mode 100644 docking-layout/remove-item/src/app/main.ts create mode 100644 docking-layout/remove-item/src/assets/fonts.css create mode 100644 docking-layout/remove-item/src/assets/styles.css create mode 100644 docking-layout/remove-item/src/index.html create mode 100644 docking-layout/remove-item/src/main.ts create mode 100644 docking-layout/remove-item/src/polyfills.ts create mode 100644 docking-layout/remove-item/src/tsconfig.app.json create mode 100644 docking-layout/remove-item/src/tsconfig.json create mode 100644 docking-layout/right-to-left/angular.json create mode 100644 docking-layout/right-to-left/package.json create mode 100644 docking-layout/right-to-left/src/app/app.component.css create mode 100644 docking-layout/right-to-left/src/app/app.component.html create mode 100644 docking-layout/right-to-left/src/app/app.component.ts create mode 100644 docking-layout/right-to-left/src/app/app.module.ts create mode 100644 docking-layout/right-to-left/src/app/main.ts create mode 100644 docking-layout/right-to-left/src/assets/fonts.css create mode 100644 docking-layout/right-to-left/src/assets/styles.css create mode 100644 docking-layout/right-to-left/src/index.html create mode 100644 docking-layout/right-to-left/src/main.ts create mode 100644 docking-layout/right-to-left/src/polyfills.ts create mode 100644 docking-layout/right-to-left/src/tsconfig.app.json create mode 100644 docking-layout/right-to-left/src/tsconfig.json create mode 100644 docking-layout/snap-modes/angular.json create mode 100644 docking-layout/snap-modes/package.json create mode 100644 docking-layout/snap-modes/src/app/app.component.css create mode 100644 docking-layout/snap-modes/src/app/app.component.html create mode 100644 docking-layout/snap-modes/src/app/app.component.ts create mode 100644 docking-layout/snap-modes/src/app/app.module.ts create mode 100644 docking-layout/snap-modes/src/app/main.ts create mode 100644 docking-layout/snap-modes/src/assets/fonts.css create mode 100644 docking-layout/snap-modes/src/assets/styles.css create mode 100644 docking-layout/snap-modes/src/index.html create mode 100644 docking-layout/snap-modes/src/main.ts create mode 100644 docking-layout/snap-modes/src/polyfills.ts create mode 100644 docking-layout/snap-modes/src/tsconfig.app.json create mode 100644 docking-layout/snap-modes/src/tsconfig.json create mode 100644 docking-layout/state/angular.json create mode 100644 docking-layout/state/package.json create mode 100644 docking-layout/state/src/app/app.component.css create mode 100644 docking-layout/state/src/app/app.component.html create mode 100644 docking-layout/state/src/app/app.component.ts create mode 100644 docking-layout/state/src/app/app.module.ts create mode 100644 docking-layout/state/src/app/main.ts create mode 100644 docking-layout/state/src/assets/fonts.css create mode 100644 docking-layout/state/src/assets/styles.css create mode 100644 docking-layout/state/src/index.html create mode 100644 docking-layout/state/src/main.ts create mode 100644 docking-layout/state/src/polyfills.ts create mode 100644 docking-layout/state/src/tsconfig.app.json create mode 100644 docking-layout/state/src/tsconfig.json create mode 100644 docking-layout/update-item/angular.json create mode 100644 docking-layout/update-item/package.json create mode 100644 docking-layout/update-item/src/app/app.component.css create mode 100644 docking-layout/update-item/src/app/app.component.html create mode 100644 docking-layout/update-item/src/app/app.component.ts create mode 100644 docking-layout/update-item/src/app/app.module.ts create mode 100644 docking-layout/update-item/src/app/main.ts create mode 100644 docking-layout/update-item/src/assets/fonts.css create mode 100644 docking-layout/update-item/src/assets/styles.css create mode 100644 docking-layout/update-item/src/index.html create mode 100644 docking-layout/update-item/src/main.ts create mode 100644 docking-layout/update-item/src/polyfills.ts create mode 100644 docking-layout/update-item/src/tsconfig.app.json create mode 100644 docking-layout/update-item/src/tsconfig.json create mode 100644 docking-layout/visual-studio-style/angular.json create mode 100644 docking-layout/visual-studio-style/package.json create mode 100644 docking-layout/visual-studio-style/src/app/app.component.css create mode 100644 docking-layout/visual-studio-style/src/app/app.component.html create mode 100644 docking-layout/visual-studio-style/src/app/app.component.ts create mode 100644 docking-layout/visual-studio-style/src/app/app.module.ts create mode 100644 docking-layout/visual-studio-style/src/app/main.ts create mode 100644 docking-layout/visual-studio-style/src/assets/fonts.css create mode 100644 docking-layout/visual-studio-style/src/assets/styles.css create mode 100644 docking-layout/visual-studio-style/src/index.html create mode 100644 docking-layout/visual-studio-style/src/main.ts create mode 100644 docking-layout/visual-studio-style/src/polyfills.ts create mode 100644 docking-layout/visual-studio-style/src/tsconfig.app.json create mode 100644 docking-layout/visual-studio-style/src/tsconfig.json create mode 100644 dropdownbutton/auto-height/angular.json create mode 100644 dropdownbutton/auto-height/package.json create mode 100644 dropdownbutton/auto-height/src/app/app.component.css create mode 100644 dropdownbutton/auto-height/src/app/app.component.html create mode 100644 dropdownbutton/auto-height/src/app/app.component.ts create mode 100644 dropdownbutton/auto-height/src/app/app.module.ts create mode 100644 dropdownbutton/auto-height/src/app/main.ts create mode 100644 dropdownbutton/auto-height/src/assets/fonts.css create mode 100644 dropdownbutton/auto-height/src/assets/styles.css create mode 100644 dropdownbutton/auto-height/src/index.html create mode 100644 dropdownbutton/auto-height/src/main.ts create mode 100644 dropdownbutton/auto-height/src/polyfills.ts create mode 100644 dropdownbutton/auto-height/src/tsconfig.app.json create mode 100644 dropdownbutton/auto-height/src/tsconfig.json create mode 100644 dropdownbutton/automatic-positioning/angular.json create mode 100644 dropdownbutton/automatic-positioning/package.json create mode 100644 dropdownbutton/automatic-positioning/src/app/app.component.css create mode 100644 dropdownbutton/automatic-positioning/src/app/app.component.html create mode 100644 dropdownbutton/automatic-positioning/src/app/app.component.ts create mode 100644 dropdownbutton/automatic-positioning/src/app/app.module.ts create mode 100644 dropdownbutton/automatic-positioning/src/app/main.ts create mode 100644 dropdownbutton/automatic-positioning/src/assets/fonts.css create mode 100644 dropdownbutton/automatic-positioning/src/assets/styles.css create mode 100644 dropdownbutton/automatic-positioning/src/index.html create mode 100644 dropdownbutton/automatic-positioning/src/main.ts create mode 100644 dropdownbutton/automatic-positioning/src/polyfills.ts create mode 100644 dropdownbutton/automatic-positioning/src/tsconfig.app.json create mode 100644 dropdownbutton/automatic-positioning/src/tsconfig.json create mode 100644 dropdownbutton/button-position/angular.json create mode 100644 dropdownbutton/button-position/package.json create mode 100644 dropdownbutton/button-position/src/app/app.component.css create mode 100644 dropdownbutton/button-position/src/app/app.component.html create mode 100644 dropdownbutton/button-position/src/app/app.component.ts create mode 100644 dropdownbutton/button-position/src/app/app.module.ts create mode 100644 dropdownbutton/button-position/src/app/main.ts create mode 100644 dropdownbutton/button-position/src/assets/fonts.css create mode 100644 dropdownbutton/button-position/src/assets/styles.css create mode 100644 dropdownbutton/button-position/src/index.html create mode 100644 dropdownbutton/button-position/src/main.ts create mode 100644 dropdownbutton/button-position/src/polyfills.ts create mode 100644 dropdownbutton/button-position/src/tsconfig.app.json create mode 100644 dropdownbutton/button-position/src/tsconfig.json create mode 100644 dropdownbutton/drop-down-open-modes/angular.json create mode 100644 dropdownbutton/drop-down-open-modes/package.json create mode 100644 dropdownbutton/drop-down-open-modes/src/app/app.component.css create mode 100644 dropdownbutton/drop-down-open-modes/src/app/app.component.html create mode 100644 dropdownbutton/drop-down-open-modes/src/app/app.component.ts create mode 100644 dropdownbutton/drop-down-open-modes/src/app/app.module.ts create mode 100644 dropdownbutton/drop-down-open-modes/src/app/main.ts create mode 100644 dropdownbutton/drop-down-open-modes/src/assets/fonts.css create mode 100644 dropdownbutton/drop-down-open-modes/src/assets/styles.css create mode 100644 dropdownbutton/drop-down-open-modes/src/index.html create mode 100644 dropdownbutton/drop-down-open-modes/src/main.ts create mode 100644 dropdownbutton/drop-down-open-modes/src/polyfills.ts create mode 100644 dropdownbutton/drop-down-open-modes/src/tsconfig.app.json create mode 100644 dropdownbutton/drop-down-open-modes/src/tsconfig.json create mode 100644 dropdownbutton/drop-down-position/angular.json create mode 100644 dropdownbutton/drop-down-position/package.json create mode 100644 dropdownbutton/drop-down-position/src/app/app.component.css create mode 100644 dropdownbutton/drop-down-position/src/app/app.component.html create mode 100644 dropdownbutton/drop-down-position/src/app/app.component.ts create mode 100644 dropdownbutton/drop-down-position/src/app/app.module.ts create mode 100644 dropdownbutton/drop-down-position/src/app/main.ts create mode 100644 dropdownbutton/drop-down-position/src/assets/fonts.css create mode 100644 dropdownbutton/drop-down-position/src/assets/styles.css create mode 100644 dropdownbutton/drop-down-position/src/index.html create mode 100644 dropdownbutton/drop-down-position/src/main.ts create mode 100644 dropdownbutton/drop-down-position/src/polyfills.ts create mode 100644 dropdownbutton/drop-down-position/src/tsconfig.app.json create mode 100644 dropdownbutton/drop-down-position/src/tsconfig.json create mode 100644 dropdownbutton/events/angular.json create mode 100644 dropdownbutton/events/package.json create mode 100644 dropdownbutton/events/src/app/app.component.css create mode 100644 dropdownbutton/events/src/app/app.component.html create mode 100644 dropdownbutton/events/src/app/app.component.ts create mode 100644 dropdownbutton/events/src/app/app.module.ts create mode 100644 dropdownbutton/events/src/app/main.ts create mode 100644 dropdownbutton/events/src/assets/fonts.css create mode 100644 dropdownbutton/events/src/assets/styles.css create mode 100644 dropdownbutton/events/src/index.html create mode 100644 dropdownbutton/events/src/main.ts create mode 100644 dropdownbutton/events/src/polyfills.ts create mode 100644 dropdownbutton/events/src/tsconfig.app.json create mode 100644 dropdownbutton/events/src/tsconfig.json create mode 100644 dropdownbutton/methods/angular.json create mode 100644 dropdownbutton/methods/package.json create mode 100644 dropdownbutton/methods/src/app/app.component.css create mode 100644 dropdownbutton/methods/src/app/app.component.html create mode 100644 dropdownbutton/methods/src/app/app.component.ts create mode 100644 dropdownbutton/methods/src/app/app.module.ts create mode 100644 dropdownbutton/methods/src/app/main.ts create mode 100644 dropdownbutton/methods/src/assets/fonts.css create mode 100644 dropdownbutton/methods/src/assets/styles.css create mode 100644 dropdownbutton/methods/src/index.html create mode 100644 dropdownbutton/methods/src/main.ts create mode 100644 dropdownbutton/methods/src/polyfills.ts create mode 100644 dropdownbutton/methods/src/tsconfig.app.json create mode 100644 dropdownbutton/methods/src/tsconfig.json create mode 100644 dropdownbutton/overview/angular.json create mode 100644 dropdownbutton/overview/package.json create mode 100644 dropdownbutton/overview/src/app/app.component.css create mode 100644 dropdownbutton/overview/src/app/app.component.html create mode 100644 dropdownbutton/overview/src/app/app.component.ts create mode 100644 dropdownbutton/overview/src/app/app.module.ts create mode 100644 dropdownbutton/overview/src/app/main.ts create mode 100644 dropdownbutton/overview/src/assets/fonts.css create mode 100644 dropdownbutton/overview/src/assets/styles.css create mode 100644 dropdownbutton/overview/src/index.html create mode 100644 dropdownbutton/overview/src/main.ts create mode 100644 dropdownbutton/overview/src/polyfills.ts create mode 100644 dropdownbutton/overview/src/tsconfig.app.json create mode 100644 dropdownbutton/overview/src/tsconfig.json create mode 100644 dropdownbutton/render-mode/angular.json create mode 100644 dropdownbutton/render-mode/package.json create mode 100644 dropdownbutton/render-mode/src/app/app.component.css create mode 100644 dropdownbutton/render-mode/src/app/app.component.html create mode 100644 dropdownbutton/render-mode/src/app/app.component.ts create mode 100644 dropdownbutton/render-mode/src/app/app.module.ts create mode 100644 dropdownbutton/render-mode/src/app/main.ts create mode 100644 dropdownbutton/render-mode/src/assets/fonts.css create mode 100644 dropdownbutton/render-mode/src/assets/styles.css create mode 100644 dropdownbutton/render-mode/src/index.html create mode 100644 dropdownbutton/render-mode/src/main.ts create mode 100644 dropdownbutton/render-mode/src/polyfills.ts create mode 100644 dropdownbutton/render-mode/src/tsconfig.app.json create mode 100644 dropdownbutton/render-mode/src/tsconfig.json create mode 100644 dropdownbutton/resizing/angular.json create mode 100644 dropdownbutton/resizing/package.json create mode 100644 dropdownbutton/resizing/src/app/app.component.css create mode 100644 dropdownbutton/resizing/src/app/app.component.html create mode 100644 dropdownbutton/resizing/src/app/app.component.ts create mode 100644 dropdownbutton/resizing/src/app/app.module.ts create mode 100644 dropdownbutton/resizing/src/app/main.ts create mode 100644 dropdownbutton/resizing/src/assets/fonts.css create mode 100644 dropdownbutton/resizing/src/assets/styles.css create mode 100644 dropdownbutton/resizing/src/index.html create mode 100644 dropdownbutton/resizing/src/main.ts create mode 100644 dropdownbutton/resizing/src/polyfills.ts create mode 100644 dropdownbutton/resizing/src/tsconfig.app.json create mode 100644 dropdownbutton/resizing/src/tsconfig.json create mode 100644 dropdownbutton/right-to-left/angular.json create mode 100644 dropdownbutton/right-to-left/package.json create mode 100644 dropdownbutton/right-to-left/src/app/app.component.css create mode 100644 dropdownbutton/right-to-left/src/app/app.component.html create mode 100644 dropdownbutton/right-to-left/src/app/app.component.ts create mode 100644 dropdownbutton/right-to-left/src/app/app.module.ts create mode 100644 dropdownbutton/right-to-left/src/app/main.ts create mode 100644 dropdownbutton/right-to-left/src/assets/fonts.css create mode 100644 dropdownbutton/right-to-left/src/assets/styles.css create mode 100644 dropdownbutton/right-to-left/src/index.html create mode 100644 dropdownbutton/right-to-left/src/main.ts create mode 100644 dropdownbutton/right-to-left/src/polyfills.ts create mode 100644 dropdownbutton/right-to-left/src/tsconfig.app.json create mode 100644 dropdownbutton/right-to-left/src/tsconfig.json create mode 100644 dropdownlist/advanced-selection-display-mode/angular.json create mode 100644 dropdownlist/advanced-selection-display-mode/package.json create mode 100644 dropdownlist/advanced-selection-display-mode/src/app/app.component.css create mode 100644 dropdownlist/advanced-selection-display-mode/src/app/app.component.html create mode 100644 dropdownlist/advanced-selection-display-mode/src/app/app.component.ts create mode 100644 dropdownlist/advanced-selection-display-mode/src/app/app.module.ts create mode 100644 dropdownlist/advanced-selection-display-mode/src/app/main.ts create mode 100644 dropdownlist/advanced-selection-display-mode/src/assets/fonts.css create mode 100644 dropdownlist/advanced-selection-display-mode/src/assets/styles.css create mode 100644 dropdownlist/advanced-selection-display-mode/src/index.html create mode 100644 dropdownlist/advanced-selection-display-mode/src/main.ts create mode 100644 dropdownlist/advanced-selection-display-mode/src/polyfills.ts create mode 100644 dropdownlist/advanced-selection-display-mode/src/tsconfig.app.json create mode 100644 dropdownlist/advanced-selection-display-mode/src/tsconfig.json create mode 100644 dropdownlist/auto-complete/angular.json create mode 100644 dropdownlist/auto-complete/package.json create mode 100644 dropdownlist/auto-complete/src/app/app.component.css create mode 100644 dropdownlist/auto-complete/src/app/app.component.html create mode 100644 dropdownlist/auto-complete/src/app/app.component.ts create mode 100644 dropdownlist/auto-complete/src/app/app.module.ts create mode 100644 dropdownlist/auto-complete/src/app/main.ts create mode 100644 dropdownlist/auto-complete/src/assets/fonts.css create mode 100644 dropdownlist/auto-complete/src/assets/styles.css create mode 100644 dropdownlist/auto-complete/src/index.html create mode 100644 dropdownlist/auto-complete/src/main.ts create mode 100644 dropdownlist/auto-complete/src/polyfills.ts create mode 100644 dropdownlist/auto-complete/src/tsconfig.app.json create mode 100644 dropdownlist/auto-complete/src/tsconfig.json create mode 100644 dropdownlist/auto-height/angular.json create mode 100644 dropdownlist/auto-height/package.json create mode 100644 dropdownlist/auto-height/src/index.html create mode 100644 dropdownlist/auto-height/src/main.ts create mode 100644 dropdownlist/auto-height/src/polyfills.ts create mode 100644 dropdownlist/auto-height/src/tsconfig.app.json create mode 100644 dropdownlist/auto-height/src/tsconfig.json diff --git a/colorpicker/color-editing/angular.json b/colorpicker/color-editing/angular.json new file mode 100644 index 000000000..ee9deee80 --- /dev/null +++ b/colorpicker/color-editing/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/color-editing/package.json b/colorpicker/color-editing/package.json new file mode 100644 index 000000000..69002f9c6 --- /dev/null +++ b/colorpicker/color-editing/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-colorpicker-color-editing", + "description": "Angular colorpicker color-editing example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/color-editing/src/app/app.component.css b/colorpicker/color-editing/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/colorpicker/color-editing/src/app/app.component.html b/colorpicker/color-editing/src/app/app.component.html new file mode 100644 index 000000000..1031d19fb --- /dev/null +++ b/colorpicker/color-editing/src/app/app.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/colorpicker/color-editing/src/app/app.component.ts b/colorpicker/color-editing/src/app/app.component.ts new file mode 100644 index 000000000..5689cdc28 --- /dev/null +++ b/colorpicker/color-editing/src/app/app.component.ts @@ -0,0 +1,30 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; + +import { ColorPickerComponent } from '@smart-webcomponents-angular/colorpicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/colorpicker/color-editing/src/app/app.module.ts b/colorpicker/color-editing/src/app/app.module.ts new file mode 100644 index 000000000..ba404a961 --- /dev/null +++ b/colorpicker/color-editing/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ColorPickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/color-editing/src/app/main.ts b/colorpicker/color-editing/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/color-editing/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/color-editing/src/assets/fonts.css b/colorpicker/color-editing/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/color-editing/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/color-editing/src/assets/styles.css b/colorpicker/color-editing/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/color-editing/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/color-editing/src/index.html b/colorpicker/color-editing/src/index.html new file mode 100644 index 000000000..eaf177ee9 --- /dev/null +++ b/colorpicker/color-editing/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Color-editing + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/color-editing/src/main.ts b/colorpicker/color-editing/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/color-editing/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/color-editing/src/polyfills.ts b/colorpicker/color-editing/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/color-editing/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/color-editing/src/tsconfig.app.json b/colorpicker/color-editing/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/color-editing/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/color-editing/src/tsconfig.json b/colorpicker/color-editing/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/color-editing/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-default/angular.json b/colorpicker/display-mode-default/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/display-mode-default/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-default/package.json b/colorpicker/display-mode-default/package.json new file mode 100644 index 000000000..114d4664f --- /dev/null +++ b/colorpicker/display-mode-default/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-display-mode-default", + "description": "Angular colorpicker display-mode-default example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-default/src/app/app.component.css b/colorpicker/display-mode-default/src/app/app.component.css new file mode 100644 index 000000000..ce52396b3 --- /dev/null +++ b/colorpicker/display-mode-default/src/app/app.component.css @@ -0,0 +1,27 @@ +/* Color Item Size */ + +smart-color-picker.item-size-small { + --smart-color-picker-grid-mode-item-size: 10px; +} + +smart-color-picker.item-size-medium { + --smart-color-picker-grid-mode-item-size: 20px; +} + +smart-color-picker.item-size-large { + --smart-color-picker-grid-mode-item-size: 30px; +} + +/* Column Gap */ + +smart-color-picker.column-gap-small { + --smart-color-picker-grid-mode-columns-gap: 1px; +} + +smart-color-picker.column-gap-medium { + --smart-color-picker-grid-mode-columns-gap: 2.5px; +} + +smart-color-picker.column-gap-large { + --smart-color-picker-grid-mode-columns-gap: 5px; +} diff --git a/colorpicker/display-mode-default/src/app/app.component.html b/colorpicker/display-mode-default/src/app/app.component.html new file mode 100644 index 000000000..0b420cbf4 --- /dev/null +++ b/colorpicker/display-mode-default/src/app/app.component.html @@ -0,0 +1,29 @@ +
This example allows you to customize the Color Picker with its API
+ +
+
+ +
+ 10 +
+ 20 +
+ 30 +
+
+
+ +
+ 1 +
+ 2.5 +
+ 5 +
+
+
+ +
+ Enable Custom Colors +
+
\ No newline at end of file diff --git a/colorpicker/display-mode-default/src/app/app.component.ts b/colorpicker/display-mode-default/src/app/app.component.ts new file mode 100644 index 000000000..527aa9fb3 --- /dev/null +++ b/colorpicker/display-mode-default/src/app/app.component.ts @@ -0,0 +1,80 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; +import { ColorPickerComponent } from '@smart-webcomponents-angular/colorpicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox: CheckBoxComponent; + @ViewChild('colorPicker', { read: ColorPickerComponent, static: false }) colorPicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const that = this, + colorPicker = that.colorPicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const radioButton: RadioButton = event.target as RadioButton; + const checkBox: CheckBox = event.target as CheckBox; + const input: HTMLInputElement = event.target as HTMLInputElement; + + //Set new Grid Item size + if (radioButton && radioButton.groupName === 'gridSettings' || + radioButton && radioButton.groupName === 'gapSettings') { + let size, + className = radioButton.groupName === 'gridSettings' ? 'item-size' : 'column-gap'; + + switch (radioButton.innerHTML) { + case '10': + case '1': + size = 'small'; + break; + case '20': + case '2.5': + size = 'medium'; + break; + case '30': + case '5': + size = 'large'; + break; + } + + //Remove the oldClass + const classes = colorPicker.nativeElement.classList; + + for (let i = 0; i < classes.length; i++) { + if (classes[i].indexOf(className) > -1) { + colorPicker.nativeElement.classList.remove(colorPicker.nativeElement.classList.item(i)); + } + } + colorPicker.nativeElement.classList.add(className + '-' + size); + return; + } + + if (checkBox && checkBox.id === 'enableCustomColors') { + colorPicker.enableCustomColors = checkBox.checked; + return; + } + }); + + + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-default/src/app/app.module.ts b/colorpicker/display-mode-default/src/app/app.module.ts new file mode 100644 index 000000000..2c9eb0b44 --- /dev/null +++ b/colorpicker/display-mode-default/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, RadioButtonModule, ColorPickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-default/src/app/main.ts b/colorpicker/display-mode-default/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-default/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-default/src/assets/fonts.css b/colorpicker/display-mode-default/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-default/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-default/src/assets/styles.css b/colorpicker/display-mode-default/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-default/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-default/src/index.html b/colorpicker/display-mode-default/src/index.html new file mode 100644 index 000000000..62616e37e --- /dev/null +++ b/colorpicker/display-mode-default/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-default + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-default/src/main.ts b/colorpicker/display-mode-default/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-default/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-default/src/polyfills.ts b/colorpicker/display-mode-default/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-default/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-default/src/tsconfig.app.json b/colorpicker/display-mode-default/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-default/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-default/src/tsconfig.json b/colorpicker/display-mode-default/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-default/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-grid/angular.json b/colorpicker/display-mode-grid/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/display-mode-grid/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-grid/package.json b/colorpicker/display-mode-grid/package.json new file mode 100644 index 000000000..ed5ba3afa --- /dev/null +++ b/colorpicker/display-mode-grid/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-display-mode-grid", + "description": "Angular colorpicker display-mode-grid example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-grid/src/app/app.component.css b/colorpicker/display-mode-grid/src/app/app.component.css new file mode 100644 index 000000000..e906696da --- /dev/null +++ b/colorpicker/display-mode-grid/src/app/app.component.css @@ -0,0 +1,18 @@ +/* Colun Count */ + +smart-color-picker.column-count-small { + --smart-color-picker-grid-mode-column-count: 4; +} + +smart-color-picker.column-count-medium { + --smart-color-picker-grid-mode-column-count: 8; +} + +smart-color-picker.column-count-large { + --smart-color-picker-grid-mode-column-count: 14; +} + +/*smart-color-picker { + display: inline-block; + +}*/ \ No newline at end of file diff --git a/colorpicker/display-mode-grid/src/app/app.component.html b/colorpicker/display-mode-grid/src/app/app.component.html new file mode 100644 index 000000000..1127120e9 --- /dev/null +++ b/colorpicker/display-mode-grid/src/app/app.component.html @@ -0,0 +1,35 @@ +
This example demonstrates the "grid" display mode of the Color Picker.
+ +
+
+

ApplyValueMode

+ instantly + useButtons +
+
+
Select Grid Column Count
+ 4 + 8 + 14 +
+
+
+
Palette
+ default +
+ gray +
+ red +
+ green +
+ blue +
+ custom +
+
+
+
Enable/Disable Custom Colors
+ Enable Custom Colors +
+
\ No newline at end of file diff --git a/colorpicker/display-mode-grid/src/app/app.component.ts b/colorpicker/display-mode-grid/src/app/app.component.ts new file mode 100644 index 000000000..77df1f902 --- /dev/null +++ b/colorpicker/display-mode-grid/src/app/app.component.ts @@ -0,0 +1,104 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerComponent, ColorPalette, ColorApplyValueMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox: CheckBoxComponent; + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton: RadioButtonComponent; + @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2: RadioButtonComponent; + @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3: RadioButtonComponent; + @ViewChild('radiobutton4', { read: RadioButtonComponent, static: false }) radiobutton4: RadioButtonComponent; + @ViewChild('radiobutton5', { read: RadioButtonComponent, static: false }) radiobutton5: RadioButtonComponent; + @ViewChild('radiobutton6', { read: RadioButtonComponent, static: false }) radiobutton6: RadioButtonComponent; + @ViewChild('radiobutton7', { read: RadioButtonComponent, static: false }) radiobutton7: RadioButtonComponent; + @ViewChild('radiobutton8', { read: RadioButtonComponent, static: false }) radiobutton8: RadioButtonComponent; + @ViewChild('radiobutton9', { read: RadioButtonComponent, static: false }) radiobutton9: RadioButtonComponent; + @ViewChild('radiobutton10', { read: RadioButtonComponent, static: false }) radiobutton10: RadioButtonComponent; + @ViewChild('radiobutton11', { read: RadioButtonComponent, static: false }) radiobutton11: RadioButtonComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + colorPicker = that.colorpicker; + + //Palette Colors for pallette = 'custom' + colorPicker.paletteColors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000']; + + //Pre-set Palette Custom Colors ( User selected colors ) + colorPicker.paletteCustomColors = ['#808080', '#ffd8b1', '#aaffc3']; + + that.options.nativeElement.addEventListener('change', function (event) { + const radioButton: RadioButton = event.target as RadioButton; + const checkBox: CheckBox = event.target as CheckBox; + + //Set new Grid Item size + if (radioButton.groupName === 'columnSettings') { + let size, + className = 'column-count'; + + switch (radioButton.innerHTML) { + case '4': + size = 'small'; + break; + case '8': + size = 'medium'; + break; + case '14': + size = 'large'; + break; + } + //Remove the oldClass + const classes = colorPicker.nativeElement.classList; + + for (let i = 0; i < classes.length; i++) { + if (classes[i].indexOf(className) > -1) { + classes.remove(classes.item(i)); + } + } + + classes.add(className + '-' + size); + return; + } + + //Set new Grid Item size + if (radioButton && radioButton.groupName === 'columnSettings') { + colorPicker.columnCount = parseInt(radioButton.innerHTML); + return; + } + if (radioButton && radioButton.groupName === 'palette') { + colorPicker.palette = radioButton.innerHTML as ColorPalette; + return; + } + //Set new Grid Item size + if (radioButton && radioButton.groupName === 'applyValueMode') { + colorPicker.applyValueMode = radioButton.innerHTML as ColorApplyValueMode; + return; + } + if (checkBox && checkBox.id === 'enableCustomColors') { + colorPicker.enableCustomColors = checkBox.checked; + return; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-grid/src/app/app.module.ts b/colorpicker/display-mode-grid/src/app/app.module.ts new file mode 100644 index 000000000..d193b4c0d --- /dev/null +++ b/colorpicker/display-mode-grid/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-grid/src/app/main.ts b/colorpicker/display-mode-grid/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-grid/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-grid/src/assets/fonts.css b/colorpicker/display-mode-grid/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-grid/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-grid/src/assets/styles.css b/colorpicker/display-mode-grid/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-grid/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-grid/src/index.html b/colorpicker/display-mode-grid/src/index.html new file mode 100644 index 000000000..6163d64d5 --- /dev/null +++ b/colorpicker/display-mode-grid/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-grid + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-grid/src/main.ts b/colorpicker/display-mode-grid/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-grid/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-grid/src/polyfills.ts b/colorpicker/display-mode-grid/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-grid/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-grid/src/tsconfig.app.json b/colorpicker/display-mode-grid/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-grid/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-grid/src/tsconfig.json b/colorpicker/display-mode-grid/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-grid/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-hexagonal/angular.json b/colorpicker/display-mode-hexagonal/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-hexagonal/package.json b/colorpicker/display-mode-hexagonal/package.json new file mode 100644 index 000000000..32cbec9fe --- /dev/null +++ b/colorpicker/display-mode-hexagonal/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-display-mode-hexagonal", + "description": "Angular colorpicker display-mode-hexagonal example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-hexagonal/src/app/app.component.css b/colorpicker/display-mode-hexagonal/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/colorpicker/display-mode-hexagonal/src/app/app.component.html b/colorpicker/display-mode-hexagonal/src/app/app.component.html new file mode 100644 index 000000000..243a07059 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/app/app.component.html @@ -0,0 +1,36 @@ +
This example demonstrates the "hexagonal" display mode of the Color Picker.
+ +
+
+
Column Count
+ 4 +
+ 8 +
+ 14 +
+
+
+
ApplyValueMode
+ instantly +
+ useButtons +
+
+
+

Palette

+ default +
+ gray +
+ red +
+ green +
+ blue +
+
+
+ Inverted +
+
\ No newline at end of file diff --git a/colorpicker/display-mode-hexagonal/src/app/app.component.ts b/colorpicker/display-mode-hexagonal/src/app/app.component.ts new file mode 100644 index 000000000..8e8de5f37 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/app/app.component.ts @@ -0,0 +1,59 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerComponent, ColorPalette, ColorApplyValueMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox: CheckBoxComponent; + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + colorPicker = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const radioButton: RadioButton = event.target as RadioButton; + const checkBox: CheckBox = event.target as CheckBox; + const input: HTMLInputElement = event.target as HTMLInputElement; + + if (radioButton.groupName === 'columnSettings') { + colorPicker.columnCount = parseInt(radioButton.innerHTML); + return; + } + if (checkBox && checkBox.id === 'inverted') { + colorPicker.inverted = checkBox.checked; + return; + } + //Set ApplyValueMode and Palette + if (radioButton.groupName === 'applyValueMode') { + colorPicker.applyValueMode = radioButton.innerHTML as ColorApplyValueMode; + } + + //Set ApplyValueMode and Palette + if (radioButton && radioButton.groupName === 'palette') { + colorPicker.palette = radioButton.innerHTML as ColorPalette; + return; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-hexagonal/src/app/app.module.ts b/colorpicker/display-mode-hexagonal/src/app/app.module.ts new file mode 100644 index 000000000..d193b4c0d --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-hexagonal/src/app/main.ts b/colorpicker/display-mode-hexagonal/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-hexagonal/src/assets/fonts.css b/colorpicker/display-mode-hexagonal/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-hexagonal/src/assets/styles.css b/colorpicker/display-mode-hexagonal/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-hexagonal/src/index.html b/colorpicker/display-mode-hexagonal/src/index.html new file mode 100644 index 000000000..efe5cfd52 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-hexagonal + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-hexagonal/src/main.ts b/colorpicker/display-mode-hexagonal/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-hexagonal/src/polyfills.ts b/colorpicker/display-mode-hexagonal/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-hexagonal/src/tsconfig.app.json b/colorpicker/display-mode-hexagonal/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-hexagonal/src/tsconfig.json b/colorpicker/display-mode-hexagonal/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-hexagonal/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-material-grid/angular.json b/colorpicker/display-mode-material-grid/angular.json new file mode 100644 index 000000000..6e37c004a --- /dev/null +++ b/colorpicker/display-mode-material-grid/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-material-grid/package.json b/colorpicker/display-mode-material-grid/package.json new file mode 100644 index 000000000..6a36d28d3 --- /dev/null +++ b/colorpicker/display-mode-material-grid/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-colorpicker-display-mode-material-grid", + "description": "Angular colorpicker display-mode-material-grid example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-material-grid/src/app/app.component.css b/colorpicker/display-mode-material-grid/src/app/app.component.css new file mode 100644 index 000000000..f34591598 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/app/app.component.css @@ -0,0 +1,27 @@ +/* Color Column Size */ + +smart-color-picker.item-size-small { + --smart-color-picker-grid-mode-item-size: 20px; +} + +smart-color-picker.item-size-medium { + --smart-color-picker-grid-mode-item-size: 40px; +} + +smart-color-picker.item-size-large { + --smart-color-picker-grid-mode-item-size: 60px; +} + +/* Column Gap */ + +smart-color-picker.column-gap-small { + --smart-color-picker-grid-mode-columns-gap: 1px; +} + +smart-color-picker.column-gap-medium { + --smart-color-picker-grid-mode-columns-gap: 5px; +} + +smart-color-picker.column-gap-large { + --smart-color-picker-grid-mode-columns-gap: 10px; +} \ No newline at end of file diff --git a/colorpicker/display-mode-material-grid/src/app/app.component.html b/colorpicker/display-mode-material-grid/src/app/app.component.html new file mode 100644 index 000000000..d35d4e654 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/app/app.component.html @@ -0,0 +1,31 @@ +
This example demonstrates the "materialGrid" display mode of the Color + Picker.
+ +
+
+

Toggle Grid Color Size

+
+ 20 +
+ 40 +
+ 60 +
+
+
+

Toggle Grid Column Gap

+
+ 1 +
+ 5 +
+ 10 +
+
+
+

Apply Value Mode

+ instantly +
+ useButtons +
+
\ No newline at end of file diff --git a/colorpicker/display-mode-material-grid/src/app/app.component.ts b/colorpicker/display-mode-material-grid/src/app/app.component.ts new file mode 100644 index 000000000..339564335 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/app/app.component.ts @@ -0,0 +1,76 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { ColorPickerComponent, ColorApplyValueMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const that = this, + colorPicker = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const radioButton: RadioButton = event.target as RadioButton; + + //Set new Grid Item size + if (radioButton) { + if (radioButton.groupName === 'columnSize' || radioButton.groupName === 'columnGap') { + let size: string, + className = radioButton.groupName === 'columnSize' ? 'item-size' : 'column-gap'; + + switch (radioButton.innerHTML) { + case '1': + case '20': + size = 'small'; + break; + case '5': + case '40': + size = 'medium'; + break; + case '10': + case '60': + size = 'large'; + break; + } + + //Remove the oldClass + const classes = colorPicker.nativeElement.classList; + + for (let i = 0; i < classes.length; i++) { + if (classes[i].indexOf(className) > -1) { + classes.remove(classes.item(i)); + } + } + classes.add(className + '-' + size); + return; + } + } + //Set ApplyValueMode and Palette + if (radioButton.groupName === 'applyValueMode') { + colorPicker.applyValueMode = radioButton.innerHTML as ColorApplyValueMode; + return; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-material-grid/src/app/app.module.ts b/colorpicker/display-mode-material-grid/src/app/app.module.ts new file mode 100644 index 000000000..d1253b329 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-material-grid/src/app/main.ts b/colorpicker/display-mode-material-grid/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-material-grid/src/assets/fonts.css b/colorpicker/display-mode-material-grid/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-material-grid/src/assets/styles.css b/colorpicker/display-mode-material-grid/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-material-grid/src/index.html b/colorpicker/display-mode-material-grid/src/index.html new file mode 100644 index 000000000..245e3f3ad --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-material-grid + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-material-grid/src/main.ts b/colorpicker/display-mode-material-grid/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-material-grid/src/polyfills.ts b/colorpicker/display-mode-material-grid/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-material-grid/src/tsconfig.app.json b/colorpicker/display-mode-material-grid/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-material-grid/src/tsconfig.json b/colorpicker/display-mode-material-grid/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-material-grid/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-palette/angular.json b/colorpicker/display-mode-palette/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/display-mode-palette/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-palette/package.json b/colorpicker/display-mode-palette/package.json new file mode 100644 index 000000000..0e11f8202 --- /dev/null +++ b/colorpicker/display-mode-palette/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-display-mode-palette", + "description": "Angular colorpicker display-mode-palette example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-palette/src/app/app.component.css b/colorpicker/display-mode-palette/src/app/app.component.css new file mode 100644 index 000000000..1c89b76e9 --- /dev/null +++ b/colorpicker/display-mode-palette/src/app/app.component.css @@ -0,0 +1,26 @@ +smart-slider { + width: 100%; +} + +smart-check-box { + display: block; +} + +#controlsBox { + position: absolute; + padding: 16px; + box-sizing: border-box; + right: 20px; + top: 2%; + width: 550px; + height: 95%; + border: dashed lightgray 1px; + color: gray; + font-size: 20px; + overflow-y: auto; +} + +.smart-drop-down-color-picker { + --smart-drop-down-element-max-height: initial; + --smart-drop-down-element-max-width: initial; +} diff --git a/colorpicker/display-mode-palette/src/app/app.component.html b/colorpicker/display-mode-palette/src/app/app.component.html new file mode 100644 index 000000000..4c9990eac --- /dev/null +++ b/colorpicker/display-mode-palette/src/app/app.component.html @@ -0,0 +1,20 @@ +
This example demonstrates the "palette" display mode of the Color Picker.
+ +
+
+

ApplyValueMode

+ instantly +
+ useButtons +
+
+

Color Editors

+ Hide Preview Container +
+ Hide RGB Editor +
+ Hide HEX Editor +
+ Hide Alpha Editor +
+
\ No newline at end of file diff --git a/colorpicker/display-mode-palette/src/app/app.component.ts b/colorpicker/display-mode-palette/src/app/app.component.ts new file mode 100644 index 000000000..d19668f6d --- /dev/null +++ b/colorpicker/display-mode-palette/src/app/app.component.ts @@ -0,0 +1,50 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerComponent, ColorApplyValueMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const that = this, + colorPanel = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent) { + const radioButton: RadioButton = event.target as RadioButton; + const checkBox: CheckBox = event.target as CheckBox; + + //Set new Grid Item size + if (radioButton && radioButton.groupName === 'applyValueMode') { + colorPanel.applyValueMode = radioButton.innerHTML as ColorApplyValueMode; + return; + } + + if (checkBox.id.indexOf('hide') === 0) { + colorPanel[checkBox.id] = event.detail.value; + return; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-palette/src/app/app.module.ts b/colorpicker/display-mode-palette/src/app/app.module.ts new file mode 100644 index 000000000..d193b4c0d --- /dev/null +++ b/colorpicker/display-mode-palette/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-palette/src/app/main.ts b/colorpicker/display-mode-palette/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-palette/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-palette/src/assets/fonts.css b/colorpicker/display-mode-palette/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-palette/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-palette/src/assets/styles.css b/colorpicker/display-mode-palette/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-palette/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-palette/src/index.html b/colorpicker/display-mode-palette/src/index.html new file mode 100644 index 000000000..811539599 --- /dev/null +++ b/colorpicker/display-mode-palette/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-palette + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-palette/src/main.ts b/colorpicker/display-mode-palette/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-palette/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-palette/src/polyfills.ts b/colorpicker/display-mode-palette/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-palette/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-palette/src/tsconfig.app.json b/colorpicker/display-mode-palette/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-palette/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-palette/src/tsconfig.json b/colorpicker/display-mode-palette/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-palette/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-radial/angular.json b/colorpicker/display-mode-radial/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/display-mode-radial/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-radial/package.json b/colorpicker/display-mode-radial/package.json new file mode 100644 index 000000000..5cbb9560e --- /dev/null +++ b/colorpicker/display-mode-radial/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-display-mode-radial", + "description": "Angular colorpicker display-mode-radial example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-radial/src/app/app.component.css b/colorpicker/display-mode-radial/src/app/app.component.css new file mode 100644 index 000000000..7ac678f1d --- /dev/null +++ b/colorpicker/display-mode-radial/src/app/app.component.css @@ -0,0 +1,4 @@ +smart-color-picker { + --smart-color-picker-palette-size: 200px; + display: inline-block; +} diff --git a/colorpicker/display-mode-radial/src/app/app.component.html b/colorpicker/display-mode-radial/src/app/app.component.html new file mode 100644 index 000000000..1b6beced2 --- /dev/null +++ b/colorpicker/display-mode-radial/src/app/app.component.html @@ -0,0 +1,28 @@ +
This example demonstrates the "radial" display mode of the Color Picker.
+ +
+
Selected color: + +
+
+

ApplyValueMode

+ instantly +
+ useButtons +
+
+
+

Color Editors

+ Hide Preview Container +
+ Hide RGB Editor +
+ Hide HEX Editor +
+ Hide Alpha Editor +
+
+
+ inverted +
+
\ No newline at end of file diff --git a/colorpicker/display-mode-radial/src/app/app.component.ts b/colorpicker/display-mode-radial/src/app/app.component.ts new file mode 100644 index 000000000..aecfa6a34 --- /dev/null +++ b/colorpicker/display-mode-radial/src/app/app.component.ts @@ -0,0 +1,54 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerComponent, ColorApplyValueMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + colorPicker = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const radioButton: RadioButton = event.target as RadioButton; + const checkBox: CheckBox = event.target as CheckBox; + + //Set new Grid Item size + if (radioButton) { + colorPicker.applyValueMode = radioButton.innerHTML as ColorApplyValueMode; + return; + } + + if (checkBox && checkBox.id.indexOf('hide') === 0) { + colorPicker[checkBox.id] = checkBox.checked; + return; + } + + if (checkBox && checkBox.id === 'inverted') { + colorPicker.inverted = event.detail.value; + return; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-radial/src/app/app.module.ts b/colorpicker/display-mode-radial/src/app/app.module.ts new file mode 100644 index 000000000..d193b4c0d --- /dev/null +++ b/colorpicker/display-mode-radial/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-radial/src/app/main.ts b/colorpicker/display-mode-radial/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-radial/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-radial/src/assets/fonts.css b/colorpicker/display-mode-radial/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-radial/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-radial/src/assets/styles.css b/colorpicker/display-mode-radial/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-radial/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-radial/src/index.html b/colorpicker/display-mode-radial/src/index.html new file mode 100644 index 000000000..f934d8182 --- /dev/null +++ b/colorpicker/display-mode-radial/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-radial + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-radial/src/main.ts b/colorpicker/display-mode-radial/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-radial/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-radial/src/polyfills.ts b/colorpicker/display-mode-radial/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-radial/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-radial/src/tsconfig.app.json b/colorpicker/display-mode-radial/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-radial/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-radial/src/tsconfig.json b/colorpicker/display-mode-radial/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-radial/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/display-mode-spectrum-grid/angular.json b/colorpicker/display-mode-spectrum-grid/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/display-mode-spectrum-grid/package.json b/colorpicker/display-mode-spectrum-grid/package.json new file mode 100644 index 000000000..57b553d1c --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-display-mode-spectrum-grid", + "description": "Angular colorpicker display-mode-spectrum-grid example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/display-mode-spectrum-grid/src/app/app.component.css b/colorpicker/display-mode-spectrum-grid/src/app/app.component.css new file mode 100644 index 000000000..d5407787c --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/app/app.component.css @@ -0,0 +1,46 @@ +/* Color Column Count */ + +smart-color-picker.column-count-small { + --smart-color-picker-grid-mode-column-count: 5; +} + +smart-color-picker.column-count-medium { + --smart-color-picker-grid-mode-column-count: 10; +} + +smart-color-picker.column-count-large { + --smart-color-picker-grid-mode-column-count: 15; +} + +/* Color Column Size */ + +smart-color-picker.item-size-small { + --smart-color-picker-grid-mode-item-size: 20px; +} + +smart-color-picker.item-size-medium { + --smart-color-picker-grid-mode-item-size: 40px; +} + +smart-color-picker.item-size-large { + --smart-color-picker-grid-mode-item-size: 60px; +} + +/* Column Gap */ + +smart-color-picker.column-gap-small { + --smart-color-picker-grid-mode-columns-gap: 3px; +} + +smart-color-picker.column-gap-medium { + --smart-color-picker-grid-mode-columns-gap: 6px; +} + +smart-color-picker.column-gap-large { + --smart-color-picker-grid-mode-columns-gap: 9px; +} + +smart-color-picker { + --smart-color-picker-grid-mode-columns-gap: 3px; +} + diff --git a/colorpicker/display-mode-spectrum-grid/src/app/app.component.html b/colorpicker/display-mode-spectrum-grid/src/app/app.component.html new file mode 100644 index 000000000..1d8a8b149 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/app/app.component.html @@ -0,0 +1,58 @@ +
The Color Picker's display-mode is set to "spectrumGrid"
+ +
+
Settings
+
+
Toggle Grid Column Size
+ 5 +
+ 10 +
+ 15 +
+
+
+
Toggle Grid Color Size
+ 20 +
+ 40 +
+ 60 +
+
+
+
Toggle Grid Column Gap
+ 3 +
+ 6 +
+ 9 +
+
+
+
Apply Value Mode
+ instantly + +
+ useButtons +
+
+
+
Palette
+ default +
+ gray +
+ red +
+ green +
+ blue +
+
+
+
Inverted
+ inverted +
+
+
\ No newline at end of file diff --git a/colorpicker/display-mode-spectrum-grid/src/app/app.component.ts b/colorpicker/display-mode-spectrum-grid/src/app/app.component.ts new file mode 100644 index 000000000..b3267abc5 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/app/app.component.ts @@ -0,0 +1,91 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerComponent, ColorPalette, ColorApplyValueMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + colorPicker = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const target: RadioButton = event.target as RadioButton; + + //Set new Grid Item size + if (target.groupName === 'columnCount' || target.groupName === 'columnSize' || target.groupName === 'columnGap') { + let size, + className = target.groupName === 'columnCount' ? 'column-count' : + (target.groupName === 'columnSize' ? 'item-size' : 'column-gap'); + + switch (target.innerHTML) { + case '3': + case '5': + case '20': + size = 'small'; + break; + case '6': + case '10': + case '40': + size = 'medium'; + break; + case '15': + case '9': + case '60': + size = 'large'; + break; + } + + //Remove the oldClass + const classes = colorPicker.nativeElement.classList; + + for (let i = 0; i < classes.length; i++) { + if (classes[i].indexOf(className) > -1) { + classes.remove(classes.item(i)); + } + } + + classes.add(className + '-' + size); + return; + } + + //Set ApplyValueMode and Palette + if (target.groupName === 'applyValueMode') { + colorPicker.applyValueMode = target.innerHTML as ColorApplyValueMode; + return; + } + + if (target.groupName === 'palette') { + colorPicker.palette = target.innerHTML as ColorPalette; + return; + } + + //Set inverted mode + if ((target).id === 'inverted') { + colorPicker.inverted = event.detail.value; + return; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/display-mode-spectrum-grid/src/app/app.module.ts b/colorpicker/display-mode-spectrum-grid/src/app/app.module.ts new file mode 100644 index 000000000..d193b4c0d --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/display-mode-spectrum-grid/src/app/main.ts b/colorpicker/display-mode-spectrum-grid/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/display-mode-spectrum-grid/src/assets/fonts.css b/colorpicker/display-mode-spectrum-grid/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/display-mode-spectrum-grid/src/assets/styles.css b/colorpicker/display-mode-spectrum-grid/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/display-mode-spectrum-grid/src/index.html b/colorpicker/display-mode-spectrum-grid/src/index.html new file mode 100644 index 000000000..28cdeac7f --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Display-mode-spectrum-grid + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/display-mode-spectrum-grid/src/main.ts b/colorpicker/display-mode-spectrum-grid/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/display-mode-spectrum-grid/src/polyfills.ts b/colorpicker/display-mode-spectrum-grid/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/display-mode-spectrum-grid/src/tsconfig.app.json b/colorpicker/display-mode-spectrum-grid/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/display-mode-spectrum-grid/src/tsconfig.json b/colorpicker/display-mode-spectrum-grid/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/display-mode-spectrum-grid/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/editing/angular.json b/colorpicker/editing/angular.json new file mode 100644 index 000000000..ee9deee80 --- /dev/null +++ b/colorpicker/editing/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/editing/package.json b/colorpicker/editing/package.json new file mode 100644 index 000000000..73902b84f --- /dev/null +++ b/colorpicker/editing/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-colorpicker-editing", + "description": "Angular colorpicker editing example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/editing/src/app/app.component.css b/colorpicker/editing/src/app/app.component.css new file mode 100644 index 000000000..c12a1ee47 --- /dev/null +++ b/colorpicker/editing/src/app/app.component.css @@ -0,0 +1,43 @@ +smart-color-picker { + --smart-drop-down-element-max-width: 500px; + --smart-drop-down-element-max-height: auto; + --smart-drop-down-element-min-width: 500px; + --smart-drop-down-element-min-height: 350px; + width: 250px; + display: inline-block; +} + +#demoBox { + padding: 16px; + box-sizing: border-box; + margin-bottom: 20px; + width: 60%; + border: dashed lightgray 1px; + color: gray; + font-size: 20px; + overflow-y: auto; +} + +#frame { + border: gray solid 1px; + border-radius: 5px; + overflow: hidden; +} + +#frameHeader, +#frameContent { + padding: 10px; + font-size: 14px; + font-family: Arial; +} + +#frameHeader { + background-color: #DEDEDE; + color: white; +} + +#frameContent { + background-color: #F7F7F7; + color: gray; + padding-bottom: 50px; +} diff --git a/colorpicker/editing/src/app/app.component.html b/colorpicker/editing/src/app/app.component.html new file mode 100644 index 000000000..3db2d8f34 --- /dev/null +++ b/colorpicker/editing/src/app/app.component.html @@ -0,0 +1,28 @@ +
+
+
Header
+
Content
+
+
+
+
Border Color
+
+ +
+
Header Background
+
+ +
Header Font Color
+
+ +
Background
+
+ +
Font Color
+
+ \ No newline at end of file diff --git a/colorpicker/editing/src/app/app.component.ts b/colorpicker/editing/src/app/app.component.ts new file mode 100644 index 000000000..d541368bf --- /dev/null +++ b/colorpicker/editing/src/app/app.component.ts @@ -0,0 +1,65 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { ColorPickerComponent } from '@smart-webcomponents-angular/colorpicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('colorpicker2', { read: ColorPickerComponent, static: false }) colorpicker2: ColorPickerComponent; + @ViewChild('colorpicker3', { read: ColorPickerComponent, static: false }) colorpicker3: ColorPickerComponent; + @ViewChild('colorpicker4', { read: ColorPickerComponent, static: false }) colorpicker4: ColorPickerComponent; + @ViewChild('colorpicker5', { read: ColorPickerComponent, static: false }) colorpicker5: ColorPickerComponent; + @ViewChild('frame', { read: ElementRef, static: false }) frame: ElementRef; + @ViewChild('frameHeader', { read: ElementRef, static: false }) frameHeader: ElementRef; + @ViewChild('frameContent', { read: ElementRef, static: false }) frameContent: ElementRef; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const that = this, + frame: HTMLDivElement = that.frame.nativeElement as HTMLDivElement, + frameHeader: HTMLDivElement = that.frameHeader.nativeElement as HTMLDivElement, + frameContent: HTMLDivElement = that.frameContent.nativeElement as HTMLDivElement, + headerBackground: ColorPickerComponent = that.colorpicker as ColorPickerComponent, + headerColor: ColorPickerComponent = that.colorpicker2 as ColorPickerComponent, + background: ColorPickerComponent = that.colorpicker3 as ColorPickerComponent, + borderColor: ColorPickerComponent = that.colorpicker4 as ColorPickerComponent, + color: ColorPickerComponent = that.colorpicker5 as ColorPickerComponent; + + headerBackground.addEventListener('change', function (event: CustomEvent): void { + frameHeader.style.backgroundColor = event.detail.value; + }); + + headerColor.addEventListener('change', function (event: CustomEvent): void { + frameHeader.style.color = event.detail.value; + }); + + background.addEventListener('change', function (event: CustomEvent): void { + frameContent.style.backgroundColor = event.detail.value; + }); + + color.addEventListener('change', function (event: CustomEvent): void { + frameContent.style.color = event.detail.value; + }); + + borderColor.addEventListener('change', function (event: CustomEvent): void { + frame.style.borderColor = event.detail.value; + }); + } +} \ No newline at end of file diff --git a/colorpicker/editing/src/app/app.module.ts b/colorpicker/editing/src/app/app.module.ts new file mode 100644 index 000000000..ba404a961 --- /dev/null +++ b/colorpicker/editing/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ColorPickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/editing/src/app/main.ts b/colorpicker/editing/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/editing/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/editing/src/assets/fonts.css b/colorpicker/editing/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/editing/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/editing/src/assets/styles.css b/colorpicker/editing/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/editing/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/editing/src/index.html b/colorpicker/editing/src/index.html new file mode 100644 index 000000000..1bbd3d15e --- /dev/null +++ b/colorpicker/editing/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Editing + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/editing/src/main.ts b/colorpicker/editing/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/editing/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/editing/src/polyfills.ts b/colorpicker/editing/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/editing/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/editing/src/tsconfig.app.json b/colorpicker/editing/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/editing/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/editing/src/tsconfig.json b/colorpicker/editing/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/editing/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/forms/angular.json b/colorpicker/forms/angular.json new file mode 100644 index 000000000..a99ec1877 --- /dev/null +++ b/colorpicker/forms/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/forms/package.json b/colorpicker/forms/package.json new file mode 100644 index 000000000..cc14323e3 --- /dev/null +++ b/colorpicker/forms/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-colorpicker-forms", + "description": "Angular colorpicker forms example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/forms/src/app/app.component.css b/colorpicker/forms/src/app/app.component.css new file mode 100644 index 000000000..df7c6c76d --- /dev/null +++ b/colorpicker/forms/src/app/app.component.css @@ -0,0 +1,30 @@ +form { + display: flex; + width: 350px; + flex-direction: column; +} + +.form-row { + display: flex; + width: 350px; + flex-direction: column; + margin: 5px 0px; +} + +.form-component { + width: 100%; + margin: 5px 0px; +} + +.ng-valid[required], .ng-valid.required { + border-left: 5px solid #42A948; /* green */ + } + + .ng-invalid:not(form) { + border-left: 5px solid #a94442; /* red */ + } + + .alert { + background: #F2DEDE; + color: #a94442; + } \ No newline at end of file diff --git a/colorpicker/forms/src/app/app.component.html b/colorpicker/forms/src/app/app.component.html new file mode 100644 index 000000000..75430b797 --- /dev/null +++ b/colorpicker/forms/src/app/app.component.html @@ -0,0 +1,81 @@ +
+

Hero Form

+
+
+ + + +
+ Name is required +
+
+ +
+ + + +
+
+ + + {{pow}} + +
+ Power is required +
+
+
+ + + +
+ Hair Color is required +
+
+
+ + + +
+ Eyes Color is required +
+
+
+ Submit + New Hero + +
+
+
+ +
+

You submitted the following:

+
+
Name
+
{{ model.name }}
+
+
+
Alter Ego
+
{{ model.alterEgo }}
+
+
+
Power
+
{{ model.power }}
+
+
+
Hair Color
+
{{ model.hairColor }}
+
+
+
Eyes Color
+
{{ model.eyesColor }}
+
+
+ Edit +
+

+

Changes Log:

+{{diagnostic}} \ No newline at end of file diff --git a/colorpicker/forms/src/app/app.component.ts b/colorpicker/forms/src/app/app.component.ts new file mode 100644 index 000000000..2b67403f8 --- /dev/null +++ b/colorpicker/forms/src/app/app.component.ts @@ -0,0 +1,53 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + +export class Hero { + + constructor( + public id: number, + public name: string, + public power: string, + public hairColor: string, + public eyesColor: string, + public alterEgo?: string + ) { } + +} + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('power', { read: DropDownListComponent, static: false }) power: DropDownListComponent; + + powers = ['Really Smart', 'Super Flexible', + 'Super Hot', 'Weather Changer']; + + model = new Hero(18, 'Dr IQ', this.powers[0], "red", "blue", 'Chuck Overstreet'); + + submitted = false; + + onSubmit() { this.submitted = true; } + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + } + + newHero() { + this.model = new Hero(42, '', '', '', ''); + } + + get diagnostic() { return JSON.stringify(this.model); } +} \ No newline at end of file diff --git a/colorpicker/forms/src/app/app.module.ts b/colorpicker/forms/src/app/app.module.ts new file mode 100644 index 000000000..6f206cf0d --- /dev/null +++ b/colorpicker/forms/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { CdkModule } from '@smart-webcomponents-angular/cdk'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, FormsModule, CdkModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/colorpicker/forms/src/app/main.ts b/colorpicker/forms/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/forms/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/forms/src/assets/fonts.css b/colorpicker/forms/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/forms/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/forms/src/assets/styles.css b/colorpicker/forms/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/forms/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/forms/src/index.html b/colorpicker/forms/src/index.html new file mode 100644 index 000000000..c1dce64d1 --- /dev/null +++ b/colorpicker/forms/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Forms + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/forms/src/main.ts b/colorpicker/forms/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/forms/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/forms/src/polyfills.ts b/colorpicker/forms/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/forms/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/forms/src/tsconfig.app.json b/colorpicker/forms/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/forms/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/forms/src/tsconfig.json b/colorpicker/forms/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/forms/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/overview/angular.json b/colorpicker/overview/angular.json new file mode 100644 index 000000000..ee9deee80 --- /dev/null +++ b/colorpicker/overview/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/overview/package.json b/colorpicker/overview/package.json new file mode 100644 index 000000000..0625a60e0 --- /dev/null +++ b/colorpicker/overview/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-colorpicker-overview", + "description": "Angular colorpicker overview example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/overview/src/app/app.component.css b/colorpicker/overview/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/colorpicker/overview/src/app/app.component.html b/colorpicker/overview/src/app/app.component.html new file mode 100644 index 000000000..8c19b8b19 --- /dev/null +++ b/colorpicker/overview/src/app/app.component.html @@ -0,0 +1,4 @@ +
+

smartColorPicker allows picking a color from a drop-down

+
+ \ No newline at end of file diff --git a/colorpicker/overview/src/app/app.component.ts b/colorpicker/overview/src/app/app.component.ts new file mode 100644 index 000000000..88ae28b1d --- /dev/null +++ b/colorpicker/overview/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ColorPickerComponent } from '@smart-webcomponents-angular/colorpicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/colorpicker/overview/src/app/app.module.ts b/colorpicker/overview/src/app/app.module.ts new file mode 100644 index 000000000..ba404a961 --- /dev/null +++ b/colorpicker/overview/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ColorPickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/overview/src/app/main.ts b/colorpicker/overview/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/overview/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/overview/src/assets/fonts.css b/colorpicker/overview/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/overview/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/overview/src/assets/styles.css b/colorpicker/overview/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/overview/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/overview/src/index.html b/colorpicker/overview/src/index.html new file mode 100644 index 000000000..890f66bab --- /dev/null +++ b/colorpicker/overview/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Overview + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/overview/src/main.ts b/colorpicker/overview/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/overview/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/overview/src/polyfills.ts b/colorpicker/overview/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/overview/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/overview/src/tsconfig.app.json b/colorpicker/overview/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/overview/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/overview/src/tsconfig.json b/colorpicker/overview/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/overview/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/right-to-left/angular.json b/colorpicker/right-to-left/angular.json new file mode 100644 index 000000000..ee9deee80 --- /dev/null +++ b/colorpicker/right-to-left/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/right-to-left/package.json b/colorpicker/right-to-left/package.json new file mode 100644 index 000000000..bf1cb0903 --- /dev/null +++ b/colorpicker/right-to-left/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-colorpicker-right-to-left", + "description": "Angular colorpicker right-to-left example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/right-to-left/src/app/app.component.css b/colorpicker/right-to-left/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/colorpicker/right-to-left/src/app/app.component.html b/colorpicker/right-to-left/src/app/app.component.html new file mode 100644 index 000000000..68d6deed2 --- /dev/null +++ b/colorpicker/right-to-left/src/app/app.component.html @@ -0,0 +1,4 @@ +
+

smartColorPicker allows picking a color from a drop-down

+
+ \ No newline at end of file diff --git a/colorpicker/right-to-left/src/app/app.component.ts b/colorpicker/right-to-left/src/app/app.component.ts new file mode 100644 index 000000000..e83d4aacf --- /dev/null +++ b/colorpicker/right-to-left/src/app/app.component.ts @@ -0,0 +1,47 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ColorPickerComponent } from '@smart-webcomponents-angular/colorpicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const colorPicker = this.colorpicker, + messages = Object.assign({}, colorPicker.messages); + + messages['he'] = { + 'redPrefix': 'ר:', + 'greenPrefix': 'ז:', + 'bluePrefix': 'ב:', + 'hexPrefix': '#:', + 'alphaPrefix': 'אלפא:', + 'ok': 'בסדר', + 'cancel': 'בטל', + 'customColor': 'צבע מותאם אישית', + 'standardColors': 'צבעים סטנדרטיים', + 'themeColors': 'צבעי נושא' + }; + + colorPicker.messages = messages; + colorPicker.placeholder = 'אנא בחר צבע'; + } +} \ No newline at end of file diff --git a/colorpicker/right-to-left/src/app/app.module.ts b/colorpicker/right-to-left/src/app/app.module.ts new file mode 100644 index 000000000..ba404a961 --- /dev/null +++ b/colorpicker/right-to-left/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ColorPickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/right-to-left/src/app/main.ts b/colorpicker/right-to-left/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/right-to-left/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/right-to-left/src/assets/fonts.css b/colorpicker/right-to-left/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/right-to-left/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/right-to-left/src/assets/styles.css b/colorpicker/right-to-left/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/right-to-left/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/right-to-left/src/index.html b/colorpicker/right-to-left/src/index.html new file mode 100644 index 000000000..53712edb4 --- /dev/null +++ b/colorpicker/right-to-left/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Right-to-left + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/right-to-left/src/main.ts b/colorpicker/right-to-left/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/right-to-left/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/right-to-left/src/polyfills.ts b/colorpicker/right-to-left/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/right-to-left/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/right-to-left/src/tsconfig.app.json b/colorpicker/right-to-left/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/right-to-left/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/right-to-left/src/tsconfig.json b/colorpicker/right-to-left/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/right-to-left/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/value-display-mode/angular.json b/colorpicker/value-display-mode/angular.json new file mode 100644 index 000000000..6e37c004a --- /dev/null +++ b/colorpicker/value-display-mode/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/value-display-mode/package.json b/colorpicker/value-display-mode/package.json new file mode 100644 index 000000000..7644371ba --- /dev/null +++ b/colorpicker/value-display-mode/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-colorpicker-value-display-mode", + "description": "Angular colorpicker value-display-mode example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/value-display-mode/src/app/app.component.css b/colorpicker/value-display-mode/src/app/app.component.css new file mode 100644 index 000000000..a5403c2a4 --- /dev/null +++ b/colorpicker/value-display-mode/src/app/app.component.css @@ -0,0 +1,5 @@ + +smart-color-picker { + display: inline-block; + +} diff --git a/colorpicker/value-display-mode/src/app/app.component.html b/colorpicker/value-display-mode/src/app/app.component.html new file mode 100644 index 000000000..242519cc9 --- /dev/null +++ b/colorpicker/value-display-mode/src/app/app.component.html @@ -0,0 +1,19 @@ +
The demo shows switching between different value display modes of the + Color Picker
+ +
+
Selected color: + +
+
+
Toggle Value Display Mode
+ default +
+ colorBox +
+ colorCode +
+ none +
+
+
\ No newline at end of file diff --git a/colorpicker/value-display-mode/src/app/app.component.ts b/colorpicker/value-display-mode/src/app/app.component.ts new file mode 100644 index 000000000..e29166fbf --- /dev/null +++ b/colorpicker/value-display-mode/src/app/app.component.ts @@ -0,0 +1,52 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { ColorPickerComponent, ColorValueDisplayMode } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + @ViewChild('rgbInput', { read: ElementRef, static: false }) rgbInput: ElementRef; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + colorPicker = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const radioButton: RadioButton = event.target as RadioButton; + const input: HTMLInputElement = event.target as HTMLInputElement; + + //Set ApplyValueMode and Palette + if (radioButton && radioButton.groupName === 'valueDisplayMode') { + colorPicker.valueDisplayMode = radioButton.innerHTML as ColorValueDisplayMode; + return; + } + + //Set a new value + if (input && input.id === 'rgbValue') { + colorPicker.value = input.value; + } + }); + + colorPicker.addEventListener('change', function (event: CustomEvent): void { + that.rgbInput.nativeElement.value = event.detail.value; + }); + } +} \ No newline at end of file diff --git a/colorpicker/value-display-mode/src/app/app.module.ts b/colorpicker/value-display-mode/src/app/app.module.ts new file mode 100644 index 000000000..d1253b329 --- /dev/null +++ b/colorpicker/value-display-mode/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/value-display-mode/src/app/main.ts b/colorpicker/value-display-mode/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/value-display-mode/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/value-display-mode/src/assets/fonts.css b/colorpicker/value-display-mode/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/value-display-mode/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/value-display-mode/src/assets/styles.css b/colorpicker/value-display-mode/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/value-display-mode/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/value-display-mode/src/index.html b/colorpicker/value-display-mode/src/index.html new file mode 100644 index 000000000..8ba1f3518 --- /dev/null +++ b/colorpicker/value-display-mode/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Value-display-mode + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/value-display-mode/src/main.ts b/colorpicker/value-display-mode/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/value-display-mode/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/value-display-mode/src/polyfills.ts b/colorpicker/value-display-mode/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/value-display-mode/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/value-display-mode/src/tsconfig.app.json b/colorpicker/value-display-mode/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/value-display-mode/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/value-display-mode/src/tsconfig.json b/colorpicker/value-display-mode/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/value-display-mode/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/colorpicker/value-format/angular.json b/colorpicker/value-format/angular.json new file mode 100644 index 000000000..992ae45a1 --- /dev/null +++ b/colorpicker/value-format/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/checkbox/styles/smart.checkbox.css", + "./node_modules/@smart-webcomponents-angular/colorpicker/styles/smart.colorpicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/colorpicker/value-format/package.json b/colorpicker/value-format/package.json new file mode 100644 index 000000000..98bf1dc9f --- /dev/null +++ b/colorpicker/value-format/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-colorpicker-value-format", + "description": "Angular colorpicker value-format example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/checkbox": "9.2.22", + "@smart-webcomponents-angular/colorpicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/colorpicker/value-format/src/app/app.component.css b/colorpicker/value-format/src/app/app.component.css new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/colorpicker/value-format/src/app/app.component.css @@ -0,0 +1 @@ + diff --git a/colorpicker/value-format/src/app/app.component.html b/colorpicker/value-format/src/app/app.component.html new file mode 100644 index 000000000..96201a282 --- /dev/null +++ b/colorpicker/value-format/src/app/app.component.html @@ -0,0 +1,18 @@ + +
+
+

Toggle Value Display Mode

+ default +
+ rgb +
+ rgba +
+ hex +
+
+
+

Edit Alpha Channel

+ Edit Alpha Channel +
+
\ No newline at end of file diff --git a/colorpicker/value-format/src/app/app.component.ts b/colorpicker/value-format/src/app/app.component.ts new file mode 100644 index 000000000..8aea1dce9 --- /dev/null +++ b/colorpicker/value-format/src/app/app.component.ts @@ -0,0 +1,46 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { CheckBoxComponent, CheckBox } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerComponent, ColorValueFormat } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('colorpicker', { read: ColorPickerComponent, static: false }) colorpicker: ColorPickerComponent; + @ViewChild('options', { read: ElementRef, static: false }) options: ElementRef; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + colorPicker = that.colorpicker; + + that.options.nativeElement.addEventListener('change', function (event: CustomEvent): void { + const radioButton: RadioButton = event.target as RadioButton; + const checkBox: CheckBox = event.target as CheckBox; + + //Set ApplyValueMode and Palette + if (radioButton.groupName === 'valueFormat') { + colorPicker.valueFormat = radioButton.innerHTML as ColorValueFormat; + return; + } + if (checkBox.id === 'editAlphaChannel') { + colorPicker.editAlphaChannel = event.detail.value; + } + }); + } +} \ No newline at end of file diff --git a/colorpicker/value-format/src/app/app.module.ts b/colorpicker/value-format/src/app/app.module.ts new file mode 100644 index 000000000..d193b4c0d --- /dev/null +++ b/colorpicker/value-format/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { CheckBoxModule } from '@smart-webcomponents-angular/checkbox'; +import { ColorPickerModule } from '@smart-webcomponents-angular/colorpicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, CheckBoxModule, ColorPickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/colorpicker/value-format/src/app/main.ts b/colorpicker/value-format/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/colorpicker/value-format/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/colorpicker/value-format/src/assets/fonts.css b/colorpicker/value-format/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/colorpicker/value-format/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/colorpicker/value-format/src/assets/styles.css b/colorpicker/value-format/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/colorpicker/value-format/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/colorpicker/value-format/src/index.html b/colorpicker/value-format/src/index.html new file mode 100644 index 000000000..c43eb165e --- /dev/null +++ b/colorpicker/value-format/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Colorpicker Value-format + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/colorpicker/value-format/src/main.ts b/colorpicker/value-format/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/colorpicker/value-format/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/colorpicker/value-format/src/polyfills.ts b/colorpicker/value-format/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/colorpicker/value-format/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/colorpicker/value-format/src/tsconfig.app.json b/colorpicker/value-format/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/colorpicker/value-format/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/colorpicker/value-format/src/tsconfig.json b/colorpicker/value-format/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/colorpicker/value-format/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/auto-complete/angular.json b/combobox/auto-complete/angular.json new file mode 100644 index 000000000..98eef8dac --- /dev/null +++ b/combobox/auto-complete/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/auto-complete/package.json b/combobox/auto-complete/package.json new file mode 100644 index 000000000..e8414f2e6 --- /dev/null +++ b/combobox/auto-complete/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-combobox-auto-complete", + "description": "Angular combobox auto-complete example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/auto-complete/src/app/app.component.css b/combobox/auto-complete/src/app/app.component.css new file mode 100644 index 000000000..357babfe2 --- /dev/null +++ b/combobox/auto-complete/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/auto-complete/src/app/app.component.html b/combobox/auto-complete/src/app/app.component.html new file mode 100644 index 000000000..461da5ce7 --- /dev/null +++ b/combobox/auto-complete/src/app/app.component.html @@ -0,0 +1,10 @@ + +
+
Auto Complete Modes
+
+ None + Auto + Inline + Manual +
+
\ No newline at end of file diff --git a/combobox/auto-complete/src/app/app.component.ts b/combobox/auto-complete/src/app/app.component.ts new file mode 100644 index 000000000..925cdf1a0 --- /dev/null +++ b/combobox/auto-complete/src/app/app.component.ts @@ -0,0 +1,81 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + @ViewChild('radioButtonNone', { read: RadioButtonComponent, static: false }) radioButtonNone: RadioButtonComponent; + @ViewChild('radioButtonAuto', { read: RadioButtonComponent, static: false }) radioButtonAuto: RadioButtonComponent; + @ViewChild('radioButtonInline', { read: RadioButtonComponent, static: false }) radioButtonInline: RadioButtonComponent; + @ViewChild('radioButtonManual', { read: RadioButtonComponent, static: false }) radioButtonManual: RadioButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const comboBox = this.combobox; + + comboBox.dataSource = + [ + "Affogato", + "Americano", + "Bicerin", + "Breve", + "Café Bombón", + "Café au lait", + "Caffé Corretto", + "Café Crema", + "Caffé Latte", + "Caffé macchiato", + "Café mélange", + "Coffee milk", + "Cafe mocha", + "Cappuccino", + "Carajillo", + "Cortado", + "Cuban espresso", + "Espresso", + "Eiskaffee", + "The Flat White", + "Frappuccino", + "Galao", + "Greek frappé coffee", + "Indian filter coffee", + "Instant coffee", + "Irish coffee", + "Liqueur coffee" + ]; + + this.radioButtonNone.addEventListener('change', function ():void { + comboBox.autoComplete = 'none'; + }); + + this.radioButtonAuto.addEventListener('change', function ():void { + comboBox.autoComplete = 'auto'; + }); + + this.radioButtonInline.addEventListener('change', function ():void { + comboBox.autoComplete = 'inline'; + }); + this.radioButtonManual.addEventListener('change', function ():void { + comboBox.autoComplete = 'manual'; + }); + } +} \ No newline at end of file diff --git a/combobox/auto-complete/src/app/app.module.ts b/combobox/auto-complete/src/app/app.module.ts new file mode 100644 index 000000000..b89258eeb --- /dev/null +++ b/combobox/auto-complete/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/auto-complete/src/app/main.ts b/combobox/auto-complete/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/auto-complete/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/auto-complete/src/assets/fonts.css b/combobox/auto-complete/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/auto-complete/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/auto-complete/src/assets/styles.css b/combobox/auto-complete/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/auto-complete/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/auto-complete/src/index.html b/combobox/auto-complete/src/index.html new file mode 100644 index 000000000..f7d945a33 --- /dev/null +++ b/combobox/auto-complete/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Auto-complete + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/auto-complete/src/main.ts b/combobox/auto-complete/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/auto-complete/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/auto-complete/src/polyfills.ts b/combobox/auto-complete/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/auto-complete/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/auto-complete/src/tsconfig.app.json b/combobox/auto-complete/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/auto-complete/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/auto-complete/src/tsconfig.json b/combobox/auto-complete/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/auto-complete/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/automatic-positioning/angular.json b/combobox/automatic-positioning/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/automatic-positioning/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/automatic-positioning/package.json b/combobox/automatic-positioning/package.json new file mode 100644 index 000000000..e0d3cfbc9 --- /dev/null +++ b/combobox/automatic-positioning/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-automatic-positioning", + "description": "Angular combobox automatic-positioning example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/automatic-positioning/src/app/app.component.css b/combobox/automatic-positioning/src/app/app.component.css new file mode 100644 index 000000000..be433a0fc --- /dev/null +++ b/combobox/automatic-positioning/src/app/app.component.css @@ -0,0 +1,11 @@ +smart-combo-box{ + width: 300px; +} +body, +html { + min-height: 450px; +} +smart-combo-box#last { + position: absolute; + bottom: 20px; +} \ No newline at end of file diff --git a/combobox/automatic-positioning/src/app/app.component.html b/combobox/automatic-positioning/src/app/app.component.html new file mode 100644 index 000000000..623833146 --- /dev/null +++ b/combobox/automatic-positioning/src/app/app.component.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/combobox/automatic-positioning/src/app/app.component.ts b/combobox/automatic-positioning/src/app/app.component.ts new file mode 100644 index 000000000..1759d486d --- /dev/null +++ b/combobox/automatic-positioning/src/app/app.component.ts @@ -0,0 +1,66 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + @ViewChild('combobox2', { read: ComboBoxComponent, static: false }) combobox2: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const comboBoxes = [this.combobox, this.combobox2]; + + for (let i = 0; i < comboBoxes.length; i++) { + comboBoxes[i].dataSource = + [ + "Affogato", + "Americano", + "Bicerin", + "Breve", + "Café Bombón", + "Café au lait", + "Caffé Corretto", + "Café Crema", + "Caffé Latte", + "Caffé macchiato", + "Café mélange", + "Coffee milk", + "Cafe mocha", + "Cappuccino", + "Carajillo", + "Cortado", + "Cuban espresso", + "Espresso", + "Eiskaffee", + "The Flat White", + "Frappuccino", + "Galao", + "Greek frappé coffee", + "Alabala", + "Indian filter coffee", + "Instant coffee", + "Irish coffee", + "Liqueur coffee" + ]; + } + + + } +} \ No newline at end of file diff --git a/combobox/automatic-positioning/src/app/app.module.ts b/combobox/automatic-positioning/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/automatic-positioning/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/automatic-positioning/src/app/main.ts b/combobox/automatic-positioning/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/automatic-positioning/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/automatic-positioning/src/assets/fonts.css b/combobox/automatic-positioning/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/automatic-positioning/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/automatic-positioning/src/assets/styles.css b/combobox/automatic-positioning/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/automatic-positioning/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/automatic-positioning/src/index.html b/combobox/automatic-positioning/src/index.html new file mode 100644 index 000000000..712e4024a --- /dev/null +++ b/combobox/automatic-positioning/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Automatic-positioning + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/automatic-positioning/src/main.ts b/combobox/automatic-positioning/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/automatic-positioning/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/automatic-positioning/src/polyfills.ts b/combobox/automatic-positioning/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/automatic-positioning/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/automatic-positioning/src/tsconfig.app.json b/combobox/automatic-positioning/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/automatic-positioning/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/automatic-positioning/src/tsconfig.json b/combobox/automatic-positioning/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/automatic-positioning/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/basic/angular.json b/combobox/basic/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/basic/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/basic/package.json b/combobox/basic/package.json new file mode 100644 index 000000000..feed717d4 --- /dev/null +++ b/combobox/basic/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-basic", + "description": "Angular combobox basic example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/basic/src/app/app.component.css b/combobox/basic/src/app/app.component.css new file mode 100644 index 000000000..357babfe2 --- /dev/null +++ b/combobox/basic/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/basic/src/app/app.component.html b/combobox/basic/src/app/app.component.html new file mode 100644 index 000000000..8b0b80f80 --- /dev/null +++ b/combobox/basic/src/app/app.component.html @@ -0,0 +1,22 @@ + + Affogato + Americano + Bicerin + Breve + Cappuccino + Cafe Crema + Cafe Corretto + Cafe macchiato + Cafe mocha + Cortado + Cuban espresso + Espresso + Eiskaffee + Frappuccino + Galao + Greek frappe coffee + Iced Coffee + Instant Coffee + Latte + Liqueur coffee + \ No newline at end of file diff --git a/combobox/basic/src/app/app.component.ts b/combobox/basic/src/app/app.component.ts new file mode 100644 index 000000000..b61a29784 --- /dev/null +++ b/combobox/basic/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/combobox/basic/src/app/app.module.ts b/combobox/basic/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/basic/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/basic/src/app/main.ts b/combobox/basic/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/basic/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/basic/src/assets/fonts.css b/combobox/basic/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/basic/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/basic/src/assets/styles.css b/combobox/basic/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/basic/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/basic/src/index.html b/combobox/basic/src/index.html new file mode 100644 index 000000000..f122cc06e --- /dev/null +++ b/combobox/basic/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Basic + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/basic/src/main.ts b/combobox/basic/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/basic/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/basic/src/polyfills.ts b/combobox/basic/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/basic/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/basic/src/tsconfig.app.json b/combobox/basic/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/basic/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/basic/src/tsconfig.json b/combobox/basic/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/basic/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/button-position/angular.json b/combobox/button-position/angular.json new file mode 100644 index 000000000..98eef8dac --- /dev/null +++ b/combobox/button-position/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/button-position/package.json b/combobox/button-position/package.json new file mode 100644 index 000000000..b057fcbb1 --- /dev/null +++ b/combobox/button-position/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-combobox-button-position", + "description": "Angular combobox button-position example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/button-position/src/app/app.component.css b/combobox/button-position/src/app/app.component.css new file mode 100644 index 000000000..357babfe2 --- /dev/null +++ b/combobox/button-position/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/button-position/src/app/app.component.html b/combobox/button-position/src/app/app.component.html new file mode 100644 index 000000000..196d7e685 --- /dev/null +++ b/combobox/button-position/src/app/app.component.html @@ -0,0 +1,31 @@ +
+ + Affogato + Americano + Bicerin + Breve + Cappuccino + Cafe Crema + Cafe Corretto + Cafe macchiato + Cafe mocha + Cortado + Cuban espresso + Espresso + Eiskaffee + Frappuccino + Galao + Greek frappe coffee + Iced Coffee + Instant Coffee + Latte + Liqueur coffee + +
+
Dropdown button Position
+
+ Left + Right +
+
+
\ No newline at end of file diff --git a/combobox/button-position/src/app/app.component.ts b/combobox/button-position/src/app/app.component.ts new file mode 100644 index 000000000..efff42cb9 --- /dev/null +++ b/combobox/button-position/src/app/app.component.ts @@ -0,0 +1,41 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + @ViewChild('radioButtonLeft', { read: RadioButtonComponent, static: false }) radioButtonLeft: RadioButtonComponent; + @ViewChild('radioButtonRight', { read: RadioButtonComponent, static: false }) radioButtonRight: RadioButtonComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + comboBox = that.combobox; + + that.radioButtonLeft.addEventListener('change', function () { + comboBox.dropDownButtonPosition = 'left'; + }); + that.radioButtonRight.addEventListener('change', function () { + comboBox.dropDownButtonPosition = 'right'; + }); + + + } +} \ No newline at end of file diff --git a/combobox/button-position/src/app/app.module.ts b/combobox/button-position/src/app/app.module.ts new file mode 100644 index 000000000..b89258eeb --- /dev/null +++ b/combobox/button-position/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/button-position/src/app/main.ts b/combobox/button-position/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/button-position/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/button-position/src/assets/fonts.css b/combobox/button-position/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/button-position/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/button-position/src/assets/styles.css b/combobox/button-position/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/button-position/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/button-position/src/index.html b/combobox/button-position/src/index.html new file mode 100644 index 000000000..3636378bc --- /dev/null +++ b/combobox/button-position/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Button-position + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/button-position/src/main.ts b/combobox/button-position/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/button-position/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/button-position/src/polyfills.ts b/combobox/button-position/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/button-position/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/button-position/src/tsconfig.app.json b/combobox/button-position/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/button-position/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/button-position/src/tsconfig.json b/combobox/button-position/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/button-position/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/checkboxes/angular.json b/combobox/checkboxes/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/checkboxes/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/checkboxes/package.json b/combobox/checkboxes/package.json new file mode 100644 index 000000000..cdd05c5fa --- /dev/null +++ b/combobox/checkboxes/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-checkboxes", + "description": "Angular combobox checkboxes example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/checkboxes/src/app/app.component.css b/combobox/checkboxes/src/app/app.component.css new file mode 100644 index 000000000..357babfe2 --- /dev/null +++ b/combobox/checkboxes/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/checkboxes/src/app/app.component.html b/combobox/checkboxes/src/app/app.component.html new file mode 100644 index 000000000..afc56a417 --- /dev/null +++ b/combobox/checkboxes/src/app/app.component.html @@ -0,0 +1,22 @@ + + Affogato + Americano + Bicerin + Breve + Cappuccino + Cafe Crema + Cafe Corretto + Cafe macchiato + Cafe mocha + Cortado + Cuban espresso + Espresso + Eiskaffee + Frappuccino + Galao + Greek frappe coffee + Iced Coffee + Instant Coffee + Latte + Liqueur coffee + \ No newline at end of file diff --git a/combobox/checkboxes/src/app/app.component.ts b/combobox/checkboxes/src/app/app.component.ts new file mode 100644 index 000000000..b61a29784 --- /dev/null +++ b/combobox/checkboxes/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/combobox/checkboxes/src/app/app.module.ts b/combobox/checkboxes/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/checkboxes/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/checkboxes/src/app/main.ts b/combobox/checkboxes/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/checkboxes/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/checkboxes/src/assets/fonts.css b/combobox/checkboxes/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/checkboxes/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/checkboxes/src/assets/styles.css b/combobox/checkboxes/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/checkboxes/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/checkboxes/src/index.html b/combobox/checkboxes/src/index.html new file mode 100644 index 000000000..9726c787c --- /dev/null +++ b/combobox/checkboxes/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Checkboxes + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/checkboxes/src/main.ts b/combobox/checkboxes/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/checkboxes/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/checkboxes/src/polyfills.ts b/combobox/checkboxes/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/checkboxes/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/checkboxes/src/tsconfig.app.json b/combobox/checkboxes/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/checkboxes/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/checkboxes/src/tsconfig.json b/combobox/checkboxes/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/checkboxes/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/filterable/angular.json b/combobox/filterable/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/filterable/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/filterable/package.json b/combobox/filterable/package.json new file mode 100644 index 000000000..0fd1ac2a3 --- /dev/null +++ b/combobox/filterable/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-filterable", + "description": "Angular combobox filterable example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/filterable/src/app/app.component.css b/combobox/filterable/src/app/app.component.css new file mode 100644 index 000000000..357babfe2 --- /dev/null +++ b/combobox/filterable/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/filterable/src/app/app.component.html b/combobox/filterable/src/app/app.component.html new file mode 100644 index 000000000..e4d69f237 --- /dev/null +++ b/combobox/filterable/src/app/app.component.html @@ -0,0 +1,22 @@ + + Affogato + Americano + Bicerin + Breve + Cappuccino + Cafe Crema + Cafe Corretto + Cafe macchiato + Cafe mocha + Cortado + Cuban espresso + Espresso + Eiskaffee + Frappuccino + Galao + Greek frappe coffee + Iced Coffee + Instant Coffee + Latte + Liqueur coffee + \ No newline at end of file diff --git a/combobox/filterable/src/app/app.component.ts b/combobox/filterable/src/app/app.component.ts new file mode 100644 index 000000000..b61a29784 --- /dev/null +++ b/combobox/filterable/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/combobox/filterable/src/app/app.module.ts b/combobox/filterable/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/filterable/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/filterable/src/app/main.ts b/combobox/filterable/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/filterable/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/filterable/src/assets/fonts.css b/combobox/filterable/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/filterable/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/filterable/src/assets/styles.css b/combobox/filterable/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/filterable/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/filterable/src/index.html b/combobox/filterable/src/index.html new file mode 100644 index 000000000..c471381a4 --- /dev/null +++ b/combobox/filterable/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Filterable + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/filterable/src/main.ts b/combobox/filterable/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/filterable/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/filterable/src/polyfills.ts b/combobox/filterable/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/filterable/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/filterable/src/tsconfig.app.json b/combobox/filterable/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/filterable/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/filterable/src/tsconfig.json b/combobox/filterable/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/filterable/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/forms/angular.json b/combobox/forms/angular.json new file mode 100644 index 000000000..1736e7206 --- /dev/null +++ b/combobox/forms/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/forms/package.json b/combobox/forms/package.json new file mode 100644 index 000000000..4fdc329b5 --- /dev/null +++ b/combobox/forms/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-combobox-forms", + "description": "Angular combobox forms example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "@smart-webcomponents-angular/input": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/forms/src/app/app.component.css b/combobox/forms/src/app/app.component.css new file mode 100644 index 000000000..df7c6c76d --- /dev/null +++ b/combobox/forms/src/app/app.component.css @@ -0,0 +1,30 @@ +form { + display: flex; + width: 350px; + flex-direction: column; +} + +.form-row { + display: flex; + width: 350px; + flex-direction: column; + margin: 5px 0px; +} + +.form-component { + width: 100%; + margin: 5px 0px; +} + +.ng-valid[required], .ng-valid.required { + border-left: 5px solid #42A948; /* green */ + } + + .ng-invalid:not(form) { + border-left: 5px solid #a94442; /* red */ + } + + .alert { + background: #F2DEDE; + color: #a94442; + } \ No newline at end of file diff --git a/combobox/forms/src/app/app.component.html b/combobox/forms/src/app/app.component.html new file mode 100644 index 000000000..72dbf0632 --- /dev/null +++ b/combobox/forms/src/app/app.component.html @@ -0,0 +1,55 @@ +
+

Hero Form

+
+
+ + + +
+ Name is required +
+
+ +
+ + + +
+
+ + + {{pow}} + +
+ Power is required +
+
+
+ Submit + New Hero + +
+
+
+ +
+

You submitted the following:

+
+
Name
+
{{ model.name }}
+
+
+
Alter Ego
+
{{ model.alterEgo }}
+
+
+
Power
+
{{ model.power }}
+
+
+ Edit +
+

+

Changes Log:

+{{diagnostic}} \ No newline at end of file diff --git a/combobox/forms/src/app/app.component.ts b/combobox/forms/src/app/app.component.ts new file mode 100644 index 000000000..c523b6629 --- /dev/null +++ b/combobox/forms/src/app/app.component.ts @@ -0,0 +1,39 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { Hero } from './hero'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + + powers = ['Really Smart', 'Super Flexible', + 'Super Hot', 'Weather Changer']; + + model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet'); + + submitted = false; + + onSubmit() { this.submitted = true; } + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + } + + newHero() { + this.model = new Hero(42, '', ''); + } + + get diagnostic() { return JSON.stringify(this.model); } +} \ No newline at end of file diff --git a/combobox/forms/src/app/app.module.ts b/combobox/forms/src/app/app.module.ts new file mode 100644 index 000000000..0446684c7 --- /dev/null +++ b/combobox/forms/src/app/app.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { InputModule } from '@smart-webcomponents-angular/input'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, FormsModule, ComboBoxModule, ButtonModule, InputModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/combobox/forms/src/app/main.ts b/combobox/forms/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/forms/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/forms/src/assets/fonts.css b/combobox/forms/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/forms/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/forms/src/assets/styles.css b/combobox/forms/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/forms/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/forms/src/index.html b/combobox/forms/src/index.html new file mode 100644 index 000000000..a0aa71dc4 --- /dev/null +++ b/combobox/forms/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Forms + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/forms/src/main.ts b/combobox/forms/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/forms/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/forms/src/polyfills.ts b/combobox/forms/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/forms/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/forms/src/tsconfig.app.json b/combobox/forms/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/forms/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/forms/src/tsconfig.json b/combobox/forms/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/forms/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/item-template/angular.json b/combobox/item-template/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/item-template/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/item-template/package.json b/combobox/item-template/package.json new file mode 100644 index 000000000..abc15559e --- /dev/null +++ b/combobox/item-template/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-item-template", + "description": "Angular combobox item-template example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/item-template/src/app/app.component.css b/combobox/item-template/src/app/app.component.css new file mode 100644 index 000000000..1122cac68 --- /dev/null +++ b/combobox/item-template/src/app/app.component.css @@ -0,0 +1,28 @@ + +/* Glyph Icons */ + +@font-face { + font-family: 'Glyphicons Halflings'; + src: url('./../../../src/images/glyphicons-halflings-regular.eot'); + src: url('./../../../src/images/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), + url('./../../../src/images/glyphicons-halflings-regular.woff2') format('woff2'), + url('./../../../src/images/glyphicons-halflings-regular.woff') format('woff'), + url('./../../../src/images/glyphicons-halflings-regular.ttf') format('truetype'), + url('./../../../src/images/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} + +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.glyphicon-ok:before { + content: "\e013"; +} \ No newline at end of file diff --git a/combobox/item-template/src/app/app.component.html b/combobox/item-template/src/app/app.component.html new file mode 100644 index 000000000..4ce14dec0 --- /dev/null +++ b/combobox/item-template/src/app/app.component.html @@ -0,0 +1,20 @@ + + + Volvo + Saab + Scania + + + Mercedes + VW + Audi + Porsche + + + Mazda + Honda + Infinity + Mitsubishi + Toyota + + \ No newline at end of file diff --git a/combobox/item-template/src/app/app.component.ts b/combobox/item-template/src/app/app.component.ts new file mode 100644 index 000000000..312f3279b --- /dev/null +++ b/combobox/item-template/src/app/app.component.ts @@ -0,0 +1,30 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation. None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/combobox/item-template/src/app/app.module.ts b/combobox/item-template/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/item-template/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/item-template/src/app/main.ts b/combobox/item-template/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/item-template/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/item-template/src/assets/fonts.css b/combobox/item-template/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/item-template/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/item-template/src/assets/styles.css b/combobox/item-template/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/item-template/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/item-template/src/index.html b/combobox/item-template/src/index.html new file mode 100644 index 000000000..ac4c9d5bd --- /dev/null +++ b/combobox/item-template/src/index.html @@ -0,0 +1,39 @@ + + + + + Angular Combobox Item-template + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/item-template/src/main.ts b/combobox/item-template/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/item-template/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/item-template/src/polyfills.ts b/combobox/item-template/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/item-template/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/item-template/src/tsconfig.app.json b/combobox/item-template/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/item-template/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/item-template/src/tsconfig.json b/combobox/item-template/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/item-template/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/methods/angular.json b/combobox/methods/angular.json new file mode 100644 index 000000000..3c79376ee --- /dev/null +++ b/combobox/methods/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/methods/package.json b/combobox/methods/package.json new file mode 100644 index 000000000..631c63beb --- /dev/null +++ b/combobox/methods/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-combobox-methods", + "description": "Angular combobox methods example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/methods/src/app/app.component.css b/combobox/methods/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/combobox/methods/src/app/app.component.html b/combobox/methods/src/app/app.component.html new file mode 100644 index 000000000..91fa9ab8c --- /dev/null +++ b/combobox/methods/src/app/app.component.html @@ -0,0 +1,33 @@ + +
+
Settings
+
+ Unsort + Sort +
+
+ Ungroup + Group +
+
+ Open + Close +
+
+ Default + Check +
+
+ Radio +
+
+ Insert + Update +
+
+ Remove +
+
+ Enable/Disable +
+
\ No newline at end of file diff --git a/combobox/methods/src/app/app.component.ts b/combobox/methods/src/app/app.component.ts new file mode 100644 index 000000000..9383c15d4 --- /dev/null +++ b/combobox/methods/src/app/app.component.ts @@ -0,0 +1,137 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('buttonUnsort', { read: ButtonComponent, static: false }) buttonUnsort: ButtonComponent; + @ViewChild('buttonSort', { read: ButtonComponent, static: false }) buttonSort: ButtonComponent; + @ViewChild('buttonUngroup', { read: ButtonComponent, static: false }) buttonUngroup: ButtonComponent; + @ViewChild('buttonGroup', { read: ButtonComponent, static: false }) buttonGroup: ButtonComponent; + @ViewChild('buttonOpen', { read: ButtonComponent, static: false }) buttonOpen: ButtonComponent; + @ViewChild('buttonClose', { read: ButtonComponent, static: false }) buttonClose: ButtonComponent; + @ViewChild('buttonDefault', { read: ButtonComponent, static: false }) buttonDefault: ButtonComponent; + @ViewChild('buttonCheck', { read: ButtonComponent, static: false }) buttonCheck: ButtonComponent; + @ViewChild('buttonRadio', { read: ButtonComponent, static: false }) buttonRadio: ButtonComponent; + @ViewChild('buttonInsert', { read: ButtonComponent, static: false }) buttonInsert: ButtonComponent; + @ViewChild('buttonUpdate', { read: ButtonComponent, static: false }) buttonUpdate: ButtonComponent; + @ViewChild('buttonRemove', { read: ButtonComponent, static: false }) buttonRemove: ButtonComponent; + @ViewChild('buttonDisable', { read: ButtonComponent, static: false }) buttonDisable: ButtonComponent; + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + comboBox = that.combobox; + + comboBox.dataSource = + [{ + label: "Andrew", + value: 1, + group: "Product Owners" + }, + { + label: "Natalia", + value: 2, + group: "Developers" + }, + { + label: "Michael", + value: 3, + group: "Developers" + }, + { + label: "Angel", + value: 4, + group: "Product Owners" + }, + { + label: "Hristo", + value: 5, + group: "Developers" + }, + { + label: "Peter", + value: 6, + group: "Developers" + }, + { + label: "Albert", + value: 7, + group: "Support" + }, + { + label: "George", + value: 8, + group: "Support" + }]; + + that.buttonUnsort.addEventListener('click', function (): void { + comboBox.sorted = false; + }); + + that.buttonSort.addEventListener('click', function (): void { + comboBox.sorted = true; + }); + + that.buttonUngroup.addEventListener('click', function (): void { + comboBox.grouped = false; + }); + + that.buttonGroup.addEventListener('click', function (): void { + comboBox.grouped = true; + }); + + that.buttonOpen.addEventListener('click', function (): void { + comboBox.open(); + }); + + that.buttonClose.addEventListener('click', function (): void { + comboBox.close(); + }); + + that.buttonDefault.addEventListener('click', function (): void { + comboBox.selectionMode = 'oneOrManyExtended'; + }); + + that.buttonCheck.addEventListener('click', function (): void { + comboBox.selectionMode = 'checkBox'; + }); + + that.buttonRadio.addEventListener('click', function (): void { + comboBox.selectionMode = 'radioButton'; + }); + that.buttonInsert.addEventListener('click', function (): void { + comboBox.insert(0, "New Item"); + }); + + that.buttonUpdate.addEventListener('click', function (): void { + comboBox.update(0, "Updated Item"); + }); + + that.buttonRemove.addEventListener('click', function (): void { + comboBox.removeAt(0); + }); + + that.buttonDisable.addEventListener('click', function (): void { + comboBox.disabled = !comboBox.disabled; + }); + } +} \ No newline at end of file diff --git a/combobox/methods/src/app/app.module.ts b/combobox/methods/src/app/app.module.ts new file mode 100644 index 000000000..f4c34b788 --- /dev/null +++ b/combobox/methods/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/methods/src/app/main.ts b/combobox/methods/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/methods/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/methods/src/assets/fonts.css b/combobox/methods/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/methods/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/methods/src/assets/styles.css b/combobox/methods/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/methods/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/methods/src/index.html b/combobox/methods/src/index.html new file mode 100644 index 000000000..dbb139363 --- /dev/null +++ b/combobox/methods/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Methods + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/methods/src/main.ts b/combobox/methods/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/methods/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/methods/src/polyfills.ts b/combobox/methods/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/methods/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/methods/src/tsconfig.app.json b/combobox/methods/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/methods/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/methods/src/tsconfig.json b/combobox/methods/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/methods/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/multiple-selection-mode/angular.json b/combobox/multiple-selection-mode/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/multiple-selection-mode/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/multiple-selection-mode/package.json b/combobox/multiple-selection-mode/package.json new file mode 100644 index 000000000..4c8caf296 --- /dev/null +++ b/combobox/multiple-selection-mode/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-multiple-selection-mode", + "description": "Angular combobox multiple-selection-mode example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/multiple-selection-mode/src/app/app.component.css b/combobox/multiple-selection-mode/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/combobox/multiple-selection-mode/src/app/app.component.html b/combobox/multiple-selection-mode/src/app/app.component.html new file mode 100644 index 000000000..abc80fcb2 --- /dev/null +++ b/combobox/multiple-selection-mode/src/app/app.component.html @@ -0,0 +1,2 @@ +
Hold Ctrl or Shift key while selecting items
+ \ No newline at end of file diff --git a/combobox/multiple-selection-mode/src/app/app.component.ts b/combobox/multiple-selection-mode/src/app/app.component.ts new file mode 100644 index 000000000..def7f4f16 --- /dev/null +++ b/combobox/multiple-selection-mode/src/app/app.component.ts @@ -0,0 +1,82 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const comboBox = this.combobox; + + comboBox.dataSource = [ + { + label: "Andrew", + value: 1, + group: "A" + }, + { + label: "Natalia", + value: 5, + group: "B" + }, + { + label: "Michael", + value: 4, + group: "B" + }, + { + label: "Angel", + value: 2, + group: "A" + }, + { + label: "Hristo", + value: 6, + group: "C" + }, + { + label: "Peter", + value: 13, + group: "A" + }, + { + label: "Albert", + value: 34, + group: "A" + }, + { + label: "Boyko", + value: 32, + group: "A" + }, + { + label: "Dimitar", + value: 113, + group: "B" + }, + { + label: "George", + value: 31, + group: "C" + } + ]; + } +} \ No newline at end of file diff --git a/combobox/multiple-selection-mode/src/app/app.module.ts b/combobox/multiple-selection-mode/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/multiple-selection-mode/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/multiple-selection-mode/src/app/main.ts b/combobox/multiple-selection-mode/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/multiple-selection-mode/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/multiple-selection-mode/src/assets/fonts.css b/combobox/multiple-selection-mode/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/multiple-selection-mode/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/multiple-selection-mode/src/assets/styles.css b/combobox/multiple-selection-mode/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/multiple-selection-mode/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/multiple-selection-mode/src/index.html b/combobox/multiple-selection-mode/src/index.html new file mode 100644 index 000000000..2781d3622 --- /dev/null +++ b/combobox/multiple-selection-mode/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Multiple-selection-mode + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/multiple-selection-mode/src/main.ts b/combobox/multiple-selection-mode/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/multiple-selection-mode/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/multiple-selection-mode/src/polyfills.ts b/combobox/multiple-selection-mode/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/multiple-selection-mode/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/multiple-selection-mode/src/tsconfig.app.json b/combobox/multiple-selection-mode/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/multiple-selection-mode/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/multiple-selection-mode/src/tsconfig.json b/combobox/multiple-selection-mode/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/multiple-selection-mode/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/multiple-selection/angular.json b/combobox/multiple-selection/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/multiple-selection/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/multiple-selection/package.json b/combobox/multiple-selection/package.json new file mode 100644 index 000000000..6be94d7b8 --- /dev/null +++ b/combobox/multiple-selection/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-multiple-selection", + "description": "Angular combobox multiple-selection example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/multiple-selection/src/app/app.component.css b/combobox/multiple-selection/src/app/app.component.css new file mode 100644 index 000000000..82ea2915a --- /dev/null +++ b/combobox/multiple-selection/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box input { + padding: 0px; +} \ No newline at end of file diff --git a/combobox/multiple-selection/src/app/app.component.html b/combobox/multiple-selection/src/app/app.component.html new file mode 100644 index 000000000..508b0be10 --- /dev/null +++ b/combobox/multiple-selection/src/app/app.component.html @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/combobox/multiple-selection/src/app/app.component.ts b/combobox/multiple-selection/src/app/app.component.ts new file mode 100644 index 000000000..d1887f29f --- /dev/null +++ b/combobox/multiple-selection/src/app/app.component.ts @@ -0,0 +1,61 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const comboBox = this.combobox; + + comboBox.dataSource = + [ + "Affogato", + "Americano", + "Bicerin", + "Breve", + "Café Bombón", + "Café au lait", + "Caffé Corretto", + "Café Crema", + "Caffé Latte", + "Caffé macchiato", + "Café mélange", + "Coffee milk", + "Cafe mocha", + "Cappuccino", + "Carajillo", + "Cortado", + "Cuban espresso", + "Espresso", + "Eiskaffee", + "The Flat White", + "Frappuccino", + "Galao", + "Greek frappé coffee", + "Alabala", + "Indian filter coffee", + "Instant coffee", + "Irish coffee", + "Liqueur coffee" + ]; + } +} \ No newline at end of file diff --git a/combobox/multiple-selection/src/app/app.module.ts b/combobox/multiple-selection/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/multiple-selection/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/multiple-selection/src/app/main.ts b/combobox/multiple-selection/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/multiple-selection/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/multiple-selection/src/assets/fonts.css b/combobox/multiple-selection/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/multiple-selection/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/multiple-selection/src/assets/styles.css b/combobox/multiple-selection/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/multiple-selection/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/multiple-selection/src/index.html b/combobox/multiple-selection/src/index.html new file mode 100644 index 000000000..26b257552 --- /dev/null +++ b/combobox/multiple-selection/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Multiple-selection + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/multiple-selection/src/main.ts b/combobox/multiple-selection/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/multiple-selection/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/multiple-selection/src/polyfills.ts b/combobox/multiple-selection/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/multiple-selection/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/multiple-selection/src/tsconfig.app.json b/combobox/multiple-selection/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/multiple-selection/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/multiple-selection/src/tsconfig.json b/combobox/multiple-selection/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/multiple-selection/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/open-modes/angular.json b/combobox/open-modes/angular.json new file mode 100644 index 000000000..3c79376ee --- /dev/null +++ b/combobox/open-modes/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/open-modes/package.json b/combobox/open-modes/package.json new file mode 100644 index 000000000..c8950f7d9 --- /dev/null +++ b/combobox/open-modes/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-combobox-open-modes", + "description": "Angular combobox open-modes example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/open-modes/src/app/app.component.css b/combobox/open-modes/src/app/app.component.css new file mode 100644 index 000000000..d1a5fe842 --- /dev/null +++ b/combobox/open-modes/src/app/app.component.css @@ -0,0 +1,3 @@ +html, body { + min-height:600px; +} \ No newline at end of file diff --git a/combobox/open-modes/src/app/app.component.html b/combobox/open-modes/src/app/app.component.html new file mode 100644 index 000000000..47b694572 --- /dev/null +++ b/combobox/open-modes/src/app/app.component.html @@ -0,0 +1,28 @@ +
+

Modes Description

+

Auto - the comboBox is opened/closed when the element is hovered.

+

Default - the comboBox is opened/closed when the element is clicked.

+

DropDownButton - the comboBox is devided in two. An input field and a + drop-down button. +
Each component can be focused. The comboBox can be opened/closed when + the dropDownButton is clicked.

+

None - the dropDownList can't be opened/closed.

+
+ +
+
+

ComboBox Open Mode:

+
+ Default +
+
+ Auto +
+
+ DropDownButton +
+
+ None +
+
+
\ No newline at end of file diff --git a/combobox/open-modes/src/app/app.component.ts b/combobox/open-modes/src/app/app.component.ts new file mode 100644 index 000000000..5e390f8a3 --- /dev/null +++ b/combobox/open-modes/src/app/app.component.ts @@ -0,0 +1,108 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('buttonDefault', { read: ButtonComponent, static: false }) buttonDefault: ButtonComponent; + @ViewChild('buttonAuto', { read: ButtonComponent, static: false }) buttonAuto: ButtonComponent; + @ViewChild('buttonDropDownButton', { read: ButtonComponent, static: false }) buttonDropDownButton: ButtonComponent; + @ViewChild('buttonNone', { read: ButtonComponent, static: false }) buttonNone: ButtonComponent; + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + comboBox = that.combobox, + buttons = [that.buttonDefault, that.buttonAuto, that.buttonDropDownButton, that.buttonNone]; + + comboBox.dataSource = + [{ + label: "Andrew", + value: 1, + group: "A" + }, + { + label: "Natalia", + value: 2, + group: "B" + }, + { + label: "Michael", + value: 3, + group: "B" + }, + { + label: "Angel", + value: 4, + group: "A" + }, + { + label: "Hristo", + value: 5, + group: "C" + }, + { + label: "Peter", + value: 6, + group: "A" + }, + { + label: "Albert", + value: 7, + group: "A" + }, + { + label: "George", + value: 8, + group: "C" + }]; + buttons[0].addEventListener('click', function (): void { + comboBox.dropDownOpenMode = 'default'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + buttons[1].addEventListener('click', function (): void { + comboBox.dropDownOpenMode = 'auto'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + buttons[2].addEventListener('click', function (): void { + comboBox.dropDownOpenMode = 'dropDownButton'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + buttons[3].addEventListener('click', function (): void { + comboBox.dropDownOpenMode = 'none'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + } +} \ No newline at end of file diff --git a/combobox/open-modes/src/app/app.module.ts b/combobox/open-modes/src/app/app.module.ts new file mode 100644 index 000000000..f4c34b788 --- /dev/null +++ b/combobox/open-modes/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/open-modes/src/app/main.ts b/combobox/open-modes/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/open-modes/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/open-modes/src/assets/fonts.css b/combobox/open-modes/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/open-modes/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/open-modes/src/assets/styles.css b/combobox/open-modes/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/open-modes/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/open-modes/src/index.html b/combobox/open-modes/src/index.html new file mode 100644 index 000000000..f851b40d6 --- /dev/null +++ b/combobox/open-modes/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Open-modes + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/open-modes/src/main.ts b/combobox/open-modes/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/open-modes/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/open-modes/src/polyfills.ts b/combobox/open-modes/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/open-modes/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/open-modes/src/tsconfig.app.json b/combobox/open-modes/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/open-modes/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/open-modes/src/tsconfig.json b/combobox/open-modes/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/open-modes/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/overview/angular.json b/combobox/overview/angular.json new file mode 100644 index 000000000..3c79376ee --- /dev/null +++ b/combobox/overview/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/overview/package.json b/combobox/overview/package.json new file mode 100644 index 000000000..9d7802fc6 --- /dev/null +++ b/combobox/overview/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-combobox-overview", + "description": "Angular combobox overview example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/overview/src/app/app.component.css b/combobox/overview/src/app/app.component.css new file mode 100644 index 000000000..d14f8f6db --- /dev/null +++ b/combobox/overview/src/app/app.component.css @@ -0,0 +1,7 @@ + +@media only screen and (max-width: 500px) { + body, html { + font-size: 12px; + width: 320px; + } +} diff --git a/combobox/overview/src/app/app.component.html b/combobox/overview/src/app/app.component.html new file mode 100644 index 000000000..d8ccb61c7 --- /dev/null +++ b/combobox/overview/src/app/app.component.html @@ -0,0 +1,387 @@ +
+
+
+
+

+ Smart HTML ComboBox is a form control that allows selecting a value + from a drop down list. +

+
+

+ A dropdown list selects between multiple selections. It displays the + current state and a down/up arrow. Available states may be shown as + a list of strings, a palette, or icons, for example. +

+

+ When a user interacts with the dropDown, a menu can appear over, + under or below the drop down list and displays the possible states. + Pressing a state dismisses the menu if the selection is single and + updates the button to display this new state. +

+

+ Scrolling within the dropdown behaves the same way a menu scrolls. +

+
+
+
+ +
+
+
+
+ photo_camera + +
+ Name +
+ Phone + + Mobile + Home + Work + +
+
+ Email + + Work + Mobile + Home + +
+
+ Address + + Home + Mobile + Work + +
+ Ringtone + Add note +
+
+
+
+
+

Generic overflow combobox

+

+ The generic overflow combobox displays an arrow by default. When the + button is pressed, the menu appears. Pressing an option on the menu + navigates to further settings for that option. +

+
+ + Arial + Calibri + Courier + Verdana + +
+
+
+

Style

+
+ + + + + + + + + +
+

Normal

+ 		+ + Home + Mobile + Work + Business + Personal + +
+

[disabled]="true"

+ 		+ + Home + Mobile + Work + Business + Personal + +
+
+
+
+

Open Directions

+
+

+ smartcombobox has a number of opening directions but the most popular + are "bottom", "overlay-center" and "top". +

+
+
+ + + + + + + + + + + + + + + +
Bottom + + Africa + America + Asia + Europe + +
Overlay-center + + Yogurt + Honey + Strawberries + +
Top + + Peanuts + Hazelnuts + Almonds + +
+
+
+
+

Selection Modes

+
+

+ smartcombobox has a variaty of selection modes allowing single or + multiple item selection. +

+
+
One(Selection of single item)
+
+ + State 1 + State 2 + State 3 + +
+
oneOrManyExtended - allows selection with shift and ctrl.
+
+ + State 1 + State 2 + State 3 + +
+
checkBox
+
+ + Item 1 + Item 2 + Item 3 + +
+
radioButton
+
+ + Item 1 + Item 2 + Item 3 + +
+

+ Additional selection modes are "zeroOrOne", "OneOrMany", "zeroOrMany" + and "none" +

+
+
+

Demo

+
+

+ comboboxes are controls that are used for making a selection from a + list of options. +

+
+
+
+

Edit shipping info

+
+
+ + John Williams +
+
+
+ + 2000 Main Street +
+
+
+ Hoboken + + NJ + DE + FL + NH + GA + IN + HI + CT + NM + ID + KS + LA + KY + CO + NE + OH + SC + RI + TX + WA + + 94122 +
+
+ +
+ Cancel + Done +
+
+
+
+
+
+
+
+

Welcome

+ + English(US) + English(UK) + English(AU) + English(IN) + Czech + Dutch + French + German(DE) + German(AT) + Italian + Japanase + Korean + Polish + Russian + Spanish + Arabic(EG) + Arabic(IL) + Bulgarian + Croatian + Danish + Finnish + Romanian + Swedish + Thai + Turkish + Ukrainian + Vietnamese + + + + EMERGENCY + +
+
+
+
+
diff --git a/combobox/overview/src/app/app.component.ts b/combobox/overview/src/app/app.component.ts new file mode 100644 index 000000000..ac01217ac --- /dev/null +++ b/combobox/overview/src/app/app.component.ts @@ -0,0 +1,43 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + @ViewChild('combobox2', { read: ComboBoxComponent, static: false }) combobox2: ComboBoxComponent; + @ViewChild('combobox3', { read: ComboBoxComponent, static: false }) combobox3: ComboBoxComponent; + @ViewChild('combobox4', { read: ComboBoxComponent, static: false }) combobox4: ComboBoxComponent; + @ViewChild('combobox5', { read: ComboBoxComponent, static: false }) combobox5: ComboBoxComponent; + @ViewChild('combobox6', { read: ComboBoxComponent, static: false }) combobox6: ComboBoxComponent; + @ViewChild('combobox7', { read: ComboBoxComponent, static: false }) combobox7: ComboBoxComponent; + @ViewChild('combobox8', { read: ComboBoxComponent, static: false }) combobox8: ComboBoxComponent; + @ViewChild('combobox9', { read: ComboBoxComponent, static: false }) combobox9: ComboBoxComponent; + @ViewChild('combobox10', { read: ComboBoxComponent, static: false }) combobox10: ComboBoxComponent; + @ViewChild('combobox11', { read: ComboBoxComponent, static: false }) combobox11: ComboBoxComponent; + @ViewChild('combobox12', { read: ComboBoxComponent, static: false }) combobox12: ComboBoxComponent; + @ViewChild('combobox13', { read: ComboBoxComponent, static: false }) combobox13: ComboBoxComponent; + @ViewChild('combobox14', { read: ComboBoxComponent, static: false }) combobox14: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + // Your code here. + + } +} \ No newline at end of file diff --git a/combobox/overview/src/app/app.module.ts b/combobox/overview/src/app/app.module.ts new file mode 100644 index 000000000..0826607dc --- /dev/null +++ b/combobox/overview/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { ComboBoxModule } from "@smart-webcomponents-angular/combobox"; +import { ButtonModule } from "@smart-webcomponents-angular/button"; + +import { AppComponent } from "./app.component"; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, ButtonModule, ComboBoxModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) +export class AppModule {} diff --git a/combobox/overview/src/app/main.ts b/combobox/overview/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/overview/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/overview/src/assets/fonts.css b/combobox/overview/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/overview/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/overview/src/assets/styles.css b/combobox/overview/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/overview/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/overview/src/index.html b/combobox/overview/src/index.html new file mode 100644 index 000000000..db93ab8a8 --- /dev/null +++ b/combobox/overview/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Overview + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/overview/src/main.ts b/combobox/overview/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/overview/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/overview/src/polyfills.ts b/combobox/overview/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/overview/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/overview/src/tsconfig.app.json b/combobox/overview/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/overview/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/overview/src/tsconfig.json b/combobox/overview/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/overview/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/popup-resizing/angular.json b/combobox/popup-resizing/angular.json new file mode 100644 index 000000000..98eef8dac --- /dev/null +++ b/combobox/popup-resizing/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/popup-resizing/package.json b/combobox/popup-resizing/package.json new file mode 100644 index 000000000..f72328dcd --- /dev/null +++ b/combobox/popup-resizing/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-combobox-popup-resizing", + "description": "Angular combobox popup-resizing example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/popup-resizing/src/app/app.component.css b/combobox/popup-resizing/src/app/app.component.css new file mode 100644 index 000000000..6e2b94949 --- /dev/null +++ b/combobox/popup-resizing/src/app/app.component.css @@ -0,0 +1,26 @@ +smart-combo-box { + position: relative; + top: 260px; +} + +@media only screen and (max-width: 500px) { + body, html { + font-size: 12px; + width: 320px; + } + smart-combo-box { + position: static; + } + + .ddp { + display: none; + } +} + +smart-combo-box .smart-drop-down { + --smart-drop-down-element-max-height: 250px; +} + +html, body { + min-height: 900px; +} \ No newline at end of file diff --git a/combobox/popup-resizing/src/app/app.component.html b/combobox/popup-resizing/src/app/app.component.html new file mode 100644 index 000000000..33c828c41 --- /dev/null +++ b/combobox/popup-resizing/src/app/app.component.html @@ -0,0 +1,44 @@ + + Affogato + Americano + Bicerin + Breve + Cappuccino + Cafe Crema + Cafe Corretto + Cafe macchiato + Cafe mocha + Cortado + Cuban espresso + Espresso + Eiskaffee + Frappuccino + Galao + Greek frappe coffee + Iced Coffee + Instant Coffee + Latte + Liqueur coffee + +
+
Resize Mode
+
+ None +
+
+ Horizontal +
+
+ Both +
+
+ Vertical +
+
+
+
DropDown position
+
+ Bottom + Top +
+
\ No newline at end of file diff --git a/combobox/popup-resizing/src/app/app.component.ts b/combobox/popup-resizing/src/app/app.component.ts new file mode 100644 index 000000000..ec0b8faa2 --- /dev/null +++ b/combobox/popup-resizing/src/app/app.component.ts @@ -0,0 +1,61 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + @ViewChild('radioButtonNone', { read: RadioButtonComponent, static: false }) radioButtonNone: RadioButtonComponent; + @ViewChild('radioButtonHorizontal', { read: RadioButtonComponent, static: false }) radioButtonHorizontal: RadioButtonComponent; + @ViewChild('radioButtonBoth', { read: RadioButtonComponent, static: false }) radioButtonBoth: RadioButtonComponent; + @ViewChild('radioButtonVertical', { read: RadioButtonComponent, static: false }) radioButtonVertical: RadioButtonComponent; + @ViewChild('radioButtonBottom', { read: RadioButtonComponent, static: false }) radioButtonBottom: RadioButtonComponent; + @ViewChild('radioButtonTop', { read: RadioButtonComponent, static: false }) radioButtonTop: RadioButtonComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + comboBox = that.combobox; + + that.radioButtonNone.addEventListener('change', function ():void { + comboBox.resizeMode = 'none'; + }); + + that.radioButtonVertical.addEventListener('change', function ():void { + comboBox.resizeMode = 'vertical'; + }); + + that.radioButtonHorizontal.addEventListener('change', function ():void { + comboBox.resizeMode = 'horizontal'; + }); + + that.radioButtonBoth.addEventListener('change', function ():void { + comboBox.resizeMode = 'both'; + }); + + that.radioButtonBottom.addEventListener('change', function ():void { + comboBox.dropDownPosition = 'bottom'; + }); + + that.radioButtonTop.addEventListener('change', function ():void { + comboBox.dropDownPosition = 'top'; + }); + } +} \ No newline at end of file diff --git a/combobox/popup-resizing/src/app/app.module.ts b/combobox/popup-resizing/src/app/app.module.ts new file mode 100644 index 000000000..b89258eeb --- /dev/null +++ b/combobox/popup-resizing/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/popup-resizing/src/app/main.ts b/combobox/popup-resizing/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/popup-resizing/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/popup-resizing/src/assets/fonts.css b/combobox/popup-resizing/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/popup-resizing/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/popup-resizing/src/assets/styles.css b/combobox/popup-resizing/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/popup-resizing/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/popup-resizing/src/index.html b/combobox/popup-resizing/src/index.html new file mode 100644 index 000000000..87f2f3948 --- /dev/null +++ b/combobox/popup-resizing/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Popup-resizing + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/popup-resizing/src/main.ts b/combobox/popup-resizing/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/popup-resizing/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/popup-resizing/src/polyfills.ts b/combobox/popup-resizing/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/popup-resizing/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/popup-resizing/src/tsconfig.app.json b/combobox/popup-resizing/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/popup-resizing/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/popup-resizing/src/tsconfig.json b/combobox/popup-resizing/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/popup-resizing/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/position/angular.json b/combobox/position/angular.json new file mode 100644 index 000000000..98eef8dac --- /dev/null +++ b/combobox/position/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/position/package.json b/combobox/position/package.json new file mode 100644 index 000000000..70ee44f1a --- /dev/null +++ b/combobox/position/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-combobox-position", + "description": "Angular combobox position example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/combobox": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/position/src/app/app.component.css b/combobox/position/src/app/app.component.css new file mode 100644 index 000000000..ab551bfe5 --- /dev/null +++ b/combobox/position/src/app/app.component.css @@ -0,0 +1,11 @@ +smart-combo-box { + position: relative; + top: 260px; +} +smart-combo-box .smart-drop-down { + --smart-drop-down-element-max-height: 250px; +} + +html, body { + min-height: 900px; +} \ No newline at end of file diff --git a/combobox/position/src/app/app.component.html b/combobox/position/src/app/app.component.html new file mode 100644 index 000000000..2a5787999 --- /dev/null +++ b/combobox/position/src/app/app.component.html @@ -0,0 +1,30 @@ +
+ +
+
DropDown list Position:
+
+ Auto +
+
+ Bottom +
+
+ Overlay-bottom +
+
+ Overlay-center +
+
+ Overlay-top +
+
+ Top +
+
+ Center-bottom +
+
+ Center-top +
+
+
\ No newline at end of file diff --git a/combobox/position/src/app/app.component.ts b/combobox/position/src/app/app.component.ts new file mode 100644 index 000000000..1cefbf693 --- /dev/null +++ b/combobox/position/src/app/app.component.ts @@ -0,0 +1,104 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + @ViewChild('radiobuttonauto', { read: RadioButtonComponent, static: false }) radiobuttonauto: RadioButtonComponent; + @ViewChild('radiobuttonbottom', { read: RadioButtonComponent, static: false }) radiobuttonbottom: RadioButtonComponent; + @ViewChild('radiobuttonoverlaybottom', { read: RadioButtonComponent, static: false }) radiobuttonoverlaybottom: RadioButtonComponent; + @ViewChild('radiobuttonoverlaycenter', { read: RadioButtonComponent, static: false }) radiobuttonoverlaycenter: RadioButtonComponent; + @ViewChild('radiobuttonoverlaytop', { read: RadioButtonComponent, static: false }) radiobuttonoverlaytop: RadioButtonComponent; + @ViewChild('radiobuttontop', { read: RadioButtonComponent, static: false }) radiobuttontop: RadioButtonComponent; + @ViewChild('radiobuttoncenterbottom', { read: RadioButtonComponent, static: false }) radiobuttoncenterbottom: RadioButtonComponent; + @ViewChild('radiobuttoncentertop', { read: RadioButtonComponent, static: false }) radiobuttoncentertop: RadioButtonComponent; + + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + comboBox = that.combobox; + + comboBox.dataSource = + [ + "Affogato", + "Americano", + "Bicerin", + "Breve", + "Café Bombón", + "Café au lait", + "Caffé Corretto", + "Café Crema", + "Caffé Latte", + "Caffé macchiato", + "Café mélange", + "Coffee milk", + "Cafe mocha", + "Cappuccino", + "Carajillo", + "Cortado", + "Cuban espresso", + "Espresso", + "Eiskaffee", + "The Flat White", + "Frappuccino", + "Galao", + "Greek frappé coffee", + "Alabala", + "Indian filter coffee", + "Instant coffee", + "Irish coffee", + "Liqueur coffee" + ]; + + that.radiobuttonauto.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'auto'; + }); + + that.radiobuttonbottom.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'bottom'; + }); + + that.radiobuttonoverlaybottom.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'overlay-bottom'; + }); + + that.radiobuttonoverlaycenter.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'overlay-center'; + }); + + that.radiobuttonoverlaytop.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'overlay-top'; + }); + + that.radiobuttontop.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'top'; + }); + + that.radiobuttoncenterbottom.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'center-bottom'; + }); + + that.radiobuttoncentertop.addEventListener('change', function (): void { + comboBox.dropDownPosition = 'center-top'; + }); + } +} \ No newline at end of file diff --git a/combobox/position/src/app/app.module.ts b/combobox/position/src/app/app.module.ts new file mode 100644 index 000000000..75c969086 --- /dev/null +++ b/combobox/position/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox';import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/position/src/app/main.ts b/combobox/position/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/position/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/position/src/assets/fonts.css b/combobox/position/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/position/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/position/src/assets/styles.css b/combobox/position/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/position/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/position/src/index.html b/combobox/position/src/index.html new file mode 100644 index 000000000..b1cc444b6 --- /dev/null +++ b/combobox/position/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Position + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/position/src/main.ts b/combobox/position/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/position/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/position/src/polyfills.ts b/combobox/position/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/position/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/position/src/tsconfig.app.json b/combobox/position/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/position/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/position/src/tsconfig.json b/combobox/position/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/position/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/right-to-left/angular.json b/combobox/right-to-left/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/right-to-left/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/right-to-left/package.json b/combobox/right-to-left/package.json new file mode 100644 index 000000000..1c398c21d --- /dev/null +++ b/combobox/right-to-left/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-right-to-left", + "description": "Angular combobox right-to-left example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/right-to-left/src/app/app.component.css b/combobox/right-to-left/src/app/app.component.css new file mode 100644 index 000000000..357babfe2 --- /dev/null +++ b/combobox/right-to-left/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/right-to-left/src/app/app.component.html b/combobox/right-to-left/src/app/app.component.html new file mode 100644 index 000000000..e78669b34 --- /dev/null +++ b/combobox/right-to-left/src/app/app.component.html @@ -0,0 +1,25 @@ +
ComboBox fully supports right-to-left (RTL) language locales. You can + enable/disable the right-to-left support using rightToLeft property.
+ + אפוגאטו + אמריקאי + Bicerin + קצר + קפוצ'ינו + קפה קרמה + בית קפה נכון + בית קפה מוכתם + קפה מוקה + מנותק + אספרסו קובני + אספרסו + אייסקאפי + פרפוצ'ינו + שחק + יווני מכה קפה + קפה קר + קפה נמס + חלב + קפה ליקר + \ No newline at end of file diff --git a/combobox/right-to-left/src/app/app.component.ts b/combobox/right-to-left/src/app/app.component.ts new file mode 100644 index 000000000..b61a29784 --- /dev/null +++ b/combobox/right-to-left/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/combobox/right-to-left/src/app/app.module.ts b/combobox/right-to-left/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/right-to-left/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/right-to-left/src/app/main.ts b/combobox/right-to-left/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/right-to-left/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/right-to-left/src/assets/fonts.css b/combobox/right-to-left/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/right-to-left/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/right-to-left/src/assets/styles.css b/combobox/right-to-left/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/right-to-left/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/right-to-left/src/index.html b/combobox/right-to-left/src/index.html new file mode 100644 index 000000000..5e39500a9 --- /dev/null +++ b/combobox/right-to-left/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Combobox Right-to-left + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/right-to-left/src/main.ts b/combobox/right-to-left/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/right-to-left/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/right-to-left/src/polyfills.ts b/combobox/right-to-left/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/right-to-left/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/right-to-left/src/tsconfig.app.json b/combobox/right-to-left/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/right-to-left/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/right-to-left/src/tsconfig.json b/combobox/right-to-left/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/right-to-left/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/combobox/token-template/angular.json b/combobox/token-template/angular.json new file mode 100644 index 000000000..ead558090 --- /dev/null +++ b/combobox/token-template/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.combobox.css", + "./node_modules/@smart-webcomponents-angular/combobox/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/combobox/token-template/package.json b/combobox/token-template/package.json new file mode 100644 index 000000000..2ce12a0ed --- /dev/null +++ b/combobox/token-template/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-combobox-token-template", + "description": "Angular combobox token-template example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/combobox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/combobox/token-template/src/app/app.component.css b/combobox/token-template/src/app/app.component.css new file mode 100644 index 000000000..d7e3f4a99 --- /dev/null +++ b/combobox/token-template/src/app/app.component.css @@ -0,0 +1,20 @@ +.avatar { + border-radius: 50%; +} + +.smart-token > span:first-of-type { + padding-left: initial; +} + +.smart-token > span { + display: table-cell; + vertical-align: middle; + padding-left: 5px; +} + +smart-combo-box[selection-display-mode="tokens"] .smart-selection-field > .smart-token { + box-shadow: initial; +} +smart-combo-box{ + width: 300px; +} \ No newline at end of file diff --git a/combobox/token-template/src/app/app.component.html b/combobox/token-template/src/app/app.component.html new file mode 100644 index 000000000..9c5116dd9 --- /dev/null +++ b/combobox/token-template/src/app/app.component.html @@ -0,0 +1,21 @@ + + + Andrew Watson + Anne Kean + Avril Janin + Janet Pattenson + Johanna Svensson + Johnny Abana + Laura Thene + Margaret Vetton + Maria Sevrano + Mark Yemen + Maya Verdara + Michael Barton + Monica Oghini + Nancy Queens + Robert Drawny + Steven Fedrichy + Toni Versachi + \ No newline at end of file diff --git a/combobox/token-template/src/app/app.component.ts b/combobox/token-template/src/app/app.component.ts new file mode 100644 index 000000000..71e1168cd --- /dev/null +++ b/combobox/token-template/src/app/app.component.ts @@ -0,0 +1,89 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { ComboBoxComponent } from '@smart-webcomponents-angular/combobox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.combobox.addEventListener('change', function (): void { + const tokens: HTMLCollection = that.combobox.nativeElement.getElementsByClassName('smart-token'); + + for (let i = 0; i < tokens.length; i++) { + var token: HTMLElement = tokens[i] as HTMLElement; + var img: HTMLImageElement = token.querySelector('.avatar'); + + if (token.textContent.indexOf('Anne Kean') > -1) { + img.src = './../../../src/images/phonebook/anne.png'; + } + else if (token.textContent.indexOf('Andrew Watson') > -1) { + img.src = './../../../src/images/phonebook/andrew.png'; + } + else if (token.textContent.indexOf('Avril Janin') > -1) { + img.src = './../../../src/images/phonebook/avril.jpeg'; + } + else if (token.textContent.indexOf('Janet Pattenson') > -1) { + img.src = './../../../src/images/phonebook/janet.png'; + } + else if (token.textContent.indexOf('Johanna Svensson') > -1) { + img.src = './../../../src/images/phonebook/johanna.jpeg'; + } + else if (token.textContent.indexOf('Johnny Abana') > -1) { + img.src = './../../../src/images/phonebook/johnny.jpeg'; + } + else if (token.textContent.indexOf('Laura Thene') > -1) { + img.src = './../../../src/images/phonebook/laura.png'; + } + else if (token.textContent.indexOf('Margaret Vetton') > -1) { + img.src = './../../../src/images/phonebook/margaret.png'; + } + else if (token.textContent.indexOf('Maria Sevrano') > -1) { + img.src = './../../../src/images/phonebook/Maria.jpeg'; + } + else if (token.textContent.indexOf('Mark Yemen') > -1) { + img.src = './../../../src/images/phonebook/mark.jpeg'; + } + else if (token.textContent.indexOf('Maya Verdara') > -1) { + img.src = './../../../src/images/phonebook/maya.jpeg'; + } + else if (token.textContent.indexOf('Michael Barton') > -1) { + img.src = './../../../src/images/phonebook/michael.png'; + } + else if (token.textContent.indexOf('Monica Oghini') > -1) { + img.src = './../../../src/images/phonebook/monica.jpeg'; + } + else if (token.textContent.indexOf('Nancy Queens') > -1) { + img.src = './../../../src/images/phonebook/nancy.png'; + } + else if (token.textContent.indexOf('Robert Drawny') > -1) { + img.src = './../../../src/images/phonebook/robert.png'; + } + else if (token.textContent.indexOf('Steven Fedrichy') > -1) { + img.src = './../../../src/images/phonebook/steven.jpeg'; + } + else if (token.textContent.indexOf('Toni Versachi') > -1) { + img.src = './../../../src/images/phonebook/toni.jpeg'; + } + } + }); + } +} \ No newline at end of file diff --git a/combobox/token-template/src/app/app.module.ts b/combobox/token-template/src/app/app.module.ts new file mode 100644 index 000000000..002cf89a2 --- /dev/null +++ b/combobox/token-template/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ComboBoxModule } from '@smart-webcomponents-angular/combobox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ComboBoxModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/combobox/token-template/src/app/main.ts b/combobox/token-template/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/combobox/token-template/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/combobox/token-template/src/assets/fonts.css b/combobox/token-template/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/combobox/token-template/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/combobox/token-template/src/assets/styles.css b/combobox/token-template/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/combobox/token-template/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/combobox/token-template/src/index.html b/combobox/token-template/src/index.html new file mode 100644 index 000000000..83e15da39 --- /dev/null +++ b/combobox/token-template/src/index.html @@ -0,0 +1,40 @@ + + + + + Angular Combobox Token-template + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/combobox/token-template/src/main.ts b/combobox/token-template/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/combobox/token-template/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/combobox/token-template/src/polyfills.ts b/combobox/token-template/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/combobox/token-template/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/combobox/token-template/src/tsconfig.app.json b/combobox/token-template/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/combobox/token-template/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/combobox/token-template/src/tsconfig.json b/combobox/token-template/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/combobox/token-template/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/basic/angular.json b/datetimepicker/basic/angular.json new file mode 100644 index 000000000..f423720d4 --- /dev/null +++ b/datetimepicker/basic/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/basic/package.json b/datetimepicker/basic/package.json new file mode 100644 index 000000000..9d914745d --- /dev/null +++ b/datetimepicker/basic/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-datetimepicker-basic", + "description": "Angular datetimepicker basic example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/basic/src/app/app.component.css b/datetimepicker/basic/src/app/app.component.css new file mode 100644 index 000000000..3c18520f6 --- /dev/null +++ b/datetimepicker/basic/src/app/app.component.css @@ -0,0 +1,5 @@ +@media only screen and (max-width: 500px) { + .smart-drop-down.smart-date-time-drop-down { + left: 70%; + } +} diff --git a/datetimepicker/basic/src/app/app.component.html b/datetimepicker/basic/src/app/app.component.html new file mode 100644 index 000000000..8899c3a54 --- /dev/null +++ b/datetimepicker/basic/src/app/app.component.html @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/datetimepicker/basic/src/app/app.component.ts b/datetimepicker/basic/src/app/app.component.ts new file mode 100644 index 000000000..056f52b6f --- /dev/null +++ b/datetimepicker/basic/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/datetimepicker/basic/src/app/app.module.ts b/datetimepicker/basic/src/app/app.module.ts new file mode 100644 index 000000000..bb8c4ec8f --- /dev/null +++ b/datetimepicker/basic/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/basic/src/app/main.ts b/datetimepicker/basic/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/basic/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/basic/src/assets/fonts.css b/datetimepicker/basic/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/basic/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/basic/src/assets/styles.css b/datetimepicker/basic/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/basic/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/basic/src/index.html b/datetimepicker/basic/src/index.html new file mode 100644 index 000000000..ccd8c66de --- /dev/null +++ b/datetimepicker/basic/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Basic + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/basic/src/main.ts b/datetimepicker/basic/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/basic/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/basic/src/polyfills.ts b/datetimepicker/basic/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/basic/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/basic/src/tsconfig.app.json b/datetimepicker/basic/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/basic/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/basic/src/tsconfig.json b/datetimepicker/basic/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/basic/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/drop-down-display-mode/angular.json b/datetimepicker/drop-down-display-mode/angular.json new file mode 100644 index 000000000..960285248 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/drop-down-display-mode/package.json b/datetimepicker/drop-down-display-mode/package.json new file mode 100644 index 000000000..1b746b497 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-datetimepicker-drop-down-display-mode", + "description": "Angular datetimepicker drop-down-display-mode example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/drop-down-display-mode/src/app/app.component.css b/datetimepicker/drop-down-display-mode/src/app/app.component.css new file mode 100644 index 000000000..3c18520f6 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/app/app.component.css @@ -0,0 +1,5 @@ +@media only screen and (max-width: 500px) { + .smart-drop-down.smart-date-time-drop-down { + left: 70%; + } +} diff --git a/datetimepicker/drop-down-display-mode/src/app/app.component.html b/datetimepicker/drop-down-display-mode/src/app/app.component.html new file mode 100644 index 000000000..f1914f051 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/app/app.component.html @@ -0,0 +1,13 @@ + +
+
Display Mode
+
+ Default + Classic (NI theme) + Calendar only + Time picker only + Auto (based on formatString) +
+
\ No newline at end of file diff --git a/datetimepicker/drop-down-display-mode/src/app/app.component.ts b/datetimepicker/drop-down-display-mode/src/app/app.component.ts new file mode 100644 index 000000000..d2c9f5403 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/app/app.component.ts @@ -0,0 +1,50 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton: RadioButtonComponent; + @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2: RadioButtonComponent; + @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3: RadioButtonComponent; + @ViewChild('radiobutton4', { read: RadioButtonComponent, static: false }) radiobutton4: RadioButtonComponent; + @ViewChild('radiobutton5', { read: RadioButtonComponent, static: false }) radiobutton5: RadioButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.radiobutton.addEventListener('change', function (event) { + that.datetimepicker.dropDownDisplayMode = 'default'; + }); + that.radiobutton2.addEventListener('change', function (event) { + that.datetimepicker.dropDownDisplayMode = 'classic'; + }); + that.radiobutton3.addEventListener('change', function (event) { + that.datetimepicker.dropDownDisplayMode = 'calendar'; + }); + that.radiobutton4.addEventListener('change', function (event) { + that.datetimepicker.dropDownDisplayMode = 'timePicker'; + }); + that.radiobutton5.addEventListener('change', function (event) { + that.datetimepicker.dropDownDisplayMode = 'auto'; + }); + } +} \ No newline at end of file diff --git a/datetimepicker/drop-down-display-mode/src/app/app.module.ts b/datetimepicker/drop-down-display-mode/src/app/app.module.ts new file mode 100644 index 000000000..838db3bca --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/drop-down-display-mode/src/app/main.ts b/datetimepicker/drop-down-display-mode/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/drop-down-display-mode/src/assets/fonts.css b/datetimepicker/drop-down-display-mode/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/drop-down-display-mode/src/assets/styles.css b/datetimepicker/drop-down-display-mode/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/drop-down-display-mode/src/index.html b/datetimepicker/drop-down-display-mode/src/index.html new file mode 100644 index 000000000..d6e1a8d32 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Drop-down-display-mode + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/drop-down-display-mode/src/main.ts b/datetimepicker/drop-down-display-mode/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/drop-down-display-mode/src/polyfills.ts b/datetimepicker/drop-down-display-mode/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/drop-down-display-mode/src/tsconfig.app.json b/datetimepicker/drop-down-display-mode/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/drop-down-display-mode/src/tsconfig.json b/datetimepicker/drop-down-display-mode/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/drop-down-display-mode/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/drop-down-position/angular.json b/datetimepicker/drop-down-position/angular.json new file mode 100644 index 000000000..960285248 --- /dev/null +++ b/datetimepicker/drop-down-position/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/drop-down-position/package.json b/datetimepicker/drop-down-position/package.json new file mode 100644 index 000000000..275f3c9eb --- /dev/null +++ b/datetimepicker/drop-down-position/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-datetimepicker-drop-down-position", + "description": "Angular datetimepicker drop-down-position example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/drop-down-position/src/app/app.component.css b/datetimepicker/drop-down-position/src/app/app.component.css new file mode 100644 index 000000000..71b402ef4 --- /dev/null +++ b/datetimepicker/drop-down-position/src/app/app.component.css @@ -0,0 +1,27 @@ +html, body { + height: 700px; +} +smart-date-time-picker { + top: 350px; + left: 25%; + position: relative; +} + +@media only screen and (max-width: 600px) { + html, body { + height: initial; + } + + .options { + display: none; + } + smart-date-time-picker { + top: 0px; + left: 0px; + } +} +@media only screen and (max-width: 500px) { + .smart-drop-down.smart-date-time-drop-down { + left: 125%; + } +} diff --git a/datetimepicker/drop-down-position/src/app/app.component.html b/datetimepicker/drop-down-position/src/app/app.component.html new file mode 100644 index 000000000..1bd6b7373 --- /dev/null +++ b/datetimepicker/drop-down-position/src/app/app.component.html @@ -0,0 +1,23 @@ + +
+
Dropdown Position:
+
+ Bottom + Top +
+ Overlay bottom + Overlay center + Overlay top +
+ Center bottom + Center top +
+
+
Calendar Button Position:
+
+ Left + Right + None +
+
\ No newline at end of file diff --git a/datetimepicker/drop-down-position/src/app/app.component.ts b/datetimepicker/drop-down-position/src/app/app.component.ts new file mode 100644 index 000000000..dc12e78a8 --- /dev/null +++ b/datetimepicker/drop-down-position/src/app/app.component.ts @@ -0,0 +1,72 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('radiobutton', { read: RadioButtonComponent, static: false }) radiobutton: RadioButtonComponent; + @ViewChild('radiobutton2', { read: RadioButtonComponent, static: false }) radiobutton2: RadioButtonComponent; + @ViewChild('radiobutton3', { read: RadioButtonComponent, static: false }) radiobutton3: RadioButtonComponent; + @ViewChild('radiobutton4', { read: RadioButtonComponent, static: false }) radiobutton4: RadioButtonComponent; + @ViewChild('radiobutton5', { read: RadioButtonComponent, static: false }) radiobutton5: RadioButtonComponent; + @ViewChild('radiobutton6', { read: RadioButtonComponent, static: false }) radiobutton6: RadioButtonComponent; + @ViewChild('radiobutton7', { read: RadioButtonComponent, static: false }) radiobutton7: RadioButtonComponent; + @ViewChild('radiobutton8', { read: RadioButtonComponent, static: false }) radiobutton8: RadioButtonComponent; + @ViewChild('radiobutton9', { read: RadioButtonComponent, static: false }) radiobutton9: RadioButtonComponent; + @ViewChild('radiobutton10', { read: RadioButtonComponent, static: false }) radiobutton10: RadioButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.radiobutton.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'bottom'; + }); + that.radiobutton2.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'top'; + }); + that.radiobutton3.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'overlay-bottom'; + }); + that.radiobutton4.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'overlay-center'; + }); + that.radiobutton5.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'overlay-top'; + }); + that.radiobutton6.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'center-bottom'; + }); + that.radiobutton7.addEventListener('change', function (event) { + that.datetimepicker.dropDownPosition = 'center-top'; + }); + that.radiobutton8.addEventListener('change', function (event) { + that.datetimepicker.calendarButton = true; + that.datetimepicker.calendarButtonPosition = 'left'; + }); + that.radiobutton9.addEventListener('change', function (event) { + that.datetimepicker.calendarButton = true; + that.datetimepicker.calendarButtonPosition = 'right'; + }); + that.radiobutton10.addEventListener('change', function (event) { + that.datetimepicker.calendarButton = false; + }); + } +} \ No newline at end of file diff --git a/datetimepicker/drop-down-position/src/app/app.module.ts b/datetimepicker/drop-down-position/src/app/app.module.ts new file mode 100644 index 000000000..838db3bca --- /dev/null +++ b/datetimepicker/drop-down-position/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/drop-down-position/src/app/main.ts b/datetimepicker/drop-down-position/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/drop-down-position/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/drop-down-position/src/assets/fonts.css b/datetimepicker/drop-down-position/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/drop-down-position/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/drop-down-position/src/assets/styles.css b/datetimepicker/drop-down-position/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/drop-down-position/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/drop-down-position/src/index.html b/datetimepicker/drop-down-position/src/index.html new file mode 100644 index 000000000..d74f0c7d7 --- /dev/null +++ b/datetimepicker/drop-down-position/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Drop-down-position + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/drop-down-position/src/main.ts b/datetimepicker/drop-down-position/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/drop-down-position/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/drop-down-position/src/polyfills.ts b/datetimepicker/drop-down-position/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/drop-down-position/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/drop-down-position/src/tsconfig.app.json b/datetimepicker/drop-down-position/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/drop-down-position/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/drop-down-position/src/tsconfig.json b/datetimepicker/drop-down-position/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/drop-down-position/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/edit-modes/angular.json b/datetimepicker/edit-modes/angular.json new file mode 100644 index 000000000..f423720d4 --- /dev/null +++ b/datetimepicker/edit-modes/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/edit-modes/package.json b/datetimepicker/edit-modes/package.json new file mode 100644 index 000000000..759700856 --- /dev/null +++ b/datetimepicker/edit-modes/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-datetimepicker-edit-modes", + "description": "Angular datetimepicker edit-modes example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/edit-modes/src/app/app.component.css b/datetimepicker/edit-modes/src/app/app.component.css new file mode 100644 index 000000000..a22888937 --- /dev/null +++ b/datetimepicker/edit-modes/src/app/app.component.css @@ -0,0 +1,8 @@ +html, body { + min-height:600px; +} +@media only screen and (max-width: 500px) { + .smart-drop-down.smart-date-time-drop-down { + left: 70%; + } +} diff --git a/datetimepicker/edit-modes/src/app/app.component.html b/datetimepicker/edit-modes/src/app/app.component.html new file mode 100644 index 000000000..7aab31440 --- /dev/null +++ b/datetimepicker/edit-modes/src/app/app.component.html @@ -0,0 +1,17 @@ +

editMode: 'full' - Value validation on blur only.

+ +
+

editMode: 'default' - Validation while typing and on blur.

+ +
+

+ editMode: 'partial' - Strict Validation while typing. Delete/Backspace + set the edit part to min value. +

+ \ No newline at end of file diff --git a/datetimepicker/edit-modes/src/app/app.component.ts b/datetimepicker/edit-modes/src/app/app.component.ts new file mode 100644 index 000000000..8219f045b --- /dev/null +++ b/datetimepicker/edit-modes/src/app/app.component.ts @@ -0,0 +1,31 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('datetimepicker2', { read: DateTimePickerComponent, static: false }) datetimepicker2: DateTimePickerComponent; + @ViewChild('datetimepicker3', { read: DateTimePickerComponent, static: false }) datetimepicker3: DateTimePickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/datetimepicker/edit-modes/src/app/app.module.ts b/datetimepicker/edit-modes/src/app/app.module.ts new file mode 100644 index 000000000..bb8c4ec8f --- /dev/null +++ b/datetimepicker/edit-modes/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/edit-modes/src/app/main.ts b/datetimepicker/edit-modes/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/edit-modes/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/edit-modes/src/assets/fonts.css b/datetimepicker/edit-modes/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/edit-modes/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/edit-modes/src/assets/styles.css b/datetimepicker/edit-modes/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/edit-modes/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/edit-modes/src/index.html b/datetimepicker/edit-modes/src/index.html new file mode 100644 index 000000000..cc25c7e01 --- /dev/null +++ b/datetimepicker/edit-modes/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Edit-modes + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/edit-modes/src/main.ts b/datetimepicker/edit-modes/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/edit-modes/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/edit-modes/src/polyfills.ts b/datetimepicker/edit-modes/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/edit-modes/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/edit-modes/src/tsconfig.app.json b/datetimepicker/edit-modes/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/edit-modes/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/edit-modes/src/tsconfig.json b/datetimepicker/edit-modes/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/edit-modes/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/formats/angular.json b/datetimepicker/formats/angular.json new file mode 100644 index 000000000..2c04336de --- /dev/null +++ b/datetimepicker/formats/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/formats/package.json b/datetimepicker/formats/package.json new file mode 100644 index 000000000..239ccecb9 --- /dev/null +++ b/datetimepicker/formats/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-datetimepicker-formats", + "description": "Angular datetimepicker formats example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/formats/src/app/app.component.css b/datetimepicker/formats/src/app/app.component.css new file mode 100644 index 000000000..30d9514c4 --- /dev/null +++ b/datetimepicker/formats/src/app/app.component.css @@ -0,0 +1,6 @@ +smart-date-time-picker { + position: relative; + width: 300px; + left: 5px; +} + diff --git a/datetimepicker/formats/src/app/app.component.html b/datetimepicker/formats/src/app/app.component.html new file mode 100644 index 000000000..347e2b9f3 --- /dev/null +++ b/datetimepicker/formats/src/app/app.component.html @@ -0,0 +1,23 @@ + +
+
Formats
+
+ + default pattern + short date pattern + long date pattern + short time pattern + long time pattern + long date, short time pattern + long date, long time pattern + month/day pattern + month/year pattern + full precision + full precision time + processor precision + processor precision time + custom + +
+
\ No newline at end of file diff --git a/datetimepicker/formats/src/app/app.component.ts b/datetimepicker/formats/src/app/app.component.ts new file mode 100644 index 000000000..6612c4228 --- /dev/null +++ b/datetimepicker/formats/src/app/app.component.ts @@ -0,0 +1,34 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.dropdownlist.addEventListener('change', function (event: any) { + that.datetimepicker.formatString = event.detail.value; + }); + } +} \ No newline at end of file diff --git a/datetimepicker/formats/src/app/app.module.ts b/datetimepicker/formats/src/app/app.module.ts new file mode 100644 index 000000000..34f81c383 --- /dev/null +++ b/datetimepicker/formats/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker';import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/formats/src/app/main.ts b/datetimepicker/formats/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/formats/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/formats/src/assets/fonts.css b/datetimepicker/formats/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/formats/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/formats/src/assets/styles.css b/datetimepicker/formats/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/formats/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/formats/src/index.html b/datetimepicker/formats/src/index.html new file mode 100644 index 000000000..6bedb242b --- /dev/null +++ b/datetimepicker/formats/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Formats + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/formats/src/main.ts b/datetimepicker/formats/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/formats/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/formats/src/polyfills.ts b/datetimepicker/formats/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/formats/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/formats/src/tsconfig.app.json b/datetimepicker/formats/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/formats/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/formats/src/tsconfig.json b/datetimepicker/formats/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/formats/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/forms/angular.json b/datetimepicker/forms/angular.json new file mode 100644 index 000000000..f34b99a41 --- /dev/null +++ b/datetimepicker/forms/angular.json @@ -0,0 +1,131 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css", + "./node_modules/@smart-webcomponents-angular/listbox/styles/smart.listbox.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/forms/package.json b/datetimepicker/forms/package.json new file mode 100644 index 000000000..262d43233 --- /dev/null +++ b/datetimepicker/forms/package.json @@ -0,0 +1,57 @@ +{ + "name": "angular-datetimepicker-forms", + "description": "Angular datetimepicker forms example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "@smart-webcomponents-angular/input": "9.2.22", + "@smart-webcomponents-angular/listbox": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/forms/src/app/app.component.css b/datetimepicker/forms/src/app/app.component.css new file mode 100644 index 000000000..df7c6c76d --- /dev/null +++ b/datetimepicker/forms/src/app/app.component.css @@ -0,0 +1,30 @@ +form { + display: flex; + width: 350px; + flex-direction: column; +} + +.form-row { + display: flex; + width: 350px; + flex-direction: column; + margin: 5px 0px; +} + +.form-component { + width: 100%; + margin: 5px 0px; +} + +.ng-valid[required], .ng-valid.required { + border-left: 5px solid #42A948; /* green */ + } + + .ng-invalid:not(form) { + border-left: 5px solid #a94442; /* red */ + } + + .alert { + background: #F2DEDE; + color: #a94442; + } \ No newline at end of file diff --git a/datetimepicker/forms/src/app/app.component.html b/datetimepicker/forms/src/app/app.component.html new file mode 100644 index 000000000..1a699089a --- /dev/null +++ b/datetimepicker/forms/src/app/app.component.html @@ -0,0 +1,68 @@ +
+

Hero Form

+
+
+ + + +
+ Name is required +
+
+ +
+ + + +
+
+ + + {{pow}} + +
+ Power is required +
+
+
+ + + +
+ Age is required +
+
+
+ Submit + New Hero + +
+
+
+ +
+

You submitted the following:

+
+
Name
+
{{ model.name }}
+
+
+
Alter Ego
+
{{ model.alterEgo }}
+
+
+
Age
+
{{ model.age | date : 'short' }}
+
+
+
Power
+
{{ model.power }}
+
+
+ Edit +
+

+

Changes Log:

+{{diagnostic}} \ No newline at end of file diff --git a/datetimepicker/forms/src/app/app.component.ts b/datetimepicker/forms/src/app/app.component.ts new file mode 100644 index 000000000..a3fa85718 --- /dev/null +++ b/datetimepicker/forms/src/app/app.component.ts @@ -0,0 +1,66 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + +export class Hero { + + constructor( + public id: number, + public name: string, + public power: string, + public age?: Date, + public alterEgo?: string + ) { } + +} + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('power', { read: DropDownListComponent, static: false }) power: DropDownListComponent; + @ViewChild('age', { read: DateTimePickerComponent, static: false }) age: DateTimePickerComponent; + + powers = ['Really Smart', 'Super Flexible', + 'Super Hot', 'Weather Changer']; + + model = new Hero(18, 'Dr IQ', this.powers[0], new Date(), 'Chuck Overstreet'); + + submitted = false; + + onSubmit() { + this.submitted = true; + } + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + } + + newHero() { + this.model = new Hero(42, '', ''); + } + + get diagnostic() { + const model = { + id: this.model.id, + name: this.model.name, + power: this.model.power, + age: this.model.age ? this.model.age.toISOString() : '', + alterEgo: this.model.alterEgo + } + + return JSON.stringify(model); + } +} \ No newline at end of file diff --git a/datetimepicker/forms/src/app/app.module.ts b/datetimepicker/forms/src/app/app.module.ts new file mode 100644 index 000000000..7f42141e6 --- /dev/null +++ b/datetimepicker/forms/src/app/app.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { InputModule } from '@smart-webcomponents-angular/input'; +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; +import { ListBoxModule } from '@smart-webcomponents-angular/listbox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, FormsModule, DropDownListModule, ButtonModule, ListBoxModule, DateTimePickerModule, InputModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/datetimepicker/forms/src/app/main.ts b/datetimepicker/forms/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/forms/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/forms/src/assets/fonts.css b/datetimepicker/forms/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/forms/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/forms/src/assets/styles.css b/datetimepicker/forms/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/forms/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/forms/src/index.html b/datetimepicker/forms/src/index.html new file mode 100644 index 000000000..8f5b4ce29 --- /dev/null +++ b/datetimepicker/forms/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Forms + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/forms/src/main.ts b/datetimepicker/forms/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/forms/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/forms/src/polyfills.ts b/datetimepicker/forms/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/forms/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/forms/src/tsconfig.app.json b/datetimepicker/forms/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/forms/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/forms/src/tsconfig.json b/datetimepicker/forms/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/forms/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/high-precision/angular.json b/datetimepicker/high-precision/angular.json new file mode 100644 index 000000000..f423720d4 --- /dev/null +++ b/datetimepicker/high-precision/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/high-precision/package.json b/datetimepicker/high-precision/package.json new file mode 100644 index 000000000..27668374d --- /dev/null +++ b/datetimepicker/high-precision/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-datetimepicker-high-precision", + "description": "Angular datetimepicker high-precision example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/high-precision/src/app/app.component.css b/datetimepicker/high-precision/src/app/app.component.css new file mode 100644 index 000000000..d21e438a0 --- /dev/null +++ b/datetimepicker/high-precision/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-date-time-picker{ + width:320px; +} diff --git a/datetimepicker/high-precision/src/app/app.component.html b/datetimepicker/high-precision/src/app/app.component.html new file mode 100644 index 000000000..375b011e4 --- /dev/null +++ b/datetimepicker/high-precision/src/app/app.component.html @@ -0,0 +1,3 @@ +

DateTime precision up to a yoctosecond (10⁻²⁴ second) support. Engineering/Scientific Formats

+ \ No newline at end of file diff --git a/datetimepicker/high-precision/src/app/app.component.ts b/datetimepicker/high-precision/src/app/app.component.ts new file mode 100644 index 000000000..056f52b6f --- /dev/null +++ b/datetimepicker/high-precision/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/datetimepicker/high-precision/src/app/app.module.ts b/datetimepicker/high-precision/src/app/app.module.ts new file mode 100644 index 000000000..bb8c4ec8f --- /dev/null +++ b/datetimepicker/high-precision/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/high-precision/src/app/main.ts b/datetimepicker/high-precision/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/high-precision/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/high-precision/src/assets/fonts.css b/datetimepicker/high-precision/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/high-precision/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/high-precision/src/assets/styles.css b/datetimepicker/high-precision/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/high-precision/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/high-precision/src/index.html b/datetimepicker/high-precision/src/index.html new file mode 100644 index 000000000..57458c800 --- /dev/null +++ b/datetimepicker/high-precision/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker High-precision + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/high-precision/src/main.ts b/datetimepicker/high-precision/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/high-precision/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/high-precision/src/polyfills.ts b/datetimepicker/high-precision/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/high-precision/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/high-precision/src/tsconfig.app.json b/datetimepicker/high-precision/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/high-precision/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/high-precision/src/tsconfig.json b/datetimepicker/high-precision/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/high-precision/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/localization/angular.json b/datetimepicker/localization/angular.json new file mode 100644 index 000000000..2c04336de --- /dev/null +++ b/datetimepicker/localization/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/localization/package.json b/datetimepicker/localization/package.json new file mode 100644 index 000000000..901915e8c --- /dev/null +++ b/datetimepicker/localization/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-datetimepicker-localization", + "description": "Angular datetimepicker localization example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/localization/src/app/app.component.css b/datetimepicker/localization/src/app/app.component.css new file mode 100644 index 000000000..79f44cae4 --- /dev/null +++ b/datetimepicker/localization/src/app/app.component.css @@ -0,0 +1,8 @@ +#chooseLocaleContainer { + margin-top: 250px; +} +@media only screen and (max-width: 500px) { + .smart-drop-down.smart-date-time-drop-down { + left: 70%; + } +} diff --git a/datetimepicker/localization/src/app/app.component.html b/datetimepicker/localization/src/app/app.component.html new file mode 100644 index 000000000..8fe493d0c --- /dev/null +++ b/datetimepicker/localization/src/app/app.component.html @@ -0,0 +1,16 @@ + +
+
Locales
+
+ + Bulgarian + English + French + German + Italian + Japanese + Spanish + +
+
\ No newline at end of file diff --git a/datetimepicker/localization/src/app/app.component.ts b/datetimepicker/localization/src/app/app.component.ts new file mode 100644 index 000000000..efb428ab6 --- /dev/null +++ b/datetimepicker/localization/src/app/app.component.ts @@ -0,0 +1,41 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.datetimepicker.messages.bg = { now: 'Сега', dateTabLabel: 'ДАТА', timeTabLabel: 'ВРЕМЕ' }; + that.datetimepicker.messages.fr = { now: 'À présent', dateTabLabel: 'DATE', timeTabLabel: 'TEMPS' }; + that.datetimepicker.messages.de = { now: 'Jetzt', dateTabLabel: 'DATUM', timeTabLabel: 'ZEIT' }; + that.datetimepicker.messages.it = { now: 'Adesso', dateTabLabel: 'DATA', timeTabLabel: 'TEMPO' }; + that.datetimepicker.messages.ja = { now: '今', dateTabLabel: '日付', timeTabLabel: '時間' }; + that.datetimepicker.messages.es = { now: 'Ahora', dateTabLabel: 'FECHA', timeTabLabel: 'HORA' }; + + that.dropdownlist.addEventListener('change', function (event: any) { + that.datetimepicker.locale = event.detail.value; + }); + } +} \ No newline at end of file diff --git a/datetimepicker/localization/src/app/app.module.ts b/datetimepicker/localization/src/app/app.module.ts new file mode 100644 index 000000000..37873cbbd --- /dev/null +++ b/datetimepicker/localization/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/localization/src/app/main.ts b/datetimepicker/localization/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/localization/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/localization/src/assets/fonts.css b/datetimepicker/localization/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/localization/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/localization/src/assets/styles.css b/datetimepicker/localization/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/localization/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/localization/src/index.html b/datetimepicker/localization/src/index.html new file mode 100644 index 000000000..85fa5b77a --- /dev/null +++ b/datetimepicker/localization/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Localization + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/localization/src/main.ts b/datetimepicker/localization/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/localization/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/localization/src/polyfills.ts b/datetimepicker/localization/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/localization/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/localization/src/tsconfig.app.json b/datetimepicker/localization/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/localization/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/localization/src/tsconfig.json b/datetimepicker/localization/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/localization/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/overview/angular.json b/datetimepicker/overview/angular.json new file mode 100644 index 000000000..f423720d4 --- /dev/null +++ b/datetimepicker/overview/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/overview/package.json b/datetimepicker/overview/package.json new file mode 100644 index 000000000..a1f81664b --- /dev/null +++ b/datetimepicker/overview/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-datetimepicker-overview", + "description": "Angular datetimepicker overview example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/overview/src/app/app.component.css b/datetimepicker/overview/src/app/app.component.css new file mode 100644 index 000000000..626cdcb6d --- /dev/null +++ b/datetimepicker/overview/src/app/app.component.css @@ -0,0 +1,9 @@ +body, +html { + min-height: 1500px; +} +smart-date-time-picker { + position: relative; + left: 0px; + width: 305px; +} diff --git a/datetimepicker/overview/src/app/app.component.html b/datetimepicker/overview/src/app/app.component.html new file mode 100644 index 000000000..5d50f4976 --- /dev/null +++ b/datetimepicker/overview/src/app/app.component.html @@ -0,0 +1,38 @@ +
+

DateTimePicker

+
+
+

Pickers provide a simple way to select a single value from a pre-determined + set. Users can also input a Date Time value by using the DateTimePicker's + input field.

+
+
+
+
+

Usage

+
+

On mobile, pickers are best suited for display in a confirmation dialog.

+

Tiles hold content, and can vary in height within a list.

+
+
+
+

Date pickers

+
+
+

A dialog picker is used to select a single date on desktop or mobile.

+
+

The selected day is indicated by a filled circle. The current day is indicated + by a different color and type weight.

+
+

Swipe left to right to navigate through the months. Touch the year in + the title bar to transition to the year view.

+
+ +
+
+
+
+

Time Picker

+ +
\ No newline at end of file diff --git a/datetimepicker/overview/src/app/app.component.ts b/datetimepicker/overview/src/app/app.component.ts new file mode 100644 index 000000000..3489d8bf3 --- /dev/null +++ b/datetimepicker/overview/src/app/app.component.ts @@ -0,0 +1,31 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('datetimepicker2', { read: DateTimePickerComponent, static: false }) datetimepicker2: DateTimePickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + // Your code here. + + } +} \ No newline at end of file diff --git a/datetimepicker/overview/src/app/app.module.ts b/datetimepicker/overview/src/app/app.module.ts new file mode 100644 index 000000000..bb8c4ec8f --- /dev/null +++ b/datetimepicker/overview/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/overview/src/app/main.ts b/datetimepicker/overview/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/overview/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/overview/src/assets/fonts.css b/datetimepicker/overview/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/overview/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/overview/src/assets/styles.css b/datetimepicker/overview/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/overview/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/overview/src/index.html b/datetimepicker/overview/src/index.html new file mode 100644 index 000000000..9c799b7a8 --- /dev/null +++ b/datetimepicker/overview/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Overview + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/overview/src/main.ts b/datetimepicker/overview/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/overview/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/overview/src/polyfills.ts b/datetimepicker/overview/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/overview/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/overview/src/tsconfig.app.json b/datetimepicker/overview/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/overview/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/overview/src/tsconfig.json b/datetimepicker/overview/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/overview/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/right-to-left/angular.json b/datetimepicker/right-to-left/angular.json new file mode 100644 index 000000000..f423720d4 --- /dev/null +++ b/datetimepicker/right-to-left/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/right-to-left/package.json b/datetimepicker/right-to-left/package.json new file mode 100644 index 000000000..cb744cbd5 --- /dev/null +++ b/datetimepicker/right-to-left/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-datetimepicker-right-to-left", + "description": "Angular datetimepicker right-to-left example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/right-to-left/src/app/app.component.css b/datetimepicker/right-to-left/src/app/app.component.css new file mode 100644 index 000000000..626cdcb6d --- /dev/null +++ b/datetimepicker/right-to-left/src/app/app.component.css @@ -0,0 +1,9 @@ +body, +html { + min-height: 1500px; +} +smart-date-time-picker { + position: relative; + left: 0px; + width: 305px; +} diff --git a/datetimepicker/right-to-left/src/app/app.component.html b/datetimepicker/right-to-left/src/app/app.component.html new file mode 100644 index 000000000..6ff684e09 --- /dev/null +++ b/datetimepicker/right-to-left/src/app/app.component.html @@ -0,0 +1,3 @@ +
DateTimePicker Web Component with enabled Right to Left Layout
+ \ No newline at end of file diff --git a/datetimepicker/right-to-left/src/app/app.component.ts b/datetimepicker/right-to-left/src/app/app.component.ts new file mode 100644 index 000000000..40b1edee0 --- /dev/null +++ b/datetimepicker/right-to-left/src/app/app.component.ts @@ -0,0 +1,38 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this, + messages = Object.assign({}, that.datetimepicker.messages); + + messages['he'] = { + 'now': 'עכשיו', + 'dateTabLabel': 'תאריך', + 'timeTabLabel': 'זמן' + }; + + that.datetimepicker.messages = messages; + that.datetimepicker.placeholder = 'הזן תאריך'; + } +} \ No newline at end of file diff --git a/datetimepicker/right-to-left/src/app/app.module.ts b/datetimepicker/right-to-left/src/app/app.module.ts new file mode 100644 index 000000000..bb8c4ec8f --- /dev/null +++ b/datetimepicker/right-to-left/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/right-to-left/src/app/main.ts b/datetimepicker/right-to-left/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/right-to-left/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/right-to-left/src/assets/fonts.css b/datetimepicker/right-to-left/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/right-to-left/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/right-to-left/src/assets/styles.css b/datetimepicker/right-to-left/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/right-to-left/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/right-to-left/src/index.html b/datetimepicker/right-to-left/src/index.html new file mode 100644 index 000000000..724594aed --- /dev/null +++ b/datetimepicker/right-to-left/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Right-to-left + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/right-to-left/src/main.ts b/datetimepicker/right-to-left/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/right-to-left/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/right-to-left/src/polyfills.ts b/datetimepicker/right-to-left/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/right-to-left/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/right-to-left/src/tsconfig.app.json b/datetimepicker/right-to-left/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/right-to-left/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/right-to-left/src/tsconfig.json b/datetimepicker/right-to-left/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/right-to-left/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/test/angular.json b/datetimepicker/test/angular.json new file mode 100644 index 000000000..a99ec1877 --- /dev/null +++ b/datetimepicker/test/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/test/package.json b/datetimepicker/test/package.json new file mode 100644 index 000000000..34f835514 --- /dev/null +++ b/datetimepicker/test/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-datetimepicker-test", + "description": "Angular datetimepicker test example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/test/src/app/app.component.css b/datetimepicker/test/src/app/app.component.css new file mode 100644 index 000000000..3c18520f6 --- /dev/null +++ b/datetimepicker/test/src/app/app.component.css @@ -0,0 +1,5 @@ +@media only screen and (max-width: 500px) { + .smart-drop-down.smart-date-time-drop-down { + left: 70%; + } +} diff --git a/datetimepicker/test/src/app/app.component.html b/datetimepicker/test/src/app/app.component.html new file mode 100644 index 000000000..0c1712ae8 --- /dev/null +++ b/datetimepicker/test/src/app/app.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/datetimepicker/test/src/app/app.component.ts b/datetimepicker/test/src/app/app.component.ts new file mode 100644 index 000000000..92bcac763 --- /dev/null +++ b/datetimepicker/test/src/app/app.component.ts @@ -0,0 +1,27 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + "use strict"; + + } +} \ No newline at end of file diff --git a/datetimepicker/test/src/app/app.module.ts b/datetimepicker/test/src/app/app.module.ts new file mode 100644 index 000000000..f989effc3 --- /dev/null +++ b/datetimepicker/test/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + + + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/test/src/app/main.ts b/datetimepicker/test/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/test/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/test/src/assets/fonts.css b/datetimepicker/test/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/test/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/test/src/assets/styles.css b/datetimepicker/test/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/test/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/test/src/index.html b/datetimepicker/test/src/index.html new file mode 100644 index 000000000..ec1370bea --- /dev/null +++ b/datetimepicker/test/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Test + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/test/src/main.ts b/datetimepicker/test/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/test/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/test/src/polyfills.ts b/datetimepicker/test/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/test/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/test/src/tsconfig.app.json b/datetimepicker/test/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/test/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/test/src/tsconfig.json b/datetimepicker/test/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/test/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/datetimepicker/time-zones/angular.json b/datetimepicker/time-zones/angular.json new file mode 100644 index 000000000..f423720d4 --- /dev/null +++ b/datetimepicker/time-zones/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.datetimepicker.css", + "./node_modules/@smart-webcomponents-angular/timepicker/styles/smart.timepicker.css", + "./node_modules/@smart-webcomponents-angular/datetimepicker/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/datetimepicker/time-zones/package.json b/datetimepicker/time-zones/package.json new file mode 100644 index 000000000..bf1591107 --- /dev/null +++ b/datetimepicker/time-zones/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-datetimepicker-time-zones", + "description": "Angular datetimepicker time-zones example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/datetimepicker": "9.2.22", + "@smart-webcomponents-angular/timepicker": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/datetimepicker/time-zones/src/app/app.component.css b/datetimepicker/time-zones/src/app/app.component.css new file mode 100644 index 000000000..e89dae8b7 --- /dev/null +++ b/datetimepicker/time-zones/src/app/app.component.css @@ -0,0 +1,6 @@ +html, body { + min-height: 600px; +} +smart-date-time-picker { + width: 320px; +} diff --git a/datetimepicker/time-zones/src/app/app.component.html b/datetimepicker/time-zones/src/app/app.component.html new file mode 100644 index 000000000..2eb875ee9 --- /dev/null +++ b/datetimepicker/time-zones/src/app/app.component.html @@ -0,0 +1,19 @@ +

+ Original value of all DateTimePickers: 2019-08-17 11:24:15:350:111:100:009:078:087:765:012 -06:00 (Central + Standard Time) +

+

displayKind: 'unspecified'

+ +

displayKind: 'UTC'

+ +

displayKind: 'local'

+ \ No newline at end of file diff --git a/datetimepicker/time-zones/src/app/app.component.ts b/datetimepicker/time-zones/src/app/app.component.ts new file mode 100644 index 000000000..8219f045b --- /dev/null +++ b/datetimepicker/time-zones/src/app/app.component.ts @@ -0,0 +1,31 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent; + @ViewChild('datetimepicker2', { read: DateTimePickerComponent, static: false }) datetimepicker2: DateTimePickerComponent; + @ViewChild('datetimepicker3', { read: DateTimePickerComponent, static: false }) datetimepicker3: DateTimePickerComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/datetimepicker/time-zones/src/app/app.module.ts b/datetimepicker/time-zones/src/app/app.module.ts new file mode 100644 index 000000000..bb8c4ec8f --- /dev/null +++ b/datetimepicker/time-zones/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DateTimePickerModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/datetimepicker/time-zones/src/app/main.ts b/datetimepicker/time-zones/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/datetimepicker/time-zones/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/datetimepicker/time-zones/src/assets/fonts.css b/datetimepicker/time-zones/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/datetimepicker/time-zones/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/datetimepicker/time-zones/src/assets/styles.css b/datetimepicker/time-zones/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/datetimepicker/time-zones/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/datetimepicker/time-zones/src/index.html b/datetimepicker/time-zones/src/index.html new file mode 100644 index 000000000..74396a5ac --- /dev/null +++ b/datetimepicker/time-zones/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Datetimepicker Time-zones + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/datetimepicker/time-zones/src/main.ts b/datetimepicker/time-zones/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/datetimepicker/time-zones/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/datetimepicker/time-zones/src/polyfills.ts b/datetimepicker/time-zones/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/datetimepicker/time-zones/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/datetimepicker/time-zones/src/tsconfig.app.json b/datetimepicker/time-zones/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/datetimepicker/time-zones/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/datetimepicker/time-zones/src/tsconfig.json b/datetimepicker/time-zones/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/datetimepicker/time-zones/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/demos/calendar/custom-header/src/index.html b/demos/calendar/custom-header/src/index.html index e2898ac47..e5bb730cc 100644 --- a/demos/calendar/custom-header/src/index.html +++ b/demos/calendar/custom-header/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/calendar/events/src/app/app.component.html b/demos/calendar/events/src/app/app.component.html index 794ee5552..7a490f19a 100644 --- a/demos/calendar/events/src/app/app.component.html +++ b/demos/calendar/events/src/app/app.component.html @@ -1,5 +1,5 @@ - -
-
Events
-
-
\ No newline at end of file + +
+

Event Log:

+ {{eventLog}} +
diff --git a/demos/calendar/events/src/app/app.component.ts b/demos/calendar/events/src/app/app.component.ts index a5a50d454..ac7019d86 100644 --- a/demos/calendar/events/src/app/app.component.ts +++ b/demos/calendar/events/src/app/app.component.ts @@ -1,30 +1,25 @@ -import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; -import { CalendarComponent } from '@smart-webcomponents-angular/calendar'; - +import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core"; +import { CalendarComponent } from "@smart-webcomponents-angular/calendar"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"] }) +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild("calendar", { read: CalendarComponent, static: false }) + calendar: CalendarComponent; + eventLog: string; + + ngOnInit(): void { + // onInit code. + } -export class AppComponent implements AfterViewInit, OnInit { - @ViewChild('calendar', { read: CalendarComponent, static: false }) calendar: CalendarComponent; - - - ngOnInit(): void { - // onInit code. - } + ngAfterViewInit(): void { + // afterViewInit code. + } - ngAfterViewInit(): void { - // afterViewInit code. - this.init(); - } - - init(): void { - // init code. - this.calendar.addEventListener('change', function (event: CustomEvent) { - document.getElementById('log').innerHTML = event.detail.value.toString(); - }); - } -} \ No newline at end of file + onChange(event: CustomEvent) { + this.eventLog = event.detail.value.toString(); + } +} diff --git a/demos/calendar/first-day-of-week/src/app/app.component.html b/demos/calendar/first-day-of-week/src/app/app.component.html index a032f88f3..73bd4b400 100644 --- a/demos/calendar/first-day-of-week/src/app/app.component.html +++ b/demos/calendar/first-day-of-week/src/app/app.component.html @@ -1,10 +1,16 @@
-
Select first day of week
-
- -
-
-
-
-
\ No newline at end of file +
Select first day of week
+
+ +
+
+ {{log}} +
+ diff --git a/demos/calendar/first-day-of-week/src/app/app.component.ts b/demos/calendar/first-day-of-week/src/app/app.component.ts index b74de0606..aaedc01b4 100644 --- a/demos/calendar/first-day-of-week/src/app/app.component.ts +++ b/demos/calendar/first-day-of-week/src/app/app.component.ts @@ -8,37 +8,32 @@ import { CalendarComponent } from '@smart-webcomponents-angular/calendar'; styleUrls: ['./app.component.css'] }) -export class AppComponent implements AfterViewInit, OnInit { - @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; - @ViewChild('calendar', { read: CalendarComponent, static: false }) calendar: CalendarComponent; - - - ngOnInit(): void { - // onInit code. - } +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild("dropdownlist", { read: DropDownListComponent, static: false }) + dropdownlist: DropDownListComponent; + @ViewChild("calendar", { read: CalendarComponent, static: false }) + calendar: CalendarComponent; + log: string; + dataSource = [ + { value: 0, label: "Sunday" }, + { value: 1, label: "Monday" }, + { value: 2, label: "Tuesday" }, + { value: 3, label: "Wednesday" }, + { value: 4, label: "Thursday" }, + { value: 5, label: "Friday" }, + { value: 6, label: "Saturday" } + ]; - ngAfterViewInit(): void { - // afterViewInit code. - this.init(); - } - - init(): void { - // init code. - const that = this; + ngOnInit(): void { + // onInit code. + } - that.dropdownlist.dataSource = [ - { value: 0, label: "Sunday" }, - { value: 1, label: "Monday" }, - { value: 2, label: "Tuesday" }, - { value: 3, label: "Wednesday" }, - { value: 4, label: "Thursday" }, - { value: 5, label: "Friday" }, - { value: 6, label: "Saturday" } - ]; - - that.dropdownlist.addEventListener('change', function (event: CustomEvent) { - that.calendar.firstDayOfWeek = event.detail.index; - document.getElementById('log').innerHTML = 'First day of week is ' + event.detail.label; - }); - } -} \ No newline at end of file + ngAfterViewInit(): void { + // afterViewInit code. + } + + onChange(event: CustomEvent) { + this.calendar.firstDayOfWeek = event.detail.index; + this.log = "First day of week is " + event.detail.label; + } +} diff --git a/demos/calendar/important-days/src/index.html b/demos/calendar/important-days/src/index.html index c7e21febb..e0196e8f1 100644 --- a/demos/calendar/important-days/src/index.html +++ b/demos/calendar/important-days/src/index.html @@ -40,8 +40,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/calendar/important-events/src/index.html b/demos/calendar/important-events/src/index.html index 2fcfccb28..c91523935 100644 --- a/demos/calendar/important-events/src/index.html +++ b/demos/calendar/important-events/src/index.html @@ -40,8 +40,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/calendar/list-display-view-mode/src/app/app.component.html b/demos/calendar/list-display-view-mode/src/app/app.component.html index 9ac136351..c0ae59df1 100644 --- a/demos/calendar/list-display-view-mode/src/app/app.component.html +++ b/demos/calendar/list-display-view-mode/src/app/app.component.html @@ -3,7 +3,7 @@
Choose Mode
- Month + Month Year Decade
diff --git a/demos/calendar/locale/src/app/app.component.html b/demos/calendar/locale/src/app/app.component.html index 3ba23ae68..ddffbe23a 100644 --- a/demos/calendar/locale/src/app/app.component.html +++ b/demos/calendar/locale/src/app/app.component.html @@ -1,10 +1,17 @@
-
Choose a locale
-
- -
-
-
-
-
\ No newline at end of file +
Choose a locale
+
+ + +
+
+ {{log}} +
+
diff --git a/demos/calendar/locale/src/app/app.component.ts b/demos/calendar/locale/src/app/app.component.ts index 1d974060f..daba57a83 100644 --- a/demos/calendar/locale/src/app/app.component.ts +++ b/demos/calendar/locale/src/app/app.component.ts @@ -1,36 +1,47 @@ -import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; -import { CalendarComponent } from '@smart-webcomponents-angular/calendar'; -import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; - +import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core"; +import { CalendarComponent } from "@smart-webcomponents-angular/calendar"; +import { DropDownListComponent } from "@smart-webcomponents-angular/dropdownlist"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"] }) +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild("calendar", { read: CalendarComponent, static: false }) + calendar: CalendarComponent; + @ViewChild("localePicker", { read: DropDownListComponent, static: false }) + localePicker: DropDownListComponent; + log: string = ""; + dataSource = [ + "en", + "tr", + "ar", + "ru", + "de", + "es", + "pt", + "fr", + "zh", + "ja", + "it", + "bg", + "nl" + ]; + + ngOnInit(): void { + // onInit code. + } -export class AppComponent implements AfterViewInit, OnInit { - @ViewChild('calendar', { read: CalendarComponent, static: false }) calendar: CalendarComponent; - @ViewChild('localePicker', { read: DropDownListComponent, static: false }) localePicker: DropDownListComponent; - - - ngOnInit(): void { - // onInit code. - } + ngAfterViewInit(): void { + const that = this; + // afterViewInit code. + } - ngAfterViewInit(): void { - // afterViewInit code. - this.init(); - } - - init(): void { - // init code. - const that = this; - - that.localePicker.dataSource = ['en', 'tr', 'ar', 'ru', 'de', 'es', 'pt', 'fr', 'zh', 'ja', 'it', 'bg', 'nl']; - that.localePicker.addEventListener('change', function (event: CustomEvent) { - that.calendar.locale = event.detail.label; - document.getElementById('log').innerHTML = 'Current locale is ' + event.detail.label.toUpperCase(); - }); - } -} \ No newline at end of file + onChange(event: CustomEvent) { + const that = this; + + that.calendar.locale = event.detail.label; + that.log = "Current locale is " + event.detail.label; + } +} diff --git a/demos/calendar/methods/src/app/app.component.ts b/demos/calendar/methods/src/app/app.component.ts index cba1940f9..cf4847d6f 100644 --- a/demos/calendar/methods/src/app/app.component.ts +++ b/demos/calendar/methods/src/app/app.component.ts @@ -51,8 +51,10 @@ export class AppComponent implements AfterViewInit, OnInit { }); that.selectDate.addEventListener('click', function () { - that.calendar.select(that.dateInput.value); - }); + if (that.dateInput.value) { + that.calendar.select(that.dateInput.value); + } + }); that.disabled.addEventListener('click', function () { that.calendar.disabled = !that.calendar.disabled; diff --git a/demos/calendar/navigation-modes/src/app/app.component.html b/demos/calendar/navigation-modes/src/app/app.component.html index 3c598dcdf..306ccc515 100644 --- a/demos/calendar/navigation-modes/src/app/app.component.html +++ b/demos/calendar/navigation-modes/src/app/app.component.html @@ -6,12 +6,12 @@
Far
- Both + Both
Scroll Buttons Navigation Mode
- Landscape + Landscape
Portrait
diff --git a/demos/calendar/weeks-visibility/src/app/app.component.html b/demos/calendar/weeks-visibility/src/app/app.component.html index 0d104b613..5935abfda 100644 --- a/demos/calendar/weeks-visibility/src/app/app.component.html +++ b/demos/calendar/weeks-visibility/src/app/app.component.html @@ -1,7 +1,13 @@
-
Number of weeks(1-6)
-
- -
-
\ No newline at end of file +
Number of weeks(1-6)
+
+ +
+ diff --git a/demos/calendar/weeks-visibility/src/app/app.component.ts b/demos/calendar/weeks-visibility/src/app/app.component.ts index f7c3d4ab8..49ccf346c 100644 --- a/demos/calendar/weeks-visibility/src/app/app.component.ts +++ b/demos/calendar/weeks-visibility/src/app/app.component.ts @@ -1,40 +1,39 @@ -import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; -import { CalendarComponent } from '@smart-webcomponents-angular/calendar'; - +import { + Component, + ViewChild, + OnInit, + AfterViewInit, + ElementRef +} from "@angular/core"; +import { CalendarComponent } from "@smart-webcomponents-angular/calendar"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"] }) +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild("calendar", { read: CalendarComponent, static: false }) + calendar: CalendarComponent; -export class AppComponent implements AfterViewInit, OnInit { - @ViewChild('calendar', { read: CalendarComponent, static: false }) calendar: CalendarComponent; - @ViewChild('weeksCountSelector', { read: HTMLInputElement, static: false }) weeksCountSelector: HTMLInputElement; + ngOnInit(): void { + // onInit code. + } - - ngOnInit(): void { - // onInit code. - } + ngAfterViewInit(): void { + // afterViewInit code. + } - ngAfterViewInit(): void { - // afterViewInit code. - this.init(); + onChange(value) { + const that = this; + if (that.calendar.weeks) { + that.calendar.weeks = parseInt(value); + that.calendar.nativeElement.style.height = + 120 + 32 * (that.calendar.weeks - 1) + "px"; } - - init(): void { - // init code. - const that = this; - - that.weeksCountSelector.addEventListener('change', function (event) { - if (that.calendar.weeks) { - that.calendar.weeks = parseInt(that.weeksCountSelector.value); - that.calendar.nativeElement.style.height = 120 + 32 * (that.calendar.weeks - 1) + 'px'; - } - }); - - if (that.calendar.weeks) { - that.calendar.nativeElement.style.height = 120 + 32 * (that.calendar.weeks - 1) + 'px'; - } - } -} \ No newline at end of file + if (that.calendar.weeks) { + that.calendar.nativeElement.style.height = + 120 + 32 * (that.calendar.weeks - 1) + "px"; + } + } +} diff --git a/demos/card/dismiss-on-swipe/src/index.html b/demos/card/dismiss-on-swipe/src/index.html index 957dcf570..edf1c87cf 100644 --- a/demos/card/dismiss-on-swipe/src/index.html +++ b/demos/card/dismiss-on-swipe/src/index.html @@ -33,8 +33,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/card/expandable/src/index.html b/demos/card/expandable/src/index.html index ad0bb2aa4..8439f4f38 100644 --- a/demos/card/expandable/src/index.html +++ b/demos/card/expandable/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/card/grid-layout/src/index.html b/demos/card/grid-layout/src/index.html index be5224ae1..a8bff97aa 100644 --- a/demos/card/grid-layout/src/index.html +++ b/demos/card/grid-layout/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - - \ No newline at end of file + + diff --git a/demos/cardview/settings/src/app/app.component.html b/demos/cardview/settings/src/app/app.component.html index 9d11f4a4e..3d3ff2647 100644 --- a/demos/cardview/settings/src/app/app.component.html +++ b/demos/cardview/settings/src/app/app.component.html @@ -1,16 +1,16 @@
- Collapsible cards + Collapsible cards Icons + [checked]="true">Icons

Cell orientation:

horizontal + [checked]="true">horizontal vertical

Cover mode:

- crop + crop fit

Title:

diff --git a/demos/carousel/3d-template/src/index.html b/demos/carousel/3d-template/src/index.html index 368dda4fd..1ac86b65f 100644 --- a/demos/carousel/3d-template/src/index.html +++ b/demos/carousel/3d-template/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/carousel/template/src/index.html b/demos/carousel/template/src/index.html index 01f464c2b..24a7c22d7 100644 --- a/demos/carousel/template/src/index.html +++ b/demos/carousel/template/src/index.html @@ -33,10 +33,9 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/carousel/thumbnails/src/index.html b/demos/carousel/thumbnails/src/index.html index 06ab77689..186d1c747 100644 --- a/demos/carousel/thumbnails/src/index.html +++ b/demos/carousel/thumbnails/src/index.html @@ -33,8 +33,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/chip/single-line-chips/src/app/app.component.html b/demos/chip/single-line-chips/src/app/app.component.html index 09e0e640e..2499e3998 100644 --- a/demos/chip/single-line-chips/src/app/app.component.html +++ b/demos/chip/single-line-chips/src/app/app.component.html @@ -6,9 +6,9 @@

Single line chips

value="Chip with close button" close-button> Basic chip

Disabled

- + +value="Chip with image avatar" [disabled]="true"> -Basic chip \ No newline at end of file +value="Chip with close button" close-button [disabled]="true"> +Basic chip \ No newline at end of file diff --git a/demos/combobox/item-template/src/index.html b/demos/combobox/item-template/src/index.html index 352f990c0..ac4c9d5bd 100644 --- a/demos/combobox/item-template/src/index.html +++ b/demos/combobox/item-template/src/index.html @@ -33,8 +33,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/combobox/token-template/src/index.html b/demos/combobox/token-template/src/index.html index 9eebce0fe..83e15da39 100644 --- a/demos/combobox/token-template/src/index.html +++ b/demos/combobox/token-template/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/dropdownlist/item-template/src/index.html b/demos/dropdownlist/item-template/src/index.html index 1bdc3d1a4..bc20e777c 100644 --- a/demos/dropdownlist/item-template/src/index.html +++ b/demos/dropdownlist/item-template/src/index.html @@ -33,8 +33,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/dropdownlist/token-template-avatars/src/index.html b/demos/dropdownlist/token-template-avatars/src/index.html index 8c79fa2e7..b50d38247 100644 --- a/demos/dropdownlist/token-template-avatars/src/index.html +++ b/demos/dropdownlist/token-template-avatars/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/dropdownlist/token-template/src/index.html b/demos/dropdownlist/token-template/src/index.html index 4ebf3710c..a6bf5090d 100644 --- a/demos/dropdownlist/token-template/src/index.html +++ b/demos/dropdownlist/token-template/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/fileupload/item-template/src/index.html b/demos/fileupload/item-template/src/index.html index d749560b7..fcc567819 100644 --- a/demos/fileupload/item-template/src/index.html +++ b/demos/fileupload/item-template/src/index.html @@ -33,8 +33,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/framework/html-select-binding/src/app/app.component.html b/demos/framework/html-select-binding/src/app/app.component.html index 8ff43186b..184ca1d4b 100644 --- a/demos/framework/html-select-binding/src/app/app.component.html +++ b/demos/framework/html-select-binding/src/app/app.component.html @@ -1,7 +1,7 @@
Single Select, smart-model="selected"

- + diff --git a/demos/framework/stacklayout-gaps/src/app/app.component.html b/demos/framework/stacklayout-gaps/src/app/app.component.html index e1c632577..c15720e18 100644 --- a/demos/framework/stacklayout-gaps/src/app/app.component.html +++ b/demos/framework/stacklayout-gaps/src/app/app.component.html @@ -8,8 +8,8 @@
Settings
- Space Between + Space Between
Space Evenly
@@ -17,7 +17,7 @@
Horizontal + [checked]="true">Horizontal
Vertical
diff --git a/demos/framework/stacklayout-overview/src/app/app.component.html b/demos/framework/stacklayout-overview/src/app/app.component.html index c934b5b15..17d5bf890 100644 --- a/demos/framework/stacklayout-overview/src/app/app.component.html +++ b/demos/framework/stacklayout-overview/src/app/app.component.html @@ -11,7 +11,7 @@
Settings
Left + [checked]="true">Left
Center
@@ -19,7 +19,7 @@
Top + [checked]="true">Top
Middle
@@ -27,7 +27,7 @@
Horizontal + [checked]="true">Horizontal
Vertical
diff --git a/demos/framework/stacklayout-stretch/src/app/app.component.html b/demos/framework/stacklayout-stretch/src/app/app.component.html index fb9009391..8e19f81d5 100644 --- a/demos/framework/stacklayout-stretch/src/app/app.component.html +++ b/demos/framework/stacklayout-stretch/src/app/app.component.html @@ -6,14 +6,14 @@
Stretch
- Horizontal + Horizontal
Vertical
Orientation
Horizontal + [checked]="true">Horizontal
Vertical
diff --git a/demos/framework/stacklayout-uneven-stretch/src/app/app.component.html b/demos/framework/stacklayout-uneven-stretch/src/app/app.component.html index 9e35d4b58..8a9c32121 100644 --- a/demos/framework/stacklayout-uneven-stretch/src/app/app.component.html +++ b/demos/framework/stacklayout-uneven-stretch/src/app/app.component.html @@ -6,14 +6,14 @@
Stretch
- Horizontal + Horizontal
Vertical
Orientation
Horizontal + [checked]="true">Horizontal
Vertical
diff --git a/demos/gantt/custom-popup-window/src/index.html b/demos/gantt/custom-popup-window/src/index.html index 04fea2df7..115e0d776 100644 --- a/demos/gantt/custom-popup-window/src/index.html +++ b/demos/gantt/custom-popup-window/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/gantt/resource-panel-filtering/src/index.html b/demos/gantt/resource-panel-filtering/src/index.html index 46349ee46..71fa83e2f 100644 --- a/demos/gantt/resource-panel-filtering/src/index.html +++ b/demos/gantt/resource-panel-filtering/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/gantt/task-filtering/src/index.html b/demos/gantt/task-filtering/src/index.html index 75f44610f..de9e2717f 100644 --- a/demos/gantt/task-filtering/src/index.html +++ b/demos/gantt/task-filtering/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/gantt/timeline-header/src/index.html b/demos/gantt/timeline-header/src/index.html index 1f593f13c..e3535a9be 100644 --- a/demos/gantt/timeline-header/src/index.html +++ b/demos/gantt/timeline-header/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/grid/column-template/src/index.html b/demos/grid/column-template/src/index.html index 3a1b1a9c1..81fe8a2c4 100644 --- a/demos/grid/column-template/src/index.html +++ b/demos/grid/column-template/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/grid/create-chart-from-grid/src/index.html b/demos/grid/create-chart-from-grid/src/index.html index 3bb60630a..7b9736ea6 100644 --- a/demos/grid/create-chart-from-grid/src/index.html +++ b/demos/grid/create-chart-from-grid/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/grid/custom-style/src/index.html b/demos/grid/custom-style/src/index.html index d0b485fb7..2876cc777 100644 --- a/demos/grid/custom-style/src/index.html +++ b/demos/grid/custom-style/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/grid/editing-custom-editor/src/index.html b/demos/grid/editing-custom-editor/src/index.html index 56565e4eb..865287c82 100644 --- a/demos/grid/editing-custom-editor/src/index.html +++ b/demos/grid/editing-custom-editor/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - @@ -60,4 +58,5 @@
diff --git a/demos/kanban/task-template/src/index.html b/demos/kanban/task-template/src/index.html index 16f6b3718..a0c342c68 100644 --- a/demos/kanban/task-template/src/index.html +++ b/demos/kanban/task-template/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/kanban/user-privileges/src/index.html b/demos/kanban/user-privileges/src/index.html index 01c78fed9..cca3376f3 100644 --- a/demos/kanban/user-privileges/src/index.html +++ b/demos/kanban/user-privileges/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/layout/dashboard/src/index.html b/demos/layout/dashboard/src/index.html index 7904e531f..1af4229f8 100644 --- a/demos/layout/dashboard/src/index.html +++ b/demos/layout/dashboard/src/index.html @@ -33,12 +33,11 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/listbox/item-template/src/index.html b/demos/listbox/item-template/src/index.html index ada0d131d..17c218145 100644 --- a/demos/listbox/item-template/src/index.html +++ b/demos/listbox/item-template/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/listmenu/grouped/src/index.html b/demos/listmenu/grouped/src/index.html index 5ed7d1082..f6f620fbc 100644 --- a/demos/listmenu/grouped/src/index.html +++ b/demos/listmenu/grouped/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/listmenu/kinetic-scrolling/src/index.html b/demos/listmenu/kinetic-scrolling/src/index.html index 46518403d..b5ad4f7f5 100644 --- a/demos/listmenu/kinetic-scrolling/src/index.html +++ b/demos/listmenu/kinetic-scrolling/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/listmenu/overview/src/index.html b/demos/listmenu/overview/src/index.html index 3eaba7522..820a8e34e 100644 --- a/demos/listmenu/overview/src/index.html +++ b/demos/listmenu/overview/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/multilinetextbox/overview/src/app/app.component.html b/demos/multilinetextbox/overview/src/app/app.component.html index 6747f4a53..e0f6cb12b 100644 --- a/demos/multilinetextbox/overview/src/app/app.component.html +++ b/demos/multilinetextbox/overview/src/app/app.component.html @@ -2,5 +2,5 @@ as the input line.


- +

Disabled

\ No newline at end of file diff --git a/demos/multisplitbutton/overview/src/app/app.component.html b/demos/multisplitbutton/overview/src/app/app.component.html index 2036c70a3..50685ceaf 100644 --- a/demos/multisplitbutton/overview/src/app/app.component.html +++ b/demos/multisplitbutton/overview/src/app/app.component.html @@ -92,7 +92,7 @@

Style

+ drop-down-position="bottom" [disabled]="true"> Home Mobile Work @@ -243,7 +243,7 @@

Edit shipping info

Cancel - Done + Done
diff --git a/demos/numerictextbox/overview/src/app/app.component.html b/demos/numerictextbox/overview/src/app/app.component.html index f6483926a..e89ef9afd 100644 --- a/demos/numerictextbox/overview/src/app/app.component.html +++ b/demos/numerictextbox/overview/src/app/app.component.html @@ -23,7 +23,7 @@

Numeric Text fields allow users to enter and edit any type of numbers.




- +

disabled

\ No newline at end of file diff --git a/demos/passwordtextbox/overview/src/app/app.component.html b/demos/passwordtextbox/overview/src/app/app.component.html index 61a1c07d8..0f3fdb42d 100644 --- a/demos/passwordtextbox/overview/src/app/app.component.html +++ b/demos/passwordtextbox/overview/src/app/app.component.html @@ -50,7 +50,7 @@

Cursor

Password text box


- +

Disabled

Text field states in light and dark themes.

diff --git a/demos/passwordtextbox/strength-template/src/index.html b/demos/passwordtextbox/strength-template/src/index.html index 4c862693c..283be34ac 100644 --- a/demos/passwordtextbox/strength-template/src/index.html +++ b/demos/passwordtextbox/strength-template/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/scheduler/doctors-schedule/src/index.html b/demos/scheduler/doctors-schedule/src/index.html index 1249549fa..5a162bdb8 100644 --- a/demos/scheduler/doctors-schedule/src/index.html +++ b/demos/scheduler/doctors-schedule/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/scheduler/grouping-overview/src/index.html b/demos/scheduler/grouping-overview/src/index.html index e7e661e8b..fcefaa2fb 100644 --- a/demos/scheduler/grouping-overview/src/index.html +++ b/demos/scheduler/grouping-overview/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/scheduler/rooms-schedule/src/index.html b/demos/scheduler/rooms-schedule/src/index.html index 1e22b376c..366971159 100644 --- a/demos/scheduler/rooms-schedule/src/index.html +++ b/demos/scheduler/rooms-schedule/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/scheduler/server-side-mysql-php/src/index.html b/demos/scheduler/server-side-mysql-php/src/index.html index ab863ac19..49acc3051 100644 --- a/demos/scheduler/server-side-mysql-php/src/index.html +++ b/demos/scheduler/server-side-mysql-php/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/scheduler/travel-schedule/src/index.html b/demos/scheduler/travel-schedule/src/index.html index 5f68bec15..d1713f929 100644 --- a/demos/scheduler/travel-schedule/src/index.html +++ b/demos/scheduler/travel-schedule/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/scrollbar/overview/src/app/app.component.html b/demos/scrollbar/overview/src/app/app.component.html index 7a0131130..4ee3e653c 100644 --- a/demos/scrollbar/overview/src/app/app.component.html +++ b/demos/scrollbar/overview/src/app/app.component.html @@ -42,17 +42,17 @@

Continuous scrollbar

- + - + - + diff --git a/demos/switchbutton/template/src/index.html b/demos/switchbutton/template/src/index.html index 8f958abc6..14e3f0082 100644 --- a/demos/switchbutton/template/src/index.html +++ b/demos/switchbutton/template/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - + diff --git a/demos/table/filter-template/src/index.html b/demos/table/filter-template/src/index.html index 6b95e307a..043efb19f 100644 --- a/demos/table/filter-template/src/index.html +++ b/demos/table/filter-template/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/table/filtering-advanced/src/index.html b/demos/table/filtering-advanced/src/index.html index d6d75aeee..2d9c0c77e 100644 --- a/demos/table/filtering-advanced/src/index.html +++ b/demos/table/filtering-advanced/src/index.html @@ -33,8 +33,7 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/table/footer-row/src/index.html b/demos/table/footer-row/src/index.html index e948c97b1..a3056ce1f 100644 --- a/demos/table/footer-row/src/index.html +++ b/demos/table/footer-row/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/table/multiple-headers-footers/src/index.html b/demos/table/multiple-headers-footers/src/index.html index 50c645160..ac217a2f6 100644 --- a/demos/table/multiple-headers-footers/src/index.html +++ b/demos/table/multiple-headers-footers/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/table/sticky-footer/src/index.html b/demos/table/sticky-footer/src/index.html index 72331ff0d..7457a0006 100644 --- a/demos/table/sticky-footer/src/index.html +++ b/demos/table/sticky-footer/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/tabs/badges/src/index.html b/demos/tabs/badges/src/index.html index c9b83ac6e..fb51b4f49 100644 --- a/demos/tabs/badges/src/index.html +++ b/demos/tabs/badges/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/tabs/title-template/src/index.html b/demos/tabs/title-template/src/index.html index 5d75e9ccc..d07081687 100644 --- a/demos/tabs/title-template/src/index.html +++ b/demos/tabs/title-template/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - + diff --git a/demos/timepicker/footer/src/index.html b/demos/timepicker/footer/src/index.html index 197bb9713..501bf3aeb 100644 --- a/demos/timepicker/footer/src/index.html +++ b/demos/timepicker/footer/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/toast/item-template/src/index.html b/demos/toast/item-template/src/index.html index 191f26f03..1b6e43cb2 100644 --- a/demos/toast/item-template/src/index.html +++ b/demos/toast/item-template/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/tree/item-template/src/index.html b/demos/tree/item-template/src/index.html index f86b016a2..f0288bc94 100644 --- a/demos/tree/item-template/src/index.html +++ b/demos/tree/item-template/src/index.html @@ -33,9 +33,8 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/demos/window/header-footer-templates/src/index.html b/demos/window/header-footer-templates/src/index.html index 2a63cfb04..7548b2f41 100644 --- a/demos/window/header-footer-templates/src/index.html +++ b/demos/window/header-footer-templates/src/index.html @@ -33,8 +33,6 @@
https://www.jqwidgets.com/
- - + diff --git a/demos/window/tabs/src/index.html b/demos/window/tabs/src/index.html index 4410998a5..6a20e67d2 100644 --- a/demos/window/tabs/src/index.html +++ b/demos/window/tabs/src/index.html @@ -33,11 +33,10 @@
https://www.jqwidgets.com/
- - \ No newline at end of file + + diff --git a/docking-layout/auto-hide-item/angular.json b/docking-layout/auto-hide-item/angular.json new file mode 100644 index 000000000..6d7ea5f68 --- /dev/null +++ b/docking-layout/auto-hide-item/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/auto-hide-item/package.json b/docking-layout/auto-hide-item/package.json new file mode 100644 index 000000000..13456a895 --- /dev/null +++ b/docking-layout/auto-hide-item/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-auto-hide-item", + "description": "Angular docking-layout auto-hide-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/auto-hide-item/src/app/app.component.css b/docking-layout/auto-hide-item/src/app/app.component.css new file mode 100644 index 000000000..b17de066a --- /dev/null +++ b/docking-layout/auto-hide-item/src/app/app.component.css @@ -0,0 +1,26 @@ +smart-docking-layout { + --smart-splitter-item-size: 33.3%; +} + +#verticalGroup smart-splitter-item { + --smart-splitter-item-size: 50%; +} + +smart-docking-layout { + width: 75%; + height: 600px; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout { + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout { + width: 100%; + position: relative; + margin: 10px 0px; + } +} \ No newline at end of file diff --git a/docking-layout/auto-hide-item/src/app/app.component.html b/docking-layout/auto-hide-item/src/app/app.component.html new file mode 100644 index 000000000..42b2bfe5b --- /dev/null +++ b/docking-layout/auto-hide-item/src/app/app.component.html @@ -0,0 +1,26 @@ + +
+
+ + ItemA + ItemB + ItemC + ItemD + +
+
+
+ AutoHideTop +
+
+ AutoHideBottom +
+
+ AutoHideLeft +
+
+ AutoHideRight +
+
+
+
\ No newline at end of file diff --git a/docking-layout/auto-hide-item/src/app/app.component.ts b/docking-layout/auto-hide-item/src/app/app.component.ts new file mode 100644 index 000000000..3c3b87207 --- /dev/null +++ b/docking-layout/auto-hide-item/src/app/app.component.ts @@ -0,0 +1,104 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('button2', { read: ButtonComponent, static: false }) button2: ButtonComponent; + @ViewChild('button3', { read: ButtonComponent, static: false }) button3: ButtonComponent; + @ViewChild('button4', { read: ButtonComponent, static: false }) button4: ButtonComponent; + @ViewChild('dropDownList', { read: DropDownListComponent, static: false }) dropDownList: DropDownListComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + + layout: Array = [ + { + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + type: 'LayoutPanel', + label: 'Window A', + items: [{ + id: 'itemA', + label: '#itemA', + content: 'Content of item with id "itemA"', + selected: true + }] + }, + { + type: 'LayoutGroup', + id: 'verticalGroup', + orientation: 'vertical', + items: [ + { + type: 'LayoutPanel', + label: 'Window B', + items: [{ + id: 'itemB', + label: '#itemB', + content: 'Content of item with id "itemB"', + }] + }, + { + type: 'LayoutPanel', + label: 'Window C', + items: [{ + id: 'itemC', + label: '#itemC', + content: 'Content of item with id "itemC"' + }] + }, + ] + }, + { + type: 'LayoutPanel', + label: 'Window D', + items: [{ + id: 'itemD', + label: '#itemD', + content: 'Content of item with id "itemD"', + }] + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout = that.dockinglayout, + dropDownList = that.dropDownList; + + that.button.addEventListener('click', function () { + smartDockingLayout.autoHideTop(dropDownList.selectedValues[0]); + }); + that.button2.addEventListener('click', function () { + smartDockingLayout.autoHideBottom(dropDownList.selectedValues[0]); + }); + that.button3.addEventListener('click', function () { + smartDockingLayout.autoHideLeft(dropDownList.selectedValues[0]); + }); + that.button4.addEventListener('click', function () { + smartDockingLayout.autoHideRight(dropDownList.selectedValues[0]); + }); + } +} \ No newline at end of file diff --git a/docking-layout/auto-hide-item/src/app/app.module.ts b/docking-layout/auto-hide-item/src/app/app.module.ts new file mode 100644 index 000000000..a750d2aa5 --- /dev/null +++ b/docking-layout/auto-hide-item/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, ButtonModule, DropDownListModule, DockingLayoutModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/auto-hide-item/src/app/main.ts b/docking-layout/auto-hide-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/auto-hide-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/auto-hide-item/src/assets/fonts.css b/docking-layout/auto-hide-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/auto-hide-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/auto-hide-item/src/assets/styles.css b/docking-layout/auto-hide-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/auto-hide-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/auto-hide-item/src/index.html b/docking-layout/auto-hide-item/src/index.html new file mode 100644 index 000000000..4066dc01a --- /dev/null +++ b/docking-layout/auto-hide-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Auto-hide-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/auto-hide-item/src/main.ts b/docking-layout/auto-hide-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/auto-hide-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/auto-hide-item/src/polyfills.ts b/docking-layout/auto-hide-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/auto-hide-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/auto-hide-item/src/tsconfig.app.json b/docking-layout/auto-hide-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/auto-hide-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/auto-hide-item/src/tsconfig.json b/docking-layout/auto-hide-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/auto-hide-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/auto-save-load/angular.json b/docking-layout/auto-save-load/angular.json new file mode 100644 index 000000000..0eaaff7fb --- /dev/null +++ b/docking-layout/auto-save-load/angular.json @@ -0,0 +1,134 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/carousel/styles/smart.carousel.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/gauge/styles/smart.gauge.css", + "./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css", + "./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.progressbar.css", + "./node_modules/@smart-webcomponents-angular/tank/styles/smart.tank.css", + "./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/auto-save-load/package.json b/docking-layout/auto-save-load/package.json new file mode 100644 index 000000000..d606313c9 --- /dev/null +++ b/docking-layout/auto-save-load/package.json @@ -0,0 +1,60 @@ +{ + "name": "angular-docking-layout-auto-save-load", + "description": "Angular docking-layout auto-save-load example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/carousel": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/gauge": "9.2.22", + "@smart-webcomponents-angular/multilinetextbox": "9.2.22", + "@smart-webcomponents-angular/progressbar": "9.2.22", + "@smart-webcomponents-angular/tank": "9.2.22", + "@smart-webcomponents-angular/textbox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/auto-save-load/src/app/app.component.css b/docking-layout/auto-save-load/src/app/app.component.css new file mode 100644 index 000000000..2d409bc27 --- /dev/null +++ b/docking-layout/auto-save-load/src/app/app.component.css @@ -0,0 +1,40 @@ +smart-docking-layout { + width: 100%; + height: 600px; +} + +smart-docking-layout { + --smart-splitter-item-size: 50%; +} + +#saveState { + margin-left: 65%; +} + +.smart-window smart-carousel, .smart-window smart-multiline-text-box, .smart-window smart-gauge, .smart-window smart-tank { + width: 100%; + height: 100%; + border: none; +} + +.smart-window smart-carousel .smart-carousel-item .smart-carousel-item-container { + background-size: cover; +} + +.smart-window smart-tab-item>.smart-container { + display: flex; + justify-content: center; + align-items: center; +} + +.smart-window smart-multiline-text-box { + color: black; +} + +.smart-window smart-progress-bar { + margin-right: 5px; +} + +#saveCurrentState { + width: 150px; +} \ No newline at end of file diff --git a/docking-layout/auto-save-load/src/app/app.component.html b/docking-layout/auto-save-load/src/app/app.component.html new file mode 100644 index 000000000..58f6b8173 --- /dev/null +++ b/docking-layout/auto-save-load/src/app/app.component.html @@ -0,0 +1,9 @@ +
Automatic State Handling. Resize or Reorder item. The state(like a snapshot + of the layout) is automatically saved. Then open the demo again, and Your + State is loaded. +
+ +Initialize Layout +Clear State + + \ No newline at end of file diff --git a/docking-layout/auto-save-load/src/app/app.component.ts b/docking-layout/auto-save-load/src/app/app.component.ts new file mode 100644 index 000000000..31818581f --- /dev/null +++ b/docking-layout/auto-save-load/src/app/app.component.ts @@ -0,0 +1,176 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { GaugeComponent, Gauge } from '@smart-webcomponents-angular/gauge'; +import { TankComponent, Tank } from '@smart-webcomponents-angular/tank'; +import { MultilineTextBoxComponent, MultilineTextBox } from '@smart-webcomponents-angular/multilinetextbox'; +import { ProgressBarComponent, ProgressBar } from '@smart-webcomponents-angular/progressbar'; +import { CarouselComponent, Carousel } from '@smart-webcomponents-angular/carousel'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + + layout: Array = [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutPanel", + label: "Tab 10", + items: [ + { + id: 'tabItem10', + type: "LayoutPanelItem", + label: "Tab 10" + } + ], + size: 153 + }, + { + type: "LayoutPanel", + label: "Tabs 1", + items: [ + { + id: "tabItem1", + type: "LayoutPanelItem", + label: "Tab 1" + } + ], + size: 218 + } + ], + orientation: "horizontal", + size: 203 + }, + { + type: "LayoutPanel", + label: "Tab 6", + tabPosition: "hidden", + items: [ + { + id: "tabItem6", + type: "LayoutPanelItem", + label: "Tab 6" + } + ], + size: 739 + } + ], + orientation: "vertical", + size: 381 + }, + { + type: "LayoutGroup", + items: [ + { + type: "LayoutPanel", + label: "Tabs 2", + items: [ + { + id: "tabItem2", + type: "LayoutPanelItem", + label: "Tab 2" + } + ], + size: 604 + }, + { + type: "LayoutPanel", + label: "Tabs 3", + items: [ + { + id: "tabItem7", + type: "LayoutPanelItem", + label: "Tab 7" + } + ], + size: 338, + resizeMode: 'both' + } + ], + orientation: "vertical", + size: 334 + } + ], + orientation: "horizontal" + } + ]; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } + + initializeLayout(event: any) { + const that = this, + dockinglayout = that.dockinglayout, data = [], + urlString = 'https://picsum.photos/1000/500/?image=', + gauge1: Gauge = document.createElement('smart-gauge'), + carousel: Carousel = document.createElement('smart-carousel'), + multiLineTextBox: MultilineTextBox = document.createElement('smart-multiline-text-box'), + tank: Tank = document.createElement('smart-tank'), + progressBar1: ProgressBar = document.createElement('smart-progress-bar'); + + for (let i = 0; i < 5; i++) { + const item = { + image: urlString + (100 + i) + }; + + data.push(item); + } + + carousel.dataSource = data; + carousel.swipe = true; + carousel.slideShow = true; + carousel.loop = true; + carousel.keyboard = true; + multiLineTextBox.value = 'What is Lorem Ipsum? \n\n' + + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a' + 'galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially' + ' unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker' + 'including versions of Lorem Ipsum.'; + tank.max = 50; + tank.value = 25; + progressBar1.showProgressValue = true; + + if (dockinglayout.items.length > 0) { + dockinglayout.nativeElement.querySelector('#tabItem10').appendChild(progressBar1); + dockinglayout.nativeElement.querySelector('#tabItem7').appendChild(gauge1); + dockinglayout.nativeElement.querySelector('#tabItem6').appendChild(carousel); + dockinglayout.nativeElement.querySelector('#tabItem2').appendChild(multiLineTextBox); + dockinglayout.nativeElement.querySelector('#tabItem1').appendChild(tank); + + gauge1.addEventListener('change', function (event: CustomEvent): void { + progressBar1.value = event.detail.value; + }); + } + + that.button.disabled = true; + } + + clearState(event: any): void { + this.dockinglayout.clearState(); + } +} \ No newline at end of file diff --git a/docking-layout/auto-save-load/src/app/app.module.ts b/docking-layout/auto-save-load/src/app/app.module.ts new file mode 100644 index 000000000..390628448 --- /dev/null +++ b/docking-layout/auto-save-load/src/app/app.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { GaugeModule } from '@smart-webcomponents-angular/gauge'; +import { CarouselModule } from '@smart-webcomponents-angular/carousel'; +import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox'; +import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar'; +import { TankModule } from '@smart-webcomponents-angular/tank'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, DockingLayoutModule, ButtonModule, GaugeModule, CarouselModule, MultilineTextBoxModule, ProgressBarModule, TankModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/auto-save-load/src/app/main.ts b/docking-layout/auto-save-load/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/auto-save-load/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/auto-save-load/src/assets/fonts.css b/docking-layout/auto-save-load/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/auto-save-load/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/auto-save-load/src/assets/styles.css b/docking-layout/auto-save-load/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/auto-save-load/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/auto-save-load/src/index.html b/docking-layout/auto-save-load/src/index.html new file mode 100644 index 000000000..1f2a0505f --- /dev/null +++ b/docking-layout/auto-save-load/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Auto-save-load + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/auto-save-load/src/main.ts b/docking-layout/auto-save-load/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/auto-save-load/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/auto-save-load/src/polyfills.ts b/docking-layout/auto-save-load/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/auto-save-load/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/auto-save-load/src/tsconfig.app.json b/docking-layout/auto-save-load/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/auto-save-load/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/auto-save-load/src/tsconfig.json b/docking-layout/auto-save-load/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/auto-save-load/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/drop-position/angular.json b/docking-layout/drop-position/angular.json new file mode 100644 index 000000000..2b5d446ec --- /dev/null +++ b/docking-layout/drop-position/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/drop-position/package.json b/docking-layout/drop-position/package.json new file mode 100644 index 000000000..0fc7bed9a --- /dev/null +++ b/docking-layout/drop-position/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-docking-layout-drop-position", + "description": "Angular docking-layout drop-position example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/drop-position/src/app/app.component.css b/docking-layout/drop-position/src/app/app.component.css new file mode 100644 index 000000000..538f19d7a --- /dev/null +++ b/docking-layout/drop-position/src/app/app.component.css @@ -0,0 +1,4 @@ +smart-docking-layout { + width: 100%; + height: 700px; +} diff --git a/docking-layout/drop-position/src/app/app.component.html b/docking-layout/drop-position/src/app/app.component.html new file mode 100644 index 000000000..c71cde79b --- /dev/null +++ b/docking-layout/drop-position/src/app/app.component.html @@ -0,0 +1,21 @@ + +
smartDockingLayout Drag & Drop Customization
+

Every DockingLayout item can have a specific drop position. Drop position + is the destination of an item as a result of a dragging operation ( reordering + of items ). They are applied as a property dropPosition to the items + of the Layout.

+

The Drop position is an array of strings indicating the allowed locations + at which the item can be dropped. Possible values are:

+
    +
  • All - all possible drop positions are available
    • +
  • Top - position Top is allowed.
    • +
  • Bottom - position Bottom is allowed.
    • +
  • Left - position Left is allowed.
    • +
  • Right - position Right is allowed.
    • +
  • Center - position Center (available only in snapMode = "advanced") is + allowed.
    • +
  • Header - position Header is allowed.
    • +
  • None - dropping is not allowed.
    • +
+

draggable is a smartTabItem property that can be applied in order + to disable the dragging of a specific tab items.

\ No newline at end of file diff --git a/docking-layout/drop-position/src/app/app.component.ts b/docking-layout/drop-position/src/app/app.component.ts new file mode 100644 index 000000000..568a2fdc0 --- /dev/null +++ b/docking-layout/drop-position/src/app/app.component.ts @@ -0,0 +1,108 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + + layout: Array = [ + { + type: "LayoutGroup", + orientation: "horizontal", + items: [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutPanel", + id: "item1", + label: "Tabs 1", + tabPosition: "top", + dropPosition: ["top", "bottom", "header", "layout-top", "layout-left", "layout-right", "layout-bottom"], + items: [ + { + type: "LayoutPanelItem", + label: "Tab 1", + selected: true, + content: "Item dropping is allowed only on the top, bottom and header positions." + } + ], + min: 200, + size: 627 + }, + { + type: "LayoutPanel", + id: "item2", + label: "Tab 2", + tabPosition: "top", + items: [ + { + type: "LayoutPanelItem", + label: "Tab 2", + selected: true, + content: "Dragging of this Item is disabled.", + draggable: false + } + ], + size: 952 + }, + { + type: "LayoutPanel", + id: "item3", + label: "Tabs 3", + tabPosition: "top", + dropPosition: ["top", "bottom", "header", "left", "right", "center"], + items: [ + { + type: "LayoutPanelItem", + label: "Tab 3", + selected: true, + content: "Content of Tab 3" + } + ], + min: 200, + size: 305 + } + ], + orientation: "vertical", + size: 395 + }, + { + type: "LayoutPanel", + label: "Tab 4", + tabPosition: "top", + dropPosition: ["none"], + items: [ + { + type: "LayoutPanelItem", + label: "Tab 4", + selected: true, + content: "Item dropping is not allowed here." + } + ], + size: 200 + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } +} \ No newline at end of file diff --git a/docking-layout/drop-position/src/app/app.module.ts b/docking-layout/drop-position/src/app/app.module.ts new file mode 100644 index 000000000..7b068b072 --- /dev/null +++ b/docking-layout/drop-position/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DockingLayoutModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/drop-position/src/app/main.ts b/docking-layout/drop-position/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/drop-position/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/drop-position/src/assets/fonts.css b/docking-layout/drop-position/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/drop-position/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/drop-position/src/assets/styles.css b/docking-layout/drop-position/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/drop-position/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/drop-position/src/index.html b/docking-layout/drop-position/src/index.html new file mode 100644 index 000000000..f98031d89 --- /dev/null +++ b/docking-layout/drop-position/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Drop-position + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/drop-position/src/main.ts b/docking-layout/drop-position/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/drop-position/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/drop-position/src/polyfills.ts b/docking-layout/drop-position/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/drop-position/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/drop-position/src/tsconfig.app.json b/docking-layout/drop-position/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/drop-position/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/drop-position/src/tsconfig.json b/docking-layout/drop-position/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/drop-position/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/insert-before-after-item/angular.json b/docking-layout/insert-before-after-item/angular.json new file mode 100644 index 000000000..6d7ea5f68 --- /dev/null +++ b/docking-layout/insert-before-after-item/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/insert-before-after-item/package.json b/docking-layout/insert-before-after-item/package.json new file mode 100644 index 000000000..46f71cf99 --- /dev/null +++ b/docking-layout/insert-before-after-item/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-insert-before-after-item", + "description": "Angular docking-layout insert-before-after-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/insert-before-after-item/src/app/app.component.css b/docking-layout/insert-before-after-item/src/app/app.component.css new file mode 100644 index 000000000..61cb41baf --- /dev/null +++ b/docking-layout/insert-before-after-item/src/app/app.component.css @@ -0,0 +1,17 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} \ No newline at end of file diff --git a/docking-layout/insert-before-after-item/src/app/app.component.html b/docking-layout/insert-before-after-item/src/app/app.component.html new file mode 100644 index 000000000..1a6cb55ba --- /dev/null +++ b/docking-layout/insert-before-after-item/src/app/app.component.html @@ -0,0 +1,18 @@ + +
+
Choose an Item
+
+ + Tabs 0 + Tabs 1 + Tabs 2 + +
+
Choose a method
+
+ InsertBeforeItem +
+
+ InsertAfterItem +
+
\ No newline at end of file diff --git a/docking-layout/insert-before-after-item/src/app/app.component.ts b/docking-layout/insert-before-after-item/src/app/app.component.ts new file mode 100644 index 000000000..c84a3b141 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/app/app.component.ts @@ -0,0 +1,118 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent, DockingLayout } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListComponent, DropDownList } from '@smart-webcomponents-angular/dropdownlist'; +import { WindowComponent, Window } from '@smart-webcomponents-angular/window'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('button2', { read: ButtonComponent, static: false }) button2: ButtonComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout: DockingLayoutComponent = that.dockinglayout as DockingLayoutComponent, + dropDownList: DropDownListComponent = that.dropdownlist as DropDownListComponent, + insertBeforeButton: ButtonComponent = that.button as ButtonComponent, + insertAfterButton: ButtonComponent = that.button2 as ButtonComponent, + tabsWindowObject = { + label: 'New Item', + size: '25%', + items: [{ + label: 'New Tab Item', + content: 'New Tab Item Content' + }] + }, + createListItem = function () { + const item = document.createElement('smart-list-item'); + + item.label = 'Tabs ' + dropDownList.items.length; + dropDownList.appendChild(item); + }; + + smartDockingLayout.layout = [ + { + type: 'LayoutPanel', + label: 'Tabs 0', + items: [{ + label: 'Tab 0', + content: 'Content of Tab 0' + }] + }, + { + type: 'LayoutPanel', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1', + }] + }, + { + type: 'LayoutPanel', + label: 'Tabs 2', + items: [{ + label: 'Tab 2', + content: 'Content of Tab 2' + }] + } + ]; + + let itemsCount = 0; + + insertAfterButton.addEventListener('click', function (): void { + if (itemsCount === 1) { + insertAfterButton.disabled = true; + insertBeforeButton.disabled = true; + } + + smartDockingLayout.insertAfterItem(dropDownList.selectedIndexes[0], tabsWindowObject); + createListItem(); + itemsCount++; + }); + + insertBeforeButton.addEventListener('click', function (): void { + if (itemsCount === 1) { + insertAfterButton.disabled = true; + insertBeforeButton.disabled = true; + } + + smartDockingLayout.insertBeforeItem(dropDownList.selectedIndexes[0], tabsWindowObject); + createListItem(); + itemsCount++; + }); + + smartDockingLayout.addEventListener('stateChange', function (): void { + let layoutItems: Array = smartDockingLayout.items, i: number; + let undockedItems: Array = smartDockingLayout.undockedItems; + + for (i = 0; i < layoutItems.length; i++) { + layoutItems[i].label = 'Tabs ' + i; + layoutItems[i].update(0, 'Tab ' + i, 'Content of Tab ' + i); + } + + for (i = 0; i < undockedItems.length; i++) { + undockedItems[i].label = 'Undocked Tabs'; + undockedItems[i].update(0, 'Tab', 'Content of Undocked Tab'); + } + }); + } +} \ No newline at end of file diff --git a/docking-layout/insert-before-after-item/src/app/app.module.ts b/docking-layout/insert-before-after-item/src/app/app.module.ts new file mode 100644 index 000000000..b9fc97dce --- /dev/null +++ b/docking-layout/insert-before-after-item/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DockingLayoutModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/insert-before-after-item/src/app/main.ts b/docking-layout/insert-before-after-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/insert-before-after-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/insert-before-after-item/src/assets/fonts.css b/docking-layout/insert-before-after-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/insert-before-after-item/src/assets/styles.css b/docking-layout/insert-before-after-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/insert-before-after-item/src/index.html b/docking-layout/insert-before-after-item/src/index.html new file mode 100644 index 000000000..33aa25d60 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Insert-before-after-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/insert-before-after-item/src/main.ts b/docking-layout/insert-before-after-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/insert-before-after-item/src/polyfills.ts b/docking-layout/insert-before-after-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/insert-before-after-item/src/tsconfig.app.json b/docking-layout/insert-before-after-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/insert-before-after-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/insert-before-after-item/src/tsconfig.json b/docking-layout/insert-before-after-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/insert-before-after-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/insert-into-item/angular.json b/docking-layout/insert-into-item/angular.json new file mode 100644 index 000000000..6d7ea5f68 --- /dev/null +++ b/docking-layout/insert-into-item/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/insert-into-item/package.json b/docking-layout/insert-into-item/package.json new file mode 100644 index 000000000..a2278cb1d --- /dev/null +++ b/docking-layout/insert-into-item/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-insert-into-item", + "description": "Angular docking-layout insert-into-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/insert-into-item/src/app/app.component.css b/docking-layout/insert-into-item/src/app/app.component.css new file mode 100644 index 000000000..8c4cf453f --- /dev/null +++ b/docking-layout/insert-into-item/src/app/app.component.css @@ -0,0 +1,19 @@ +smart-docking-layout .smart-items-container > .smart-container > smart-splitter-item { + width: 50%; +} + +smart-docking-layout { + width: 50%; + height: 600px; +} + +#container { + margin-left: 0; +} + +#insertIntoLeft, +#insertIntoRight, +#insertIntoTop, +#insertIntoBottom { + width: 125px; +} diff --git a/docking-layout/insert-into-item/src/app/app.component.html b/docking-layout/insert-into-item/src/app/app.component.html new file mode 100644 index 000000000..b65be395a --- /dev/null +++ b/docking-layout/insert-into-item/src/app/app.component.html @@ -0,0 +1,17 @@ +
+
Choose an Item
+
+ + Tabs 0 + Tabs 1 + +
+
+
Choose a method:
+ InsertIntoLeft
+ InsertIntoRight
+ InsertIntoTop
+ InsertIntoBottom +
+
+ \ No newline at end of file diff --git a/docking-layout/insert-into-item/src/app/app.component.ts b/docking-layout/insert-into-item/src/app/app.component.ts new file mode 100644 index 000000000..a00531584 --- /dev/null +++ b/docking-layout/insert-into-item/src/app/app.component.ts @@ -0,0 +1,117 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent, DockingLayout } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListComponent, DropDownList } from '@smart-webcomponents-angular/dropdownlist'; +import { WindowComponent, Window } from '@smart-webcomponents-angular/window'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('buttonInsertIntoLeft', { read: ButtonComponent, static: false }) buttonInsertIntoLeft: ButtonComponent; + @ViewChild('buttonInsertIntoRight', { read: ButtonComponent, static: false }) buttonInsertIntoRight: ButtonComponent; + @ViewChild('buttonInsertIntoTop', { read: ButtonComponent, static: false }) buttonInsertIntoTop: ButtonComponent; + @ViewChild('buttonInsertIntoBottom', { read: ButtonComponent, static: false }) buttonInsertIntoBottom: ButtonComponent; + @ViewChild('dockingLayout', { read: DockingLayoutComponent, static: false }) dockingLayout: DockingLayoutComponent; + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + layout: Array = [ + { + type: 'LayoutPanel', + label: 'Tabs 0', + items: [{ + label: 'Tab 0', + content: 'Content of Tab 0' + }] + }, + { + type: 'LayoutPanel', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1', + }] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout: DockingLayoutComponent = that.dockingLayout as DockingLayoutComponent, + dropDownList: DropDownListComponent = that.dropdownlist as DropDownListComponent, + buttonInsertIntoLeft: ButtonComponent = that.buttonInsertIntoLeft as ButtonComponent, + buttonInsertIntoRight: ButtonComponent = that.buttonInsertIntoRight as ButtonComponent, + buttonInsertIntoTop: ButtonComponent = that.buttonInsertIntoTop as ButtonComponent, + buttonInsertIntoBottom: ButtonComponent = that.buttonInsertIntoBottom as ButtonComponent, + tabsWindowObject = { + label: 'New Item', + size: '50%', + items: [{ + label: 'New Tab Item', + content: 'New Tab Item Content' + }] + }, createListItem = function () { + const item = document.createElement('smart-list-item'); + + item.label = 'Tabs ' + dropDownList.items.length; + dropDownList.appendChild(item); + }; + + buttonInsertIntoLeft.addEventListener('click', function (): void { + const index: number = dropDownList.selectedIndexes[0]; + + smartDockingLayout.insertIntoLeft(index, tabsWindowObject); + createListItem(); + }); + + buttonInsertIntoRight.addEventListener('click', function (): void { + const index: number = dropDownList.selectedIndexes[0]; + + smartDockingLayout.insertIntoRight(index, tabsWindowObject); + createListItem(); + }); + + buttonInsertIntoTop.addEventListener('click', function (): void { + const index: number = dropDownList.selectedIndexes[0]; + + smartDockingLayout.insertIntoTop(index, tabsWindowObject); + createListItem(); + }); + + buttonInsertIntoBottom.addEventListener('click', function (): void { + const index: number = dropDownList.selectedIndexes[0]; + + smartDockingLayout.insertIntoBottom(index, tabsWindowObject); + createListItem(); + }); + + smartDockingLayout.addEventListener('stateChange', function () { + const layoutItems: Array = that.dockingLayout.items, + undockedItems: Array = that.dockingLayout.undockedItems; + + for (let i = 0; i < layoutItems.length; i++) { + layoutItems[i].label = 'Tabs ' + i; + layoutItems[i].update(0, 'Tab ' + i, 'Content of Tab ' + i); + } + for (let i = 0; i < undockedItems.length; i++) { + undockedItems[i].label = 'Undocked Tabs'; + undockedItems[i].update(0, 'Tab', 'Content of Undocked Tab'); + } + }); + } +} \ No newline at end of file diff --git a/docking-layout/insert-into-item/src/app/app.module.ts b/docking-layout/insert-into-item/src/app/app.module.ts new file mode 100644 index 000000000..b9fc97dce --- /dev/null +++ b/docking-layout/insert-into-item/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DockingLayoutModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/insert-into-item/src/app/main.ts b/docking-layout/insert-into-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/insert-into-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/insert-into-item/src/assets/fonts.css b/docking-layout/insert-into-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/insert-into-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/insert-into-item/src/assets/styles.css b/docking-layout/insert-into-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/insert-into-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/insert-into-item/src/index.html b/docking-layout/insert-into-item/src/index.html new file mode 100644 index 000000000..cdd446599 --- /dev/null +++ b/docking-layout/insert-into-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Insert-into-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/insert-into-item/src/main.ts b/docking-layout/insert-into-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/insert-into-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/insert-into-item/src/polyfills.ts b/docking-layout/insert-into-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/insert-into-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/insert-into-item/src/tsconfig.app.json b/docking-layout/insert-into-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/insert-into-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/insert-into-item/src/tsconfig.json b/docking-layout/insert-into-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/insert-into-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/insert-outside-target-group/angular.json b/docking-layout/insert-outside-target-group/angular.json new file mode 100644 index 000000000..8c63eba08 --- /dev/null +++ b/docking-layout/insert-outside-target-group/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/insert-outside-target-group/package.json b/docking-layout/insert-outside-target-group/package.json new file mode 100644 index 000000000..b2b5453b0 --- /dev/null +++ b/docking-layout/insert-outside-target-group/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-docking-layout-insert-outside-target-group", + "description": "Angular docking-layout insert-outside-target-group example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/insert-outside-target-group/src/app/app.component.css b/docking-layout/insert-outside-target-group/src/app/app.component.css new file mode 100644 index 000000000..e5738bb64 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/app/app.component.css @@ -0,0 +1,19 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} + + diff --git a/docking-layout/insert-outside-target-group/src/app/app.component.html b/docking-layout/insert-outside-target-group/src/app/app.component.html new file mode 100644 index 000000000..f416c65fa --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/app/app.component.html @@ -0,0 +1,17 @@ + +
+
Insert Outside Tab 0 and Tab 1 group:
+
+ Left +
+
+ Right +
+
+ Top +
+
+ Bottom +
+
+
\ No newline at end of file diff --git a/docking-layout/insert-outside-target-group/src/app/app.component.ts b/docking-layout/insert-outside-target-group/src/app/app.component.ts new file mode 100644 index 000000000..c27700bf6 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/app/app.component.ts @@ -0,0 +1,157 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('button2', { read: ButtonComponent, static: false }) button2: ButtonComponent; + @ViewChild('button3', { read: ButtonComponent, static: false }) button3: ButtonComponent; + @ViewChild('button4', { read: ButtonComponent, static: false }) button4: ButtonComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + + layout: Array = [ + { + type: 'LayoutGroup', + size: '50%', + orientation: 'horizontal', + items: [ + { + type: 'LayoutPanel', + label: 'Tabs 0', + size: '50%', + items: [{ + label: 'Tab 0', + content: 'Content of Tab 0' + }] + }, + { + type: 'LayoutPanel', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1' + }] + } + ] + }, + { + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + type: 'LayoutPanel', + label: 'Tabs 2', + size: '25%', + items: [{ + label: 'Tab 2', + content: 'Content of Tab 2' + }] + }, + { + type: 'LayoutPanel', + label: 'Tabs 3', + items: [{ + label: 'Tab 3', + content: 'Content of Tab 3', + }] + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout = that.dockinglayout, + buttonInsertOutsideTargetGroupLeft = that.button, + buttonInsertOutsideTargetGroupRight = that.button2, + buttonInsertOutsideTargetGroupTop = that.button3, + buttonInsertOutsideTargetGroupBottom = that.button4, + createTabsWindowObject = function (): object { + return { + label: 'New Item', + items: [{ + label: 'New Tab Item', + content: 'New Tab Item Content' + }] + }; + }; + let insertCount = 0; + const validate = function (): boolean { + insertCount++; + + if (insertCount === 2) { + buttonInsertOutsideTargetGroupLeft.disabled = true; + buttonInsertOutsideTargetGroupRight.disabled = true; + buttonInsertOutsideTargetGroupTop.disabled = true; + buttonInsertOutsideTargetGroupBottom.disabled = true; + return true; + } + + if (insertCount > 2) { + return false; + } + + return true; + }; + + buttonInsertOutsideTargetGroupLeft.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertOutsideTargetGroupLeft(0, createTabsWindowObject()); + }); + + buttonInsertOutsideTargetGroupRight.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertOutsideTargetGroupRight(0, createTabsWindowObject()); + }); + + buttonInsertOutsideTargetGroupTop.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertOutsideTargetGroupTop(0, createTabsWindowObject()); + }); + + buttonInsertOutsideTargetGroupBottom.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertOutsideTargetGroupBottom(0, createTabsWindowObject()); + }); + + + } +} \ No newline at end of file diff --git a/docking-layout/insert-outside-target-group/src/app/app.module.ts b/docking-layout/insert-outside-target-group/src/app/app.module.ts new file mode 100644 index 000000000..984738537 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DockingLayoutModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/insert-outside-target-group/src/app/main.ts b/docking-layout/insert-outside-target-group/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/insert-outside-target-group/src/assets/fonts.css b/docking-layout/insert-outside-target-group/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/insert-outside-target-group/src/assets/styles.css b/docking-layout/insert-outside-target-group/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/insert-outside-target-group/src/index.html b/docking-layout/insert-outside-target-group/src/index.html new file mode 100644 index 000000000..01fa4a714 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Insert-outside-target-group + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/insert-outside-target-group/src/main.ts b/docking-layout/insert-outside-target-group/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/insert-outside-target-group/src/polyfills.ts b/docking-layout/insert-outside-target-group/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/insert-outside-target-group/src/tsconfig.app.json b/docking-layout/insert-outside-target-group/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/insert-outside-target-group/src/tsconfig.json b/docking-layout/insert-outside-target-group/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/insert-outside-target-group/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/insert-top-level-item/angular.json b/docking-layout/insert-top-level-item/angular.json new file mode 100644 index 000000000..8c63eba08 --- /dev/null +++ b/docking-layout/insert-top-level-item/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/insert-top-level-item/package.json b/docking-layout/insert-top-level-item/package.json new file mode 100644 index 000000000..360db9a21 --- /dev/null +++ b/docking-layout/insert-top-level-item/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-docking-layout-insert-top-level-item", + "description": "Angular docking-layout insert-top-level-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/insert-top-level-item/src/app/app.component.css b/docking-layout/insert-top-level-item/src/app/app.component.css new file mode 100644 index 000000000..61cb41baf --- /dev/null +++ b/docking-layout/insert-top-level-item/src/app/app.component.css @@ -0,0 +1,17 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} \ No newline at end of file diff --git a/docking-layout/insert-top-level-item/src/app/app.component.html b/docking-layout/insert-top-level-item/src/app/app.component.html new file mode 100644 index 000000000..6e987f899 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/app/app.component.html @@ -0,0 +1,19 @@ + +
+
Insert Layout
+
+ Left +
+
+ Right +
+
+ Top +
+
+ Bottom +
+
+
+
+
Insert Top Level Docking Layout Item on Left, Right, Top, Bottom
\ No newline at end of file diff --git a/docking-layout/insert-top-level-item/src/app/app.component.ts b/docking-layout/insert-top-level-item/src/app/app.component.ts new file mode 100644 index 000000000..1c6f69360 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/app/app.component.ts @@ -0,0 +1,119 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('button2', { read: ButtonComponent, static: false }) button2: ButtonComponent; + @ViewChild('button3', { read: ButtonComponent, static: false }) button3: ButtonComponent; + @ViewChild('button4', { read: ButtonComponent, static: false }) button4: ButtonComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + + layout: Array = [ + { + type: 'LayoutPanel', + label: 'Tabs 0', + items: [{ + label: 'Tab 0', + content: 'Content of Tab 0' + }] + }, + { + type: 'LayoutPanel', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1', + }] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout = that.dockinglayout, + tabsWindowObject = { + label: 'New Item', + items: [{ + label: 'New Tab Item', + content: 'New Tab Item Content' + }] + }; + let insertCount = 0; + const validate = function (): boolean { + insertCount++; + + if (insertCount === 2) { + that.button.disabled = true; + that.button2.disabled = true; + that.button3.disabled = true; + that.button4.disabled = true; + return true; + } + + if (insertCount > 2) { + return false; + } + + return true; + }; + that.button.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertLayoutLeft(tabsWindowObject); + }); + + that.button2.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertLayoutRight(tabsWindowObject); + }); + + that.button3.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertLayoutTop(tabsWindowObject); + }); + + that.button4.addEventListener('click', function (): void { + const result: boolean = validate(); + + if (!result) { + return; + } + + smartDockingLayout.insertLayoutBottom(tabsWindowObject); + }); + + + } +} \ No newline at end of file diff --git a/docking-layout/insert-top-level-item/src/app/app.module.ts b/docking-layout/insert-top-level-item/src/app/app.module.ts new file mode 100644 index 000000000..984738537 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DockingLayoutModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/insert-top-level-item/src/app/main.ts b/docking-layout/insert-top-level-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/insert-top-level-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/insert-top-level-item/src/assets/fonts.css b/docking-layout/insert-top-level-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/insert-top-level-item/src/assets/styles.css b/docking-layout/insert-top-level-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/insert-top-level-item/src/index.html b/docking-layout/insert-top-level-item/src/index.html new file mode 100644 index 000000000..3bf905112 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Insert-top-level-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/insert-top-level-item/src/main.ts b/docking-layout/insert-top-level-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/insert-top-level-item/src/polyfills.ts b/docking-layout/insert-top-level-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/insert-top-level-item/src/tsconfig.app.json b/docking-layout/insert-top-level-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/insert-top-level-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/insert-top-level-item/src/tsconfig.json b/docking-layout/insert-top-level-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/insert-top-level-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/inside-window/angular.json b/docking-layout/inside-window/angular.json new file mode 100644 index 000000000..33a910aab --- /dev/null +++ b/docking-layout/inside-window/angular.json @@ -0,0 +1,132 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/gauge/styles/smart.gauge.css", + "./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css", + "./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css", + "./node_modules/@smart-webcomponents-angular/tree/styles/smart.tree.css", + "./node_modules/@smart-webcomponents-angular/window/styles/smart.window.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/inside-window/package.json b/docking-layout/inside-window/package.json new file mode 100644 index 000000000..3eb043f19 --- /dev/null +++ b/docking-layout/inside-window/package.json @@ -0,0 +1,58 @@ +{ + "name": "angular-docking-layout-inside-window", + "description": "Angular docking-layout inside-window example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/gauge": "9.2.22", + "@smart-webcomponents-angular/multilinetextbox": "9.2.22", + "@smart-webcomponents-angular/textbox": "9.2.22", + "@smart-webcomponents-angular/tree": "9.2.22", + "@smart-webcomponents-angular/window": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/inside-window/src/app/app.component.css b/docking-layout/inside-window/src/app/app.component.css new file mode 100644 index 000000000..cb92f4269 --- /dev/null +++ b/docking-layout/inside-window/src/app/app.component.css @@ -0,0 +1,70 @@ +body { + margin: 0 auto; +} + +app-root { + height: 100vh; + display: block; + width: 100vw; +} + +#layoutWindow { + width: 750px; + height: 500px; + background-color: #EEEDF3; + top: calc(50% - 500px / 2); + left: calc(50% - 750px / 2); +} + + #layoutWindow .smart-window > .smart-container > .smart-content { + background-color: #F5F5F5; + } + +smart-docking-layout, +.smart-window smart-gauge { + width: 100%; + height: 100%; +} + + smart-docking-layout smart-splitter-item { + width: 33.3%; + } + +.smart-window smart-text-box, +.smart-window smart-gauge, +.smart-window smart-multiline-text-box, +.smart-window smart-tree { + width: 100%; + height: 100%; + border: none; + background-color: #F5F5F5; +} + +/* ------------ Google fonts ------------ */ + +/* fallback */ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; + margin-right: 10px; +} + +/* ------------ */ diff --git a/docking-layout/inside-window/src/app/app.component.html b/docking-layout/inside-window/src/app/app.component.html new file mode 100644 index 000000000..8d2820005 --- /dev/null +++ b/docking-layout/inside-window/src/app/app.component.html @@ -0,0 +1,44 @@ + + + + + + + folder Attractions + Movies + Circus + Concerts + Monuments + + + folder Dining + Restaurants + Cafés + Bars + + + folder Education + Schools + Colleges + Universities + Educational courses + + + folder Family + Babysitting + Family trips + Theme parks + + + folder Health + Hospitals + Family physicians + Optics + + + + +File Editor 2 +File Editor 3 +Some Text Inside the Text Box + \ No newline at end of file diff --git a/docking-layout/inside-window/src/app/app.component.ts b/docking-layout/inside-window/src/app/app.component.ts new file mode 100644 index 000000000..e4bb622b7 --- /dev/null +++ b/docking-layout/inside-window/src/app/app.component.ts @@ -0,0 +1,180 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { WindowComponent } from '@smart-webcomponents-angular/window'; +import { TreeComponent } from '@smart-webcomponents-angular/tree'; +import { MultilineTextBoxComponent } from '@smart-webcomponents-angular/multilinetextbox'; +import { TextBoxComponent } from '@smart-webcomponents-angular/textbox'; +import { GaugeComponent } from '@smart-webcomponents-angular/gauge'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + @ViewChild('window', { read: WindowComponent, static: false }) window: WindowComponent; + @ViewChild('tree', { read: TreeComponent, static: false }) tree: TreeComponent; + @ViewChild('multilineTextBox', { read: MultilineTextBoxComponent, static: false }) multilineTextBox: MultilineTextBoxComponent; + @ViewChild('multilineTextBox2', { read: MultilineTextBoxComponent, static: false }) multilineTextBox2: MultilineTextBoxComponent; + @ViewChild('multilineTextBox3', { read: MultilineTextBoxComponent, static: false }) multilineTextBox3: MultilineTextBoxComponent; + @ViewChild('textBox', { read: TextBoxComponent, static: false }) textBox: TextBoxComponent; + @ViewChild('gauge', { read: GaugeComponent, static: false }) gauge: GaugeComponent; + + multilineTextBoxValue: string = ` + + + folder Attractions + Movies + Circus + Concerts + Monuments + + + folder Dining + Restaurants + Cafés + Bars + + + folder Education + Schools + Colleges + Universities + Educational courses + + + folder Family + Babysitting + Family trips + Theme parks + + + folder Health + Hospitals + Family physicians + Optics + + + `; + + layout: Array = [ + { + id: 'item0', + label: 'Tabs 0', + items: [{ + label: 'Tab A', + selected: true, + content: 'This is the first item of the Tabs 0.' + }, + { + label: 'Tab B', + content: '' + }], + autoHide: true, + autoHidePosition: 'left' + }, + { + id: 'item1', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + selected: true, + content: '' + }, + { + label: 'Tab 2', + content: '' + }, + { + label: 'Tab 3', + content: '' + }], + headerPosition: 'none', + tabCloseButtons: true + }, + { + id: 'item2', + label: 'Solution Explorer', + items: [{ + label: 'Tab 4', + content: '' + }], + tabPosition: 'hidden' + }, + { + id: 'item3', + label: 'Tabs 3', + items: [{ + label: 'Tab 4', + selected: true, + content: '' + }, + { + label: 'Tab 5', + content: 'Contents of Tab Item 5.' + }], + autoHide: true, + autoHidePosition: 'top' + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.dockinglayout.update('item0', { + items: [ + { + index: 1, + content: that.textBox.nativeElement + } + ] + }); + + that.dockinglayout.update('item2', { + items: [ + { + index: 2, + content: that.tree.nativeElement + } + ] + }); + + that.dockinglayout.update('item1', { + items: [{ + index: 0, + content: that.multilineTextBox.nativeElement + }, + { + index: 1, + content: that.multilineTextBox2.nativeElement + }, + { + index: 2, + content: that.multilineTextBox3.nativeElement + }] + }); + + that.dockinglayout.update('item3', { + items: [ + { + index: 0, + content: that.gauge.nativeElement + } + ] + }); + } +} \ No newline at end of file diff --git a/docking-layout/inside-window/src/app/app.module.ts b/docking-layout/inside-window/src/app/app.module.ts new file mode 100644 index 000000000..307537bec --- /dev/null +++ b/docking-layout/inside-window/src/app/app.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { WindowModule } from '@smart-webcomponents-angular/window'; +import { TreeModule } from '@smart-webcomponents-angular/tree'; +import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox'; +import { TextBoxModule } from '@smart-webcomponents-angular/textbox'; +import { GaugeModule } from '@smart-webcomponents-angular/gauge'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, DockingLayoutModule, WindowModule, TreeModule, MultilineTextBoxModule, TextBoxModule, GaugeModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/inside-window/src/app/main.ts b/docking-layout/inside-window/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/inside-window/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/inside-window/src/assets/fonts.css b/docking-layout/inside-window/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/inside-window/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/inside-window/src/assets/styles.css b/docking-layout/inside-window/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/inside-window/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/inside-window/src/index.html b/docking-layout/inside-window/src/index.html new file mode 100644 index 000000000..f8c288740 --- /dev/null +++ b/docking-layout/inside-window/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Inside-window + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/inside-window/src/main.ts b/docking-layout/inside-window/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/inside-window/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/inside-window/src/polyfills.ts b/docking-layout/inside-window/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/inside-window/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/inside-window/src/tsconfig.app.json b/docking-layout/inside-window/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/inside-window/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/inside-window/src/tsconfig.json b/docking-layout/inside-window/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/inside-window/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/item-dock-undock/angular.json b/docking-layout/item-dock-undock/angular.json new file mode 100644 index 000000000..6d7ea5f68 --- /dev/null +++ b/docking-layout/item-dock-undock/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/item-dock-undock/package.json b/docking-layout/item-dock-undock/package.json new file mode 100644 index 000000000..7963ce211 --- /dev/null +++ b/docking-layout/item-dock-undock/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-item-dock-undock", + "description": "Angular docking-layout item-dock-undock example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/item-dock-undock/src/app/app.component.css b/docking-layout/item-dock-undock/src/app/app.component.css new file mode 100644 index 000000000..46ba64682 --- /dev/null +++ b/docking-layout/item-dock-undock/src/app/app.component.css @@ -0,0 +1,12 @@ +smart-docking-layout .smart-items-container > .smart-container > smart-splitter-item { + width: 50%; +} + +smart-docking-layout { + width: 50%; + height: 600px; +} + +#container { + margin-left: 0; +} diff --git a/docking-layout/item-dock-undock/src/app/app.component.html b/docking-layout/item-dock-undock/src/app/app.component.html new file mode 100644 index 000000000..cbe3e05c9 --- /dev/null +++ b/docking-layout/item-dock-undock/src/app/app.component.html @@ -0,0 +1,20 @@ + +
+
Choose an Item
+
+ + Tabs A + Tabs B + Tabs C + Tabs D + +
+
+ Dock +
+
+ Undock +
+
+
+
\ No newline at end of file diff --git a/docking-layout/item-dock-undock/src/app/app.component.ts b/docking-layout/item-dock-undock/src/app/app.component.ts new file mode 100644 index 000000000..571ee8713 --- /dev/null +++ b/docking-layout/item-dock-undock/src/app/app.component.ts @@ -0,0 +1,88 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('button2', { read: ButtonComponent, static: false }) button2: ButtonComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + layout: Array = [ + { + type: 'LayoutPanel', + items: [{ + id: 'A', + label: 'A', + content: 'Content of item with id #itemA', + selected: true + }], + autoHide: true, + autoHidePosition: 'top' + }, + { + type: 'LayoutPanel', + items: [{ + id: 'B', + label: 'B', + content: 'Content of item with id #itemB', + }], + autoHide: true, + autoHidePosition: 'left' + }, + { + type: 'LayoutPanel', + items: [{ + id: 'C', + label: 'C', + content: 'Content of item with id #itemC' + }], + autoHide: true, + autoHidePosition: 'right' + }, + { + type: 'LayoutPanel', + items: [{ + id: 'D', + label: 'D', + content: 'Content of item with id #itemD', + }], + autoHide: true, + autoHidePosition: 'bottom' + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout = that.dockinglayout, + dropDownList = that.dropdownlist; + + that.button.addEventListener('click', function (): void { + smartDockingLayout.dock(dropDownList.selectedValues[0]); + }); + + that.button2.addEventListener('click', function (): void { + smartDockingLayout.undock(dropDownList.selectedValues[0]); + }); + } +} \ No newline at end of file diff --git a/docking-layout/item-dock-undock/src/app/app.module.ts b/docking-layout/item-dock-undock/src/app/app.module.ts new file mode 100644 index 000000000..b9fc97dce --- /dev/null +++ b/docking-layout/item-dock-undock/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DockingLayoutModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/item-dock-undock/src/app/main.ts b/docking-layout/item-dock-undock/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/item-dock-undock/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/item-dock-undock/src/assets/fonts.css b/docking-layout/item-dock-undock/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/item-dock-undock/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/item-dock-undock/src/assets/styles.css b/docking-layout/item-dock-undock/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/item-dock-undock/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/item-dock-undock/src/index.html b/docking-layout/item-dock-undock/src/index.html new file mode 100644 index 000000000..077ca33bc --- /dev/null +++ b/docking-layout/item-dock-undock/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Item-dock-undock + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/item-dock-undock/src/main.ts b/docking-layout/item-dock-undock/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/item-dock-undock/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/item-dock-undock/src/polyfills.ts b/docking-layout/item-dock-undock/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/item-dock-undock/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/item-dock-undock/src/tsconfig.app.json b/docking-layout/item-dock-undock/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/item-dock-undock/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/item-dock-undock/src/tsconfig.json b/docking-layout/item-dock-undock/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/item-dock-undock/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/layout-item-group/angular.json b/docking-layout/layout-item-group/angular.json new file mode 100644 index 000000000..2b5d446ec --- /dev/null +++ b/docking-layout/layout-item-group/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/layout-item-group/package.json b/docking-layout/layout-item-group/package.json new file mode 100644 index 000000000..b8dd72b11 --- /dev/null +++ b/docking-layout/layout-item-group/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-docking-layout-layout-item-group", + "description": "Angular docking-layout layout-item-group example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/layout-item-group/src/app/app.component.css b/docking-layout/layout-item-group/src/app/app.component.css new file mode 100644 index 000000000..18be68031 --- /dev/null +++ b/docking-layout/layout-item-group/src/app/app.component.css @@ -0,0 +1,4 @@ +smart-docking-layout { + width: 100%; + height: 500px; +} diff --git a/docking-layout/layout-item-group/src/app/app.component.html b/docking-layout/layout-item-group/src/app/app.component.html new file mode 100644 index 000000000..dc1748c32 --- /dev/null +++ b/docking-layout/layout-item-group/src/app/app.component.html @@ -0,0 +1,5 @@ + +
Smart Docking Layout has two types of Layout Groups. Layout group represents + a container of items. There are "horizontal" and "vertical" groups and + you can put layout group inside another layout group with API and UI drag + and drop.
\ No newline at end of file diff --git a/docking-layout/layout-item-group/src/app/app.component.ts b/docking-layout/layout-item-group/src/app/app.component.ts new file mode 100644 index 000000000..725eb4b0c --- /dev/null +++ b/docking-layout/layout-item-group/src/app/app.component.ts @@ -0,0 +1,102 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + + layout: Array = [ + { + //The Base Group + type: 'LayoutGroup', + orientation: 'vertical', + items: [ + { + //DockingLayout Item A + label: 'TabsWindow A', + size: '25%', + items: [{ + //Tab Item A1 of Item A + label: 'Tab A1', + content: 'Content of A1' + }] + }, + { + //A new Inner Horizontal Panel Group + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + //DockingLayout Item B + label: 'TabsWindow B', + size: '50%', + items: [{ + //Tab Item B1 of Item B + label: 'Tab B1', + selected: true, + content: 'Content of B1' + }, + ] + }, + { + //DockingLayout Item C + label: 'TabsWindow C', + size: '50%', + items: [{ + //Tab Item C2 of Item C + label: 'Tab C2', + content: 'Content of C2' + }] + } + ] + }, + { + //A new Inner Vertical Panel Group + type: 'LayoutGroup', + orientation: 'vertical', + size: '50%', + items: [ + { + //DockingLayout Item D + label: 'TabsWindow D', + size: '50%', + items: [{ + //Tab Item D1 of Item D + label: 'Tab D1', + content: 'Content of D1' + }] + }, + { + //DockingLayout Item E + label: 'TabsWindow E', + size: '50%', + items: [{ + //Tab Item E1 of Item E + label: 'Tab E1', + content: 'Content of E1' + }] + } + ] + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } +} \ No newline at end of file diff --git a/docking-layout/layout-item-group/src/app/app.module.ts b/docking-layout/layout-item-group/src/app/app.module.ts new file mode 100644 index 000000000..5de8cccbf --- /dev/null +++ b/docking-layout/layout-item-group/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, DockingLayoutModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/layout-item-group/src/app/main.ts b/docking-layout/layout-item-group/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/layout-item-group/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/layout-item-group/src/assets/fonts.css b/docking-layout/layout-item-group/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/layout-item-group/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/layout-item-group/src/assets/styles.css b/docking-layout/layout-item-group/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/layout-item-group/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/layout-item-group/src/index.html b/docking-layout/layout-item-group/src/index.html new file mode 100644 index 000000000..7a8c7f691 --- /dev/null +++ b/docking-layout/layout-item-group/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Layout-item-group + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/layout-item-group/src/main.ts b/docking-layout/layout-item-group/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/layout-item-group/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/layout-item-group/src/polyfills.ts b/docking-layout/layout-item-group/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/layout-item-group/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/layout-item-group/src/tsconfig.app.json b/docking-layout/layout-item-group/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/layout-item-group/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/layout-item-group/src/tsconfig.json b/docking-layout/layout-item-group/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/layout-item-group/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/layout-item/angular.json b/docking-layout/layout-item/angular.json new file mode 100644 index 000000000..2b5d446ec --- /dev/null +++ b/docking-layout/layout-item/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/layout-item/package.json b/docking-layout/layout-item/package.json new file mode 100644 index 000000000..0c5a3af75 --- /dev/null +++ b/docking-layout/layout-item/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-docking-layout-layout-item", + "description": "Angular docking-layout layout-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/layout-item/src/app/app.component.css b/docking-layout/layout-item/src/app/app.component.css new file mode 100644 index 000000000..a6bbf7919 --- /dev/null +++ b/docking-layout/layout-item/src/app/app.component.css @@ -0,0 +1,4 @@ +smart-docking-layout { + width: 100%; + height: 600px; +} diff --git a/docking-layout/layout-item/src/app/app.component.html b/docking-layout/layout-item/src/app/app.component.html new file mode 100644 index 000000000..63c965716 --- /dev/null +++ b/docking-layout/layout-item/src/app/app.component.html @@ -0,0 +1,3 @@ + +
In this demo, the Docking Layout has Layout Items, which are inside one + Layout Group
\ No newline at end of file diff --git a/docking-layout/layout-item/src/app/app.component.ts b/docking-layout/layout-item/src/app/app.component.ts new file mode 100644 index 000000000..1a489e10c --- /dev/null +++ b/docking-layout/layout-item/src/app/app.component.ts @@ -0,0 +1,70 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + + layout: Array = [ + { + //The Base Group + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + //DockingLayout Item A + label: 'TabsWindow A', + size: '50%', + items: [{ + //Tab Item A1 of Item A + label: 'Tab A1', + content: 'Content of A1' + }] + }, + { + //DockingLayout Item B + label: 'TabsWindow B', + size: '25%', + items: [{ + //Tab Item B1 of Item B + label: 'Tab B1', + selected: true, + content: 'Content of B1' + }, + { + //Tab Item B2 of Item B + label: 'Tab B2', + content: 'Content of B2' + }] + }, + { + //DockingLayout Item C + label: 'TabsWindow C', + size: '25%', + items: [{ + //Tab Item C1 of Item C + label: 'Tab C1', + content: 'Content of C1' + }] + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } +} \ No newline at end of file diff --git a/docking-layout/layout-item/src/app/app.module.ts b/docking-layout/layout-item/src/app/app.module.ts new file mode 100644 index 000000000..5de8cccbf --- /dev/null +++ b/docking-layout/layout-item/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, DockingLayoutModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/layout-item/src/app/main.ts b/docking-layout/layout-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/layout-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/layout-item/src/assets/fonts.css b/docking-layout/layout-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/layout-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/layout-item/src/assets/styles.css b/docking-layout/layout-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/layout-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/layout-item/src/index.html b/docking-layout/layout-item/src/index.html new file mode 100644 index 000000000..566d29357 --- /dev/null +++ b/docking-layout/layout-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Layout-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/layout-item/src/main.ts b/docking-layout/layout-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/layout-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/layout-item/src/polyfills.ts b/docking-layout/layout-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/layout-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/layout-item/src/tsconfig.app.json b/docking-layout/layout-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/layout-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/layout-item/src/tsconfig.json b/docking-layout/layout-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/layout-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/overview/angular.json b/docking-layout/overview/angular.json new file mode 100644 index 000000000..1573d014d --- /dev/null +++ b/docking-layout/overview/angular.json @@ -0,0 +1,131 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css", + "./node_modules/@smart-webcomponents-angular/slider/styles/smart.slider.css", + "./node_modules/@smart-webcomponents-angular/tabs/styles/smart.tabs.css", + "./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/overview/package.json b/docking-layout/overview/package.json new file mode 100644 index 000000000..42571bce6 --- /dev/null +++ b/docking-layout/overview/package.json @@ -0,0 +1,57 @@ +{ + "name": "angular-docking-layout-overview", + "description": "Angular docking-layout overview example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/multilinetextbox": "9.2.22", + "@smart-webcomponents-angular/slider": "9.2.22", + "@smart-webcomponents-angular/tabs": "9.2.22", + "@smart-webcomponents-angular/textbox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/overview/src/app/app.component.css b/docking-layout/overview/src/app/app.component.css new file mode 100644 index 000000000..390dc79db --- /dev/null +++ b/docking-layout/overview/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-slider { + margin-top: 100px; +} diff --git a/docking-layout/overview/src/app/app.component.html b/docking-layout/overview/src/app/app.component.html new file mode 100644 index 000000000..9ed118832 --- /dev/null +++ b/docking-layout/overview/src/app/app.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docking-layout/overview/src/app/app.component.ts b/docking-layout/overview/src/app/app.component.ts new file mode 100644 index 000000000..7e57fda9e --- /dev/null +++ b/docking-layout/overview/src/app/app.component.ts @@ -0,0 +1,86 @@ +import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Inject, ElementRef, ViewContainerRef } from '@angular/core'; +import { Smart, DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { SliderComponent } from '@smart-webcomponents-angular/slider'; +import { MultilineTextBoxComponent } from '@smart-webcomponents-angular/multilinetextbox'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit { + @ViewChild('slider', { read: SliderComponent, static: false }) slider: SliderComponent; + @ViewChild('multilinetextbox', { read: MultilineTextBoxComponent , static: false }) multilinetextbox: MultilineTextBoxComponent; + @ViewChild('docking', { read: DockingLayoutComponent, static: false }) docking: DockingLayoutComponent; + + + layout = [ + { + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + type: 'LayoutGroup', + items: [ + { + type: 'LayoutPanel', + id: 'tabPanel', + label: 'Input', + items: [{ + label: 'TextBox Tab', + content: '' + }, + { + label: 'Slider Tab', + content: '' + }], + size: '50%' + }, + { + type: 'LayoutPanel', + label: 'Output', + items: [ + { + id: 'outputTab', + label: 'Output', + headerPosition: 'none', + content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.' + } + ] + } + ], + orientation: 'vertical', + size: '50%' + }, + { + id: 'item0', + label: 'Tabs 0', + items: [{ + label: 'Tab A', + selected: true, + content: 'What is Lorem Ipsum?\n' + + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of' + 'type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in ' + 'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n' + + 'Why do we use it?\n' + + 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal ' + 'distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their' + 'default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on ' + 'purpose (injected humour and the like).' + }] + }] + }]; + + ngAfterViewInit(): void { + this.docking.update('tabPanel', + { + size: '33%', label: 'Tab1', + items: [{ + index: 0, label: 'Tab1', + content: this.multilinetextbox.nativeElement + }, + { + index: 1, label: 'Tab2', + content: this.slider.nativeElement + } + ] + }); + } +} diff --git a/docking-layout/overview/src/app/app.module.ts b/docking-layout/overview/src/app/app.module.ts new file mode 100644 index 000000000..60e2162b9 --- /dev/null +++ b/docking-layout/overview/src/app/app.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { TabsModule } from '@smart-webcomponents-angular/tabs'; +import { TextBoxModule } from '@smart-webcomponents-angular/textbox'; +import { SliderModule } from '@smart-webcomponents-angular/slider'; +import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, FormsModule, DockingLayoutModule, TabsModule, TextBoxModule, SliderModule, MultilineTextBoxModule], + schemas: [], + entryComponents: [], + providers: [], + bootstrap: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/overview/src/app/main.ts b/docking-layout/overview/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/overview/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/overview/src/assets/fonts.css b/docking-layout/overview/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/overview/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/overview/src/assets/styles.css b/docking-layout/overview/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/overview/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/overview/src/index.html b/docking-layout/overview/src/index.html new file mode 100644 index 000000000..86087dee9 --- /dev/null +++ b/docking-layout/overview/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Overview + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/overview/src/main.ts b/docking-layout/overview/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/overview/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/overview/src/polyfills.ts b/docking-layout/overview/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/overview/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/overview/src/tsconfig.app.json b/docking-layout/overview/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/overview/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/overview/src/tsconfig.json b/docking-layout/overview/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/overview/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/remove-item/angular.json b/docking-layout/remove-item/angular.json new file mode 100644 index 000000000..6d7ea5f68 --- /dev/null +++ b/docking-layout/remove-item/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/remove-item/package.json b/docking-layout/remove-item/package.json new file mode 100644 index 000000000..1adb5d15a --- /dev/null +++ b/docking-layout/remove-item/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-remove-item", + "description": "Angular docking-layout remove-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/remove-item/src/app/app.component.css b/docking-layout/remove-item/src/app/app.component.css new file mode 100644 index 000000000..c3f68a7aa --- /dev/null +++ b/docking-layout/remove-item/src/app/app.component.css @@ -0,0 +1,17 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} diff --git a/docking-layout/remove-item/src/app/app.component.html b/docking-layout/remove-item/src/app/app.component.html new file mode 100644 index 000000000..323a6fb33 --- /dev/null +++ b/docking-layout/remove-item/src/app/app.component.html @@ -0,0 +1,15 @@ + +
+
+ + Tab 0 + Tab 1 + Tab 2 + Tab 3 + +
+ +
+ Remove +
+
\ No newline at end of file diff --git a/docking-layout/remove-item/src/app/app.component.ts b/docking-layout/remove-item/src/app/app.component.ts new file mode 100644 index 000000000..6b6040faf --- /dev/null +++ b/docking-layout/remove-item/src/app/app.component.ts @@ -0,0 +1,100 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent, DockingLayout } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + layout: Array = [ + { + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + id: 'tab0', + type: 'LayoutPanel', + label: 'Tabs 0', + size: '65%', + items: [{ + label: 'Tab 0', + content: 'Content of Tab 0' + }] + }, + { + id: 'tab1', + type: 'LayoutPanel', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1' + }] + } + ] + }, + { + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + id: 'tab2', + type: 'LayoutPanel', + label: 'Tabs 2', + size: '25%', + items: [{ + label: 'Tab 2', + content: 'Content of Tab 2' + }] + }, + { + id: 'tab3', + type: 'LayoutPanel', + label: 'Tabs 3', + items: [{ + label: 'Tab 3', + content: 'Content of Tab 3', + }] + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + smartDockingLayout: DockingLayoutComponent = that.dockinglayout, + dropDownList: DropDownListComponent = that.dropdownlist; + let itemsCount: number = 0; + + that.button.addEventListener('click', function (): void { + smartDockingLayout.removeAt(dropDownList.selectedValues[0]); + dropDownList.removeAt(dropDownList.selectedIndexes[0]); + itemsCount++; + + if (itemsCount === 3) { + that.button.disabled = true; + dropDownList.disabled = true; + return; + } + }); + } +} \ No newline at end of file diff --git a/docking-layout/remove-item/src/app/app.module.ts b/docking-layout/remove-item/src/app/app.module.ts new file mode 100644 index 000000000..b9fc97dce --- /dev/null +++ b/docking-layout/remove-item/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DockingLayoutModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/remove-item/src/app/main.ts b/docking-layout/remove-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/remove-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/remove-item/src/assets/fonts.css b/docking-layout/remove-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/remove-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/remove-item/src/assets/styles.css b/docking-layout/remove-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/remove-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/remove-item/src/index.html b/docking-layout/remove-item/src/index.html new file mode 100644 index 000000000..c2825b2ae --- /dev/null +++ b/docking-layout/remove-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Remove-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/remove-item/src/main.ts b/docking-layout/remove-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/remove-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/remove-item/src/polyfills.ts b/docking-layout/remove-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/remove-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/remove-item/src/tsconfig.app.json b/docking-layout/remove-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/remove-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/remove-item/src/tsconfig.json b/docking-layout/remove-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/remove-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/right-to-left/angular.json b/docking-layout/right-to-left/angular.json new file mode 100644 index 000000000..2b5d446ec --- /dev/null +++ b/docking-layout/right-to-left/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/right-to-left/package.json b/docking-layout/right-to-left/package.json new file mode 100644 index 000000000..31b6f4fa5 --- /dev/null +++ b/docking-layout/right-to-left/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-docking-layout-right-to-left", + "description": "Angular docking-layout right-to-left example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/right-to-left/src/app/app.component.css b/docking-layout/right-to-left/src/app/app.component.css new file mode 100644 index 000000000..b1b31b987 --- /dev/null +++ b/docking-layout/right-to-left/src/app/app.component.css @@ -0,0 +1,22 @@ +smart-docking-layout .smart-splitter[orientation="horizontal"] { + --smart-splitter-item-size: 33.3%; +} + +smart-docking-layout { + width: 75%; + height: 600px; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout { + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout { + width: 100%; + position: relative; + margin: 10px 0px; + } +} diff --git a/docking-layout/right-to-left/src/app/app.component.html b/docking-layout/right-to-left/src/app/app.component.html new file mode 100644 index 000000000..963398290 --- /dev/null +++ b/docking-layout/right-to-left/src/app/app.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docking-layout/right-to-left/src/app/app.component.ts b/docking-layout/right-to-left/src/app/app.component.ts new file mode 100644 index 000000000..4e366df99 --- /dev/null +++ b/docking-layout/right-to-left/src/app/app.component.ts @@ -0,0 +1,81 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + + layout: Array = [ + { + type: 'LayoutGroup', + orientation: 'horizontal', + items: [ + { + type: 'LayoutPanel', + label: 'חלון א', + items: [{ + id: 'Itme', + label: '#Itme', + content: 'תוכן הפריט עם המזהה "Itme"', + selected: true + }] + }, + { + type: 'LayoutGroup', + id: 'verticalGroup', + orientation: 'vertical', + items: [ + { + type: 'LayoutPanel', + label: 'חלון ב', + size: '50%', + items: [{ + id: 'פריט ב', + label: '#פריט ב', + content: 'תוכן הפריט עם המזהה "פריט ב"', + }] + }, + { + type: 'LayoutPanel', + label: 'חלון ג', + items: [{ + id: 'פריט ג', + label: '#פריט ג', + content: 'תוכן הפריט עם המזהה "פריט ג"' + }] + }, + ] + }, + { + type: 'LayoutPanel', + label: 'חלון ד', + items: [{ + id: 'פריטים', + label: '#פריטים', + content: 'תוכן הפריט עם המזהה "פריטים"', + }] + } + ] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } +} \ No newline at end of file diff --git a/docking-layout/right-to-left/src/app/app.module.ts b/docking-layout/right-to-left/src/app/app.module.ts new file mode 100644 index 000000000..7b068b072 --- /dev/null +++ b/docking-layout/right-to-left/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DockingLayoutModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/right-to-left/src/app/main.ts b/docking-layout/right-to-left/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/right-to-left/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/right-to-left/src/assets/fonts.css b/docking-layout/right-to-left/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/right-to-left/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/right-to-left/src/assets/styles.css b/docking-layout/right-to-left/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/right-to-left/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/right-to-left/src/index.html b/docking-layout/right-to-left/src/index.html new file mode 100644 index 000000000..164985992 --- /dev/null +++ b/docking-layout/right-to-left/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Right-to-left + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/right-to-left/src/main.ts b/docking-layout/right-to-left/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/right-to-left/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/right-to-left/src/polyfills.ts b/docking-layout/right-to-left/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/right-to-left/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/right-to-left/src/tsconfig.app.json b/docking-layout/right-to-left/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/right-to-left/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/right-to-left/src/tsconfig.json b/docking-layout/right-to-left/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/right-to-left/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/snap-modes/angular.json b/docking-layout/snap-modes/angular.json new file mode 100644 index 000000000..1ffd8d389 --- /dev/null +++ b/docking-layout/snap-modes/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/snap-modes/package.json b/docking-layout/snap-modes/package.json new file mode 100644 index 000000000..5c04227ad --- /dev/null +++ b/docking-layout/snap-modes/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-snap-modes", + "description": "Angular docking-layout snap-modes example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/snap-modes/src/app/app.component.css b/docking-layout/snap-modes/src/app/app.component.css new file mode 100644 index 000000000..c3f68a7aa --- /dev/null +++ b/docking-layout/snap-modes/src/app/app.component.css @@ -0,0 +1,17 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} diff --git a/docking-layout/snap-modes/src/app/app.component.html b/docking-layout/snap-modes/src/app/app.component.html new file mode 100644 index 000000000..bb37d403e --- /dev/null +++ b/docking-layout/snap-modes/src/app/app.component.html @@ -0,0 +1,8 @@ + +
+
Snap Mode
+
+ Advanced + Simple +
+
\ No newline at end of file diff --git a/docking-layout/snap-modes/src/app/app.component.ts b/docking-layout/snap-modes/src/app/app.component.ts new file mode 100644 index 000000000..3eb42e150 --- /dev/null +++ b/docking-layout/snap-modes/src/app/app.component.ts @@ -0,0 +1,65 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + @ViewChild('radioButton', { read: RadioButtonComponent, static: false }) radioButton: RadioButtonComponent; + @ViewChild('radioButton2', { read: RadioButtonComponent, static: false }) radioButton2: RadioButtonComponent; + + layout: Array = [ + { + id: 'item1', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1', + selected: true + }, + { + label: 'Tab 2', + content: 'Content of Tab 2' + }], + dropPosition: ['top', 'bottom', 'left', 'layout-left', 'layout-top'] + }, + { + id: 'item2', + label: 'Tabs 2', + items: [{ + label: 'Tab 3', + content: 'Content of Tab 3' + }] + } + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + radioButtons = [that.radioButton, that.radioButton2]; + + for (let i = 0; i < radioButtons.length; i++) { + radioButtons[i].addEventListener('click', function (): void { + that.dockinglayout.snapMode = this.innerHTML.toLowerCase(); + }); + } + + + } +} \ No newline at end of file diff --git a/docking-layout/snap-modes/src/app/app.module.ts b/docking-layout/snap-modes/src/app/app.module.ts new file mode 100644 index 000000000..476849360 --- /dev/null +++ b/docking-layout/snap-modes/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DockingLayoutModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/snap-modes/src/app/main.ts b/docking-layout/snap-modes/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/snap-modes/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/snap-modes/src/assets/fonts.css b/docking-layout/snap-modes/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/snap-modes/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/snap-modes/src/assets/styles.css b/docking-layout/snap-modes/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/snap-modes/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/snap-modes/src/index.html b/docking-layout/snap-modes/src/index.html new file mode 100644 index 000000000..1b6653c60 --- /dev/null +++ b/docking-layout/snap-modes/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Snap-modes + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/snap-modes/src/main.ts b/docking-layout/snap-modes/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/snap-modes/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/snap-modes/src/polyfills.ts b/docking-layout/snap-modes/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/snap-modes/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/snap-modes/src/tsconfig.app.json b/docking-layout/snap-modes/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/snap-modes/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/snap-modes/src/tsconfig.json b/docking-layout/snap-modes/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/snap-modes/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/state/angular.json b/docking-layout/state/angular.json new file mode 100644 index 000000000..0eaaff7fb --- /dev/null +++ b/docking-layout/state/angular.json @@ -0,0 +1,134 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/carousel/styles/smart.carousel.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/gauge/styles/smart.gauge.css", + "./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css", + "./node_modules/@smart-webcomponents-angular/progressbar/styles/smart.progressbar.css", + "./node_modules/@smart-webcomponents-angular/tank/styles/smart.tank.css", + "./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/state/package.json b/docking-layout/state/package.json new file mode 100644 index 000000000..76978f084 --- /dev/null +++ b/docking-layout/state/package.json @@ -0,0 +1,60 @@ +{ + "name": "angular-docking-layout-state", + "description": "Angular docking-layout state example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/carousel": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/gauge": "9.2.22", + "@smart-webcomponents-angular/multilinetextbox": "9.2.22", + "@smart-webcomponents-angular/progressbar": "9.2.22", + "@smart-webcomponents-angular/tank": "9.2.22", + "@smart-webcomponents-angular/textbox": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/state/src/app/app.component.css b/docking-layout/state/src/app/app.component.css new file mode 100644 index 000000000..552502309 --- /dev/null +++ b/docking-layout/state/src/app/app.component.css @@ -0,0 +1,44 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} + +.smart-window smart-carousel, +.smart-window smart-multiline-text-box, +.smart-window smart-gauge, +.smart-window smart-tank { + width: 100%; + height: 100%; + border: none; +} + + .smart-window smart-carousel .smart-carousel-item .smart-carousel-item-container { + background-size: cover; + } + +.smart-window smart-tab-item > .smart-container { + display: flex; + justify-content: center; + align-items: center; +} + +.smart-window smart-multiline-text-box { + color: black; +} + +.smart-window smart-progress-bar { + margin-right: 5px; +} diff --git a/docking-layout/state/src/app/app.component.html b/docking-layout/state/src/app/app.component.html new file mode 100644 index 000000000..7dfd4c37a --- /dev/null +++ b/docking-layout/state/src/app/app.component.html @@ -0,0 +1,22 @@ + +
+
State Maintanance
+
+ Load Layout +
+
+ Save Layout State +
+
+ Save Current State +
+
+ Load Layout State +
+
+ Clear State +
+
+
+
+
\ No newline at end of file diff --git a/docking-layout/state/src/app/app.component.ts b/docking-layout/state/src/app/app.component.ts new file mode 100644 index 000000000..c8a086e34 --- /dev/null +++ b/docking-layout/state/src/app/app.component.ts @@ -0,0 +1,238 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation, ElementRef } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockingLayout'; +import { GaugeComponent, Gauge } from '@smart-webcomponents-angular/gauge'; +import { TankComponent, Tank } from '@smart-webcomponents-angular/tank'; +import { MultilineTextBoxComponent, MultilineTextBox } from '@smart-webcomponents-angular/multilinetextbox'; +import { ProgressBarComponent, ProgressBar } from '@smart-webcomponents-angular/progressbar'; +import { CarouselComponent, Carousel } from '@smart-webcomponents-angular/carousel'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('button2', { read: ButtonComponent, static: false }) button2: ButtonComponent; + @ViewChild('button3', { read: ButtonComponent, static: false }) button3: ButtonComponent; + @ViewChild('button4', { read: ButtonComponent, static: false }) button4: ButtonComponent; + @ViewChild('button5', { read: ButtonComponent, static: false }) button5: ButtonComponent; + @ViewChild('log', { read: ElementRef, static: false }) log: ElementRef; + @ViewChild('dockingLayout', { read: DockingLayoutComponent, static: false }) dockingLayout: DockingLayoutComponent; + + initializeLayout(event: any) { + const that = this, + dockingLayout = that.dockingLayout, + data: Array = [], + urlString = 'https://picsum.photos/1000/500/?image=', + gauge1: Gauge = document.createElement('smart-gauge'), + gauge2: Gauge = document.createElement('smart-gauge'), + carousel: Carousel = document.createElement('smart-carousel'), + multiLineTextBox: MultilineTextBox = document.createElement('smart-multiline-text-box'), + tank: Tank = document.createElement('smart-tank'), + progressBar1: ProgressBar = document.createElement('smart-progress-bar'), + progressBar2: ProgressBar = document.createElement('smart-progress-bar'); + + dockingLayout.layout = [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutGroup", + items: [ + { + type: "LayoutPanel", + label: "Tab 10", + items: [ + { + id: "tabItem10", + type: "LayoutPanelItem", + label: "Tab 10", + selected: true + } + ], + size: 153 + }, + { + type: "LayoutPanel", + label: "Tabs 1", + items: [ + { + id: "tabItem1", + type: "LayoutPanelItem", + label: "Tab 1", + selected: true + } + ], + size: 218 + } + ], + orientation: "horizontal", + size: 203 + }, + { + type: "LayoutPanel", + label: "Tab 6", + tabPosition: "hidden", + items: [ + { + id: "tabItem6", + type: "LayoutPanelItem", + label: "Tab 6", + selected: true + } + ], + size: 739 + } + ], + orientation: "vertical", + size: 381 + }, + { + type: "LayoutGroup", + items: [ + { + type: "LayoutPanel", + label: "Tabs 2", + items: [ + { + id: "tabItem2", + type: "LayoutPanelItem", + label: "Tab 2", + selected: true + } + ], + size: 604 + }, + { + type: "LayoutPanel", + label: "Tabs 3", + items: [ + { + id: "tabItem7", + type: "LayoutPanelItem", + label: "Tab 7", + selected: true + }, + { + id: "tabItem8", + type: "LayoutPanelItem", + label: "Tab 8" + } + ], + size: 338, + resizeMode: 'both' + } + ], + orientation: "vertical", + size: 334 + } + ], + orientation: "horizontal" + } + ]; + + for (let i = 0; i < 5; i++) { + const item = { + image: urlString + (100 + i) + }; + data.push(item); + } + + gauge2.analogDisplayType = 'fill'; + gauge2.startAngle = 0; + gauge2.endAngle = 180; + gauge2.digitalDisplay = true; + gauge2.digitalDisplayPosition = 'center'; + carousel.dataSource = data; + carousel.swipe = true; + carousel.slideShow = true; + carousel.loop = true; + carousel.indicators = true; + carousel.keyboard = true; + multiLineTextBox.value = 'What is Lorem Ipsum? \n\n' + + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a' + 'galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially' + ' unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker' + 'including versions of Lorem Ipsum.'; + tank.max = 50; + tank.value = 25; + progressBar1.showProgressValue = true; + progressBar2.showProgressValue = true; + + gauge1.addEventListener('change', function (event: CustomEvent) { + progressBar1.value = event.detail.value; + }); + + gauge2.addEventListener('change', function (event: CustomEvent) { + progressBar2.value = event.detail.value; + }); + + if (dockingLayout.items.length > 0) { + dockingLayout.nativeElement.querySelector('#tabItem10').appendChild(progressBar1); + dockingLayout.nativeElement.querySelector('#tabItem10').appendChild(progressBar2); + dockingLayout.nativeElement.querySelector('#tabItem7').appendChild(gauge1); + dockingLayout.nativeElement.querySelector('#tabItem8').appendChild(gauge2); + dockingLayout.nativeElement.querySelector('#tabItem6').appendChild(carousel); + dockingLayout.nativeElement.querySelector('#tabItem2').appendChild(multiLineTextBox); + dockingLayout.nativeElement.querySelector('#tabItem1').appendChild(tank); + + gauge1.addEventListener('change', function (event: CustomEvent): void { + progressBar1.value = event.detail.value; + }); + } + + that.button.disabled = true; + that.log.nativeElement.innerHTML = JSON.stringify(dockingLayout.getJSONStructure(), null, 4); + } + + clearState(event: any): void { + this.dockingLayout.clearState(); + } + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + layout = that.dockingLayout; + let state, currentState; + + that.log.nativeElement.innerHTML = JSON.stringify(layout.getJSONStructure(), null, 4); + + document.getElementById('saveState').addEventListener('click', function ():void { + layout.saveState(); + }); + + that.button2.addEventListener('click', function ():void { + currentState = layout.getState(); + }); + + that.button3.addEventListener('click', function ():void { + layout.loadState(currentState); + }); + + that.button4.addEventListener('click', function ():void { + layout.clearState(); + }); + + layout.addEventListener('stateChange', function ():void { + state = layout.getJSONStructure(); + that.log.nativeElement.innerHTML = JSON.stringify(state, null, 4); + }); + + + } +} \ No newline at end of file diff --git a/docking-layout/state/src/app/app.module.ts b/docking-layout/state/src/app/app.module.ts new file mode 100644 index 000000000..390628448 --- /dev/null +++ b/docking-layout/state/src/app/app.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { GaugeModule } from '@smart-webcomponents-angular/gauge'; +import { CarouselModule } from '@smart-webcomponents-angular/carousel'; +import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox'; +import { ProgressBarModule } from '@smart-webcomponents-angular/progressbar'; +import { TankModule } from '@smart-webcomponents-angular/tank'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, DockingLayoutModule, ButtonModule, GaugeModule, CarouselModule, MultilineTextBoxModule, ProgressBarModule, TankModule], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) + +export class AppModule { } diff --git a/docking-layout/state/src/app/main.ts b/docking-layout/state/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/state/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/state/src/assets/fonts.css b/docking-layout/state/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/state/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/state/src/assets/styles.css b/docking-layout/state/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/state/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/state/src/index.html b/docking-layout/state/src/index.html new file mode 100644 index 000000000..469e87569 --- /dev/null +++ b/docking-layout/state/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout State + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/state/src/main.ts b/docking-layout/state/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/state/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/state/src/polyfills.ts b/docking-layout/state/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/state/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/state/src/tsconfig.app.json b/docking-layout/state/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/state/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/state/src/tsconfig.json b/docking-layout/state/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/state/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/update-item/angular.json b/docking-layout/update-item/angular.json new file mode 100644 index 000000000..6d7ea5f68 --- /dev/null +++ b/docking-layout/update-item/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/update-item/package.json b/docking-layout/update-item/package.json new file mode 100644 index 000000000..80fcd8010 --- /dev/null +++ b/docking-layout/update-item/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-docking-layout-update-item", + "description": "Angular docking-layout update-item example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/update-item/src/app/app.component.css b/docking-layout/update-item/src/app/app.component.css new file mode 100644 index 000000000..c3f68a7aa --- /dev/null +++ b/docking-layout/update-item/src/app/app.component.css @@ -0,0 +1,17 @@ +smart-docking-layout{ + width: 75%; +} + +@media only screen and (max-width: 1400px) { + smart-docking-layout{ + width: 60%; + } +} + +@media only screen and (max-width: 700px) { + smart-docking-layout{ + width: 100%; + position: relative; + margin: 10px 0px; + } +} diff --git a/docking-layout/update-item/src/app/app.component.html b/docking-layout/update-item/src/app/app.component.html new file mode 100644 index 000000000..892592cd7 --- /dev/null +++ b/docking-layout/update-item/src/app/app.component.html @@ -0,0 +1,13 @@ + +
+
+ + Tab 1 + Tab 2 + Tab 3 + +
+
+ Update +
+
\ No newline at end of file diff --git a/docking-layout/update-item/src/app/app.component.ts b/docking-layout/update-item/src/app/app.component.ts new file mode 100644 index 000000000..d882b82dc --- /dev/null +++ b/docking-layout/update-item/src/app/app.component.ts @@ -0,0 +1,78 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('dropDownList', { read: DropDownListComponent, static: false }) dropDownList: DropDownListComponent; + @ViewChild('dockinglayout', { read: DockingLayoutComponent, static: false }) dockinglayout: DockingLayoutComponent; + + layout: Array = [ + { + id: 'tab1', + type: 'LayoutPanel', + label: 'Tabs 1', + items: [{ + label: 'Tab 1', + content: 'Content of Tab 1', + selected: true + }] + }, + { + id: 'tab2', + type: 'LayoutPanel', + label: 'Tabs 2', + items: [{ + label: 'Tab 2', + content: 'Content of Tab 2', + }] + }, + { + id: 'tab3', + type: 'LayoutPanel', + label: 'Tabs 3', + items: [{ + label: 'Tab 3', + content: 'Content of Tab 3' + }] + } + ]; + + update(event: CustomEvent): void { + const that = this, + smartDockingLayout: DockingLayoutComponent = that.dockinglayout, + dropDownList: DropDownListComponent = that.dropDownList, + targetItem: HTMLElement = smartDockingLayout.nativeElement.querySelector('#' + dropDownList.selectedValues[0]) as HTMLElement; + + smartDockingLayout.update(targetItem, { + size: '33%', + label: 'Updated', + items: [{ + index: 0, label: 'Updated', + content: 'Updated' + }] + }); + } + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } +} \ No newline at end of file diff --git a/docking-layout/update-item/src/app/app.module.ts b/docking-layout/update-item/src/app/app.module.ts new file mode 100644 index 000000000..6142dedf2 --- /dev/null +++ b/docking-layout/update-item/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DropDownListModule, DockingLayoutModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/update-item/src/app/main.ts b/docking-layout/update-item/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/update-item/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/update-item/src/assets/fonts.css b/docking-layout/update-item/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/update-item/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/update-item/src/assets/styles.css b/docking-layout/update-item/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/update-item/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/update-item/src/index.html b/docking-layout/update-item/src/index.html new file mode 100644 index 000000000..30b410ed9 --- /dev/null +++ b/docking-layout/update-item/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Update-item + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/update-item/src/main.ts b/docking-layout/update-item/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/update-item/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/update-item/src/polyfills.ts b/docking-layout/update-item/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/update-item/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/update-item/src/tsconfig.app.json b/docking-layout/update-item/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/update-item/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/update-item/src/tsconfig.json b/docking-layout/update-item/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/update-item/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/docking-layout/visual-studio-style/angular.json b/docking-layout/visual-studio-style/angular.json new file mode 100644 index 000000000..023cf4700 --- /dev/null +++ b/docking-layout/visual-studio-style/angular.json @@ -0,0 +1,130 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.dockinglayout.css", + "./node_modules/@smart-webcomponents-angular/layout/styles/smart.layout.css", + "./node_modules/@smart-webcomponents-angular/multilinetextbox/styles/smart.multilinetextbox.css", + "./node_modules/@smart-webcomponents-angular/textbox/styles/smart.textbox.css", + "./node_modules/@smart-webcomponents-angular/tree/styles/smart.tree.css", + "./node_modules/@smart-webcomponents-angular/dockinglayout/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/docking-layout/visual-studio-style/package.json b/docking-layout/visual-studio-style/package.json new file mode 100644 index 000000000..f344745e4 --- /dev/null +++ b/docking-layout/visual-studio-style/package.json @@ -0,0 +1,56 @@ +{ + "name": "angular-docking-layout-visual-studio-style", + "description": "Angular docking-layout visual-studio-style example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dockinglayout": "9.2.22", + "@smart-webcomponents-angular/layout": "9.2.22", + "@smart-webcomponents-angular/multilinetextbox": "9.2.22", + "@smart-webcomponents-angular/textbox": "9.2.22", + "@smart-webcomponents-angular/tree": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/docking-layout/visual-studio-style/src/app/app.component.css b/docking-layout/visual-studio-style/src/app/app.component.css new file mode 100644 index 000000000..301138ca9 --- /dev/null +++ b/docking-layout/visual-studio-style/src/app/app.component.css @@ -0,0 +1,59 @@ +/* fallback */ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: inherit; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + +.material-icons{ + margin-right: 5px; +} + +smart-docking-layout { + width: 100%; + height: 800px; + background-color: #EEEDF3; +} + +.smart-window smart-gauge { + width: 100%; + height: 100%; +} + +.smart-window smart-text-box, +.smart-window smart-multiline-text-box, +.smart-window smart-tree { + width: 100%; + height: 100%; + border: none; + background-color: #F5F5F5; +} + +.smart-window smart-multiline-text-box, +.smart-window smart-text-box, +#tabPanel smart-tabs .smart-tabs-content-section { + background-color: #FFFFFF; + color: black; +} + + .smart-window smart-text-box input { + border: none; + } + diff --git a/docking-layout/visual-studio-style/src/app/app.component.html b/docking-layout/visual-studio-style/src/app/app.component.html new file mode 100644 index 000000000..a383f9a1b --- /dev/null +++ b/docking-layout/visual-studio-style/src/app/app.component.html @@ -0,0 +1,42 @@ + + + + + folder Attractions + Movies + Circus + Concerts + Monuments + + + folder Dining + Restaurants + Cafés + Bars + + + folder Education + Schools + Colleges + Universities + Educational courses + + + folder Family + Babysitting + Family trips + Theme parks + + + folder Health + Hospitals + Family physicians + Optics + + + + + + + +Some Text Inside the Text Box \ No newline at end of file diff --git a/docking-layout/visual-studio-style/src/app/app.component.ts b/docking-layout/visual-studio-style/src/app/app.component.ts new file mode 100644 index 000000000..af644d522 --- /dev/null +++ b/docking-layout/visual-studio-style/src/app/app.component.ts @@ -0,0 +1,148 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DockingLayoutComponent } from '@smart-webcomponents-angular/dockinglayout'; +import { TreeComponent } from '@smart-webcomponents-angular/tree'; +import { MultilineTextBoxComponent } from '@smart-webcomponents-angular/multilinetextbox'; +import { TextBoxComponent } from '@smart-webcomponents-angular/textbox'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dockingLayout', { read: DockingLayoutComponent }) dockingLayout: DockingLayoutComponent; + @ViewChild('tree', { read: TreeComponent }) tree: TreeComponent; + @ViewChild('multilineTextBox', { read: MultilineTextBoxComponent }) multilineTextBox: MultilineTextBoxComponent; + @ViewChild('multilineTextBox2', { read: MultilineTextBoxComponent }) multilineTextBox2: MultilineTextBoxComponent; + @ViewChild('multilineTextBox3', { read: MultilineTextBoxComponent }) multilineTextBox3: MultilineTextBoxComponent; + @ViewChild('textBox', { read: TextBoxComponent }) textBox: TextBoxComponent; + + + multilineTextBoxValue: string = ` + window.onload = function() { + const button = document.querySelector('smart-button'); + + buttons.addEventListener('click', function() { + alert('Hello World!'); + }); + } + `; + + multilineText2BoxValue: string = ` + smart-button { + }`; + + multilineText3BoxValue: string = `Click Me `; + + layout: Array = [ + { + id: 'item0', + label: 'View', + items: [{ + label: 'Team Explorer', + selected: true, + content: 'This is the first item of the Tabs 0.' + }, + { + label: 'Server Explorer' + }], + autoHide: true, + autoHidePosition: 'left' + }, + { + type: 'LayoutGroup', + items: [ + { + type: 'LayoutPanel', + id: 'tabPanel', + label: 'Tabs 1', + items: [{ + label: 'helloWorld.js', + selected: true, + }, + { + label: 'helloWorld.css' + }, + { + label: 'helloWorld.html' + }], + headerPosition: 'none', + tabCloseButtons: true, + size: '75%' + }, + { + type: 'LayoutPanel', + label: 'Output', + items: [ + { + label: 'Output', + headerPosition: 'none', + content: 'All files are up to date.' + } + ], + headerPosition: 'none' + } + ], + orientation: 'horizontal' + }, + { + id: 'item2', + label: 'Solution Explorer', + items: [ + { + content: '' + } + ], + tabPosition: 'hidden' + }, + ]; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this; + + that.dockingLayout.update('item0', + { + items: [{ + index: 1, + content: that.textBox.nativeElement + }] + }); + + that.dockingLayout.update('tabPanel', + { + items: [{ + index: 0, + content: that.multilineTextBox.nativeElement + }, + { + index: 1, + content: that.multilineTextBox2.nativeElement + }, + { + index: 2, + content: that.multilineTextBox3.nativeElement + }], + }); + + that.dockingLayout.update('item2', + { + items: [{ + index: 0, + content: that.tree.nativeElement + }] + }); + } +} \ No newline at end of file diff --git a/docking-layout/visual-studio-style/src/app/app.module.ts b/docking-layout/visual-studio-style/src/app/app.module.ts new file mode 100644 index 000000000..577eb8034 --- /dev/null +++ b/docking-layout/visual-studio-style/src/app/app.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DockingLayoutModule } from '@smart-webcomponents-angular/dockinglayout'; +import { TreeModule } from '@smart-webcomponents-angular/tree'; +import { MultilineTextBoxModule } from '@smart-webcomponents-angular/multilinetextbox'; +import { TextBoxModule } from '@smart-webcomponents-angular/textbox'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [BrowserModule, DockingLayoutModule, TreeModule, MultilineTextBoxModule, TextBoxModule], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/docking-layout/visual-studio-style/src/app/main.ts b/docking-layout/visual-studio-style/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/docking-layout/visual-studio-style/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/docking-layout/visual-studio-style/src/assets/fonts.css b/docking-layout/visual-studio-style/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/docking-layout/visual-studio-style/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/docking-layout/visual-studio-style/src/assets/styles.css b/docking-layout/visual-studio-style/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/docking-layout/visual-studio-style/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/docking-layout/visual-studio-style/src/index.html b/docking-layout/visual-studio-style/src/index.html new file mode 100644 index 000000000..22775e023 --- /dev/null +++ b/docking-layout/visual-studio-style/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Docking-layout Visual-studio-style + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/docking-layout/visual-studio-style/src/main.ts b/docking-layout/visual-studio-style/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/docking-layout/visual-studio-style/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/docking-layout/visual-studio-style/src/polyfills.ts b/docking-layout/visual-studio-style/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/docking-layout/visual-studio-style/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/docking-layout/visual-studio-style/src/tsconfig.app.json b/docking-layout/visual-studio-style/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/docking-layout/visual-studio-style/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/docking-layout/visual-studio-style/src/tsconfig.json b/docking-layout/visual-studio-style/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/docking-layout/visual-studio-style/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/auto-height/angular.json b/dropdownbutton/auto-height/angular.json new file mode 100644 index 000000000..774f1ec80 --- /dev/null +++ b/dropdownbutton/auto-height/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/tree/styles/smart.tree.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/auto-height/package.json b/dropdownbutton/auto-height/package.json new file mode 100644 index 000000000..1f5afa8e0 --- /dev/null +++ b/dropdownbutton/auto-height/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-dropdownbutton-auto-height", + "description": "Angular dropdownbutton auto-height example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/tree": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/auto-height/src/app/app.component.css b/dropdownbutton/auto-height/src/app/app.component.css new file mode 100644 index 000000000..c84924e43 --- /dev/null +++ b/dropdownbutton/auto-height/src/app/app.component.css @@ -0,0 +1,12 @@ +smart-drop-down-button { + --smart-editor-drop-down-max-height: none; + width: 225px; +} + +smart-drop-down-button smart-tree { + height: auto; +} + +.smart-drop-down smart-tree { + border: 0; +} diff --git a/dropdownbutton/auto-height/src/app/app.component.html b/dropdownbutton/auto-height/src/app/app.component.html new file mode 100644 index 000000000..c83cb1ffe --- /dev/null +++ b/dropdownbutton/auto-height/src/app/app.component.html @@ -0,0 +1,17 @@ + + + Home + Solutions + Education + Financial services + Government + Manufacturing + All industries and solutions + + Products + PC products + Mobile products + All products + + + \ No newline at end of file diff --git a/dropdownbutton/auto-height/src/app/app.component.ts b/dropdownbutton/auto-height/src/app/app.component.ts new file mode 100644 index 000000000..2b655db7d --- /dev/null +++ b/dropdownbutton/auto-height/src/app/app.component.ts @@ -0,0 +1,42 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; +import { TreeComponent, TreeItem } from '@smart-webcomponents-angular/tree'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('tree', { read: TreeComponent, static: false }) tree: TreeComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const dropDownButton = this.dropdownbutton, + tree = this.tree; + + window.onload = function () { + //Get the label of the selected tree item + dropDownButton.placeholder = (tree.nativeElement.querySelector('smart-tree-item[selected], smart-tree-items-group[selected]')).label; + dropDownButton.addEventListener('change', function (event: any): void { + dropDownButton.placeholder = event.detail.item.label; + console.log(event); + }); + } + + } +} \ No newline at end of file diff --git a/dropdownbutton/auto-height/src/app/app.module.ts b/dropdownbutton/auto-height/src/app/app.module.ts new file mode 100644 index 000000000..33673d81a --- /dev/null +++ b/dropdownbutton/auto-height/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; +import { TreeModule } from '@smart-webcomponents-angular/tree'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule, TreeModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/auto-height/src/app/main.ts b/dropdownbutton/auto-height/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/auto-height/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/auto-height/src/assets/fonts.css b/dropdownbutton/auto-height/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/auto-height/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/auto-height/src/assets/styles.css b/dropdownbutton/auto-height/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/auto-height/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/auto-height/src/index.html b/dropdownbutton/auto-height/src/index.html new file mode 100644 index 000000000..6b5ceaa3b --- /dev/null +++ b/dropdownbutton/auto-height/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Auto-height + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/auto-height/src/main.ts b/dropdownbutton/auto-height/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/auto-height/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/auto-height/src/polyfills.ts b/dropdownbutton/auto-height/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/auto-height/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/auto-height/src/tsconfig.app.json b/dropdownbutton/auto-height/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/auto-height/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/auto-height/src/tsconfig.json b/dropdownbutton/auto-height/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/auto-height/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/automatic-positioning/angular.json b/dropdownbutton/automatic-positioning/angular.json new file mode 100644 index 000000000..088f8fe5c --- /dev/null +++ b/dropdownbutton/automatic-positioning/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/automatic-positioning/package.json b/dropdownbutton/automatic-positioning/package.json new file mode 100644 index 000000000..5518f2b9a --- /dev/null +++ b/dropdownbutton/automatic-positioning/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-dropdownbutton-automatic-positioning", + "description": "Angular dropdownbutton automatic-positioning example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/automatic-positioning/src/app/app.component.css b/dropdownbutton/automatic-positioning/src/app/app.component.css new file mode 100644 index 000000000..020f2f068 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/app/app.component.css @@ -0,0 +1,21 @@ +.dropDownButtonAbsolute { + position: absolute; +} + +.dropDownButtonAbsolute:nth-last-of-type(1) { + top: 20px; +} + + .dropDownButtonAbsolute:nth-last-of-type(2) { + top: 20px; + left: calc(100% - 50px); + } + + .dropDownButtonAbsolute:nth-last-of-type(3) { + top: calc(100% - 50px); + } + +.dropDownButtonAbsolute:nth-last-of-type(4) { + top: calc(100% - 50px); + left: calc(100% - 50px); +} \ No newline at end of file diff --git a/dropdownbutton/automatic-positioning/src/app/app.component.html b/dropdownbutton/automatic-positioning/src/app/app.component.html new file mode 100644 index 000000000..b46bb4963 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/app/app.component.html @@ -0,0 +1,12 @@ + + What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the + release of Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including versions + of Lorem Ipsum. + \ No newline at end of file diff --git a/dropdownbutton/automatic-positioning/src/app/app.component.ts b/dropdownbutton/automatic-positioning/src/app/app.component.ts new file mode 100644 index 000000000..8ddc0a185 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/app/app.component.ts @@ -0,0 +1,28 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + } +} \ No newline at end of file diff --git a/dropdownbutton/automatic-positioning/src/app/app.module.ts b/dropdownbutton/automatic-positioning/src/app/app.module.ts new file mode 100644 index 000000000..d140bb62b --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/automatic-positioning/src/app/main.ts b/dropdownbutton/automatic-positioning/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/automatic-positioning/src/assets/fonts.css b/dropdownbutton/automatic-positioning/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/automatic-positioning/src/assets/styles.css b/dropdownbutton/automatic-positioning/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/automatic-positioning/src/index.html b/dropdownbutton/automatic-positioning/src/index.html new file mode 100644 index 000000000..af2f3f9a3 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Automatic-positioning + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/automatic-positioning/src/main.ts b/dropdownbutton/automatic-positioning/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/automatic-positioning/src/polyfills.ts b/dropdownbutton/automatic-positioning/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/automatic-positioning/src/tsconfig.app.json b/dropdownbutton/automatic-positioning/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/automatic-positioning/src/tsconfig.json b/dropdownbutton/automatic-positioning/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/automatic-positioning/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/button-position/angular.json b/dropdownbutton/button-position/angular.json new file mode 100644 index 000000000..a63dcd8e5 --- /dev/null +++ b/dropdownbutton/button-position/angular.json @@ -0,0 +1,129 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/tank/styles/smart.tank.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/button-position/package.json b/dropdownbutton/button-position/package.json new file mode 100644 index 000000000..9785842c4 --- /dev/null +++ b/dropdownbutton/button-position/package.json @@ -0,0 +1,55 @@ +{ + "name": "angular-dropdownbutton-button-position", + "description": "Angular dropdownbutton button-position example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "@smart-webcomponents-angular/tank": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/button-position/src/app/app.component.css b/dropdownbutton/button-position/src/app/app.component.css new file mode 100644 index 000000000..d74a0eb03 --- /dev/null +++ b/dropdownbutton/button-position/src/app/app.component.css @@ -0,0 +1,8 @@ +smart-drop-down-button { + --smart-drop-down-element-max-height: 500px; + width: 75px; + height: auto; +} +smart-drop-down-button .smart-action-button { + padding: 5px; +} \ No newline at end of file diff --git a/dropdownbutton/button-position/src/app/app.component.html b/dropdownbutton/button-position/src/app/app.component.html new file mode 100644 index 000000000..3a750b6e8 --- /dev/null +++ b/dropdownbutton/button-position/src/app/app.component.html @@ -0,0 +1,26 @@ +
+ + + +
+
+
Button Position:
+ Left +
+ Right +
+ Top +
+ Bottom +
+
+
+
Open Mode:
+ Default +
+ DropDownButton +
+
+
+
\ No newline at end of file diff --git a/dropdownbutton/button-position/src/app/app.component.ts b/dropdownbutton/button-position/src/app/app.component.ts new file mode 100644 index 000000000..a75e13fde --- /dev/null +++ b/dropdownbutton/button-position/src/app/app.component.ts @@ -0,0 +1,72 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonComponent, RadioButton } from '@smart-webcomponents-angular/radiobutton'; +import { TankComponent } from '@smart-webcomponents-angular/tank'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('radioButtonLeft', { read: RadioButtonComponent, static: false }) radioButtonLeft: RadioButtonComponent; + @ViewChild('radioButtonRight', { read: RadioButtonComponent, static: false }) radioButtonRight: RadioButtonComponent; + @ViewChild('radioButtonTop', { read: RadioButtonComponent, static: false }) radioButtonTop: RadioButtonComponent; + @ViewChild('radioButtonBottom', { read: RadioButtonComponent, static: false }) radioButtonBottom: RadioButtonComponent; + @ViewChild('radioButtonDefault', { read: RadioButtonComponent, static: false }) radioButtonDefault: RadioButtonComponent; + @ViewChild('radioButtonDropDownButton', { read: RadioButtonComponent, static: false }) radioButtonDropDownButton: RadioButtonComponent; + @ViewChild('tank', { read: TankComponent, static: false }) tank: TankComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + dropDownButton = that.dropdownbutton; + + that.radioButtonLeft.addEventListener('change', function (): void { + dropDownButton.dropDownButtonPosition = 'left'; + }); + + that.radioButtonRight.addEventListener('change', function (): void { + dropDownButton.dropDownButtonPosition = 'right'; + }); + + that.radioButtonTop.addEventListener('change', function (): void { + dropDownButton.dropDownButtonPosition = 'top'; + }); + + that.radioButtonBottom.addEventListener('change', function (): void { + dropDownButton.dropDownButtonPosition = 'bottom'; + }); + + that.radioButtonDefault.addEventListener('change', function (): void { + dropDownButton.dropDownOpenMode = 'default'; + }); + + that.radioButtonDropDownButton.addEventListener('change', function (): void { + dropDownButton.dropDownOpenMode = 'dropDownButton'; + }); + + dropDownButton.addEventListener('change', function (event: any): void { + dropDownButton.placeholder = event.detail.value; + }); + + window.onload = function () { + dropDownButton.placeholder = that.tank.value; + } + } +} \ No newline at end of file diff --git a/dropdownbutton/button-position/src/app/app.module.ts b/dropdownbutton/button-position/src/app/app.module.ts new file mode 100644 index 000000000..272af85fd --- /dev/null +++ b/dropdownbutton/button-position/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; +import { TankModule } from '@smart-webcomponents-angular/tank'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule, RadioButtonModule, TankModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/button-position/src/app/main.ts b/dropdownbutton/button-position/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/button-position/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/button-position/src/assets/fonts.css b/dropdownbutton/button-position/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/button-position/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/button-position/src/assets/styles.css b/dropdownbutton/button-position/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/button-position/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/button-position/src/index.html b/dropdownbutton/button-position/src/index.html new file mode 100644 index 000000000..ad1cb6f81 --- /dev/null +++ b/dropdownbutton/button-position/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Button-position + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/button-position/src/main.ts b/dropdownbutton/button-position/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/button-position/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/button-position/src/polyfills.ts b/dropdownbutton/button-position/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/button-position/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/button-position/src/tsconfig.app.json b/dropdownbutton/button-position/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/button-position/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/button-position/src/tsconfig.json b/dropdownbutton/button-position/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/button-position/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/drop-down-open-modes/angular.json b/dropdownbutton/drop-down-open-modes/angular.json new file mode 100644 index 000000000..c1b439f9e --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/tabs/styles/smart.tabs.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/drop-down-open-modes/package.json b/dropdownbutton/drop-down-open-modes/package.json new file mode 100644 index 000000000..298ab6ed5 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-dropdownbutton-drop-down-open-modes", + "description": "Angular dropdownbutton drop-down-open-modes example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/tabs": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/drop-down-open-modes/src/app/app.component.css b/dropdownbutton/drop-down-open-modes/src/app/app.component.css new file mode 100644 index 000000000..c5d87146b --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/app/app.component.css @@ -0,0 +1,7 @@ +smart-drop-down-button { + --smart-editor-drop-down-max-height: 500px; + width: 200px; +} +body, html { + height: 800px; +} \ No newline at end of file diff --git a/dropdownbutton/drop-down-open-modes/src/app/app.component.html b/dropdownbutton/drop-down-open-modes/src/app/app.component.html new file mode 100644 index 000000000..0a92c2c51 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/app/app.component.html @@ -0,0 +1,44 @@ +
+ + + Content of Item 1 + Content of Item 2 + Content of Item 3 + + +
+
+
+
Open Mode:
+
+ Default +
+
+ Auto +
+
+ Button +
+
+ None +
+
+
+

Event log:

+
...
+
+
+
+
+
+
+
Modes Description
+
    +
  • Auto - the dropDownButton is opened/closed when the element is hovered.
    • +
  • Default - the dropDownButton is opened/closed when the element is clicked.
    • +
  • DropDownButton - the dropDownButton is devided in two components. An Action + Button and a dropDown Button. +
    The dropDownButton can be opened/closed when the dropDownButton is clicked.
    • +
  • None - the dropDownButton can't be opened/closed.
    • +
+
\ No newline at end of file diff --git a/dropdownbutton/drop-down-open-modes/src/app/app.component.ts b/dropdownbutton/drop-down-open-modes/src/app/app.component.ts new file mode 100644 index 000000000..16f7a7fd3 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/app/app.component.ts @@ -0,0 +1,96 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; +import { TabsComponent, TabItem } from '@smart-webcomponents-angular/tabs'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('buttonDefault', { read: ButtonComponent, static: false }) buttonDefault: ButtonComponent; + @ViewChild('buttonAuto', { read: ButtonComponent, static: false }) buttonAuto: ButtonComponent; + @ViewChild('button', { read: ButtonComponent, static: false }) button: ButtonComponent; + @ViewChild('buttonNone', { read: ButtonComponent, static: false }) buttonNone: ButtonComponent; + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('tabs', { read: TabsComponent, static: false }) tabs: TabsComponent; + @ViewChild('log', { read: ElementRef, static: false }) log: ElementRef; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + dropDownButton = that.dropdownbutton, + buttons = [that.buttonDefault, that.buttonAuto, that.button, that.buttonNone]; + + buttons[0].addEventListener('click', function (): void { + dropDownButton.dropDownOpenMode = 'default'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + buttons[1].addEventListener('click', function (): void { + dropDownButton.dropDownOpenMode = 'auto'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + buttons[2].addEventListener('click', function (): void { + dropDownButton.dropDownOpenMode = 'dropDownButton'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + buttons[3].addEventListener('click', function (): void { + dropDownButton.dropDownOpenMode = 'none'; + + for (let b = 0; b < buttons.length; b++) { + buttons[b].disabled = buttons[b] === this ? true : false; + } + }); + + dropDownButton.addEventListener('click', function (event: any): void { + const log = that.log.nativeElement as HTMLDivElement; + const target = event.target; + + if (dropDownButton.dropDownOpenMode !== 'dropDownButton') { + log.innerHTML = 'DropDownButton clicked'; + return; + } + + if (target.classList.contains('smart-action-button')) { + log.textContent = 'ActionButton clicked'; + } + else if (target.classList.contains('smart-drop-down-button')) { + log.textContent = 'DropDownButton clicked'; + } + }); + + that.tabs.addEventListener('change', function (event: any): void { + const tabsItems: HTMLCollection = that.tabs.nativeElement.getElementsByTagName('smart-tab-item'); + const tabIndex = event.detail.index; + + dropDownButton.placeholder = (tabsItems[tabIndex]).label; + }); + + + } +} \ No newline at end of file diff --git a/dropdownbutton/drop-down-open-modes/src/app/app.module.ts b/dropdownbutton/drop-down-open-modes/src/app/app.module.ts new file mode 100644 index 000000000..68890826d --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/app/app.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; +import { TabsModule } from '@smart-webcomponents-angular/tabs'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DropDownButtonModule, TabsModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/drop-down-open-modes/src/app/main.ts b/dropdownbutton/drop-down-open-modes/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/drop-down-open-modes/src/assets/fonts.css b/dropdownbutton/drop-down-open-modes/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/drop-down-open-modes/src/assets/styles.css b/dropdownbutton/drop-down-open-modes/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/drop-down-open-modes/src/index.html b/dropdownbutton/drop-down-open-modes/src/index.html new file mode 100644 index 000000000..a8970a4f0 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Drop-down-open-modes + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/drop-down-open-modes/src/main.ts b/dropdownbutton/drop-down-open-modes/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/drop-down-open-modes/src/polyfills.ts b/dropdownbutton/drop-down-open-modes/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/drop-down-open-modes/src/tsconfig.app.json b/dropdownbutton/drop-down-open-modes/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/drop-down-open-modes/src/tsconfig.json b/dropdownbutton/drop-down-open-modes/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/drop-down-open-modes/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/drop-down-position/angular.json b/dropdownbutton/drop-down-position/angular.json new file mode 100644 index 000000000..cf11d1950 --- /dev/null +++ b/dropdownbutton/drop-down-position/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/drop-down-position/package.json b/dropdownbutton/drop-down-position/package.json new file mode 100644 index 000000000..556db04d6 --- /dev/null +++ b/dropdownbutton/drop-down-position/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-dropdownbutton-drop-down-position", + "description": "Angular dropdownbutton drop-down-position example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/drop-down-position/src/app/app.component.css b/dropdownbutton/drop-down-position/src/app/app.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/dropdownbutton/drop-down-position/src/app/app.component.html b/dropdownbutton/drop-down-position/src/app/app.component.html new file mode 100644 index 000000000..65f9c4164 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/app/app.component.html @@ -0,0 +1,30 @@ +
+ + Where does it come from? Contrary to popular belief, Lorem Ipsum is not + simply random text. It has roots in a piece of classical Latin literature + from 45 BC, making it over 2000 years old. Richard McClintock, a Latin + professor at Hampden-Sydney College in Virginia, looked up one of the more + obscure Latin words, consectetur, from a Lorem Ipsum passage, and going + through the cites of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus + Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written + in 45 BC. This book is a treatise on the theory of ethics, very popular + during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor + sit amet..", comes from a line in section 1.10.32. The standard chunk of + Lorem Ipsum used since the 1500s is reproduced below for those interested. + Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero + are also reproduced in their exact original form, accompanied by English + versions from the 1914 translation by H. Rackham. +
+
DropDown list Position:
+ Auto + Bottom + Overlay-bottom + Overlay-center + Overlay-top + Top + Center-bottom + Center-top +
+
\ No newline at end of file diff --git a/dropdownbutton/drop-down-position/src/app/app.component.ts b/dropdownbutton/drop-down-position/src/app/app.component.ts new file mode 100644 index 000000000..32e8ca69d --- /dev/null +++ b/dropdownbutton/drop-down-position/src/app/app.component.ts @@ -0,0 +1,68 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('radiobuttonAuto', { read: RadioButtonComponent, static: false }) radiobuttonAuto: RadioButtonComponent; + @ViewChild('radiobuttonBottom', { read: RadioButtonComponent, static: false }) radiobuttonBottom: RadioButtonComponent; + @ViewChild('radiobuttonOverlayBottom', { read: RadioButtonComponent, static: false }) radiobuttonOverlayBottom: RadioButtonComponent; + @ViewChild('radiobuttonOverlayCenter', { read: RadioButtonComponent, static: false }) radiobuttonOverlayCenter: RadioButtonComponent; + @ViewChild('radiobuttonOverlayTop', { read: RadioButtonComponent, static: false }) radiobuttonOverlayTop: RadioButtonComponent; + @ViewChild('radiobuttonTop', { read: RadioButtonComponent, static: false }) radiobuttonTop: RadioButtonComponent; + @ViewChild('radiobuttonCenterBottom', { read: RadioButtonComponent, static: false }) radiobuttonCenterBottom: RadioButtonComponent; + @ViewChild('radiobuttonCenterTop', { read: RadioButtonComponent, static: false }) radiobuttonCenterTop: RadioButtonComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + const that = this, + dropDownButton = that.dropdownbutton; + + that.radiobuttonAuto.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'auto'; + }); + + that.radiobuttonBottom.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'bottom'; + }); + + that.radiobuttonOverlayBottom.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'overlay-bottom'; + }); + + that.radiobuttonOverlayCenter.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'overlay-center'; + }); + + that.radiobuttonOverlayTop.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'overlay-top'; + }); + + that.radiobuttonTop.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'top'; + }); + + that.radiobuttonCenterBottom.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'center-bottom'; + }); + + that.radiobuttonCenterTop.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'center-top'; + }); + } +} \ No newline at end of file diff --git a/dropdownbutton/drop-down-position/src/app/app.module.ts b/dropdownbutton/drop-down-position/src/app/app.module.ts new file mode 100644 index 000000000..11ce717ed --- /dev/null +++ b/dropdownbutton/drop-down-position/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/drop-down-position/src/app/main.ts b/dropdownbutton/drop-down-position/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/drop-down-position/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/drop-down-position/src/assets/fonts.css b/dropdownbutton/drop-down-position/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/drop-down-position/src/assets/styles.css b/dropdownbutton/drop-down-position/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/drop-down-position/src/index.html b/dropdownbutton/drop-down-position/src/index.html new file mode 100644 index 000000000..bfbe402b4 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Drop-down-position + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/drop-down-position/src/main.ts b/dropdownbutton/drop-down-position/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/drop-down-position/src/polyfills.ts b/dropdownbutton/drop-down-position/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/drop-down-position/src/tsconfig.app.json b/dropdownbutton/drop-down-position/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/drop-down-position/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/drop-down-position/src/tsconfig.json b/dropdownbutton/drop-down-position/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/drop-down-position/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/events/angular.json b/dropdownbutton/events/angular.json new file mode 100644 index 000000000..cf11d1950 --- /dev/null +++ b/dropdownbutton/events/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/events/package.json b/dropdownbutton/events/package.json new file mode 100644 index 000000000..151d11123 --- /dev/null +++ b/dropdownbutton/events/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-dropdownbutton-events", + "description": "Angular dropdownbutton events example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/events/src/app/app.component.css b/dropdownbutton/events/src/app/app.component.css new file mode 100644 index 000000000..531e04dc7 --- /dev/null +++ b/dropdownbutton/events/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-drop-down-button { + width: 250px; +} \ No newline at end of file diff --git a/dropdownbutton/events/src/app/app.component.html b/dropdownbutton/events/src/app/app.component.html new file mode 100644 index 000000000..006473b68 --- /dev/null +++ b/dropdownbutton/events/src/app/app.component.html @@ -0,0 +1,26 @@ + + What is Lorem Ipsum? Lorem Ipsum is simply dummy text of + the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the + release of Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including versions + of Lorem Ipsum. + + +
+
Settings
+
+
Open Mode:
+ Default +
+ DropDownButton +
+
+

Event log:

+
+
+
\ No newline at end of file diff --git a/dropdownbutton/events/src/app/app.component.ts b/dropdownbutton/events/src/app/app.component.ts new file mode 100644 index 000000000..336cae3fb --- /dev/null +++ b/dropdownbutton/events/src/app/app.component.ts @@ -0,0 +1,60 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ElementRef } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('radiobuttonDefault', { read: RadioButtonComponent, static: false }) radiobuttonDefault: RadioButtonComponent; + @ViewChild('radiobuttonDropDownButton', { read: RadioButtonComponent, static: false }) radiobuttonDropDownButton: RadioButtonComponent; + @ViewChild('log', { read: ElementRef, static: false }) log: ElementRef; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + dropDownButton = that.dropdownbutton, + log = that.log.nativeElement; + + that.radiobuttonDefault.addEventListener('change', function (): void { + dropDownButton.dropDownOpenMode = 'default'; + dropDownButton.placeholder = 'Button'; + }); + + that.radiobuttonDropDownButton.addEventListener('change', function (): void { + dropDownButton.dropDownOpenMode = 'dropDownButton'; + dropDownButton.placeholder = 'Action'; + }); + + dropDownButton.addEventListener('actionButtonClick', function (event: any): void { + log.innerHTML += event.type + '
'; + }); + + dropDownButton.addEventListener('dropDownButtonClick', function (event: any): void { + log.innerHTML += event.type + '
'; + }); + + dropDownButton.addEventListener('opening', function (event: any): void { + log.innerHTML += event.type + '
'; + }); + + dropDownButton.addEventListener('closing', function (event: any): void { + log.innerHTML += event.type + '
'; + }); + } +} \ No newline at end of file diff --git a/dropdownbutton/events/src/app/app.module.ts b/dropdownbutton/events/src/app/app.module.ts new file mode 100644 index 000000000..11ce717ed --- /dev/null +++ b/dropdownbutton/events/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/events/src/app/main.ts b/dropdownbutton/events/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/events/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/events/src/assets/fonts.css b/dropdownbutton/events/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/events/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/events/src/assets/styles.css b/dropdownbutton/events/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/events/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/events/src/index.html b/dropdownbutton/events/src/index.html new file mode 100644 index 000000000..7b95ad274 --- /dev/null +++ b/dropdownbutton/events/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Events + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/events/src/main.ts b/dropdownbutton/events/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/events/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/events/src/polyfills.ts b/dropdownbutton/events/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/events/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/events/src/tsconfig.app.json b/dropdownbutton/events/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/events/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/events/src/tsconfig.json b/dropdownbutton/events/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/events/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/methods/angular.json b/dropdownbutton/methods/angular.json new file mode 100644 index 000000000..088f8fe5c --- /dev/null +++ b/dropdownbutton/methods/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/methods/package.json b/dropdownbutton/methods/package.json new file mode 100644 index 000000000..21b4e61c5 --- /dev/null +++ b/dropdownbutton/methods/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-dropdownbutton-methods", + "description": "Angular dropdownbutton methods example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/methods/src/app/app.component.css b/dropdownbutton/methods/src/app/app.component.css new file mode 100644 index 000000000..853b739a6 --- /dev/null +++ b/dropdownbutton/methods/src/app/app.component.css @@ -0,0 +1,3 @@ +smart-drop-down-button { + width: 300px; +} \ No newline at end of file diff --git a/dropdownbutton/methods/src/app/app.component.html b/dropdownbutton/methods/src/app/app.component.html new file mode 100644 index 000000000..8e78ca667 --- /dev/null +++ b/dropdownbutton/methods/src/app/app.component.html @@ -0,0 +1,32 @@ + +

What is Lorem Ipsum?

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the + 1500s, when an unknown printer took a galley of type and scrambled it to + make a type specimen book. It has survived not only five centuries, but + also the leap into electronic typesetting, remaining essentially unchanged. + It was popularised in the 1960s with the release of Letraset sheets containing + Lorem Ipsum passages, and more recently with desktop publishing software + like Aldus PageMaker including versions of Lorem Ipsum. + + +
+
+ Open +
+
+ Close +
+
+ Append Child +
+
+ Remove Child +
+
+ Clear +
+
+ Enable/Disable +
+
\ No newline at end of file diff --git a/dropdownbutton/methods/src/app/app.component.ts b/dropdownbutton/methods/src/app/app.component.ts new file mode 100644 index 000000000..b16cf9cfe --- /dev/null +++ b/dropdownbutton/methods/src/app/app.component.ts @@ -0,0 +1,72 @@ +import { Component, ViewChild, OnInit, AfterViewInit, Renderer2 } from '@angular/core'; +import { ButtonComponent } from '@smart-webcomponents-angular/button'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('buttonOpen', { read: ButtonComponent, static: false }) buttonOpen: ButtonComponent; + @ViewChild('buttonClose', { read: ButtonComponent, static: false }) buttonClose: ButtonComponent; + @ViewChild('buttonAppendChild', { read: ButtonComponent, static: false }) buttonAppendChild: ButtonComponent; + @ViewChild('buttonRemoveChild', { read: ButtonComponent, static: false }) buttonRemoveChild: ButtonComponent; + @ViewChild('buttonClear', { read: ButtonComponent, static: false }) buttonClear: ButtonComponent; + @ViewChild('buttonDisable', { read: ButtonComponent, static: false }) buttonDisable: ButtonComponent; + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + + constructor(private renderer: Renderer2) { + + } + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + dropDownButton = that.dropdownbutton; + + that.buttonOpen.nativeElement.onclick = function (): void { + dropDownButton.open(); + }; + + that.buttonClose.nativeElement.onclick = function (): void { + dropDownButton.close(); + }; + + that.buttonClear.nativeElement.onclick = function (): void { + dropDownButton.removeAll(); + }; + + that.buttonAppendChild.nativeElement.onclick = function (): void { + let button = that.renderer.createElement('smart-button'); + + button.id = 'simpleButton'; + button.innerHTML = 'Button'; + + that.renderer.appendChild(dropDownButton, button); + }; + + that.buttonRemoveChild.nativeElement.onclick = function (): void { + let button = dropDownButton.nativeElement.querySelector('#simpleButton'); + + if (button) { + that.renderer.removeChild(dropDownButton, button); + } + }; + + that.buttonDisable.nativeElement.onclick = function (): void { + dropDownButton.disabled = !dropDownButton.disabled; + }; + } +} \ No newline at end of file diff --git a/dropdownbutton/methods/src/app/app.module.ts b/dropdownbutton/methods/src/app/app.module.ts new file mode 100644 index 000000000..7135d0ac6 --- /dev/null +++ b/dropdownbutton/methods/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { ButtonModule } from '@smart-webcomponents-angular/button'; +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, ButtonModule, DropDownButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/methods/src/app/main.ts b/dropdownbutton/methods/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/methods/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/methods/src/assets/fonts.css b/dropdownbutton/methods/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/methods/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/methods/src/assets/styles.css b/dropdownbutton/methods/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/methods/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/methods/src/index.html b/dropdownbutton/methods/src/index.html new file mode 100644 index 000000000..3039851ac --- /dev/null +++ b/dropdownbutton/methods/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Methods + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/methods/src/main.ts b/dropdownbutton/methods/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/methods/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/methods/src/polyfills.ts b/dropdownbutton/methods/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/methods/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/methods/src/tsconfig.app.json b/dropdownbutton/methods/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/methods/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/methods/src/tsconfig.json b/dropdownbutton/methods/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/methods/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/overview/angular.json b/dropdownbutton/overview/angular.json new file mode 100644 index 000000000..c6ece94e2 --- /dev/null +++ b/dropdownbutton/overview/angular.json @@ -0,0 +1,131 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/calendar/styles/smart.calendar.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/listmenu/styles/smart.listmenu.css", + "./node_modules/@smart-webcomponents-angular/menu/styles/smart.menu.css", + "./node_modules/@smart-webcomponents-angular/switchbutton/styles/smart.switchbutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/overview/package.json b/dropdownbutton/overview/package.json new file mode 100644 index 000000000..e5ffb41c4 --- /dev/null +++ b/dropdownbutton/overview/package.json @@ -0,0 +1,57 @@ +{ + "name": "angular-dropdownbutton-overview", + "description": "Angular dropdownbutton overview example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/calendar": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/listmenu": "9.2.22", + "@smart-webcomponents-angular/menu": "9.2.22", + "@smart-webcomponents-angular/switchbutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/overview/src/app/app.component.css b/dropdownbutton/overview/src/app/app.component.css new file mode 100644 index 000000000..c69415e11 --- /dev/null +++ b/dropdownbutton/overview/src/app/app.component.css @@ -0,0 +1,17 @@ +smart-drop-down-button { + --smart-drop-down-element-max-height: 300px; + width: 200px; +} + + smart-drop-down-button smart-calendar, + smart-drop-down-button smart-calendar:focus { + border: none; + } + + smart-drop-down-button smart-list-menu { + border: none; + height: 200px; + } +smart-list-menu { + width: 300px; +} \ No newline at end of file diff --git a/dropdownbutton/overview/src/app/app.component.html b/dropdownbutton/overview/src/app/app.component.html new file mode 100644 index 000000000..b968b1bfb --- /dev/null +++ b/dropdownbutton/overview/src/app/app.component.html @@ -0,0 +1,21 @@ +
smartDropDownButton allows you to display any type of content in a Drop-down.
+ + + + + + + + Button + Switch Button + + What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the + release of Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including versions + of Lorem Ipsum. \ No newline at end of file diff --git a/dropdownbutton/overview/src/app/app.component.ts b/dropdownbutton/overview/src/app/app.component.ts new file mode 100644 index 000000000..7e6b0e6ce --- /dev/null +++ b/dropdownbutton/overview/src/app/app.component.ts @@ -0,0 +1,141 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('dropdownbutton2', { read: DropDownButtonComponent, static: false }) dropdownbutton2: DropDownButtonComponent; + @ViewChild('dropdownbutton3', { read: DropDownButtonComponent, static: false }) dropdownbutton3: DropDownButtonComponent; + @ViewChild('dropdownbutton4', { read: DropDownButtonComponent, static: false }) dropdownbutton4: DropDownButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + const listMenuDataSource = [ + { + label: 'OSI', + items: [ + { + label: 'Application Layer', + items: [ + { label: 'SIP' }, + { label: 'DNS' }, + { label: 'FTP' }, + { label: 'RTP' }, + { label: 'DHCP' } + ] + }, + { + label: 'Presentation Layer', + items: [ + { label: 'SSL' }, + { label: 'TLS' } + ] + }, + { + label: 'Session Layer', + items: [ + { label: 'NetBIOS' }, + { label: 'SPDY' } + ] + }, + { + label: 'Transport Layer', + items: [ + { label: 'TCP' }, + { label: 'UDP' }, + { label: 'SCTP' } + ] + }, + { + label: 'Network Layer', + items: [ + { label: 'IP' }, + { label: 'ARP' }, + { label: 'ICMP' } + ] + }, + { + label: 'Data Link Layer', + items: [ + { label: 'ATM' }, + { label: 'SDLS' }, + { label: 'LLC' } + ] + }, + { + label: 'Physical Layer', + items: [ + { label: 'EIA/TIA-232' }, + { label: 'ITU-T V-Series' }, + { label: 'DSL' } + ] + } + ] + }, + { + label: 'TCP/IP', + items: [ + { + label: 'Application Layer', + items: [ + { label: 'DHCP' }, + { label: 'DNS' }, + { label: 'FTP' }, + { label: 'HTTP' }, + { label: 'IMAP' }, + { label: 'LDAP' }, + { label: 'XMPP' }, + { label: 'SSH' }, + { label: 'RIP' } + ] + }, + { + label: 'Transport Layer', + items: [ + { label: 'TCP' }, + { label: 'UDP' }, + { label: 'SCTP' } + ] + }, + { + label: 'Internet Layer', + items: [ + { label: 'IP' }, + { label: 'ICMP' }, + { label: 'ECN' } + ] + }, + { + label: 'Link Layer', + items: [ + { label: 'ARP' }, + { label: 'NDP' }, + { label: 'DSL' } + ] + } + ] + } + ]; + document.querySelector('smart-list-menu').dataSource = listMenuDataSource; + + + } +} \ No newline at end of file diff --git a/dropdownbutton/overview/src/app/app.module.ts b/dropdownbutton/overview/src/app/app.module.ts new file mode 100644 index 000000000..25031bb2f --- /dev/null +++ b/dropdownbutton/overview/src/app/app.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { DropDownButtonModule } from "@smart-webcomponents-angular/dropdownbutton"; +import { ListMenuModule } from "@smart-webcomponents-angular/listmenu"; +import { ButtonModule } from "@smart-webcomponents-angular/button"; +import { SwitchButtonModule } from "@smart-webcomponents-angular/switchbutton"; +import { CalendarModule } from "@smart-webcomponents-angular/calendar"; +import { AppComponent } from "./app.component"; + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule, + CalendarModule, + ListMenuModule, + ButtonModule, + SwitchButtonModule, + DropDownButtonModule + ], + bootstrap: [AppComponent], + entryComponents: [AppComponent] +}) +export class AppModule {} diff --git a/dropdownbutton/overview/src/app/main.ts b/dropdownbutton/overview/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/overview/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/overview/src/assets/fonts.css b/dropdownbutton/overview/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/overview/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/overview/src/assets/styles.css b/dropdownbutton/overview/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/overview/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/overview/src/index.html b/dropdownbutton/overview/src/index.html new file mode 100644 index 000000000..c6a928917 --- /dev/null +++ b/dropdownbutton/overview/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Overview + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/overview/src/main.ts b/dropdownbutton/overview/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/overview/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/overview/src/polyfills.ts b/dropdownbutton/overview/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/overview/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/overview/src/tsconfig.app.json b/dropdownbutton/overview/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/overview/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/overview/src/tsconfig.json b/dropdownbutton/overview/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/overview/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/render-mode/angular.json b/dropdownbutton/render-mode/angular.json new file mode 100644 index 000000000..088f8fe5c --- /dev/null +++ b/dropdownbutton/render-mode/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/render-mode/package.json b/dropdownbutton/render-mode/package.json new file mode 100644 index 000000000..da26adb13 --- /dev/null +++ b/dropdownbutton/render-mode/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-dropdownbutton-render-mode", + "description": "Angular dropdownbutton render-mode example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/render-mode/src/app/app.component.css b/dropdownbutton/render-mode/src/app/app.component.css new file mode 100644 index 000000000..73a2a4092 --- /dev/null +++ b/dropdownbutton/render-mode/src/app/app.component.css @@ -0,0 +1,5 @@ +smart-drop-down-button { + float: left; + margin-left: 25px; + margin-top: 25px; +} diff --git a/dropdownbutton/render-mode/src/app/app.component.html b/dropdownbutton/render-mode/src/app/app.component.html new file mode 100644 index 000000000..e661479b0 --- /dev/null +++ b/dropdownbutton/render-mode/src/app/app.component.html @@ -0,0 +1,20 @@ +What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the + release of Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including versions + of Lorem Ipsum. +What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the + release of Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including versions + of Lorem Ipsum. \ No newline at end of file diff --git a/dropdownbutton/render-mode/src/app/app.component.ts b/dropdownbutton/render-mode/src/app/app.component.ts new file mode 100644 index 000000000..6a9ee9aff --- /dev/null +++ b/dropdownbutton/render-mode/src/app/app.component.ts @@ -0,0 +1,30 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('dropdownbutton2', { read: DropDownButtonComponent, static: false }) dropdownbutton2: DropDownButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/dropdownbutton/render-mode/src/app/app.module.ts b/dropdownbutton/render-mode/src/app/app.module.ts new file mode 100644 index 000000000..d140bb62b --- /dev/null +++ b/dropdownbutton/render-mode/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/render-mode/src/app/main.ts b/dropdownbutton/render-mode/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/render-mode/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/render-mode/src/assets/fonts.css b/dropdownbutton/render-mode/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/render-mode/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/render-mode/src/assets/styles.css b/dropdownbutton/render-mode/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/render-mode/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/render-mode/src/index.html b/dropdownbutton/render-mode/src/index.html new file mode 100644 index 000000000..8222a756d --- /dev/null +++ b/dropdownbutton/render-mode/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Render-mode + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/render-mode/src/main.ts b/dropdownbutton/render-mode/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/render-mode/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/render-mode/src/polyfills.ts b/dropdownbutton/render-mode/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/render-mode/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/render-mode/src/tsconfig.app.json b/dropdownbutton/render-mode/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/render-mode/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/render-mode/src/tsconfig.json b/dropdownbutton/render-mode/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/render-mode/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/resizing/angular.json b/dropdownbutton/resizing/angular.json new file mode 100644 index 000000000..cf11d1950 --- /dev/null +++ b/dropdownbutton/resizing/angular.json @@ -0,0 +1,128 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/radiobutton/styles/smart.radiobutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/resizing/package.json b/dropdownbutton/resizing/package.json new file mode 100644 index 000000000..84852f4c4 --- /dev/null +++ b/dropdownbutton/resizing/package.json @@ -0,0 +1,54 @@ +{ + "name": "angular-dropdownbutton-resizing", + "description": "Angular dropdownbutton resizing example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "@smart-webcomponents-angular/radiobutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/resizing/src/app/app.component.css b/dropdownbutton/resizing/src/app/app.component.css new file mode 100644 index 000000000..db6abb17f --- /dev/null +++ b/dropdownbutton/resizing/src/app/app.component.css @@ -0,0 +1,11 @@ +smart-drop-down-button { + position: absolute; + left: 25%; + top: 45%; + --smart-drop-down-element-max-height: 300px; +} +@media only screen and (max-width: 500px) { + smart-drop-down-button{ + position: static; + } +} \ No newline at end of file diff --git a/dropdownbutton/resizing/src/app/app.component.html b/dropdownbutton/resizing/src/app/app.component.html new file mode 100644 index 000000000..a798017b0 --- /dev/null +++ b/dropdownbutton/resizing/src/app/app.component.html @@ -0,0 +1,34 @@ +
smartDropDownButton resize modes are demonstrated in this example.
+Where does it come + from? Contrary to popular belief, Lorem Ipsum is not + simply random text. It has roots in a piece of classical Latin literature + from 45 BC, making it over 2000 years old. Richard McClintock, a Latin + professor at Hampden-Sydney College in Virginia, looked up one of the more + obscure Latin words, consectetur, from a Lorem Ipsum passage, and going + through the cites of the word in classical literature, discovered the undoubtable + source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus + Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written + in 45 BC. This book is a treatise on the theory of ethics, very popular + during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor + sit amet..", comes from a line in section 1.10.32. The standard chunk of + Lorem Ipsum used since the 1500s is reproduced below for those interested. + Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero + are also reproduced in their exact original form, accompanied by English + versions from the 1914 translation by H. Rackham. + + +
+
+
Resize Mode:
+ None + Vertical + Horizontal + Both +
+
+
+
DropDown position:
+ Bottom + Top +
+
\ No newline at end of file diff --git a/dropdownbutton/resizing/src/app/app.component.ts b/dropdownbutton/resizing/src/app/app.component.ts new file mode 100644 index 000000000..d48a33297 --- /dev/null +++ b/dropdownbutton/resizing/src/app/app.component.ts @@ -0,0 +1,59 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonComponent } from '@smart-webcomponents-angular/radiobutton'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + @ViewChild('radiobuttonNone', { read: RadioButtonComponent, static: false }) radiobuttonNone: RadioButtonComponent; + @ViewChild('radiobuttonVertical', { read: RadioButtonComponent, static: false }) radiobuttonVertical: RadioButtonComponent; + @ViewChild('radiobuttonHorizontal', { read: RadioButtonComponent, static: false }) radiobuttonHorizontal: RadioButtonComponent; + @ViewChild('radiobuttonBoth', { read: RadioButtonComponent, static: false }) radiobuttonBoth: RadioButtonComponent; + @ViewChild('radiobuttonBottom', { read: RadioButtonComponent, static: false }) radiobuttonBottom: RadioButtonComponent; + @ViewChild('radiobuttonTop', { read: RadioButtonComponent, static: false }) radiobuttonTop: RadioButtonComponent; + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + const that = this, + dropDownButton = that.dropdownbutton; + + that.radiobuttonNone.addEventListener('change', function ():void { + dropDownButton.resizeMode = 'none'; + }); + + that.radiobuttonVertical.addEventListener('change', function ():void { + dropDownButton.resizeMode = 'vertical'; + }); + + that.radiobuttonHorizontal.addEventListener('change', function ():void { + dropDownButton.resizeMode = 'horizontal'; + }); + + that.radiobuttonBoth.addEventListener('change', function ():void { + dropDownButton.resizeMode = 'both'; + }); + + that.radiobuttonBottom.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'bottom'; + }); + + that.radiobuttonTop.addEventListener('change', function ():void { + dropDownButton.dropDownPosition = 'top'; + }); + } +} \ No newline at end of file diff --git a/dropdownbutton/resizing/src/app/app.module.ts b/dropdownbutton/resizing/src/app/app.module.ts new file mode 100644 index 000000000..11ce717ed --- /dev/null +++ b/dropdownbutton/resizing/src/app/app.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; +import { RadioButtonModule } from '@smart-webcomponents-angular/radiobutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule, RadioButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/resizing/src/app/main.ts b/dropdownbutton/resizing/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/resizing/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/resizing/src/assets/fonts.css b/dropdownbutton/resizing/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/resizing/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/resizing/src/assets/styles.css b/dropdownbutton/resizing/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/resizing/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/resizing/src/index.html b/dropdownbutton/resizing/src/index.html new file mode 100644 index 000000000..9358e66a1 --- /dev/null +++ b/dropdownbutton/resizing/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Resizing + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/resizing/src/main.ts b/dropdownbutton/resizing/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/resizing/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/resizing/src/polyfills.ts b/dropdownbutton/resizing/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/resizing/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/resizing/src/tsconfig.app.json b/dropdownbutton/resizing/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/resizing/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/resizing/src/tsconfig.json b/dropdownbutton/resizing/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/resizing/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownbutton/right-to-left/angular.json b/dropdownbutton/right-to-left/angular.json new file mode 100644 index 000000000..088f8fe5c --- /dev/null +++ b/dropdownbutton/right-to-left/angular.json @@ -0,0 +1,127 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/button/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.button.css", + "./node_modules/@smart-webcomponents-angular/dropdownbutton/styles/smart.dropdownbutton.css", + "./node_modules/@smart-webcomponents-angular/button/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownbutton/right-to-left/package.json b/dropdownbutton/right-to-left/package.json new file mode 100644 index 000000000..4463b3e7e --- /dev/null +++ b/dropdownbutton/right-to-left/package.json @@ -0,0 +1,53 @@ +{ + "name": "angular-dropdownbutton-right-to-left", + "description": "Angular dropdownbutton right-to-left example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/button": "9.2.22", + "@smart-webcomponents-angular/dropdownbutton": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownbutton/right-to-left/src/app/app.component.css b/dropdownbutton/right-to-left/src/app/app.component.css new file mode 100644 index 000000000..92664becf --- /dev/null +++ b/dropdownbutton/right-to-left/src/app/app.component.css @@ -0,0 +1,4 @@ +smart-drop-down-button { + --smart-editor-drop-down-max-height: 200px; + width: 200px; +} \ No newline at end of file diff --git a/dropdownbutton/right-to-left/src/app/app.component.html b/dropdownbutton/right-to-left/src/app/app.component.html new file mode 100644 index 000000000..4d9cf5f6f --- /dev/null +++ b/dropdownbutton/right-to-left/src/app/app.component.html @@ -0,0 +1,6 @@ +מה זה לורם איפסום? Lorem Ipsum הוא פשוט טקסט דמה של ענף ההדפס והקליעה. + Lorem Ipsum היה הטקסט הרגיל של התעשייה מאז שנות ה 1500-, אז מדפסת לא ידועה + לקחה מטען מסוג זה וערבלה אותו כדי ליצור ספר דגימה. הוא שרד לא רק חמש מאות + שנים, אלא גם את הקפיצה לסידור אלקטרוני האלקטרוני, שנשאר ללא שינוי. זה פופולרי + בשנות השישים עם שחרור גיליונות Letraset המכילים קטעי לורם איפסום, ולאחרונה + גם עם תוכנת פרסום שולחניים כמו Aldus PageMaker כולל גרסאות של Lorem Ipsum. \ No newline at end of file diff --git a/dropdownbutton/right-to-left/src/app/app.component.ts b/dropdownbutton/right-to-left/src/app/app.component.ts new file mode 100644 index 000000000..fbefd95fd --- /dev/null +++ b/dropdownbutton/right-to-left/src/app/app.component.ts @@ -0,0 +1,29 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownButtonComponent } from '@smart-webcomponents-angular/dropdownbutton'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownbutton', { read: DropDownButtonComponent, static: false }) dropdownbutton: DropDownButtonComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + } +} \ No newline at end of file diff --git a/dropdownbutton/right-to-left/src/app/app.module.ts b/dropdownbutton/right-to-left/src/app/app.module.ts new file mode 100644 index 000000000..d140bb62b --- /dev/null +++ b/dropdownbutton/right-to-left/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownButtonModule } from '@smart-webcomponents-angular/dropdownbutton'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownButtonModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownbutton/right-to-left/src/app/main.ts b/dropdownbutton/right-to-left/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownbutton/right-to-left/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownbutton/right-to-left/src/assets/fonts.css b/dropdownbutton/right-to-left/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownbutton/right-to-left/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownbutton/right-to-left/src/assets/styles.css b/dropdownbutton/right-to-left/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownbutton/right-to-left/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownbutton/right-to-left/src/index.html b/dropdownbutton/right-to-left/src/index.html new file mode 100644 index 000000000..cc706a90e --- /dev/null +++ b/dropdownbutton/right-to-left/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownbutton Right-to-left + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownbutton/right-to-left/src/main.ts b/dropdownbutton/right-to-left/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownbutton/right-to-left/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownbutton/right-to-left/src/polyfills.ts b/dropdownbutton/right-to-left/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownbutton/right-to-left/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownbutton/right-to-left/src/tsconfig.app.json b/dropdownbutton/right-to-left/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownbutton/right-to-left/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownbutton/right-to-left/src/tsconfig.json b/dropdownbutton/right-to-left/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownbutton/right-to-left/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownlist/advanced-selection-display-mode/angular.json b/dropdownlist/advanced-selection-display-mode/angular.json new file mode 100644 index 000000000..161a40173 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownlist/advanced-selection-display-mode/package.json b/dropdownlist/advanced-selection-display-mode/package.json new file mode 100644 index 000000000..c9e05f377 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-dropdownlist-advanced-selection-display-mode", + "description": "Angular dropdownlist advanced-selection-display-mode example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownlist/advanced-selection-display-mode/src/app/app.component.css b/dropdownlist/advanced-selection-display-mode/src/app/app.component.css new file mode 100644 index 000000000..750f8154c --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/app/app.component.css @@ -0,0 +1,4 @@ +smart-drop-down-list { + min-height: 35px; + height: auto; +} \ No newline at end of file diff --git a/dropdownlist/advanced-selection-display-mode/src/app/app.component.html b/dropdownlist/advanced-selection-display-mode/src/app/app.component.html new file mode 100644 index 000000000..32eca53d3 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/app/app.component.html @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/dropdownlist/advanced-selection-display-mode/src/app/app.component.ts b/dropdownlist/advanced-selection-display-mode/src/app/app.component.ts new file mode 100644 index 000000000..d58f06e27 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/app/app.component.ts @@ -0,0 +1,63 @@ +import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + + this.dropdownlist.dataSource = + [ + "Affogato", + "Americano", + "Bicerin", + "Breve", + "Café Bombón", + "Café au lait", + "Caffé Corretto", + "Café Crema", + "Caffé Latte", + "Caffé macchiato", + "Café mélange", + "Coffee milk", + "Cafe mocha", + "Cappuccino", + "Carajillo", + "Cortado", + "Cuban espresso", + "Espresso", + "Eiskaffee", + "The Flat White", + "Frappuccino", + "Galao", + "Greek frappé coffee", + "Alabala", + "Indian filter coffee", + "Instant coffee", + "Irish coffee", + "Liqueur coffee" + ]; + + + } +} \ No newline at end of file diff --git a/dropdownlist/advanced-selection-display-mode/src/app/app.module.ts b/dropdownlist/advanced-selection-display-mode/src/app/app.module.ts new file mode 100644 index 000000000..ec64b055e --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownlist/advanced-selection-display-mode/src/app/main.ts b/dropdownlist/advanced-selection-display-mode/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownlist/advanced-selection-display-mode/src/assets/fonts.css b/dropdownlist/advanced-selection-display-mode/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownlist/advanced-selection-display-mode/src/assets/styles.css b/dropdownlist/advanced-selection-display-mode/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownlist/advanced-selection-display-mode/src/index.html b/dropdownlist/advanced-selection-display-mode/src/index.html new file mode 100644 index 000000000..8b3028663 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownlist Advanced-selection-display-mode + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownlist/advanced-selection-display-mode/src/main.ts b/dropdownlist/advanced-selection-display-mode/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownlist/advanced-selection-display-mode/src/polyfills.ts b/dropdownlist/advanced-selection-display-mode/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownlist/advanced-selection-display-mode/src/tsconfig.app.json b/dropdownlist/advanced-selection-display-mode/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownlist/advanced-selection-display-mode/src/tsconfig.json b/dropdownlist/advanced-selection-display-mode/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownlist/advanced-selection-display-mode/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownlist/auto-complete/angular.json b/dropdownlist/auto-complete/angular.json new file mode 100644 index 000000000..161a40173 --- /dev/null +++ b/dropdownlist/auto-complete/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownlist/auto-complete/package.json b/dropdownlist/auto-complete/package.json new file mode 100644 index 000000000..b1fbc0541 --- /dev/null +++ b/dropdownlist/auto-complete/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-dropdownlist-auto-complete", + "description": "Angular dropdownlist auto-complete example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownlist/auto-complete/src/app/app.component.css b/dropdownlist/auto-complete/src/app/app.component.css new file mode 100644 index 000000000..88388c29f --- /dev/null +++ b/dropdownlist/auto-complete/src/app/app.component.css @@ -0,0 +1,5 @@ +smart-drop-down-list{ + width: 300px; + min-height: 35px; + height: auto; +} \ No newline at end of file diff --git a/dropdownlist/auto-complete/src/app/app.component.html b/dropdownlist/auto-complete/src/app/app.component.html new file mode 100644 index 000000000..7e1928244 --- /dev/null +++ b/dropdownlist/auto-complete/src/app/app.component.html @@ -0,0 +1,5 @@ + +
+
+
+
Open the DropDownList and press "F" to select the "Frappuccino" item.
\ No newline at end of file diff --git a/dropdownlist/auto-complete/src/app/app.component.ts b/dropdownlist/auto-complete/src/app/app.component.ts new file mode 100644 index 000000000..38e69ec9f --- /dev/null +++ b/dropdownlist/auto-complete/src/app/app.component.ts @@ -0,0 +1,60 @@ +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { DropDownListComponent } from '@smart-webcomponents-angular/dropdownlist'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) + +export class AppComponent implements AfterViewInit, OnInit { + @ViewChild('dropdownlist', { read: DropDownListComponent, static: false }) dropdownlist: DropDownListComponent; + + + ngOnInit(): void { + // onInit code. + } + + ngAfterViewInit(): void { + // afterViewInit code. + this.init(); + } + + init(): void { + // init code. + + this.dropdownlist.dataSource = + [ + "Affogato", + "Americano", + "Bicerin", + "Breve", + "Café Bombón", + "Café au lait", + "Caffé Corretto", + "Café Crema", + "Caffé Latte", + "Caffé macchiato", + "Café mélange", + "Coffee milk", + "Cafe mocha", + "Cappuccino", + "Carajillo", + "Cortado", + "Cuban espresso", + "Espresso", + "Eiskaffee", + "The Flat White", + "Frappuccino", + "Galao", + "Greek frappé coffee", + "Indian filter coffee", + "Instant coffee", + "Irish coffee", + "Liqueur coffee" + ]; + + + } +} \ No newline at end of file diff --git a/dropdownlist/auto-complete/src/app/app.module.ts b/dropdownlist/auto-complete/src/app/app.module.ts new file mode 100644 index 000000000..ec64b055e --- /dev/null +++ b/dropdownlist/auto-complete/src/app/app.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DropDownListModule } from '@smart-webcomponents-angular/dropdownlist'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ AppComponent ], + imports: [ BrowserModule, DropDownListModule ], + bootstrap: [ AppComponent ], + entryComponents: [ AppComponent ] +}) + +export class AppModule { } diff --git a/dropdownlist/auto-complete/src/app/main.ts b/dropdownlist/auto-complete/src/app/main.ts new file mode 100644 index 000000000..4b42abf9b --- /dev/null +++ b/dropdownlist/auto-complete/src/app/main.ts @@ -0,0 +1,6 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; +import { AppModule } from './app.module'; + +enableProdMode(); +platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file diff --git a/dropdownlist/auto-complete/src/assets/fonts.css b/dropdownlist/auto-complete/src/assets/fonts.css new file mode 100644 index 000000000..2f40d2ac7 --- /dev/null +++ b/dropdownlist/auto-complete/src/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "smart-icons"; + src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot"); + src: + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2") + format("woff2"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff") + format("woff"), + url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf") + format("truetype"); + font-weight: normal; + font-style: normal; +} diff --git a/dropdownlist/auto-complete/src/assets/styles.css b/dropdownlist/auto-complete/src/assets/styles.css new file mode 100644 index 000000000..76d7f58d2 --- /dev/null +++ b/dropdownlist/auto-complete/src/assets/styles.css @@ -0,0 +1,12 @@ +body, html { + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + min-height: 1000px; +} +app-root { + display: block; + width: 100%; + height: 100%; +} diff --git a/dropdownlist/auto-complete/src/index.html b/dropdownlist/auto-complete/src/index.html new file mode 100644 index 000000000..7deeebad8 --- /dev/null +++ b/dropdownlist/auto-complete/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownlist Auto-complete + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownlist/auto-complete/src/main.ts b/dropdownlist/auto-complete/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownlist/auto-complete/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownlist/auto-complete/src/polyfills.ts b/dropdownlist/auto-complete/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownlist/auto-complete/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownlist/auto-complete/src/tsconfig.app.json b/dropdownlist/auto-complete/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownlist/auto-complete/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownlist/auto-complete/src/tsconfig.json b/dropdownlist/auto-complete/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownlist/auto-complete/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +} diff --git a/dropdownlist/auto-height/angular.json b/dropdownlist/auto-height/angular.json new file mode 100644 index 000000000..161a40173 --- /dev/null +++ b/dropdownlist/auto-height/angular.json @@ -0,0 +1,126 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.base.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.dropdownlist.css", + "./node_modules/@smart-webcomponents-angular/dropdownlist/styles/smart.common.css", + "src/assets/fonts.css", + "src/assets/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": false, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": false + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/tsconfig.app.json", + "src/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "demo-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "defaultProject": "demo" +} + diff --git a/dropdownlist/auto-height/package.json b/dropdownlist/auto-height/package.json new file mode 100644 index 000000000..39c57ccea --- /dev/null +++ b/dropdownlist/auto-height/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-dropdownlist-auto-height", + "description": "Angular dropdownlist auto-height example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)", + "version": "1.0.1", + "homepage": "https://www.htmlelements.com/", + "dependencies": { + "@angular/animations": "^11.2.3", + "@angular/elements": "^11.2.3", + "@angular/common": "^11.2.3", + "@angular/compiler": "^11.2.3", + "@angular/core": "^11.2.3", + "@angular/forms": "^11.2.3", + "@angular/platform-browser": "^11.2.3", + "@angular/platform-browser-dynamic": "^11.2.3", + "@angular/router": "^11.2.3", + "@types/jasmine": "^3.6.6", + "@types/jasminewd2": "^2.0.8", + "@types/node": "^14.14.31", + "core-js": "3.9.1", + "moment": "^2.29.1", + "@smart-webcomponents-angular/dropdownlist": "9.2.22", + "rxjs": "^6.6.6", + "zone.js": "^0.11.4" + }, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.901.1", + "@angular/cli": "~11.2.3", + "@angular/compiler-cli": "~11.2.3", + "@angular/language-service": "~11.2.3", + "@types/node": "^14.14.35", + "codelyzer": "^5.1.2", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.4.1", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~2.1.0", + "karma-jasmine": "~3.0.1", + "karma-jasmine-html-reporter": "^1.4.2", + "protractor": "~5.4.3", + "ts-node": "~8.3.0", + "tslint": "~6.1.0", + "typescript": "~4.1.5" + } +} diff --git a/dropdownlist/auto-height/src/index.html b/dropdownlist/auto-height/src/index.html new file mode 100644 index 000000000..d0cb9f331 --- /dev/null +++ b/dropdownlist/auto-height/src/index.html @@ -0,0 +1,37 @@ + + + + + Angular Dropdownlist Auto-height + + + + + + + + Loading... +
+ https://www.jqwidgets.com/ +
+ + diff --git a/dropdownlist/auto-height/src/main.ts b/dropdownlist/auto-height/src/main.ts new file mode 100644 index 000000000..185ae4806 --- /dev/null +++ b/dropdownlist/auto-height/src/main.ts @@ -0,0 +1,16 @@ +import './polyfills'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // Ensure Angular destroys itself on hot reloads. + if (window['ngRef']) { + window['ngRef'].destroy(); + } + window['ngRef'] = ref; + + // Otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/dropdownlist/auto-height/src/polyfills.ts b/dropdownlist/auto-height/src/polyfills.ts new file mode 100644 index 000000000..2de624bd8 --- /dev/null +++ b/dropdownlist/auto-height/src/polyfills.ts @@ -0,0 +1,73 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +//import 'core-js/es6/reflect'; +//import 'core-js/es7/reflect'; + +import 'core-js/es/reflect'; + +/** + * Required to support Web Animations `@angular/animation`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/dropdownlist/auto-height/src/tsconfig.app.json b/dropdownlist/auto-height/src/tsconfig.app.json new file mode 100644 index 000000000..b5fb27f1e --- /dev/null +++ b/dropdownlist/auto-height/src/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/dropdownlist/auto-height/src/tsconfig.json b/dropdownlist/auto-height/src/tsconfig.json new file mode 100644 index 000000000..4a4dc6288 --- /dev/null +++ b/dropdownlist/auto-height/src/tsconfig.json @@ -0,0 +1,23 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2015", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false + } +}