-
Installation
-
-
- LumX is the first responsive front-end framework based on AngularJS & Google Material Design specifications.
- It provides a full CSS Framework built with Sass and a bunch of AngularJS components.
-
-
-
-
- LumX is available through NPM:
- npm install official-lumx
-
-
-
- Don’t use NPM?
- You first need to download all these dependencies:
-
-
-
- - AngularJS
- - jQuery
- - Velocity
- - Moment.js (date picker only)
- - Bourbon (scss only)
- - Material Design Icons (scss only)
-
-
-
-
-
- All needed files are in the dist
folder.
- You can include LumX files and dependencies in your html template.
-
-
-
- Moreover, you can include the main sccs file in your Sass project instead of including the compiled file. In that case, you must set the include paths for Bourbon. In the case of this demo site, we use gulp-sass like this: includePaths: 'libs/bourbon/app/assets/stylesheets/'
- You'll get all all variables and mixins available: read more.
-
-
-
-
- When you have downloaded all the dependencies you need to add dependencies on the LumX AngularJS module: angular.module('myModule', ['lumx']);
-
-
-
-
- Our CSS framework is based on bourbon, a simple and lightweight mixin library for Sass:
- http://bourbon.io
-
-
-
- Material Design icons are based on Austin Andrews iconic font:
- http://materialdesignicons.com
-
-
-
- Velocity is used to provide smooth animations:
- http://julian.com/research/velocity
-
-
-
- Moment.js is used to manipulate dates for our date picker:
- http://momentjs.com
-
-
-
diff --git a/demo/includes/getting-started/installation/include.html b/demo/includes/getting-started/installation/include.html
deleted file mode 100644
index 3a414e9bb..000000000
--- a/demo/includes/getting-started/installation/include.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
LumX
+
+
+
+
+
+
+ <% if (webpackConfig.mode === 'production') { %>
+
+ <% } %>
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/js/demo/component/js/component_directive.js b/demo/js/demo/component/js/component_directive.js
deleted file mode 100644
index e321685a8..000000000
--- a/demo/js/demo/component/js/component_directive.js
+++ /dev/null
@@ -1,156 +0,0 @@
-(function()
-{
- 'use strict';
-
- angular
- .module('Directives')
- .directive('lxComponent', lxComponent)
- .directive('lxComponentAttributes', lxComponentAttributes)
- .directive('lxComponentMethods', lxComponentMethods)
- .directive('lxComponentMethod', lxComponentMethod);
-
- function lxComponent()
- {
- return {
- restrict: 'E',
- templateUrl: '/js/demo/component/views/component.html',
- scope: true,
- link: link,
- controller: LxComponentController,
- controllerAs: 'lxComponent',
- bindToController: true,
- transclude: true
- };
-
- function link(scope, element, attrs)
- {
- scope.lxComponent.isOpen = false;
-
- attrs.$observe('lxIsOpen', function(newIsOpen)
- {
- scope.lxComponent.isOpen = newIsOpen;
- });
-
- attrs.$observe('lxJsPath', function(newJsPath)
- {
- scope.lxComponent.jsPath = newJsPath;
- });
-
- scope.lxComponent.language = 'html';
-
- attrs.$observe('lxLanguage', function(newLanguage)
- {
- scope.lxComponent.language = newLanguage;
- });
-
- scope.lxComponent.noDemo = false;
-
- attrs.$observe('lxNoDemo', function(newNoDemo)
- {
- scope.lxComponent.noDemo = newNoDemo;
- });
-
- attrs.$observe('lxPath', function(newPath)
- {
- scope.lxComponent.path = newPath;
- });
-
- attrs.$observe('lxTitle', function(newTitle)
- {
- scope.lxComponent.title = newTitle;
- });
- }
- }
-
- LxComponentController.$inject = ['$transclude'];
-
- function LxComponentController($transclude)
- {
- var lxComponent = this;
-
- lxComponent.toggle = toggle;
-
- $transclude(function(clone)
- {
- if (clone.length)
- {
- lxComponent.hasTranscluded = true;
- }
- });
-
- ////////////
-
- function toggle()
- {
- lxComponent.isOpen = !lxComponent.isOpen;
- }
- }
-
- function lxComponentAttributes()
- {
- return {
- restrict: 'E',
- templateUrl: '/js/demo/component/views/component-attributes.html',
- transclude: true
- };
- }
-
- function lxComponentMethods()
- {
- return {
- restrict: 'E',
- templateUrl: '/js/demo/component/views/component-methods.html',
- scope: true,
- link: link,
- controller: LxComponentMethodsController,
- controllerAs: 'lxComponentMethods',
- bindToController: true,
- transclude: true
- };
-
- function link(scope, element, attrs)
- {
- attrs.$observe('lxTitle', function(newTitle)
- {
- scope.lxComponentMethods.title = newTitle;
- });
- }
- }
-
- function LxComponentMethodsController()
- {
- var lxComponentMethods = this;
- }
-
- function lxComponentMethod()
- {
- return {
- restrict: 'E',
- templateUrl: '/js/demo/component/views/component-method.html',
- scope: true,
- link: link,
- controller: LxComponentMethodController,
- controllerAs: 'lxComponentMethod',
- bindToController: true,
- transclude: true
- };
-
- function link(scope, element, attrs)
- {
- attrs.$observe('lxName', function(newName)
- {
- scope.lxComponentMethod.name = newName;
- });
-
- attrs.$observe('lxDescription', function(newDescription)
- {
- scope.lxComponentMethod.description = newDescription;
- });
- }
- }
-
- function LxComponentMethodController()
- {
- var lxComponentMethod = this;
- }
-})();
diff --git a/demo/js/demo/component/views/component-attributes.html b/demo/js/demo/component/views/component-attributes.html
deleted file mode 100644
index d1279b06a..000000000
--- a/demo/js/demo/component/views/component-attributes.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
\ No newline at end of file
diff --git a/demo/js/demo/component/views/component-method.html b/demo/js/demo/component/views/component-method.html
deleted file mode 100644
index 0df43b448..000000000
--- a/demo/js/demo/component/views/component-method.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
\ No newline at end of file
diff --git a/demo/js/demo/component/views/component-methods.html b/demo/js/demo/component/views/component-methods.html
deleted file mode 100644
index ff46690ab..000000000
--- a/demo/js/demo/component/views/component-methods.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
\ No newline at end of file
diff --git a/demo/js/demo/component/views/component.html b/demo/js/demo/component/views/component.html
deleted file mode 100644
index 1886377dd..000000000
--- a/demo/js/demo/component/views/component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
\ No newline at end of file
diff --git a/demo/js/demo/layout/js/layout_service.js b/demo/js/demo/layout/js/layout_service.js
deleted file mode 100644
index 91ae0d6f6..000000000
--- a/demo/js/demo/layout/js/layout_service.js
+++ /dev/null
@@ -1,38 +0,0 @@
-(function()
-{
- 'use strict';
-
- angular
- .module('Services')
- .service('LayoutService', LayoutService);
-
- LayoutService.$inject = [];
-
- function LayoutService()
- {
- var service = this;
-
- service.closePalmNav = closePalmNav;
- service.openPalmNav = openPalmNav;
- service.togglePalmNav = togglePalmNav;
-
- service.palmNavIsOpen = false;
-
- ////////////
-
- function closePalmNav()
- {
- service.palmNavIsOpen = false;
- }
-
- function openPalmNav()
- {
- service.palmNavIsOpen = true;
- }
-
- function togglePalmNav()
- {
- service.palmNavIsOpen = !service.palmNavIsOpen;
- }
- }
-})();
\ No newline at end of file
diff --git a/demo/js/demo/main-nav/js/main-nav-link_directive.js b/demo/js/demo/main-nav/js/main-nav-link_directive.js
deleted file mode 100644
index a88d8c834..000000000
--- a/demo/js/demo/main-nav/js/main-nav-link_directive.js
+++ /dev/null
@@ -1,53 +0,0 @@
-(function()
-{
- 'use strict';
-
- angular
- .module('Directives')
- .directive('lxMainNavLink', lxMainNavLink);
-
- function lxMainNavLink()
- {
- return {
- restrict: 'E',
- templateUrl: '/js/demo/main-nav/views/main-nav-link.html',
- scope:
- {
- context: '@lxContext',
- label: '@lxLabel',
- state: '@lxState',
- subNav: '@lxSubNav'
- },
- controller: LxMainNavLinkController,
- controllerAs: 'lxMainNavLink',
- bindToController: true
- };
- }
-
- LxMainNavLinkController.$inject = ['$scope', '$state'];
-
- function LxMainNavLinkController($scope, $state)
- {
- var lxMainNavLink = this;
-
- lxMainNavLink.toggleSubNav = toggleSubNav;
-
- $scope.$on('$stateChangeSuccess', function(_event, _toState)
- {
- lxMainNavLink.displaySubNav = _toState.name.indexOf(lxMainNavLink.state) > -1;
- });
-
- ////////////
-
- function toggleSubNav(_event)
- {
- if (lxMainNavLink.context === 'palm-nav')
- {
- _event.preventDefault();
- _event.stopPropagation();
-
- lxMainNavLink.displaySubNav = !lxMainNavLink.displaySubNav;
- }
- }
- }
-})();
\ No newline at end of file
diff --git a/demo/js/demo/main-nav/js/main-nav_directive.js b/demo/js/demo/main-nav/js/main-nav_directive.js
deleted file mode 100644
index 424b06d3a..000000000
--- a/demo/js/demo/main-nav/js/main-nav_directive.js
+++ /dev/null
@@ -1,38 +0,0 @@
-(function()
-{
- 'use strict';
-
- angular
- .module('Directives')
- .directive('lxMainNav', lxMainNav);
-
- function lxMainNav()
- {
- return {
- restrict: 'E',
- templateUrl: '/js/demo/main-nav/views/main-nav.html',
- scope:
- {
- context: '@lxContext'
- },
- controller: LxMainNavController,
- controllerAs: 'lxMainNav',
- bindToController: true
- };
- }
-
- LxMainNavController.$inject = ['$element', 'LayoutService'];
-
- function LxMainNavController($element, LayoutService)
- {
- var lxMainNav = this;
-
- if (lxMainNav.context === 'palm-nav')
- {
- $element.bind('click', function()
- {
- LayoutService.closePalmNav();
- });
- }
- }
-})();
\ No newline at end of file
diff --git a/demo/js/demo/main-nav/views/main-nav-link.html b/demo/js/demo/main-nav/views/main-nav-link.html
deleted file mode 100644
index 7d28c48ac..000000000
--- a/demo/js/demo/main-nav/views/main-nav-link.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
\ No newline at end of file
diff --git a/demo/js/demo/main-nav/views/main-nav.html b/demo/js/demo/main-nav/views/main-nav.html
deleted file mode 100644
index 702381494..000000000
--- a/demo/js/demo/main-nav/views/main-nav.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
\ No newline at end of file
diff --git a/demo/layout/demo/demo-block.html b/demo/layout/demo/demo-block.html
new file mode 100644
index 000000000..1cb23e17b
--- /dev/null
+++ b/demo/layout/demo/demo-block.html
@@ -0,0 +1,30 @@
+
diff --git a/demo/layout/demo/demo-block_directive.js b/demo/layout/demo/demo-block_directive.js
new file mode 100644
index 000000000..c1478da63
--- /dev/null
+++ b/demo/layout/demo/demo-block_directive.js
@@ -0,0 +1,149 @@
+import { mdiCodeTags } from '@lumx/icons';
+
+import template from './demo-block.html';
+
+/////////////////////////////
+
+function DemoBlockController() {
+ 'ngInject';
+
+ // eslint-disable-next-line consistent-this
+ const demoBlock = this;
+
+ /////////////////////////////
+ // //
+ // Public attributes //
+ // //
+ /////////////////////////////
+
+ /**
+ * The component category.
+ *
+ * @type {string}
+ */
+ demoBlock.category = 'components';
+
+ /**
+ * The component name.
+ *
+ * @type {string}
+ */
+ demoBlock.component = undefined;
+
+ /**
+ * Wether to display the component in dark theme or not.
+ *
+ * @type {boolean}
+ */
+ demoBlock.hasDarkTheme = false;
+
+ /**
+ * Wheter the block displays a theme switcher or not.
+ *
+ * @type {boolean}
+ */
+ demoBlock.hasThemeSwitcher = true;
+
+ /**
+ * The main block icons.
+ *
+ * @type {Object}
+ */
+ demoBlock.icons = {
+ mdiCodeTags,
+ };
+
+ /**
+ * Wheter the code view is open or not.
+ *
+ * @type {boolean}
+ */
+ demoBlock.isCodeOpen = false;
+
+ /**
+ * The component partial to display.
+ *
+ * @type {string}
+ */
+ demoBlock.partial = undefined;
+
+ /**
+ * The component theme.
+ *
+ * @type {string}
+ */
+ demoBlock.theme = 'light';
+
+ /////////////////////////////
+ // //
+ // Public functions //
+ // //
+ /////////////////////////////
+
+ /**
+ * Toggle code visibility.
+ */
+ function toggleCode() {
+ demoBlock.isCodeOpen = !demoBlock.isCodeOpen;
+ }
+
+ /**
+ * Toggle component theme from light to dark and so on.
+ */
+ function toggleTheme() {
+ if (demoBlock.hasDarkTheme) {
+ demoBlock.theme = 'dark';
+ } else {
+ demoBlock.theme = 'light';
+ }
+ }
+
+ /////////////////////////////
+
+ demoBlock.toggleCode = toggleCode;
+ demoBlock.toggleTheme = toggleTheme;
+}
+
+/////////////////////////////
+
+function DemoBlockDirective() {
+ 'ngInject';
+
+ function link(scope, el, attrs, ctrl) {
+ attrs.$observe('category', (category) => {
+ ctrl.category = category;
+ });
+
+ attrs.$observe('component', (component) => {
+ ctrl.component = component;
+ });
+
+ attrs.$observe('partial', (partial) => {
+ ctrl.partial = partial;
+ });
+
+ attrs.$observe('hasThemeSwitcher', (hasThemeSwitcher) => {
+ ctrl.hasThemeSwitcher = scope.$eval(hasThemeSwitcher);
+ });
+ }
+
+ return {
+ bindToController: true,
+ controller: DemoBlockController,
+ controllerAs: 'demoBlock',
+ link,
+ replace: true,
+ restrict: 'E',
+ scope: true,
+ template,
+ transclude: true,
+ };
+}
+
+/////////////////////////////
+
+angular.module('lumx-demo').directive('demoBlock', DemoBlockDirective);
+
+/////////////////////////////
+
+export { DemoBlockDirective };
diff --git a/demo/layout/demo/demo-colors.html b/demo/layout/demo/demo-colors.html
new file mode 100644
index 000000000..b25dcb698
--- /dev/null
+++ b/demo/layout/demo/demo-colors.html
@@ -0,0 +1,14 @@
+
+
+
{{ key }}
+
+
+ {{ hue.hexCode }}
+ {{ hue.opacity }}
+
+
+
diff --git a/demo/layout/demo/demo-colors_directive.js b/demo/layout/demo/demo-colors_directive.js
new file mode 100644
index 000000000..84aab0e76
--- /dev/null
+++ b/demo/layout/demo/demo-colors_directive.js
@@ -0,0 +1,64 @@
+import template from './demo-colors.html';
+
+/////////////////////////////
+
+function DemoColorsController() {
+ 'ngInject';
+
+ // eslint-disable-next-line consistent-this
+ const demoColors = this;
+
+ /////////////////////////////
+ // //
+ // Public functions //
+ // //
+ /////////////////////////////
+
+ /**
+ * Get hue style.
+ *
+ * @param {string} key The hue key.
+ * @param {Object} hue The hue font color, hexadecimal code and opacity.
+ * @return {Array} The hue classes.
+ */
+ function getHueStyle(key, hue) {
+ const classes = [];
+
+ classes.push(`lumx-theme-background-${demoColors.color}-${key}`);
+ classes.push(`lumx-theme-color-${hue.fontColor}-N`);
+
+ return classes;
+ }
+
+ /////////////////////////////
+
+ demoColors.getHueStyle = getHueStyle;
+}
+
+/////////////////////////////
+
+function DemoColorsDirective() {
+ 'ngInject';
+
+ return {
+ bindToController: true,
+ controller: DemoColorsController,
+ controllerAs: 'demoColors',
+ replace: true,
+ restrict: 'E',
+ scope: {
+ color: '@',
+ colors: '=',
+ theme: '@',
+ },
+ template,
+ };
+}
+
+/////////////////////////////
+
+angular.module('lumx-demo').directive('demoColors', DemoColorsDirective);
+
+/////////////////////////////
+
+export { DemoColorsDirective };
diff --git a/demo/layout/demo/demo-grid.html b/demo/layout/demo/demo-grid.html
new file mode 100644
index 000000000..f9ac0f663
--- /dev/null
+++ b/demo/layout/demo/demo-grid.html
@@ -0,0 +1 @@
+
diff --git a/demo/layout/demo/demo-grid_directive.js b/demo/layout/demo/demo-grid_directive.js
new file mode 100644
index 000000000..33ea4bc2f
--- /dev/null
+++ b/demo/layout/demo/demo-grid_directive.js
@@ -0,0 +1,22 @@
+import template from './demo-grid.html';
+
+/////////////////////////////
+
+function DemoGridDirective() {
+ 'ngInject';
+
+ return {
+ replace: true,
+ restrict: 'E',
+ template,
+ transclude: true,
+ };
+}
+
+/////////////////////////////
+
+angular.module('lumx-demo').directive('demoGrid', DemoGridDirective);
+
+/////////////////////////////
+
+export { DemoGridDirective };
diff --git a/demo/layout/main-nav/main-nav.html b/demo/layout/main-nav/main-nav.html
new file mode 100644
index 000000000..6819a5a0a
--- /dev/null
+++ b/demo/layout/main-nav/main-nav.html
@@ -0,0 +1,23 @@
+
+
+

+
LumApps design system
+
+
+
+
+
+
+
+
diff --git a/demo/layout/main-nav/main-nav_controller.js b/demo/layout/main-nav/main-nav_controller.js
new file mode 100644
index 000000000..a424d0ffd
--- /dev/null
+++ b/demo/layout/main-nav/main-nav_controller.js
@@ -0,0 +1,196 @@
+function MainNavController($state) {
+ 'ngInject';
+
+ const vm = this;
+
+ /////////////////////////////
+ // //
+ // Public attributes //
+ // //
+ /////////////////////////////
+
+ /**
+ * The states.
+ *
+ * @type {Array
\n"),e.put("dropdown-toggle.html",'