diff --git a/.eslintignore b/.eslintignore index adeab1fe9..2bc654e15 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,7 +7,6 @@ storybook **/style-dictionary **/*.config.js packages/site-demo/plugins -packages/lumx-angularjs packages/lumx-react/jest packages/lumx-react/src/stories/generated packages/yo-generators diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5e6753087..159ed5b76 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,7 +4,7 @@ We'd love for you to contribute to our source code and to make it even better th ## Getting the source code -To be able to contribute, you will have to use the global LumX package from our [GitHub repository](https://github.com/lumapps/design-system). You won't be able to contribute from the distributed packages `@lumx/`, so be sure to clone the repository before starting contributing: +To be able to contribute, you will have to use the global LumX package from our [GitHub repository](https://github.com/lumapps/design-system). You won't be able to contribute from the distributed packages, so be sure to clone the repository before starting contributing: ```bash git clone git@github.com:lumapps/design-system.git @@ -25,10 +25,6 @@ Here are the guidelines we'd like you to follow. - [Coding rules](#coding-rules) - [Git commit guidelines](#git-commit-guidelines) -## Code of Conduct - -As heavy users of [AngularJS](https://github.com/angular/angular.js) and [React](https://github.com/facebook/react/), we encourage you to read and follow the [AngularJS Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md) and the [React Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md). - ## Got a question or a problem? If you have questions about how to use LumX, please direct these to [StackOverflow](http://stackoverflow.com/questions/tagged/LumX). diff --git a/README.md b/README.md index c82233866..882877fd9 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,16 @@ # LumApps Design System (LumX) -The first official LumApps Design System for [AngularJS][angularjs] or [React][react] applications. +The first official LumApps Design System for [React][react] applications. _LumX_ will help you design your applications faster and more easily. You will be able to use LumX with either the LumApps design styleguides or the [Google Material Design specifications][material]. ## Quick start -To start to use LumX, you can either: - -- Install with Yarn/NPM: - ```bash -yarn add @lumx/ +yarn add @lumx/ # Or -npm install @lumx/ +npm install @lumx/ ``` -- Download the latest release for [AngularJS][angularjs-release] or [React][react-release] -- Clone the repository: `git clone https://github.com/lumapps/design-system.git` - ## Documentation LumX's documentation is included in the "demo" directory. The demo/documentation site is built with [Webpack][webpack] and may be run locally. @@ -76,7 +69,7 @@ you can build LumX by using: yarn build ``` -This will produce the target build for `@lumx/core`, `@lumx/angularjs`, `@lumx/react` and the demo site. +This will produce the target build for `@lumx/core`, `@lumx/icons`, `@lumx/react` and the demo site. ## How to publish packages @@ -103,9 +96,7 @@ Releasing a new version of the lumx packages consists in: Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md). -[angularjs]: https://angularjs.org/ [react]: https://react.org/ [material]: http://www.google.com/design/spec/material-design/introduction.html -[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs [react-release]: https://www.npmjs.com/package/@lumx/react [webpack]: https://webpack.js.org/ diff --git a/configs/babel.config.js b/configs/babel.config.js index 718b60da2..9454a7ce9 100644 --- a/configs/babel.config.js +++ b/configs/babel.config.js @@ -1,7 +1,6 @@ module.exports = { cacheDirectory: true, plugins: [ - ['angularjs-annotate', { explicitOnly: true }], '@babel/plugin-proposal-class-properties', ['@babel/plugin-proposal-private-property-in-object', { 'loose': false }], ['@babel/plugin-proposal-private-methods', { 'loose': false }], diff --git a/dev-packages/eslint-config-lumapps/index.js b/dev-packages/eslint-config-lumapps/index.js index 4feb178ff..7cccfe5cd 100644 --- a/dev-packages/eslint-config-lumapps/index.js +++ b/dev-packages/eslint-config-lumapps/index.js @@ -13,9 +13,6 @@ module.exports = { 'plugin:react/recommended', 'plugin:prettier/recommended', ], - globals: { - angular: 'readonly', - }, parser: '@typescript-eslint/parser', parserOptions: { sourceType: 'module', diff --git a/package.json b/package.json index 1bed7750f..4d48d0bd8 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,6 @@ "build:site": "yarn workspace lumx-site-demo clean && yarn workspace lumx-site-demo build", "build:react": "yarn workspace @lumx/react build", "build:core": "yarn workspace @lumx/core build", - "build:angularjs": "yarn workspace @lumx/angularjs build", "build:storybook": "yarn workspace @lumx/react build:storybook", "chromatic": "npx chromatic -b build:storybook", "clean": "rm -rf packages/*/dist; lerna clean --yes && lerna run --stream clean", diff --git a/packages/lumx-angularjs/README.md b/packages/lumx-angularjs/README.md deleted file mode 100644 index 60be79869..000000000 --- a/packages/lumx-angularjs/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# LumApps Design System (LumX) - -The first official LumApps Design System for [AngularJS][angularjs] applications. -_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with either the LumApps design styleguides or the [Google Material Design specifications][material]. - -## Quick start - -To start to use LumX, you can either: - -- Install with Yarn/NPM: - -```bash -yarn add @lumx/angularjs -# Or -npm install @lumx/angularjs -``` - -- Download the latest release for [AngularJS][angularjs-release] -- Clone the repository: `git clone https://github.com/lumapps/design-system.git` - -## Documentation - -You can find an online version of the demo and documentation site at https://design.lumapps.com. - -## How to get help, contribute, or provide feedback - -Please refer to our [contributing guidelines](CONTRIBUTING.md). - -## Copyright and license - -Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md). - -[angularjs]: https://angularjs.org/ -[react]: https://react.org/ -[material]: http://www.google.com/design/spec/material-design/introduction.html -[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs -[react-release]: https://www.npmjs.com/package/@lumx/react -[webpack]: https://webpack.js.org/ diff --git a/packages/lumx-angularjs/package.json b/packages/lumx-angularjs/package.json deleted file mode 100644 index 98a01ec42..000000000 --- a/packages/lumx-angularjs/package.json +++ /dev/null @@ -1,73 +0,0 @@ -{ - "author": { - "name": "LumApps" - }, - "bugs": { - "url": "https://github.com/lumapps/design-system/issues" - }, - "dependencies": { - "@lumx/core": "^3.6.7", - "@lumx/icons": "^3.6.7", - "focus-visible": "^5.0.2", - "lodash": "4.17.21", - "popper.js": "^1.16.0" - }, - "description": "The official LumApps Design System (LumX) for AngularJS applications", - "engines": { - "node": ">= 12.0.0", - "npm": ">= 4.0.0", - "yarn": ">= 1.3.0" - }, - "homepage": "https://github.com/lumapps/design-system", - "keywords": [ - "Design System", - "LumApps", - "LumX", - "AngularJS" - ], - "license": "MIT", - "main": "lumx.angularjs.js", - "name": "@lumx/angularjs", - "publishConfig": { - "directory": "dist" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/lumapps/design-system.git" - }, - "scripts": { - "build": "webpack", - "prepare": "install-peers || exit 0" - }, - "version": "3.6.7", - "devDependencies": { - "@babel/core": "^7.18.13", - "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/plugin-proposal-export-default-from": "^7.18.10", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", - "@babel/plugin-proposal-object-rest-spread": "^7.18.9", - "@babel/plugin-proposal-optional-chaining": "^7.18.9", - "@babel/plugin-proposal-private-property-in-object": "^7.18.6", - "@babel/preset-env": "^7.18.10", - "@babel/preset-typescript": "^7.18.6", - "babel-plugin-angularjs-annotate": "^0.10.0", - "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^5.1.1", - "core-js": "^3.6.4", - "friendly-errors-webpack-plugin": "^1.7.0", - "html-loader": "^0.5.5", - "html-minifier-webpack-plugin": "^2.2.3", - "install-peers-cli": "^2.2.0", - "is-ci": "^2.0.0", - "sass-mq": "^6.0.0", - "tsconfig-paths-webpack-plugin": "^3.3.0", - "unminified-webpack-plugin": "^2.0.0", - "webpack": "^4.44.1", - "webpack-notifier": "^1.8.0", - "webpackbar": "^4.0.0" - }, - "peerDependencies": { - "angular": "^1.7.8", - "jquery": "3.5.1" - } -} diff --git a/packages/lumx-angularjs/src/components/avatar/avatar.html b/packages/lumx-angularjs/src/components/avatar/avatar.html deleted file mode 100644 index 19329b377..000000000 --- a/packages/lumx-angularjs/src/components/avatar/avatar.html +++ /dev/null @@ -1,4 +0,0 @@ -
-
-
-
diff --git a/packages/lumx-angularjs/src/components/avatar/avatar_directive.js b/packages/lumx-angularjs/src/components/avatar/avatar_directive.js deleted file mode 100644 index e79c4e276..000000000 --- a/packages/lumx-angularjs/src/components/avatar/avatar_directive.js +++ /dev/null @@ -1,125 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './avatar.html'; - -///////////////////////////// - -function AvatarController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this, no-unused-vars - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - size: 'm', - theme: 'light', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has actions slot filled or not. - * - * @type {boolean} - */ - lx.hasActions = false; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get background image according to image url. - * - * @return {Object} The image style properties. - */ - function getBackgroundImage() { - return { - backgroundImage: `url(${lx.image})`, - }; - } - - /** - * Get avatar classes. - * - * @return {Array} The list of avatar classes. - */ - function getClasses() { - const classes = []; - - const size = lx.size ? lx.size : _DEFAULT_PROPS.size; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-avatar--size-${size}`); - classes.push(`${CSS_PREFIX}-avatar--theme-${theme}`); - - return classes; - } - - ///////////////////////////// - - lx.getBackgroundImage = getBackgroundImage; - lx.getClasses = getClasses; -} - -///////////////////////////// - -function AvatarDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('actions')) { - ctrl.hasActions = true; - } - - if (transclude.isSlotFilled('badge')) { - ctrl.hasBadge = true; - } - } - - return { - bindToController: true, - controller: AvatarController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - image: '@lxImage', - size: '@?lxSize', - theme: '@?lxTheme', - }, - template, - transclude: { - actions: '?lxAvatarActions', - badge: '?lxAvatarBadge', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.avatar').directive('lxAvatar', AvatarDirective); - -///////////////////////////// - -export { AvatarDirective }; diff --git a/packages/lumx-angularjs/src/components/badge/badge.html b/packages/lumx-angularjs/src/components/badge/badge.html deleted file mode 100644 index 1aa343f3a..000000000 --- a/packages/lumx-angularjs/src/components/badge/badge.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/packages/lumx-angularjs/src/components/badge/badge_directive.js b/packages/lumx-angularjs/src/components/badge/badge_directive.js deleted file mode 100644 index 70f3e5a74..000000000 --- a/packages/lumx-angularjs/src/components/badge/badge_directive.js +++ /dev/null @@ -1,80 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './badge.html'; - -///////////////////////////// - -function BadgeController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - color: 'light', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get badge classes. - * - * @return {Array} The list of badge classes. - */ - function getClasses() { - const classes = []; - - const color = lx.color ? lx.color : _DEFAULT_PROPS.color; - classes.push(`${CSS_PREFIX}-badge--color-${color}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function BadgeDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: BadgeController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - color: '@?lxColor', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.badge').directive('lxBadge', BadgeDirective); - -///////////////////////////// - -export { BadgeDirective }; diff --git a/packages/lumx-angularjs/src/components/button/button-group_directive.js b/packages/lumx-angularjs/src/components/button/button-group_directive.js deleted file mode 100644 index f240a9f68..000000000 --- a/packages/lumx-angularjs/src/components/button/button-group_directive.js +++ /dev/null @@ -1,22 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function ButtonGroupDirective() { - 'ngInject'; - - return { - replace: true, - restrict: 'E', - template: `
`, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.button').directive('lxButtonGroup', ButtonGroupDirective); - -///////////////////////////// - -export { ButtonGroupDirective }; diff --git a/packages/lumx-angularjs/src/components/button/button_directive.js b/packages/lumx-angularjs/src/components/button/button_directive.js deleted file mode 100644 index 983403bdd..000000000 --- a/packages/lumx-angularjs/src/components/button/button_directive.js +++ /dev/null @@ -1,345 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function ButtonController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - emphasis: 'high', - size: 'm', - theme: 'light', - variant: 'button', - }; - - /** - * The emphasis fallback. - * - * @type {Object} - * @constant - * @readonly - */ - const _EMPHASIS_FALLBACK = { - raised: 'high', - flat: 'low', - fab: 'high', - icon: 'low', - }; - - /** - * The size fallback. - * - * @type {Object} - * @constant - * @readonly - */ - const _SIZE_FALLBACK = { - xs: 's', - // eslint-disable-next-line id-length - s: 's', - // eslint-disable-next-line id-length - m: 'm', - l: 'm', - xl: 'm', - }; - - /** - * The variant fallback. - * - * @type {Object} - * @constant - * @readonly - */ - const _VARIANT_FALLBACK = { - raised: 'button', - flat: 'button', - fab: 'icon', - icon: 'icon', - }; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Whether button has default emphasis or not. - * - * @return {boolean} Whether button has default emphasis or not. - */ - function _isDefaultEmphasis() { - return (!lx.type && !lx.emphasis) || lx.emphasis === 'high' || lx.type === 'raised' || lx.type === 'fab'; - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get button classes. - * - * @return {Array} The list of button classes. - */ - function getClasses() { - const classes = []; - - if (angular.isUndefined(lx.color) || !lx.color) { - if (angular.isDefined(lx.theme) && lx.theme && !_isDefaultEmphasis()) { - const buttonColor = lx.theme === 'light' ? 'dark' : 'light'; - classes.push(`${CSS_PREFIX}-button--color-${buttonColor}`); - } else { - const defaultColor = _isDefaultEmphasis() ? 'primary' : 'dark'; - classes.push(`${CSS_PREFIX}-button--color-${defaultColor}`); - } - - // Backward compatibility. - classes.push('btn--primary'); - } else { - classes.push(`${CSS_PREFIX}-button--color-${lx.color}`); - - // Backward compatibility. - classes.push(`btn--${lx.color}`); - } - - if (angular.isUndefined(lx.emphasis) || !lx.emphasis) { - if (angular.isDefined(lx.type) && lx.type) { - classes.push(`${CSS_PREFIX}-button--emphasis-${_EMPHASIS_FALLBACK[lx.type]}`); - } else { - classes.push(`${CSS_PREFIX}-button--emphasis-${_DEFAULT_PROPS.emphasis}`); - } - } else { - classes.push(`${CSS_PREFIX}-button--emphasis-${lx.emphasis}`); - } - - if (lx.isSelected) { - classes.push(`${CSS_PREFIX}-button--is-selected`); - } - - if (angular.isUndefined(lx.size) || !lx.size) { - classes.push(`${CSS_PREFIX}-button--size-${_DEFAULT_PROPS.size}`); - - // Backward compatibility. - classes.push('btn--m'); - } else { - classes.push(`${CSS_PREFIX}-button--size-${_SIZE_FALLBACK[lx.size]}`); - - // Backward compatibility. - classes.push(`btn--${lx.size}`); - } - - if (_isDefaultEmphasis()) { - if (angular.isUndefined(lx.theme) || !lx.theme) { - classes.push(`${CSS_PREFIX}-button--theme-${_DEFAULT_PROPS.theme}`); - } else { - classes.push(`${CSS_PREFIX}-button--theme-${lx.theme}`); - } - } - - if (angular.isUndefined(lx.variant) || !lx.variant) { - if (angular.isDefined(lx.type) && lx.type) { - classes.push(`${CSS_PREFIX}-button--variant-${_VARIANT_FALLBACK[lx.type]}`); - } else { - classes.push(`${CSS_PREFIX}-button--variant-${_DEFAULT_PROPS.variant}`); - } - } else { - classes.push(`${CSS_PREFIX}-button--variant-${lx.variant}`); - } - - // Backward compatibility. - if (angular.isDefined(lx.type) && lx.type) { - classes.push(`btn--${lx.type}`); - } else if (lx.variant === 'icon') { - if (angular.isUndefined(lx.emphasis) || !lx.emphasis || lx.emphasis === 'high') { - classes.push('btn--fab'); - } else { - classes.push('btn--icon'); - } - } else if (angular.isUndefined(lx.emphasis) || !lx.emphasis || lx.emphasis === 'high') { - classes.push('btn--raised'); - } else { - classes.push('btn--flat'); - } - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Get button wrapper classes. - * - * @return {Array} The list of button wrapper classes. - */ - function getWrapperClasses() { - const wrapperClasses = []; - - if (lx.hasBackground && lx.emphasis === 'low') { - if (angular.isUndefined(lx.color) || !lx.color) { - if (angular.isDefined(lx.theme) && lx.theme) { - wrapperClasses.push(`${CSS_PREFIX}-button-wrapper--color-${lx.theme}`); - } else { - wrapperClasses.push(`${CSS_PREFIX}-button-wrapper--color-light`); - } - } else { - let wrapperColor = 'light'; - - if (lx.color === 'light') { - wrapperColor = 'dark'; - } - - wrapperClasses.push(`${CSS_PREFIX}-button-wrapper--color-${wrapperColor}`); - } - - if (angular.isUndefined(lx.variant) || !lx.variant) { - if (angular.isDefined(lx.type) && lx.type) { - wrapperClasses.push(`${CSS_PREFIX}-button-wrapper--variant-${_VARIANT_FALLBACK[lx.type]}`); - } else { - wrapperClasses.push(`${CSS_PREFIX}-button-wrapper--variant-${_DEFAULT_PROPS.variant}`); - } - } else { - wrapperClasses.push(`${CSS_PREFIX}-button-wrapper--variant-${lx.variant}`); - } - } - - return wrapperClasses; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.getWrapperClasses = getWrapperClasses; -} - -///////////////////////////// - -function ButtonDirective() { - 'ngInject'; - - /** - * Whether the button needs to be converted to a link or not. - * - * @param {Object} attrs The directive attributes. - * @return {boolean} Whether the button is an anchor or not. - */ - function isAnchor(attrs) { - return ( - angular.isDefined(attrs.href) || - angular.isDefined(attrs.ngHref) || - angular.isDefined(attrs.ngLink) || - angular.isDefined(attrs.uiSref) - ); - } - - /** - * Get button template according to type, color and size. - * - * @param {Element} el The directive element. - * @param {Object} attrs The directive attributes. - * @return {string} The button html template. - */ - function getTemplate(el, attrs) { - let buttonContent; - - if (isAnchor(attrs)) { - buttonContent = ``; - } else { - buttonContent = ``; - } - - if (attrs.lxHasBackground) { - return ` -
- ${buttonContent} -
- `; - } - - return buttonContent; - } - - function link(scope, el, attrs) { - let buttonEl = el; - - if (attrs.lxHasBackground) { - if (isAnchor(attrs)) { - buttonEl = el.find('a'); - } else { - buttonEl = el.find('button'); - } - } - - if ( - (!attrs.lxVariant && !attrs.lxType) || - attrs.lxVariant === 'button' || - attrs.lxType === 'raised' || - attrs.lxType === 'flat' - ) { - const leftIcon = buttonEl.find('i:first-child'); - const rightIcon = buttonEl.find('i:last-child'); - const label = buttonEl.find('span'); - - if (leftIcon.length > 0) { - buttonEl.addClass(`${CSS_PREFIX}-button--has-left-icon`); - } - - if (rightIcon.length > 0) { - buttonEl.addClass(`${CSS_PREFIX}-button--has-right-icon`); - } - - if (label.length === 0) { - buttonEl.wrapInner(''); - } - } - } - - return { - bindToController: true, - controller: ButtonController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - color: '@?lxColor', - customColors: '=?lxCustomColors', - emphasis: '@?lxEmphasis', - hasBackground: '=?lxHasBackground', - isSelected: '=?lxIsSelected', - size: '@?lxSize', - theme: '@?lxTheme', - type: '@?lxType', - variant: '@?lxVariant', - }, - template: getTemplate, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.button').directive('lxButton', ButtonDirective); - -///////////////////////////// - -export { ButtonDirective }; diff --git a/packages/lumx-angularjs/src/components/checkbox/checkbox.html b/packages/lumx-angularjs/src/components/checkbox/checkbox.html deleted file mode 100644 index 40095d118..000000000 --- a/packages/lumx-angularjs/src/components/checkbox/checkbox.html +++ /dev/null @@ -1,34 +0,0 @@ -
-
- - -
-
-
- -
-
-
- -
- - - -
- -
- - - - - - - -
-
diff --git a/packages/lumx-angularjs/src/components/checkbox/checkbox_directive.js b/packages/lumx-angularjs/src/components/checkbox/checkbox_directive.js deleted file mode 100644 index bb4b4b43a..000000000 --- a/packages/lumx-angularjs/src/components/checkbox/checkbox_directive.js +++ /dev/null @@ -1,219 +0,0 @@ -import { mdiCheck } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './checkbox.html'; - -///////////////////////////// - -function CheckboxController(LxUtilsService) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - /** - * The model controller. - * - * @type {Object} - */ - let _modelController; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The checkbox id. - * - * @type {string} - */ - lx.checkboxId = LxUtilsService.generateUUID(); - - /** - * Whether the directive has helper slot filled or not. - * - * @type {boolean} - */ - lx.hasHelper = false; - - /** - * Whether the directive has label slot filled or not. - * - * @type {boolean} - */ - lx.hasLabel = false; - - /** - * Whether the directive has transcluded content if no transclude slot. - * - * @type {boolean} - */ - lx.hasTranscluded = false; - - /** - * The checkbox icons. - * - * @type {Object} - */ - lx.icons = { - mdiCheck, - }; - - /** - * The model view value. - * - * @type {string} - */ - lx.viewValue = undefined; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get checkbox classes. - * - * @return {Array} The list of checkbox classes. - */ - function getClasses() { - const classes = []; - - const state = lx.viewValue ? 'checked' : 'unchecked'; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-checkbox--is-${state}`); - classes.push(`${CSS_PREFIX}-checkbox--theme-${theme}`); - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Set the model controller. - * - * @param {Object} modelController The model controller. - */ - function setModelController(modelController) { - _modelController = modelController; - - _modelController.$render = function onModelRender() { - lx.viewValue = _modelController.$viewValue; - }; - } - - /** - * Update model controller view value on checkbox click. - */ - function updateViewValue() { - if (angular.isUndefined(_modelController)) { - lx.viewValue = !lx.viewValue; - - return; - } - - _modelController.$setViewValue(!_modelController.$viewValue); - _modelController.$render(); - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.setModelController = setModelController; - lx.updateViewValue = updateViewValue; -} - -///////////////////////////// - -function CheckboxDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls, transclude) { - if (ctrls[1]) { - ctrls[0].setModelController(ctrls[1]); - } - - if (transclude.isSlotFilled('label')) { - ctrls[0].hasLabel = true; - } - - if (transclude.isSlotFilled('helper')) { - ctrls[0].hasHelper = true; - } - - if (!ctrls[0].hasLabel && !ctrls[0].hasHelper) { - transclude((clone) => { - if (clone.length > 0) { - ctrls[0].hasTranscluded = true; - } - }); - } - - attrs.$observe('disabled', (isDisabled) => { - el.find('input').attr('disabled', isDisabled); - - if (isDisabled) { - el.addClass(`${CSS_PREFIX}-checkbox--is-disabled`); - } else { - el.removeClass(`${CSS_PREFIX}-checkbox--is-disabled`); - } - }); - - attrs.$observe('checked', (isChecked) => { - el.find('input').attr('checked', isChecked); - - ctrls[0].viewValue = isChecked; - }); - } - - return { - bindToController: true, - controller: CheckboxController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxCheckbox', '?ngModel'], - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - theme: '@?lxTheme', - }, - template, - transclude: { - helper: '?lxCheckboxHelper', - label: '?lxCheckboxLabel', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.checkbox').directive('lxCheckbox', CheckboxDirective); - -///////////////////////////// - -export { CheckboxDirective }; diff --git a/packages/lumx-angularjs/src/components/chip/chip-group_directive.js b/packages/lumx-angularjs/src/components/chip/chip-group_directive.js deleted file mode 100644 index fd70d4035..000000000 --- a/packages/lumx-angularjs/src/components/chip/chip-group_directive.js +++ /dev/null @@ -1,78 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function ChipGroupController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - align: 'left', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get button classes. - * - * @return {Array} The list of button classes. - */ - function getClasses() { - const classes = []; - - const align = lx.align ? lx.align : _DEFAULT_PROPS.align; - classes.push(`${CSS_PREFIX}-chip-group--align-${align}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function ChipGroupDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: ChipGroupController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - align: '@?lxAlign', - }, - template: `
`, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.chip').directive('lxChipGroup', ChipGroupDirective); - -///////////////////////////// - -export { ChipGroupDirective }; diff --git a/packages/lumx-angularjs/src/components/chip/chip.html b/packages/lumx-angularjs/src/components/chip/chip.html deleted file mode 100644 index 86da9222a..000000000 --- a/packages/lumx-angularjs/src/components/chip/chip.html +++ /dev/null @@ -1,29 +0,0 @@ - -
- -
- -
- -
- -
- diff --git a/packages/lumx-angularjs/src/components/chip/chip_directive.js b/packages/lumx-angularjs/src/components/chip/chip_directive.js deleted file mode 100644 index b282aeee8..000000000 --- a/packages/lumx-angularjs/src/components/chip/chip_directive.js +++ /dev/null @@ -1,228 +0,0 @@ -import { mdiMenuDown } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './chip.html'; - -///////////////////////////// - -function ChipController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - color: 'dark', - size: 'm', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has after slot filled or not. - * - * @type {boolean} - */ - lx.hasAfter = false; - - /** - * Whether the directive has before slot filled or not. - * - * @type {boolean} - */ - lx.hasBefore = false; - - /** - * Whether the directive has label slot filled or not. - * - * @type {boolean} - */ - lx.hasLabel = false; - - /** - * The chip icons. - * - * @type {Object} - */ - lx.icons = { - mdiMenuDown, - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get chip classes. - * - * @return {Array} The list of chip classes. - */ - function getClasses() { - const classes = []; - - let color; - if (lx.color) { - // eslint-disable-next-line prefer-destructuring - color = lx.color; - } else if (angular.isDefined(lx.theme) && lx.theme) { - color = lx.theme === 'light' ? 'dark' : 'light'; - } else { - // eslint-disable-next-line prefer-destructuring - color = _DEFAULT_PROPS.color; - } - - const size = lx.size ? lx.size : _DEFAULT_PROPS.size; - const state = lx.isSelected ? 'selected' : 'unselected'; - - classes.push(`${CSS_PREFIX}-chip--color-${color}`); - classes.push(`${CSS_PREFIX}-chip--size-${size}`); - classes.push(`${CSS_PREFIX}-chip--is-${state}`); - - if (lx.hasAfter || lx.hasDropdownIndicator) { - classes.push(`${CSS_PREFIX}-chip--has-after`); - } - - if (lx.hasBefore) { - classes.push(`${CSS_PREFIX}-chip--has-before`); - } - - if (angular.isFunction(lx.onClick)) { - classes.push(`${CSS_PREFIX}-chip--is-clickable`); - } - - if (lx.isDisabled) { - classes.push(`${CSS_PREFIX}-chip--is-disabled`); - } - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Handle given function on after area click. - * - * @param {Event} evt The click event. - */ - function handleOnAfterClick(evt) { - if (!angular.isFunction(lx.onAfterClick)) { - return; - } - - evt.stopPropagation(); - - lx.onAfterClick(); - } - - /** - * Handle given function on before area click. - * - * @param {Event} evt The click event. - */ - function handleOnBeforeClick(evt) { - if (!angular.isFunction(lx.onBeforeClick)) { - return; - } - - evt.stopPropagation(); - - lx.onBeforeClick(); - } - - /** - * Handle given function on the whole area click. - * - * @param {Event} evt The click event. - */ - function handleOnClick(evt) { - if (!angular.isFunction(lx.onClick)) { - return; - } - - lx.onClick({ $event: evt }); - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.handleOnAfterClick = handleOnAfterClick; - lx.handleOnBeforeClick = handleOnBeforeClick; - lx.handleOnClick = handleOnClick; -} - -///////////////////////////// - -function ChipDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('after')) { - ctrl.hasAfter = true; - } - - if (transclude.isSlotFilled('before')) { - ctrl.hasBefore = true; - } - - if (transclude.isSlotFilled('label')) { - ctrl.hasLabel = true; - } - } - - return { - bindToController: true, - controller: ChipController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - color: '@?lxColor', - customColors: '=?lxCustomColors', - hasDropdownIndicator: '=?lxHasDropdownIndicator', - isDisabled: '=?ngDisabled', - isSelected: '=?lxIsSelected', - onAfterClick: '&?lxOnAfterClick', - onBeforeClick: '&?lxOnBeforeClick', - onClick: '&?lxOnClick', - size: '@?lxSize', - theme: '@?lxTheme', - }, - template, - transclude: { - after: '?lxChipAfter', - before: '?lxChipBefore', - label: 'lxChipLabel', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.chip').directive('lxChip', ChipDirective); - -///////////////////////////// - -export { ChipDirective }; diff --git a/packages/lumx-angularjs/src/components/comment-block/comment-block.html b/packages/lumx-angularjs/src/components/comment-block/comment-block.html deleted file mode 100644 index e27e25a6c..000000000 --- a/packages/lumx-angularjs/src/components/comment-block/comment-block.html +++ /dev/null @@ -1,44 +0,0 @@ -
-
-
- -
- -
-
-
- - {{ lx.name }} - - - {{ lx.date }} - {{ lx.headerActions }} -
- -

{{ lx.text }}

-
- -
-
-
- -
-
diff --git a/packages/lumx-angularjs/src/components/comment-block/comment-block_directive.js b/packages/lumx-angularjs/src/components/comment-block/comment-block_directive.js deleted file mode 100644 index 3869c9980..000000000 --- a/packages/lumx-angularjs/src/components/comment-block/comment-block_directive.js +++ /dev/null @@ -1,131 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './comment-block.html'; - -///////////////////////////// - -function CommentBlockController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has actions slot filled or not. - * - * @type {boolean} - */ - lx.hasActions = false; - - /** - * Whether the directive has children slot filled or not. - * - * @type {boolean} - */ - lx.hasChildren = false; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get comment block classes. - * - * @return {Array} The list of comment block classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - classes.push(`${CSS_PREFIX}-comment-block--theme-${theme}`); - - if (lx.hasChildren && lx.isOpen) { - classes.push(`${CSS_PREFIX}-comment-block--has-children`); - } - - if (lx.isRelevant) { - classes.push(`${CSS_PREFIX}-comment-block--is-relevant`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function CommentBlockDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('actions')) { - ctrl.hasActions = true; - } - - if (transclude.isSlotFilled('children')) { - ctrl.hasChildren = true; - } - } - - return { - bindToController: true, - controller: CommentBlockController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - avatar: '@lxAvatar', - date: '@?lxDate', - isOpen: '=?lxIsOpen', - isRelevant: '=?lxIsRelevant', - name: '@lxName', - onClick: '&?lxOnClick', - onMouseEnter: '&?lxOnMouseEnter', - onMouseLeave: '&?lxOnMouseLeave', - text: '@lxText', - theme: '@?lxTheme', - }, - template, - transclude: { - actions: '?lxCommentBlockActions', - children: '?lxCommentBlockChildren', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.comment-block').directive('lxCommentBlock', CommentBlockDirective); - -///////////////////////////// - -export { CommentBlockDirective }; diff --git a/packages/lumx-angularjs/src/components/data-table/data-table.html b/packages/lumx-angularjs/src/components/data-table/data-table.html deleted file mode 100644 index c7affa15c..000000000 --- a/packages/lumx-angularjs/src/components/data-table/data-table.html +++ /dev/null @@ -1,56 +0,0 @@ -
- - - - - - - - - {{ th.label }} - - - - - - - - - - - - {{ tr[th.name] }} -
- - - - -
diff --git a/packages/lumx-angularjs/src/components/data-table/data-table_directive.js b/packages/lumx-angularjs/src/components/data-table/data-table_directive.js deleted file mode 100644 index e622722d6..000000000 --- a/packages/lumx-angularjs/src/components/data-table/data-table_directive.js +++ /dev/null @@ -1,289 +0,0 @@ -import template from './data-table.html'; - -///////////////////////////// - -function DataTableController($rootScope, $sce, $scope) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether all rows are selected or not. - * - * @type {boolean} - */ - lx.allRowsSelected = false; - - /** - * The list of selected rows. - * - * @type {Array} - */ - lx.selectedRows = []; - - ///////////////////////////// - - /** - * Services and utilities. - */ - lx.$sce = $sce; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Select a given row. - * - * @param {Object} row The row to select. - */ - function _select(row) { - lx.toggleSelection(row, true); - } - - /** - * Select all rows. - */ - function _selectAll() { - lx.selectedRows.length = 0; - - for (let i = 0, len = lx.tbody.length; i < len; i++) { - if (!lx.tbody[i].lxDataTableDisabled) { - lx.tbody[i].lxDataTableSelected = true; - lx.selectedRows.push(lx.tbody[i]); - } - } - - lx.allRowsSelected = true; - - $rootScope.$broadcast('lx-data-table__unselected', lx.dataTableId, lx.selectedRows); - } - - /** - * Unselect a given row. - * - * @param {Object} row The row to unselect. - */ - function _unselect(row) { - lx.toggleSelection(row, false); - } - - /** - * Unselect all rows. - */ - function _unselectAll() { - for (let i = 0, len = lx.tbody.length; i < len; i++) { - if (!lx.tbody[i].lxDataTableDisabled) { - lx.tbody[i].lxDataTableSelected = false; - } - } - - lx.allRowsSelected = false; - lx.selectedRows.length = 0; - - $rootScope.$broadcast('lx-data-table__selected', lx.dataTableId, lx.selectedRows); - } - - /** - * Update all rows selected boolean according to displayed rows. - */ - function _setAllRowsSelected() { - let displayedRows = 0; - - for (let i = 0, len = lx.tbody.length; i < len; i++) { - if (!lx.tbody[i].lxDataTableDisabled) { - displayedRows++; - } - } - - if (displayedRows === lx.selectedRows.length) { - lx.allRowsSelected = true; - } else { - lx.allRowsSelected = false; - } - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Sort a given column. - * - * @param {Object} column The column to sort. - */ - function sort(column) { - if (!column.isSortable) { - return; - } - - for (let i = 0, len = lx.thead.length; i < len; i++) { - if (lx.thead[i].isSortable && lx.thead[i].name !== column.name) { - lx.thead[i].sortOrder = undefined; - } - } - - if (!column.sortOrder || column.sortOrder === 'desc') { - column.sortOrder = 'asc'; - } else { - column.sortOrder = 'desc'; - } - - $rootScope.$broadcast('lx-data-table__sorted', lx.dataTableId, column); - } - - /** - * Select or unselect all rows. - */ - function toggleAllSelected() { - if (!lx.hasBulk) { - return; - } - - if (lx.allRowsSelected) { - _unselectAll(); - } else { - _selectAll(); - } - } - - /** - * Toggle a geiven row selection. - * - * @param {Object} row The row to select/unselect. - * @param {Object} newStatus The new status to apply. - */ - function toggleSelection(row, newStatus) { - if (row.lxDataTableDisabled || !lx.isClickable) { - return; - } - - row.lxDataTableSelected = angular.isDefined(newStatus) ? newStatus : !row.lxDataTableSelected; - - if (row.lxDataTableSelected) { - if (lx.selectedRows.length === 0 || (lx.selectedRows.length > 0 && lx.selectedRows.indexOf(row) === -1)) { - lx.selectedRows.push(row); - _setAllRowsSelected(); - - $rootScope.$broadcast('lx-data-table__selected', lx.dataTableId, lx.selectedRows, row); - } - } else if (lx.selectedRows.length > 0 && lx.selectedRows.indexOf(row) > -1) { - lx.selectedRows.splice(lx.selectedRows.indexOf(row), 1); - lx.allRowsSelected = false; - - $rootScope.$broadcast('lx-data-table__unselected', lx.dataTableId, lx.selectedRows, row); - } - } - - ///////////////////////////// - - lx.sort = sort; - lx.toggleAllSelected = toggleAllSelected; - lx.toggleSelection = toggleSelection; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Select a given row. - * - * @param {Event} evt The select event. - * @param {string} dataTableId The data table identifier. - * @param {Object} row The row to select. - */ - $scope.$on('lx-data-table__select', (evt, dataTableId, row) => { - if (dataTableId === lx.dataTableId && angular.isDefined(row)) { - _select(angular.isArray(row) && row.length > 0 ? row[0] : row); - } - }); - - /** - * Select all rows. - * - * @param {Event} evt The select event. - * @param {string} dataTableId The data table identifier. - */ - $scope.$on('lx-data-table__select-all', (evt, dataTableId) => { - if (dataTableId === lx.dataTableId) { - _selectAll(); - } - }); - - /** - * Unselect a given row. - * - * @param {Event} evt The select event. - * @param {string} dataTableId The data table identifier. - * @param {Object} row The row to unselect. - */ - $scope.$on('lx-data-table__unselect', (evt, dataTableId, row) => { - if (dataTableId === lx.dataTableId && angular.isDefined(row)) { - _unselect(angular.isArray(row) && row.length > 0 ? row[0] : row); - } - }); - - /** - * Unselect all rows. - * - * @param {Event} evt The select event. - * @param {string} dataTableId The data table identifier. - */ - $scope.$on('lx-data-table__unselect-all', (evt, dataTableId) => { - if (dataTableId === lx.dataTableId) { - _unselectAll(); - } - }); -} - -///////////////////////////// - -function DataTableDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - attrs.$observe('id', (dataTableId) => { - ctrl.dataTableId = dataTableId; - }); - } - - return { - bindToController: true, - controller: DataTableController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - hasBulk: '=?lxHasBulk', - hasDividers: '=?lxHasDividers', - isClickable: '=?lxIsClickable', - tbody: '=lxTbody', - thead: '=lxThead', - theme: '@?lxTheme', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.data-table').directive('lxDataTable', DataTableDirective); - -///////////////////////////// - -export { DataTableDirective }; diff --git a/packages/lumx-angularjs/src/components/data-table/data-table_service.js b/packages/lumx-angularjs/src/components/data-table/data-table_service.js deleted file mode 100644 index 9f1c48ea2..000000000 --- a/packages/lumx-angularjs/src/components/data-table/data-table_service.js +++ /dev/null @@ -1,64 +0,0 @@ -function LxDataTableService($rootScope) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Select a given row. - * - * @param {string} dataTableId The data table identifier. - * @param {Object} row The row to select. - */ - function select(dataTableId, row) { - $rootScope.$broadcast('lx-data-table__select', dataTableId, row); - } - - /** - * Select all rows. - * - * @param {string} dataTableId The data table identifier. - */ - function selectAll(dataTableId) { - $rootScope.$broadcast('lx-data-table__select-all', dataTableId); - } - - /** - * Unselect a given row. - * - * @param {string} dataTableId The data table identifier. - * @param {Object} row The row to unselect. - */ - function unselect(dataTableId, row) { - $rootScope.$broadcast('lx-data-table__unselect', dataTableId, row); - } - - /** - * Unselect all rows. - * - * @param {string} dataTableId The data table identifier. - */ - function unselectAll(dataTableId) { - $rootScope.$broadcast('lx-data-table__unselect-all', dataTableId); - } - - ///////////////////////////// - - service.select = select; - service.selectAll = selectAll; - service.unselect = unselect; - service.unselectAll = unselectAll; -} - -///////////////////////////// - -angular.module('lumx.data-table').service('LxDataTableService', LxDataTableService); - -///////////////////////////// - -export { LxDataTableService }; diff --git a/packages/lumx-angularjs/src/components/dialog/dialog-close_directive.js b/packages/lumx-angularjs/src/components/dialog/dialog-close_directive.js deleted file mode 100644 index 4f37ef93e..000000000 --- a/packages/lumx-angularjs/src/components/dialog/dialog-close_directive.js +++ /dev/null @@ -1,30 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function DialogCloseDirective(LxDialogService) { - 'ngInject'; - - function link(scope, el) { - el.on('click', () => { - LxDialogService.close(el.parents(`.${CSS_PREFIX}-dialog`).attr('id')); - }); - - scope.$on('$destroy', () => { - el.off(); - }); - } - - return { - link, - restrict: 'A', - }; -} - -///////////////////////////// - -angular.module('lumx.dialog').directive('lxDialogClose', DialogCloseDirective); - -///////////////////////////// - -export { DialogCloseDirective }; diff --git a/packages/lumx-angularjs/src/components/dialog/dialog.html b/packages/lumx-angularjs/src/components/dialog/dialog.html deleted file mode 100644 index 44ee723b4..000000000 --- a/packages/lumx-angularjs/src/components/dialog/dialog.html +++ /dev/null @@ -1,31 +0,0 @@ -
-
- - -
diff --git a/packages/lumx-angularjs/src/components/dialog/dialog_directive.js b/packages/lumx-angularjs/src/components/dialog/dialog_directive.js deleted file mode 100644 index f2ed258fa..000000000 --- a/packages/lumx-angularjs/src/components/dialog/dialog_directive.js +++ /dev/null @@ -1,393 +0,0 @@ -import { CSS_PREFIX, DIALOG_TRANSITION_DURATION, ESCAPE_KEY_CODE } from '@lumx/core/js/constants'; - -import template from './dialog.html'; - -///////////////////////////// - -function DialogController( - $element, - $rootScope, - $scope, - $timeout, - LxDepthService, - LxEventSchedulerService, - LxFocusTrapService, -) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - size: 'big', - }; - - /** - * The dialog. - * - * @type {Element} - */ - const _dialog = $element; - - /** - * The event scheduler id. - * - * @type {string} - */ - let _idEventScheduler; - - /** - * Whether the dialog is an alert dialog or not. - * - * @type {boolean} - */ - let _isAlertDialog = false; - - /** - * Whether the dialog is a confirm dialog or not. - * - * @type {boolean} - */ - let _isConfirmDialog = false; - - /** - * Whether the sentinels are intersecting with dialog content or not. - * - * @type {Object} - */ - const _isIntersecting = { top: false, bottom: false }; - - /** - * The dialog parent element. - * - * @type {Element} - */ - const _parentElement = _dialog.parent(); - - /** - * The source element. - * - * @type {element} - */ - let _sourceEl; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The dialog identifier. - * - * @type {string} - */ - lx.id = undefined; - - /** - * Whether the dialog is open or not. - * - * @type {boolean} - */ - lx.isOpen = false; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Close the current dialog. - * - * @param {boolean} canceled Indicates if the dialog was closed via a cancel or not. - * @param {Object} params An optional object that holds extra parameters. - */ - function _close(canceled, params) { - if (!lx.isOpen) { - return; - } - - if (angular.isDefined(_idEventScheduler)) { - LxEventSchedulerService.unregister(_idEventScheduler); - _idEventScheduler = undefined; - } - - $rootScope.$broadcast('lx-dialog__close-start', lx.id, canceled, params); - - _dialog.addClass(`${CSS_PREFIX}-dialog--is-hidden`); - - if (angular.isDefined(_sourceEl)) { - _sourceEl.focus(); - } - - $timeout(() => { - if (_isAlertDialog || _isConfirmDialog) { - _dialog.remove(); - } else { - _dialog - .removeClass(`${CSS_PREFIX}-dialog--is-shown`) - .removeClass(`${CSS_PREFIX}-dialog--is-hidden`) - .appendTo(_parentElement); - } - - lx.isOpen = false; - LxFocusTrapService.disable(); - - $rootScope.$broadcast('lx-dialog__close-end', lx.id, canceled, params); - }, DIALOG_TRANSITION_DURATION); - } - - /** - * Create dialog content observer. - */ - function _createObserver() { - const dialogHeader = _dialog.find(`.${CSS_PREFIX}-dialog__header`); - const dialogFooter = _dialog.find(`.${CSS_PREFIX}-dialog__footer`); - const sentinels = document.querySelectorAll(`.${CSS_PREFIX}-dialog__sentinel`); - - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.target.classList.contains(`${CSS_PREFIX}-dialog__sentinel--top`)) { - if (entry.isIntersecting) { - _isIntersecting.top = false; - - if (!lx.forceHeaderDivider) { - dialogHeader.removeClass(`${CSS_PREFIX}-dialog__header--has-divider`); - } - } else { - _isIntersecting.top = true; - - if (!lx.forceHeaderDivider) { - dialogHeader.addClass(`${CSS_PREFIX}-dialog__header--has-divider`); - } - } - } - - if (entry.target.classList.contains(`${CSS_PREFIX}-dialog__sentinel--bottom`)) { - if (entry.isIntersecting) { - _isIntersecting.bottom = false; - - if (!lx.forceFooterDivider) { - dialogFooter.removeClass(`${CSS_PREFIX}-dialog__footer--has-divider`); - } - - $rootScope.$broadcast('lx-dialog__scroll-end', lx.id); - } else { - _isIntersecting.bottom = true; - - if (!lx.forceFooterDivider) { - dialogFooter.addClass(`${CSS_PREFIX}-dialog__footer--has-divider`); - } - } - } - }); - }); - - sentinels.forEach((sentinel) => { - observer.observe(sentinel); - }); - } - - /** - * Close dialog on escape key down. - * - * @param {Event} evt The key down event. - */ - function _onKeyDown(evt) { - if (evt.keyCode === ESCAPE_KEY_CODE) { - _close(); - } - - evt.stopPropagation(); - } - - /** - * Open the current dialog. - * - * @param {Object} params An optional object that holds extra parameters. - */ - function _open(params) { - if (lx.isOpen) { - return; - } - - if (angular.isUndefined(lx.escapeClose) || lx.escapeClose) { - _idEventScheduler = LxEventSchedulerService.register('keydown', _onKeyDown); - } - - LxDepthService.increase(); - - _dialog - .css('z-index', LxDepthService.get()) - .appendTo('body') - .addClass(`${CSS_PREFIX}-dialog--is-shown`); - - $timeout(() => { - $rootScope.$broadcast('lx-dialog__open-start', lx.id, params); - - lx.isOpen = true; - LxFocusTrapService.activate(_dialog); - - $timeout(_createObserver); - }); - - $timeout(() => { - $rootScope.$broadcast('lx-dialog__open-end', lx.id, params); - }, DIALOG_TRANSITION_DURATION); - } - - /** - * Register the source element that triggered the dialog. - * - * @param {element} sourceEl The source element that triggered the dialog. - */ - function _registerSource(sourceEl) { - _sourceEl = sourceEl; - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get dialog classes. - * - * @return {Array} The list of dialog classes. - */ - function getClasses() { - const classes = []; - - const size = lx.size ? lx.size : _DEFAULT_PROPS.size; - - classes.push(`${CSS_PREFIX}-dialog--size-${size}`); - - if (lx.isLoading) { - classes.push(`${CSS_PREFIX}-dialog--is-loading`); - } - - return classes; - } - - /** - * Close dialog on overlay click. - */ - function onOverlayClick() { - if (angular.isUndefined(lx.autoClose) || lx.autoClose) { - _close(); - } - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.onOverlayClick = onOverlayClick; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Open a given dialog. - * - * @param {Event} evt The dialog open event. - * @param {string} dialogId The dialog identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - $scope.$on('lx-dialog__open', (evt, dialogId, params) => { - if (dialogId === lx.id) { - _open(params); - - if (angular.isDefined(params) && angular.isDefined(params.isAlertDialog) && params.isAlertDialog) { - _isAlertDialog = true; - } - - if (angular.isDefined(params) && angular.isDefined(params.isConfirmDialog) && params.isConfirmDialog) { - _isConfirmDialog = true; - } - - if (angular.isDefined(params) && angular.isDefined(params.source) && params.source) { - _registerSource(angular.element(params.source)); - } - } - }); - - /** - * Close a given dialog. - * - * @param {Event} evt The dialog open event. - * @param {string} dialogId The dialog identifier. - * @param {boolean} canceled Indicates if the dialog was closed via a cancel or not. - * @param {Object} params An optional object that holds extra parameters. - */ - $scope.$on('lx-dialog__close', (evt, dialogId, canceled, params) => { - if (dialogId === lx.id || dialogId === undefined) { - _close(canceled, params); - } - }); - - /** - * Close the current dialog on destroy. - */ - $scope.$on('$destroy', _close); -} - -///////////////////////////// - -function DialogDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - attrs.$observe('id', (newId) => { - ctrl.id = newId; - }); - } - - return { - bindToController: true, - controller: DialogController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - autoClose: '=?lxAutoClose', - escapeClose: '=?lxEscapeClose', - forceFooterDivider: '=?lxForceFooterDivider', - forceHeaderDivider: '=?lxForceHeaderDivider', - isLoading: '=?lxIsLoading', - size: '@?lxSize', - }, - template, - transclude: { - content: 'lxDialogContent', - footer: '?lxDialogFooter', - header: '?lxDialogHeader', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.dialog').directive('lxDialog', DialogDirective); - -///////////////////////////// - -export { DialogDirective }; diff --git a/packages/lumx-angularjs/src/components/dialog/dialog_service.js b/packages/lumx-angularjs/src/components/dialog/dialog_service.js deleted file mode 100644 index 5fa5fa0e0..000000000 --- a/packages/lumx-angularjs/src/components/dialog/dialog_service.js +++ /dev/null @@ -1,142 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function DialogService($compile, $rootScope, $timeout, LxUtilsService) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Build an alert dialog. - * - * @param {Object} params An object that holds title, text, button label, callback and source parameters. - */ - function alertDialog(params) { - const alertDialogId = LxUtilsService.generateUUID(); - const alertDialogScope = $rootScope.$new(true); - - alertDialogScope.cb = params.cb; - - const compiledAlertDialog = $compile( - ` - - - - ${params.title} - - - - -
-

${params.text}

-
- - - - - - ${params.buttons.ok} - - - - - `, - )(alertDialogScope); - - angular.element('body').append(compiledAlertDialog); - - $timeout(function waitBeforeOpeningAlertDialog() { - service.open(alertDialogId, { isAlertDialog: true, source: params.source }); - }); - } - - /** - * Close a given dialog. - * - * @param {string} dialogId The dialog identifier. - * @param {boolean} canceled Indicates if the dialog was closed via a cancel or not. - * @param {Object} params An optional object that holds extra parameters. - */ - function closeDialog(dialogId, canceled, params) { - $rootScope.$broadcast('lx-dialog__close', dialogId, canceled, params); - } - - /** - * Build a confirm dialog. - * - * @param {Object} params An object that holds title, text, button labels, callback and source parameters. - */ - function confirmDialog(params) { - const confirmDialogId = LxUtilsService.generateUUID(); - const confirmDialogScope = $rootScope.$new(true); - - confirmDialogScope.cb = params.cb; - - const compiledConfirmDialog = $compile( - ` - - - - ${params.title} - - - - -
-

${params.text}

-
- - - - - - ${params.buttons.cancel} - - - ${params.buttons.ok} - - - - - `, - )(confirmDialogScope); - - angular.element('body').append(compiledConfirmDialog); - - $timeout(function waitBeforeOpeningAlertDialog() { - service.open(confirmDialogId, { isConfirmDialog: true, source: params.source }); - }); - } - - /** - * Open a given dialog. - * - * @param {string} dialogId The dialog identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - function openDialog(dialogId, params) { - $rootScope.$broadcast('lx-dialog__open', dialogId, params); - } - - ///////////////////////////// - - service.alert = alertDialog; - service.close = closeDialog; - service.confirm = confirmDialog; - service.open = openDialog; -} - -///////////////////////////// - -angular.module('lumx.dialog').service('LxDialogService', DialogService); - -///////////////////////////// - -export { DialogService }; diff --git a/packages/lumx-angularjs/src/components/divider/divider.html b/packages/lumx-angularjs/src/components/divider/divider.html deleted file mode 100644 index fe03d3796..000000000 --- a/packages/lumx-angularjs/src/components/divider/divider.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/packages/lumx-angularjs/src/components/divider/divider_directive.js b/packages/lumx-angularjs/src/components/divider/divider_directive.js deleted file mode 100644 index 10621a7b6..000000000 --- a/packages/lumx-angularjs/src/components/divider/divider_directive.js +++ /dev/null @@ -1,79 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './divider.html'; - -///////////////////////////// - -function DividerController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get divider classes. - * - * @return {Array} The list of divider classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - classes.push(`${CSS_PREFIX}-divider--theme-${theme}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function DividerDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: DividerController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - theme: '@?lxTheme', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.divider').directive('lxDivider', DividerDirective); - -///////////////////////////// - -export { DividerDirective }; diff --git a/packages/lumx-angularjs/src/components/drag-handle/drag-handle.html b/packages/lumx-angularjs/src/components/drag-handle/drag-handle.html deleted file mode 100644 index f1b7a2b5d..000000000 --- a/packages/lumx-angularjs/src/components/drag-handle/drag-handle.html +++ /dev/null @@ -1,7 +0,0 @@ -
- -
diff --git a/packages/lumx-angularjs/src/components/drag-handle/drag-handle_directive.js b/packages/lumx-angularjs/src/components/drag-handle/drag-handle_directive.js deleted file mode 100644 index 4c6e88cf4..000000000 --- a/packages/lumx-angularjs/src/components/drag-handle/drag-handle_directive.js +++ /dev/null @@ -1,53 +0,0 @@ -import { mdiDragVertical } from '@lumx/icons'; - -import template from './drag-handle.html'; - -///////////////////////////// - -function DragHandleController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The expansion panel icons. - * - * @type {Object} - */ - lx.icons = { - mdiDragVertical, - }; -} - -///////////////////////////// - -function DragHandleDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: DragHandleController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - theme: '@?lxTheme', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.drag-handle').directive('lxDragHandle', DragHandleDirective); - -///////////////////////////// - -export { DragHandleDirective }; diff --git a/packages/lumx-angularjs/src/components/dropdown/dropdown.html b/packages/lumx-angularjs/src/components/dropdown/dropdown.html deleted file mode 100644 index ed08d881b..000000000 --- a/packages/lumx-angularjs/src/components/dropdown/dropdown.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
- -
-
-
-
diff --git a/packages/lumx-angularjs/src/components/dropdown/dropdown_directive.js b/packages/lumx-angularjs/src/components/dropdown/dropdown_directive.js deleted file mode 100644 index 302f08dc5..000000000 --- a/packages/lumx-angularjs/src/components/dropdown/dropdown_directive.js +++ /dev/null @@ -1,505 +0,0 @@ -import { CSS_PREFIX, ENTER_KEY_CODE, ESCAPE_KEY_CODE } from '@lumx/core/js/constants'; - -import template from './dropdown.html'; - -///////////////////////////// - -function DropdownController( - $document, - $rootScope, - $scope, - $timeout, - $window, - LxDepthService, - LxDropdownService, - LxEventSchedulerService, - LxUtilsService, -) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * Offset from the edge of the view port if dropdown is higher. - * - * @type {number} - * @constant - * @readonly - */ - const _OFFSET_FROM_EDGE = 16; - - /** - * Minimum space below trigger button. - * - * @type {number} - * @constant - * @readonly - */ - const _MIN_SPACE_BELOW = 150; - - /** - * The event scheduler id. - * - * @type {string} - */ - // eslint-disable-next-line one-var - let _idEventScheduler; - - /** - * The menu element. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _menuEl; - - /** - * The source element. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _sourceEl; - - /** - * The toggle element. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _toggleEl; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the dropdown is open or not. - * - * @type {boolean} - */ - lx.isOpen = false; - - /** - * The dropdown uuid. - * - * @type {string} - */ - lx.uuid = LxUtilsService.generateUUID(); - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Close dropdown on document click/keydown. - * - * @param {Event} evt The click/keydown event. - */ - function _onDocumentEvent(evt) { - if ( - (angular.isDefined(lx.escapeClose) && !lx.escapeClose) || - (angular.isDefined(evt.keyCode) && evt.keyCode !== ESCAPE_KEY_CODE && evt.keyCode !== ENTER_KEY_CODE) - ) { - return; - } - - evt.stopPropagation(); - - const isDocumentKeyDown = angular.isDefined(evt.keyCode); - - LxDropdownService.closeLastDropdown(false, isDocumentKeyDown); - } - - /** - * Stop event propagation on menu click. - * - * @param {Event} evt The click event. - */ - function _stopMenuPropagation(evt) { - if (evt.keyCode === ESCAPE_KEY_CODE) { - return; - } - - evt.stopPropagation(); - } - - /** - * Check if user has scrolled to the end of the dropdown. - */ - function _checkScrollEnd() { - if (_menuEl.scrollTop() + _menuEl.innerHeight() >= _menuEl[0].scrollHeight) { - $rootScope.$broadcast('lx-dropdown__scroll-end', lx.uuid); - } - } - - /** - * Close dropdown. - */ - function _close() { - lx.isOpen = false; - - LxDropdownService.unregisterDropdownId(lx.uuid); - - $timeout(() => { - _menuEl - .removeAttr('style') - .hide() - .off('scroll', _checkScrollEnd) - .insertAfter(_toggleEl); - - if (angular.isDefined(lx.closeOnClick) && !lx.closeOnClick) { - _menuEl.off('click keydown', _stopMenuPropagation); - } - - LxEventSchedulerService.unregister(_idEventScheduler); - _idEventScheduler = undefined; - }); - } - - /** - * Get available height. - * - * @return {Object} Available height on top / bottom. - */ - function _getAvailableHeight() { - const availaibleHeight = {}; - const toggleProps = { - height: _toggleEl.outerHeight(), - top: _toggleEl.offset().top - angular.element($window).scrollTop(), - }; - const windowProps = { - height: $window.innerHeight, - }; - - if (lx.overToggle) { - availaibleHeight.above = toggleProps.top; - availaibleHeight.below = windowProps.height - toggleProps.top; - } else { - availaibleHeight.above = toggleProps.top; - availaibleHeight.below = windowProps.height - (toggleProps.top + toggleProps.height); - } - - return availaibleHeight; - } - - /** - * Initialize horizontal position. - */ - function _initHorizontalPosition() { - const menuProps = {}; - const toggleProps = { - height: _toggleEl.outerHeight(), - left: _toggleEl.offset().left, - width: _toggleEl.outerWidth(), - }; - const windowProps = { - height: $window.innerHeight, - width: $window.innerWidth, - }; - - if (angular.isDefined(lx.width)) { - if (lx.width.indexOf('%') > -1) { - // eslint-disable-next-line no-magic-numbers - menuProps.width = toggleProps.width * (lx.width.slice(0, -1) / 100); - } else { - menuProps.width = lx.width; - } - } else { - menuProps.width = 'auto'; - } - - if (!lx.position || lx.position === 'left') { - menuProps.left = toggleProps.left; - menuProps.right = 'auto'; - } else if (lx.position === 'right') { - menuProps.left = 'auto'; - menuProps.right = windowProps.width - toggleProps.width - toggleProps.left; - } - - _menuEl.css({ - left: menuProps.left, - right: menuProps.right, - width: menuProps.width, - }); - } - - /** - * Initialize vertical position. - */ - function _initVerticalPosition() { - const availaibleHeight = _getAvailableHeight(); - const menuProps = {}; - const windowProps = { - height: $window.innerHeight, - }; - - if (availaibleHeight.below >= _MIN_SPACE_BELOW) { - menuProps.bottom = 'auto'; - - if (lx.overToggle) { - menuProps.top = availaibleHeight.above; - menuProps.maxHeight = availaibleHeight.below; - } else { - // eslint-disable-next-line no-bitwise - menuProps.top = availaibleHeight.above + _toggleEl.outerHeight() + ~~lx.offset; - menuProps.maxHeight = availaibleHeight.below; - } - } else if (availaibleHeight.below < _MIN_SPACE_BELOW) { - menuProps.top = 'auto'; - - if (lx.overToggle) { - menuProps.bottom = windowProps.height - availaibleHeight.above - _toggleEl.outerHeight(); - menuProps.maxHeight = availaibleHeight.above + _toggleEl.outerHeight(); - } else { - // eslint-disable-next-line no-bitwise - menuProps.bottom = windowProps.height - availaibleHeight.above + ~~lx.offset; - menuProps.maxHeight = availaibleHeight.above; - } - } - - // eslint-disable-next-line no-bitwise - menuProps.maxHeight -= _OFFSET_FROM_EDGE + ~~lx.offset; - - _menuEl.css(menuProps); - } - - /** - * Open dropdown. - */ - function _open() { - LxDropdownService.closeLastDropdown(true); - LxDropdownService.registerDropdownId(lx.uuid); - - LxDepthService.increase(); - - _menuEl - .appendTo('body') - .show() - .css({ position: 'fixed', zIndex: LxDepthService.get() }); - - $timeout(() => { - _initHorizontalPosition(); - _initVerticalPosition(); - - lx.isOpen = true; - - _menuEl.on('scroll', _checkScrollEnd); - - if (angular.isDefined(lx.closeOnClick) && !lx.closeOnClick) { - _menuEl.on('click keydown', _stopMenuPropagation); - } - - _idEventScheduler = LxEventSchedulerService.register('click keydown', _onDocumentEvent); - }); - } - - /** - * Register the source element that triggered the dropdown. - * - * @param {element} sourceEl The source element that triggered the dropdown. - */ - function _registerSource(sourceEl) { - _sourceEl = sourceEl; - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Register menu. - * - * @param {element} menuEl The menu element. - */ - function registerMenu(menuEl) { - _menuEl = menuEl; - _menuEl.hide(); - } - - /** - * Register toggle. - * - * @param {element} toggleEl The toggle element. - */ - function registerToggle(toggleEl) { - _toggleEl = toggleEl; - } - - /** - * Toggle the dropdown on toggle click. - * - * @param {Event} evt The click event. - */ - function toggle(evt) { - if (angular.isDefined(evt.target)) { - _registerSource(angular.element(evt.target)); - } - - if (lx.isOpen) { - LxDropdownService.close(lx.uuid); - } else { - _open(); - } - } - - ///////////////////////////// - - lx.registerMenu = registerMenu; - lx.registerToggle = registerToggle; - lx.toggle = toggle; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Open a given dropdown. - * - * @param {Event} evt The dropdown open event. - * @param {string} dropdownId The dropdown identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - $scope.$on('lx-dropdown__open', (evt, dropdownId, params) => { - if (dropdownId === lx.uuid && !lx.isOpen) { - let toggleEl; - - if (angular.isElement(params)) { - toggleEl = params; - } else if (angular.isString(params)) { - toggleEl = angular.element(params); - } else if (angular.isObject(params)) { - toggleEl = angular.element(params.target); - } - - registerToggle(toggleEl); - - if (angular.isObject(params) && angular.isDefined(params.source)) { - _registerSource(angular.element(params.source)); - } else { - _registerSource(toggleEl); - } - - _open(); - } - }); - - /** - * Close a given dropdown. - * - * @param {Event} evt The dropdown open event. - * @param {Object} dropdownId The dropdown identifier. - * @param {boolean} onOpen Whether the order has been asked on dropdown open or not. - * @param {boolean} isDocumentKeyDown Whether the order has been asked on document key down or not. - */ - $scope.$on('lx-dropdown__close', (evt, dropdownId, onOpen, isDocumentKeyDown) => { - if (dropdownId === lx.uuid && lx.isOpen) { - if (onOpen && angular.isDefined(lx.closeOnClick) && !lx.closeOnClick) { - return; - } - - _close(); - - if (isDocumentKeyDown && angular.isDefined(_sourceEl)) { - _sourceEl.focus(); - } - } - }); - - /** - * Update the active dropdown position. - */ - $scope.$on('lx-dropdown__update', () => { - if (LxDropdownService.isOpen(lx.uuid)) { - _initHorizontalPosition(); - _initVerticalPosition(); - } - }); - - /** - * Close on destroy. - */ - $scope.$on('$destroy', () => { - if (!lx.isOpen) { - return; - } - - _close(); - }); -} - -///////////////////////////// - -function DropdownDirective($timeout) { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - const toggleEl = el.find(`.${CSS_PREFIX}-dropdown__toggle`); - ctrl.registerToggle(toggleEl); - - const menuEl = el.find(`.${CSS_PREFIX}-dropdown__menu`); - ctrl.registerMenu(menuEl); - - if (transclude.isSlotFilled('toggle')) { - el.addClass(`${CSS_PREFIX}-dropdown--has-toggle`); - } - - if (toggleEl.length > 0) { - $timeout(() => { - toggleEl.find('button, a').on('click', (evt) => { - ctrl.toggle(evt); - scope.$apply(); - }); - }); - } - - attrs.$observe('id', (id) => { - ctrl.uuid = id; - }); - } - - return { - bindToController: true, - controller: DropdownController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - closeOnClick: '=?lxCloseOnClick', - escapeClose: '=?lxEscapeClose', - offset: '@?lxOffset', - overToggle: '=?lxOverToggle', - position: '@?lxPosition', - width: '@?lxWidth', - }, - template, - transclude: { - menu: 'lxDropdownMenu', - toggle: '?lxDropdownToggle', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.dropdown').directive('lxDropdown', DropdownDirective); - -///////////////////////////// - -export { DropdownDirective }; diff --git a/packages/lumx-angularjs/src/components/dropdown/dropdown_service.js b/packages/lumx-angularjs/src/components/dropdown/dropdown_service.js deleted file mode 100644 index 63732b2a5..000000000 --- a/packages/lumx-angularjs/src/components/dropdown/dropdown_service.js +++ /dev/null @@ -1,132 +0,0 @@ -function DropdownService($rootScope) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The active dropdown identifier. - * - * @type {string} - */ - const _activeDropdownIds = []; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Close a given dropdown. - * - * @param {string} dropdownId The dropdown identifier. - * @param {boolean} onOpen Whether the order has been asked on dropdown open or not. - * @param {boolean} isDocumentKeyDown Whether the order has been asked on document key down or not. - */ - function closeDropdown(dropdownId, onOpen, isDocumentKeyDown) { - $rootScope.$broadcast('lx-dropdown__close', dropdownId, onOpen, isDocumentKeyDown); - } - - /** - * Close the last opened dropdown. - * - * @param {boolean} onOpen Whether the order has been asked on dropdown open or not. - * @param {boolean} isDocumentKeyDown Whether the order has been asked on document key down or not. - */ - function closeLastDropdown(onOpen, isDocumentKeyDown) { - if (_activeDropdownIds.length > 0) { - closeDropdown(_activeDropdownIds[_activeDropdownIds.length - 1], onOpen, isDocumentKeyDown); - } - } - - /** - * Get last dropdown id. - * - * @return {string} The last dropdown id. - */ - function getLastDropdownId() { - return _activeDropdownIds[_activeDropdownIds.length - 1]; - } - - /** - * Check if a given dropdown is open. - * - * @param {string} dropdownId The dropdown identifier. - * @return {boolean} Whether the given dropdown is open or not. - */ - function isOpen(dropdownId) { - return _activeDropdownIds.includes(dropdownId); - } - - /** - * Open a given dropdown. - * - * @param {string} dropdownId The dropdown identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - function openDropdown(dropdownId, params) { - $rootScope.$broadcast('lx-dropdown__open', dropdownId, params); - } - - /** - * Register the given dropdown identifier. - * - * @param {string} dropdownId The dropdown identifier. - */ - function registerDropdownId(dropdownId) { - _activeDropdownIds.push(dropdownId); - } - - /** - * Unegister the given dropdown identifier. - * - * @param {string} dropdownId The dropdown identifier. - */ - function unregisterDropdownId(dropdownId) { - _activeDropdownIds.splice(_activeDropdownIds.indexOf(dropdownId), 1); - } - - /** - * Update the active dropdown position. - */ - function updateActiveDropdownPosition() { - $rootScope.$broadcast('lx-dropdown__update'); - } - - ///////////////////////////// - - service.close = closeDropdown; - service.closeLastDropdown = closeLastDropdown; - service.getLastDropdownId = getLastDropdownId; - service.isOpen = isOpen; - service.open = openDropdown; - service.registerDropdownId = registerDropdownId; - service.unregisterDropdownId = unregisterDropdownId; - service.updateActiveDropdownPosition = updateActiveDropdownPosition; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Update the active dropdown position on scroll. - */ - window.addEventListener('scroll', service.updateActiveDropdownPosition, true); - window.addEventListener('resize', service.updateActiveDropdownPosition, true); -} - -///////////////////////////// - -angular.module('lumx.dropdown').service('LxDropdownService', DropdownService); - -///////////////////////////// - -export { DropdownService }; diff --git a/packages/lumx-angularjs/src/components/expansion-panel/expansion-panel.html b/packages/lumx-angularjs/src/components/expansion-panel/expansion-panel.html deleted file mode 100644 index 92f64dbee..000000000 --- a/packages/lumx-angularjs/src/components/expansion-panel/expansion-panel.html +++ /dev/null @@ -1,29 +0,0 @@ -
-
-
- -
- {{ lx.label }} -
- -
- -
- - - -
-
- -
-
-
-
-
-
-
diff --git a/packages/lumx-angularjs/src/components/expansion-panel/expansion-panel_directive.js b/packages/lumx-angularjs/src/components/expansion-panel/expansion-panel_directive.js deleted file mode 100644 index 4117b654e..000000000 --- a/packages/lumx-angularjs/src/components/expansion-panel/expansion-panel_directive.js +++ /dev/null @@ -1,295 +0,0 @@ -import { mdiChevronDown, mdiChevronUp, mdiDragVertical } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './expansion-panel.html'; - -///////////////////////////// - -function ExpansionPanelController($element, $scope, $timeout) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - /** - * The expansion panel toggle transition duration. - * - * @type {number} - * @constant - * @readonly - */ - const _TRANSITION_DURATION = 400; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has footer slot filled or not. - * - * @type {boolean} - */ - lx.hasFooter = false; - - /** - * Whether the directive has header slot filled or not. - * - * @type {boolean} - */ - lx.hasHeader = false; - - /** - * The expansion panel icons. - * - * @type {Object} - */ - lx.icons = { - mdiChevronDown, - mdiChevronUp, - mdiDragVertical, - }; - - /** - * Whether the directive has drag handle slot filled or not. - * - * @type {boolean} - */ - lx.isDraggable = false; - - /** - * Whether the expansion panel wrapper is displayed or not. - * - * @type {boolean} - */ - lx.isWrapperDisplayed = lx.isOpen; - - /** - * Whether the expansion panel wrapper is open or not. - * - * @type {boolean} - */ - lx.isWrapperOpen = lx.isOpen; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Set the expansion panel wrapper max height. - */ - function _setWrapperMaxHeight() { - const expansionPanelWrapper = $element.find(`.${CSS_PREFIX}-expansion-panel__wrapper`); - const expansionPanelContainer = $element.find(`.${CSS_PREFIX}-expansion-panel__container`); - - expansionPanelWrapper.css('max-height', expansionPanelContainer.outerHeight()); - } - - /** - * Close the expansion panel wrapper. - */ - function _close() { - lx.isWrapperOpen = false; - - $timeout(() => { - lx.isWrapperDisplayed = false; - - if (angular.isFunction(lx.toggleCallback)) { - lx.toggleCallback(); - } - - if (angular.isFunction(lx.closeCallback)) { - lx.closeCallback(); - } - }, _TRANSITION_DURATION); - } - - /** - * Open the expansion panel wrapper. - */ - function _open() { - lx.isWrapperDisplayed = true; - lx.isWrapperOpen = false; - - $timeout(() => { - _setWrapperMaxHeight(); - - lx.isWrapperOpen = true; - - if (angular.isFunction(lx.toggleCallback)) { - lx.toggleCallback(); - } - - if (angular.isFunction(lx.openCallback)) { - lx.openCallback(); - } - }); - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get expansion panel classes. - * - * @return {Array} The list of expansion panel classes. - */ - function getClasses() { - const classes = []; - - const state = lx.isWrapperOpen ? 'open' : 'close'; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-expansion-panel--is-${state}`); - classes.push(`${CSS_PREFIX}-expansion-panel--theme-${theme}`); - - if (lx.hasBackground) { - classes.push(`${CSS_PREFIX}-expansion-panel--has-background`); - } - - if (lx.hasHeader) { - classes.push(`${CSS_PREFIX}-expansion-panel--has-header`); - } - - if (lx.hasHeaderDivider) { - classes.push(`${CSS_PREFIX}-expansion-panel--has-header-divider`); - } - - if (lx.isDraggable) { - classes.push(`${CSS_PREFIX}-expansion-panel--is-draggable`); - } - - return classes; - } - - /** - * Initialize the expansion panel wrapper max height. - */ - function initWrapperMaxHeight() { - if (!lx.isOpen) { - return; - } - - $timeout(_setWrapperMaxHeight); - } - - /** - * Toggle the expansion panel wrapper animation. - * - * @param {Event} [evt] The click event. - */ - function toggle(evt) { - if (angular.isDefined(evt)) { - evt.stopPropagation(); - } - - lx.isOpen = !lx.isOpen; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.initWrapperMaxHeight = initWrapperMaxHeight; - lx.toggle = toggle; - - ///////////////////////////// - // // - // Watchers // - // // - ///////////////////////////// - - /** - * Watch for any changes of the expansion panel state to toggle the expansion panel wrapper animation. - * - * @param {boolean} isOpen Whether the expansion panel is open or not. - */ - $scope.$watch('lx.isOpen', function isOpenWatcher(isOpen, wasOpen) { - if (isOpen !== wasOpen) { - if (isOpen) { - _open(); - } else { - _close(); - } - } - }); -} - -///////////////////////////// - -function ExpansionPanelDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - ctrl.initWrapperMaxHeight(); - - if (transclude.isSlotFilled('dragHandle')) { - ctrl.isDraggable = true; - } - - if (transclude.isSlotFilled('header')) { - ctrl.hasHeader = true; - } - - if (transclude.isSlotFilled('footer')) { - ctrl.hasFooter = true; - } - } - - return { - bindToController: true, - controller: ExpansionPanelController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - closeCallback: '&?lxCloseCallback', - hasBackground: '=?lxHasBackground', - hasHeaderDivider: '=?lxHasHeaderDivider', - isOpen: '=?lxIsOpen', - label: '@?lxLabel', - openCallback: '&?lxOpenCallback', - theme: '@?lxTheme', - toggleCallback: '&?lxToggleCallback', - }, - template, - transclude: { - content: 'lxExpansionPanelContent', - dragHandle: '?lxExpansionPanelDragHandle', - footer: '?lxExpansionPanelFooter', - header: '?lxExpansionPanelHeader', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.expansion-panel').directive('lxExpansionPanel', ExpansionPanelDirective); - -///////////////////////////// - -export { ExpansionPanelDirective }; diff --git a/packages/lumx-angularjs/src/components/grid/grid-item_directive.js b/packages/lumx-angularjs/src/components/grid/grid-item_directive.js deleted file mode 100644 index a07836cb8..000000000 --- a/packages/lumx-angularjs/src/components/grid/grid-item_directive.js +++ /dev/null @@ -1,72 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function GridItemController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get grid item classes. - * - * @return {Array} The list of grid item classes. - */ - function getClasses() { - const classes = []; - - if (angular.isDefined(lx.align)) { - classes.push(`${CSS_PREFIX}-grid-item--align-${lx.align}`); - } - - if (angular.isDefined(lx.order)) { - classes.push(`${CSS_PREFIX}-grid-item--order-${lx.order}`); - } - - if (angular.isDefined(lx.width)) { - classes.push(`${CSS_PREFIX}-grid-item--width-${lx.width}`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function GridItemDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: GridItemController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - align: '@?lxAlign', - order: '@?lxOrder', - width: '@?lxWidth', - }, - template: '
', - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.grid').directive('lxGridItem', GridItemDirective); - -///////////////////////////// - -export { GridItemDirective }; diff --git a/packages/lumx-angularjs/src/components/grid/grid_directive.js b/packages/lumx-angularjs/src/components/grid/grid_directive.js deleted file mode 100644 index e95adee2a..000000000 --- a/packages/lumx-angularjs/src/components/grid/grid_directive.js +++ /dev/null @@ -1,98 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function GridController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - orientation: 'horizontal', - wrap: 'nowrap', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get grid classes. - * - * @return {Array} The list of grid classes. - */ - function getClasses() { - const classes = []; - - const orientation = lx.orientation ? lx.orientation : _DEFAULT_PROPS.orientation; - const wrap = lx.wrap ? lx.wrap : _DEFAULT_PROPS.wrap; - - classes.push(`${CSS_PREFIX}-grid--orientation-${orientation}`); - classes.push(`${CSS_PREFIX}-grid--wrap-${wrap}`); - - if (lx.gutter) { - classes.push(`${CSS_PREFIX}-grid--gutter-${lx.gutter}`); - } - - if (lx.hAlign) { - classes.push(`${CSS_PREFIX}-grid--h-align-${lx.hAlign}`); - } - - if (lx.vAlign) { - classes.push(`${CSS_PREFIX}-grid--v-align-${lx.vAlign}`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function GridDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: GridController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - gutter: '@?lxGutter', - hAlign: '@?lxHAlign', - orientation: '@?lxOrientation', - vAlign: '@?lxVAlign', - wrap: '@?lxWrap', - }, - template: '
', - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.grid').directive('lxGrid', GridDirective); - -///////////////////////////// - -export { GridDirective }; diff --git a/packages/lumx-angularjs/src/components/icon/icon.html b/packages/lumx-angularjs/src/components/icon/icon.html deleted file mode 100644 index 4fbe010e7..000000000 --- a/packages/lumx-angularjs/src/components/icon/icon.html +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/lumx-angularjs/src/components/icon/icon_directive.js b/packages/lumx-angularjs/src/components/icon/icon_directive.js deleted file mode 100644 index a7df5a2e3..000000000 --- a/packages/lumx-angularjs/src/components/icon/icon_directive.js +++ /dev/null @@ -1,122 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './icon.html'; - -///////////////////////////// - -function IconController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - color: 'dark', - size: 'm', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get icon classes. - * - * @return {Array} The list of icon classes. - */ - function getClasses() { - const classes = []; - - if (lx.path) { - classes.push(`${CSS_PREFIX}-icon--path`); - } else if (lx.font) { - classes.push(`${CSS_PREFIX}-icon--font`); - classes.push('mdi'); - classes.push(`mdi-${lx.font}`); - } - - if (lx.hasShape) { - classes.push(`${CSS_PREFIX}-icon--has-shape`); - } else { - classes.push(`${CSS_PREFIX}-icon--no-shape`); - } - - if (lx.color) { - classes.push(`${CSS_PREFIX}-icon--color-${lx.color}`); - } else if (lx.theme) { - classes.push(`${CSS_PREFIX}-icon--color-${lx.theme === 'light' ? 'dark' : 'light'}`); - } else if (lx.hasShape) { - classes.push(`${CSS_PREFIX}-icon--color-${_DEFAULT_PROPS.color}`); - } - - if (lx.colorVariant) { - classes.push(`${CSS_PREFIX}-icon--color-variant-${lx.colorVariant}`); - } - - if (lx.size) { - classes.push(`${CSS_PREFIX}-icon--size-${lx.size}`); - } else if (lx.hasShape) { - classes.push(`${CSS_PREFIX}-icon--size-${_DEFAULT_PROPS.size}`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function IconDirective() { - 'ngInject'; - - function link(scope, el, attrs) { - attrs.$observe('lxPath', (path) => { - el.find('path').attr('d', path); - }); - } - - return { - bindToController: true, - controller: IconController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - color: '@?lxColor', - colorVariant: '@?lxColorVariant', - font: '@?lxId', - hasShape: '=?lxHasShape', - path: '@?lxPath', - size: '@?lxSize', - theme: '@?lxTheme', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.icon').directive('lxIcon', IconDirective); - -///////////////////////////// - -export { IconDirective }; diff --git a/packages/lumx-angularjs/src/components/image-block/image-block.html b/packages/lumx-angularjs/src/components/image-block/image-block.html deleted file mode 100644 index eb9ff4851..000000000 --- a/packages/lumx-angularjs/src/components/image-block/image-block.html +++ /dev/null @@ -1,26 +0,0 @@ -
- - -
-
- {{ lx.title }} - - {{ lx.description }} - -
- -
-
- -
-
diff --git a/packages/lumx-angularjs/src/components/image-block/image-block_directive.js b/packages/lumx-angularjs/src/components/image-block/image-block_directive.js deleted file mode 100644 index 1bf1b9ed8..000000000 --- a/packages/lumx-angularjs/src/components/image-block/image-block_directive.js +++ /dev/null @@ -1,146 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './image-block.html'; - -///////////////////////////// - -function ImageBlockController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this, no-unused-vars - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - align: 'left', - captionPosition: 'below', - format: 'original', - theme: 'light', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has actions slot filled or not. - * - * @type {boolean} - */ - lx.hasActions = false; - - /** - * Whether the directive has tags slot filled or not. - * - * @type {boolean} - */ - lx.hasTags = false; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get image block classes. - * - * @return {Array} The list of image block classes. - */ - function getClasses() { - const classes = []; - - const align = lx.align ? lx.align : _DEFAULT_PROPS.align; - const captionPosition = lx.captionPosition ? lx.captionPosition : _DEFAULT_PROPS.captionPosition; - const format = lx.format ? lx.format : _DEFAULT_PROPS.format; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-image-block--align-${align}`); - classes.push(`${CSS_PREFIX}-image-block--caption-position-${captionPosition}`); - classes.push(`${CSS_PREFIX}-image-block--format-${format}`); - classes.push(`${CSS_PREFIX}-image-block--theme-${theme}`); - - if (lx.aspectRatio) { - classes.push(`${CSS_PREFIX}-image-block--aspect-ratio-${lx.aspectRatio}`); - } - - if (lx.fillHeight) { - classes.push(`${CSS_PREFIX}-image-block--fill-height`); - } - - if (lx.size) { - classes.push(`${CSS_PREFIX}-image-block--size-${lx.size}`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function ImageBlockDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('actions')) { - ctrl.hasActions = true; - } - - if (transclude.isSlotFilled('tags')) { - ctrl.hasTags = true; - } - } - - return { - bindToController: true, - controller: ImageBlockController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - align: '@?lxAlign', - aspectRatio: '@?lxAspectRatio', - captionPosition: '@?lxCaptionPosition', - captionStyle: '=?lxCaptionStyle', - description: '@?lxDescription', - fillHeight: '=?lxFillHeight', - image: '@lxImage', - onClick: '&?lxOnClick', - size: '@?lxSize', - theme: '@?lxTheme', - title: '@?lxTitle', - }, - template, - transclude: { - actions: '?lxImageBlockActions', - tags: '?lxImageBlockTags', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.image-block').directive('lxImageBlock', ImageBlockDirective); - -///////////////////////////// - -export { ImageBlockDirective }; diff --git a/packages/lumx-angularjs/src/components/input-helper/input-helper.html b/packages/lumx-angularjs/src/components/input-helper/input-helper.html deleted file mode 100644 index 73aa5b618..000000000 --- a/packages/lumx-angularjs/src/components/input-helper/input-helper.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/lumx-angularjs/src/components/input-helper/input-helper_directive.js b/packages/lumx-angularjs/src/components/input-helper/input-helper_directive.js deleted file mode 100644 index e3087b86c..000000000 --- a/packages/lumx-angularjs/src/components/input-helper/input-helper_directive.js +++ /dev/null @@ -1,99 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './input-helper.html'; - -///////////////////////////// - -function InputHelperController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - kind: 'info', - theme: 'light', - }; - - /** - * The color according to kind. - * - * @type {Object} - * @constant - * @readonly - */ - const _KIND_COLOR = { - error: 'red', - info: 'dark', - valid: 'green', - warning: 'yellow', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get input helper classes. - * - * @return {Array} The list of input helper classes. - */ - function getClasses() { - const classes = []; - - const color = lx.kind ? _KIND_COLOR[lx.kind] : _DEFAULT_PROPS.color; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-input-helper--color-${color}`); - classes.push(`${CSS_PREFIX}-input-helper--theme-${theme}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function InputHelperDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: InputHelperController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - kind: '@?lxKind', - theme: '@?lxTheme', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.input-helper').directive('lxInputHelper', InputHelperDirective); - -///////////////////////////// - -export { InputHelperDirective }; diff --git a/packages/lumx-angularjs/src/components/input-label/input-label.html b/packages/lumx-angularjs/src/components/input-label/input-label.html deleted file mode 100644 index d8bb29072..000000000 --- a/packages/lumx-angularjs/src/components/input-label/input-label.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/lumx-angularjs/src/components/input-label/input-label_directive.js b/packages/lumx-angularjs/src/components/input-label/input-label_directive.js deleted file mode 100644 index e328ab5b9..000000000 --- a/packages/lumx-angularjs/src/components/input-label/input-label_directive.js +++ /dev/null @@ -1,85 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './input-label.html'; - -///////////////////////////// - -function InputLabelController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get input helper classes. - * - * @return {Array} The list of input helper classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - classes.push(`${CSS_PREFIX}-input-label--theme-${theme}`); - - if (lx.isRequired) { - classes.push(`${CSS_PREFIX}-input-label--is-required`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function InputLabelDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: InputLabelController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - isRequired: '=?lxIsRequired', - theme: '@?lxTheme', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.input-label').directive('lxInputLabel', InputLabelDirective); - -///////////////////////////// - -export { InputLabelDirective }; diff --git a/packages/lumx-angularjs/src/components/lightbox/lightbox.html b/packages/lumx-angularjs/src/components/lightbox/lightbox.html deleted file mode 100644 index faab69d55..000000000 --- a/packages/lumx-angularjs/src/components/lightbox/lightbox.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- - - -
- -
-
diff --git a/packages/lumx-angularjs/src/components/lightbox/lightbox_directive.js b/packages/lumx-angularjs/src/components/lightbox/lightbox_directive.js deleted file mode 100644 index 0214a9703..000000000 --- a/packages/lumx-angularjs/src/components/lightbox/lightbox_directive.js +++ /dev/null @@ -1,253 +0,0 @@ -import { mdiClose } from '@lumx/icons'; - -import { CSS_PREFIX, ESCAPE_KEY_CODE } from '@lumx/core/js/constants'; - -import template from './lightbox.html'; - -///////////////////////////// - -function LightboxController($element, $scope, LxDepthService, LxFocusTrapService, LxEventSchedulerService, $timeout) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The lightbox open/close transition duration. - * - * @type {number} - * @constant - * @readonly - */ - const _TRANSITION_DURATION = 400; - - /** - * The event scheduler id. - * - * @type {string} - */ - let _idEventScheduler; - - /** - * The lightbox. - * - * @type {Element} - */ - const _lightbox = $element; - - /** - * The lightbox parent element. - * - * @type {Element} - */ - const _parentElement = _lightbox.parent(); - - /** - * The source element. - * - * @type {element} - */ - let _sourceEl; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The lightbox icons. - * - * @type {Object} - */ - lx.icons = { - mdiClose, - }; - - /** - * The lightbox identifier. - * - * @type {string} - */ - lx.id = undefined; - - /** - * Whether the lightbox is open or not. - * - * @type {boolean} - */ - lx.isOpen = false; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Close lightbox on escape key up. - * - * @param {Event} evt The key up event. - */ - function _onKeyUp(evt) { - if (evt.keyCode === ESCAPE_KEY_CODE) { - lx.closeLightbox(); - } - - evt.stopPropagation(); - } - - /** - * Open the current lightbox. - */ - function _open() { - if (lx.isOpen) { - return; - } - - LxDepthService.increase(); - - _lightbox - .css('z-index', LxDepthService.get()) - .appendTo('body') - .show(); - - _idEventScheduler = LxEventSchedulerService.register('keyup', _onKeyUp); - - $timeout(() => { - lx.isOpen = true; - - LxFocusTrapService.activate(_lightbox); - }); - } - - /** - * Register the source element that triggered the lightbox. - * - * @param {element} sourceEl The source element that triggered the lightbox. - */ - function _registerSource(sourceEl) { - _sourceEl = sourceEl; - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Close the current lightbox. - */ - function closeLightbox() { - if (!lx.isOpen) { - return; - } - - if (angular.isDefined(_idEventScheduler)) { - LxEventSchedulerService.unregister(_idEventScheduler); - _idEventScheduler = undefined; - } - - _lightbox.addClass(`${CSS_PREFIX}-lightbox--is-hidden`); - - if (angular.isDefined(_sourceEl)) { - _sourceEl.focus(); - } - - $timeout(() => { - _lightbox - .hide() - .removeClass(`${CSS_PREFIX}-lightbox--is-hidden`) - .appendTo(_parentElement); - - lx.isOpen = false; - - LxFocusTrapService.disable(); - }, _TRANSITION_DURATION); - } - - ///////////////////////////// - - lx.closeLightbox = closeLightbox; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Open a given lightbox. - * - * @param {Event} evt The lightbox open event. - * @param {string} lightboxId The lightbox identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - $scope.$on('lx-lightbox__open', (evt, lightboxId, params) => { - if (lightboxId === lx.id) { - _open(params); - - if (angular.isDefined(params) && angular.isDefined(params.source) && params.source) { - _registerSource(angular.element(params.source)); - } - } - }); - - /** - * Close a given lightbox. - * - * @param {Event} evt The lightbox open event. - * @param {string} lightboxId The lightbox identifier. - */ - $scope.$on('lx-lightbox__close', (evt, lightboxId) => { - if (lightboxId === lx.id || lightboxId === undefined) { - lx.closeLightbox(); - } - }); - - /** - * Close the current lightbox on destroy. - */ - $scope.$on('$destroy', () => { - lx.closeLightbox(); - }); -} - -///////////////////////////// - -function LightboxDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - attrs.$observe('id', (newId) => { - ctrl.id = newId; - }); - } - - return { - bindToController: true, - controller: LightboxController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: {}, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.lightbox').directive('lxLightbox', LightboxDirective); - -///////////////////////////// - -export { LightboxDirective }; diff --git a/packages/lumx-angularjs/src/components/lightbox/lightbox_service.js b/packages/lumx-angularjs/src/components/lightbox/lightbox_service.js deleted file mode 100644 index 078be51c7..000000000 --- a/packages/lumx-angularjs/src/components/lightbox/lightbox_service.js +++ /dev/null @@ -1,43 +0,0 @@ -function LightboxService($rootScope) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Close a given lightbox. - * - * @param {string} lightboxId The lightbox identifier. - */ - function closeLightbox(lightboxId) { - $rootScope.$broadcast('lx-lightbox__close', lightboxId); - } - - /** - * Open a given lightbox. - * - * @param {string} lightboxId The lightbox identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - function openLightbox(lightboxId, params) { - $rootScope.$broadcast('lx-lightbox__open', lightboxId, params); - } - - ///////////////////////////// - - service.close = closeLightbox; - service.open = openLightbox; -} - -///////////////////////////// - -angular.module('lumx.lightbox').service('LxLightboxService', LightboxService); - -///////////////////////////// - -export { LightboxService }; diff --git a/packages/lumx-angularjs/src/components/link/link_directive.js b/packages/lumx-angularjs/src/components/link/link_directive.js deleted file mode 100644 index 1cf482e29..000000000 --- a/packages/lumx-angularjs/src/components/link/link_directive.js +++ /dev/null @@ -1,67 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function LinkController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get link classes. - * - * @return {Array} The list of link classes. - */ - function getClasses() { - const classes = []; - - if (lx.color) { - classes.push(`${CSS_PREFIX}-link--color-${lx.color}`); - } - - if (lx.colorVariant) { - classes.push(`${CSS_PREFIX}-link--color-variant-${lx.colorVariant}`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function LinkDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: LinkController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - color: '@?lxColor', - colorVariant: '@?lxColorVariant', - }, - template: ``, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.link').directive('lxLink', LinkDirective); - -///////////////////////////// - -export { LinkDirective }; diff --git a/packages/lumx-angularjs/src/components/list/list-divider_directive.js b/packages/lumx-angularjs/src/components/list/list-divider_directive.js deleted file mode 100644 index 0773eebb3..000000000 --- a/packages/lumx-angularjs/src/components/list/list-divider_directive.js +++ /dev/null @@ -1,21 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function ListDividerDirective() { - 'ngInject'; - - return { - replace: true, - restrict: 'E', - template: `
  • `, - }; -} - -///////////////////////////// - -angular.module('lumx.list').directive('lxListDivider', ListDividerDirective); - -///////////////////////////// - -export { ListDividerDirective }; diff --git a/packages/lumx-angularjs/src/components/list/list-item.html b/packages/lumx-angularjs/src/components/list/list-item.html deleted file mode 100644 index 21b9b6fd2..000000000 --- a/packages/lumx-angularjs/src/components/list/list-item.html +++ /dev/null @@ -1,31 +0,0 @@ -
  • - -
    - -
    -
    -
    -     - -
    -
    - -
    -
    -
    -
    -
    • diff --git a/packages/lumx-angularjs/src/components/list/list-item_directive.js b/packages/lumx-angularjs/src/components/list/list-item_directive.js deleted file mode 100644 index 6a3f2ad7e..000000000 --- a/packages/lumx-angularjs/src/components/list/list-item_directive.js +++ /dev/null @@ -1,192 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './list-item.html'; - -///////////////////////////// - -function ListItemController($element, $scope) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - size: 'regular', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has after slot filled or not. - * - * @type {boolean} - */ - lx.hasAfter = false; - - /** - * Whether the directive has before slot filled or not. - * - * @type {boolean} - */ - lx.hasBefore = false; - - /** - * Whether the directive has content slot filled or not. - * - * @type {boolean} - */ - lx.hasContent = false; - - /** - * The parent controller (list). - * - * @type {Object} - */ - lx.parentController = undefined; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Register item index as active index to the list. - */ - function _registerIndex() { - if (angular.isUndefined(lx.parentController)) { - return; - } - - lx.parentController.activeItemIndex = $element.index(`.${CSS_PREFIX}-list-item`); - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get list item classes. - * - * @return {Array} The list of list item classes. - */ - function getClasses() { - const classes = []; - - const size = lx.size ? lx.size : _DEFAULT_PROPS.size; - - classes.push(`${CSS_PREFIX}-list-item--size-${size}`); - - return classes; - } - - /** - * Get list item link classes. - * - * @return {Array} The list of list item classes. - */ - function getLinkClasses() { - const linkClasses = []; - - if (lx.isSelected) { - linkClasses.push(`${CSS_PREFIX}-list-item__link--is-selected`); - } - - return linkClasses; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.getLinkClasses = getLinkClasses; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Register item index as active index to the list on focus. - */ - $element.on('focus', _registerIndex); - - /** - * Unbind event listener on destroy. - */ - $scope.$on('$destroy', () => { - $element.off('focus', _registerIndex); - }); -} - -///////////////////////////// - -function ListItemDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls, transclude) { - if (transclude.isSlotFilled('before')) { - ctrls[0].hasBefore = true; - } - - if (transclude.isSlotFilled('content')) { - ctrls[0].hasContent = true; - } - - if (transclude.isSlotFilled('after')) { - ctrls[0].hasAfter = true; - } - - if (angular.isDefined(ctrls[1]) && ctrls[1]) { - // eslint-disable-next-line prefer-destructuring - ctrls[0].parentController = ctrls[1]; - } - } - - return { - bindToController: true, - controller: ListItemController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxListItem', '?^lxList'], - restrict: 'E', - scope: { - isSelected: '=?lxIsSelected', - size: '@?lxSize', - }, - template, - transclude: { - after: '?lxListItemAfter', - before: '?lxListItemBefore', - content: '?lxListItemContent', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.list').directive('lxListItem', ListItemDirective); - -///////////////////////////// - -export { ListItemDirective }; diff --git a/packages/lumx-angularjs/src/components/list/list-subheader_directive.js b/packages/lumx-angularjs/src/components/list/list-subheader_directive.js deleted file mode 100644 index d496dbf9b..000000000 --- a/packages/lumx-angularjs/src/components/list/list-subheader_directive.js +++ /dev/null @@ -1,22 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function ListSubheaderDirective() { - 'ngInject'; - - return { - replace: true, - restrict: 'E', - template: `
  • `, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.list').directive('lxListSubheader', ListSubheaderDirective); - -///////////////////////////// - -export { ListSubheaderDirective }; diff --git a/packages/lumx-angularjs/src/components/list/list.html b/packages/lumx-angularjs/src/components/list/list.html deleted file mode 100644 index 318860484..000000000 --- a/packages/lumx-angularjs/src/components/list/list.html +++ /dev/null @@ -1 +0,0 @@ -
      diff --git a/packages/lumx-angularjs/src/components/list/list_directive.js b/packages/lumx-angularjs/src/components/list/list_directive.js deleted file mode 100644 index 72fbf8cd1..000000000 --- a/packages/lumx-angularjs/src/components/list/list_directive.js +++ /dev/null @@ -1,199 +0,0 @@ -import { CSS_PREFIX, DOWN_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from '@lumx/core/js/constants'; - -import template from './list.html'; - -///////////////////////////// - -function ListController($element, $scope) { - 'ngInject'; - - // eslint-disable-next-line consistent-this, no-unused-vars - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - itemPadding: 'big', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The active item index useful when navigating with keybord arrow keys. - * - * @type {number} - */ - lx.activeItemIndex = -1; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Increase active choice index on down arrow key down. - */ - function _nextItemOnKeyDown() { - let nextItem = $element.find(`.${CSS_PREFIX}-list-item`).eq(lx.activeItemIndex + 1); - - if (nextItem.length === 0) { - lx.activeItemIndex = 0; - - nextItem = $element.find(`.${CSS_PREFIX}-list-item`).eq(lx.activeItemIndex); - } else { - lx.activeItemIndex++; - } - - nextItem.find(`.${CSS_PREFIX}-list-item__link`).focus(); - } - - /** - * Decrease active choice index on up arrow key down. - */ - function _previousItemOnKeyUp() { - let previousItem = $element.find(`.${CSS_PREFIX}-list-item`).eq(lx.activeItemIndex - 1); - - if (previousItem.length === 0) { - lx.activeItemIndex = $element.find(`.${CSS_PREFIX}-list-item`).length - 1; - - previousItem = $element.find(`.${CSS_PREFIX}-list-item`).eq(lx.activeItemIndex); - } else { - lx.activeItemIndex--; - } - - previousItem.find(`.${CSS_PREFIX}-list-item__link`).focus(); - } - - /** - * Handle key events on list focus. - * - * @param {Event} evt The key event. - */ - function _onKeyDown(evt) { - if (!lx.isClickable) { - return; - } - - if (evt.keyCode === DOWN_KEY_CODE) { - _nextItemOnKeyDown(); - $scope.$apply(); - - evt.preventDefault(); - evt.stopPropagation(); - } else if (evt.keyCode === UP_KEY_CODE) { - _previousItemOnKeyUp(); - $scope.$apply(); - - evt.preventDefault(); - evt.stopPropagation(); - } else if (evt.keyCode === TAB_KEY_CODE) { - evt.preventDefault(); - evt.stopPropagation(); - } - } - - /** - * Reset active item index. - */ - function _resetActiveItemIndex() { - lx.activeItemIndex = -1; - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get list classes. - * - * @return {Array} The list of list classes. - */ - function getClasses() { - const classes = []; - - if (lx.isClickable) { - classes.push(`${CSS_PREFIX}-list--is-clickable`); - } - - if (lx.itemPadding) { - classes.push(`${CSS_PREFIX}-list--item-padding-${lx.itemPadding}`); - } else if (lx.isClickable) { - classes.push(`${CSS_PREFIX}-list--item-padding-${_DEFAULT_PROPS.itemPadding}`); - } - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Navigate through items on up and down arrow key down. - */ - $element.on('keydown', _onKeyDown).on('focus', _resetActiveItemIndex); - - /** - * Unbind event listeners on destroy. - */ - $scope.$on('$destroy', () => { - $element.off('keydown', _onKeyDown).off('focus', _resetActiveItemIndex); - }); -} - -///////////////////////////// - -function ListDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: ListController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - isClickable: '=?lxIsClickable', - itemPadding: '@?lxItemPadding', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.list').directive('lxList', ListDirective); - -///////////////////////////// - -export { ListDirective }; diff --git a/packages/lumx-angularjs/src/components/message/message.html b/packages/lumx-angularjs/src/components/message/message.html deleted file mode 100644 index a32bfd5aa..000000000 --- a/packages/lumx-angularjs/src/components/message/message.html +++ /dev/null @@ -1,4 +0,0 @@ -
      - -
      -
      diff --git a/packages/lumx-angularjs/src/components/message/message_directive.js b/packages/lumx-angularjs/src/components/message/message_directive.js deleted file mode 100644 index 1a5c186ef..000000000 --- a/packages/lumx-angularjs/src/components/message/message_directive.js +++ /dev/null @@ -1,125 +0,0 @@ -import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './message.html'; - -///////////////////////////// - -function MessageController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - color: 'dark', - }; - - /** - * The color according to kind. - * - * @type {Object} - * @constant - * @readonly - */ - const _KIND_COLOR = { - error: 'red', - info: 'dark', - success: 'green', - warning: 'yellow', - }; - - /** - * The icons according to kind. - * - * @type {Object} - * @constant - * @readonly - */ - const _KIND_ICON = { - error: mdiAlert, - info: mdiInformation, - success: mdiCheckCircle, - warning: mdiAlertCircle, - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get message classes. - * - * @return {Array} The list of message classes. - */ - function getClasses() { - const classes = []; - - const color = lx.kind ? _KIND_COLOR[lx.kind] : _DEFAULT_PROPS.color; - classes.push(`${CSS_PREFIX}-message--color-${color}`); - - if (lx.hasBackground) { - classes.push(`${CSS_PREFIX}-message--has-background`); - } - - return classes; - } - - /** - * Get icon according to kind. - * - * @return {string} The icon path. - */ - function getIcon() { - return _KIND_ICON[lx.kind]; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.getIcon = getIcon; -} - -///////////////////////////// - -function MessageDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: MessageController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - hasBackground: '=?lxHasBackground', - kind: '@?lxKind', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.message').directive('lxMessage', MessageDirective); - -///////////////////////////// - -export { MessageDirective }; diff --git a/packages/lumx-angularjs/src/components/notification-block/notification-block.html b/packages/lumx-angularjs/src/components/notification-block/notification-block.html deleted file mode 100644 index 13ce96859..000000000 --- a/packages/lumx-angularjs/src/components/notification-block/notification-block.html +++ /dev/null @@ -1,11 +0,0 @@ -
      -
      - -
      - {{ lx.title }} -

      {{ lx.description }}

      - {{ lx.date }} -
      - -
      -
      diff --git a/packages/lumx-angularjs/src/components/notification-block/notification-block_directive.js b/packages/lumx-angularjs/src/components/notification-block/notification-block_directive.js deleted file mode 100644 index 474eaad71..000000000 --- a/packages/lumx-angularjs/src/components/notification-block/notification-block_directive.js +++ /dev/null @@ -1,73 +0,0 @@ -import template from './notification-block.html'; - -///////////////////////////// - -function NotificationBlockController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has after slot filled or not. - * - * @type {boolean} - */ - lx.hasAfter = false; - - /** - * Whether the directive has before slot filled or not. - * - * @type {boolean} - */ - lx.hasBefore = false; -} - -///////////////////////////// - -function NotificationBlockDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('after')) { - ctrl.hasAfter = true; - } - - if (transclude.isSlotFilled('before')) { - ctrl.hasBefore = true; - } - } - - return { - bindToController: true, - controller: NotificationBlockController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - date: '@?lxDate', - description: '@?lxDescription', - title: '@?lxTitle', - }, - template, - transclude: { - after: '?lxNotificationBlockAfter', - before: '?lxNotificationBlockBefore', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.notification-block').directive('lxNotificationBlock', NotificationBlockDirective); - -///////////////////////////// - -export { NotificationBlockDirective }; diff --git a/packages/lumx-angularjs/src/components/notification/notification_service.js b/packages/lumx-angularjs/src/components/notification/notification_service.js deleted file mode 100644 index 390b35e40..000000000 --- a/packages/lumx-angularjs/src/components/notification/notification_service.js +++ /dev/null @@ -1,269 +0,0 @@ -import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons'; - -import { CSS_PREFIX, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants'; - -///////////////////////////// - -function NotificationService($compile, $rootScope, $timeout, LxDepthService, LxDialogService) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The notification delay before hiding. - * - * @type {number} - * @constant - * @readonly - */ - const _HIDE_DELAY = 6000; - - /** - * The delay before displaying next transition. - * - * @type {number} - * @constant - * @readonly - */ - const _DELAY_BEFORE_DISPLAY_NEXT = 300; - - /** - * The notification icon and colors according to their type. - * - * @type {string} - */ - const _notificationTypes = { - errorNotification: { - color: 'red', - icon: mdiAlert, - }, - infoNotification: { - color: 'dark', - icon: mdiInformation, - }, - successNotification: { - color: 'green', - icon: mdiCheckCircle, - }, - warningNotification: { - color: 'yellow', - icon: mdiAlertCircle, - }, - }; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Hide the given notification. - * - * @param {element} notification The notification html element. - */ - function _hide(notification) { - notification.addClass(`${CSS_PREFIX}-notification--is-hidden`); - - $timeout(function waitBeforeDeleting() { - notification.remove(); - }, NOTIFICATION_TRANSITION_DURATION); - } - - /** - * Build the notification template. - * - * @param {string} content The notification content. - * @param {string} type The notification type, either info, success, warning or error. - * @param {string} [actionLabel] The action button label. - * @param {Function} [actionCallback] The action button callback function called on action button click. - */ - function _build(content, type, actionLabel, actionCallback) { - const notification = angular.element('
      ', { - class: `${CSS_PREFIX}-notification ${CSS_PREFIX}-notification--color-${_notificationTypes[type].color}`, - }); - - const notificationIconWrapper = angular.element('
      ', { - class: `${CSS_PREFIX}-notification__icon`, - }); - - const notificationIcon = $compile(``)( - $rootScope, - ); - - const notificationText = angular.element('', { - class: `${CSS_PREFIX}-notification__content`, - html: content, - }); - - notificationIconWrapper.append(notificationIcon); - - notification.append(notificationIconWrapper).append(notificationText); - - if (angular.isDefined(actionLabel)) { - notification.addClass(`${CSS_PREFIX}-notification--has-action`); - - const notificationActionWrapper = angular.element('
      ', { - class: `${CSS_PREFIX}-notification__action`, - }); - const notificationAction = $compile(`${actionLabel}`)( - $rootScope, - ); - - notificationAction.on('click', function onActionCuttonClick(evt) { - actionCallback(); - - evt.stopPropagation(); - }); - - notificationActionWrapper.append(notificationAction).appendTo(notification); - } - - const notificationHideTimeout = $timeout(function waitBeforeHiding() { - _hide(notification); - }, _HIDE_DELAY); - - LxDepthService.increase(); - - notification - .css('z-index', LxDepthService.get()) - .appendTo('body') - .on('click', function onNotificationClick() { - _hide(notification); - - $timeout.cancel(notificationHideTimeout); - }); - } - - /** - * Check if an existing notification is displayed before building. - * - * @param {string} content The notification content. - * @param {string} type The notification type, either info, success, warning or error. - * @param {string} [actionLabel] The action button label. - * @param {Function} [actionCallback] The action button callback function called on action button click. - */ - function _notify(content, type, actionLabel, actionCallback) { - const activeNotification = angular.element(`.${CSS_PREFIX}-notification`); - - if (activeNotification.length > 0) { - _hide(activeNotification); - - $timeout(function waitBeforeShowingNext() { - _build(content, type, actionLabel, actionCallback); - }, _DELAY_BEFORE_DISPLAY_NEXT); - } else { - _build(content, type, actionLabel, actionCallback); - } - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Call dialog service alert method. - * - * @param {string} title The alert box title. - * @param {string} text The alert box text. - * @param {string} buttonLabel The alert box button label. - * @param {Function} cb The alert box callback with the answer as available parameter. - */ - function backwardAlert(title, text, buttonLabel, cb) { - LxDialogService.alert({ - title, - text, - buttons: { - ok: buttonLabel, - }, - cb, - }); - } - - /** - * Call dialog service confirm method. - * - * @param {string} title The confirm box title. - * @param {string} text The confirm box text. - * @param {Object} buttons The confirm box buttons label. - * @param {Function} cb The confirm box callback with the answer as available parameter. - */ - function backwardConfirm(title, text, buttons, cb) { - LxDialogService.confirm({ - title, - text, - buttons, - cb, - }); - } - - /** - * Create an error notification. - * - * @param {string} content The notification content. - * @param {string} [actionLabel] The action button label. - * @param {Function} [actionCallback] The action button callback function called on action button click. - */ - function errorNotification(content, actionLabel, actionCallback) { - _notify(content, 'errorNotification', actionLabel, actionCallback); - } - - /** - * Create an info notification. - * - * @param {string} content The notification content. - * @param {string} [actionLabel] The action button label. - * @param {Function} [actionCallback] The action button callback function called on action button click. - */ - function infoNotification(content, actionLabel, actionCallback) { - _notify(content, 'infoNotification', actionLabel, actionCallback); - } - - /** - * Create a success notification. - * - * @param {string} content The notification content. - * @param {string} [actionLabel] The action button label. - * @param {Function} [actionCallback] The action button callback function called on action button click. - */ - function successNotification(content, actionLabel, actionCallback) { - _notify(content, 'successNotification', actionLabel, actionCallback); - } - - /** - * Create a warning notification. - * - * @param {string} content The notification content. - * @param {string} [actionLabel] The action button label. - * @param {Function} [actionCallback] The action button callback function called on action button click. - */ - function warningNotification(content, actionLabel, actionCallback) { - _notify(content, 'warningNotification', actionLabel, actionCallback); - } - - ///////////////////////////// - - service.alert = backwardAlert; - service.confirm = backwardConfirm; - // eslint-disable-next-line id-blacklist - service.error = errorNotification; - service.info = infoNotification; - service.success = successNotification; - service.warning = warningNotification; -} - -///////////////////////////// - -angular.module('lumx.notification').service('LxNotificationService', NotificationService); - -///////////////////////////// - -export { NotificationService }; diff --git a/packages/lumx-angularjs/src/components/popover/popover.html b/packages/lumx-angularjs/src/components/popover/popover.html deleted file mode 100644 index 62f0f77a1..000000000 --- a/packages/lumx-angularjs/src/components/popover/popover.html +++ /dev/null @@ -1,3 +0,0 @@ -
      -
      -
      diff --git a/packages/lumx-angularjs/src/components/popover/popover_directive.js b/packages/lumx-angularjs/src/components/popover/popover_directive.js deleted file mode 100644 index e96e60c87..000000000 --- a/packages/lumx-angularjs/src/components/popover/popover_directive.js +++ /dev/null @@ -1,220 +0,0 @@ -import PopperJs from 'popper.js'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './popover.html'; - -///////////////////////////// - -function PopoverController(LxDepthService, $element, $scope, $timeout) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - elevation: '3', - }; - - /** - * The source element. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _sourceEl; - - /** - * The target element. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _targetEl; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the popover is open or not. - * - * @type {boolean} - */ - lx.isOpen = false; - - /** - * The popover uuid. - * - * @type {string} - */ - lx.uuid = undefined; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Close popover. - */ - function _close() { - lx.isOpen = false; - - $timeout(() => { - if (angular.isDefined(_sourceEl)) { - _sourceEl.focus(); - } - }); - } - - /** - * Open popover. - */ - function _open() { - LxDepthService.increase(); - - $element.css('z-index', LxDepthService.get()); - - // eslint-disable-next-line no-new - new PopperJs(_targetEl, $element, { - modifiers: { - offset: { enabled: true, offset: `0, ${lx.offset}` }, - }, - placement: lx.position || 'auto', - }); - - lx.isOpen = true; - } - - /** - * Register the source element that triggered the popover. - * - * @param {element} sourceEl The source element that triggered the popover. - */ - function _registerSource(sourceEl) { - _sourceEl = sourceEl; - } - - /** - * Register the target element to position the popover. - * - * @param {element} targetEl The target element to position the popover. - */ - function _registerTarget(targetEl) { - _targetEl = targetEl; - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get popover classes. - * - * @return {Array} The list of popover classes. - */ - function getClasses() { - const classes = []; - - const elevation = lx.elevation ? lx.elevation : _DEFAULT_PROPS.elevation; - classes.push(`${CSS_PREFIX}-popover--elevation-${elevation}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Open a given popover. - * - * @param {Event} evt The popover open event. - * @param {string} popoverId The popover identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - $scope.$on('lx-popover__open', (evt, popoverId, params) => { - if (popoverId === lx.uuid) { - _registerTarget(angular.element(params.target)); - - if (angular.isDefined(params.source)) { - _registerSource(angular.element(params.source)); - } - - _open(); - } - }); - - /** - * Close a given popover. - * - * @param {Event} evt The popover open event. - * @param {Object} popoverId The popover identifier. - */ - $scope.$on('lx-popover__close', (evt, popoverId) => { - if (popoverId === lx.uuid && lx.isOpen) { - _close(); - } - }); -} - -///////////////////////////// - -function PopoverDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - attrs.$observe('id', (id) => { - ctrl.uuid = id; - }); - } - - return { - bindToController: true, - controller: PopoverController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - elevation: '@?lxElevation', - offset: '@?lxOffset', - position: '@?lxPosition', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.popover').directive('lxPopover', PopoverDirective); - -///////////////////////////// - -export { PopoverDirective }; diff --git a/packages/lumx-angularjs/src/components/popover/popover_service.js b/packages/lumx-angularjs/src/components/popover/popover_service.js deleted file mode 100644 index 9b81d3323..000000000 --- a/packages/lumx-angularjs/src/components/popover/popover_service.js +++ /dev/null @@ -1,43 +0,0 @@ -function PopoverService($rootScope) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Close a given popover. - * - * @param {string} popoverId The popover identifier. - */ - function closePopover(popoverId) { - $rootScope.$broadcast('lx-popover__close', popoverId); - } - - /** - * Open a given popover. - * - * @param {string} popoverId The popover identifier. - * @param {Object} params An optional object that holds extra parameters. - */ - function openPopover(popoverId, params) { - $rootScope.$broadcast('lx-popover__open', popoverId, params); - } - - ///////////////////////////// - - service.close = closePopover; - service.open = openPopover; -} - -///////////////////////////// - -angular.module('lumx.popover').service('LxPopoverService', PopoverService); - -///////////////////////////// - -export { PopoverService }; diff --git a/packages/lumx-angularjs/src/components/post-block/post-block.html b/packages/lumx-angularjs/src/components/post-block/post-block.html deleted file mode 100644 index f66a196fe..000000000 --- a/packages/lumx-angularjs/src/components/post-block/post-block.html +++ /dev/null @@ -1,29 +0,0 @@ -
      -
      - -
      - -
      -
      - - {{ lx.title }} - - {{ lx.meta }} - -

      {{ lx.text }}

      - -
      - -
      -
      -
      -
      -
      -
      diff --git a/packages/lumx-angularjs/src/components/post-block/post-block_directive.js b/packages/lumx-angularjs/src/components/post-block/post-block_directive.js deleted file mode 100644 index c31d165ae..000000000 --- a/packages/lumx-angularjs/src/components/post-block/post-block_directive.js +++ /dev/null @@ -1,149 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './post-block.html'; - -///////////////////////////// - -function PostBlockController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - orientation: 'horizontal', - theme: 'light', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has actions slot filled or not. - * - * @type {boolean} - */ - lx.hasActions = false; - - /** - * Whether the directive has attachments slot filled or not. - * - * @type {boolean} - */ - lx.hasAttachments = false; - - /** - * Whether the directive has author slot filled or not. - * - * @type {boolean} - */ - lx.hasAuthor = false; - - /** - * Whether the directive has tags slot filled or not. - * - * @type {boolean} - */ - lx.hasTags = false; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get post block classes. - * - * @return {Array} The list of post block classes. - */ - function getClasses() { - const classes = []; - - const orientation = lx.orientation ? lx.orientation : _DEFAULT_PROPS.orientation; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-post-block--orientation-${orientation}`); - classes.push(`${CSS_PREFIX}-post-block--theme-${theme}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function PostBlockDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('actions')) { - ctrl.hasActions = true; - } - - if (transclude.isSlotFilled('attachments')) { - ctrl.hasAttachments = true; - } - - if (transclude.isSlotFilled('author')) { - ctrl.hasAuthor = true; - } - - if (transclude.isSlotFilled('tags')) { - ctrl.hasTags = true; - } - } - - return { - bindToController: true, - controller: PostBlockController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - meta: '@?lxMeta', - onClick: '&?lxOnClick', - orientation: '@?lxOrientation', - text: '@?lxText', - thumbnail: '@?lxThumbnail', - thumbnailAspectRatio: '@?lxThumbnailAspectRatio', - title: '@?lxTitle', - theme: '@?lxTheme', - }, - template, - transclude: { - actions: '?lxPostBlockActions', - attachments: '?lxPostBlockAttachments', - author: '?lxPostBlockAuthor', - tags: '?lxPostBlockTags', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.post-block').directive('lxPostBlock', PostBlockDirective); - -///////////////////////////// - -export { PostBlockDirective }; diff --git a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker-step.html b/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker-step.html deleted file mode 100644 index 7c9c117b0..000000000 --- a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker-step.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - {{ lx.label }} - - - {{ lx.helper }} - - diff --git a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker-step_directive.js b/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker-step_directive.js deleted file mode 100644 index 5d04785e2..000000000 --- a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker-step_directive.js +++ /dev/null @@ -1,162 +0,0 @@ -import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './progress-tracker-step.html'; - -///////////////////////////// - -function ProgressTrackerStepController($scope, $element) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The parentController. - * - * @type {Object} - */ - let _parentController; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get progress tracker step classes. - * - * @return {Array} The list of progress tracker step classes. - */ - function getClasses() { - const classes = []; - - if (lx.isActive) { - classes.push(`${CSS_PREFIX}-progress-tracker-step--is-active`); - } - - if (lx.isComplete) { - classes.push(`${CSS_PREFIX}-progress-tracker-step--is-complete`); - } - - if (lx.isClickable()) { - classes.push(`${CSS_PREFIX}-progress-tracker-step--is-clickable`); - } - - if (lx.isActive && lx.hasError) { - classes.push(`${CSS_PREFIX}-progress-tracker-step--has-error`); - } - - return classes; - } - - /** - * Get step icon according to its state. - * - * @return {string} The icon path. - */ - function getIcon() { - if (lx.isComplete) { - return mdiCheckCircle; - } - - if (lx.isActive) { - if (lx.hasError) { - return mdiAlertCircle; - } - - return mdiRadioboxMarked; - } - - return mdiRadioboxBlank; - } - - /** - * Wheter the step is clickable or not. - * - * @return {boolean} Wheter the step is clickable or not. - */ - function isClickable() { - return ( - lx.isActive || lx.isComplete || $element.prev().hasClass(`${CSS_PREFIX}-progress-tracker-step--is-complete`) - ); - } - - /** - * Set parent controller. - * - * @param {Object} parentController The parent controller. - */ - function setParentController(parentController) { - _parentController = parentController; - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.getIcon = getIcon; - lx.isClickable = isClickable; - lx.setParentController = setParentController; - - ///////////////////////////// - // // - // Watchers // - // // - ///////////////////////////// - - /** - * Watch for any changes of the step active step to update the progress bar. - * - * @param {boolean} isActive Whether the step is active or not. - */ - $scope.$watch('lx.isActive', function isActiveWatcher(isActive) { - if (isActive) { - _parentController.setActiveStep($element.index()); - } - }); -} - -///////////////////////////// - -function ProgressTrackerStepDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls) { - ctrls[1].increaseStepCount(); - ctrls[0].setParentController(ctrls[1]); - } - - return { - bindToController: true, - controller: ProgressTrackerStepController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxProgressTrackerStep', '^lxProgressTracker'], - restrict: 'E', - scope: { - hasError: '=?lxHasError', - helper: '@?lxHelper', - isActive: '=?lxIsActive', - isComplete: '=?lxIsComplete', - label: '@lxLabel', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.progress-tracker').directive('lxProgressTrackerStep', ProgressTrackerStepDirective); - -///////////////////////////// - -export { ProgressTrackerStepDirective }; diff --git a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker.html b/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker.html deleted file mode 100644 index 8f09b3461..000000000 --- a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker.html +++ /dev/null @@ -1,16 +0,0 @@ -
      -
      - -
      - -
      -
      diff --git a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker_directive.js b/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker_directive.js deleted file mode 100644 index 89b5e3681..000000000 --- a/packages/lumx-angularjs/src/components/progress-tracker/progress-tracker_directive.js +++ /dev/null @@ -1,81 +0,0 @@ -import template from './progress-tracker.html'; - -///////////////////////////// - -function ProgressTrackerController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The lactive step index. - * - * @type {number} - */ - lx.activeStep = 0; - - /** - * The number of steps. - * - * @type {number} - */ - lx.stepCount = 0; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Increase step count on step init. - */ - function increaseStepCount() { - lx.stepCount++; - } - - /** - * Set active step index. - * - * @param {number} stepIndex The step index. - */ - function setActiveStep(stepIndex) { - lx.activeStep = stepIndex; - } - - ///////////////////////////// - - lx.increaseStepCount = increaseStepCount; - lx.setActiveStep = setActiveStep; -} - -///////////////////////////// - -function ProgressTrackerDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: ProgressTrackerController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.progress-tracker').directive('lxProgressTracker', ProgressTrackerDirective); - -///////////////////////////// - -export { ProgressTrackerDirective }; diff --git a/packages/lumx-angularjs/src/components/progress/progress.html b/packages/lumx-angularjs/src/components/progress/progress.html deleted file mode 100644 index 0d37ec6c4..000000000 --- a/packages/lumx-angularjs/src/components/progress/progress.html +++ /dev/null @@ -1,15 +0,0 @@ -
      -
      -
      -
      - - - - -
      - -
      -
      -
      -
      -
      diff --git a/packages/lumx-angularjs/src/components/progress/progress_directive.js b/packages/lumx-angularjs/src/components/progress/progress_directive.js deleted file mode 100644 index 06a4282ba..000000000 --- a/packages/lumx-angularjs/src/components/progress/progress_directive.js +++ /dev/null @@ -1,89 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './progress.html'; - -///////////////////////////// - -function ProgressController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - variant: 'circular', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get checkbox classes. - * - * @return {Array} The list of checkbox classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - const variant = lx.variant ? lx.variant : _DEFAULT_PROPS.variant; - - classes.push(`${CSS_PREFIX}-progress--theme-${theme}`); - classes.push(`${CSS_PREFIX}-progress--variant-${variant}`); - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function ProgressDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: ProgressController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - theme: '@?lxTheme', - variant: '@?lxVariant', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.progress').directive('lxProgress', ProgressDirective); - -///////////////////////////// - -export { ProgressDirective }; diff --git a/packages/lumx-angularjs/src/components/radio-button/radio-button.html b/packages/lumx-angularjs/src/components/radio-button/radio-button.html deleted file mode 100644 index 77ee64a51..000000000 --- a/packages/lumx-angularjs/src/components/radio-button/radio-button.html +++ /dev/null @@ -1,32 +0,0 @@ -
      -
      - - -
      -
      -
      -
      -
      - -
      - - - -
      - -
      - - - - - - - -
      -
      diff --git a/packages/lumx-angularjs/src/components/radio-button/radio-button_directive.js b/packages/lumx-angularjs/src/components/radio-button/radio-button_directive.js deleted file mode 100644 index c70c4d2aa..000000000 --- a/packages/lumx-angularjs/src/components/radio-button/radio-button_directive.js +++ /dev/null @@ -1,217 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './radio-button.html'; - -///////////////////////////// - -function RadioButtonController(LxUtilsService) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - /** - * The model controller. - * - * @type {Object} - */ - let _modelController; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The radio button id. - * - * @type {string} - */ - lx.radioButtonId = LxUtilsService.generateUUID(); - - /** - * Whether the directive has helper slot filled or not. - * - * @type {boolean} - */ - lx.hasHelper = false; - - /** - * Whether the directive has label slot filled or not. - * - * @type {boolean} - */ - lx.hasLabel = false; - - /** - * Whether the directive has transcluded content if no transclude slot. - * - * @type {boolean} - */ - lx.hasTranscluded = false; - - /** - * The radio button value. - * - * @type {string} - */ - lx.radioButtonValue = undefined; - - /** - * The model view value. - * - * @type {string} - */ - lx.viewValue = undefined; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get radio button classes. - * - * @return {Array} The list of radio button classes. - */ - function getClasses() { - const classes = []; - - const state = lx.viewValue === lx.radioButtonValue ? 'checked' : 'unchecked'; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-radio-button--is-${state}`); - classes.push(`${CSS_PREFIX}-radio-button--theme-${theme}`); - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Set the model controller. - * - * @param {Object} modelController The model controller. - */ - function setModelController(modelController) { - _modelController = modelController; - - _modelController.$render = function onModelRender() { - lx.viewValue = _modelController.$viewValue; - }; - } - - /** - * Update model controller view value on radio button click. - */ - function updateViewValue() { - if (angular.isUndefined(_modelController)) { - return; - } - - _modelController.$setViewValue(lx.radioButtonValue); - _modelController.$render(); - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.setModelController = setModelController; - lx.updateViewValue = updateViewValue; -} - -///////////////////////////// - -function RadioButtonDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls, transclude) { - if (ctrls[1]) { - ctrls[0].setModelController(ctrls[1]); - } - - if (transclude.isSlotFilled('label')) { - ctrls[0].hasLabel = true; - } - - if (transclude.isSlotFilled('helper')) { - ctrls[0].hasHelper = true; - } - - if (!ctrls[0].hasLabel && !ctrls[0].hasHelper) { - transclude((clone) => { - if (clone.length > 0) { - ctrls[0].hasTranscluded = true; - } - }); - } - - attrs.$observe('disabled', (isDisabled) => { - el.find('input').attr('disabled', isDisabled); - - if (isDisabled) { - el.addClass(`${CSS_PREFIX}-radio-button--is-disabled`); - } else { - el.removeClass(`${CSS_PREFIX}-radio-button--is-disabled`); - } - }); - - attrs.$observe('name', (newName) => { - el.find('input').attr('name', newName); - }); - - attrs.$observe('value', (newValue) => { - el.find('input').attr('value', newValue); - - ctrls[0].radioButtonValue = newValue; - }); - } - - return { - bindToController: true, - controller: RadioButtonController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxRadioButton', '?ngModel'], - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - theme: '@?lxTheme', - }, - template, - transclude: { - helper: '?lxRadioButtonHelper', - label: '?lxRadioButtonLabel', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.radio-button').directive('lxRadioButton', RadioButtonDirective); - -///////////////////////////// - -export { RadioButtonDirective }; diff --git a/packages/lumx-angularjs/src/components/radio-button/radio-group_directive.js b/packages/lumx-angularjs/src/components/radio-button/radio-group_directive.js deleted file mode 100644 index b53e44f85..000000000 --- a/packages/lumx-angularjs/src/components/radio-button/radio-group_directive.js +++ /dev/null @@ -1,22 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function RadioGroupDirective() { - 'ngInject'; - - return { - replace: true, - restrict: 'E', - template: `
      `, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.radio-button').directive('lxRadioGroup', RadioGroupDirective); - -///////////////////////////// - -export { RadioGroupDirective }; diff --git a/packages/lumx-angularjs/src/components/select/select-choices_filter.js b/packages/lumx-angularjs/src/components/select/select-choices_filter.js deleted file mode 100644 index c7d3f8504..000000000 --- a/packages/lumx-angularjs/src/components/select/select-choices_filter.js +++ /dev/null @@ -1,31 +0,0 @@ -function SelectChoicesFilter($filter) { - 'ngInject'; - - return function filteredChoices(choices, externalFilter, textFilter) { - if (externalFilter) { - return choices; - } - - let toFilter = []; - - if (angular.isArray(choices)) { - toFilter = choices; - } else if (angular.isObject(choices)) { - for (const idx in choices) { - if (angular.isArray(choices[idx])) { - toFilter = toFilter.concat(choices[idx]); - } - } - } - - return $filter('filter')(toFilter, textFilter); - }; -} - -///////////////////////////// - -angular.module('lumx.select').filter('lxSelectChoicesFilter', SelectChoicesFilter); - -///////////////////////////// - -export { SelectChoicesFilter }; diff --git a/packages/lumx-angularjs/src/components/select/select-filter_directive.js b/packages/lumx-angularjs/src/components/select/select-filter_directive.js deleted file mode 100644 index 7b946bf07..000000000 --- a/packages/lumx-angularjs/src/components/select/select-filter_directive.js +++ /dev/null @@ -1,41 +0,0 @@ -import { CSS_PREFIX, DOWN_KEY_CODE, ESCAPE_KEY_CODE } from '@lumx/core/js/constants'; - -///////////////////////////// - -function SelectFilterDirective() { - 'ngInject'; - - function link(scope, el) { - el.focus().on('click keydown', (evt) => { - if (evt.keyCode === ESCAPE_KEY_CODE) { - return; - } - - evt.stopPropagation(); - - if (evt.keyCode === DOWN_KEY_CODE) { - el.parent() - .next() - .find(`.${CSS_PREFIX}-list-item:first-child`) - .focus(); - } - }); - - scope.$on('$destroy', () => { - el.off(); - }); - } - - return { - link, - restrict: 'A', - }; -} - -///////////////////////////// - -angular.module('lumx.select').directive('lxSelectFilter', SelectFilterDirective); - -///////////////////////////// - -export { SelectFilterDirective }; diff --git a/packages/lumx-angularjs/src/components/select/select.html b/packages/lumx-angularjs/src/components/select/select.html deleted file mode 100644 index 5c22905f8..000000000 --- a/packages/lumx-angularjs/src/components/select/select.html +++ /dev/null @@ -1,173 +0,0 @@ -
      -
      - {{ lx.label }} -
      - -
      -
      - {{ lx.placeholder }} -
      - -
      - -
      - -
      - - - - - - - -
      - -
      - -
      - - - - - -
      - -
      -
      - - - - {{ lx.label }} - - - - - - +{{ lx.viewValue.length - 1 }} - - - - - - - - - - {{ lx.error }} - - - - {{ lx.helper }} - - - - -
      - - - -
      - - - - - - - - - - - - - - - - - - - {{ lx.choicesHelper }} - - -
      - -
      -       -       -
      diff --git a/packages/lumx-angularjs/src/components/select/select_directive.js b/packages/lumx-angularjs/src/components/select/select_directive.js deleted file mode 100644 index 8498af701..000000000 --- a/packages/lumx-angularjs/src/components/select/select_directive.js +++ /dev/null @@ -1,748 +0,0 @@ -import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMagnify, mdiMenuDown } from '@lumx/icons'; - -import { CSS_PREFIX, DOWN_KEY_CODE, ENTER_KEY_CODE } from '@lumx/core/js/constants'; - -import template from './select.html'; - -///////////////////////////// - -function SelectController($document, $interpolate, $sce, $scope, $timeout, LxDropdownService, LxUtilsService) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - /** - * The choice template. - * - * @type {string} - */ - let _choiceTemplate; - - /** - * The model controller. - * - * @type {Object} - */ - // eslint-disable-next-line one-var - let _modelController; - - /** - * The selected template. - * - * @type {string} - */ - // eslint-disable-next-line one-var - let _selectedTemplate; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the select is focus or not. - * - * @type {boolean} - */ - lx.isFocus = false; - - /** - * Whether the dropdown is open or not. - * - * @type {boolean} - */ - lx.isOpen = false; - - /** - * The dropdown unique identifier. - * - * @type {string} - */ - lx.dropdownUuid = LxUtilsService.generateUUID(); - - /** - * The filter model. - * - * @type {string} - */ - lx.filterModel = undefined; - - /** - * The select icons. - * - * @type {Object} - */ - lx.icons = { - mdiAlertCircle, - mdiCheckCircle, - mdiClose, - mdiCloseCircle, - mdiMagnify, - mdiMenuDown, - }; - - /** - * The dropdown target unique identifier. - * - * @type {string} - */ - lx.targetUuid = LxUtilsService.generateUUID(); - - /** - * The model view value. - * - * @type {string} - */ - lx.viewValue = undefined; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Check if two objects are equals according to their id in priority. - * - * @param {Object} obj1 The first object to compare. - * @param {Object} obj2 The second object to compare. - * @return {boolean} Whether obj1 is equal to obj2. - */ - function _isEqual(obj1, obj2) { - if (angular.isUndefined(obj1) || angular.isUndefined(obj2)) { - return false; - } - - if (angular.isDefined(obj1.id) && angular.isDefined(obj2.id)) { - return obj1.id === obj2.id; - } else if (angular.isDefined(obj1.uid) && angular.isDefined(obj2.uid)) { - return obj1.uid === obj2.uid; - } else if (angular.isDefined(obj1.uuid) && angular.isDefined(obj2.uuid)) { - return obj1.uuid === obj2.uuid; - } - - return angular.equals(obj1, obj2); - } - - /** - * Returns the object index in an array. - * - * @param {Array} arr The array to check in. - * @param {Object} obj The object to check. - * @return {number} The object index. - */ - function _arrayObjectIndexOf(arr, obj) { - for (let i = 0, len = arr.length; i < len; i++) { - if (_isEqual(obj, arr[i])) { - return i; - } - } - - return -1; - } - - /** - * Init view value. - */ - function _initViewValue() { - if (lx.multiple && angular.isUndefined(_modelController.$viewValue)) { - _modelController.$setViewValue([]); - } - - if (angular.isDefined(lx.modelToSelection)) { - if (lx.multiple) { - lx.viewValue = []; - - angular.forEach(_modelController.$viewValue, (item) => { - lx.modelToSelection({ - // eslint-disable-next-line id-blacklist - callback(response) { - if (angular.isUndefined(response) || !response) { - return; - } - - lx.viewValue.push(response); - }, - // eslint-disable-next-line id-blacklist - data: item, - }); - }); - } else { - lx.modelToSelection({ - // eslint-disable-next-line id-blacklist - callback(response) { - if (angular.isUndefined(response) || !response) { - return; - } - - lx.viewValue = response; - }, - // eslint-disable-next-line id-blacklist - data: _modelController.$viewValue, - }); - } - } else { - lx.viewValue = _modelController.$viewValue; - } - } - - /** - * Select item synchronously (no selectiontoModel). - * - * @param {Object} choice The choice object. - */ - function _updateModel(choice) { - let updatedModel; - - if (lx.multiple) { - updatedModel = angular.copy(_modelController.$viewValue); - - const choiceIndex = _arrayObjectIndexOf(_modelController.$viewValue, choice); - - if (choiceIndex === -1) { - updatedModel.push(choice); - } else { - updatedModel.splice(choiceIndex, 1); - } - } else { - updatedModel = choice; - } - - _modelController.$setViewValue(updatedModel); - } - - /** - * Update view value on select. - * - * @param {Object} choice The choice object. - */ - function _updateViewValue(choice) { - if (lx.multiple) { - const choiceIndex = _arrayObjectIndexOf(lx.viewValue, choice); - - if (choiceIndex === -1) { - lx.viewValue.push(choice); - } else { - lx.viewValue.splice(choiceIndex, 1); - } - } else { - lx.viewValue = choice; - } - } - - /** - * Open the dropdown menu. - * - * @param {Event} evt The click/key event. - */ - function _openDropdown(evt) { - if (angular.isDefined(evt)) { - evt.stopPropagation(); - } - - LxDropdownService.open(lx.dropdownUuid, { target: `#${lx.targetUuid}` }); - } - - /** - * Close the dropdown menu. - * - * @param {Event} evt The click/key event. - */ - function _closeDropdown(evt) { - if (angular.isDefined(evt)) { - evt.stopPropagation(); - } - - LxDropdownService.close(lx.dropdownUuid); - } - - /** - * Handle key events on input wrapper focus. - * - * @param {Event} evt The key event. - */ - function _onKeyDown(evt) { - if ((evt.keyCode === DOWN_KEY_CODE || evt.keyCode === ENTER_KEY_CODE) && !lx.isOpen) { - _openDropdown(evt); - - evt.preventDefault(); - evt.stopPropagation(); - } - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Clear the model on clear button click. - * - * @param {Event} [evt] The event that triggered the function. - */ - function clearModel(evt) { - if (angular.isDefined(evt)) { - evt.stopPropagation(); - } - - if (lx.multiple) { - _modelController.$setViewValue([]); - lx.viewValue.length = 0; - } else { - _modelController.$setViewValue(undefined); - lx.viewValue = undefined; - } - } - - /** - * Disable key events on input wrapper blur. - */ - function disableKeyEvents() { - lx.isFocus = false; - $document.off('keydown', _onKeyDown); - } - - /** - * Display the choice according to the choice template. - * - * @param {Object} choice The choice object. - * @return {string} The choice label. - */ - function displayChoice(choice) { - const choiceScope = { - $choice: choice, - }; - - const interpolatedChoice = $interpolate(_choiceTemplate)(choiceScope); - - return $sce.trustAsHtml(interpolatedChoice); - } - - /** - * Display the selected item according to the selected template. - * - * @param {Object} [selected] The selected object. - * @return {string} The selected label. - */ - function displaySelected(selected) { - const selectedScope = {}; - - if (!angular.isArray(lx.choices)) { - Object.entries(lx.choices).forEach(([subheader, choices]) => { - if (_arrayObjectIndexOf(choices, selected) !== -1) { - selectedScope.$selectedSubheader = subheader; - } - }); - } - - selectedScope.$selected = angular.isDefined(selected) ? selected : lx.viewValue; - - const interpolatedSelected = $interpolate(_selectedTemplate)(selectedScope); - - return $sce.trustAsHtml(interpolatedSelected); - } - - /** - * Display the choice subheader. - * - * @param {string} subheader The raw choice subheader. - * @return {string} The trusted choice subheader. - */ - function displaySubheader(subheader) { - return $sce.trustAsHtml(subheader); - } - - /** - * Enable key events on input wrapper focus. - */ - function enableKeyEvents() { - lx.isFocus = true; - $document.on('keydown', _onKeyDown); - } - - /** - * Get select classes. - * - * @return {Array} The list of select classes. - */ - function getClasses() { - const classes = []; - - const mode = lx.multiple ? 'multiple' : 'unique'; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - const value = lx.isModelEmpty() ? 'is-empty' : 'has-value'; - - classes.push(`${CSS_PREFIX}-select--${mode}`); - classes.push(`${CSS_PREFIX}-select--theme-${theme}`); - classes.push(`${CSS_PREFIX}-select--${value}`); - - if (lx.hasError) { - classes.push(`${CSS_PREFIX}-select--has-error`); - } - - if (lx.isClearable && !lx.multiple && !lx.isModelEmpty()) { - classes.push(`${CSS_PREFIX}-select--has-input-clear`); - } - - if (lx.label) { - classes.push(`${CSS_PREFIX}-select--has-label`); - } - - if (lx.placeholder) { - classes.push(`${CSS_PREFIX}-select--has-placeholder`); - } - - if (lx.isDisabled) { - classes.push(`${CSS_PREFIX}-select--is-disabled`); - } - - if (lx.isFocus) { - classes.push(`${CSS_PREFIX}-select--is-focus`); - } - - if (lx.isOpen) { - classes.push(`${CSS_PREFIX}-select--is-open`); - } - - if (lx.isValid) { - classes.push(`${CSS_PREFIX}-select--is-valid`); - } - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Check if choices are empty or not. - * - * @return {boolean} Whether choices aare empty or not. - */ - function hasChoices() { - if (!lx.isChoicesArray()) { - return angular.isDefined(lx.choices); - } - - return lx.choices.length > 0; - } - - /** - * Check if choices are in array format. - * - * @return {boolean} Whether choices are in array format or not. - */ - function isChoicesArray() { - return angular.isArray(lx.choices); - } - - /** - * Check if the model is empty. - * - * @return {boolean} Whether the model is empty or not. - */ - function isModelEmpty() { - if (lx.multiple) { - return _modelController.$viewValue.length === 0; - } - - return angular.isUndefined(_modelController.$viewValue); - } - - /** - * Check if a choice is selected. - * - * @param {Object} choice The choice object. - * @return {boolean} Whether the choice is selected or not. - */ - function isSelected(choice) { - if (lx.multiple) { - return _arrayObjectIndexOf(lx.viewValue, choice) !== -1; - } - - return _isEqual(choice, lx.viewValue); - } - - /** - * Register the choice template. - * - * @param {string} choiceTemplate The choice template. - */ - function registerChoiceTemplate(choiceTemplate) { - _choiceTemplate = choiceTemplate; - } - - /** - * Select the selected template. - * - * @param {string} selectedTemplate The choice template. - */ - function registerSelectedTemplate(selectedTemplate) { - _selectedTemplate = selectedTemplate; - } - - /** - * Select a choice. - * - * @param {Object} choice The choice object. - * @param {Event} [evt] The event that triggered the function. - */ - function select(choice, evt) { - if (angular.isDefined(evt) && lx.multiple) { - evt.stopPropagation(); - } - - if ( - lx.multiple && - !lx.isSelected(choice) && - angular.isDefined(lx.max) && - _modelController.$viewValue.length >= parseInt(lx.max, 10) - ) { - return; - } - - if (angular.isDefined(lx.selectionToModel)) { - lx.selectionToModel({ - // eslint-disable-next-line id-blacklist - callback(response) { - if (angular.isUndefined(response) || !response) { - return; - } - - _updateModel(response); - _updateViewValue(choice); - }, - // eslint-disable-next-line id-blacklist - data: choice, - }); - } else { - _updateModel(choice); - _updateViewValue(choice); - } - - if (lx.multiple) { - $timeout(() => { - LxDropdownService.updateActiveDropdownPosition(); - }); - } - } - - /** - * Set the model controller. - * - * @param {Object} modelController The model controller. - */ - function setModelController(modelController) { - _modelController = modelController; - - _modelController.$render = _initViewValue; - } - - /** - * Toggle the dropdown menu on input wrapper click. - * - * @param {Event} evt The click event. - */ - function toggleDropdown(evt) { - if (lx.isOpen) { - _closeDropdown(evt); - } else { - _openDropdown(evt); - } - } - - /** - * Update choices list according to filter model. - */ - function updateFilter() { - if (angular.isDefined(lx.filter)) { - lx.filter({ - newValue: lx.filterModel, - }); - } - } - - ///////////////////////////// - - lx.clearModel = clearModel; - lx.disableKeyEvents = disableKeyEvents; - lx.displayChoice = displayChoice; - lx.displaySelected = displaySelected; - lx.displaySubheader = displaySubheader; - lx.enableKeyEvents = enableKeyEvents; - lx.getClasses = getClasses; - lx.hasChoices = hasChoices; - lx.isChoicesArray = isChoicesArray; - lx.isModelEmpty = isModelEmpty; - lx.isSelected = isSelected; - lx.registerChoiceTemplate = registerChoiceTemplate; - lx.registerSelectedTemplate = registerSelectedTemplate; - lx.select = select; - lx.setModelController = setModelController; - lx.toggleDropdown = toggleDropdown; - lx.updateFilter = updateFilter; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Add focus class to input wrapper on dropdown open. - * - * @param {Event} evt The dropdown open event. - * @param {Object} dropdownId The dropdown identifier. - */ - $scope.$on('lx-dropdown__open', (evt, dropdownId) => { - if (dropdownId === lx.dropdownUuid) { - lx.isOpen = true; - } - }); - - /** - * Remove focus class to input wrapper on dropdown close. - * - * @param {Event} evt The dropdown open event. - * @param {Object} dropdownId The dropdown identifier. - */ - $scope.$on('lx-dropdown__close', (evt, dropdownId) => { - if (dropdownId === lx.dropdownUuid) { - lx.isOpen = false; - } - }); - - /** - * When the end of the dropdown is reached and infinite scroll is specified, - * fetch new data. - * - * @param {Event} evt The scroll event. - * @param {string} dropdownId The id of the dropdown that scrolled to the end. - */ - $scope.$on('lx-dropdown__scroll-end', (evt, dropdownId) => { - if ( - dropdownId !== lx.dropdownUuid || - !angular.isFunction(lx.infiniteScroll) || - lx.isLoading || - lx.isInfiniteScrollLoading - ) { - return; - } - - lx.infiniteScroll()().then((newData) => { - if (newData && newData.length > 0) { - lx.choices = lx.choices.concat(newData); - } - }); - }); -} - -///////////////////////////// - -function SelectDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls, transclude) { - ctrls[0].setModelController(ctrls[1]); - - transclude( - scope, - (clone) => { - let choiceTemplate = ''; - - for (let i = 0; i < clone.length; i++) { - choiceTemplate += clone[i].data || clone[i].outerHTML || ''; - } - - ctrls[0].registerChoiceTemplate(choiceTemplate); - }, - null, - 'choices', - ); - - transclude( - scope, - (clone) => { - let selectedTemplate = ''; - - for (let i = 0; i < clone.length; i++) { - selectedTemplate += clone[i].data || clone[i].outerHTML || ''; - } - - ctrls[0].registerSelectedTemplate(selectedTemplate); - }, - null, - 'selected', - ); - } - - return { - bindToController: true, - controller: SelectController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxSelect', 'ngModel'], - restrict: 'E', - scope: { - choices: '=lxChoices', - choicesHelper: '@?lxChoicesHelper', - customColors: '=?lxCustomColors', - error: '@?lxError', - filter: '&?lxFilter', - hasChoicesHelper: '=?lxHasChoicesHelper', - hasError: '=?lxHasError', - hasFilter: '=?lxDisplayFilter', - helper: '@?lxHelper', - infiniteScroll: '&?lxInfiniteScroll', - isClearable: '=?lxAllowClear', - isDisabled: '=?ngDisabled', - isInfiniteScrollLoading: '=?lxInfiniteScrollLoading', - isLoading: '=?lxLoading', - isRequired: '=?lxIsRequired', - isValid: '=?lxIsValid', - label: '@?lxLabel', - max: '=?lxMax', - modelToSelection: '&?lxModelToSelection', - multiple: '=?lxMultiple', - placeholder: '@?lxPlaceholder', - selectionToModel: '&?lxSelectionToModel', - theme: '@?lxTheme', - variant: '@?lxVariant', - }, - template, - transclude: { - choices: 'lxSelectChoices', - selected: 'lxSelectSelected', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.select').directive('lxSelect', SelectDirective); - -///////////////////////////// - -export { SelectDirective }; diff --git a/packages/lumx-angularjs/src/components/side-navigation/side-navigation-item.html b/packages/lumx-angularjs/src/components/side-navigation/side-navigation-item.html deleted file mode 100644 index 31c696a58..000000000 --- a/packages/lumx-angularjs/src/components/side-navigation/side-navigation-item.html +++ /dev/null @@ -1,18 +0,0 @@ -
    • - - - {{ lx.label }} - - - -
        -
        • diff --git a/packages/lumx-angularjs/src/components/side-navigation/side-navigation-item_directive.js b/packages/lumx-angularjs/src/components/side-navigation/side-navigation-item_directive.js deleted file mode 100644 index 8859a9eb7..000000000 --- a/packages/lumx-angularjs/src/components/side-navigation/side-navigation-item_directive.js +++ /dev/null @@ -1,136 +0,0 @@ -import { mdiChevronDown, mdiChevronUp } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './side-navigation-item.html'; - -///////////////////////////// - -function SideNavigationItemController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - emphasis: 'medium', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has children slot filled or not. - * - * @type {boolean} - */ - lx.hasChildren = false; - - /** - * The side navigation item icons. - * - * @type {Object} - */ - lx.icons = { - mdiChevronDown, - mdiChevronUp, - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get side navigation item classes. - * - * @return {Array} The list of side navigation item classes. - */ - function getClasses() { - const classes = []; - - const emphasis = lx.emphasis ? lx.emphasis : _DEFAULT_PROPS.emphasis; - - classes.push(`${CSS_PREFIX}-side-navigation-item--emphasis-${emphasis}`); - - if (lx.isSelected) { - classes.push(`${CSS_PREFIX}-side-navigation-item--is-selected`); - } - - return classes; - } - - /** - * Handle click event on side navigation item link. - */ - function handleClick() { - if (angular.isFunction(lx.onClick)) { - lx.onClick(); - } else { - lx.isOpen = !lx.isOpen; - } - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.handleClick = handleClick; -} - -///////////////////////////// - -function SideNavigationItemDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - transclude((clone) => { - if (clone.length > 0) { - ctrl.hasChildren = true; - } - }); - } - - return { - bindToController: true, - controller: SideNavigationItemController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - emphasis: '@?lxEmphasis', - icon: '@?lxIcon', - isOpen: '=?lxIsOpen', - isSelected: '=?lxIsSelected', - label: '@lxLabel', - onClick: '&?lxOnClick', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.side-navigation').directive('lxSideNavigationItem', SideNavigationItemDirective); - -///////////////////////////// - -export { SideNavigationItemDirective }; diff --git a/packages/lumx-angularjs/src/components/side-navigation/side-navigation.html b/packages/lumx-angularjs/src/components/side-navigation/side-navigation.html deleted file mode 100644 index 930f374fd..000000000 --- a/packages/lumx-angularjs/src/components/side-navigation/side-navigation.html +++ /dev/null @@ -1 +0,0 @@ -
          diff --git a/packages/lumx-angularjs/src/components/side-navigation/side-navigation_directive.js b/packages/lumx-angularjs/src/components/side-navigation/side-navigation_directive.js deleted file mode 100644 index 459e7d841..000000000 --- a/packages/lumx-angularjs/src/components/side-navigation/side-navigation_directive.js +++ /dev/null @@ -1,64 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './side-navigation.html'; - -///////////////////////////// - -function SideNavigationController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get side navigation classes. - * - * @return {Array} The list of side navigation classes. - */ - function getClasses() { - const classes = []; - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function SideNavigationDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: SideNavigationController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.side-navigation').directive('lxSideNavigation', SideNavigationDirective); - -///////////////////////////// - -export { SideNavigationDirective }; diff --git a/packages/lumx-angularjs/src/components/slideshow/constants.js b/packages/lumx-angularjs/src/components/slideshow/constants.js deleted file mode 100644 index c247e5c92..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/constants.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * The autoplay default interval in ms. - */ -const AUTOPLAY_DEFAULT_INTERVAL = 5000; - -/** - * The full width size in percent. - */ -const FULL_WIDTH_PERCENT = 100; - -/** - * The edge from the active index. - */ -const EDGE_FROM_ACTIVE_INDEX = 2; - -/** - * The max number of pagination items. - */ -const PAGINATION_ITEMS_MAX = 5; - -/** - * The size of a pagination item. Used to translate wrapper. - */ -const PAGINATION_ITEM_SIZE = 12; - -export { - AUTOPLAY_DEFAULT_INTERVAL, - EDGE_FROM_ACTIVE_INDEX, - FULL_WIDTH_PERCENT, - PAGINATION_ITEMS_MAX, - PAGINATION_ITEM_SIZE, -}; diff --git a/packages/lumx-angularjs/src/components/slideshow/slideshow-controls.html b/packages/lumx-angularjs/src/components/slideshow/slideshow-controls.html deleted file mode 100644 index d5b0728ac..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/slideshow-controls.html +++ /dev/null @@ -1,37 +0,0 @@ -
          - - - - -
          -
          - -
          -
          - - - - -
          diff --git a/packages/lumx-angularjs/src/components/slideshow/slideshow-controls_directive.js b/packages/lumx-angularjs/src/components/slideshow/slideshow-controls_directive.js deleted file mode 100644 index 1dfa73ef3..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/slideshow-controls_directive.js +++ /dev/null @@ -1,338 +0,0 @@ -import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import { EDGE_FROM_ACTIVE_INDEX, PAGINATION_ITEMS_MAX, PAGINATION_ITEM_SIZE } from './constants'; - -import template from './slideshow-controls.html'; - -///////////////////////////// - -function SlideshowControlsController($element, $scope) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - /** - * The current slide index. - * - * @type {number} - */ - let _currentIndex = 0; - - /** - * The current transform offset. - * - * @type {number} - */ - let _curentTransformOffset = 0; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The slideshow controls icons. - * - * @type {Object} - */ - lx.icons = { - mdiChevronLeft, - mdiChevronRight, - }; - - /** - * The max number of pagination items. - * - * @type {number} - */ - lx.paginationItemsMax = PAGINATION_ITEMS_MAX; - - /** - * The pagination items range. - * - * @type {Array} - */ - lx.paginationItemsRange = []; - - /** - * The pagination items visible range. - * - * @type {Array} - */ - lx.paginationItemsVisibleRange = []; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Move pagination wrapper according to current transform offset. - */ - function _movePaginationWrapper() { - const paginationItemsWrapper = $element.find(`.${CSS_PREFIX}-slideshow-controls__pagination-items`); - - paginationItemsWrapper.css({ - transform: `translateX(-${_curentTransformOffset}px)`, - }); - } - - /** - * Initialize pagination items state. - */ - function _initPaginationItemsState() { - let minRange = lx.activeIndex - EDGE_FROM_ACTIVE_INDEX; - let maxRange = lx.activeIndex + EDGE_FROM_ACTIVE_INDEX; - - if (minRange < 0) { - for (let i = minRange; i < 0; i++) { - minRange++; - maxRange++; - } - } else if (maxRange > lx.slidesCount - 1) { - for (let i = maxRange; i > lx.slidesCount - 1; i--) { - minRange--; - maxRange--; - } - } - - lx.paginationItemsVisibleRange = [minRange, maxRange]; - - _curentTransformOffset = PAGINATION_ITEM_SIZE * minRange; - - _movePaginationWrapper(); - } - - /** - * Set pagination items range. - */ - function _setPaginationItemsRange() { - const range = []; - - for (let i = 0; i < lx.slidesCount; i++) { - range.push(i); - } - - lx.paginationItemsRange = range; - } - - /** - * Update pagination items state on slide change. - */ - function _updatePaginationItemsState() { - const firstSlideIndex = 0; - const lastSlideIndex = lx.slidesCount - 1; - - let [minRange, maxRange] = lx.paginationItemsVisibleRange; - - if (lx.activeIndex > _currentIndex) { - if (lx.activeIndex === maxRange && lx.activeIndex !== lastSlideIndex) { - minRange++; - maxRange++; - - _curentTransformOffset += PAGINATION_ITEM_SIZE; - } - } else if (lx.activeIndex < _currentIndex) { - if (lx.activeIndex === minRange && lx.activeIndex !== firstSlideIndex) { - minRange--; - maxRange--; - - _curentTransformOffset -= PAGINATION_ITEM_SIZE; - } - } - - lx.paginationItemsVisibleRange = [minRange, maxRange]; - - _movePaginationWrapper(); - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get slideshow controls classes. - * - * @return {Array} The list of slideshow controls classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - classes.push(`${CSS_PREFIX}-slideshow-controls--theme-${theme}`); - - if (lx.slidesCount > lx.paginationItemsMax) { - classes.push(`${CSS_PREFIX}-slideshow-controls--has-infinite-pagination`); - } - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Go to the given slide index. - * - * @param {number} newIndex The new slide index. - */ - function goToSlide(newIndex) { - lx.activeIndex = newIndex; - - if (angular.isFunction(lx.onPaginationClick)) { - lx.onPaginationClick(); - } - } - - /** - * Check if the pagination item is on edge, indicating other slides after or before. - * - * @param {number} index The index of the pagination item to check. - * @return {boolean} Whether the pagination item is on edge or not. - */ - function isPaginationItemOnEdge(index) { - return index !== 0 && index !== lx.slidesCount - 1 && lx.paginationItemsVisibleRange.includes(index); - } - - /** - * Check if the pagination item is out of the visible range. - * - * @param {number} index The index of the pagination item to check. - * @return {boolean} Whether the pagination item is out of the visible range or not. - */ - function isPaginationItemOutVisibleRange(index) { - return index < lx.paginationItemsVisibleRange[0] || index > lx.paginationItemsVisibleRange[1]; - } - - /** - * Go to next slide. - */ - function nextSlide() { - if (lx.activeIndex + 1 === lx.slidesCount) { - lx.activeIndex = 0; - } else { - lx.activeIndex++; - } - - if (angular.isFunction(lx.onNextClick)) { - lx.onNextClick(); - } - } - - /** - * Go to previous slide. - */ - function previousSlide() { - if (lx.activeIndex === 0) { - lx.activeIndex = lx.slidesCount - 1; - } else { - lx.activeIndex--; - } - - if (angular.isFunction(lx.onPreviousClick)) { - lx.onPreviousClick(); - } - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.goToSlide = goToSlide; - lx.isPaginationItemOnEdge = isPaginationItemOnEdge; - lx.isPaginationItemOutVisibleRange = isPaginationItemOutVisibleRange; - lx.nextSlide = nextSlide; - lx.previousSlide = previousSlide; - - ///////////////////////////// - // // - // Watchers // - // // - ///////////////////////////// - - /** - * Watch for any changes of the active index to update pagination items. - * - * @param {number} newIndex The new slide index. - */ - $scope.$watch('lx.activeIndex', (newIndex, oldIndex) => { - if (angular.isUndefined(newIndex)) { - return; - } - - _setPaginationItemsRange(); - - if (lx.slidesCount > lx.paginationItemsMax) { - const firstSlideIndex = 0; - const lastSlideIndex = lx.slidesCount - 1; - - if ( - newIndex === oldIndex || - (oldIndex === firstSlideIndex && newIndex === lastSlideIndex) || - (oldIndex === lastSlideIndex && newIndex === firstSlideIndex) - ) { - _initPaginationItemsState(); - } else { - _updatePaginationItemsState(); - } - } - - _currentIndex = lx.activeIndex; - }); -} - -///////////////////////////// - -function SlideshowControlsDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: SlideshowControlsController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - activeIndex: '=?lxActiveIndex', - customColors: '=?lxCustomColors', - onNextClick: '&?lxOnNextClick', - onPaginationClick: '&?lxOnPaginationClick', - onPreviousClick: '&?lxOnPreviousClick', - slidesCount: '=lxSlidesCount', - theme: '@?lxTheme', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.slideshow').directive('lxSlideshowControls', SlideshowControlsDirective); - -///////////////////////////// - -export { SlideshowControlsDirective }; diff --git a/packages/lumx-angularjs/src/components/slideshow/slideshow-item.html b/packages/lumx-angularjs/src/components/slideshow/slideshow-item.html deleted file mode 100644 index a29d35694..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/slideshow-item.html +++ /dev/null @@ -1 +0,0 @@ -
          diff --git a/packages/lumx-angularjs/src/components/slideshow/slideshow-item_directive.js b/packages/lumx-angularjs/src/components/slideshow/slideshow-item_directive.js deleted file mode 100644 index 61571bfc1..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/slideshow-item_directive.js +++ /dev/null @@ -1,29 +0,0 @@ -import template from './slideshow-item.html'; - -///////////////////////////// - -function SlideshowItemDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - ctrl.itemsCount++; - ctrl.updateSlidesCount(); - } - - return { - link, - replace: true, - restrict: 'E', - require: '^lxSlideshow', - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.slideshow').directive('lxSlideshowItem', SlideshowItemDirective); - -///////////////////////////// - -export { SlideshowItemDirective }; diff --git a/packages/lumx-angularjs/src/components/slideshow/slideshow.html b/packages/lumx-angularjs/src/components/slideshow/slideshow.html deleted file mode 100644 index de844fa59..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/slideshow.html +++ /dev/null @@ -1,17 +0,0 @@ -
          -
          -
          -
          - -
          - -
          -
          diff --git a/packages/lumx-angularjs/src/components/slideshow/slideshow_directive.js b/packages/lumx-angularjs/src/components/slideshow/slideshow_directive.js deleted file mode 100644 index 89b0117a5..000000000 --- a/packages/lumx-angularjs/src/components/slideshow/slideshow_directive.js +++ /dev/null @@ -1,309 +0,0 @@ -import { CSS_PREFIX, LEFT_KEY_CODE, RIGHT_KEY_CODE } from '@lumx/core/js/constants'; - -import { AUTOPLAY_DEFAULT_INTERVAL, FULL_WIDTH_PERCENT } from './constants'; - -import template from './slideshow.html'; - -///////////////////////////// - -function SlideshowController($element, $interval, $scope) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - groupBy: '1', - theme: 'light', - }; - - /** - * The current slide index. - * - * @type {number} - */ - let _curentIndex = 0; - - /** - * The current transform offset. - * - * @type {number} - */ - let _curentTransformOffset = 0; - - /** - * The autoplay interval. - * - * @type {number} - */ - let _autoPlayInterval; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The slide default active index. - * - * @type {number} - */ - lx.activeIndex = 0; - - /** - * The number of slideshow items. - * - * @type {number} - */ - lx.itemsCount = 0; - - /** - * The number of slides. - * - * @type {number} - */ - lx.slidesCount = 0; - - /** - * The slideshow wrapper style. - * - * @type {Object} - */ - lx.wrapperStyle = { - transform: 'translate3d(0%, 0, 0)', - }; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Go to the given slide index. - * - * @param {number} newIndex The new slide index. - */ - function _goToSlide(newIndex) { - if (newIndex > _curentIndex) { - _curentTransformOffset -= FULL_WIDTH_PERCENT * (newIndex - _curentIndex); - } else { - _curentTransformOffset += FULL_WIDTH_PERCENT * (_curentIndex - newIndex); - } - - _curentIndex = newIndex; - - lx.wrapperStyle.transform = `translateX(${_curentTransformOffset}%)`; - } - - /** - * Go to next slide. - */ - function _nextSlide() { - if (lx.activeIndex + 1 === lx.slidesCount) { - lx.activeIndex = 0; - } else { - lx.activeIndex++; - } - } - - /** - * Go to previous slide. - */ - function _previousSlide() { - if (lx.activeIndex === 0) { - lx.activeIndex = lx.slidesCount - 1; - } else { - lx.activeIndex--; - } - } - - /** - * Handle key events on slideshow focus. - * - * @param {Event} evt The key event. - */ - function _onKeyPress(evt) { - if (evt.keyCode === LEFT_KEY_CODE) { - _previousSlide(); - - lx.stopAutoPlay(); - - $scope.$apply(); - - evt.preventDefault(); - evt.stopPropagation(); - } else if (evt.keyCode === RIGHT_KEY_CODE) { - _nextSlide(); - - lx.stopAutoPlay(); - - $scope.$apply(); - - evt.preventDefault(); - evt.stopPropagation(); - } - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get slideshow classes. - * - * @return {Array} The list of slideshow classes. - */ - function getClasses() { - const classes = []; - - const groupBy = lx.groupBy ? lx.groupBy : _DEFAULT_PROPS.groupBy; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-slideshow--group-by-${groupBy}`); - classes.push(`${CSS_PREFIX}-slideshow--theme-${theme}`); - - if (lx.fillHeight) { - classes.push(`${CSS_PREFIX}-slideshow--fill-height`); - } - - return classes; - } - - /** - * Start auto play. - */ - function startAutoPlay() { - if (angular.isUndefined(lx.autoPlayInterval)) { - lx.autoPlayInterval = AUTOPLAY_DEFAULT_INTERVAL; - } - - _autoPlayInterval = $interval(_nextSlide, lx.autoPlayInterval); - } - - /** - * Stop auto play. - */ - function stopAutoPlay() { - if (angular.isUndefined(_autoPlayInterval)) { - return; - } - - $interval.cancel(_autoPlayInterval); - _autoPlayInterval = undefined; - } - - /** - * Update the number of slides according to the number of slideshow items and the group by parameter. - */ - function updateSlidesCount() { - if (angular.isUndefined(lx.groupBy)) { - lx.groupBy = 1; - } - - lx.slidesCount = Math.ceil(lx.itemsCount / lx.groupBy); - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.startAutoPlay = startAutoPlay; - lx.stopAutoPlay = stopAutoPlay; - lx.updateSlidesCount = updateSlidesCount; - - ///////////////////////////// - // // - // Events // - // // - ///////////////////////////// - - /** - * Navigate through slides on left and right arrow key press. - */ - $element.on('keydown keypress', _onKeyPress); - - /** - * Unbind event listener on destroy. - */ - $scope.$on('$destroy', () => { - $element.off('keydown keypress', _onKeyPress); - }); - - ///////////////////////////// - // // - // Watchers // - // // - ///////////////////////////// - - /** - * Watch for any changes of the active index to go to corresping slide. - * - * @param {number} newIndex The new slide index. - */ - $scope.$watch('lx.activeIndex', (newIndex) => { - if (angular.isDefined(newIndex)) { - _goToSlide(newIndex); - } - }); -} - -///////////////////////////// - -function SlideshowDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - attrs.$observe('lumxAutoPlay', (autoPlay) => { - if (scope.$eval(autoPlay)) { - ctrl.startAutoPlay(); - } else { - ctrl.stopAutoPlay(); - } - }); - } - - return { - bindToController: true, - controller: SlideshowController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - activeIndex: '=?lxActiveIndex', - autoPlay: '=?lxAutoPlay', - autoPlayInterval: '@?lxAutoPlayInterval', - customColors: '=?lxCustomColors', - fillHeight: '=?lxFillHeight', - groupBy: '=?lxGroupBy', - hasControls: '=?lxHasControls', - theme: '@?lxTheme', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.slideshow').directive('lxSlideshow', SlideshowDirective); - -///////////////////////////// - -export { SlideshowDirective }; diff --git a/packages/lumx-angularjs/src/components/switch/switch.html b/packages/lumx-angularjs/src/components/switch/switch.html deleted file mode 100644 index d68dbb977..000000000 --- a/packages/lumx-angularjs/src/components/switch/switch.html +++ /dev/null @@ -1,32 +0,0 @@ -
          -
          - - -
          -
          -
          -
          -
          - -
          - - - -
          - -
          - - - - - - - -
          -
          diff --git a/packages/lumx-angularjs/src/components/switch/switch_directive.js b/packages/lumx-angularjs/src/components/switch/switch_directive.js deleted file mode 100644 index d0a012f7b..000000000 --- a/packages/lumx-angularjs/src/components/switch/switch_directive.js +++ /dev/null @@ -1,212 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './switch.html'; - -///////////////////////////// - -function SwitchController(LxUtilsService) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - position: 'left', - theme: 'light', - }; - - /** - * The model controller. - * - * @type {Object} - */ - let _modelController; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The switch id. - * - * @type {string} - */ - lx.switchId = LxUtilsService.generateUUID(); - - /** - * Whether the directive has helper slot filled or not. - * - * @type {boolean} - */ - lx.hasHelper = false; - - /** - * Whether the directive has label slot filled or not. - * - * @type {boolean} - */ - lx.hasLabel = false; - - /** - * Whether the directive has transcluded content if no transclude slot. - * - * @type {boolean} - */ - lx.hasTranscluded = false; - - /** - * The model view value. - * - * @type {string} - */ - lx.viewValue = undefined; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get switch classes. - * - * @return {Array} The list of switch classes. - */ - function getClasses() { - const classes = []; - - const position = lx.position ? lx.position : _DEFAULT_PROPS.position; - const state = lx.viewValue ? 'checked' : 'unchecked'; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-switch--position-${position}`); - classes.push(`${CSS_PREFIX}-switch--is-${state}`); - classes.push(`${CSS_PREFIX}-switch--theme-${theme}`); - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Set the model controller. - * - * @param {Object} modelController The model controller. - */ - function setModelController(modelController) { - _modelController = modelController; - - _modelController.$render = function onModelRender() { - lx.viewValue = _modelController.$viewValue; - }; - } - - /** - * Update model controller view value on switch click. - */ - function updateViewValue() { - if (angular.isUndefined(_modelController)) { - lx.viewValue = !lx.viewValue; - - return; - } - - _modelController.$setViewValue(!_modelController.$viewValue); - _modelController.$render(); - } - - ///////////////////////////// - - lx.getClasses = getClasses; - lx.setModelController = setModelController; - lx.updateViewValue = updateViewValue; -} - -///////////////////////////// - -function SwitchDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls, transclude) { - if (ctrls[1]) { - ctrls[0].setModelController(ctrls[1]); - } - - if (transclude.isSlotFilled('label')) { - ctrls[0].hasLabel = true; - } - - if (transclude.isSlotFilled('helper')) { - ctrls[0].hasHelper = true; - } - - if (!ctrls[0].hasLabel && !ctrls[0].hasHelper) { - transclude((clone) => { - if (clone.length > 0) { - ctrls[0].hasTranscluded = true; - } - }); - } - - attrs.$observe('disabled', (isDisabled) => { - el.find('input').attr('disabled', isDisabled); - - if (isDisabled) { - el.addClass(`${CSS_PREFIX}-switch--is-disabled`); - } else { - el.removeClass(`${CSS_PREFIX}-switch--is-disabled`); - } - }); - - attrs.$observe('checked', (isChecked) => { - el.find('input').attr('checked', isChecked); - - ctrls[0].viewValue = isChecked; - }); - } - - return { - bindToController: true, - controller: SwitchController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxSwitch', '?ngModel'], - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - position: '@?lxPosition', - theme: '@?lxTheme', - }, - template, - transclude: { - helper: '?lxSwitchHelper', - label: '?lxSwitchLabel', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.switch').directive('lxSwitch', SwitchDirective); - -///////////////////////////// - -export { SwitchDirective }; diff --git a/packages/lumx-angularjs/src/components/table/table-body_directive.js b/packages/lumx-angularjs/src/components/table/table-body_directive.js deleted file mode 100644 index d3820d50f..000000000 --- a/packages/lumx-angularjs/src/components/table/table-body_directive.js +++ /dev/null @@ -1,31 +0,0 @@ -function TableBodyController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this, no-unused-vars - const lx = this; -} - -///////////////////////////// - -function TableBodyDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: TableBodyController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: {}, - template: '', - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.table').directive('lxTableBody', TableBodyDirective); - -///////////////////////////// - -export { TableBodyDirective }; diff --git a/packages/lumx-angularjs/src/components/table/table-cell-body.html b/packages/lumx-angularjs/src/components/table/table-cell-body.html deleted file mode 100644 index 2dd55ef81..000000000 --- a/packages/lumx-angularjs/src/components/table/table-cell-body.html +++ /dev/null @@ -1,3 +0,0 @@ - -
          - diff --git a/packages/lumx-angularjs/src/components/table/table-cell-body_directive.js b/packages/lumx-angularjs/src/components/table/table-cell-body_directive.js deleted file mode 100644 index 3b42af9ed..000000000 --- a/packages/lumx-angularjs/src/components/table/table-cell-body_directive.js +++ /dev/null @@ -1,23 +0,0 @@ -import template from './table-cell-body.html'; - -///////////////////////////// - -function TableCellBodyDirective() { - 'ngInject'; - - return { - replace: true, - restrict: 'E', - scope: {}, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.table').directive('lxTableCellBody', TableCellBodyDirective); - -///////////////////////////// - -export { TableCellBodyDirective }; diff --git a/packages/lumx-angularjs/src/components/table/table-cell-head.html b/packages/lumx-angularjs/src/components/table/table-cell-head.html deleted file mode 100644 index ae7edaf98..000000000 --- a/packages/lumx-angularjs/src/components/table/table-cell-head.html +++ /dev/null @@ -1,32 +0,0 @@ - -
          - - - - - - -
          -
          - diff --git a/packages/lumx-angularjs/src/components/table/table-cell-head_directive.js b/packages/lumx-angularjs/src/components/table/table-cell-head_directive.js deleted file mode 100644 index 9d3abd83c..000000000 --- a/packages/lumx-angularjs/src/components/table/table-cell-head_directive.js +++ /dev/null @@ -1,58 +0,0 @@ -import { mdiArrowDown, mdiArrowUp } from '@lumx/icons'; - -import template from './table-cell-head.html'; - -///////////////////////////// - -function TableCellHeadController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The table icons. - * - * @type {Object} - */ - lx.icons = { - mdiArrowDown, - mdiArrowUp, - }; -} - -///////////////////////////// - -function TableCellHeadDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: TableCellHeadController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - icon: '@?lxIcon', - isSortable: '=?lxIsSortable', - scope: '@?lxScope', - sortOrder: '@?lxSortOrder', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.table').directive('lxTableCellHead', TableCellHeadDirective); - -///////////////////////////// - -export { TableCellHeadDirective }; diff --git a/packages/lumx-angularjs/src/components/table/table-head_directive.js b/packages/lumx-angularjs/src/components/table/table-head_directive.js deleted file mode 100644 index d76ddeb88..000000000 --- a/packages/lumx-angularjs/src/components/table/table-head_directive.js +++ /dev/null @@ -1,31 +0,0 @@ -function TableHeadController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this, no-unused-vars - const lx = this; -} - -///////////////////////////// - -function TableHeadDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: TableHeadController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: {}, - template: '', - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.table').directive('lxTableHead', TableHeadDirective); - -///////////////////////////// - -export { TableHeadDirective }; diff --git a/packages/lumx-angularjs/src/components/table/table-row.html b/packages/lumx-angularjs/src/components/table/table-row.html deleted file mode 100644 index d5ae02f55..000000000 --- a/packages/lumx-angularjs/src/components/table/table-row.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/packages/lumx-angularjs/src/components/table/table-row_directive.js b/packages/lumx-angularjs/src/components/table/table-row_directive.js deleted file mode 100644 index 733d6e0fa..000000000 --- a/packages/lumx-angularjs/src/components/table/table-row_directive.js +++ /dev/null @@ -1,61 +0,0 @@ -import template from './table-row.html'; - -///////////////////////////// - -function TableRowController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The parent controller (table). - * - * @type {Object} - */ - lx.parentController = undefined; -} - -///////////////////////////// - -function TableRowDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls) { - if (angular.isDefined(ctrls[2]) && ctrls[2]) { - // eslint-disable-next-line prefer-destructuring - ctrls[0].parentController = ctrls[1]; - } - } - - return { - bindToController: true, - controller: TableRowController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxTableRow', '^lxTable', '?^lxTableBody'], - restrict: 'E', - scope: { - isClickable: '=?lxIsClickable', - isDisabled: '=?lxIsDisabled', - isSelected: '=?lxIsSelected', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.table').directive('lxTableRow', TableRowDirective); - -///////////////////////////// - -export { TableRowDirective }; diff --git a/packages/lumx-angularjs/src/components/table/table.html b/packages/lumx-angularjs/src/components/table/table.html deleted file mode 100644 index c6cc4653a..000000000 --- a/packages/lumx-angularjs/src/components/table/table.html +++ /dev/null @@ -1 +0,0 @@ -
          diff --git a/packages/lumx-angularjs/src/components/table/table_directive.js b/packages/lumx-angularjs/src/components/table/table_directive.js deleted file mode 100644 index bba544d23..000000000 --- a/packages/lumx-angularjs/src/components/table/table_directive.js +++ /dev/null @@ -1,96 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './table.html'; - -///////////////////////////// - -function TableController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get table classes. - * - * @return {Array} The list of table classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-table--theme-${theme}`); - - if (lx.hasBefore) { - classes.push(`${CSS_PREFIX}-table--has-before`); - } - - if (lx.hasDividers) { - classes.push(`${CSS_PREFIX}-table--has-dividers`); - } - - if (lx.isClickable) { - classes.push(`${CSS_PREFIX}-table--is-clickable`); - } - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function TableDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: TableController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - hasBefore: '=?lxHasBefore', - hasDividers: '=?lxHasDividers', - isClickable: '=?lxIsClickable', - theme: '@?lxTheme', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.table').directive('lxTable', TableDirective); - -///////////////////////////// - -export { TableDirective }; diff --git a/packages/lumx-angularjs/src/components/tabs/tab.html b/packages/lumx-angularjs/src/components/tabs/tab.html deleted file mode 100644 index b86ffd869..000000000 --- a/packages/lumx-angularjs/src/components/tabs/tab.html +++ /dev/null @@ -1,3 +0,0 @@ -
          -
          -
          diff --git a/packages/lumx-angularjs/src/components/tabs/tab_directive.js b/packages/lumx-angularjs/src/components/tabs/tab_directive.js deleted file mode 100644 index 09ec6e64a..000000000 --- a/packages/lumx-angularjs/src/components/tabs/tab_directive.js +++ /dev/null @@ -1,134 +0,0 @@ -import template from './tab.html'; - -///////////////////////////// - -function TabController($scope, LxUtilsService) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The parent controller. - * - * @type {Object} - */ - let _parentController; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The current tab properties. - * - * @type {Object} - */ - lx.tab = {}; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Check if the current tab is active. - * - * @return {boolean} Whether the current tab is active or not. - */ - function isTabActive() { - return _parentController.isTabActive(lx.tab.index); - } - - /** - * Register the tab to the parent controller at init. - * - * @param {Object} parentController The parent controller. - * @param {number} tabIndex The tab index. - */ - function registerTab(parentController, tabIndex) { - _parentController = parentController; - - lx.tab = { - icon: lx.icon, - index: tabIndex, - label: lx.label, - uuid: LxUtilsService.generateUUID(), - }; - - _parentController.addTab(lx.tab); - } - - ///////////////////////////// - - lx.isTabActive = isTabActive; - lx.registerTab = registerTab; - - ///////////////////////////// - // // - // Watchers // - // // - ///////////////////////////// - - /** - * Watch for any changes of the current tab disabled state. - * - * @param {boolean} isDisabled Whether the tab is disabled or not. - */ - $scope.$watch('lx.isDisabled', function isDisableddWatcher(isDisabled) { - lx.tab.isDisabled = isDisabled; - - _parentController.updateTab(lx.tab); - }); - - /** - * Remove the current tab on destroy. - */ - $scope.$on('$destroy', () => { - _parentController.removeTab(lx.tab); - }); -} - -///////////////////////////// - -function TabDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrls) { - ctrls[0].registerTab(ctrls[1], el.index()); - } - - return { - bindToController: true, - controller: TabController, - controllerAs: 'lx', - link, - replace: true, - require: ['lxTab', '^lxTabs'], - restrict: 'E', - scope: { - icon: '@?lxIcon', - isDisabled: '=?ngDisabled', - label: '@?lxLabel', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.tabs').directive('lxTab', TabDirective); - -///////////////////////////// - -export { TabDirective }; diff --git a/packages/lumx-angularjs/src/components/tabs/tabs.html b/packages/lumx-angularjs/src/components/tabs/tabs.html deleted file mode 100644 index fc8372a2c..000000000 --- a/packages/lumx-angularjs/src/components/tabs/tabs.html +++ /dev/null @@ -1,18 +0,0 @@ -
          -
          - - - {{ tab.label }} - -
          - -
          -
          diff --git a/packages/lumx-angularjs/src/components/tabs/tabs_directive.js b/packages/lumx-angularjs/src/components/tabs/tabs_directive.js deleted file mode 100644 index 910b63087..000000000 --- a/packages/lumx-angularjs/src/components/tabs/tabs_directive.js +++ /dev/null @@ -1,182 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './tabs.html'; - -///////////////////////////// - -function TabsController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - layout: 'fixed', - position: 'left', - theme: 'light', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * The lactive tab index. - * - * @type {number} - */ - lx.activeTab = angular.isDefined(lx.activeTab) ? lx.activeTab : 0; - - /** - * The list of tabs. - * - * @type {Array} - */ - lx.tabs = []; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Add a tab to the list of tabs. - * - * @param {Object} tabToAdd The tab to add. - */ - function addTab(tabToAdd) { - lx.tabs.push(tabToAdd); - } - - /** - * Get tabs classes. - * - * @return {Array} The list of tabs classes. - */ - function getClasses() { - const classes = []; - - const layout = lx.layout ? lx.layout : _DEFAULT_PROPS.layout; - const position = lx.position ? lx.position : _DEFAULT_PROPS.position; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-tabs--layout-${layout}`); - classes.push(`${CSS_PREFIX}-tabs--position-${position}`); - classes.push(`${CSS_PREFIX}-tabs--theme-${theme}`); - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Check if a given tab is active. - * - * @param {number} tabIndex The tab index. - * @return {boolean} Whether the given tab is active or not. - */ - function isTabActive(tabIndex) { - return lx.activeTab === tabIndex; - } - - /** - * Remove the given tab. - * - * @param {Object} tabToRemove The tab to remove. - */ - function removeTab(tabToRemove) { - lx.tabs.splice(tabToRemove.index, 1); - - angular.forEach(lx.tabs, (tab, index) => { - tab.index = index; - }); - - if (lx.tabs.length > 0) { - lx.setActiveTab(lx.tabs[0]); - } - } - - /** - * Set the given tab as active. - * - * @param {Object} tab The tab. - */ - function setActiveTab(tab) { - if (tab.isDisabled) { - return; - } - - lx.activeTab = tab.index; - } - - /** - * Update the given tab. - * - * @param {Object} updatedTab The tab to update. - */ - function updateTab(updatedTab) { - angular.forEach(lx.tabs, (tab) => { - if (tab.uuid === updatedTab.uuid) { - tab = updatedTab; - } - }); - } - - ///////////////////////////// - - lx.addTab = addTab; - lx.getClasses = getClasses; - lx.isTabActive = isTabActive; - lx.removeTab = removeTab; - lx.setActiveTab = setActiveTab; - lx.updateTab = updateTab; -} - -///////////////////////////// - -function TabsDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: TabsController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - activeTab: '=?lxActiveTab', - customColors: '=?lxCustomColors', - layout: '@?lxLayout', - position: '@?lxPosition', - theme: '@?lxTheme', - }, - template, - transclude: true, - }; -} - -///////////////////////////// - -angular.module('lumx.tabs').directive('lxTabs', TabsDirective); - -///////////////////////////// - -export { TabsDirective }; diff --git a/packages/lumx-angularjs/src/components/text-field/text-field.html b/packages/lumx-angularjs/src/components/text-field/text-field.html deleted file mode 100644 index 583b1d5e9..000000000 --- a/packages/lumx-angularjs/src/components/text-field/text-field.html +++ /dev/null @@ -1,52 +0,0 @@ -
          -
          - - {{ lx.label }} - - -
          - {{ lx.maxlength - lx.getValueLength() }} - - -
          -
          - -
          - - -
          -
          - - - - - - -
          - - - {{ lx.error }} - - - - {{ lx.helper }} - -
          diff --git a/packages/lumx-angularjs/src/components/text-field/text-field_directive.js b/packages/lumx-angularjs/src/components/text-field/text-field_directive.js deleted file mode 100644 index 0f7d7f1b0..000000000 --- a/packages/lumx-angularjs/src/components/text-field/text-field_directive.js +++ /dev/null @@ -1,341 +0,0 @@ -import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons'; - -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './text-field.html'; - -///////////////////////////// - -function TextFieldController(LxUtilsService) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - theme: 'light', - }; - - /** - * The model controller. - * - * @type {Object} - */ - let _modelController; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has chips slot filled or not. - * - * @type {boolean} - */ - lx.hasChips = false; - - /** - * Whether the directive has input slot filled or not. - * - * @type {boolean} - */ - lx.hasInput = false; - - /** - * The text field icons. - * - * @type {Object} - */ - lx.icons = { - mdiAlertCircle, - mdiCheckCircle, - mdiCloseCircle, - }; - - /** - * The input id. - * - * @type {string} - */ - lx.inputId = LxUtilsService.generateUUID(); - - /** - * The text field max length. - * - * @type {number} - */ - lx.maxlength = undefined; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Clear the model on clear button click. - * - * @param {Event} [evt] The event that triggered the function. - */ - function clearModel(evt) { - if (angular.isDefined(evt)) { - evt.stopPropagation(); - } - - _modelController.$setViewValue(undefined); - _modelController.$render(); - } - - /** - * Get text field classes. - * - * @return {Array} The list of text field classes. - */ - function getClasses() { - const classes = []; - - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-text-field--theme-${theme}`); - - if (lx.hasChips) { - classes.push(`${CSS_PREFIX}-text-field--has-chips`); - } - - if (lx.hasError) { - classes.push(`${CSS_PREFIX}-text-field--has-error`); - } - - if (lx.icon) { - classes.push(`${CSS_PREFIX}-text-field--has-icon`); - } - - if (lx.isClearable && lx.getValueLength() > 0) { - classes.push(`${CSS_PREFIX}-text-field--has-input-clear`); - } - - if (lx.label) { - classes.push(`${CSS_PREFIX}-text-field--has-label`); - } - - if (lx.getValueLength() > 0) { - classes.push(`${CSS_PREFIX}-text-field--has-value`); - } - - if (lx.isValid) { - classes.push(`${CSS_PREFIX}-text-field--is-valid`); - } - - if (lx.customColors) { - classes.push(`${CSS_PREFIX}-custom-colors`); - } - - return classes; - } - - /** - * Get the input value length. - * - * @return {number} The input value length. - */ - function getValueLength() { - if (angular.isUndefined(_modelController) || angular.isUndefined(_modelController.$viewValue)) { - return false; - } - - return _modelController.$viewValue.length; - } - - /** - * Set the model controller. - * - * @param {Object} modelController The model controller. - */ - function setModelController(modelController) { - _modelController = modelController; - } - - ///////////////////////////// - - lx.clearModel = clearModel; - lx.getClasses = getClasses; - lx.getValueLength = getValueLength; - lx.setModelController = setModelController; -} - -///////////////////////////// - -function TextFieldDirective($timeout) { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('chips')) { - ctrl.hasChips = true; - } - - if (transclude.isSlotFilled('input')) { - ctrl.hasInput = true; - } - - let input; - - $timeout(() => { - input = el.find('input'); - - if (input.length === 1) { - input.addClass(`${CSS_PREFIX}-text-field__input-native ${CSS_PREFIX}-text-field__input-native--text`); - el.addClass(`${CSS_PREFIX}-text-field--has-input`); - } else { - const minRows = 2; - - input = el.find('textarea'); - - input - .addClass(`${CSS_PREFIX}-text-field__input-native ${CSS_PREFIX}-text-field__input-native--textarea`) - .on('input', (evt) => { - evt.target.rows = minRows; - const currentRows = evt.target.scrollHeight / (evt.target.clientHeight / minRows); - evt.target.rows = currentRows; - }); - - el.addClass(`${CSS_PREFIX}-text-field--has-textarea`); - } - - if (input.attr('id')) { - ctrl.inputId = input.attr('id'); - } else { - input.attr('id', ctrl.inputId); - } - - input - .on('focus', () => { - el.addClass(`${CSS_PREFIX}-text-field--is-focus`); - }) - .on('blur', () => { - el.removeClass(`${CSS_PREFIX}-text-field--is-focus`); - }); - - ctrl.setModelController(input.data('$ngModelController')); - - scope.$watch( - () => { - return input.attr('disabled'); - }, - (isDisabled) => { - if (isDisabled) { - el.addClass(`${CSS_PREFIX}-text-field--is-disabled`); - } else { - el.removeClass(`${CSS_PREFIX}-text-field--is-disabled`); - } - }, - ); - - scope.$watch( - () => { - return input.attr('placeholder'); - }, - (placeholder) => { - if (angular.isDefined(placeholder) && placeholder.length > 0) { - el.addClass(`${CSS_PREFIX}-text-field--has-placeholder`); - } else { - el.removeClass(`${CSS_PREFIX}-text-field--has-placeholder`); - } - }, - ); - - scope.$watch( - () => { - return input.attr('maxlength'); - }, - (maxlength) => { - ctrl.maxlength = maxlength; - }, - ); - - scope.$watch( - () => { - return input.attr('required'); - }, - (isRequired) => { - ctrl.isRequired = isRequired; - }, - ); - }); - - attrs.$observe('disabled', (isDisabled) => { - if (isDisabled) { - el.addClass(`${CSS_PREFIX}-text-field--is-disabled`); - } else { - el.removeClass(`${CSS_PREFIX}-text-field--is-disabled`); - } - }); - - scope.$watch( - () => { - return ctrl.focus; - }, - (isfocus) => { - if (angular.isDefined(isfocus) && isfocus) { - $timeout(() => { - input.focus(); - - ctrl.focus = false; - }); - } - }, - ); - - scope.$on('$destroy', () => { - input.off(); - }); - } - - return { - bindToController: true, - controller: TextFieldController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - customColors: '=?lxCustomColors', - error: '@?lxError', - focus: '=?lxFocus', - hasError: '=?lxHasError', - helper: '@?lxHelper', - icon: '@?lxIcon', - isClearable: '=?lxAllowClear', - isValid: '=?lxIsValid', - label: '@?lxLabel', - theme: '@?lxTheme', - }, - template, - transclude: { - chips: '?lxTextFieldChips', - input: '?lxTextFieldInput', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.text-field').directive('lxTextField', TextFieldDirective); - -///////////////////////////// - -export { TextFieldDirective }; diff --git a/packages/lumx-angularjs/src/components/thumbnail/thumbnail.html b/packages/lumx-angularjs/src/components/thumbnail/thumbnail.html deleted file mode 100644 index a3e23783a..000000000 --- a/packages/lumx-angularjs/src/components/thumbnail/thumbnail.html +++ /dev/null @@ -1,13 +0,0 @@ -
          -
          - - -
          diff --git a/packages/lumx-angularjs/src/components/thumbnail/thumbnail_directive.js b/packages/lumx-angularjs/src/components/thumbnail/thumbnail_directive.js deleted file mode 100644 index e1b4dbb76..000000000 --- a/packages/lumx-angularjs/src/components/thumbnail/thumbnail_directive.js +++ /dev/null @@ -1,119 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './thumbnail.html'; - -///////////////////////////// - -function ThumbnailController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - align: 'left', - aspectRatio: 'original', - theme: 'light', - variant: 'squared', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get background image according to image url. - * - * @return {Object} The image style properties. - */ - function getBackgroundImage() { - if (angular.isUndefined(lx.aspectRatio) || lx.aspectRatio === 'original') { - return {}; - } - - return { - backgroundImage: `url(${lx.image})`, - }; - } - - /** - * Get thumbnail classes. - * - * @return {Array} The list of thumbnail classes. - */ - function getClasses() { - const classes = []; - - const align = lx.align ? lx.align : _DEFAULT_PROPS.align; - const aspectRatio = lx.aspectRatio ? lx.aspectRatio : _DEFAULT_PROPS.aspectRatio; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - const variant = lx.variant ? lx.variant : _DEFAULT_PROPS.variant; - - classes.push(`${CSS_PREFIX}-thumbnail--align-${align}`); - classes.push(`${CSS_PREFIX}-thumbnail--aspect-ratio-${aspectRatio}`); - classes.push(`${CSS_PREFIX}-thumbnail--theme-${theme}`); - classes.push(`${CSS_PREFIX}-thumbnail--variant-${variant}`); - - if (lx.fillHeight) { - classes.push(`${CSS_PREFIX}-thumbnail--fill-height`); - } - - if (lx.size) { - classes.push(`${CSS_PREFIX}-thumbnail--size-${lx.size}`); - } - - return classes; - } - - ///////////////////////////// - - lx.getBackgroundImage = getBackgroundImage; - lx.getClasses = getClasses; -} - -///////////////////////////// - -function ThumbnailDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: ThumbnailController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - align: '@?lxAlign', - aspectRatio: '@?lxAspectRatio', - fillHeight: '=?lxFillHeight', - image: '@lxImage', - size: '@?lxSize', - theme: '@?lxTheme', - variant: '@?lxVariant', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.thumbnail').directive('lxThumbnail', ThumbnailDirective); - -///////////////////////////// - -export { ThumbnailDirective }; diff --git a/packages/lumx-angularjs/src/components/toolbar/toolbar.html b/packages/lumx-angularjs/src/components/toolbar/toolbar.html deleted file mode 100644 index ef4fcf05a..000000000 --- a/packages/lumx-angularjs/src/components/toolbar/toolbar.html +++ /dev/null @@ -1,5 +0,0 @@ -
          -
          -
          -
          -
          diff --git a/packages/lumx-angularjs/src/components/toolbar/toolbar_directive.js b/packages/lumx-angularjs/src/components/toolbar/toolbar_directive.js deleted file mode 100644 index bd6574e80..000000000 --- a/packages/lumx-angularjs/src/components/toolbar/toolbar_directive.js +++ /dev/null @@ -1,85 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './toolbar.html'; - -///////////////////////////// - -function ToolbarController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has after slot filled or not. - * - * @type {boolean} - */ - lx.hasAfter = false; - - /** - * Whether the directive has before slot filled or not. - * - * @type {boolean} - */ - lx.hasBefore = false; - - /** - * Whether the directive has label slot filled or not. - * - * @type {boolean} - */ - lx.hasLabel = false; -} - -///////////////////////////// - -function ToolbarDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('before')) { - ctrl.hasBefore = true; - el.addClass(`${CSS_PREFIX}-toolbar--has-before`); - } - - if (transclude.isSlotFilled('label')) { - ctrl.hasLabel = true; - el.addClass(`${CSS_PREFIX}-toolbar--has-label`); - } - - if (transclude.isSlotFilled('after')) { - ctrl.hasAfter = true; - el.addClass(`${CSS_PREFIX}-toolbar--has-after`); - } - } - - return { - bindToController: true, - controller: ToolbarController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - template, - transclude: { - after: '?lxToolbarAfter', - before: '?lxToolbarBefore', - label: '?lxToolbarLabel', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.toolbar').directive('lxToolbar', ToolbarDirective); - -///////////////////////////// - -export { ToolbarDirective }; diff --git a/packages/lumx-angularjs/src/components/tooltip/tooltip_directive.js b/packages/lumx-angularjs/src/components/tooltip/tooltip_directive.js deleted file mode 100644 index 7f974f7d4..000000000 --- a/packages/lumx-angularjs/src/components/tooltip/tooltip_directive.js +++ /dev/null @@ -1,198 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -///////////////////////////// - -function TooltipController($element, $timeout) { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * Delay before showing the tooltip on source element mouse enter. - * - * @type {number} - * @constant - * @readonly - */ - const _HOVER_DELAY = 500; - - /** - * The offset from the target. - * - * @type {number} - * @constant - * @readonly - */ - const _OFFSET = 8; - - /** - * The tooltip element. - * - * @type {element} - */ - let _hoverTimeout; - - /** - * The tooltip label element. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _tooltip; - - /** - * The source element mouse enter timeout. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _tooltipArrow; - - /** - * The source element mouse enter timeout. - * - * @type {element} - */ - // eslint-disable-next-line one-var - let _tooltipInner; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Set the tooltip position according to the position parameter. - */ - function _setTooltipPosition() { - const targetProps = { - height: $element.outerHeight(), - left: $element.offset().left, - top: $element.offset().top, - width: $element.outerWidth(), - }; - const tooltipPosition = angular.isDefined(lx.position) ? lx.position : 'top'; - const tooltipProps = {}; - - _tooltip.addClass(`${CSS_PREFIX}-tooltip--position-${tooltipPosition}`).appendTo('body'); - - /* eslint-disable no-magic-numbers */ - if (tooltipPosition === 'top') { - tooltipProps.x = targetProps.left - _tooltip.outerWidth() / 2 + targetProps.width / 2; - tooltipProps.y = targetProps.top - _tooltip.outerHeight() - _OFFSET; - } else if (tooltipPosition === 'bottom') { - tooltipProps.x = targetProps.left - _tooltip.outerWidth() / 2 + targetProps.width / 2; - tooltipProps.y = targetProps.top + targetProps.height + _OFFSET; - } else if (tooltipPosition === 'left') { - tooltipProps.x = targetProps.left - _tooltip.outerWidth() - _OFFSET; - tooltipProps.y = targetProps.top + targetProps.height / 2 - _tooltip.outerHeight() / 2; - } else if (tooltipPosition === 'right') { - tooltipProps.x = targetProps.left + targetProps.width + _OFFSET; - tooltipProps.y = targetProps.top + targetProps.height / 2 - _tooltip.outerHeight() / 2; - } - - _tooltip.css({ - transform: `translate3d(${tooltipProps.x}px, ${tooltipProps.y}px, 0px)`, - }); - /* eslint-enable no-magic-numbers */ - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Hide the tooltip on source element mouse leave. - */ - function hideTooltip() { - if (angular.isUndefined(_tooltip)) { - return; - } - - $timeout.cancel(_hoverTimeout); - - _tooltip.remove(); - _tooltip = undefined; - } - - /** - * Show the tooltip on source element mouse enter. - */ - function showTooltip() { - if (angular.isDefined(_tooltip) || angular.isUndefined(lx.text) || !lx.text) { - return; - } - - _tooltip = angular.element('
          ', { - class: `${CSS_PREFIX}-tooltip`, - }); - - _tooltipArrow = angular.element('
          ', { - class: `${CSS_PREFIX}-tooltip__arrow`, - }); - - _tooltipInner = angular.element('', { - class: `${CSS_PREFIX}-tooltip__inner`, - text: lx.text, - }); - - _tooltip.append(_tooltipArrow).append(_tooltipInner); - - _hoverTimeout = $timeout(_setTooltipPosition, _HOVER_DELAY); - } - - ///////////////////////////// - - lx.hideTooltip = hideTooltip; - lx.showTooltip = showTooltip; -} - -///////////////////////////// - -function TooltipDirective() { - 'ngInject'; - - function link(scope, el, attrs, ctrl) { - attrs.$observe('lxTooltip', (text) => { - ctrl.text = text; - }); - - attrs.$observe('lxTooltipPosition', (position) => { - ctrl.position = position; - }); - - el.on('mouseenter', ctrl.showTooltip); - el.on('mouseleave', ctrl.hideTooltip); - - scope.$on('$destroy', () => { - ctrl.hideTooltip(); - el.off(); - }); - } - - return { - bindToController: true, - controller: TooltipController, - controllerAs: 'lx', - link, - restrict: 'A', - }; -} - -///////////////////////////// - -angular.module('lumx.tooltip').directive('lxTooltip', TooltipDirective); - -///////////////////////////// - -export { TooltipDirective }; diff --git a/packages/lumx-angularjs/src/components/uploader/uploader.html b/packages/lumx-angularjs/src/components/uploader/uploader.html deleted file mode 100644 index 8c881bb9c..000000000 --- a/packages/lumx-angularjs/src/components/uploader/uploader.html +++ /dev/null @@ -1,11 +0,0 @@ -
          -
          - -
          -
          - -
          - - {{ lx.label }} -
          -
          diff --git a/packages/lumx-angularjs/src/components/uploader/uploader_directive.js b/packages/lumx-angularjs/src/components/uploader/uploader_directive.js deleted file mode 100644 index 8daeda27b..000000000 --- a/packages/lumx-angularjs/src/components/uploader/uploader_directive.js +++ /dev/null @@ -1,97 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './uploader.html'; - -///////////////////////////// - -function UploaderController() { - 'ngInject'; - - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - aspectRatio: 'horizontal', - size: 'xl', - theme: 'light', - variant: 'squared', - }; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get button classes. - * - * @return {Array} The list of button classes. - */ - function getClasses() { - const classes = []; - - const aspectRatio = lx.aspectRatio ? lx.aspectRatio : _DEFAULT_PROPS.aspectRatio; - const size = lx.size ? lx.size : _DEFAULT_PROPS.size; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - const variant = lx.variant ? lx.variant : _DEFAULT_PROPS.variant; - - // Adjust to square aspect ratio when using circle variants. - const adjustedAspectRatio = variant === 'circle' ? 'square' : aspectRatio; - - classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${adjustedAspectRatio}`); - classes.push(`${CSS_PREFIX}-uploader--size-${size}`); - classes.push(`${CSS_PREFIX}-uploader--theme-${theme}`); - classes.push(`${CSS_PREFIX}-uploader--variant-${variant}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function UploaderDirective() { - 'ngInject'; - - return { - bindToController: true, - controller: UploaderController, - controllerAs: 'lx', - replace: true, - restrict: 'E', - scope: { - aspectRatio: '@?lxAspectRatio', - icon: '@?lxIcon', - label: '@?lxLabel', - size: '@?lxSize', - theme: '@?lxTheme', - variant: '@?lxVariant', - }, - template, - }; -} - -///////////////////////////// - -angular.module('lumx.uploader').directive('lxUploader', UploaderDirective); - -///////////////////////////// - -export { UploaderDirective }; diff --git a/packages/lumx-angularjs/src/components/user-block/user-block.html b/packages/lumx-angularjs/src/components/user-block/user-block.html deleted file mode 100644 index 1efe3232a..000000000 --- a/packages/lumx-angularjs/src/components/user-block/user-block.html +++ /dev/null @@ -1,35 +0,0 @@ -
          -
          - -
          - -
          - - {{ lx.name }} - - -
          - {{ field }} -
          -
          - -
          -
          -
          diff --git a/packages/lumx-angularjs/src/components/user-block/user-block_directive.js b/packages/lumx-angularjs/src/components/user-block/user-block_directive.js deleted file mode 100644 index 806e01140..000000000 --- a/packages/lumx-angularjs/src/components/user-block/user-block_directive.js +++ /dev/null @@ -1,125 +0,0 @@ -import { CSS_PREFIX } from '@lumx/core/js/constants'; - -import template from './user-block.html'; - -///////////////////////////// - -function UserBlockController() { - // eslint-disable-next-line consistent-this - const lx = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The default props. - * - * @type {Object} - * @constant - * @readonly - */ - const _DEFAULT_PROPS = { - orientation: 'horizontal', - size: 'm', - theme: 'light', - }; - - ///////////////////////////// - // // - // Public attributes // - // // - ///////////////////////////// - - /** - * Whether the directive has action slot filled or not. - * - * @type {boolean} - */ - lx.hasAction = false; - - /** - * Whether the directive has actions slot filled or not. - * - * @type {boolean} - */ - lx.hasActions = false; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get user block classes. - * - * @return {Array} The list of user block classes. - */ - function getClasses() { - const classes = []; - - const orientation = lx.orientation ? lx.orientation : _DEFAULT_PROPS.orientation; - const size = lx.size ? lx.size : _DEFAULT_PROPS.size; - const theme = lx.theme ? lx.theme : _DEFAULT_PROPS.theme; - - classes.push(`${CSS_PREFIX}-user-block--orientation-${orientation}`); - classes.push(`${CSS_PREFIX}-user-block--size-${size}`); - classes.push(`${CSS_PREFIX}-user-block--theme-${theme}`); - - return classes; - } - - ///////////////////////////// - - lx.getClasses = getClasses; -} - -///////////////////////////// - -function UserBlockDirective() { - function link(scope, el, attrs, ctrl, transclude) { - if (transclude.isSlotFilled('action')) { - ctrl.hasAction = true; - } - - if (transclude.isSlotFilled('actions')) { - ctrl.hasActions = true; - } - } - - return { - bindToController: true, - controller: UserBlockController, - controllerAs: 'lx', - link, - replace: true, - restrict: 'E', - scope: { - avatar: '@?lxAvatar', - fields: '=?lxFields', - name: '@?lxName', - onClick: '&?lxOnClick', - onMouseEnter: '&?lxOnMouseEnter', - onMouseLeave: '&?lxOnMouseLeave', - orientation: '@?lxOrientation', - size: '@?lxSize', - theme: '@?lxTheme', - }, - template, - transclude: { - action: '?lxUserBlockAction', - actions: '?lxUserBlockActions', - }, - }; -} - -///////////////////////////// - -angular.module('lumx.user-block').directive('lxUserBlock', UserBlockDirective); - -///////////////////////////// - -export { UserBlockDirective }; diff --git a/packages/lumx-angularjs/src/index.js b/packages/lumx-angularjs/src/index.js deleted file mode 100644 index 003b89bde..000000000 --- a/packages/lumx-angularjs/src/index.js +++ /dev/null @@ -1,68 +0,0 @@ -import './lumx'; -import './utils'; - -import './components/avatar/avatar_directive'; -import './components/badge/badge_directive'; -import './components/button/button_directive'; -import './components/button/button-group_directive'; -import './components/checkbox/checkbox_directive'; -import './components/chip/chip_directive'; -import './components/chip/chip-group_directive'; -import './components/comment-block/comment-block_directive'; -import './components/data-table/data-table_directive'; -import './components/data-table/data-table_service'; -import './components/dialog/dialog_directive'; -import './components/dialog/dialog_service'; -import './components/dialog/dialog-close_directive'; -import './components/divider/divider_directive'; -import './components/drag-handle/drag-handle_directive'; -import './components/dropdown/dropdown_directive'; -import './components/dropdown/dropdown_service'; -import './components/expansion-panel/expansion-panel_directive'; -import './components/grid/grid_directive'; -import './components/grid/grid-item_directive'; -import './components/icon/icon_directive'; -import './components/image-block/image-block_directive'; -import './components/input-helper/input-helper_directive'; -import './components/input-label/input-label_directive'; -import './components/lightbox/lightbox_directive'; -import './components/lightbox/lightbox_service'; -import './components/link/link_directive'; -import './components/list/list_directive'; -import './components/list/list-divider_directive'; -import './components/list/list-item_directive'; -import './components/list/list-subheader_directive'; -import './components/message/message_directive'; -import './components/notification/notification_service'; -import './components/notification-block/notification-block_directive'; -import './components/popover/popover_service'; -import './components/popover/popover_directive'; -import './components/post-block/post-block_directive'; -import './components/progress/progress_directive'; -import './components/progress-tracker/progress-tracker_directive'; -import './components/progress-tracker/progress-tracker-step_directive'; -import './components/radio-button/radio-button_directive'; -import './components/radio-button/radio-group_directive'; -import './components/select/select_directive'; -import './components/select/select-choices_filter'; -import './components/select/select-filter_directive'; -import './components/side-navigation/side-navigation_directive'; -import './components/side-navigation/side-navigation-item_directive'; -import './components/slideshow/slideshow_directive'; -import './components/slideshow/slideshow-controls_directive'; -import './components/slideshow/slideshow-item_directive'; -import './components/switch/switch_directive'; -import './components/table/table_directive'; -import './components/table/table-head_directive'; -import './components/table/table-body_directive'; -import './components/table/table-row_directive'; -import './components/table/table-cell-head_directive'; -import './components/table/table-cell-body_directive'; -import './components/tabs/tab_directive'; -import './components/tabs/tabs_directive'; -import './components/text-field/text-field_directive'; -import './components/thumbnail/thumbnail_directive'; -import './components/toolbar/toolbar_directive'; -import './components/tooltip/tooltip_directive'; -import './components/uploader/uploader_directive'; -import './components/user-block/user-block_directive'; diff --git a/packages/lumx-angularjs/src/lumx.js b/packages/lumx-angularjs/src/lumx.js deleted file mode 100644 index c345199c9..000000000 --- a/packages/lumx-angularjs/src/lumx.js +++ /dev/null @@ -1,106 +0,0 @@ -/* eslint-disable import/unambiguous */ - -angular.module('lumx.utils.depth', []); -angular.module('lumx.utils.enter-keydown', []); -angular.module('lumx.utils.event-scheduler', []); -angular.module('lumx.utils.focus-on-init', []); -angular.module('lumx.utils.focus-trap', []); -angular.module('lumx.utils.stop-propagation', []); -angular.module('lumx.utils.utils', []); - -angular.module('lumx.utils', [ - 'lumx.utils.depth', - 'lumx.utils.enter-keydown', - 'lumx.utils.event-scheduler', - 'lumx.utils.focus-on-init', - 'lumx.utils.focus-trap', - 'lumx.utils.stop-propagation', - 'lumx.utils.utils', -]); - -angular.module('lumx.avatar', []); -angular.module('lumx.badge', []); -angular.module('lumx.button', []); -angular.module('lumx.checkbox', []); -angular.module('lumx.chip', []); -angular.module('lumx.comment-block', []); -angular.module('lumx.data-table', []); -angular.module('lumx.dialog', []); -angular.module('lumx.divider', []); -angular.module('lumx.drag-handle', []); -angular.module('lumx.dropdown', []); -angular.module('lumx.expansion-panel', []); -angular.module('lumx.grid', []); -angular.module('lumx.icon', []); -angular.module('lumx.image-block', []); -angular.module('lumx.input-helper', []); -angular.module('lumx.input-label', []); -angular.module('lumx.lightbox', []); -angular.module('lumx.link', []); -angular.module('lumx.list', []); -angular.module('lumx.message', []); -angular.module('lumx.notification', []); -angular.module('lumx.notification-block', []); -angular.module('lumx.popover', []); -angular.module('lumx.post-block', []); -angular.module('lumx.progress', []); -angular.module('lumx.progress-tracker', []); -angular.module('lumx.radio-button', []); -angular.module('lumx.select', []); -angular.module('lumx.side-navigation', []); -angular.module('lumx.slideshow', []); -angular.module('lumx.switch', []); -angular.module('lumx.table', []); -angular.module('lumx.tabs', []); -angular.module('lumx.text-field', []); -angular.module('lumx.theme', []); -angular.module('lumx.thumbnail', []); -angular.module('lumx.toolbar', []); -angular.module('lumx.tooltip', []); -angular.module('lumx.uploader', []); -angular.module('lumx.user-block', []); - -angular.module('lumx', [ - 'lumx.avatar', - 'lumx.badge', - 'lumx.button', - 'lumx.checkbox', - 'lumx.chip', - 'lumx.comment-block', - 'lumx.data-table', - 'lumx.dialog', - 'lumx.divider', - 'lumx.drag-handle', - 'lumx.dropdown', - 'lumx.expansion-panel', - 'lumx.grid', - 'lumx.icon', - 'lumx.image-block', - 'lumx.input-helper', - 'lumx.input-label', - 'lumx.lightbox', - 'lumx.link', - 'lumx.list', - 'lumx.message', - 'lumx.notification', - 'lumx.notification-block', - 'lumx.popover', - 'lumx.post-block', - 'lumx.progress', - 'lumx.progress-tracker', - 'lumx.radio-button', - 'lumx.select', - 'lumx.side-navigation', - 'lumx.slideshow', - 'lumx.switch', - 'lumx.tabs', - 'lumx.table', - 'lumx.text-field', - 'lumx.theme', - 'lumx.utils', - 'lumx.thumbnail', - 'lumx.toolbar', - 'lumx.tooltip', - 'lumx.uploader', - 'lumx.user-block', -]); diff --git a/packages/lumx-angularjs/src/utils/depth_service.js b/packages/lumx-angularjs/src/utils/depth_service.js deleted file mode 100644 index 4ddf86f23..000000000 --- a/packages/lumx-angularjs/src/utils/depth_service.js +++ /dev/null @@ -1,59 +0,0 @@ -function DepthService() { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The initial depth. - * - * @type {number} - */ - // eslint-disable-next-line no-magic-numbers - let _depth = 1000; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Get the highest depth. - * - * @return {number} The highest depth. - */ - function get() { - return _depth; - } - - /** - * Increase depth. - */ - function increase() { - _depth++; - } - - ///////////////////////////// - - service.get = get; - service.increase = increase; - - // Backward compatibility. - - service.getDepth = get; - service.register = increase; -} - -///////////////////////////// - -angular.module('lumx.utils.depth').service('LxDepthService', DepthService); - -///////////////////////////// - -export { DepthService }; diff --git a/packages/lumx-angularjs/src/utils/enter-keydown_directive.js b/packages/lumx-angularjs/src/utils/enter-keydown_directive.js deleted file mode 100644 index a0bf84610..000000000 --- a/packages/lumx-angularjs/src/utils/enter-keydown_directive.js +++ /dev/null @@ -1,31 +0,0 @@ -import { ENTER_KEY_CODE } from '@lumx/core/js/constants'; - -///////////////////////////// - -function EnterKeydownDirective() { - 'ngInject'; - - function link(scope, el, attrs) { - el.on('keydown', (evt) => { - if (evt.which === ENTER_KEY_CODE) { - scope.$apply(() => { - scope.$eval(attrs.lxEnterKeydown, { $event: evt }); - }); - - evt.preventDefault(); - } - }); - } - - return { - link, - }; -} - -///////////////////////////// - -angular.module('lumx.utils.enter-keydown').directive('lxEnterKeydown', EnterKeydownDirective); - -///////////////////////////// - -export { EnterKeydownDirective }; diff --git a/packages/lumx-angularjs/src/utils/event-scheduler_service.js b/packages/lumx-angularjs/src/utils/event-scheduler_service.js deleted file mode 100644 index 1bb419e8b..000000000 --- a/packages/lumx-angularjs/src/utils/event-scheduler_service.js +++ /dev/null @@ -1,136 +0,0 @@ -function EventSchedulerService($document, LxUtilsService) { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The handlers. - * - * @type {Object} - */ - const _handlers = {}; - - /** - * The schedule. - * - * @type {Object} - */ - const _schedule = {}; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Handle en event. - * - * @param {Event} evt The event. - */ - function _handle(evt) { - let scheduler; - - for (const [key] of Object.entries(_schedule)) { - if (key.includes(evt.type)) { - scheduler = _schedule[key]; - } - } - - if (angular.isDefined(scheduler)) { - for (let i = 0, len = scheduler.length; i < len; i++) { - const handler = scheduler[i]; - - if (angular.isDefined(handler) && angular.isDefined(handler.cb) && angular.isFunction(handler.cb)) { - handler.cb(evt); - - if (evt.isPropagationStopped()) { - break; - } - } - } - } - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Register en event. - * - * @param {string} eventName The event name. - * @param {Function} cb The event callback. - * @return {string} The event id. - */ - function register(eventName, cb) { - const handler = { - cb, - eventName, - }; - - const id = LxUtilsService.generateUUID(); - _handlers[id] = handler; - - if (angular.isUndefined(_schedule[eventName])) { - _schedule[eventName] = []; - - $document.on(eventName, _handle); - } - - _schedule[eventName].unshift(_handlers[id]); - - return id; - } - - /** - * Unregister en event. - * - * @param {string} id The event id. - * @return {found} Whether the event has been found or not. - */ - function unregister(id) { - let found = false; - const handler = _handlers[id]; - - if (angular.isDefined(handler) && angular.isDefined(_schedule[handler.eventName])) { - const index = _schedule[handler.eventName].indexOf(handler); - - if (angular.isDefined(index) && index > -1) { - _schedule[handler.eventName].splice(index, 1); - - delete _handlers[id]; - found = true; - } - - if (_schedule[handler.eventName].length === 0) { - delete _schedule[handler.eventName]; - - $document.off(handler.eventName, _handle); - } - } - - return found; - } - - ///////////////////////////// - - service.register = register; - service.unregister = unregister; -} - -///////////////////////////// - -angular.module('lumx.utils.event-scheduler').service('LxEventSchedulerService', EventSchedulerService); - -///////////////////////////// - -export { EventSchedulerService }; diff --git a/packages/lumx-angularjs/src/utils/focus-on-init_directive.js b/packages/lumx-angularjs/src/utils/focus-on-init_directive.js deleted file mode 100644 index 944ddf0a2..000000000 --- a/packages/lumx-angularjs/src/utils/focus-on-init_directive.js +++ /dev/null @@ -1,25 +0,0 @@ -function FocusOnInitDirective($timeout) { - 'ngInject'; - - function link(scope, el, attrs) { - if (angular.isDefined(attrs.lxFocusOnInit) && attrs.lxFocusOnInit && !scope.$eval(attrs.lxFocusOnInit)) { - return; - } - - $timeout(() => { - el.focus(); - }); - } - - return { - link, - }; -} - -///////////////////////////// - -angular.module('lumx.utils.focus-on-init').directive('lxFocusOnInit', FocusOnInitDirective); - -///////////////////////////// - -export { FocusOnInitDirective }; diff --git a/packages/lumx-angularjs/src/utils/focus-trap_service.js b/packages/lumx-angularjs/src/utils/focus-trap_service.js deleted file mode 100644 index 94aab1f13..000000000 --- a/packages/lumx-angularjs/src/utils/focus-trap_service.js +++ /dev/null @@ -1,94 +0,0 @@ -import { TAB_KEY_CODE } from '@lumx/core/js/constants'; - -///////////////////////////// - -function FocusTrapService() { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Private attributes // - // // - ///////////////////////////// - - /** - * The active element where to trap the focus. - * - * @type {Element} - */ - let _activeElement; - - ///////////////////////////// - // // - // Private functions // - // // - ///////////////////////////// - - /** - * Handle key events on key down. - * - * @param {Event} evt The key event. - */ - function _onKeyDown(evt) { - if (evt.keyCode !== TAB_KEY_CODE) { - return; - } - - const focusableEls = _activeElement.find( - 'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), textarea:not([tabindex="-1"]), input[type="text"]:not([tabindex="-1"]), input[type="radio"]:not([tabindex="-1"]), input[type="checkbox"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', - ); - - // eslint-disable-next-line prefer-destructuring - const firstFocusableEl = focusableEls[0]; - const lastFocusableEl = focusableEls[focusableEls.length - 1]; - - if (evt.shiftKey) { - if (document.activeElement === firstFocusableEl) { - lastFocusableEl.focus(); - evt.preventDefault(); - } - } else if (document.activeElement === lastFocusableEl) { - firstFocusableEl.focus(); - evt.preventDefault(); - } - } - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Activate focus trap on given element. - * - * @param {element} el The element where to trap focus. - */ - function activate(el) { - _activeElement = el; - _activeElement.on('keydown', _onKeyDown); - } - - /** - * Disable focus trap on given element. - */ - function disable() { - _activeElement.off('keydown', _onKeyDown); - _activeElement = undefined; - } - - ///////////////////////////// - - service.activate = activate; - service.disable = disable; -} - -///////////////////////////// - -angular.module('lumx.utils.focus-trap').service('LxFocusTrapService', FocusTrapService); - -///////////////////////////// - -export { FocusTrapService }; diff --git a/packages/lumx-angularjs/src/utils/index.js b/packages/lumx-angularjs/src/utils/index.js deleted file mode 100644 index 0e4fe2981..000000000 --- a/packages/lumx-angularjs/src/utils/index.js +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable import/no-unassigned-import */ - -import './depth_service'; -import './enter-keydown_directive'; -import './event-scheduler_service'; -import './focus-on-init_directive'; -import './focus-trap_service'; -import './stop-propagation_directive'; -import './utils_service'; diff --git a/packages/lumx-angularjs/src/utils/stop-propagation_directive.js b/packages/lumx-angularjs/src/utils/stop-propagation_directive.js deleted file mode 100644 index 70f415f85..000000000 --- a/packages/lumx-angularjs/src/utils/stop-propagation_directive.js +++ /dev/null @@ -1,21 +0,0 @@ -function StopPropagationDirective() { - 'ngInject'; - - function link(scope, el, attrs) { - el.on(attrs.lxStopPropagation, (evt) => { - evt.stopPropagation(); - }); - } - - return { - link, - }; -} - -///////////////////////////// - -angular.module('lumx.utils.stop-propagation').directive('lxStopPropagation', StopPropagationDirective); - -///////////////////////////// - -export { StopPropagationDirective }; diff --git a/packages/lumx-angularjs/src/utils/utils_service.js b/packages/lumx-angularjs/src/utils/utils_service.js deleted file mode 100644 index c205bfb32..000000000 --- a/packages/lumx-angularjs/src/utils/utils_service.js +++ /dev/null @@ -1,41 +0,0 @@ -function UtilsService() { - 'ngInject'; - - const service = this; - - ///////////////////////////// - // // - // Public functions // - // // - ///////////////////////////// - - /** - * Generate a unique identifier. - * - * @return {string} A unique identifier. - */ - function generateUUID() { - /* eslint-disable no-bitwise, no-magic-numbers */ - let time = new Date().getTime(); - - return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) => { - const random = (time + Math.random() * 16) % 16 | 0; - time = Math.floor(time / 16); - - return (char === 'x' ? random : (random & 0x3) | 0x8).toString(16); - }); - /* eslint-enable no-bitwise, no-magic-numbers */ - } - - ///////////////////////////// - - service.generateUUID = generateUUID; -} - -///////////////////////////// - -angular.module('lumx.utils.utils').service('LxUtilsService', UtilsService); - -///////////////////////////// - -export { UtilsService }; diff --git a/packages/lumx-angularjs/tsconfig.json b/packages/lumx-angularjs/tsconfig.json deleted file mode 100644 index f3a6d35fa..000000000 --- a/packages/lumx-angularjs/tsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../../tsconfig" -} diff --git a/packages/lumx-angularjs/webpack.config.js b/packages/lumx-angularjs/webpack.config.js deleted file mode 100644 index 52bc8f8ff..000000000 --- a/packages/lumx-angularjs/webpack.config.js +++ /dev/null @@ -1,144 +0,0 @@ -/* eslint-disable import/no-nodejs-modules */ -/* eslint-disable import/no-commonjs */ -/* eslint-disable import/unambiguous */ -/* eslint-disable import/no-extraneous-dependencies */ - -const IS_CI = require('is-ci'); -const path = require('path'); - -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); -const HtmlMinifierPlugin = require('html-minifier-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); -const UnminifiedWebpackPlugin = require('unminified-webpack-plugin'); -const WebpackBar = require('webpackbar'); -const WebpackNotifierPlugin = require('webpack-notifier'); - -const CONFIGS = require('../../configs'); - -const PKG_NAME = '@lumx/angularjs'; -const PKG_PATH = path.resolve(__dirname, './'); -const SRC_PATH = `${PKG_PATH}/src`; -const DIST_PATH = `${PKG_PATH}/dist`; - -const filename = '[name].min'; - -const minimizer = [ - new TerserPlugin({ - cache: true, - parallel: true, - sourceMap: true, - terserOptions: CONFIGS.terser, - }), -]; - -const plugins = [ - /* Clean output. */ - new CleanWebpackPlugin(), - - new WebpackBar(), - new FriendlyErrorsWebpackPlugin(), - new UnminifiedWebpackPlugin(), - new CopyWebpackPlugin([ - { - from: `${CONFIGS.path.ROOT_PATH}/CONTRIBUTING.md`, - to: DIST_PATH, - }, - { - from: `${CONFIGS.path.ROOT_PATH}/LICENSE.md`, - to: DIST_PATH, - }, - { - from: `${PKG_PATH}/README.md`, - to: DIST_PATH, - }, - { - from: `${PKG_PATH}/package.json`, - to: DIST_PATH, - }, - ]), - new HtmlMinifierPlugin(CONFIGS.htmlMinifier), -]; - -if (!IS_CI) { - plugins.push( - new WebpackNotifierPlugin({ - alwaysNotify: true, - title: `LumX - ${PKG_NAME} Package`, - }), - ); -} - -module.exports = { - entry: { - 'lumx.angularjs': `${SRC_PATH}/index.js`, - }, - - externals: [ - 'angularjs', - { - jquery: { - commonjs: 'jquery', - amd: 'jquery', - root: '$', - }, - }, - ], - - bail: true, - devtool: 'source-map', - mode: 'production', - name: PKG_NAME, - - module: { - rules: [ - { - exclude: /node_modules/u, - test: /\.[j|t]sx?$/u, - use: { - loader: 'babel-loader', - options: CONFIGS.babel, - }, - }, - { - test: /\.html$/, - use: 'html-loader', - }, - ], - }, - - resolve: { - extensions: ['.ts', '.js'], - plugins: [new TsconfigPathsPlugin()], - }, - - output: { - chunkFilename: `${filename}.js`, - filename: `${filename}.js`, - path: DIST_PATH, - library: { - root: 'LumX', - amd: PKG_NAME, - commonjs: PKG_NAME, - }, - libraryTarget: 'umd', - umdNamedDefine: true, - }, - - plugins, - - optimization: { - minimize: true, - minimizer, - }, - - stats: { - colors: !IS_CI, - }, - - performance: { - assetFilter: (file) => file.endsWith('.min.js'), - }, -}; diff --git a/packages/lumx-react/README.md b/packages/lumx-react/README.md index e16b4fbf4..48cd89971 100644 --- a/packages/lumx-react/README.md +++ b/packages/lumx-react/README.md @@ -30,9 +30,7 @@ Please refer to our [contributing guidelines](CONTRIBUTING.md). Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md). -[angularjs]: https://angularjs.org/ [react]: https://react.org/ [material]: http://www.google.com/design/spec/material-design/introduction.html -[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs [react-release]: https://www.npmjs.com/package/@lumx/react [webpack]: https://webpack.js.org/ diff --git a/packages/site-demo/package.json b/packages/site-demo/package.json index 14f1560f7..56f5ff912 100644 --- a/packages/site-demo/package.json +++ b/packages/site-demo/package.json @@ -20,7 +20,6 @@ "start": "NODE_OPTIONS=--no-warnings gatsby develop" }, "dependencies": { - "@lumx/angularjs": "^3.6.7", "@lumx/core": "^3.6.7", "@lumx/icons": "^3.6.7", "@lumx/react": "^3.6.7", diff --git a/tsconfig.json b/tsconfig.json index 2354530fa..19a810ce5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,8 +14,6 @@ "noFallthroughCasesInSwitch": false, "paths": { "@lumx/core/*": ["lumx-core/src/*"], - "@lumx/angularjs": ["lumx-angularjs/src"], - "@lumx/angularjs/*": ["lumx-angularjs/src/*"], "@lumx/react": ["lumx-react/src"], "@lumx/react/*": ["lumx-react/src/*"], "@lumx/demo/*": ["site-demo/src/*"], diff --git a/yarn.lock b/yarn.lock index 807fc65be..62f25aa98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1790,7 +1790,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.10.5, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.10.5, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" dependencies: @@ -3722,45 +3722,6 @@ __metadata: languageName: node linkType: hard -"@lumx/angularjs@^3.6.7, @lumx/angularjs@workspace:packages/lumx-angularjs": - version: 0.0.0-use.local - resolution: "@lumx/angularjs@workspace:packages/lumx-angularjs" - dependencies: - "@babel/core": ^7.18.13 - "@babel/plugin-proposal-class-properties": ^7.18.6 - "@babel/plugin-proposal-export-default-from": ^7.18.10 - "@babel/plugin-proposal-nullish-coalescing-operator": ^7.18.6 - "@babel/plugin-proposal-object-rest-spread": ^7.18.9 - "@babel/plugin-proposal-optional-chaining": ^7.18.9 - "@babel/plugin-proposal-private-property-in-object": ^7.18.6 - "@babel/preset-env": ^7.18.10 - "@babel/preset-typescript": ^7.18.6 - "@lumx/core": ^3.6.7 - "@lumx/icons": ^3.6.7 - babel-plugin-angularjs-annotate: ^0.10.0 - clean-webpack-plugin: ^3.0.0 - copy-webpack-plugin: ^5.1.1 - core-js: ^3.6.4 - focus-visible: ^5.0.2 - friendly-errors-webpack-plugin: ^1.7.0 - html-loader: ^0.5.5 - html-minifier-webpack-plugin: ^2.2.3 - install-peers-cli: ^2.2.0 - is-ci: ^2.0.0 - lodash: 4.17.21 - popper.js: ^1.16.0 - sass-mq: ^6.0.0 - tsconfig-paths-webpack-plugin: ^3.3.0 - unminified-webpack-plugin: ^2.0.0 - webpack: ^4.44.1 - webpack-notifier: ^1.8.0 - webpackbar: ^4.0.0 - peerDependencies: - angular: ^1.7.8 - jquery: 3.5.1 - languageName: unknown - linkType: soft - "@lumx/core@^3.6.7, @lumx/core@workspace:packages/lumx-core": version: 0.0.0-use.local resolution: "@lumx/core@workspace:packages/lumx-core" @@ -6845,20 +6806,6 @@ __metadata: languageName: node linkType: hard -"@types/webpack@npm:^4.41.2": - version: 4.41.5 - resolution: "@types/webpack@npm:4.41.5" - dependencies: - "@types/anymatch": "*" - "@types/node": "*" - "@types/tapable": "*" - "@types/uglify-js": "*" - "@types/webpack-sources": "*" - source-map: ^0.6.0 - checksum: 8145d505b802c6ac3107d0a345e6b747a9a9eb2faeea271057dbe3449772fbda99cb1623612cf443f1a9d581b52204c31c29e4623b1fdd71b450b725d8a01184 - languageName: node - linkType: hard - "@types/websocket@npm:1.0.1": version: 1.0.1 resolution: "@types/websocket@npm:1.0.1" @@ -8462,13 +8409,6 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.9.6": - version: 0.9.6 - resolution: "ast-types@npm:0.9.6" - checksum: 6b75831c192963453eaeaedaa9db41823cd964bfb9c40ad8da6e978393dd66611f8cc4f778ecabce6a4a9b44a04c83b2571d98fcb561b87596d7b2ea796447db - languageName: node - linkType: hard - "ast-types@npm:^0.16.1": version: 0.16.1 resolution: "ast-types@npm:0.16.1" @@ -8806,17 +8746,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-angularjs-annotate@npm:^0.10.0": - version: 0.10.0 - resolution: "babel-plugin-angularjs-annotate@npm:0.10.0" - dependencies: - "@babel/code-frame": ^7.0.0 - "@babel/types": ^7.2.0 - simple-is: ~0.2.0 - checksum: 09a730159e5764a9b5cfa9353387d314784c90355da4ac9edc631a14a7473fcf7622dffba16097a30a8bf4fdb784ed15f0f8a8bcea874c25104e074323724f1a - languageName: node - linkType: hard - "babel-plugin-apply-mdx-type-prop@npm:1.6.19": version: 1.6.19 resolution: "babel-plugin-apply-mdx-type-prop@npm:1.6.19" @@ -10041,16 +9970,6 @@ __metadata: languageName: node linkType: hard -"camel-case@npm:3.0.x, camel-case@npm:^3.0.0": - version: 3.0.0 - resolution: "camel-case@npm:3.0.0" - dependencies: - no-case: ^2.2.0 - upper-case: ^1.1.1 - checksum: 4190ed6ab8acf4f3f6e1a78ad4d0f3f15ce717b6bfa1b5686d58e4bcd29960f6e312dd746b5fa259c6d452f1413caef25aee2e10c9b9a580ac83e516533a961a - languageName: node - linkType: hard - "camel-case@npm:4.1.1": version: 4.1.1 resolution: "camel-case@npm:4.1.1" @@ -10061,6 +9980,16 @@ __metadata: languageName: node linkType: hard +"camel-case@npm:^3.0.0": + version: 3.0.0 + resolution: "camel-case@npm:3.0.0" + dependencies: + no-case: ^2.2.0 + upper-case: ^1.1.1 + checksum: 4190ed6ab8acf4f3f6e1a78ad4d0f3f15ce717b6bfa1b5686d58e4bcd29960f6e312dd746b5fa259c6d452f1413caef25aee2e10c9b9a580ac83e516533a961a + languageName: node + linkType: hard + "camel-case@npm:^4.1.2": version: 4.1.2 resolution: "camel-case@npm:4.1.2" @@ -10581,15 +10510,6 @@ __metadata: languageName: node linkType: hard -"clean-css@npm:4.2.x, clean-css@npm:^4.2.1": - version: 4.2.1 - resolution: "clean-css@npm:4.2.1" - dependencies: - source-map: ~0.6.0 - checksum: ec44b470ba82f24ef00934c7a7dc29ba2e9b374328ed1dd5dd5b7e02a23495e34079cf82f70fc94d64e399e8d2fed7df6d9fa7fb2f0555263f990788e58bc841 - languageName: node - linkType: hard - "clean-stack@npm:^1.0.0": version: 1.3.0 resolution: "clean-stack@npm:1.3.0" @@ -11059,14 +10979,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:2.17.x": - version: 2.17.1 - resolution: "commander@npm:2.17.1" - checksum: 22e7ed5b422079a13a496e5eb8f73f36c15b5809d46f738e168e20f9ad485c12951bdc2cb366a36eb5f4927dae4f17b355b8adb96a5b9093f5fa4c439e8b9419 - languageName: node - linkType: hard - -"commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3, commander@npm:~2.20.3": +"commander@npm:^2.20.0, commander@npm:^2.20.3, commander@npm:~2.20.3": version: 2.20.3 resolution: "commander@npm:2.20.3" checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e @@ -11115,13 +11028,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:~2.19.0": - version: 2.19.0 - resolution: "commander@npm:2.19.0" - checksum: d52ffb0b31528784005356f879591b5a4875d3e88806c115fb30a8de0994d2fa9ca3f72a3cb880cdaf1bfb9df185f928cfcbbc656fa831f9c6109a209569ef6d - languageName: node - linkType: hard - "common-tags@npm:^1.8.0": version: 1.8.0 resolution: "common-tags@npm:1.8.0" @@ -14175,16 +14081,6 @@ __metadata: languageName: node linkType: hard -"es6-templates@npm:^0.2.3": - version: 0.2.3 - resolution: "es6-templates@npm:0.2.3" - dependencies: - recast: ~0.11.12 - through: ~2.3.6 - checksum: 37261e42e26b2627dc2e3c3a6244445b79a61e5de4ba8b17f1e692ae5f40bff1d2aa0d9e314fd8207036b14126f7dfc39ef54b10fd0a19eba6e8a53d6840d036 - languageName: node - linkType: hard - "esbuild-plugin-alias@npm:^0.2.1": version: 0.2.1 resolution: "esbuild-plugin-alias@npm:0.2.1" @@ -14956,16 +14852,6 @@ __metadata: languageName: node linkType: hard -"esprima@npm:~3.1.0": - version: 3.1.3 - resolution: "esprima@npm:3.1.3" - bin: - esparse: ./bin/esparse.js - esvalidate: ./bin/esvalidate.js - checksum: 2771c059aa61f2b2fe9d898f11c737c45c26eae6052908f1e2b8bd91c6a440607420f2679cbfd6cbb79f2fa502b37a3053048d287bcd30ea582d46c969fcf67e - languageName: node - linkType: hard - "esquery@npm:^1.0.1": version: 1.0.1 resolution: "esquery@npm:1.0.1" @@ -15635,7 +15521,7 @@ __metadata: languageName: node linkType: hard -"fastparse@npm:^1.1.1, fastparse@npm:^1.1.2": +"fastparse@npm:^1.1.2": version: 1.1.2 resolution: "fastparse@npm:1.1.2" checksum: c4d199809dc4e8acafeb786be49481cc9144de296e2d54df4540ccfd868d0df73afc649aba70a748925eb32bbc4208b723d6288adf92382275031a8c7e10c0aa @@ -18696,15 +18582,6 @@ fsevents@~2.1.2: languageName: node linkType: hard -"he@npm:1.2.x, he@npm:^1.2.0": - version: 1.2.0 - resolution: "he@npm:1.2.0" - bin: - he: bin/he - checksum: 3d4d6babccccd79c5c5a3f929a68af33360d6445587d628087f39a965079d84f18ce9c3d3f917ee1e3978916fc833bb8b29377c3b403f919426f91bc6965e7a7 - languageName: node - linkType: hard - "header-case@npm:^1.0.0": version: 1.0.1 resolution: "header-case@npm:1.0.1" @@ -18866,64 +18743,6 @@ fsevents@~2.1.2: languageName: node linkType: hard -"html-loader@npm:^0.5.5": - version: 0.5.5 - resolution: "html-loader@npm:0.5.5" - dependencies: - es6-templates: ^0.2.3 - fastparse: ^1.1.1 - html-minifier: ^3.5.8 - loader-utils: ^1.1.0 - object-assign: ^4.1.1 - checksum: 33ec6046ad4f604288513dc4008619fac9550d047a0bb87bed4f04e2b13b2c83241eed912dab2a8a235382b082199b4c70a44c6ac7ed43a39fdb63db2de91596 - languageName: node - linkType: hard - -"html-minifier-webpack-plugin@npm:^2.2.3": - version: 2.2.3 - resolution: "html-minifier-webpack-plugin@npm:2.2.3" - dependencies: - "@types/webpack": ^4.41.2 - html-minifier: ^4.0.0 - webpack-sources: ^1.4.3 - checksum: 7d08b5c061b4de3765bb84e988cb30ad882584732b15d0c4a9bdfabc4e9fe61bb75c101df70e598fdaa9e5ab360fd19b60ee1eb3c3a0d7d8b0e1eae5a45d9e79 - languageName: node - linkType: hard - -"html-minifier@npm:^3.5.8": - version: 3.5.21 - resolution: "html-minifier@npm:3.5.21" - dependencies: - camel-case: 3.0.x - clean-css: 4.2.x - commander: 2.17.x - he: 1.2.x - param-case: 2.1.x - relateurl: 0.2.x - uglify-js: 3.4.x - bin: - html-minifier: ./cli.js - checksum: 66a86841a8b919a11a13d9b80176845cfbc5dda6e88efea2cf312ecc07427d9eab4aca70537357583e5e66ee1e62da14e035792eea000f8f3a9ca1856b2fb2b2 - languageName: node - linkType: hard - -"html-minifier@npm:^4.0.0": - version: 4.0.0 - resolution: "html-minifier@npm:4.0.0" - dependencies: - camel-case: ^3.0.0 - clean-css: ^4.2.1 - commander: ^2.19.0 - he: ^1.2.0 - param-case: ^2.1.1 - relateurl: ^0.2.7 - uglify-js: ^3.5.1 - bin: - html-minifier: ./cli.js - checksum: b426aee771d9da104c1c9554e3ebd3a4f483d2ce01f4dcc4156ba33a5959044acf6bea192d5ae63b290cdb92c30a9d07fd6924c65609aa82382ce411328f94ca - languageName: node - linkType: hard - "html-tags@npm:^3.1.0": version: 3.3.1 resolution: "html-tags@npm:3.3.1" @@ -23093,7 +22912,6 @@ fsevents@~2.1.2: version: 0.0.0-use.local resolution: "lumx-site-demo@workspace:packages/site-demo" dependencies: - "@lumx/angularjs": ^3.6.7 "@lumx/core": ^3.6.7 "@lumx/icons": ^3.6.7 "@lumx/react": ^3.6.7 @@ -26163,7 +25981,7 @@ fsevents@~2.1.2: languageName: node linkType: hard -"param-case@npm:2.1.x, param-case@npm:^2.1.0, param-case@npm:^2.1.1": +"param-case@npm:^2.1.0": version: 2.1.1 resolution: "param-case@npm:2.1.1" dependencies: @@ -26886,13 +26704,6 @@ fsevents@~2.1.2: languageName: node linkType: hard -"popper.js@npm:^1.16.0": - version: 1.16.0 - resolution: "popper.js@npm:1.16.0" - checksum: 61f935323c531584112e06099fbcf89d3408f72a0aece693e9fd9879a33bc0c51a4f6dc3d95dee9d3babf8dc65d9d4a62e028f077f1bc03c1e3368debc115985 - languageName: node - linkType: hard - "portfinder@npm:^1.0.26": version: 1.0.28 resolution: "portfinder@npm:1.0.28" @@ -27670,13 +27481,6 @@ fsevents@~2.1.2: languageName: node linkType: hard -"private@npm:~0.1.5": - version: 0.1.8 - resolution: "private@npm:0.1.8" - checksum: a00abd713d25389f6de7294f0e7879b8a5d09a9ec5fd81cc2f21b29d4f9a80ec53bc4222927d3a281d4aadd4cd373d9a28726fca3935921950dc75fd71d1fdbb - languageName: node - linkType: hard - "process-nextick-args@npm:^2.0.0, process-nextick-args@npm:~2.0.0": version: 2.0.1 resolution: "process-nextick-args@npm:2.0.1" @@ -28817,18 +28621,6 @@ fsevents@~2.1.2: languageName: node linkType: hard -"recast@npm:~0.11.12": - version: 0.11.23 - resolution: "recast@npm:0.11.23" - dependencies: - ast-types: 0.9.6 - esprima: ~3.1.0 - private: ~0.1.5 - source-map: ~0.5.0 - checksum: e2a6f973fa8e7f4aac6fdebd27706d67570c71d127632f15fad350a430c63b0dcdd9d7ceffad547b07114b5d28895e6fe078a287c1f8e5410c90aaa7289787ac - languageName: node - linkType: hard - "rechoir@npm:^0.6.2": version: 0.6.2 resolution: "rechoir@npm:0.6.2" @@ -29092,13 +28884,6 @@ fsevents@~2.1.2: languageName: node linkType: hard -"relateurl@npm:0.2.x, relateurl@npm:^0.2.7": - version: 0.2.7 - resolution: "relateurl@npm:0.2.7" - checksum: 5891e792eae1dfc3da91c6fda76d6c3de0333a60aa5ad848982ebb6dccaa06e86385fb1235a1582c680a3d445d31be01c6bfc0804ebbcab5aaf53fa856fde6b6 - languageName: node - linkType: hard - "remark-external-links@npm:^8.0.0": version: 8.0.0 resolution: "remark-external-links@npm:8.0.0" @@ -30809,13 +30594,6 @@ resolve@^1.9.0: languageName: node linkType: hard -"simple-is@npm:~0.2.0": - version: 0.2.0 - resolution: "simple-is@npm:0.2.0" - checksum: 9ab19289a1da9551f91715f4ae838790c13752ccf7e8b7dce69e4b056f4ab7c2b13486fe987ab00c01294cb33a63bb08fd66a1a4170c70fcc6d3a310bf406e8c - languageName: node - linkType: hard - "simple-swizzle@npm:^0.2.2": version: 0.2.2 resolution: "simple-swizzle@npm:0.2.2" @@ -31266,14 +31044,14 @@ resolve@^1.9.0: languageName: node linkType: hard -"source-map@npm:^0.5.0, source-map@npm:^0.5.6, source-map@npm:~0.5.0, source-map@npm:~0.5.3": +"source-map@npm:^0.5.0, source-map@npm:^0.5.6, source-map@npm:~0.5.3": version: 0.5.7 resolution: "source-map@npm:0.5.7" checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d languageName: node linkType: hard -"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": +"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1": version: 0.6.1 resolution: "source-map@npm:0.6.1" checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2 @@ -32977,7 +32755,7 @@ resolve@^1.9.0: languageName: node linkType: hard -"through@npm:2, through@npm:>=2.2.7 <3, through@npm:^2.3.4, through@npm:^2.3.6, through@npm:^2.3.8, through@npm:~2.3.6": +"through@npm:2, through@npm:>=2.2.7 <3, through@npm:^2.3.4, through@npm:^2.3.6, through@npm:^2.3.8": version: 2.3.8 resolution: "through@npm:2.3.8" checksum: a38c3e059853c494af95d50c072b83f8b676a9ba2818dcc5b108ef252230735c54e0185437618596c790bbba8fcdaef5b290405981ffa09dce67b1f1bf190cbd @@ -33745,19 +33523,7 @@ resolve@^1.9.0: languageName: node linkType: hard -"uglify-js@npm:3.4.x": - version: 3.4.10 - resolution: "uglify-js@npm:3.4.10" - dependencies: - commander: ~2.19.0 - source-map: ~0.6.1 - bin: - uglifyjs: bin/uglifyjs - checksum: dfc61c85b0660216432e021aac6a5f3ea0331720003d4d929b95f297daceb73bc9615875ca150516b49bc57ab60d3cf32415fc006cccf20f275c806f6686da0d - languageName: node - linkType: hard - -"uglify-js@npm:^3.1.4, uglify-js@npm:^3.5.1": +"uglify-js@npm:^3.1.4": version: 3.6.9 resolution: "uglify-js@npm:3.6.9" dependencies: