diff --git a/core/js/lumx.js b/core/js/lumx.js index a446f3877..93eb73486 100644 --- a/core/js/lumx.js +++ b/core/js/lumx.js @@ -29,6 +29,7 @@ angular.module('lumx.dialog', ['lumx.utils.event-scheduler']); angular.module('lumx.dropdown', ['lumx.utils.event-scheduler']); angular.module('lumx.fab', []); angular.module('lumx.file-input', []); +angular.module('lumx.grid', []); angular.module('lumx.icon', []); angular.module('lumx.list', []); angular.module('lumx.notification', ['lumx.utils.event-scheduler']); @@ -38,6 +39,7 @@ angular.module('lumx.radio-button', []); angular.module('lumx.ripple', []); angular.module('lumx.search-filter', []); angular.module('lumx.select', []); +angular.module('lumx.side-navigation', []); angular.module('lumx.stepper', []); angular.module('lumx.switch', []); angular.module('lumx.tabs', []); @@ -54,6 +56,7 @@ angular.module('lumx', [ 'lumx.dropdown', 'lumx.fab', 'lumx.file-input', + 'lumx.grid', 'lumx.icon', 'lumx.list', 'lumx.notification', @@ -63,6 +66,7 @@ angular.module('lumx', [ 'lumx.ripple', 'lumx.search-filter', 'lumx.select', + 'lumx.side-navigation', 'lumx.stepper', 'lumx.switch', 'lumx.tabs', diff --git a/demo/app.js b/demo/app.js index 7c28f7e64..e45813ec9 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,460 +1,136 @@ -(function() -{ - 'use strict'; +/* eslint-disable global-require, import/no-commonjs, import/no-unassigned-import, import/unambiguous */ - angular - .module('lumx-demo', [ - 'lumx', - 'ui.router', - 'hljs', - 'Controllers', - 'Directives', - 'Services' - ]) - .config(function($locationProvider, $stateProvider) - { - $locationProvider.html5Mode( - { - enabled: true, - requireBase: false - }); +function AppDefaultConfig($locationProvider, $stateProvider, markedProvider) { + $locationProvider.html5Mode({ + enabled: true, + }); - $stateProvider - .state('app', - { - abstract: true, - views: - { - 'header': - { - templateUrl: '/includes/layout/header/header.html' - } - } - }) - .state('app.home', - { - url: '/', - views: - { - 'main@': - { - templateUrl: '/includes/home/home.html' - } - } - }) - .state('app.getting-started', - { - url: '/getting-started', - views: - { - 'sidebar@': - { - templateUrl: '/includes/layout/sub-nav/sub-nav-getting-started.html' - } - }, - redirectTo: 'app.getting-started.installation' - }) - .state('app.getting-started.installation', - { - url: '/installation', - views: - { - 'main@': - { - templateUrl: '/includes/getting-started/installation.html' - } - } - }) - .state('app.getting-started.customization', - { - url: '/customization', - views: - { - 'main@': - { - templateUrl: '/includes/getting-started/customization.html' - } - } - }) - .state('app.getting-started.contribute', - { - url: '/contribute', - views: - { - 'main@': - { - templateUrl: '/includes/getting-started/contribute.html' - } - } - }) - .state('app.css', - { - url: '/css', - views: - { - 'sidebar@': - { - templateUrl: '/includes/layout/sub-nav/sub-nav-css.html' - } - }, - redirectTo: 'app.css.color' - }) - .state('app.css.color', - { - url: '/color', - views: - { - 'main@': - { - templateUrl: '/includes/css/color.html' - } - } - }) - .state('app.css.flexbox', - { - url: '/flexbox', - views: - { - 'main@': - { - templateUrl: '/includes/css/flexbox.html' - } - } - }) - .state('app.css.mixin', - { - url: '/mixin', - views: - { - 'main@': - { - templateUrl: '/includes/css/mixin.html' - } - } - }) - .state('app.css.typography', - { - url: '/typography', - views: - { - 'main@': - { - templateUrl: '/includes/css/typography.html' - } - } - }) - .state('app.components', - { - url: '/components', - views: - { - 'sidebar@': - { - templateUrl: '/includes/layout/sub-nav/sub-nav-components.html' - } - }, - redirectTo: 'app.components.button' - }) - .state('app.components.button', - { - url: '/button', - views: - { - 'main@': - { - templateUrl: '/includes/modules/button/button.html' - } - } - }) - .state('app.components.card', - { - url: '/card', - views: - { - 'main@': - { - templateUrl: '/includes/modules/card/card.html' - } - } - }) - .state('app.components.checkbox', - { - url: '/checkbox', - views: - { - 'main@': - { - templateUrl: '/includes/modules/checkbox/checkbox.html', - controller: 'DemoCheckboxController', - controllerAs: 'vm' - } - } - }) - .state('app.components.chip', - { - url: '/chip', - views: - { - 'main@': - { - templateUrl: '/includes/modules/chip/chip.html' - } - } - }) - .state('app.components.data-table', - { - url: '/data-table', - views: - { - 'main@': - { - templateUrl: '/includes/modules/data-table/data-table.html', - controller: 'DemoDataTableController', - controllerAs: 'vm' - } - } - }) - .state('app.components.date-picker', - { - url: '/date-picker', - views: - { - 'main@': - { - templateUrl: '/includes/modules/date-picker/date-picker.html', - controller: 'DemoDatePickerController', - controllerAs: 'vm' - } - } - }) - .state('app.components.dialog', - { - url: '/dialog', - views: - { - 'main@': - { - templateUrl: '/includes/modules/dialog/dialog.html', - controller: 'DemoDialogController', - controllerAs: 'vm' - } - } - }) - .state('app.components.dropdown', - { - url: '/dropdown', - views: - { - 'main@': - { - templateUrl: '/includes/modules/dropdown/dropdown.html', - controller: 'DemoDropdownController', - controllerAs: 'vm' - } - } - }) - .state('app.components.fab', - { - url: '/fab', - views: - { - 'main@': - { - templateUrl: '/includes/modules/fab/fab.html' - } - } - }) - .state('app.components.file-input', - { - url: '/file-input', - views: - { - 'main@': - { - templateUrl: '/includes/modules/file-input/file-input.html', - controller: 'DemoFileInputController', - controllerAs: 'vm' - } - } - }) - .state('app.components.icon', - { - url: '/icon', - views: - { - 'main@': - { - templateUrl: '/includes/modules/icon/icon.html' - } - } - }) - .state('app.components.list', - { - url: '/list', - views: - { - 'main@': - { - templateUrl: '/includes/modules/list/list.html' - } - } - }) - .state('app.components.notification', - { - url: '/notification', - views: - { - 'main@': - { - templateUrl: '/includes/modules/notification/notification.html', - controller: 'DemoNotificationController', - controllerAs: 'vm' - } - } - }) - .state('app.components.progress', - { - url: '/progress', - views: - { - 'main@': - { - templateUrl: '/includes/modules/progress/progress.html', - controller: 'DemoProgressController', - controllerAs: 'vm' - } - } - }) - .state('app.components.radio-button', - { - url: '/radio-button', - views: - { - 'main@': - { - templateUrl: '/includes/modules/radio-button/radio-button.html', - controller: 'DemoRadioButtonController', - controllerAs: 'vm' - } - } - }) - .state('app.components.search-filter', - { - url: '/search-filter', - views: - { - 'main@': - { - templateUrl: '/includes/modules/search-filter/search-filter.html', - controller: 'DemoSearchFilterController', - controllerAs: 'vm' - } - } - }) - .state('app.components.select', - { - url: '/select', - views: - { - 'main@': - { - templateUrl: '/includes/modules/select/select.html', - controller: 'DemoSelectController', - controllerAs: 'vm' - } - } - }) - .state('app.components.stepper', - { - url: '/stepper', - views: - { - 'main@': - { - templateUrl: '/includes/modules/stepper/stepper.html', - controller: 'DemoStepperController', - controllerAs: 'vm' - } - } - }) - .state('app.components.switch', - { - url: '/switch', - views: - { - 'main@': - { - templateUrl: '/includes/modules/switch/switch.html', - controller: 'DemoSwitchController', - controllerAs: 'vm' - } - } - }) - .state('app.components.tabs', - { - url: '/tabs', - views: - { - 'main@': - { - templateUrl: '/includes/modules/tabs/tabs.html', - controller: 'DemoTabsController', - controllerAs: 'vm' - } - } - }) - .state('app.components.text-field', - { - url: '/text-field', - views: - { - 'main@': - { - templateUrl: '/includes/modules/text-field/text-field.html', - controller: 'DemoTextFieldController', - controllerAs: 'vm' - } - } - }) - .state('app.components.toolbar', - { - url: '/toolbar', - views: - { - 'main@': - { - templateUrl: '/includes/modules/toolbar/toolbar.html' - } - } - }) - .state('app.components.tooltip', - { - url: '/tooltip', - views: - { - 'main@': - { - templateUrl: '/includes/modules/tooltip/tooltip.html' - } - } - }); + markedProvider.setOptions({ breaks: true, gfm: true }); + + $stateProvider + .state({ + name: 'app', + url: '/', + views: { + 'main-nav': { + controller: 'MainNavController', + controllerAs: 'vm', + template: require('./layout/main-nav/main-nav.html'), + }, + }, + }) + .state('app.foundations', { + abstract: true, + }) + .state('app.foundations.colors', { + url: 'colors', + views: { + 'main@': { + controller: 'DemoColorsController', + controllerAs: 'vm', + template: require('./foundations/colors/demo.html'), + }, + }, + }) + .state('app.foundations.typography', { + url: 'typography', + views: { + 'main@': { + template: require('./foundations/typography/demo.html'), + }, + }, + }) + .state('app.components', { + abstract: true, + }) + .state('app.components.button', { + url: 'button', + views: { + 'main@': { + controller: 'DemoButtonController', + controllerAs: 'vm', + template: require('./components/button/demo.html'), + }, + }, + }) + .state('app.components.checkbox', { + url: 'checkbox', + views: { + 'main@': { + controller: 'DemoCheckboxController', + controllerAs: 'vm', + template: require('./components/checkbox/demo.html'), + }, + }, + }) + .state('app.components.chip', { + url: 'chip', + views: { + 'main@': { + controller: 'DemoChipController', + controllerAs: 'vm', + template: require('./components/chip/demo.html'), + }, + }, }) - .run(['$rootScope', '$state', 'LayoutService', function($rootScope, $state, LayoutService) - { - $rootScope.$state = $state; - $rootScope.LayoutService = LayoutService; + .state('app.components.dropdown', { + url: 'dropdown', + views: { + 'main@': { + controller: 'DemoDropdownController', + controllerAs: 'vm', + template: require('./components/dropdown/demo.html'), + }, + }, + }) + .state('app.components.list', { + url: 'list', + views: { + 'main@': { + controller: 'DemoListController', + controllerAs: 'vm', + template: require('./components/list/demo.html'), + }, + }, + }) + .state('app.components.select', { + url: 'select', + views: { + 'main@': { + controller: 'DemoSelectController', + controllerAs: 'vm', + template: require('./components/select/demo.html'), + }, + }, + }); +} + +AppDefaultConfig.$inject = ['$locationProvider', '$stateProvider', 'markedProvider']; + +function AppDefaultRun($rootScope) { + /** + * Prevent scroll on main areas of the app. + * + * @param {Event} evt The scroll event. + */ + function scrollHandler(evt) { + evt.preventDefault(); + } + + $rootScope.$on('lumx-scroll__disable', () => { + angular.element('.main-nav, .main').on('mousewheel touchmove', scrollHandler); + }); + + $rootScope.$on('lumx-scroll__restore', () => { + angular.element('.main-nav, .main').off('mousewheel touchmove', scrollHandler); + }); +} + +AppDefaultRun.$inject = ['$rootScope']; - $rootScope.$on('$stateChangeStart', function(event, toState, toParams) - { - if (toState.redirectTo) - { - event.preventDefault(); - $state.go(toState.redirectTo, toParams) - } - }); - }]); +///////////////////////////// - angular.module('Controllers', []); - angular.module('Directives', []); - angular.module('Services', []); -})(); +angular + .module('lumx-demo', ['lumx', 'ui.router', 'hljs', 'hc.marked']) + .config(AppDefaultConfig) + .run(AppDefaultRun); diff --git a/demo/app.yaml b/demo/app.yaml deleted file mode 100644 index b25342bf3..000000000 --- a/demo/app.yaml +++ /dev/null @@ -1,38 +0,0 @@ -application: lumx -version: 1 -runtime: python27 -api_version: 1 -threadsafe: true - -handlers: -- url: /fonts - static_dir: fonts - -- url: /images - static_dir: images - -- url: /includes - static_dir: includes - -- url: /js - static_dir: js - -- url: /libs - static_dir: libs - -- url: /app.js - static_files: app.js - upload: app.js - mime_type: application/javascript - -- url: /lumx.css - static_files: lumx.css - upload: lumx.css - -- url: /favicon.png - static_files: favicon.png - upload: favicon.png - -- url: /.* - static_files: index.html - upload: index\.html diff --git a/demo/assets/images/logo.svg b/demo/assets/images/logo.svg new file mode 100644 index 000000000..fb3503e6b --- /dev/null +++ b/demo/assets/images/logo.svg @@ -0,0 +1,30 @@ + + + + logo + Created with Sketch. + + + + \ No newline at end of file diff --git a/demo/components/button/controller.js b/demo/components/button/controller.js new file mode 100644 index 000000000..b1e8f7ed9 --- /dev/null +++ b/demo/components/button/controller.js @@ -0,0 +1,60 @@ +import { mdiMenuDown, mdiPencil, mdiPlus } from '@lumx/icons'; + +///////////////////////////// + +function DemoButtonController() { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The icons to use in the template. + * + * @type {Object} + * @constant + * @readonly + */ + vm.icons = { + mdiMenuDown, + mdiPencil, + mdiPlus, + }; + + /** + * Wheter the toggle button is selected or not. + * + * @type {Object} + */ + vm.isSelected = false; + + ///////////////////////////// + // // + // Public functions // + // // + ///////////////////////////// + + /** + * Toggle chip selected state. + */ + function toggleSelected() { + vm.isSelected = !vm.isSelected; + } + + ///////////////////////////// + + vm.toggleSelected = toggleSelected; +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoButtonController', DemoButtonController); + +///////////////////////////// + +export { DemoButtonController }; diff --git a/demo/components/button/demo.html b/demo/components/button/demo.html new file mode 100644 index 000000000..bccfb46c4 --- /dev/null +++ b/demo/components/button/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/components/button/doc.md b/demo/components/button/doc.md new file mode 100644 index 000000000..a768c255a --- /dev/null +++ b/demo/components/button/doc.md @@ -0,0 +1,29 @@ +# Button + +**Buttons trigger actions with a single click.** + +## High emphasis + +Use high emphasis to help users to identify the main action. +There should not be more than one high emphasis button in a view. + + + +## Medium emphasis + +Use medium emphasis for secondary actions. + + + +## Low emphasis + +When the view contains a primary and a medium button, use low emphasis for lower priority actions. +Alternatively, use low emphasis when there is only one level of priority. + + + +## Small size + +Use small size when space is a constraint. + + diff --git a/demo/components/button/partials/emphasis-high.html b/demo/components/button/partials/emphasis-high.html new file mode 100644 index 000000000..5639a0c1c --- /dev/null +++ b/demo/components/button/partials/emphasis-high.html @@ -0,0 +1,31 @@ + + + Default + + + + Disabled + + + + + With Icon + + + + Dropdown + + + + + Split + + + + + + + + + + diff --git a/demo/components/button/partials/emphasis-low.html b/demo/components/button/partials/emphasis-low.html new file mode 100644 index 000000000..a77be9895 --- /dev/null +++ b/demo/components/button/partials/emphasis-low.html @@ -0,0 +1,23 @@ + + + Default + + + + Disabled + + + + + With Icon + + + + Dropdown + + + + + + + diff --git a/demo/components/button/partials/emphasis-medium.html b/demo/components/button/partials/emphasis-medium.html new file mode 100644 index 000000000..e27de7a35 --- /dev/null +++ b/demo/components/button/partials/emphasis-medium.html @@ -0,0 +1,42 @@ + + + Default + + + + Disabled + + + + + With Icon + + + + Dropdown + + + + + + Split + + + + + + + + + Toggle + + + + + + diff --git a/demo/components/button/partials/small.html b/demo/components/button/partials/small.html new file mode 100644 index 000000000..511dd2b0f --- /dev/null +++ b/demo/components/button/partials/small.html @@ -0,0 +1,89 @@ + + + Default + + + + Disabled + + + + + With Icon + + + + Dropdown + + + + + Split + + + + + + + + + + + + + + Default + + + + Disabled + + + + + With Icon + + + + Dropdown + + + + + + Split + + + + + + + + + + + + + + + Default + + + + Disabled + + + + + With Icon + + + + Dropdown + + + + + + + diff --git a/demo/components/checkbox/controller.js b/demo/components/checkbox/controller.js new file mode 100644 index 000000000..6d5ead534 --- /dev/null +++ b/demo/components/checkbox/controller.js @@ -0,0 +1,34 @@ +function DemoCheckboxController() { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The various type of checkboxes states and status. + * + * @type {Object} + */ + vm.checkboxes = { + model: { + checked: true, + unchecked: false, + }, + states: { + disabled: true, + }, + }; +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoCheckboxController', DemoCheckboxController); + +///////////////////////////// + +export { DemoCheckboxController }; diff --git a/demo/components/checkbox/demo.html b/demo/components/checkbox/demo.html new file mode 100644 index 000000000..9eef9eb13 --- /dev/null +++ b/demo/components/checkbox/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/components/checkbox/doc.md b/demo/components/checkbox/doc.md new file mode 100644 index 000000000..543a5ab2f --- /dev/null +++ b/demo/components/checkbox/doc.md @@ -0,0 +1,5 @@ +# Checkbox + +**Checkboxes allow users to select none, one, or more items.** + + diff --git a/demo/components/checkbox/partials/default.html b/demo/components/checkbox/partials/default.html new file mode 100644 index 000000000..733e3d0e2 --- /dev/null +++ b/demo/components/checkbox/partials/default.html @@ -0,0 +1,31 @@ +
+ + Checkbox + +
+ +
+ + + Checkbox with help + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. + + +
+ + + + Disable checkbox with help + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. + + diff --git a/demo/components/chip/controller.js b/demo/components/chip/controller.js new file mode 100644 index 000000000..c727e0c29 --- /dev/null +++ b/demo/components/chip/controller.js @@ -0,0 +1,115 @@ +import { mdiCheck, mdiClose, mdiCloseCircle, mdiEmail, mdiFilterVariant } from '@lumx/icons'; + +///////////////////////////// + +function DemoChipController(LxNotificationService) { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The icons to use in the template. + * + * @type {Object} + * @constant + * @readonly + */ + vm.icons = { + mdiCheck, + mdiClose, + mdiCloseCircle, + mdiEmail, + mdiFilterVariant, + }; + + /** + * Indicates if the chip is active or not. + * + * @type {Object} + */ + vm.isSelected = { + filter: [false], + multiple: [false, false, false, false, false, false], + unique: [false, false, false, false, false, false], + }; + + ///////////////////////////// + // // + // Public functions // + // // + ///////////////////////////// + + /** + * When the chip has been clicked, display a notification. + */ + function clickCallback() { + LxNotificationService.success('Callback'); + } + + /** + * Toggle chip selected state. + * + * @param {string} kind The chip kind. + * @param {number} index The chip index. + */ + function toggleSelected(kind, index) { + vm.isSelected[kind][index] = !vm.isSelected[kind][index]; + + if (kind === 'unique') { + for (let i = 0, len = vm.isSelected.unique.length; i < len; i++) { + if (i !== index) { + vm.isSelected.unique[i] = false; + } + } + } + } + + /** + * Select chip. + * + * @param {string} kind The chip kind. + * @param {number} index The chip index. + */ + function select(kind, index) { + if (vm.isSelected[kind][index]) { + return; + } + + vm.isSelected[kind][index] = true; + } + + /** + * Unselect chip. + * + * @param {string} kind The chip kind. + * @param {number} index The chip index. + */ + function unselect(kind, index) { + if (!vm.isSelected[kind][index]) { + return; + } + + vm.isSelected[kind][index] = false; + } + + ///////////////////////////// + + vm.clickCallback = clickCallback; + vm.toggleSelected = toggleSelected; + vm.select = select; + vm.unselect = unselect; +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoChipController', DemoChipController); + +///////////////////////////// + +export { DemoChipController }; diff --git a/demo/components/chip/demo.html b/demo/components/chip/demo.html new file mode 100644 index 000000000..4c0418b74 --- /dev/null +++ b/demo/components/chip/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/components/chip/doc.md b/demo/components/chip/doc.md new file mode 100644 index 000000000..8dd078962 --- /dev/null +++ b/demo/components/chip/doc.md @@ -0,0 +1,34 @@ +# Chip + +**Chips display distinct inputs, attributes, or actions.** +Use chips to display choices, as inputs or to filter content. + +## Default + +Use default to display distinct attributes such as tags on a blog post. + + + +## Dismissible + +Use dismissible when chips can be removed by users. + + + +## Choice + +Use choice when users makes an exclusive choice between values. When space is not a constraint, use this chip instead of a select component. + + + +## Filter + +Use Filter as an entry point to one or several choices. When it is active, it can have a clear button. + + + +## Small + +Use small when space is a constraint, as in areas like text fields, selects, dropdown menus and metadata. + + diff --git a/demo/components/chip/partials/choice.html b/demo/components/chip/partials/choice.html new file mode 100644 index 000000000..306cd5721 --- /dev/null +++ b/demo/components/chip/partials/choice.html @@ -0,0 +1,49 @@ + + + Am + + + + Stram + + + + Gram + + + + Pic + + + + Pic + + + + Colegram + + diff --git a/demo/components/chip/partials/default.html b/demo/components/chip/partials/default.html new file mode 100644 index 000000000..1f8291682 --- /dev/null +++ b/demo/components/chip/partials/default.html @@ -0,0 +1,15 @@ + + + Default + + + + + + + + + Rich + + + diff --git a/demo/components/chip/partials/dismissible.html b/demo/components/chip/partials/dismissible.html new file mode 100644 index 000000000..57ceceddb --- /dev/null +++ b/demo/components/chip/partials/dismissible.html @@ -0,0 +1,25 @@ + + + + Dismissible + + + + + + + + + + + + + + Dismissible rich + + + + + + + diff --git a/demo/components/chip/partials/filter.html b/demo/components/chip/partials/filter.html new file mode 100644 index 000000000..ec66b3276 --- /dev/null +++ b/demo/components/chip/partials/filter.html @@ -0,0 +1,21 @@ + + + + + + + + Filter + + + + + + + diff --git a/demo/components/chip/partials/small.html b/demo/components/chip/partials/small.html new file mode 100644 index 000000000..2e8136cbd --- /dev/null +++ b/demo/components/chip/partials/small.html @@ -0,0 +1,25 @@ + + + Default + + + + + + + + + Rich + + + + + + Dismissible + + + + + + + diff --git a/demo/components/dropdown/controller.js b/demo/components/dropdown/controller.js new file mode 100644 index 000000000..54cb7a916 --- /dev/null +++ b/demo/components/dropdown/controller.js @@ -0,0 +1,95 @@ +import { + mdiFileDocumentBox, + mdiNewspaper, + mdiClipboardAccount, + mdiArchive, + mdiStar, + mdiHelpCircle, + mdiWrench, +} from '@lumx/icons'; + +///////////////////////////// + +function DemoDropdownController(LxDropdownService) { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The id of the dropdown. + * + * @type {string} + * @constant + * @readonly + */ + vm.dropdownId = 'test-dropdown-menu'; + vm.dropdownTarget = 'test-dropdown-target'; + vm.dropdownSource = 'test-dropdown-source'; + + /** + * The icons to use in the template. + * + * @type {Object} + * @constant + * @readonly + */ + vm.icons = { + mdiFileDocumentBox, + mdiNewspaper, + mdiClipboardAccount, + mdiArchive, + mdiStar, + mdiHelpCircle, + mdiWrench, + }; + + ///////////////////////////// + // // + // Public functions // + // // + ///////////////////////////// + + /** + * Close the dropdown. + * + * @param {Event} evt The event that triggered this function. + */ + function closeDropdown(evt) { + evt.stopPropagation(); + + LxDropdownService.close(vm.dropdownId); + } + + /** + * Open the dropdown. + * + * @param {Event} evt The event that triggered this function. + */ + function openDropdown(evt) { + evt.stopPropagation(); + + LxDropdownService.open(vm.dropdownId, { + target: `#${vm.dropdownTarget}`, + source: `#${vm.dropdownSource}`, + }); + } + + ///////////////////////////// + + vm.closeDropdown = closeDropdown; + vm.openDropdown = openDropdown; +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoDropdownController', DemoDropdownController); + +///////////////////////////// + +export { DemoDropdownController }; diff --git a/demo/components/dropdown/demo.html b/demo/components/dropdown/demo.html new file mode 100644 index 000000000..2c1bdc1f5 --- /dev/null +++ b/demo/components/dropdown/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/components/dropdown/doc.md b/demo/components/dropdown/doc.md new file mode 100644 index 000000000..7284ff94c --- /dev/null +++ b/demo/components/dropdown/doc.md @@ -0,0 +1,10 @@ +# Dropdown + +**Dropdowns present multiple actions in a small area.** +Dropdowns are commonly used for contextual menus and in form selects. They can contain dividers, icons, a user picture and a thumbnail. + + + + + + diff --git a/demo/components/dropdown/partials/default.html b/demo/components/dropdown/partials/default.html new file mode 100644 index 000000000..21d95ed90 --- /dev/null +++ b/demo/components/dropdown/partials/default.html @@ -0,0 +1,103 @@ + + + + Simple menu + + + + + + Los Angeles + + + + Monterrey + + + + Georgetown + + + + Cali + + + + Trondheim + + + + + + + + Complex menu + + + + + Contribution + + + + + + + Pages + + + + + + + + News articles + + + + + + + + Job offers + + + + + Directories + + + + + + + Projects + + + + + + + + Useful links + + + + + + + + Support links + + + + + + + + Engineering + + + + + diff --git a/demo/components/dropdown/partials/target.html b/demo/components/dropdown/partials/target.html new file mode 100644 index 000000000..42741e64b --- /dev/null +++ b/demo/components/dropdown/partials/target.html @@ -0,0 +1,41 @@ + + + Target + + + + + + Open dropdown + + + + Close dropdown + + + + + + + Los Angeles + + + + Monterrey + + + + Georgetown + + + + Cali + + + + Trondheim + + + + + diff --git a/demo/components/list/controller.js b/demo/components/list/controller.js new file mode 100644 index 000000000..ee3a974f8 --- /dev/null +++ b/demo/components/list/controller.js @@ -0,0 +1,35 @@ +import { mdiSend, mdiDotsHorizontal } from '@lumx/icons'; + +///////////////////////////// + +function DemoListController() { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The icons to use in the template. + * + * @type {Object} + * @constant + * @readonly + */ + vm.icons = { + mdiSend, + mdiDotsHorizontal, + }; +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoListController', DemoListController); + +///////////////////////////// + +export { DemoListController }; diff --git a/demo/components/list/demo.html b/demo/components/list/demo.html new file mode 100644 index 000000000..b92d05f66 --- /dev/null +++ b/demo/components/list/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/components/list/doc.md b/demo/components/list/doc.md new file mode 100644 index 000000000..93313a268 --- /dev/null +++ b/demo/components/list/doc.md @@ -0,0 +1,19 @@ +# List + +**Lists group items vertically.** + +## Tiny + + + +## Regular + + + +## Big + + + +## Huge + + diff --git a/demo/components/list/partials/big.html b/demo/components/list/partials/big.html new file mode 100644 index 000000000..dce0117e6 --- /dev/null +++ b/demo/components/list/partials/big.html @@ -0,0 +1,57 @@ + + Text only + + + +
Two-line item
+
Secondary text
+ + + + Rich + + + + + + + +
Two-line item
+
Secondary text
+ + + + + + + + + +
Two-line item
+
Secondary text
+ + + + + + + + + + + + + + + +
Two-line item
+
Secondary text
+ + + + + Button + + + + diff --git a/demo/components/list/partials/huge.html b/demo/components/list/partials/huge.html new file mode 100644 index 000000000..ab64c22e4 --- /dev/null +++ b/demo/components/list/partials/huge.html @@ -0,0 +1,77 @@ + + Text only + + + +
Multi-line item
+
+

+ Secondary text Ambitioni dedisse scripsisse iudicaretur. Hi omnes lingua, institutis, legibus inter + se differunt. Idque Caesaris facere voluntate liceret: sese habere +

+
+ + + + Rich + + + + + + + +
Multi-line item
+
+

+ Secondary text Ambitioni dedisse scripsisse iudicaretur. Hi omnes lingua, institutis, legibus inter + se differunt. Idque Caesaris facere voluntate liceret: sese habere +

+
+ + + + + + + + + +
Multi-line item
+
+

+ Secondary text Ambitioni dedisse scripsisse iudicaretur. Hi omnes lingua, institutis, legibus inter + se differunt. Idque Caesaris facere voluntate liceret: sese habere +

+
+ + + + + + + + + + + + + + + +
Multi-line item
+
+

+ Secondary text Ambitioni dedisse scripsisse iudicaretur. Hi omnes lingua, institutis, legibus inter + se differunt. Idque Caesaris facere voluntate liceret: sese habere +

+
+ + + + + Button + + + + diff --git a/demo/components/list/partials/regular.html b/demo/components/list/partials/regular.html new file mode 100644 index 000000000..c7de3980f --- /dev/null +++ b/demo/components/list/partials/regular.html @@ -0,0 +1,51 @@ + + Text only + + + Single-line item + + + Rich + + + + + + + + Single-line item + + + + + + + + + + Single-line item + + + + + + + + + + + + + + + + Single-line item + + + + + Button + + + + diff --git a/demo/components/list/partials/tiny.html b/demo/components/list/partials/tiny.html new file mode 100644 index 000000000..b9ba2cbf5 --- /dev/null +++ b/demo/components/list/partials/tiny.html @@ -0,0 +1,47 @@ + + Text only + + + Single-line item + + + + Single-line item + + + + Single-line item + + + Text with icon + + + + + + + + Single-line item + + + + + + + + + + Single-line item + + + + + + + + + + Single-line item + + + diff --git a/demo/components/select/controller.js b/demo/components/select/controller.js new file mode 100644 index 000000000..504f4d9bf --- /dev/null +++ b/demo/components/select/controller.js @@ -0,0 +1,172 @@ +function DemoSelectController($http) { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The configuration for the "Ajax" select demo. + * + * @type {Object} + */ + vm.selectAjax = { + list: [], + loading: false, + selected: ['Bossk', 'Boba Fett'], + toModel(person, cb) { + if (person) { + cb(person.name); + } else { + cb(); + } + }, + toSelection(personName, cb) { + if (personName) { + $http + .get(`https://swapi.co/api/people/?search=${escape(personName)}`) + .then(function toSelectionSuccess(response) { + if (response.data && response.data.results) { + cb(response.data.results[0]); + } + }) + .catch(function toSelectionError() { + cb(); + }); + } else { + cb(); + } + }, + update(newFilter) { + if (newFilter) { + vm.selectAjax.loading = true; + + $http + .get(`https://swapi.co/api/people/?search=${escape(newFilter)}`) + .then((response) => { + if (response.data && response.data.results) { + vm.selectAjax.list = response.data.results; + } + }) + .finally(() => { + vm.selectAjax.loading = false; + }); + } else { + vm.selectAjax.list = false; + } + }, + }; + + /** + * The list of person to display in the "People" select. + * + * @type {Array} + * @constant + * @readonly + */ + vm.selectPeople = [ + { + // eslint-disable-next-line no-magic-numbers + age: 10, + email: 'adam@email.com', + name: 'Adam', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 12, + email: 'amalie@email.com', + name: 'Amalie', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 30, + email: 'wladimir@email.com', + name: 'Wladimir', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 31, + email: 'samantha@email.com', + name: 'Samantha', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 16, + email: 'estefanía@email.com', + name: 'Estefanía', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 54, + email: 'natasha@email.com', + name: 'Natasha', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 43, + email: 'nicole@email.com', + name: 'Nicole', + }, + { + // eslint-disable-next-line no-magic-numbers + age: 21, + email: 'adrian@email.com', + name: 'Adrian', + }, + ]; + + /** + * The models of some select in the demo page. + * + * @type {Object} + */ + vm.selectModel = { + selectedPeople: [vm.selectPeople[2], vm.selectPeople[4]], + selectedPerson: undefined, + }; + + ///////////////////////////// + // // + // Public functions // + // // + ///////////////////////////// + + /** + * The callback to execute when a value has been selected in the "Ajax" select. + */ + function selectCallback() { + // eslint-disable-next-line no-console + console.log('New value: ', vm.selectAjax.selected); + } + + ///////////////////////////// + + vm.selectCallback = selectCallback; + + ///////////////////////////// + + /** + * Initialize the controller. + */ + function init() { + $http.get('https://swapi.co/api/people/?search=bo').then((response) => { + if (response.data && response.data.results) { + vm.selectAjax.list = response.data.results; + } + }); + } + + init(); +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoSelectController', DemoSelectController); + +///////////////////////////// + +export { DemoSelectController }; diff --git a/demo/components/select/demo.html b/demo/components/select/demo.html new file mode 100644 index 000000000..f534e737e --- /dev/null +++ b/demo/components/select/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/components/select/doc.md b/demo/components/select/doc.md new file mode 100644 index 000000000..fa2a41ab4 --- /dev/null +++ b/demo/components/select/doc.md @@ -0,0 +1,25 @@ +# Select + +**Selects display options in a list and present the users choice in the list box. Use it when users need to select one or more options.** + +## Single selection + + + +## Multi selection + + + +### Multi selection with search + + + +## Validation + +### Select valid + + + +### Select invalid + + diff --git a/demo/components/select/partials/multi-select-search.html b/demo/components/select/partials/multi-select-search.html new file mode 100644 index 000000000..e5a4baa83 --- /dev/null +++ b/demo/components/select/partials/multi-select-search.html @@ -0,0 +1,19 @@ + + {{ $selected.name }} (Born in {{ $selected.birth_year }}) + {{ $choice.name }} (Appears in {{ $choice.films.length }} films) + diff --git a/demo/components/select/partials/multi-select.html b/demo/components/select/partials/multi-select.html new file mode 100644 index 000000000..3cf29c113 --- /dev/null +++ b/demo/components/select/partials/multi-select.html @@ -0,0 +1,11 @@ + + {{ $selected.name }} - {{ $selected.age }} + {{ $choice.email }} + diff --git a/demo/components/select/partials/single-select.html b/demo/components/select/partials/single-select.html new file mode 100644 index 000000000..90bec6737 --- /dev/null +++ b/demo/components/select/partials/single-select.html @@ -0,0 +1,11 @@ + + {{ $selected.name }} - {{ $selected.age }} + {{ $choice.email }} + diff --git a/demo/components/select/partials/validation-invalid.html b/demo/components/select/partials/validation-invalid.html new file mode 100644 index 000000000..f5cb1e2e0 --- /dev/null +++ b/demo/components/select/partials/validation-invalid.html @@ -0,0 +1,12 @@ + + {{ $selected.name }} - {{ $selected.age }} + {{ $choice.email }} + diff --git a/demo/components/select/partials/validation-valid.html b/demo/components/select/partials/validation-valid.html new file mode 100644 index 000000000..f4340daf7 --- /dev/null +++ b/demo/components/select/partials/validation-valid.html @@ -0,0 +1,12 @@ + + {{ $selected.name }} - {{ $selected.age }} + {{ $choice.email }} + diff --git a/demo/constants.js b/demo/constants.js new file mode 100644 index 000000000..0236e7965 --- /dev/null +++ b/demo/constants.js @@ -0,0 +1,269 @@ +///////////////////////////// +// // +// Public attributes // +// // +///////////////////////////// + +/** + * The icons to use in the template. + */ +const COLOR_VARIANTS = { + blue: { + D2: { + fontColor: 'light', + hexCode: '#2972e2', + }, + D1: { + fontColor: 'light', + hexCode: '#2885f6', + }, + // eslint-disable-next-line id-length + N: { + fontColor: 'light', + hexCode: '#2493ff', + }, + L1: { + fontColor: 'dark', + hexCode: '#2493ff', + opacity: '80%', + }, + L2: { + fontColor: 'dark', + hexCode: '#2493ff', + opacity: '60%', + }, + L3: { + fontColor: 'dark', + hexCode: '#2493ff', + opacity: '40%', + }, + L4: { + fontColor: 'dark', + hexCode: '#2493ff', + opacity: '20%', + }, + L5: { + fontColor: 'dark', + hexCode: '#2493ff', + opacity: '10%', + }, + L6: { + fontColor: 'dark', + hexCode: '#2493ff', + opacity: '5%', + }, + }, + dark: { + // eslint-disable-next-line id-length + N: { + fontColor: 'light', + hexCode: '#28336d', + }, + L1: { + fontColor: 'light', + hexCode: '#28336d', + opacity: '80%', + }, + L2: { + fontColor: 'light', + hexCode: '#28336d', + opacity: '60%', + }, + L3: { + fontColor: 'dark', + hexCode: '#28336d', + opacity: '40%', + }, + L4: { + fontColor: 'dark', + hexCode: '#28336d', + opacity: '20%', + }, + L5: { + fontColor: 'dark', + hexCode: '#28336d', + opacity: '10%', + }, + L6: { + fontColor: 'dark', + hexCode: '#28336d', + opacity: '5%', + }, + }, + light: { + // eslint-disable-next-line id-length + N: { + fontColor: 'dark', + hexCode: '#fff', + }, + L1: { + fontColor: 'dark', + hexCode: '#fff', + opacity: '90%', + }, + L2: { + fontColor: 'dark', + hexCode: '#fff', + opacity: '80%', + }, + L3: { + fontColor: 'dark', + hexCode: '#fff', + opacity: '60%', + }, + L4: { + fontColor: 'light', + hexCode: '#fff', + opacity: '40%', + }, + L5: { + fontColor: 'light', + hexCode: '#fff', + opacity: '20%', + }, + L6: { + fontColor: 'light', + hexCode: '#fff', + opacity: '10%', + }, + }, + yellow: { + D2: { + fontColor: 'light', + hexCode: '#fea41c', + }, + D1: { + fontColor: 'dark', + hexCode: '#ffb71f', + }, + // eslint-disable-next-line id-length + N: { + fontColor: 'dark', + hexCode: '#ffc525', + }, + L1: { + fontColor: 'dark', + hexCode: '#ffc525', + opacity: '80%', + }, + L2: { + fontColor: 'dark', + hexCode: '#ffc525', + opacity: '60%', + }, + L3: { + fontColor: 'dark', + hexCode: '#ffc525', + opacity: '40%', + }, + L4: { + fontColor: 'dark', + hexCode: '#ffc525', + opacity: '20%', + }, + L5: { + fontColor: 'dark', + hexCode: '#ffc525', + opacity: '10%', + }, + L6: { + fontColor: 'dark', + hexCode: '#ffc525', + opacity: '5%', + }, + }, + red: { + D2: { + fontColor: 'light', + hexCode: '#c2395a', + }, + D1: { + fontColor: 'light', + hexCode: '#d83e5e', + }, + // eslint-disable-next-line id-length + N: { + fontColor: 'light', + hexCode: '#e94361', + }, + L1: { + fontColor: 'dark', + hexCode: '#e94361', + opacity: '80%', + }, + L2: { + fontColor: 'dark', + hexCode: '#e94361', + opacity: '60%', + }, + L3: { + fontColor: 'dark', + hexCode: '#e94361', + opacity: '40%', + }, + L4: { + fontColor: 'dark', + hexCode: '#e94361', + opacity: '20%', + }, + L5: { + fontColor: 'dark', + hexCode: '#e94361', + opacity: '10%', + }, + L6: { + fontColor: 'dark', + hexCode: '#e94361', + opacity: '5%', + }, + }, + green: { + D2: { + fontColor: 'light', + hexCode: '#008f4e', + }, + D1: { + fontColor: 'light', + hexCode: '#0fa15a', + }, + // eslint-disable-next-line id-length + N: { + fontColor: 'light', + hexCode: '#19b065', + }, + L1: { + fontColor: 'dark', + hexCode: '#19b065', + opacity: '80%', + }, + L2: { + fontColor: 'dark', + hexCode: '#19b065', + opacity: '60%', + }, + L3: { + fontColor: 'dark', + hexCode: '#19b065', + opacity: '40%', + }, + L4: { + fontColor: 'dark', + hexCode: '#19b065', + opacity: '20%', + }, + L5: { + fontColor: 'dark', + hexCode: '#19b065', + opacity: '10%', + }, + L6: { + fontColor: 'dark', + hexCode: '#19b065', + opacity: '5%', + }, + }, +}; + +///////////////////////////// + +export { COLOR_VARIANTS }; diff --git a/demo/favicon.png b/demo/favicon.png deleted file mode 100644 index d9f634447..000000000 Binary files a/demo/favicon.png and /dev/null differ diff --git a/demo/foundations/colors/controller.js b/demo/foundations/colors/controller.js new file mode 100644 index 000000000..78ee449c2 --- /dev/null +++ b/demo/foundations/colors/controller.js @@ -0,0 +1,30 @@ +import { COLOR_VARIANTS } from '../../constants'; + +function DemoColorsController() { + 'ngInject'; + + const vm = this; + + ///////////////////////////// + // // + // Public attributes // + // // + ///////////////////////////// + + /** + * The icons to use in the template. + * + * @type {Object} + * @constant + * @readonly + */ + vm.colors = COLOR_VARIANTS; +} + +///////////////////////////// + +angular.module('lumx-demo').controller('DemoColorsController', DemoColorsController); + +///////////////////////////// + +export { DemoColorsController }; diff --git a/demo/foundations/colors/demo.html b/demo/foundations/colors/demo.html new file mode 100644 index 000000000..319bd5018 --- /dev/null +++ b/demo/foundations/colors/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/foundations/colors/doc.md b/demo/foundations/colors/doc.md new file mode 100644 index 000000000..91d9c4093 --- /dev/null +++ b/demo/foundations/colors/doc.md @@ -0,0 +1,31 @@ +# Colors + +**Available color palette** + +## Primary palette + +### Blue + + + +### Dark + + + +### Light + + + +## Secondary palette + +### Yellow + + + +### Red + + + +### Green + + diff --git a/demo/foundations/typography/demo.html b/demo/foundations/typography/demo.html new file mode 100644 index 000000000..a96ff87bb --- /dev/null +++ b/demo/foundations/typography/demo.html @@ -0,0 +1,2 @@ + + diff --git a/demo/foundations/typography/doc.md b/demo/foundations/typography/doc.md new file mode 100644 index 000000000..95504dd33 --- /dev/null +++ b/demo/foundations/typography/doc.md @@ -0,0 +1,5 @@ +# Typography + +**Available text styles** + + diff --git a/demo/foundations/typography/partials/typography.html b/demo/foundations/typography/partials/typography.html new file mode 100644 index 000000000..0b0915315 --- /dev/null +++ b/demo/foundations/typography/partials/typography.html @@ -0,0 +1,9 @@ +

Display 1

+

Headline

+

Title

+

Subtitle 2

+

Subtitle 1

+

Body 2

+

Body 1

+

Caption

+

Overline

diff --git a/demo/images/github/github.png b/demo/images/github/github.png deleted file mode 100644 index ea6ff545a..000000000 Binary files a/demo/images/github/github.png and /dev/null differ diff --git a/demo/images/logo/lumapps.png b/demo/images/logo/lumapps.png deleted file mode 100644 index fc4df4824..000000000 Binary files a/demo/images/logo/lumapps.png and /dev/null differ diff --git a/demo/images/logo/lumx-white.png b/demo/images/logo/lumx-white.png deleted file mode 100644 index 214f1930d..000000000 Binary files a/demo/images/logo/lumx-white.png and /dev/null differ diff --git a/demo/images/logo/lumx.png b/demo/images/logo/lumx.png deleted file mode 100644 index a01ee58d1..000000000 Binary files a/demo/images/logo/lumx.png and /dev/null differ diff --git a/demo/images/placeholder/1-horizontal.jpg b/demo/images/placeholder/1-horizontal.jpg deleted file mode 100644 index de38c902b..000000000 Binary files a/demo/images/placeholder/1-horizontal.jpg and /dev/null differ diff --git a/demo/images/placeholder/1-square.jpg b/demo/images/placeholder/1-square.jpg deleted file mode 100644 index 3176b7dd3..000000000 Binary files a/demo/images/placeholder/1-square.jpg and /dev/null differ diff --git a/demo/images/placeholder/1-vertical.jpg b/demo/images/placeholder/1-vertical.jpg deleted file mode 100644 index 0bf8b0ed9..000000000 Binary files a/demo/images/placeholder/1-vertical.jpg and /dev/null differ diff --git a/demo/images/placeholder/2-horizontal.jpg b/demo/images/placeholder/2-horizontal.jpg deleted file mode 100644 index 59b0d005e..000000000 Binary files a/demo/images/placeholder/2-horizontal.jpg and /dev/null differ diff --git a/demo/images/placeholder/2-square.jpg b/demo/images/placeholder/2-square.jpg deleted file mode 100644 index 34e78215b..000000000 Binary files a/demo/images/placeholder/2-square.jpg and /dev/null differ diff --git a/demo/images/placeholder/2-vertical.jpg b/demo/images/placeholder/2-vertical.jpg deleted file mode 100644 index dc387b7a8..000000000 Binary files a/demo/images/placeholder/2-vertical.jpg and /dev/null differ diff --git a/demo/images/placeholder/3-horizontal.jpg b/demo/images/placeholder/3-horizontal.jpg deleted file mode 100644 index 7bffd24e7..000000000 Binary files a/demo/images/placeholder/3-horizontal.jpg and /dev/null differ diff --git a/demo/images/placeholder/3-square.jpg b/demo/images/placeholder/3-square.jpg deleted file mode 100644 index 37c0b9edb..000000000 Binary files a/demo/images/placeholder/3-square.jpg and /dev/null differ diff --git a/demo/images/placeholder/3-vertical.jpg b/demo/images/placeholder/3-vertical.jpg deleted file mode 100644 index 14c66fcbe..000000000 Binary files a/demo/images/placeholder/3-vertical.jpg and /dev/null differ diff --git a/demo/includes/css/color.html b/demo/includes/css/color.html deleted file mode 100644 index 39968af4c..000000000 --- a/demo/includes/css/color.html +++ /dev/null @@ -1,21 +0,0 @@ -
-

Color

- -

- The full Material Design color palette is available. -

- - - Sass variables are available for every color used in the UI Color Palette. - - - - Each color are available as background color or text color css helpers. - - - - As described in Material Design Guidelines, you should limit your selection of colors by choosing three color hues from the primary palette and one accent color from the secondary palette. The accent color may or may not need fallback options.
- Primary and secondary colors are defined in dist/scss/settings/_settings.color-palette.scss.
- Feel free to override it according to your needs. - -
diff --git a/demo/includes/css/color/helper.html b/demo/includes/css/color/helper.html deleted file mode 100644 index 605ce261e..000000000 --- a/demo/includes/css/color/helper.html +++ /dev/null @@ -1,19 +0,0 @@ -
-
-
- Lorem Ipsum -
-
- -
-
- Lorem Ipsum -
-
- -
-
- Lorem Ipsum -
-
-
\ No newline at end of file diff --git a/demo/includes/css/color/palette.html b/demo/includes/css/color/palette.html deleted file mode 100644 index 5b48beb62..000000000 --- a/demo/includes/css/color/palette.html +++ /dev/null @@ -1,967 +0,0 @@ -
- -
-
- Red - $red-500 -
-
- $red-50 -
-
- $red-100 -
-
- $red-200 -
-
- $red-300 -
-
- $red-400 -
-
- $red-500 -
-
- $red-600 -
-
- $red-700 -
-
- $red-800 -
-
- $red-900 -
-
- $red-A100 -
-
- $red-A200 -
-
- $red-A400 -
-
- $red-A700 -
-
- - -
-
- Pink - $pink-500 -
-
- $pink-50 -
-
- $pink-100 -
-
- $pink-200 -
-
- $pink-300 -
-
- $pink-400 -
-
- $pink-500 -
-
- $pink-600 -
-
- $pink-700 -
-
- $pink-800 -
-
- $pink-900 -
-
- $pink-A100 -
-
- $pink-A200 -
-
- $pink-A400 -
-
- $pink-A700 -
-
- - -
-
- Purple - $purple-500 -
-
- $purple-50 -
-
- $purple-100 -
-
- $purple-200 -
-
- $purple-300 -
-
- $purple-400 -
-
- $purple-500 -
-
- $purple-600 -
-
- $purple-700 -
-
- $purple-800 -
-
- $purple-900 -
-
- $purple-A100 -
-
- $purple-A200 -
-
- $purple-A400 -
-
- $purple-A700 -
-
-
- -
- -
-
- Deep purple - $deep-purple-500 -
-
- $deep-purple-50 -
-
- $deep-purple-100 -
-
- $deep-purple-200 -
-
- $deep-purple-300 -
-
- $deep-purple-400 -
-
- $deep-purple-500 -
-
- $deep-purple-600 -
-
- $deep-purple-700 -
-
- $deep-purple-800 -
-
- $deep-purple-900 -
-
- $deep-purple-A100 -
-
- $deep-purple-A200 -
-
- $deep-purple-A400 -
-
- $deep-purple-A700 -
-
- - -
-
- Indigo - $indigo-500 -
-
- $indigo-50 -
-
- $indigo-100 -
-
- $indigo-200 -
-
- $indigo-300 -
-
- $indigo-400 -
-
- $indigo-500 -
-
- $indigo-600 -
-
- $indigo-700 -
-
- $indigo-800 -
-
- $indigo-900 -
-
- $indigo-A100 -
-
- $indigo-A200 -
-
- $indigo-A400 -
-
- $indigo-A700 -
-
- - -
-
- Blue - $blue-500 -
-
- $blue-50 -
-
- $blue-100 -
-
- $blue-200 -
-
- $blue-300 -
-
- $blue-400 -
-
- $blue-500 -
-
- $blue-600 -
-
- $blue-700 -
-
- $blue-800 -
-
- $blue-900 -
-
- $blue-A100 -
-
- $blue-A200 -
-
- $blue-A400 -
-
- $blue-A700 -
-
-
- -
- -
-
- Light blue - $light-blue-500 -
-
- $light-blue-50 -
-
- $light-blue-100 -
-
- $light-blue-200 -
-
- $light-blue-300 -
-
- $light-blue-400 -
-
- $light-blue-500 -
-
- $light-blue-600 -
-
- $light-blue-700 -
-
- $light-blue-800 -
-
- $light-blue-900 -
-
- $light-blue-A100 -
-
- $light-blue-A200 -
-
- $light-blue-A400 -
-
- $light-blue-A700 -
-
- - -
-
- Cyan - $cyan-500 -
-
- $cyan-50 -
-
- $cyan-100 -
-
- $cyan-200 -
-
- $cyan-300 -
-
- $cyan-400 -
-
- $cyan-500 -
-
- $cyan-600 -
-
- $cyan-700 -
-
- $cyan-800 -
-
- $cyan-900 -
-
- $cyan-A100 -
-
- $cyan-A200 -
-
- $cyan-A400 -
-
- $cyan-A700 -
-
- - -
-
- Teal - $teal-500 -
-
- $teal-50 -
-
- $teal-100 -
-
- $teal-200 -
-
- $teal-300 -
-
- $teal-400 -
-
- $teal-500 -
-
- $teal-600 -
-
- $teal-700 -
-
- $teal-800 -
-
- $teal-900 -
-
- $teal-A100 -
-
- $teal-A200 -
-
- $teal-A400 -
-
- $teal-A700 -
-
-
- -
- -
-
- Green - $green-500 -
-
- $green-50 -
-
- $green-100 -
-
- $green-200 -
-
- $green-300 -
-
- $green-400 -
-
- $green-500 -
-
- $green-600 -
-
- $green-700 -
-
- $green-800 -
-
- $green-900 -
-
- $green-A100 -
-
- $green-A200 -
-
- $green-A400 -
-
- $green-A700 -
-
- - -
-
- Light Green - $light-green-500 -
-
- $light-green-50 -
-
- $light-green-100 -
-
- $light-green-200 -
-
- $light-green-300 -
-
- $light-green-400 -
-
- $light-green-500 -
-
- $light-green-600 -
-
- $light-green-700 -
-
- $light-green-800 -
-
- $light-green-900 -
-
- $light-green-A100 -
-
- $light-green-A200 -
-
- $light-green-A400 -
-
- $light-green-A700 -
-
- - -
-
- Lime - $lime-500 -
-
- $lime-50 -
-
- $lime-100 -
-
- $lime-200 -
-
- $lime-300 -
-
- $lime-400 -
-
- $lime-500 -
-
- $lime-600 -
-
- $lime-700 -
-
- $lime-800 -
-
- $lime-900 -
-
- $lime-A100 -
-
- $lime-A200 -
-
- $lime-A400 -
-
- $lime-A700 -
-
-
- -
- -
-
- Yellow - $yellow-500 -
-
- $yellow-50 -
-
- $yellow-100 -
-
- $yellow-200 -
-
- $yellow-300 -
-
- $yellow-400 -
-
- $yellow-500 -
-
- $yellow-600 -
-
- $yellow-700 -
-
- $yellow-800 -
-
- $yellow-900 -
-
- $yellow-A100 -
-
- $yellow-A200 -
-
- $yellow-A400 -
-
- $yellow-A700 -
-
- - -
-
- Amber - $amber-500 -
-
- $amber-50 -
-
- $amber-100 -
-
- $amber-200 -
-
- $amber-300 -
-
- $amber-400 -
-
- $amber-500 -
-
- $amber-600 -
-
- $amber-700 -
-
- $amber-800 -
-
- $amber-900 -
-
- $amber-A100 -
-
- $amber-A200 -
-
- $amber-A400 -
-
- $amber-A700 -
-
- - -
-
- Orange - $orange-500 -
-
- $orange-50 -
-
- $orange-100 -
-
- $orange-200 -
-
- $orange-300 -
-
- $orange-400 -
-
- $orange-500 -
-
- $orange-600 -
-
- $orange-700 -
-
- $orange-800 -
-
- $orange-900 -
-
- $orange-A100 -
-
- $orange-A200 -
-
- $orange-A400 -
-
- $orange-A700 -
-
-
- -
- -
-
- Deep Orange - $deep-orange-500 -
-
- $deep-orange-50 -
-
- $deep-orange-100 -
-
- $deep-orange-200 -
-
- $deep-orange-300 -
-
- $deep-orange-400 -
-
- $deep-orange-500 -
-
- $deep-orange-600 -
-
- $deep-orange-700 -
-
- $deep-orange-800 -
-
- $deep-orange-900 -
-
- $deep-orange-A100 -
-
- $deep-orange-A200 -
-
- $deep-orange-A400 -
-
- $deep-orange-A700 -
-
- - -
-
- Brown - $brown-500 -
-
- $brown-50 -
-
- $brown-100 -
-
- $brown-200 -
-
- $brown-300 -
-
- $brown-400 -
-
- $brown-500 -
-
- $brown-600 -
-
- $brown-700 -
-
- $brown-800 -
-
- $brown-900 -
-
- - -
-
- Grey - $grey-500 -
-
- $grey-50 -
-
- $grey-100 -
-
- $grey-200 -
-
- $grey-300 -
-
- $grey-400 -
-
- $grey-500 -
-
- $grey-600 -
-
- $grey-700 -
-
- $grey-800 -
-
- $grey-900 -
-
-
- -
- -
-
- Blue Grey - $blue-grey-500 -
-
- $blue-grey-50 -
-
- $blue-grey-100 -
-
- $blue-grey-200 -
-
- $blue-grey-300 -
-
- $blue-grey-400 -
-
- $blue-grey-500 -
-
- $blue-grey-600 -
-
- $blue-grey-700 -
-
- $blue-grey-800 -
-
- $blue-grey-900 -
-
- - -
-
- Black - $black -
-
- $black-1, alpha: 87% -
-
- $black-2, alpha: 54% -
-
- $black-3, alpha: 38% -
-
- $black-4, alpha: 12% -
-
- - -
-
- White - $white -
-
- $white-1, alpha: 100% -
-
- $white-2, alpha: 70% -
-
- $white-3, alpha: 30% -
-
- $white-4, alpha: 12% -
-
-
\ No newline at end of file diff --git a/demo/includes/css/color/selection.html b/demo/includes/css/color/selection.html deleted file mode 100644 index 904521ef7..000000000 --- a/demo/includes/css/color/selection.html +++ /dev/null @@ -1,6 +0,0 @@ -$primary: #3F51B5 !default; // indigo 500 -$primary-hue-1: #C5CAE9 !default; // indigo 100 -$primary-hue-2: #303F9F !default; // indigo 700 -$accent: #FF4081 !default; // pink A200 -$accent-hue-1: #FF80AB !default; // pink A100 -$accent-hue-2: #F50057 !default; // pink A400 diff --git a/demo/includes/css/flexbox.html b/demo/includes/css/flexbox.html deleted file mode 100644 index 6921f53ca..000000000 --- a/demo/includes/css/flexbox.html +++ /dev/null @@ -1,18 +0,0 @@ -
-

Flexbox

- -

- CSS helpers are available to help you build a grid system based on flexbox css property. -

- - - A row flex container is splitted into 12 or 16 columns specified in the flex-column attribute.
- Each flex item inside a row flex container has a width from 1 to the number of columns.
- If no width is specified, the flex item will fit the available width inside the row.
- A gutter can be specified to separate flex items inside the row (8px, 16px, 24px). - - - - Row or column flex container, align and order options are avaialable. - -
\ No newline at end of file diff --git a/demo/includes/css/flexbox/basic.html b/demo/includes/css/flexbox/basic.html deleted file mode 100644 index aca42bbbf..000000000 --- a/demo/includes/css/flexbox/basic.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
[flex-item="3"]
-
[flex-item="5"]
-
[flex-item="4"]
-
- -
-
[flex-item="3"]
-
[flex-item="9"]
-
[flex-item="4"]
-
- -
-
[flex-item="3"]
-
[flex-item="5"]
-
[flex-item="4"]
-
- -
-
[flex-item="3"]
-
[flex-item="9"]
-
[flex-item="4"]
-
\ No newline at end of file diff --git a/demo/includes/css/flexbox/option.html b/demo/includes/css/flexbox/option.html deleted file mode 100644 index c87cbadfc..000000000 --- a/demo/includes/css/flexbox/option.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
Flex item
-
Flex item
-
Flex item
-
\ No newline at end of file diff --git a/demo/includes/css/mixin.html b/demo/includes/css/mixin.html deleted file mode 100644 index ad347f16e..000000000 --- a/demo/includes/css/mixin.html +++ /dev/null @@ -1,16 +0,0 @@ -
-

Mixin

- -

- Added to Bourbon, some mixins are available in order to help you building great applications faster. -

- - - The rem font-size unit is similar to em, but instead of being relative to the parent it's always relative to the root html element. This mixin convert pixel font-size to rem font-size. - - - - Media queries are now handled by Saas MQ.
- Check the documentation - -
diff --git a/demo/includes/css/mixin/font-size.html b/demo/includes/css/mixin/font-size.html deleted file mode 100644 index 53033ac6c..000000000 --- a/demo/includes/css/mixin/font-size.html +++ /dev/null @@ -1 +0,0 @@ -@include font-size(14px); \ No newline at end of file diff --git a/demo/includes/css/mixin/media-query.html b/demo/includes/css/mixin/media-query.html deleted file mode 100644 index 3f3c8bfbf..000000000 --- a/demo/includes/css/mixin/media-query.html +++ /dev/null @@ -1,39 +0,0 @@ -// screen and (max-width: 480px) -@include media-query(palm) { - ... -} - -// screen and (min-width: 481px) and (max-width: 1023px) -@include media-query(lap) { - ... -} - -// screen and (min-width: 481px) -@include media-query(lap-and-up) { - ... -} - -// screen and (max-width: 1023px) -@include media-query(portable) { - ... -} - -// screen and (min-width: 1024px) -@include media-query(desk) { - ... -} - -// screen and (min-width: 1280px) -@include media-query(desk-wide) { - ... -} - -// screen and (min-width: 1920px) -@include media-query(full-hd) { - ... -} - -// (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) -@include media-query(retina) { - ... -} \ No newline at end of file diff --git a/demo/includes/css/typography.html b/demo/includes/css/typography.html deleted file mode 100644 index 675b3be39..000000000 --- a/demo/includes/css/typography.html +++ /dev/null @@ -1,9 +0,0 @@ -
-

Typography

- -

- We provide some typographic basic styles as described here : https://www.google.com/design/spec/style/typography.html#typography-standard-styles -

- - -
\ No newline at end of file diff --git a/demo/includes/css/typography/basic.html b/demo/includes/css/typography/basic.html deleted file mode 100644 index 6f24199f7..000000000 --- a/demo/includes/css/typography/basic.html +++ /dev/null @@ -1,13 +0,0 @@ -
- Light 112sp - Regular 56sp - Regular 45sp, Leading 48dp - Regular 34sp, Leading 40dp - Regular 24sp, Leading 32dp - Medium 20sp - Regular 16sp (Device), Regular 15sp (Desktop), Leading 28dp - Regular 16sp (Device), Regular 15sp (Desktop), Leading 24dp - Medium 14sp (Device), Medium 13sp (Desktop), Leading 24dp - Regular 14sp (Device), Regular 13sp (Desktop), Leading 20dp - Regular 12sp -
diff --git a/demo/includes/getting-started/contribute.html b/demo/includes/getting-started/contribute.html deleted file mode 100644 index ff916cede..000000000 --- a/demo/includes/getting-started/contribute.html +++ /dev/null @@ -1,16 +0,0 @@ -
-

Contribute

- -

- We'd love for you to contribute to our source code and to make LumX even better than it is today! -

- - - The installation procedure is available in the README file. - - - - To keep LumX clean and easy to maintain by everyone, we chose to follow some guidelines.
- You can find them in our GitHub repository. - -
diff --git a/demo/includes/getting-started/customization.html b/demo/includes/getting-started/customization.html deleted file mode 100644 index aa2327d68..000000000 --- a/demo/includes/getting-started/customization.html +++ /dev/null @@ -1,30 +0,0 @@ -
-

Customization

- -

- You can use LumX in your Sass project to get all variables and mixins available.
- Check what amazing things you can do. -

- - - You can override LumX default settings dist/scss/settings/_defaults.scss if you want to change sizes, main colors, etc.
- For example, in a settings file located in your project scss/settings/_common.scss. - - - - Then, create your main file where you will import your settings first and then LumX main scss file dist/scss/_lumx.scss.
- For example, in your main file located in your project scss/my-project.scss. - - - -

- We’d like to thank Harry Roberts for his CSS framework, Inuitcss, which is a powerful, scalable, Sass-based, BEM, OOCSS framework.
- LumX CSS framework is largely inspired from his work. -

- -

- We invite you to follow these guidelines to build your project:
- https://github.com/csswizardry/CSS-Guidelines -

- -
\ No newline at end of file diff --git a/demo/includes/getting-started/customization/main.html b/demo/includes/getting-started/customization/main.html deleted file mode 100644 index 73ec8495a..000000000 --- a/demo/includes/getting-started/customization/main.html +++ /dev/null @@ -1,4 +0,0 @@ -@import "settings/common"; -@import "../node_modules/official-lumx/dist/scss/lumx"; - -... diff --git a/demo/includes/getting-started/customization/variable.html b/demo/includes/getting-started/customization/variable.html deleted file mode 100644 index 6db9a7f9d..000000000 --- a/demo/includes/getting-started/customization/variable.html +++ /dev/null @@ -1,4 +0,0 @@ -$base-text-color: #000000; -$base-background-color: #f5f5f5; -$red: $red-300; -$pink: $pink-800; \ No newline at end of file diff --git a/demo/includes/getting-started/installation.html b/demo/includes/getting-started/installation.html deleted file mode 100644 index c8901fb31..000000000 --- a/demo/includes/getting-started/installation.html +++ /dev/null @@ -1,67 +0,0 @@ -
-

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 @@ - - - - - - - - - - diff --git a/demo/includes/home/home.html b/demo/includes/home/home.html deleted file mode 100644 index 691069048..000000000 --- a/demo/includes/home/home.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
-
-

- A front-end framework based on Google Material Design -

- -

- LumX will help you to design beautiful applications, faster and easier. We’ve built it based on Google guidelines, respecting metrics in a pixel perfect way. -

- - Download LumX - - v1.9.1 -
-
- -
-
-
-
-

Sass Preprocessor

-

Built with Sass and Bourbon, you'll be able to quickly customize your application design. Moreover, your Sass and Javascript files will be automatically optimized with Gulp to improve your application performance.

-
-
- -
-
-

AngularJS

-

We've choosen AngularJS for LumX because we think it's the best Javascript MVC Framework to build robust and fast one-page applications. And of course, because it has been made and is still maintained by Google.

-
-
- -
-
-

Just a little bit of jQuery

-

Performance is highly important for any web application. That's why we only use jQuery without any of its plugin. Each component was then home made to be perfectly plugged to your AngularJS application.

-
-
-
-
-
\ No newline at end of file diff --git a/demo/includes/layout/header/header.html b/demo/includes/layout/header/header.html deleted file mode 100644 index 9df2295d4..000000000 --- a/demo/includes/layout/header/header.html +++ /dev/null @@ -1,33 +0,0 @@ -
-
-
-
-
- - - -
- - -
- -
- - - - - -
-
-
- -
-
- -
-
- -
-
diff --git a/demo/includes/layout/sub-nav/sub-nav-components.html b/demo/includes/layout/sub-nav/sub-nav-components.html deleted file mode 100644 index 381fce224..000000000 --- a/demo/includes/layout/sub-nav/sub-nav-components.html +++ /dev/null @@ -1,71 +0,0 @@ - \ No newline at end of file diff --git a/demo/includes/layout/sub-nav/sub-nav-css.html b/demo/includes/layout/sub-nav/sub-nav-css.html deleted file mode 100644 index dca21cdad..000000000 --- a/demo/includes/layout/sub-nav/sub-nav-css.html +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/demo/includes/layout/sub-nav/sub-nav-getting-started.html b/demo/includes/layout/sub-nav/sub-nav-getting-started.html deleted file mode 100644 index 132aae999..000000000 --- a/demo/includes/layout/sub-nav/sub-nav-getting-started.html +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/demo/includes/modules/button/button.html b/demo/includes/modules/button/button.html deleted file mode 100644 index 7f07555a9..000000000 --- a/demo/includes/modules/button/button.html +++ /dev/null @@ -1,70 +0,0 @@ -
-

Button

- -

- lx-button is a directive that creates a link element if you specify a href or ng-href attribute.
- Otherwise, it creates a button element. -

- - - Four different types of buttons are available: raised, flat, fab and icon. - - - - Disabled style will automatically be applied when using ng-disabled or disabled attribute. - - - - Five different sizes are available and defined in dist/scss/core/settings/defaults.scss - - - - Main colors defined in dist/scss/core/settings/defaults.scss can be used to create colored buttons.
- Text/icon and ripple colors will be automatically set according to the color. - - - - A fully customizable button can be created with a regular button element.
- Background and text colors are applied with css helpers. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-colorstringprimaryDefine the button color. Options: colors defined in colors section in dist/scss/core/settings/defaults.scss
lx-sizestringmDefine the button size. Options: xs, s, m, l, xl
lx-typestringraisedDefine the button type. Options: raised, flat, fab, icon
ng-*All angular directives are available as the directive generates a regular link or button element.
- -
diff --git a/demo/includes/modules/button/includes/color.html b/demo/includes/modules/button/includes/color.html deleted file mode 100644 index f44598ca5..000000000 --- a/demo/includes/modules/button/includes/color.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
- Button - Button - Button - Button - Button - Button - Button -
- -
- Button - Button - Button - Button - Button - Button -
-
\ No newline at end of file diff --git a/demo/includes/modules/button/includes/custom-color.html b/demo/includes/modules/button/includes/custom-color.html deleted file mode 100644 index 9bfc2fdc5..000000000 --- a/demo/includes/modules/button/includes/custom-color.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/demo/includes/modules/button/includes/size.html b/demo/includes/modules/button/includes/size.html deleted file mode 100644 index 444037329..000000000 --- a/demo/includes/modules/button/includes/size.html +++ /dev/null @@ -1,7 +0,0 @@ -
- Button - Button - Button - Button - Button -
\ No newline at end of file diff --git a/demo/includes/modules/button/includes/state.html b/demo/includes/modules/button/includes/state.html deleted file mode 100644 index 750bdb9a0..000000000 --- a/demo/includes/modules/button/includes/state.html +++ /dev/null @@ -1,4 +0,0 @@ -
- Button - Button -
\ No newline at end of file diff --git a/demo/includes/modules/button/includes/type.html b/demo/includes/modules/button/includes/type.html deleted file mode 100644 index a11602619..000000000 --- a/demo/includes/modules/button/includes/type.html +++ /dev/null @@ -1,6 +0,0 @@ -
- Button - Button - - -
\ No newline at end of file diff --git a/demo/includes/modules/card/card.html b/demo/includes/modules/card/card.html deleted file mode 100644 index c7f5c969a..000000000 --- a/demo/includes/modules/card/card.html +++ /dev/null @@ -1,11 +0,0 @@ -
-

Card

- -

- A CSS card component with various image positions is available.
CSS helpers are widely used to set different layouts. -

- - - - -
\ No newline at end of file diff --git a/demo/includes/modules/card/includes/image-left.html b/demo/includes/modules/card/includes/image-left.html deleted file mode 100644 index fa35514cb..000000000 --- a/demo/includes/modules/card/includes/image-left.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
-
- -
- -
-
-
- Lorem Ipsum - Lorem Ipsum -
-
- -
- Free sample - Review -
-
-
-
-
diff --git a/demo/includes/modules/card/includes/image-top.html b/demo/includes/modules/card/includes/image-top.html deleted file mode 100644 index 86a26e0ff..000000000 --- a/demo/includes/modules/card/includes/image-top.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
- - Lorem Ipsum -
- -
- Lorem Ipsum - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique orci a lacinia malesuada. -

-
-
- -
- Share - Learn more -
-
-
diff --git a/demo/includes/modules/card/includes/no-image.html b/demo/includes/modules/card/includes/no-image.html deleted file mode 100644 index db7536f10..000000000 --- a/demo/includes/modules/card/includes/no-image.html +++ /dev/null @@ -1,19 +0,0 @@ -
-
-
- Lorem Ipsum - Lorem Ipsum - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique orci a lacinia malesuada. -

-
-
- -
- Yes - No -
-
-
diff --git a/demo/includes/modules/checkbox/checkbox.html b/demo/includes/modules/checkbox/checkbox.html deleted file mode 100644 index 617a46829..000000000 --- a/demo/includes/modules/checkbox/checkbox.html +++ /dev/null @@ -1,90 +0,0 @@ -
-

Checkbox

- -

- lx-checkbox is a directive that creates an input checkbox element. -

- - - The checkbox label can be specified as transcluded element.
- To specify a helper message, two directives needs to be transcluded.
- lx-checkbox-label for the label and lx-checkbox-help for the helper message. - - - - Disabled style will automatically be applied when using ng-disabled or disabled attribute. - - - - Main colors defined in dist/scss/core/settings/defaults.scss can be used to create colored checkboxes. - - - - The checkbox can be used in a dark box.
- To specify checkbox theme, use lx-theme with value light or dark. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-colorstringaccentDefine the checkbox color. Options: colors defined in colors section in dist/scss/core/settings/defaults.scss
lx-themestringlightSet this option to dark if checkboxes are displayed into a dark box. Options: light, dark
namestringProperty name of the form under which the control is published.
ng-changestringAngular expression to be executed when input changes due to user interaction with the input element.
ng-disabledexpressionIf the expression is truthy, then the disabled attribute will be set on the element.
ng-false-valueexpressionThe value to which the expression should be set when not selected.
ng-model*stringAssignable angular expression to data-bind to.
ng-true-valueexpressionThe value to which the expression should be set when selected.
- -
diff --git a/demo/includes/modules/checkbox/includes/basic.html b/demo/includes/modules/checkbox/includes/basic.html deleted file mode 100644 index 7bb5c20f8..000000000 --- a/demo/includes/modules/checkbox/includes/basic.html +++ /dev/null @@ -1,8 +0,0 @@ -
- Checkbox - - - Checkbox with help - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - -
\ No newline at end of file diff --git a/demo/includes/modules/checkbox/includes/color.html b/demo/includes/modules/checkbox/includes/color.html deleted file mode 100644 index 54b022711..000000000 --- a/demo/includes/modules/checkbox/includes/color.html +++ /dev/null @@ -1,6 +0,0 @@ -
- Blue checkbox - Green checkbox - Orange checkbox - Red checkbox -
\ No newline at end of file diff --git a/demo/includes/modules/checkbox/includes/state.html b/demo/includes/modules/checkbox/includes/state.html deleted file mode 100644 index f992575ce..000000000 --- a/demo/includes/modules/checkbox/includes/state.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - Checkbox disabled with help - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - -
\ No newline at end of file diff --git a/demo/includes/modules/checkbox/includes/theme.html b/demo/includes/modules/checkbox/includes/theme.html deleted file mode 100644 index b8aa52a5a..000000000 --- a/demo/includes/modules/checkbox/includes/theme.html +++ /dev/null @@ -1,8 +0,0 @@ -
- Checkbox - - - Checkbox with help ! - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - -
\ No newline at end of file diff --git a/demo/includes/modules/checkbox/js/demo-checkbox_controller.js b/demo/includes/modules/checkbox/js/demo-checkbox_controller.js deleted file mode 100644 index 8ccc3c0d7..000000000 --- a/demo/includes/modules/checkbox/js/demo-checkbox_controller.js +++ /dev/null @@ -1,32 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoCheckboxController', DemoCheckboxController); - - function DemoCheckboxController() - { - var vm = this; - - vm.checkboxes = { - basic: - { - checked: true, - unchecked: false - }, - states: - { - disabled: false - }, - colors: - { - blue: true, - green: true, - orange: true, - red: true - } - }; - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/chip/chip.html b/demo/includes/modules/chip/chip.html deleted file mode 100644 index c77ae421a..000000000 --- a/demo/includes/modules/chip/chip.html +++ /dev/null @@ -1,9 +0,0 @@ -
-

Chip

- -

- A CSS chip component is available. -

- - -
\ No newline at end of file diff --git a/demo/includes/modules/chip/includes/basic.html b/demo/includes/modules/chip/includes/basic.html deleted file mode 100644 index 4eea0cd12..000000000 --- a/demo/includes/modules/chip/includes/basic.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
- Example chip -
- -
- Example chip -
- -
-
- -
- - Example chip -
- -
-
- -
- - Example chip -
-
\ No newline at end of file diff --git a/demo/includes/modules/data-table/data-table.html b/demo/includes/modules/data-table/data-table.html deleted file mode 100644 index 5914ce891..000000000 --- a/demo/includes/modules/data-table/data-table.html +++ /dev/null @@ -1,312 +0,0 @@ -
-

Data table

- -

- lx-data-table is a directive that creates a data table. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-activablebooleanfalseSpecify if the data table rows can be activated (Note: this is different from being selected).
lx-borderbooleantrueSpecify if the data table rows have border.
lx-bulkbooleantrueSpecify if all the rows can be seleted through a global checkbox.
lx-selectablebooleanfalseSpecify if a data table row is selectable or not.
lx-tbodyobjectDefine the data table tbody (see the demo controller for more help).
lx-theadobjectDefine the data table thead (see the demo controller for more help).
lx-thumbnailbooleanfalseMake the first tbody array element the row thumbnail. Format option should return a 36px squared image.
- - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dataTableId*stringThe data table id given as the directive's id attribute.
row*objectThe row object to select in the data table.
- - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dataTableId*stringThe data table id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dataTableId*stringThe data table id given as the directive's id attribute.
row*objectThe row object to unselect in the data table.
- - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dataTableId*stringThe data table id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dataTableId*stringThe data table id given as the directive's id attribute.
row*objectThe row object to activate in the data table.
- - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dataTableId*stringThe data table id given as the directive's id attribute.
row*objectThe row object to deactivate in the data table.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
dataTableIdstringThe id of the data table the selected rows are part of.
selectedRowsarrayThe selected rows (from the tbody array).
selectedRowobjectThe selected row (from the tbody array).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
dataTableIdstringThe id of the data table the selected rows are part of.
selectedRowsarrayThe selected rows (from the tbody array).
unselectedRowobjectThe unselected row (from the tbody array).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
dataTableIdstringThe id of the data table the selected rows are part of.
columnobjectThe column (from the thead array) we are sorting on.
- - -
diff --git a/demo/includes/modules/data-table/includes/advanced.html b/demo/includes/modules/data-table/includes/advanced.html deleted file mode 100644 index db2c8fa2a..000000000 --- a/demo/includes/modules/data-table/includes/advanced.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/demo/includes/modules/data-table/includes/basic.html b/demo/includes/modules/data-table/includes/basic.html deleted file mode 100644 index 0e04ff5bf..000000000 --- a/demo/includes/modules/data-table/includes/basic.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
- {{ vm.selectedRows.length || 0 }} selected item(s) -
- -
- - - - - - - -
-
- - \ No newline at end of file diff --git a/demo/includes/modules/data-table/js/demo-data-table_controller.js b/demo/includes/modules/data-table/js/demo-data-table_controller.js deleted file mode 100644 index 3ba5dfa58..000000000 --- a/demo/includes/modules/data-table/js/demo-data-table_controller.js +++ /dev/null @@ -1,92 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoDataTableController', DemoDataTableController); - - DemoDataTableController.$inject = ['$filter', '$scope']; - - function DemoDataTableController($filter, $scope) - { - var vm = this; - - vm.dataTableThead = [ - { - name: 'dessert', - label: 'Dessert', - sortable: true - }, - { - name: 'calories', - label: 'Calories', - sortable: true - }, - { - name: 'fat', - label: 'Fat (g)', - sortable: true, - sort: 'asc' - }, - { - name: 'comments', - label: 'Comments', - icon: 'comment-text', - sortable: false - }]; - vm.advancedDataTableThead = angular.copy(vm.dataTableThead); - vm.advancedDataTableThead.unshift( - { - name: 'image', - format: function(row) - { - return ''; - } - }); - vm.dataTableTbody = [ - { - id: 1, - image: '/images/placeholder/1-square.jpg', - dessert: 'Frozen yogurt', - calories: 159, - fat: 6.0, - comments: 'Lorem ipsum' - }, - { - id: 2, - image: '/images/placeholder/2-square.jpg', - dessert: 'Ice cream sandwich', - calories: 237, - fat: 9.0, - comments: 'Lorem ipsum', - lxDataTableDisabled: true - }, - { - id: 3, - image: '/images/placeholder/3-square.jpg', - dessert: 'Eclair', - calories: 262, - fat: 16.0, - comments: 'Lorem ipsum' - }]; - - $scope.$on('lx-data-table__selected', updateActions); - $scope.$on('lx-data-table__unselected', updateActions); - $scope.$on('lx-data-table__sorted', updateSort); - - //////////// - - function updateActions(_event, _dataTableId, _selectedRows) - { - if (_dataTableId === 'lolo') { - vm.selectedRows = _selectedRows; - } - } - - function updateSort(_event, _dataTableId, _column) - { - vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false); - } - } -})(); diff --git a/demo/includes/modules/date-picker/date-picker.html b/demo/includes/modules/date-picker/date-picker.html deleted file mode 100644 index 8095d507f..000000000 --- a/demo/includes/modules/date-picker/date-picker.html +++ /dev/null @@ -1,233 +0,0 @@ -
-

Date picker

- -

- lx-date-picker is a directive that creates a date picker. This date picker is managed by the LxDatePickerService. -

- -

- This component has been completely reworked since LumX beta version (v0.3.96).
Please refer to the updated documentation. -

- - - A callback function can be called with the selected date as parameter. - - - - A text field can be transcluded to show the selected date according to the input format attribute. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-auto-closebooleantrueSpecify if the date picker should be closed when clicking outside of it.
lx-callbackfunctionThe function called when a day is selected. The date object will be given as parameter.
lx-colorstringprimaryDefine the date picker color. Options: colors defined in colors section in dist/scss/core/settings/defaults.scss
lx-escape-closebooleantrueSpecify if the date picker can be closed when hitting the escape key.
lx-input-formatstringSpecify the text field date format (see MomentJS format). Used only when a text field component is transcluded.
lx-max-dateobjectSet the max selectable date.
lx-min-dateobjectSet the min selectable date.
lx-locale*stringGenerate the calendar according to the given locale (see MomentJS locales).
ng-model*stringAssignable angular expression to data-bind to.
- - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
datePickerId*stringThe date picker id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
datePickerId*stringThe date picker id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
datePickerIdstringThe date picker id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
datePickerIdstringThe date picker id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
datePickerIdstringThe date picker id given as the directive's id attribute.
- - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe original broadcasted event.
datePickerIdstringThe date picker id given as the directive's id attribute.
- - -
diff --git a/demo/includes/modules/date-picker/includes/basic.html b/demo/includes/modules/date-picker/includes/basic.html deleted file mode 100644 index e05466250..000000000 --- a/demo/includes/modules/date-picker/includes/basic.html +++ /dev/null @@ -1,14 +0,0 @@ -
- {{ vm.datePicker.basic.dateFormatted }} - -
- Open date picker -
- - -
\ No newline at end of file diff --git a/demo/includes/modules/date-picker/includes/input.html b/demo/includes/modules/date-picker/includes/input.html deleted file mode 100644 index 8e72556e8..000000000 --- a/demo/includes/modules/date-picker/includes/input.html +++ /dev/null @@ -1,9 +0,0 @@ -
- - - - - -
\ No newline at end of file diff --git a/demo/includes/modules/date-picker/js/demo-date-picker_controller.js b/demo/includes/modules/date-picker/js/demo-date-picker_controller.js deleted file mode 100644 index a3f1d271e..000000000 --- a/demo/includes/modules/date-picker/js/demo-date-picker_controller.js +++ /dev/null @@ -1,48 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoDatePickerController', DemoDatePickerController); - - DemoDatePickerController.$inject = ['LxDatePickerService']; - - function DemoDatePickerController(LxDatePickerService) - { - var vm = this; - - vm.datePickerCallback = datePickerCallback; - vm.openDatePicker = openDatePicker; - - vm.locale = 'en'; - vm.datePicker = { - basic: - { - date: new Date(), - dateFormatted: moment().locale(vm.locale).format('LL'), - minDate: new Date(new Date().getFullYear(), new Date().getMonth() - 2, new Date().getDate()), - maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate()) - }, - input: - { - date: new Date(), - dateFormatted: moment().locale(vm.locale).format('LL') - } - }; - vm.datePickerId = 'date-picker'; - - //////////// - - function datePickerCallback(_newdate) - { - vm.datePicker.basic.date = _newdate; - vm.datePicker.basic.dateFormatted = moment(_newdate).locale(vm.locale).format('LL'); - } - - function openDatePicker(_pickerId) - { - LxDatePickerService.open(_pickerId); - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/dialog/dialog.html b/demo/includes/modules/dialog/dialog.html deleted file mode 100644 index 2cab16996..000000000 --- a/demo/includes/modules/dialog/dialog.html +++ /dev/null @@ -1,260 +0,0 @@ -
-

Dialog

- -

- lx-dialog is a directive that create a dialog. This dialog is managed by the LxDialogService. -

- - - Three directives need to be transcluded.
- lx-dialog-header, lx-dialog-content and lx-dialog-footer. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-auto-closebooleantrueSpecify if the dialog should be closed when clicking outside.
lx-escape-closebooleantrueSpecify if the dialog should be closed with escape key.
lx-sizestringlSpecify the dialog width. Options: l, m, s
- - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dialogId*stringThe dialog id specified in the directive id attribute.
paramsobjectAn optional object that holds extra parameters that will be forwarded to the lx-dialog__open-start and lx-dialog__open-end events.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dialogIdstringThe dialog identifier specified in the directive id attribute. If undefined, the current dialog that is open will be closed.
canceledbooleanIndicates if the dialog was closed via a cancel or not.
paramsobjectAn optional object that holds extra parameters that will be forwarded to the lx-dialog__close-start and lx-dialog__close-end events.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe broadcast original event.
dialogIdstringThe dialog id specified in the directive id attribute.
paramsobjectAn optional object that holds extra parameters originally passed to the open method.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe broadcast original event.
dialogIdstringThe dialog id specified in the directive id attribute.
paramsobjectAn optional object that holds extra parameters originally passed to the open method.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe broadcast original event.
dialogIdstringThe dialog id specified in the directive id attribute.
canceledbooleanIndicates if the dialog was closed via a cancel or not.
paramsobjectAn optional object that holds extra parameters originally passed to the close method.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe broadcast original event.
dialogIdstringThe dialog id specified in the directive id attribute.
canceledbooleanIndicates if the dialog was closed via a cancel or not.
paramsobjectAn optional object that holds extra parameters originally passed to the close method.
- - - - - - - - - - - - - - - - - - - - - - - - -
Available parameterTypeDescription
eventobjectThe broadcast original event.
dialogIdstringThe dialog id specified in the directive id attribute.
- - -
\ No newline at end of file diff --git a/demo/includes/modules/dialog/includes/basic.html b/demo/includes/modules/dialog/includes/basic.html deleted file mode 100644 index 4b1f1ac22..000000000 --- a/demo/includes/modules/dialog/includes/basic.html +++ /dev/null @@ -1,57 +0,0 @@ -
- Open dialog -
- - - -
- - Lorem Ipsum - - -
- - - -
-
- - - - - - - -
-
- {{ person.name }} - {{ person.email }} - {{ person.age }} -
-
- - - -
-

Lorem Ipsum Content 2

- - - - -
- - - -

Lorem Ipsum Content 3

- - - - - - Cancel - Ok - - diff --git a/demo/includes/modules/dialog/js/demo-dialog_controller.js b/demo/includes/modules/dialog/js/demo-dialog_controller.js deleted file mode 100644 index 70a4ea4d7..000000000 --- a/demo/includes/modules/dialog/js/demo-dialog_controller.js +++ /dev/null @@ -1,120 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoDialogController', DemoDialogController); - - DemoDialogController.$inject = ['$scope', 'LxDialogService', 'LxNotificationService']; - - function DemoDialogController($scope, LxDialogService, LxNotificationService) - { - var vm = this; - - vm.addPerson = addPerson; - vm.dialogId = 'dialog-test'; - vm.openDialog = openDialog; - - vm.people = [ - { - name: 'Adam', - email: 'adam@email.com', - age: 10 - }, - { - name: 'Amalie', - email: 'amalie@email.com', - age: 12 - }, - { - name: 'Wladimir', - email: 'wladimir@email.com', - age: 30 - }, - { - name: 'Samantha', - email: 'samantha@email.com', - age: 31 - }, - { - name: 'Estefanía', - email: 'estefanía@email.com', - age: 16 - }, - { - name: 'Natasha', - email: 'natasha@email.com', - age: 54 - }, - { - name: 'Nicole', - email: 'nicole@email.com', - age: 43 - }, - { - name: 'Adrian', - email: 'adrian@email.com', - age: 21 - }]; - - $scope.$on('lx-dialog__open-start', function(_event, _dialogId, _params) - { - if (vm.dialogId === _dialogId) - { - LxNotificationService.notify('Open start ' + _params.customMessage); - } - }); - - $scope.$on('lx-dialog__open-end', function(_event, _dialogId, _params) - { - if (vm.dialogId === _dialogId) - { - LxNotificationService.notify('Open end'); - } - }); - - $scope.$on('lx-dialog__close-start', function(_event, _dialogId, _canceled, _params) - { - if (vm.dialogId === _dialogId) - { - LxNotificationService.notify('Close start'); - } - }); - - $scope.$on('lx-dialog__close-end', function(_event, _dialogId, _canceled, _params) - { - if (vm.dialogId === _dialogId) - { - LxNotificationService.notify('Close end'); - } - }); - - $scope.$on('lx-dialog__scroll-end', function(_event, _dialogId) - { - if (vm.dialogId === _dialogId) - { - LxNotificationService.notify('Scroll end'); - } - }); - - //////////// - - function addPerson() - { - vm.people.push( - { - name: 'Lorem', - email: 'lorem@email.com', - age: 99 - }); - } - - function openDialog() - { - LxDialogService.open(vm.dialogId, { - customMessage: 'Hello World!', - }); - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/dropdown/dropdown.html b/demo/includes/modules/dropdown/dropdown.html deleted file mode 100644 index 32e711303..000000000 --- a/demo/includes/modules/dropdown/dropdown.html +++ /dev/null @@ -1,139 +0,0 @@ -
-

Dropdown

- -

- lx-dropdown is a directive that create a dropdown menu. -

- - - Two directives need to be transcluded.
- lx-dropdown-toggle that transclude the toggle button and lx-dropdown-menu that transclude the menu content. - - - - You can use the service if you want to open a dropdown programmatically. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-close-on-clickbooleantrueSpecify if the dropdown should be closed when clicking on the document.
lx-effectstringexpandSpecify the dropdown menu effect. Options: expand, fade, none
lx-escape-closebooleantrueSpecify if the dropdown should be closed with escape key.
lx-hoverbooleanfalseSpecify if the dropdown should be opened on toggle hover.
lx-hover-delayintegerThe dropdown menu open delay in ms (if lx-hover).
lx-min-offsetinteger8The offset (in px) to keep from the edges of the screen. If the edges of the dropdown should go beyond the edges of the screen, then the dropdown will be brought back to this offset from the edge of the screen.
lx-offsetintegerThe dropdown menu offset in px (if not lx-over-toggle).
lx-over-togglebooleanfalseSpecify if the dropdown should be opened over the toggle button.
lx-positionstringleftDefine the dropdown menu position. Options: left, right, center (if lx-width)
lx-widthstringDefine the dropdown menu width in pixels. If a percent value is defined, the dropdown menu width will be relative to the width of the toggle button.
- - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dropdownId*stringThe dropdown id specified in the directive id attribute.
targetElement*stringThe target element selector.
- - - - - - - - - - - - - - - - - - - -
ParameterTypeDescription
dropdownId*stringThe dropdown id specified in the directive id attribute.
- - -
diff --git a/demo/includes/modules/dropdown/includes/advanced.html b/demo/includes/modules/dropdown/includes/advanced.html deleted file mode 100644 index 3ede8669c..000000000 --- a/demo/includes/modules/dropdown/includes/advanced.html +++ /dev/null @@ -1,19 +0,0 @@ -
- Open dropdown - Close dropdown - -
Target
- - - - - - -
\ No newline at end of file diff --git a/demo/includes/modules/dropdown/includes/basic.html b/demo/includes/modules/dropdown/includes/basic.html deleted file mode 100644 index bd5f53d4e..000000000 --- a/demo/includes/modules/dropdown/includes/basic.html +++ /dev/null @@ -1,78 +0,0 @@ -
- - - Dropdown menu - - - - - - - - - - Dropdown menu with icons - - - - - - - - - - - - - - - - - - -
diff --git a/demo/includes/modules/dropdown/js/demo-dropdown_controller.js b/demo/includes/modules/dropdown/js/demo-dropdown_controller.js deleted file mode 100644 index 77e4cea30..000000000 --- a/demo/includes/modules/dropdown/js/demo-dropdown_controller.js +++ /dev/null @@ -1,37 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoDropdownController', DemoDropdownController); - - DemoDropdownController.$inject = ['LxDropdownService']; - - function DemoDropdownController(LxDropdownService) - { - var vm = this; - - vm.closeDropdown = closeDropdown; - vm.openDropdown = openDropdown; - - vm.dropdownId = 'test-dropdown-menu'; - vm.dropdownTarget = 'test-dropdown-target'; - - //////////// - - function closeDropdown(_event) - { - _event.stopPropagation(); - - LxDropdownService.close(vm.dropdownId); - } - - function openDropdown(_event) - { - _event.stopPropagation(); - - LxDropdownService.open(vm.dropdownId, '#' + vm.dropdownTarget); - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/fab/fab.html b/demo/includes/modules/fab/fab.html deleted file mode 100644 index 44d252d4a..000000000 --- a/demo/includes/modules/fab/fab.html +++ /dev/null @@ -1,39 +0,0 @@ -
-

Floating action button

- -

- lx-fab is a directive that create a floating action button as described in Google guidelines. -

- - - Two directives need to be transcluded: lx-fab-trigger that transclude the trigger button and lx-fab-actions that transclude the hidden buttons. The trigger button must have xl size and the actions buttons must have l size. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-direction*stringDefine the action buttons direction. Options: up, right, down, left
lx-trigger-on-clickbooleanfalseDefine if the fab actions should be displayed on fab trigger click. If not, fab actions are displayed on fab trigger hover.
- -
diff --git a/demo/includes/modules/fab/includes/basic.html b/demo/includes/modules/fab/includes/basic.html deleted file mode 100644 index 7441bb979..000000000 --- a/demo/includes/modules/fab/includes/basic.html +++ /dev/null @@ -1,97 +0,0 @@ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
\ No newline at end of file diff --git a/demo/includes/modules/file-input/file-input.html b/demo/includes/modules/file-input/file-input.html deleted file mode 100644 index fa941803b..000000000 --- a/demo/includes/modules/file-input/file-input.html +++ /dev/null @@ -1,49 +0,0 @@ -
-

File input

- -

- lx-file-input is a directive that create an input file element. -

- -

- This component has been completly reworked since LumX beta version (v0.3.96).
Please refer to the updated documentation. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-label*stringThe input label displayed as a placeholder.
lx-acceptstringAllows the HTML input 'accept' attribute to be included so file types can be specified.
lx-callbackfunctionThe function called once a file is selected with the file object as parameter.
- -
\ No newline at end of file diff --git a/demo/includes/modules/file-input/includes/accept.html b/demo/includes/modules/file-input/includes/accept.html deleted file mode 100644 index 4e5079762..000000000 --- a/demo/includes/modules/file-input/includes/accept.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/demo/includes/modules/file-input/includes/basic.html b/demo/includes/modules/file-input/includes/basic.html deleted file mode 100644 index f66e60431..000000000 --- a/demo/includes/modules/file-input/includes/basic.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/demo/includes/modules/file-input/js/demo-file-input_controller.js b/demo/includes/modules/file-input/js/demo-file-input_controller.js deleted file mode 100644 index 35dfd8ff8..000000000 --- a/demo/includes/modules/file-input/js/demo-file-input_controller.js +++ /dev/null @@ -1,22 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoFileInputController', DemoFileInputController); - - function DemoFileInputController() - { - var vm = this; - - vm.manageFile = manageFile; - - //////////// - - function manageFile(_newFile) - { - console.log(_newFile); - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/icon/icon.html b/demo/includes/modules/icon/icon.html deleted file mode 100644 index a34e47086..000000000 --- a/demo/includes/modules/icon/icon.html +++ /dev/null @@ -1,50 +0,0 @@ -
-

Icon

- -

- lx-icon is a directive that create an icon based on Material Design Icons. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-colorstringDefine the icon color. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-id*stringThe icon identifier that can be found in Material Design Icons website.
lx-sizestringDefine the icon size. Options: xs, s, m, l, xl
lx-typestringDefine the icon type. Options: circled, icon
- -
\ No newline at end of file diff --git a/demo/includes/modules/icon/includes/simple-icons.html b/demo/includes/modules/icon/includes/simple-icons.html deleted file mode 100644 index 430d90ab5..000000000 --- a/demo/includes/modules/icon/includes/simple-icons.html +++ /dev/null @@ -1,8 +0,0 @@ -
- - - - - - -
diff --git a/demo/includes/modules/icon/includes/styled-icons.html b/demo/includes/modules/icon/includes/styled-icons.html deleted file mode 100644 index 169200c91..000000000 --- a/demo/includes/modules/icon/includes/styled-icons.html +++ /dev/null @@ -1,17 +0,0 @@ - -
- - - - - -
- - -
- - - - - -
\ No newline at end of file diff --git a/demo/includes/modules/list/includes/multi-lines.html b/demo/includes/modules/list/includes/multi-lines.html deleted file mode 100644 index b9cff1483..000000000 --- a/demo/includes/modules/list/includes/multi-lines.html +++ /dev/null @@ -1,157 +0,0 @@ -
-
- Text only - -
- -
    -
  • -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
  • -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
  • -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
-
- -
- Icon with text - -
- -
    -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
-
- -
- Circled icon with text - -
- -
    -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    -
    • -
-
- -
- Avatar with text and icon - -
- -
    -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. -
    - -
    - -
    -
    • -
-
-
\ No newline at end of file diff --git a/demo/includes/modules/list/includes/one-line.html b/demo/includes/modules/list/includes/one-line.html deleted file mode 100644 index 279cb9550..000000000 --- a/demo/includes/modules/list/includes/one-line.html +++ /dev/null @@ -1,145 +0,0 @@ -
-
- Text only - -
- -
    -
  • -
    - Single-line item -
    -
    • -
  • -
    - Single-line item -
    -
    • -
  • -
    - Single-line item -
    -
    • -
-
- -
- Icon with text - -
- -
    -
  • -
    - -
    - -
    - Single-line item -
    -
    • -
  • -
    - -
    - -
    - Single-line item -
    -
    • -
  • -
    - -
    - -
    - Single-line item -
    -
    • -
-
- -
- Circled icon with text - -
- -
    -
  • -
    - -
    - -
    - Single-line item -
    -
    • -
  • -
    - -
    - -
    - Single-line item -
    -
    • -
  • -
    - -
    - -
    - Single-line item -
    -
    • -
-
- -
- Avatar with text and icon - -
- -
    -
  • -
    - -
    - -
    - Single-line item -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Single-line item -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Single-line item -
    - -
    - -
    -
    • -
-
-
\ No newline at end of file diff --git a/demo/includes/modules/list/includes/two-lines.html b/demo/includes/modules/list/includes/two-lines.html deleted file mode 100644 index 2ebb27a7a..000000000 --- a/demo/includes/modules/list/includes/two-lines.html +++ /dev/null @@ -1,199 +0,0 @@ -
-
- Text only - -
- -
    -
  • -
    - Two-line item - Secondary text -
    -
    • -
  • -
    - Two-line item - Secondary text -
    -
    • -
  • -
    - Two-line item - Secondary text -
    -
    • -
  • -
  • Subheader
    • -
  • -
    - Single-line item -
    -
    • -
  • -
    - Single-line item -
    -
    • -
-
- -
- Icon with text - -
- -
    -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    -
    • -
-
- -
- Circled icon with text - -
- -
    -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    -
    • -
-
- -
- Avatar with text and icon - -
- -
    -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    - -
    - -
    -
    • -
  • -
  • Subheader
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    - -
    - -
    -
    • -
  • -
    - -
    - -
    - Two-line item - Secondary text -
    - -
    - -
    -
    • -
-
-
\ No newline at end of file diff --git a/demo/includes/modules/list/list.html b/demo/includes/modules/list/list.html deleted file mode 100644 index 2895a8b14..000000000 --- a/demo/includes/modules/list/list.html +++ /dev/null @@ -1,11 +0,0 @@ -
-

List

- -

- A CSS list component with various style helpers is available. -

- - - - -
\ No newline at end of file diff --git a/demo/includes/modules/notification/includes/alert.html b/demo/includes/modules/notification/includes/alert.html deleted file mode 100644 index fd14b1e9f..000000000 --- a/demo/includes/modules/notification/includes/alert.html +++ /dev/null @@ -1,3 +0,0 @@ -
- Alert box -
\ No newline at end of file diff --git a/demo/includes/modules/notification/includes/basic.html b/demo/includes/modules/notification/includes/basic.html deleted file mode 100644 index 79b1116a5..000000000 --- a/demo/includes/modules/notification/includes/basic.html +++ /dev/null @@ -1,8 +0,0 @@ -
- Simple notification - Sticky notification - Notification with icon - Notification with colored icon - Notification with action button - Notification with 2 seconds delay -
\ No newline at end of file diff --git a/demo/includes/modules/notification/includes/confirm.html b/demo/includes/modules/notification/includes/confirm.html deleted file mode 100644 index e5d05e9f4..000000000 --- a/demo/includes/modules/notification/includes/confirm.html +++ /dev/null @@ -1,3 +0,0 @@ -
- Confirm box -
\ No newline at end of file diff --git a/demo/includes/modules/notification/includes/helper.html b/demo/includes/modules/notification/includes/helper.html deleted file mode 100644 index 1f31c766d..000000000 --- a/demo/includes/modules/notification/includes/helper.html +++ /dev/null @@ -1,6 +0,0 @@ -
- Info notification - Success notification - Warning notification - Error notification -
\ No newline at end of file diff --git a/demo/includes/modules/notification/js/demo-notification_controller.js b/demo/includes/modules/notification/js/demo-notification_controller.js deleted file mode 100644 index 5e2b0748d..000000000 --- a/demo/includes/modules/notification/js/demo-notification_controller.js +++ /dev/null @@ -1,95 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoNotificationController', DemoNotificationController); - - DemoNotificationController.$inject = ['LxNotificationService']; - - function DemoNotificationController(LxNotificationService) - { - var vm = this; - - vm.alertBox = alertBox; - vm.confirmBox = confirmBox; - vm.notify = notify; - - //////////// - - function alertBox() - { - LxNotificationService.alert('Lorem Ipsum', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet urna quis nisi sodales semper pharetra eu augue.', 'Ok', function(answer) - { - LxNotificationService.notify('Alert callback'); - }); - } - - function confirmBox() - { - LxNotificationService.confirm('Lorem Ipsum', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet urna quis nisi sodales semper pharetra eu augue.', - { - cancel: 'Disagree', - ok: 'Agree' - }, function(answer) - { - if (answer) - { - LxNotificationService.success('Agree'); - } - else - { - LxNotificationService.error('Disagree'); - } - }); - } - - function notify(_type) - { - if (_type === 'simple') - { - LxNotificationService.notify('Lorem Ipsum'); - } - else if (_type === 'sticky') - { - LxNotificationService.notify('Lorem Ipsum', undefined, true); - } - else if (_type === 'icon') - { - LxNotificationService.notify('Lorem Ipsum', 'android'); - } - else if (_type === 'color') - { - LxNotificationService.notify('Lorem Ipsum', 'android', false, 'yellow'); - } - else if (_type === 'info') - { - LxNotificationService.info('Lorem Ipsum'); - } - else if (_type === 'success') - { - LxNotificationService.success('Lorem Ipsum'); - } - else if (_type === 'warning') - { - LxNotificationService.warning('Lorem Ipsum'); - } - else if (_type === 'error') - { - LxNotificationService.error('Lorem Ipsum'); - } - else if (_type === 'action') - { - LxNotificationService.notify('Lorem Ipsum', undefined, undefined, 'yellow', 'Undo', function() - { - LxNotificationService.notify('Callback'); - }); - } - else if (_type === 'delay') - { - LxNotificationService.notify('Lorem Ipsum', undefined, undefined, undefined, undefined, undefined, 2 * 1000); - } - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/notification/notification.html b/demo/includes/modules/notification/notification.html deleted file mode 100644 index b9fde5d7d..000000000 --- a/demo/includes/modules/notification/notification.html +++ /dev/null @@ -1,287 +0,0 @@ -
-

Notification

- -

- LxNotificationService is a service that manage notifications, alert boxes and confirm boxes. -

- - - The notify method have six parameters that allow user to prepend a colored icon, to handle with sticky notifications and an action button. - - - - Helper methods quickly create styled notification: info, success, warning, error. - - - - The alert method create an alert box with a title, a text and handle user action in a callback. - - - - The confirm method create a confirm box with a title, a text and handle user action in a callback. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
text*stringThe notification text.
iconstringThe icon identifier.
stickybooleanfalseSpecify if the notification is sticky.
colorstringwhiteDefine the icon and action colors. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
actionstringThe notification action text.
callbackfunctionThe notification action callback.
delaynumberThe delay after which the notification will be hidden (in ms). Defaults to 6000.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
text*stringThe notification text.
stickybooleanfalseSpecify if the notification is sticky.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
text*stringThe notification text.
stickybooleanfalseSpecify if the notification is sticky.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
text*stringThe notification text.
stickybooleanfalseSpecify if the notification is sticky.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
text*stringThe notification text.
stickybooleanfalseSpecify if the notification is sticky.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
title*stringThe alert box title.
textstringThe alert box text.
buttonstringThe alert box button label.
callbackfunctionThe alert box callback with the answer as available parameter (always true for the alert box).
unbindbooleanfalseUnbind the escape key to close the alert box.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
title*stringThe confirm box title.
textstringThe confirm box text.
buttonsobjectThe confirm box buttons label. { cancel: 'Disagree', ok: 'Agree' }
callbackfunctionThe confirm box callback with the answer as available parameter.
unbindbooleanfalseUnbind the escape key to close the confirm box.
- - -
\ No newline at end of file diff --git a/demo/includes/modules/progress/includes/determinate.html b/demo/includes/modules/progress/includes/determinate.html deleted file mode 100644 index a0df3f337..000000000 --- a/demo/includes/modules/progress/includes/determinate.html +++ /dev/null @@ -1,9 +0,0 @@ -
- Toggle circular progress - Toggle linear progress -
- -
- - -
\ No newline at end of file diff --git a/demo/includes/modules/progress/includes/indeterminate.html b/demo/includes/modules/progress/includes/indeterminate.html deleted file mode 100644 index b03f659be..000000000 --- a/demo/includes/modules/progress/includes/indeterminate.html +++ /dev/null @@ -1,9 +0,0 @@ -
- Toggle circular progress - Toggle linear progress -
- -
- - -
\ No newline at end of file diff --git a/demo/includes/modules/progress/js/demo-progress_controller.js b/demo/includes/modules/progress/js/demo-progress_controller.js deleted file mode 100644 index 129cb2bc2..000000000 --- a/demo/includes/modules/progress/js/demo-progress_controller.js +++ /dev/null @@ -1,93 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoProgressController', DemoProgressController); - - DemoProgressController.$inject = ['$interval']; - - function DemoProgressController($interval) - { - var vm = this; - var determinateCircularProgressInterval; - var determinateLinearProgressInterval; - - vm.toggleDeterminateCircularProgress = toggleDeterminateCircularProgress; - vm.toggleDeterminateLinearProgress = toggleDeterminateLinearProgress; - vm.toggleIndeterminateCircularProgress = toggleIndeterminateCircularProgress; - vm.toggleIndeterminateLinearProgress = toggleIndeterminateLinearProgress; - - vm.determinateCircularProgressValue = 0; - vm.determinateLinearProgressValue = 0; - vm.showDeterminateCircularProgress = false; - vm.showDeterminateLinearProgress = false; - vm.showIndeterminateCircularProgress = false; - vm.showIndeterminateLinearProgress = false; - - //////////// - - function toggleDeterminateCircularProgress() - { - vm.showDeterminateCircularProgress = !vm.showDeterminateCircularProgress; - - if (vm.showDeterminateCircularProgress) - { - vm.determinateCircularProgressValue = 0; - - determinateCircularProgressInterval = $interval(function() - { - if (vm.determinateCircularProgressValue < 100) - { - vm.determinateCircularProgressValue += 1; - } - else - { - $interval.cancel(determinateCircularProgressInterval); - } - }, 100); - } - else - { - $interval.cancel(determinateCircularProgressInterval); - } - } - - function toggleDeterminateLinearProgress() - { - vm.showDeterminateLinearProgress = !vm.showDeterminateLinearProgress; - - if (vm.showDeterminateLinearProgress) - { - vm.determinateLinearProgressValue = 0; - - determinateLinearProgressInterval = $interval(function() - { - if (vm.determinateLinearProgressValue < 100) - { - vm.determinateLinearProgressValue += 1; - } - else - { - $interval.cancel(determinateLinearProgressInterval); - } - }, 100); - } - else - { - $interval.cancel(determinateLinearProgressInterval); - } - } - - function toggleIndeterminateCircularProgress() - { - vm.showIndeterminateCircularProgress = !vm.showIndeterminateCircularProgress; - } - - function toggleIndeterminateLinearProgress() - { - vm.showIndeterminateLinearProgress = !vm.showIndeterminateLinearProgress; - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/progress/progress.html b/demo/includes/modules/progress/progress.html deleted file mode 100644 index 2dc570e05..000000000 --- a/demo/includes/modules/progress/progress.html +++ /dev/null @@ -1,54 +0,0 @@ -
-

Progress

- -

- lx-progress is a directive that create a circular or a linear progress. -

- -

- This component has been completly reworked since LumX beta version (v0.3.96).
Please refer to the updated documentation. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-colorstringprimaryDefine the progress color. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-diameterstring100The progress scale defined in percent value. Only available with the circular progress.
lx-type*stringDefine the progress type. Options: circular, linear
lx-valuenumberDefine the progress value in percentage (0 to 100).
- -
\ No newline at end of file diff --git a/demo/includes/modules/radio-button/includes/basic.html b/demo/includes/modules/radio-button/includes/basic.html deleted file mode 100644 index f107a94fe..000000000 --- a/demo/includes/modules/radio-button/includes/basic.html +++ /dev/null @@ -1,24 +0,0 @@ -
- - Radio Button 1 - Radio Button 2 - Radio Button 3 - - - - - Radio Button with help 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - -
\ No newline at end of file diff --git a/demo/includes/modules/radio-button/includes/color.html b/demo/includes/modules/radio-button/includes/color.html deleted file mode 100644 index 45b4173e4..000000000 --- a/demo/includes/modules/radio-button/includes/color.html +++ /dev/null @@ -1,23 +0,0 @@ -
- - - Radio Button with help 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - -
\ No newline at end of file diff --git a/demo/includes/modules/radio-button/includes/state.html b/demo/includes/modules/radio-button/includes/state.html deleted file mode 100644 index 502e8c003..000000000 --- a/demo/includes/modules/radio-button/includes/state.html +++ /dev/null @@ -1,18 +0,0 @@ -
- - - Radio Button with help 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - - - Radio Button with help 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - - -
\ No newline at end of file diff --git a/demo/includes/modules/radio-button/js/demo-radio-button_controller.js b/demo/includes/modules/radio-button/js/demo-radio-button_controller.js deleted file mode 100644 index 8414838ca..000000000 --- a/demo/includes/modules/radio-button/js/demo-radio-button_controller.js +++ /dev/null @@ -1,29 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoRadioButtonController', DemoRadioButtonController); - - function DemoRadioButtonController() - { - var vm = this; - - vm.radioButtons = { - basic: - { - test1: 'ipsum', - test2: 'lorem' - }, - states: - { - test3: 'dolor' - }, - colors: - { - test4: 'lorem' - } - }; - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/radio-button/radio-button.html b/demo/includes/modules/radio-button/radio-button.html deleted file mode 100644 index 49b602138..000000000 --- a/demo/includes/modules/radio-button/radio-button.html +++ /dev/null @@ -1,85 +0,0 @@ -
-

Radio button

- -

- lx-radio-button is a directive that create an input radio element. -

- - - The radio button label can be specified as transcluded element.
- To specify a helper message, two directives need to be transcluded.
- lx-radio-button-label for the label and lx-radio-button-help for the helper message. - - - - Disabled style will automaticly be applied when using ng-disabled or disabled attribute. - - - - Main colors defined in dist/scss/core/settings/defaults.scss can be used to create colored radio buttons. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-colorstringaccentDefine the radio button color. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-themestringlightSet this option to dark if inputs are displayed in a dark box. Available options: light, dark
namestringProperty name of the form under which the control is published.
ng-changestringAngular expression to be executed when input changes due to user interaction with the input element.
ng-disabledexpressionIf the expression is truthy, then the disabled attribute will be set on the element.
ng-model*stringAssignable angular expression to data-bind to.
ng-valuestringAngular expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).
valuestringThe value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).
- -
\ No newline at end of file diff --git a/demo/includes/modules/search-filter/includes/autocomplete.html b/demo/includes/modules/search-filter/includes/autocomplete.html deleted file mode 100644 index ed90dea9e..000000000 --- a/demo/includes/modules/search-filter/includes/autocomplete.html +++ /dev/null @@ -1,12 +0,0 @@ -
-
- - - -
- Should close dropdown after 5 seconds. -
\ No newline at end of file diff --git a/demo/includes/modules/search-filter/includes/basic.html b/demo/includes/modules/search-filter/includes/basic.html deleted file mode 100644 index 7f3c988e2..000000000 --- a/demo/includes/modules/search-filter/includes/basic.html +++ /dev/null @@ -1,93 +0,0 @@ -
-
-
-
- - - -
-
-
- -
-
-
- Lorem Ipsum - -
- - - - - -
-
-
-
-
- -
-
-
-
- Lorem Ipsum - -
- - - - - -
-
-
-
- -
-
-
- - - - - -
-
-
-
- -
-
-
-
- - - -
-
-
- -
-
-
- Lorem Ipsum - -
- - - - - -
-
-
-
-
\ No newline at end of file diff --git a/demo/includes/modules/search-filter/js/demo-search-filter_controller.js b/demo/includes/modules/search-filter/js/demo-search-filter_controller.js deleted file mode 100644 index 83626f160..000000000 --- a/demo/includes/modules/search-filter/js/demo-search-filter_controller.js +++ /dev/null @@ -1,85 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoSearchFilterController', DemoSearchFilterController); - - DemoSearchFilterController.$inject = ['$http', '$timeout', 'LxDropdownService', 'LxNotificationService']; - - function DemoSearchFilterController($http, $timeout, LxDropdownService, LxNotificationService) - { - var vm = this; - - vm.autocomplete = autocomplete; - vm.displaySelectedValue = displaySelectedValue; - vm.onSearchFilterInit = setSearchFilterDropdownId; - vm.shouldCloseAfterFewSeconds = false; - - vm.searchFilter = { - first: undefined, - second: undefined, - third: undefined, - fourth: undefined, - fifth: undefined, - sixth: undefined, - autocomplete: undefined - }; - - //////////// - - function setSearchFilterDropdownId(dropdownId) - { - vm.searchFilterDropdownId = dropdownId; - } - - function closeDropdownMenu() - { - LxDropdownService.close(vm.searchFilterDropdownId); - } - - function autocomplete(_newValue, _cb, _errCb) - { - if (vm.shouldCloseAfterFewSeconds) { - $timeout(closeDropdownMenu, 5000); - } - - if (_newValue) - { - $http.get('https://swapi.co/api/people/?search=' + escape(_newValue)) - .then(function updateSuccess(response) - { - $timeout(function() - { - var items = []; - - vm.autocompleteIcon = undefined; - - if (response.data && response.data.results) - { - items = response.data.results.map(function(object) { return object.name; }); - } - - _cb(items); - }, 1000); - }) - .catch(function updateError() - { - _errCb('Error'); - }); - } - else - { - vm.autocompleteIcon = 'clock'; - - _cb(['History 1', 'History 2', 'History 3']); - } - } - - function displaySelectedValue(_value) - { - LxNotificationService.info('You selected: ' + _value); - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/search-filter/search-filter.html b/demo/includes/modules/search-filter/search-filter.html deleted file mode 100644 index 3ecb6e6b8..000000000 --- a/demo/includes/modules/search-filter/search-filter.html +++ /dev/null @@ -1,84 +0,0 @@ -
-

Search filter

- -

- lx-search-filter is a directive that create a search filter with various style options. -

- -

- This component has been completly reworked since LumX beta version (v0.3.96).
Please refer to the updated documentation. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-autocompletefunctionAutocomplete function called on model update (debounce 500ms) to display choices. It will receive the new value typed in the input field, a callback function to pass the results to, and an error callback function to which you can pass an error message.
lx-closedbooleanfalseDefine if the input is hidden and should be opened on search icon click.
lx-colorstringblackDefine the search filter buttons color. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-iconstringDefine the icon placed to the left of each result.
lx-on-initfunctionA function to be called when the component is initialized. First argument is the component dropdown id, so you can close or open it programmatically
lx-on-selectfunctionA function to be called when an item is selected in the autocomplete results.
lx-search-on-focusbooleanfalseDefine if the autocomplete function should be launched on input focus.
lx-themestringlightDefine the search filter input text color. Options: light, dark
lx-widthstring240Define the search filter width in pixels. A percent value can be defined too. The default value is applied only in closed mode.
- -
\ No newline at end of file diff --git a/demo/includes/modules/select/includes/ajax.html b/demo/includes/modules/select/includes/ajax.html deleted file mode 100644 index edb59c34c..000000000 --- a/demo/includes/modules/select/includes/ajax.html +++ /dev/null @@ -1,24 +0,0 @@ -
- - - {{ $selected.name }} (Born in {{ $selected.birth_year }}) - - - - {{ $choice.name }} (Appears in {{ $choice.films.length }} films) - - - - Set to Darth Vader -
\ No newline at end of file diff --git a/demo/includes/modules/select/includes/autocomplete.html b/demo/includes/modules/select/includes/autocomplete.html deleted file mode 100644 index fc040d1a7..000000000 --- a/demo/includes/modules/select/includes/autocomplete.html +++ /dev/null @@ -1,20 +0,0 @@ -
- - - {{ $selected.name }} ({{$selected.type}}) - - - - {{ $choice.name }} ({{$choice.type}}) - - -
\ No newline at end of file diff --git a/demo/includes/modules/select/includes/basic.html b/demo/includes/modules/select/includes/basic.html deleted file mode 100644 index de5105a49..000000000 --- a/demo/includes/modules/select/includes/basic.html +++ /dev/null @@ -1,43 +0,0 @@ -
- - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - - - - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - - - - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - -
diff --git a/demo/includes/modules/select/includes/infinite-scroll.html b/demo/includes/modules/select/includes/infinite-scroll.html deleted file mode 100644 index b9501276f..000000000 --- a/demo/includes/modules/select/includes/infinite-scroll.html +++ /dev/null @@ -1,20 +0,0 @@ -
- - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - -
diff --git a/demo/includes/modules/select/includes/multipane.html b/demo/includes/modules/select/includes/multipane.html deleted file mode 100644 index d5ef842e8..000000000 --- a/demo/includes/modules/select/includes/multipane.html +++ /dev/null @@ -1,35 +0,0 @@ -
- - - #{{ $selected.uid }} - {{ $selected.name }} - - - - {{ $choice.name }} - - - - - - #{{ $selected.uid }} - {{ $selected.name }} - - - - {{ $choice.name }} - - -
diff --git a/demo/includes/modules/select/includes/subheader.html b/demo/includes/modules/select/includes/subheader.html deleted file mode 100644 index f0183c2d4..000000000 --- a/demo/includes/modules/select/includes/subheader.html +++ /dev/null @@ -1,14 +0,0 @@ -
- - - {{ $selectedSubheader }} - {{ $selected.name }} - - - - {{ $choice.name }} - - -
\ No newline at end of file diff --git a/demo/includes/modules/select/includes/theme.html b/demo/includes/modules/select/includes/theme.html deleted file mode 100644 index 544b9e7da..000000000 --- a/demo/includes/modules/select/includes/theme.html +++ /dev/null @@ -1,31 +0,0 @@ -
- - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - - - - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - -
\ No newline at end of file diff --git a/demo/includes/modules/select/includes/view-mode.html b/demo/includes/modules/select/includes/view-mode.html deleted file mode 100644 index 3420809dd..000000000 --- a/demo/includes/modules/select/includes/view-mode.html +++ /dev/null @@ -1,15 +0,0 @@ -
- - - {{ $selected.name }} - {{ $selected.age }} - - - - {{ $choice.email }} - - -
\ No newline at end of file diff --git a/demo/includes/modules/select/js/demo-select_controller.js b/demo/includes/modules/select/js/demo-select_controller.js deleted file mode 100644 index ebc4926b4..000000000 --- a/demo/includes/modules/select/js/demo-select_controller.js +++ /dev/null @@ -1,434 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoSelectController', DemoSelectController); - - DemoSelectController.$inject = ['$http', '$scope', '$timeout', 'LxNotificationService']; - - function DemoSelectController($http, $scope, $timeout, LxNotificationService) - { - var vm = this; - - vm.callApi = callApi; - vm.selectCallback = selectCallback; - - vm.selectAjax = { - selected: 'Darth Vader', - list: [], - update: function(newFilter) - { - if (newFilter) - { - vm.selectAjax.loading = true; - - $http.get('https://swapi.co/api/people/?search=' + escape(newFilter)) - .then(function updateSuccess(response) - { - if (response.data && response.data.results) - { - vm.selectAjax.list = response.data.results; - } - vm.selectAjax.loading = false; - }) - .catch(function updateError() - { - vm.selectAjax.loading = false; - }); - } - else - { - vm.selectAjax.list = false; - } - }, - toModel: function(data, callback) - { - if (data) - { - callback(data.name); - } - else - { - callback(); - } - }, - toSelection: function(data, callback) - { - if (data) - { - $http.get('https://swapi.co/api/people/?search=' + escape(data)) - .then(function toSelectionSuccess(response) - { - if (response.data && response.data.results) - { - callback(response.data.results[0]); - } - }) - .catch(function toSelectionError() - { - callback(); - }); - } - else - { - callback(); - } - }, - loading: false - }; - vm.selectPeople = [ - { - name: 'Adam', - email: 'adam@email.com', - age: 10 - }, - { - name: 'Amalie', - email: 'amalie@email.com', - age: 12 - }, - { - name: 'Wladimir', - email: 'wladimir@email.com', - age: 30 - }, - { - name: 'Samantha', - email: 'samantha@email.com', - age: 31 - }, - { - name: 'Estefanía', - email: 'estefanía@email.com', - age: 16 - }, - { - name: 'Natasha', - email: 'natasha@email.com', - age: 54 - }, - { - name: 'Nicole', - email: 'nicole@email.com', - age: 43 - }, - { - name: 'Adrian', - email: 'adrian@email.com', - age: 21 - }, - { - name: 'David', - email: 'david@email.com', - age: 42 - }, - { - name: 'Julia', - email: 'julia@email.com', - age: 35 - }, - { - name: 'Ahmed', - email: 'ahmed@email.com', - age: 31 - }, - { - name: 'Sofia', - email: 'sofia@email.com', - age: 23 - }, - { - name: 'Corinne', - email: 'corinne@email.com', - age: 54 - }, - { - name: 'Nicolas', - email: 'nicolas@email.com', - age: 32 - }, - { - name: 'Henry', - email: 'henry@email.com', - age: 18 - }, - { - name: 'Carol', - email: 'carol@email.com', - age: 45 - }, - { - name: 'Stephan', - email: 'stephan@email.com', - age: 36 - }, - { - name: 'Elizabeth', - email: 'elizabeth@email.com', - age: 92 - }, - { - name: 'François', - email: 'francois@email.com', - age: 45 - }]; - vm.selectSections = { - ' Sub header 1': [ - { - uid: '1', - name: 'Adam' - }, - { - uid: '2', - name: 'Amalie' - }, - { - uid: '3', - name: 'Wladimir' - }, - { - uid: '4', - name: 'Samantha' - }], - ' Sub header 2': [ - { - uid: '5', - name: 'Estefanía' - }, - { - uid: '6', - name: 'Natasha' - }, - { - uid: '7', - name: 'Nicole' - }] - }; - vm.selectVegetables = [ - { - name: 'Broccoli', - type: 'Brassica' - }, - { - name: 'Cabbage', - type: 'Brassica' - }, - { - name: 'Carrot', - type: 'Umbelliferous' - } - ]; - vm.selectPeopleMultipane = { - ' Male humans': { - 'Old': [ - { - uid: '1', - name: 'Adam' - }, - { - uid: '2', - name: 'Tom' - }, - { - uid: '3', - name: 'Ben' - } - ], - 'Middle aged': [ - { - uid: '4', - name: 'Franck' - } - ], - 'Young': [ - { - uid: '5', - name: 'Wladimir' - }, - { - uid: '6', - name: 'Jack' - } - ], - }, - ' Female': { - 'France': { - 'Old': [ - { - uid: '7', - name: 'Sue Helen' - } - ], - 'Middle aged': { - 'Lorem': [ - { - uid: '8', - name: 'Samantha' - }, - { - uid: '9', - name: 'Estefanía' - }, - { - uid: '10', - name: 'Natasha' - }, - { - uid: '11', - name: 'Nicole' - }, - { - uid: '12', - name: 'Kathy' - }, - { - uid: '13', - name: 'Robin' - }, - { - uid: '14', - name: 'Jessica' - }, - { - uid: '15', - name: 'Reagan' - }, - { - uid: '16', - name: 'Ariel' - }, - { - uid: '17', - name: 'Krista' - }, - { - uid: '18', - name: 'Lillie' - }, - { - uid: '19', - name: 'Brittany' - }, - { - uid: '20', - name: 'Tiffany' - }, - { - uid: '21', - name: 'Alexa' - }, - { - uid: '22', - name: 'Alison' - }, - { - uid: '23', - name: 'Karen' - } - ], - 'Ipsum': [ - { - uid: '16', - name: 'Julia' - }, - { - uid: '17', - name: 'Sofia' - } - ], - }, - 'Young': [ - { - uid: '18', - name: 'Karin' - }, - { - uid: '19', - name: 'Camillia' - } - ], - }, - 'US': [ - { - uid: '16', - name: 'Katerin' - }, - { - uid: '17', - name: 'Olga' - } - ], - } - }; - vm.newValueTransformer = function(_newValue) { - return { - name: _newValue, - type: 'Unknown' - }; - }; - vm.selectModel = { - selectedPerson: undefined, - selectedPeople: [vm.selectPeople[2], vm.selectPeople[4]], - selectedPeopleMax: [vm.selectPeople[3], vm.selectPeople[5]], - selectedPeopleSections: [], - selectedPeopleMultipane: undefined, - selectedPeopleMultipaneMultiple: [], - selectedVegetables: [] - }; - vm.multipaneLoading = true; - vm.loadingInfiniteScroll = false; - vm.pageInfiniteScroll = 0; - - $scope.$on('lx-dropdown__open-end', function onDropdownOpenEnd() { - $timeout(function delayEndLoading() { - vm.multipaneLoading = false; - }, 1500); - }); - - //////////// - - function selectCallback(_newValue, _oldValue) - { - LxNotificationService.notify('Change detected'); - - console.log('Old value: ', _oldValue); - console.log('New value: ', _newValue); - } - - /** - * Call sample API. - * - * @return {Promise} Promise containing an array of users. - */ - function callApi() { - vm.pageInfiniteScroll++; - vm.loadingInfiniteScroll = true; - - return $http - .get( - 'https://randomuser.me/api/?results=10&seed=lumapps&page=' + vm.pageInfiniteScroll - ) - .then(function(response) { - if (response.data && response.data.results) { - return response.data.results.map(function(person) { - return { - name: person.name.first, - email: person.email, - age: person.dob.age - }; - }); - } else { - return []; - } - }) - .catch(function() { - return []; - }) - .finally(function() { - vm.loadingInfiniteScroll = false; - }); - } - } -})(); diff --git a/demo/includes/modules/select/select.html b/demo/includes/modules/select/select.html deleted file mode 100644 index 1f3ff95d6..000000000 --- a/demo/includes/modules/select/select.html +++ /dev/null @@ -1,194 +0,0 @@ -
-

Select

- -

- lx-select is a directive that create a selector that let user select one or multiple values from various sources. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-allow-clearbooleanfalseAllow user to clear the select model.
lx-allow-new-valuebooleanfalseAllow user to add a new value to the model (if lx-autocomplete).
lx-new-value-transformfunctionFunction called to transform new value before inserting it to the model (if lx-allow-new-value).
lx-autocompletebooleanfalseAdd an input after selected tags to search for matches in choices list (if lx-multiple).
lx-choices*arrayThe list of choices available in the dropdown menu.
lx-choices-custom-stylebooleanfalseRemove the LumX default style for select dropdown.
lx-choices-view-modestringlistThe view mode of the choices. Options: list, panes
lx-custom-stylebooleanfalseRemove the LumX default style for select.
lx-display-filterbooleanfalseDisplay the search filter.
lx-errorbooleanfalseSet red error style.
lx-filterfunctionFilter function called on filter change.
lx-fixed-labelbooleanfalseInput label will act like a classic placeholder.
lx-helperbooleanfalseDisplay a helper message in the choice list.
lx-helper-messagestringThe helper message displayed when lx-helper is true or when filtered choices list is empty.
lx-infinite-scrollfunctionFunction called to add new values to select dropdown.
lx-label*stringThe input label displayed as a placeholder.
lx-loadingbooleanfalseDisplay a loader in the choice list.
lx-model-to-selectionfunctionConvert the value stored in the ng-model into the value displayed in the choice list to match the selection. Two parameters are available: data (the original data) and callback (the function to call with the converted value).
lx-multiplebooleanfalseLet the user select multiple values in the choice list.
lx-maxnumber-Tells if you want a maximum number of item to be selected.
lx-selection-to-modelfunctionConvert the value selected in the choice list into the value stored in the ng-model. Two parameters are available: data (the original data) and callback (the function to call with the converted value).
lx-themestringlightSet this option to dark if selects are displayed into a dark box. Options: light, dark
lx-validbooleanfalseSet green valid style.
lx-view-modestringfieldThe select component view mode. Options: field, chips
ng-changestringAngular expression to be executed when input changes due to user interaction with the input element.
ng-disabledexpressionIf the expression is truthy, then the disabled attribute will be set on the element.
ng-model*stringAssignable angular expression to data-bind to.
- -
diff --git a/demo/includes/modules/stepper/includes/editable.html b/demo/includes/modules/stepper/includes/editable.html deleted file mode 100644 index 7de001743..000000000 --- a/demo/includes/modules/stepper/includes/editable.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Toggle layout -
\ No newline at end of file diff --git a/demo/includes/modules/stepper/includes/error.html b/demo/includes/modules/stepper/includes/error.html deleted file mode 100644 index b53ab9080..000000000 --- a/demo/includes/modules/stepper/includes/error.html +++ /dev/null @@ -1,24 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Toggle layout - Set {{ vm.isValid ? 'unvalid' : 'valid' }} -
diff --git a/demo/includes/modules/stepper/includes/external-controls.html b/demo/includes/modules/stepper/includes/external-controls.html deleted file mode 100644 index d29d6bed8..000000000 --- a/demo/includes/modules/stepper/includes/external-controls.html +++ /dev/null @@ -1,28 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Previous Step (external) - Next Step (external) - Complete (external) - Cancel (external) - - Toggle layout -
diff --git a/demo/includes/modules/stepper/includes/feedback.html b/demo/includes/modules/stepper/includes/feedback.html deleted file mode 100644 index 310a1e2f2..000000000 --- a/demo/includes/modules/stepper/includes/feedback.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Toggle layout -
\ No newline at end of file diff --git a/demo/includes/modules/stepper/includes/linear.html b/demo/includes/modules/stepper/includes/linear.html deleted file mode 100644 index f24de8a32..000000000 --- a/demo/includes/modules/stepper/includes/linear.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Toggle layout -
\ No newline at end of file diff --git a/demo/includes/modules/stepper/includes/non-linear.html b/demo/includes/modules/stepper/includes/non-linear.html deleted file mode 100644 index 91575a4c5..000000000 --- a/demo/includes/modules/stepper/includes/non-linear.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Toggle layout -
\ No newline at end of file diff --git a/demo/includes/modules/stepper/includes/optional.html b/demo/includes/modules/stepper/includes/optional.html deleted file mode 100644 index 60f998cbc..000000000 --- a/demo/includes/modules/stepper/includes/optional.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
- Step 1 -
- - -
- Step 2 -
- - -
- Step 3 -
- - - -
- -
- Toggle layout -
\ No newline at end of file diff --git a/demo/includes/modules/stepper/js/demo-stepper_controller.js b/demo/includes/modules/stepper/js/demo-stepper_controller.js deleted file mode 100644 index a4aca4469..000000000 --- a/demo/includes/modules/stepper/js/demo-stepper_controller.js +++ /dev/null @@ -1,148 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoStepperController', DemoStepperController); - - DemoStepperController.$inject = ['$q', '$scope', '$timeout', 'LxNotificationService']; - - function DemoStepperController($q, $scope, $timeout, LxNotificationService) - { - var vm = this; - - vm.cancel = cancel; - vm.complete = complete; - vm.submit = submit; - vm.toggleLayout = toggleLayout; - vm.validate = validate; - vm.nextStep = nextStep; - vm.previousStep = previousStep; - vm.cancelStepper = cancelStepper; - vm.toggleStepValidity = toggleStepValidity; - - vm.isValid = true; - vm.stepperId = 'external-control-id'; - vm.stepperCompleted = false; - vm.layout = 'horizontal'; - vm.activeStep = 0; - vm.isStep = { - first: true, - last: false, - loading: false - }; - - //////////// - - function cancel() - { - LxNotificationService.info('Cancel'); - } - - function complete() - { - LxNotificationService.success('Complete'); - } - - function submit(isValid, nextStepIndex) - { - return $q(function(resolve, reject) - { - $timeout(function() - { - if (isValid) - { - resolve(nextStepIndex); - } - else - { - reject('Error from submit'); - } - }, 1000); - }); - } - - function toggleLayout() - { - vm.layout = vm.layout === 'horizontal' ? 'vertical' : 'horizontal'; - } - - function validate() - { - if (vm.isValid) - { - return true; - } - else - { - return 'Error from validate'; - } - } - - function nextStep() - { - $scope.$broadcast('lx-stepper__submit-step', vm.stepperId, vm.activeStep); - } - - function previousStep() - { - $scope.$broadcast('lx-stepper__previous-step', vm.stepperId, vm.activeStep); - } - - function cancelStepper() - { - $scope.$broadcast('lx-stepper__cancel', vm.stepperId); - } - - function toggleStepValidity() - { - vm.isValid = !vm.isValid; - } - - $scope.$on('lx-stepper__step', function onStepperDialogFirstStep(evt, id, index, first, last) - { - if (angular.isDefined(id) && id !== vm.stepperId) - { - return; - } - - vm.activeStep = index; - - vm.isStep.first = first; - vm.isStep.last = last; - - vm.stepperCompleted = false; - }); - - $scope.$on('lx-stepper__step-loading', function(evt, id, index) - { - if ((angular.isDefined(id) && id !== vm.stepperId) || vm.activeStep !== index) - { - return; - } - - vm.isStep.loading = true; - }); - - $scope.$on('lx-stepper__step-loaded', function(evt, id, index) - { - if ((angular.isDefined(id) && id !== vm.stepperId) || vm.activeStep !== index) - { - return; - } - - vm.isStep.loading = false; - }); - - $scope.$on('lx-stepper__completed', function(evt, id) - { - if (angular.isDefined(id) && id !== vm.stepperId) - { - return; - } - - vm.stepperCompleted = true; - }); - } -})(); diff --git a/demo/includes/modules/stepper/stepper.html b/demo/includes/modules/stepper/stepper.html deleted file mode 100644 index cb60945b2..000000000 --- a/demo/includes/modules/stepper/stepper.html +++ /dev/null @@ -1,147 +0,0 @@ -
-

Stepper

- -

- lx-stepper is a directive that displays progress through a sequence of logical and numbered steps. -

- -

- Reponsive version of this component is not yet available. -

- - - Linear steppers require users to complete one step in order to move on to the next. - - - - Non-linear steppers allow users to enter a multi-step flow at any point. - - - - Steppers may display a transient feedback message after a step is saved. Stepper feedback should only be used if there is a long latency between steps (Only if horizontal stepper). - - - - Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session. - - - - Optional steps within a linear flow should be marked as optional (Only if linear stepper). - - - - External controls. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-cancel*functionCancel function called on cancel button click.
lx-complete*functionComplete function called when stepper is complete.
lx-is-linearbooleantrueDefine the stepper type.
lx-is-validbooleanDefines whether the current step is valid or not. Only useful for mandatory steps.
lx-labelsobject{ 'back': 'Back', 'cancel': 'Cancel', 'continue': 'Continue', 'optional': 'Optional' }The buttons and the optionnal step labels.
lx-layoutstringhorizontalDefine the stepper layout. Options: horizontal, vertical
lx-show-controlsbooleantrueIndicates if you want to use inner stepper buttons or control the stepper via events
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-feedbackstringThe feedback string displayed while the next step is loading (Only if horizontal layout).
lx-is-editablebooleanfalseDefine if the step is editable. If so, submitting the step will always trigger the submit function, whether it's the first or any other time.
lx-is-optionalbooleanfalseDefine if the step is optional. If so, it's possible to jump to the next step without submitting (Only if linear stepper).
lx-label*stringThe step label displayed in the navigation.
lx-submitfunctionSubmit function called on step submit if valid. Returns a Promise object that is resolved with the index of the next step to navigate to or a Promise object that is rejected with the error message.
lx-validatefunctionValidate function called on step submit. Return true if the step is valid, else, return a string to display an error message in the navigation.
- -
diff --git a/demo/includes/modules/switch/includes/basic.html b/demo/includes/modules/switch/includes/basic.html deleted file mode 100644 index 873c03fa0..000000000 --- a/demo/includes/modules/switch/includes/basic.html +++ /dev/null @@ -1,8 +0,0 @@ -
- Switch - - - Switch with help - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - -
\ No newline at end of file diff --git a/demo/includes/modules/switch/includes/color.html b/demo/includes/modules/switch/includes/color.html deleted file mode 100644 index 796fa5853..000000000 --- a/demo/includes/modules/switch/includes/color.html +++ /dev/null @@ -1,6 +0,0 @@ -
- Blue switch - Green switch - Orange switch - Red switch -
\ No newline at end of file diff --git a/demo/includes/modules/switch/includes/state.html b/demo/includes/modules/switch/includes/state.html deleted file mode 100644 index 38132773b..000000000 --- a/demo/includes/modules/switch/includes/state.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - Switch disabled with help - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur. - -
\ No newline at end of file diff --git a/demo/includes/modules/switch/js/demo-switch_controller.js b/demo/includes/modules/switch/js/demo-switch_controller.js deleted file mode 100644 index d54a7c207..000000000 --- a/demo/includes/modules/switch/js/demo-switch_controller.js +++ /dev/null @@ -1,32 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoSwitchController', DemoSwitchController); - - function DemoSwitchController() - { - var vm = this; - - vm.switches = { - basic: - { - checked: true, - unchecked: false - }, - states: - { - disabled: false - }, - colors: - { - blue: true, - green: true, - orange: true, - red: true - } - }; - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/switch/switch.html b/demo/includes/modules/switch/switch.html deleted file mode 100644 index 1467703b7..000000000 --- a/demo/includes/modules/switch/switch.html +++ /dev/null @@ -1,91 +0,0 @@ -
-

Switch

- -

- lx-switch is a directive that create an input checkbox element. -

- - - The switch label can be specified as transcluded element.
- To specify a helper message, two directives need to be transcluded.
- lx-switch-label for the label and lx-switch-help for the helper message. - - - - Disabled style will automaticly be applied when using ng-disabled or disabled attribute. - - - - Main colors defined in dist/scss/core/settings/defaults.scss can be used to create colored switches. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-colorstringaccentDefine the switch color. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-positionstringleftDefine the switch input position. Options: left, right
lx-themestringlightSet this option to dark if inputs are displayed in a dark box. Available options: light, dark
namestringProperty name of the form under which the control is published.
ng-changestringAngular expression to be executed when input changes due to user interaction with the input element.
ng-disabledexpressionIf the expression is truthy, then the disabled attribute will be set on the element.
ng-false-valueexpressionThe value to which the expression should be set when not selected.
ng-model*stringAssignable angular expression to data-bind to.
ng-true-valueexpressionThe value to which the expression should be set when selected.
- -
\ No newline at end of file diff --git a/demo/includes/modules/tabs/includes/basic.html b/demo/includes/modules/tabs/includes/basic.html deleted file mode 100644 index 8736a8b46..000000000 --- a/demo/includes/modules/tabs/includes/basic.html +++ /dev/null @@ -1,20 +0,0 @@ - - -

Lorem Ipsum Content 1

- - - -

Lorem Ipsum Content 2

- - - -

Lorem Ipsum Content 3

- - - -
- -
- Set first tab as active tab - Toggle second tab disabled state -
\ No newline at end of file diff --git a/demo/includes/modules/tabs/includes/dynamic.html b/demo/includes/modules/tabs/includes/dynamic.html deleted file mode 100644 index 10ea82c85..000000000 --- a/demo/includes/modules/tabs/includes/dynamic.html +++ /dev/null @@ -1,18 +0,0 @@ - - -
-

{{ tab.content }}

- -
- Remove current tab -
-
- - - -
- -
- Add a tab - Remove first tab -
\ No newline at end of file diff --git a/demo/includes/modules/tabs/includes/position.html b/demo/includes/modules/tabs/includes/position.html deleted file mode 100644 index 6fb02108f..000000000 --- a/demo/includes/modules/tabs/includes/position.html +++ /dev/null @@ -1,25 +0,0 @@ - - -

- Lorem Ipsum Content 1 #1
- Lorem Ipsum Content 1 #2
- Lorem Ipsum Content 1 #3
-

- - - -

- Lorem Ipsum Content 2 #1
- Lorem Ipsum Content 2 #2
- Lorem Ipsum Content 2 #3
-

- - - -

- Lorem Ipsum Content 3 #1
- Lorem Ipsum Content 3 #2
- Lorem Ipsum Content 3 #3
-

- - \ No newline at end of file diff --git a/demo/includes/modules/tabs/includes/separate.html b/demo/includes/modules/tabs/includes/separate.html deleted file mode 100644 index 03ed3ffed..000000000 --- a/demo/includes/modules/tabs/includes/separate.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - -

Lorem Ipsum Content 1

- - - -

Lorem Ipsum Content 2

- - - -

Lorem Ipsum Content 3

- - \ No newline at end of file diff --git a/demo/includes/modules/tabs/includes/style.html b/demo/includes/modules/tabs/includes/style.html deleted file mode 100644 index 408df5f3d..000000000 --- a/demo/includes/modules/tabs/includes/style.html +++ /dev/null @@ -1,27 +0,0 @@ - - -

Lorem Ipsum Content 1

- - - -

Lorem Ipsum Content 2

- - - -

Lorem Ipsum Content 3

- - - - - -

Lorem Ipsum Content 1

- - - -

Lorem Ipsum Content 2

- - - -

Lorem Ipsum Content 3

- - \ No newline at end of file diff --git a/demo/includes/modules/tabs/js/demo-tabs_controller.js b/demo/includes/modules/tabs/js/demo-tabs_controller.js deleted file mode 100644 index 7fcf1f741..000000000 --- a/demo/includes/modules/tabs/js/demo-tabs_controller.js +++ /dev/null @@ -1,60 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoTabsController', DemoTabsController); - - function DemoTabsController() - { - var vm = this; - var tabIndex = 4; - - vm.addTab = addTab; - vm.removeFirstTab = removeFirstTab; - vm.removeTab = removeTab; - - vm.activeTab = 1; - vm.tabIsDisabled = false; - vm.tabs = [ - { - heading: 'Tab 1', - content: 'Tab 1 content' - }, - { - heading: 'Tab 2', - content: 'Tab 2 content' - }, - { - heading: 'Tab 3', - content: 'Tab 3 content' - }]; - - //////////// - - function addTab() - { - vm.tabs.push( - { - heading: 'Tab ' + tabIndex, - content: 'Tab ' + tabIndex + ' content' - }); - - ++tabIndex; - } - - function removeFirstTab() - { - removeTab(0); - } - - function removeTab(_idx) - { - if (vm.tabs.length > _idx) - { - vm.tabs.splice(_idx, 1); - } - } - } -})(); \ No newline at end of file diff --git a/demo/includes/modules/tabs/tabs.html b/demo/includes/modules/tabs/tabs.html deleted file mode 100644 index 754e88dac..000000000 --- a/demo/includes/modules/tabs/tabs.html +++ /dev/null @@ -1,97 +0,0 @@ -
-

Tabs

- -

- lx-tabs is a directive that create a navigation system with tabs. -

- -

- This component has been completly reworked since LumX beta version (v0.3.96).
Please refer to the updated documentation. -

- - - One lx-tab directive per tab need to be transcluded.
lx-tab directive has a label or an icon as parameter and pane content as transcluded element. - - - - Main colors defined in dist/scss/core/settings/defaults.scss can be used to create colored tabs.
- If theme is light, color will be applied to tabs label / icon and indicator. If theme is dark, color will be applied to tabs background and tabs label / icon will be white. - - - - ng-repeat directive can be used to loop through an array of tabs. - - - - Tabs and panes can be separated with two directives: lx-tabs for tabs and lx-tabs-panes for panes.
- It's usefull when you need to scroll into panes with fixed tabs. - - - - lx-position attribute can be used for changing tabs position. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-layoutstringfullDefine the tabs layout. Options: full (tabs will share the available width), inline (tabs will be aligned to the left)
lx-themestringlightDefine the tabs theme. Options: light (color will be applied to tabs label and indicator), dark (color will be applied to tabs background and tabs label / icon will be white)
lx-colorstringprimaryDefine the tabs color according to the theme attribute. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-indicatorstringaccentDefine the indicator color when theme is set to dark. Options: colors defined in colors and sizes section in dist/scss/core/settings/defaults.scss
lx-active-tabintegerDefine the active tab index.
lx-panes-idstringTarget the right lx-tabs-panes id in seaparate mode.
linksobjectDefine the tabs links in seaparate mode.
lx-positionstringtopDefine the tabs position. Options: top, bottom
- -
diff --git a/demo/includes/modules/text-field/includes/basic.html b/demo/includes/modules/text-field/includes/basic.html deleted file mode 100644 index 0d4f38e0e..000000000 --- a/demo/includes/modules/text-field/includes/basic.html +++ /dev/null @@ -1,23 +0,0 @@ -
- - - - -
-
- - - -
- -
- - - -
-
- - - - -
diff --git a/demo/includes/modules/text-field/includes/fixed-label.html b/demo/includes/modules/text-field/includes/fixed-label.html deleted file mode 100644 index c07107e99..000000000 --- a/demo/includes/modules/text-field/includes/fixed-label.html +++ /dev/null @@ -1,37 +0,0 @@ -
-
- - - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - -
-
\ No newline at end of file diff --git a/demo/includes/modules/text-field/includes/state.html b/demo/includes/modules/text-field/includes/state.html deleted file mode 100644 index 84186affa..000000000 --- a/demo/includes/modules/text-field/includes/state.html +++ /dev/null @@ -1,33 +0,0 @@ -
- - - - - - - - - - - - - Email invalid - -
-
- - - -
- -
- - - -
-
-
\ No newline at end of file diff --git a/demo/includes/modules/text-field/includes/textarea.html b/demo/includes/modules/text-field/includes/textarea.html deleted file mode 100644 index df27a8f72..000000000 --- a/demo/includes/modules/text-field/includes/textarea.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - - -
\ No newline at end of file diff --git a/demo/includes/modules/text-field/includes/theme.html b/demo/includes/modules/text-field/includes/theme.html deleted file mode 100644 index ed214af43..000000000 --- a/demo/includes/modules/text-field/includes/theme.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - - - - - - - - - - -
diff --git a/demo/includes/modules/text-field/js/demo-text-field_controller.js b/demo/includes/modules/text-field/js/demo-text-field_controller.js deleted file mode 100644 index deaaa7a1a..000000000 --- a/demo/includes/modules/text-field/js/demo-text-field_controller.js +++ /dev/null @@ -1,61 +0,0 @@ -(function() -{ - 'use strict'; - - angular - .module('Controllers') - .controller('DemoTextFieldController', DemoTextFieldController); - - function DemoTextFieldController() - { - var vm = this; - - vm.emailValidation = emailValidation; - - vm.textFields = { - floating: - { - company: 'LumApps', - firstName: 'Matthias', - lastName: 'Manoukian', - empty: '' - }, - fixed: - { - name: 'Matthias Manoukian', - phone: '03 45 68 93 20', - email: 'hello@lumapps.com', - location: 'Tassin-la-Demi-Lune', - emptyName: undefined, - emptyPhone: undefined, - emptyEmail: undefined, - emptyLocation: undefined - }, - textarea: - { - description: undefined - }, - states: - { - company: 'LumApps', - email: 'hello@lumapps.com', - firstName: 'Matthias', - invalidEmail: 'invalid-email', - repeatedEmail: 'hello@lumapps.com' - }, - theme: - { - company: 'LumApps', - name: 'Matthias Manoukian', - phone: '03 45 68 93 20' - } - }; - - //////////// - - function emailValidation(_email) - { - return /^[0-9a-zA-Z]+([0-9a-zA-Z]*[-._+])*[0-9a-zA-Z]+@[0-9a-zA-Z]+([-.][0-9a-zA-Z]+)*([0-9a-zA-Z]*[.])[a-zA-Z]{2,6}$/.test(_email); - } - } -})(); diff --git a/demo/includes/modules/text-field/text-field.html b/demo/includes/modules/text-field/text-field.html deleted file mode 100644 index d61870e87..000000000 --- a/demo/includes/modules/text-field/text-field.html +++ /dev/null @@ -1,87 +0,0 @@ - -
-

Text field

- -

- lx-text-field is directive that create an input text element or a textarea element according to the transcluded element. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-allow-clearbooleanfalseAdd a button to clear the input model.
lx-errorbooleanSet red error style.
lx-has-placeholderbooleanfalse - Indicates if the transcluded text input has a placeholder. The label of the field will then always be on top of the field.
- This is incompatible with the 'lx-fixed-label' parameter and the label will always stay on top, no matter what. -
lx-fixed-labelbooleanfalseInput label will act like a classic placeholder.
lx-focusbooleanfalseIndicates if the input should be focused or not.
lx-iconstringAdd an icon next to the input. Input must have a fixed label in this case.
lx-label*stringThe input label displayed as a placeholder.
lx-themestringlightSet this option to dark if inputs are displayed into a dark box. Options: light, dark
lx-validbooleanSet green valid style.
- -
diff --git a/demo/includes/modules/toolbar/includes/basic.html b/demo/includes/modules/toolbar/includes/basic.html deleted file mode 100644 index 44fde0ec9..000000000 --- a/demo/includes/modules/toolbar/includes/basic.html +++ /dev/null @@ -1,30 +0,0 @@ -
-
- -
- - Lorem Ipsum - -
- - - - - - - - - - - - - -
-
\ No newline at end of file diff --git a/demo/includes/modules/toolbar/toolbar.html b/demo/includes/modules/toolbar/toolbar.html deleted file mode 100644 index 88c82e9e3..000000000 --- a/demo/includes/modules/toolbar/toolbar.html +++ /dev/null @@ -1,9 +0,0 @@ -
-

Toolbar

- -

- A CSS toolbar component with three areas is available. -

- - -
\ No newline at end of file diff --git a/demo/includes/modules/tooltip/includes/basic.html b/demo/includes/modules/tooltip/includes/basic.html deleted file mode 100644 index 20f417609..000000000 --- a/demo/includes/modules/tooltip/includes/basic.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - - - -
\ No newline at end of file diff --git a/demo/includes/modules/tooltip/tooltip.html b/demo/includes/modules/tooltip/tooltip.html deleted file mode 100644 index 5d606fd42..000000000 --- a/demo/includes/modules/tooltip/tooltip.html +++ /dev/null @@ -1,37 +0,0 @@ -
-

Tooltip

- -

- lx-tooltip is a directive that create a tooltip on a target element. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeDefaultDescription
lx-tooltipstringThe tooltip content.
lx-tooltip-positionstringtopThe tooltip position relative to the target element.
- -
\ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 0505048ac..43b5de078 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,37 +14,11 @@ - -
- +
-
-
-
-
-
- -
- Made by - - - LumApps - -
- -
- -
- - -
- +
+
+
@@ -56,20 +30,22 @@ - + - + + + + + - - - - - + + +