From a67478c4bf2c3e3b11afa6549f5ced989383f692 Mon Sep 17 00:00:00 2001 From: Matthias Manoukian Date: Wed, 4 Sep 2019 13:34:53 +0200 Subject: [PATCH] chore(demo): add checkbox/chip/dropdown/list/select demo --- demo/app.js | 50 +++++ demo/components/checkbox/controller.js | 34 ++++ demo/components/checkbox/demo.html | 2 + demo/components/checkbox/doc.md | 5 + .../components/checkbox/partials/default.html | 31 ++++ demo/components/chip/controller.js | 115 ++++++++++++ demo/components/chip/demo.html | 2 + demo/components/chip/doc.md | 34 ++++ demo/components/chip/partials/choice.html | 49 +++++ demo/components/chip/partials/default.html | 15 ++ .../components/chip/partials/dismissible.html | 25 +++ demo/components/chip/partials/filter.html | 21 +++ demo/components/chip/partials/small.html | 25 +++ demo/components/dropdown/controller.js | 95 ++++++++++ demo/components/dropdown/demo.html | 2 + demo/components/dropdown/doc.md | 10 + .../components/dropdown/partials/default.html | 103 +++++++++++ demo/components/dropdown/partials/target.html | 41 +++++ demo/components/list/controller.js | 35 ++++ demo/components/list/demo.html | 2 + demo/components/list/doc.md | 19 ++ demo/components/list/partials/big.html | 57 ++++++ demo/components/list/partials/huge.html | 77 ++++++++ demo/components/list/partials/regular.html | 51 ++++++ demo/components/list/partials/tiny.html | 47 +++++ demo/components/select/controller.js | 172 ++++++++++++++++++ demo/components/select/demo.html | 2 + demo/components/select/doc.md | 25 +++ .../select/partials/multi-select-search.html | 19 ++ .../select/partials/multi-select.html | 11 ++ .../select/partials/single-select.html | 11 ++ .../select/partials/validation-invalid.html | 12 ++ .../select/partials/validation-valid.html | 12 ++ webpack/webpack.config.js | 19 ++ 34 files changed, 1230 insertions(+) create mode 100644 demo/components/checkbox/controller.js create mode 100644 demo/components/checkbox/demo.html create mode 100644 demo/components/checkbox/doc.md create mode 100644 demo/components/checkbox/partials/default.html create mode 100644 demo/components/chip/controller.js create mode 100644 demo/components/chip/demo.html create mode 100644 demo/components/chip/doc.md create mode 100644 demo/components/chip/partials/choice.html create mode 100644 demo/components/chip/partials/default.html create mode 100644 demo/components/chip/partials/dismissible.html create mode 100644 demo/components/chip/partials/filter.html create mode 100644 demo/components/chip/partials/small.html create mode 100644 demo/components/dropdown/controller.js create mode 100644 demo/components/dropdown/demo.html create mode 100644 demo/components/dropdown/doc.md create mode 100644 demo/components/dropdown/partials/default.html create mode 100644 demo/components/dropdown/partials/target.html create mode 100644 demo/components/list/controller.js create mode 100644 demo/components/list/demo.html create mode 100644 demo/components/list/doc.md create mode 100644 demo/components/list/partials/big.html create mode 100644 demo/components/list/partials/huge.html create mode 100644 demo/components/list/partials/regular.html create mode 100644 demo/components/list/partials/tiny.html create mode 100644 demo/components/select/controller.js create mode 100644 demo/components/select/demo.html create mode 100644 demo/components/select/doc.md create mode 100644 demo/components/select/partials/multi-select-search.html create mode 100644 demo/components/select/partials/multi-select.html create mode 100644 demo/components/select/partials/single-select.html create mode 100644 demo/components/select/partials/validation-invalid.html create mode 100644 demo/components/select/partials/validation-valid.html diff --git a/demo/app.js b/demo/app.js index e027f3393..e45813ec9 100644 --- a/demo/app.js +++ b/demo/app.js @@ -52,6 +52,56 @@ function AppDefaultConfig($locationProvider, $stateProvider, markedProvider) { 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'), + }, + }, + }) + .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'), + }, + }, }); } 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/webpack/webpack.config.js b/webpack/webpack.config.js index dc179f1f0..be999c13b 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -77,81 +77,100 @@ const baseConfig = { }, }, { + include: [/modules/u], test: /\/checkbox\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.checkbox&relativeTo=modules/checkbox/views/', }, { + include: [/modules/u], test: /\/chip\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.chip&relativeTo=modules/chip/views/', }, { + include: [/modules/u], test: /\/data-table\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.data-table&relativeTo=modules/data-table/views/', }, { + include: [/modules/u], test: /\/date-picker\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.date-picker&relativeTo=modules/date-picker/views/', }, { + include: [/modules/u], test: /\/dropdown\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.dropdown&relativeTo=modules/dropdown/views/', }, { + include: [/modules/u], test: /\/fab\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.fab&relativeTo=modules/fab/views/', }, { + include: [/modules/u], test: /\/file-input\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.file-input&relativeTo=modules/file-input/views/', }, { + include: [/modules/u], test: /\/icon\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.icon&relativeTo=modules/icon/views/', }, { + include: [/modules/u], test: /\/list\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.list&relativeTo=modules/list/views/', }, { + include: [/modules/u], test: /\/popover\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.popover&relativeTo=modules/popover/views/', }, { + include: [/modules/u], test: /\/progress\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.progress&relativeTo=modules/progress/views/', }, { + include: [/modules/u], test: /\/radio-button\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.radio-button&relativeTo=modules/radio-button/views/', }, { + include: [/modules/u], test: /\/search-filter\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.search-filter&relativeTo=modules/search-filter/views/', }, { + include: [/modules/u], test: /\/select\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.select&relativeTo=modules/select/views/', }, { + include: [/modules/u], test: /\/side-navigation\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.side-navigation&relativeTo=modules/side-navigation/views/', }, { + include: [/modules/u], test: /\/stepper\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.stepper&relativeTo=modules/stepper/views/', }, { + include: [/modules/u], test: /\/switch\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.switch&relativeTo=modules/switch/views/', }, { + include: [/modules/u], test: /\/tabs\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.tabs&relativeTo=modules/tabs/views/', }, { + include: [/modules/u], test: /\/text-field\/.*\.html$/, loader: 'angular-templatecache-loader-2?module=lumx.text-field&relativeTo=modules/text-field/views/', },