";
-
-var UxRadio = /** @class */ (function () {
- function UxRadio(element, styleEngine) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.disabled = false;
- this.effect = 'ripple';
- this.checked = false;
- this.ripple = null;
- Object.setPrototypeOf(element, uxRadioElementProto);
+ /*! *****************************************************************************
+ Copyright (c) Microsoft Corporation. All rights reserved.
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+ this file except in compliance with the License. You may obtain a copy of the
+ License at http://www.apache.org/licenses/LICENSE-2.0
+
+ THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+ WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+ MERCHANTABLITY OR NON-INFRINGEMENT.
+
+ See the Apache Version 2.0 License for specific language governing permissions
+ and limitations under the License.
+ ***************************************************************************** */
+
+ function __decorate(decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
}
- Object.defineProperty(UxRadio.prototype, "isDisabled", {
- get: function () {
- return core.normalizeBooleanAttribute('disabled', this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- UxRadio.prototype.bind = function () {
- var element = this.element;
- var radio = this.radio;
- if (element.hasAttribute('id')) {
- var id = element.id;
- if (id != null) {
- radio.setAttribute('id', id);
- element.removeAttribute('id');
- }
+
+ var UX_RADIO_VIEW = "
";
+
+ var UxRadio = /** @class */ (function () {
+ function UxRadio(element, styleEngine) {
+ this.element = element;
+ this.styleEngine = styleEngine;
+ this.disabled = false;
+ this.effect = 'ripple';
+ this.checked = false;
+ this.ripple = null;
+ Object.setPrototypeOf(element, uxRadioElementProto);
}
- if (element.hasAttribute('tabindex')) {
- var tabIndex = element.getAttribute('tabindex');
- if (tabIndex != null) {
- radio.setAttribute('tabindex', tabIndex);
- element.removeAttribute('tabindex');
+ Object.defineProperty(UxRadio.prototype, "isDisabled", {
+ get: function () {
+ return core.normalizeBooleanAttribute('disabled', this.disabled);
+ },
+ enumerable: true,
+ configurable: true
+ });
+ UxRadio.prototype.bind = function () {
+ var element = this.element;
+ var radio = this.radio;
+ if (element.hasAttribute('id')) {
+ var id = element.id;
+ if (id != null) {
+ radio.setAttribute('id', id);
+ element.removeAttribute('id');
+ }
}
- }
- if (element.hasAttribute('checked')) {
- element.checked = true;
- }
- if (this.checked) {
- radio.checked = true;
- }
- this.themeChanged(this.theme);
- };
- UxRadio.prototype.attached = function () {
- this.radio.addEventListener('change', stopEvent);
- };
- UxRadio.prototype.detached = function () {
- this.radio.removeEventListener('change', stopEvent);
- };
- UxRadio.prototype.getChecked = function () {
- return this.checked;
- };
- UxRadio.prototype.setChecked = function (value) {
- var oldValue = this.checked;
- var newValue = value;
- if (newValue !== oldValue) {
- this.checked = newValue;
- this.ignoreValueChanges = true;
- this.value = newValue;
- if (this.radio) {
- this.radio.checked = !!newValue;
+ if (element.hasAttribute('tabindex')) {
+ var tabIndex = element.getAttribute('tabindex');
+ if (tabIndex != null) {
+ radio.setAttribute('tabindex', tabIndex);
+ element.removeAttribute('tabindex');
+ }
}
- this.ignoreValueChanges = false;
- this.element.dispatchEvent(aureliaFramework.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxRadio.prototype.themeChanged = function (newValue) {
- if (newValue != null && newValue.themeKey == null) {
- newValue.themeKey = 'radio';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxRadio.prototype.valueChanged = function (value) {
- if (this.ignoreValueChanges) {
- return;
- }
- this.setChecked(value);
- };
- UxRadio.prototype.onMouseDown = function (e) {
- var _this = this;
- if (e.button !== 0 || this.isDisabled) {
- return;
- }
- if (this.element.classList.contains('ripple')) {
- if (this.ripple === null) {
- this.ripple = new core.PaperRipple();
- var container = this.element.querySelector('.ripplecontainer');
- if (container != null) {
- container.appendChild(this.ripple.$);
+ if (element.hasAttribute('checked')) {
+ element.checked = true;
+ }
+ if (this.checked) {
+ radio.checked = true;
+ }
+ this.themeChanged(this.theme);
+ };
+ UxRadio.prototype.attached = function () {
+ this.radio.addEventListener('change', stopEvent);
+ };
+ UxRadio.prototype.detached = function () {
+ this.radio.removeEventListener('change', stopEvent);
+ };
+ UxRadio.prototype.getChecked = function () {
+ return this.checked;
+ };
+ UxRadio.prototype.setChecked = function (value) {
+ var oldValue = this.checked;
+ var newValue = value;
+ if (newValue !== oldValue) {
+ this.checked = newValue;
+ this.ignoreValueChanges = true;
+ this.value = newValue;
+ if (this.radio) {
+ this.radio.checked = !!newValue;
}
+ this.ignoreValueChanges = false;
+ this.element.dispatchEvent(aureliaFramework.DOM.createCustomEvent('change', { bubbles: true }));
}
- this.ripple.center = true;
- this.ripple.round = true;
- this.ripple.downAction(e);
- var winEvents_1 = new aureliaFramework.ElementEvents(window);
- var upAction = function () {
- _this.ripple.upAction();
- winEvents_1.disposeAll();
- };
- winEvents_1.subscribe('blur', upAction);
- winEvents_1.subscribe('mouseup', upAction, true);
- }
- e.preventDefault();
- };
- __decorate([
- aureliaTemplating.bindable
- ], UxRadio.prototype, "disabled", void 0);
- __decorate([
- aureliaTemplating.bindable
- ], UxRadio.prototype, "effect", void 0);
- __decorate([
- aureliaTemplating.bindable
- ], UxRadio.prototype, "id", void 0);
- __decorate([
- aureliaTemplating.bindable
- ], UxRadio.prototype, "theme", void 0);
- __decorate([
- aureliaBinding.observable({ initializer: function () { return false; } })
- ], UxRadio.prototype, "value", void 0);
- __decorate([
- aureliaBinding.computedFrom('disabled')
- ], UxRadio.prototype, "isDisabled", null);
- UxRadio = __decorate([
- aureliaDependencyInjection.inject(Element, core.StyleEngine),
- aureliaTemplating.customElement('ux-radio'),
- aureliaTemplating.inlineView(UX_RADIO_VIEW)
- ], UxRadio);
- return UxRadio;
-}());
-function stopEvent(e) {
- e.stopPropagation();
-}
-var getVm = function (_) { return _.au.controller.viewModel; };
-var uxRadioElementProto = Object.create(HTMLElement.prototype, {
- type: {
- value: 'radio',
- },
- checked: {
- get: function () {
- return getVm(this).getChecked();
+ };
+ UxRadio.prototype.themeChanged = function (newValue) {
+ if (newValue != null && newValue.themeKey == null) {
+ newValue.themeKey = 'radio';
+ }
+ this.styleEngine.applyTheme(newValue, this.element);
+ };
+ UxRadio.prototype.valueChanged = function (value) {
+ if (this.ignoreValueChanges) {
+ return;
+ }
+ this.setChecked(value);
+ };
+ UxRadio.prototype.onMouseDown = function (e) {
+ var _this = this;
+ if (e.button !== 0 || this.isDisabled) {
+ return;
+ }
+ if (this.element.classList.contains('ripple')) {
+ if (this.ripple === null) {
+ this.ripple = new core.PaperRipple();
+ var container = this.element.querySelector('.ripplecontainer');
+ if (container != null) {
+ container.appendChild(this.ripple.$);
+ }
+ }
+ this.ripple.center = true;
+ this.ripple.round = true;
+ this.ripple.downAction(e);
+ var winEvents_1 = new aureliaFramework.ElementEvents(window);
+ var upAction = function () {
+ _this.ripple.upAction();
+ winEvents_1.disposeAll();
+ };
+ winEvents_1.subscribe('blur', upAction);
+ winEvents_1.subscribe('mouseup', upAction, true);
+ }
+ e.preventDefault();
+ };
+ __decorate([
+ aureliaTemplating.bindable
+ ], UxRadio.prototype, "disabled", void 0);
+ __decorate([
+ aureliaTemplating.bindable
+ ], UxRadio.prototype, "effect", void 0);
+ __decorate([
+ aureliaTemplating.bindable
+ ], UxRadio.prototype, "id", void 0);
+ __decorate([
+ aureliaTemplating.bindable
+ ], UxRadio.prototype, "theme", void 0);
+ __decorate([
+ aureliaBinding.observable({ initializer: function () { return false; } })
+ ], UxRadio.prototype, "value", void 0);
+ __decorate([
+ aureliaBinding.computedFrom('disabled')
+ ], UxRadio.prototype, "isDisabled", null);
+ UxRadio = __decorate([
+ aureliaDependencyInjection.inject(Element, core.StyleEngine),
+ aureliaTemplating.customElement('ux-radio'),
+ aureliaTemplating.inlineView(UX_RADIO_VIEW)
+ ], UxRadio);
+ return UxRadio;
+ }());
+ function stopEvent(e) {
+ e.stopPropagation();
+ }
+ var getVm = function (_) { return _.au.controller.viewModel; };
+ var uxRadioElementProto = Object.create(HTMLElement.prototype, {
+ type: {
+ value: 'radio',
},
- set: function (value) {
- getVm(this).setChecked(value);
+ checked: {
+ get: function () {
+ return getVm(this).getChecked();
+ },
+ set: function (value) {
+ getVm(this).setChecked(value);
+ }
}
- }
-});
+ });
-var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}"
+ var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}";
-var UxRadioTheme = /** @class */ (function () {
- function UxRadioTheme() {
- this.themeKey = 'radio';
- }
- return UxRadioTheme;
-}());
+ var UxRadioTheme = /** @class */ (function () {
+ function UxRadioTheme() {
+ this.themeKey = 'radio';
+ }
+ return UxRadioTheme;
+ }());
-function configure(config) {
- aureliaFramework.DOM.injectStyles(css, undefined, undefined, 'ux-radio-css');
- config.container.get(core.AureliaUX).registerUxElementConfig(uxRadioConfig);
- config.globalResources(UxRadio);
-}
-var uxRadioConfig = {
- tagName: 'ux-radio',
- properties: {
- checked: {
- defaultBindingMode: aureliaFramework.bindingMode.twoWay,
- getObserver: function (element, _, observerLocator) {
- return new aureliaBinding.CheckedObserver(element, new aureliaBinding.EventSubscriber(['change']), observerLocator);
+ function configure(config) {
+ aureliaFramework.DOM.injectStyles(css, undefined, undefined, 'ux-radio-css');
+ config.container.get(core.AureliaUX).registerUxElementConfig(uxRadioConfig);
+ config.globalResources(UxRadio);
+ }
+ var uxRadioConfig = {
+ tagName: 'ux-radio',
+ properties: {
+ checked: {
+ defaultBindingMode: aureliaFramework.bindingMode.twoWay,
+ getObserver: function (element, _, observerLocator) {
+ return new aureliaBinding.CheckedObserver(element, new aureliaBinding.EventSubscriber(['change']), observerLocator);
+ }
}
}
- }
-};
+ };
-exports.configure = configure;
-exports.UxRadioTheme = UxRadioTheme;
-exports.UxRadio = UxRadio;
+ exports.configure = configure;
+ exports.UxRadioTheme = UxRadioTheme;
+ exports.UxRadio = UxRadio;
-Object.defineProperty(exports, '__esModule', { value: true });
+ Object.defineProperty(exports, '__esModule', { value: true });
});
diff --git a/packages/radio/dist/amd/ux-radio.js b/packages/radio/dist/amd/ux-radio.js
deleted file mode 100644
index c2145e66..00000000
--- a/packages/radio/dist/amd/ux-radio.js
+++ /dev/null
@@ -1,155 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-define(["require", "exports", "aurelia-templating", "aurelia-binding", "aurelia-dependency-injection", "@aurelia-ux/core", "aurelia-framework"], function (require, exports, aurelia_templating_1, aurelia_binding_1, aurelia_dependency_injection_1, core_1, aurelia_framework_1) {
- "use strict";
- Object.defineProperty(exports, "__esModule", { value: true });
- var UxRadio = /** @class */ (function () {
- function UxRadio(element, styleEngine) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.disabled = false;
- this.effect = 'ripple';
- this.checked = false;
- this.ripple = null;
- Object.setPrototypeOf(element, uxRadioElementProto);
- }
- Object.defineProperty(UxRadio.prototype, "isDisabled", {
- get: function () {
- return core_1.normalizeBooleanAttribute('disabled', this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- UxRadio.prototype.bind = function () {
- var element = this.element;
- var radio = this.radio;
- if (element.hasAttribute('id')) {
- var id = element.id;
- if (id != null) {
- radio.setAttribute('id', id);
- element.removeAttribute('id');
- }
- }
- if (element.hasAttribute('tabindex')) {
- var tabIndex = element.getAttribute('tabindex');
- if (tabIndex != null) {
- radio.setAttribute('tabindex', tabIndex);
- element.removeAttribute('tabindex');
- }
- }
- if (element.hasAttribute('checked')) {
- element.checked = true;
- }
- if (this.checked) {
- radio.checked = true;
- }
- this.themeChanged(this.theme);
- };
- UxRadio.prototype.attached = function () {
- this.radio.addEventListener('change', stopEvent);
- };
- UxRadio.prototype.detached = function () {
- this.radio.removeEventListener('change', stopEvent);
- };
- UxRadio.prototype.getChecked = function () {
- return this.checked;
- };
- UxRadio.prototype.setChecked = function (value) {
- var oldValue = this.checked;
- var newValue = value;
- if (newValue !== oldValue) {
- this.checked = newValue;
- this.ignoreValueChanges = true;
- this.value = newValue;
- if (this.radio) {
- this.radio.checked = !!newValue;
- }
- this.ignoreValueChanges = false;
- this.element.dispatchEvent(aurelia_framework_1.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxRadio.prototype.themeChanged = function (newValue) {
- if (newValue != null && newValue.themeKey == null) {
- newValue.themeKey = 'radio';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxRadio.prototype.valueChanged = function (value) {
- if (this.ignoreValueChanges) {
- return;
- }
- this.setChecked(value);
- };
- UxRadio.prototype.onMouseDown = function (e) {
- var _this = this;
- if (e.button !== 0 || this.isDisabled) {
- return;
- }
- if (this.element.classList.contains('ripple')) {
- if (this.ripple === null) {
- this.ripple = new core_1.PaperRipple();
- var container = this.element.querySelector('.ripplecontainer');
- if (container != null) {
- container.appendChild(this.ripple.$);
- }
- }
- this.ripple.center = true;
- this.ripple.round = true;
- this.ripple.downAction(e);
- var winEvents_1 = new aurelia_framework_1.ElementEvents(window);
- var upAction = function () {
- _this.ripple.upAction();
- winEvents_1.disposeAll();
- };
- winEvents_1.subscribe('blur', upAction);
- winEvents_1.subscribe('mouseup', upAction, true);
- }
- e.preventDefault();
- };
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "disabled", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "effect", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "id", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "theme", void 0);
- __decorate([
- aurelia_binding_1.observable({ initializer: function () { return false; } })
- ], UxRadio.prototype, "value", void 0);
- __decorate([
- aurelia_binding_1.computedFrom('disabled')
- ], UxRadio.prototype, "isDisabled", null);
- UxRadio = __decorate([
- aurelia_dependency_injection_1.inject(Element, core_1.StyleEngine),
- aurelia_templating_1.customElement('ux-radio')
- ], UxRadio);
- return UxRadio;
- }());
- exports.UxRadio = UxRadio;
- function stopEvent(e) {
- e.stopPropagation();
- }
- var getVm = function (_) { return _.au.controller.viewModel; };
- var uxRadioElementProto = Object.create(HTMLElement.prototype, {
- type: {
- value: 'radio',
- },
- checked: {
- get: function () {
- return getVm(this).getChecked();
- },
- set: function (value) {
- getVm(this).setChecked(value);
- }
- }
- });
-});
diff --git a/packages/radio/dist/commonjs/index.js b/packages/radio/dist/commonjs/index.js
index bddba2a4..0db0f578 100644
--- a/packages/radio/dist/commonjs/index.js
+++ b/packages/radio/dist/commonjs/index.js
@@ -22,13 +22,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
-/* global Reflect, Promise */
-
-
-
-
-
-
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -185,7 +178,7 @@ var uxRadioElementProto = Object.create(HTMLElement.prototype, {
}
});
-var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}"
+var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}";
var UxRadioTheme = /** @class */ (function () {
function UxRadioTheme() {
diff --git a/packages/radio/dist/commonjs/ux-radio.js b/packages/radio/dist/commonjs/ux-radio.js
deleted file mode 100644
index 1c1b4594..00000000
--- a/packages/radio/dist/commonjs/ux-radio.js
+++ /dev/null
@@ -1,158 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var aurelia_templating_1 = require("aurelia-templating");
-var aurelia_binding_1 = require("aurelia-binding");
-var aurelia_dependency_injection_1 = require("aurelia-dependency-injection");
-var core_1 = require("@aurelia-ux/core");
-var aurelia_framework_1 = require("aurelia-framework");
-var UxRadio = /** @class */ (function () {
- function UxRadio(element, styleEngine) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.disabled = false;
- this.effect = 'ripple';
- this.checked = false;
- this.ripple = null;
- Object.setPrototypeOf(element, uxRadioElementProto);
- }
- Object.defineProperty(UxRadio.prototype, "isDisabled", {
- get: function () {
- return core_1.normalizeBooleanAttribute('disabled', this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- UxRadio.prototype.bind = function () {
- var element = this.element;
- var radio = this.radio;
- if (element.hasAttribute('id')) {
- var id = element.id;
- if (id != null) {
- radio.setAttribute('id', id);
- element.removeAttribute('id');
- }
- }
- if (element.hasAttribute('tabindex')) {
- var tabIndex = element.getAttribute('tabindex');
- if (tabIndex != null) {
- radio.setAttribute('tabindex', tabIndex);
- element.removeAttribute('tabindex');
- }
- }
- if (element.hasAttribute('checked')) {
- element.checked = true;
- }
- if (this.checked) {
- radio.checked = true;
- }
- this.themeChanged(this.theme);
- };
- UxRadio.prototype.attached = function () {
- this.radio.addEventListener('change', stopEvent);
- };
- UxRadio.prototype.detached = function () {
- this.radio.removeEventListener('change', stopEvent);
- };
- UxRadio.prototype.getChecked = function () {
- return this.checked;
- };
- UxRadio.prototype.setChecked = function (value) {
- var oldValue = this.checked;
- var newValue = value;
- if (newValue !== oldValue) {
- this.checked = newValue;
- this.ignoreValueChanges = true;
- this.value = newValue;
- if (this.radio) {
- this.radio.checked = !!newValue;
- }
- this.ignoreValueChanges = false;
- this.element.dispatchEvent(aurelia_framework_1.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxRadio.prototype.themeChanged = function (newValue) {
- if (newValue != null && newValue.themeKey == null) {
- newValue.themeKey = 'radio';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxRadio.prototype.valueChanged = function (value) {
- if (this.ignoreValueChanges) {
- return;
- }
- this.setChecked(value);
- };
- UxRadio.prototype.onMouseDown = function (e) {
- var _this = this;
- if (e.button !== 0 || this.isDisabled) {
- return;
- }
- if (this.element.classList.contains('ripple')) {
- if (this.ripple === null) {
- this.ripple = new core_1.PaperRipple();
- var container = this.element.querySelector('.ripplecontainer');
- if (container != null) {
- container.appendChild(this.ripple.$);
- }
- }
- this.ripple.center = true;
- this.ripple.round = true;
- this.ripple.downAction(e);
- var winEvents_1 = new aurelia_framework_1.ElementEvents(window);
- var upAction = function () {
- _this.ripple.upAction();
- winEvents_1.disposeAll();
- };
- winEvents_1.subscribe('blur', upAction);
- winEvents_1.subscribe('mouseup', upAction, true);
- }
- e.preventDefault();
- };
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "disabled", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "effect", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "id", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "theme", void 0);
- __decorate([
- aurelia_binding_1.observable({ initializer: function () { return false; } })
- ], UxRadio.prototype, "value", void 0);
- __decorate([
- aurelia_binding_1.computedFrom('disabled')
- ], UxRadio.prototype, "isDisabled", null);
- UxRadio = __decorate([
- aurelia_dependency_injection_1.inject(Element, core_1.StyleEngine),
- aurelia_templating_1.customElement('ux-radio')
- ], UxRadio);
- return UxRadio;
-}());
-exports.UxRadio = UxRadio;
-function stopEvent(e) {
- e.stopPropagation();
-}
-var getVm = function (_) { return _.au.controller.viewModel; };
-var uxRadioElementProto = Object.create(HTMLElement.prototype, {
- type: {
- value: 'radio',
- },
- checked: {
- get: function () {
- return getVm(this).getChecked();
- },
- set: function (value) {
- getVm(this).setChecked(value);
- }
- }
-});
diff --git a/packages/radio/dist/es2015/index.js b/packages/radio/dist/es2015/index.js
index 47e45e56..0709e8c2 100644
--- a/packages/radio/dist/es2015/index.js
+++ b/packages/radio/dist/es2015/index.js
@@ -18,13 +18,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
-/* global Reflect, Promise */
-
-
-
-
-
-
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -175,7 +168,7 @@ const uxRadioElementProto = Object.create(HTMLElement.prototype, {
}
});
-var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}"
+var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}";
class UxRadioTheme {
constructor() {
diff --git a/packages/radio/dist/es2015/ux-radio.js b/packages/radio/dist/es2015/ux-radio.js
deleted file mode 100644
index fdcb139d..00000000
--- a/packages/radio/dist/es2015/ux-radio.js
+++ /dev/null
@@ -1,150 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, bindable } from 'aurelia-templating';
-import { computedFrom, observable } from 'aurelia-binding';
-import { inject } from 'aurelia-dependency-injection';
-import { StyleEngine, PaperRipple, normalizeBooleanAttribute } from '@aurelia-ux/core';
-import { ElementEvents, DOM } from 'aurelia-framework';
-let UxRadio = class UxRadio {
- constructor(element, styleEngine) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.disabled = false;
- this.effect = 'ripple';
- this.checked = false;
- this.ripple = null;
- Object.setPrototypeOf(element, uxRadioElementProto);
- }
- get isDisabled() {
- return normalizeBooleanAttribute('disabled', this.disabled);
- }
- bind() {
- const element = this.element;
- const radio = this.radio;
- if (element.hasAttribute('id')) {
- const id = element.id;
- if (id != null) {
- radio.setAttribute('id', id);
- element.removeAttribute('id');
- }
- }
- if (element.hasAttribute('tabindex')) {
- const tabIndex = element.getAttribute('tabindex');
- if (tabIndex != null) {
- radio.setAttribute('tabindex', tabIndex);
- element.removeAttribute('tabindex');
- }
- }
- if (element.hasAttribute('checked')) {
- element.checked = true;
- }
- if (this.checked) {
- radio.checked = true;
- }
- this.themeChanged(this.theme);
- }
- attached() {
- this.radio.addEventListener('change', stopEvent);
- }
- detached() {
- this.radio.removeEventListener('change', stopEvent);
- }
- getChecked() {
- return this.checked;
- }
- setChecked(value) {
- const oldValue = this.checked;
- const newValue = value;
- if (newValue !== oldValue) {
- this.checked = newValue;
- this.ignoreValueChanges = true;
- this.value = newValue;
- if (this.radio) {
- this.radio.checked = !!newValue;
- }
- this.ignoreValueChanges = false;
- this.element.dispatchEvent(DOM.createCustomEvent('change', { bubbles: true }));
- }
- }
- themeChanged(newValue) {
- if (newValue != null && newValue.themeKey == null) {
- newValue.themeKey = 'radio';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- }
- valueChanged(value) {
- if (this.ignoreValueChanges) {
- return;
- }
- this.setChecked(value);
- }
- onMouseDown(e) {
- if (e.button !== 0 || this.isDisabled) {
- return;
- }
- if (this.element.classList.contains('ripple')) {
- if (this.ripple === null) {
- this.ripple = new PaperRipple();
- const container = this.element.querySelector('.ripplecontainer');
- if (container != null) {
- container.appendChild(this.ripple.$);
- }
- }
- this.ripple.center = true;
- this.ripple.round = true;
- this.ripple.downAction(e);
- const winEvents = new ElementEvents(window);
- const upAction = () => {
- this.ripple.upAction();
- winEvents.disposeAll();
- };
- winEvents.subscribe('blur', upAction);
- winEvents.subscribe('mouseup', upAction, true);
- }
- e.preventDefault();
- }
-};
-__decorate([
- bindable
-], UxRadio.prototype, "disabled", void 0);
-__decorate([
- bindable
-], UxRadio.prototype, "effect", void 0);
-__decorate([
- bindable
-], UxRadio.prototype, "id", void 0);
-__decorate([
- bindable
-], UxRadio.prototype, "theme", void 0);
-__decorate([
- observable({ initializer: () => false })
-], UxRadio.prototype, "value", void 0);
-__decorate([
- computedFrom('disabled')
-], UxRadio.prototype, "isDisabled", null);
-UxRadio = __decorate([
- inject(Element, StyleEngine),
- customElement('ux-radio')
-], UxRadio);
-export { UxRadio };
-function stopEvent(e) {
- e.stopPropagation();
-}
-const getVm = (_) => _.au.controller.viewModel;
-const uxRadioElementProto = Object.create(HTMLElement.prototype, {
- type: {
- value: 'radio',
- },
- checked: {
- get() {
- return getVm(this).getChecked();
- },
- set(value) {
- getVm(this).setChecked(value);
- }
- }
-});
diff --git a/packages/radio/dist/native-modules/index.js b/packages/radio/dist/native-modules/index.js
index 0c81ede4..2d512b6b 100644
--- a/packages/radio/dist/native-modules/index.js
+++ b/packages/radio/dist/native-modules/index.js
@@ -18,13 +18,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
-/* global Reflect, Promise */
-
-
-
-
-
-
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -181,7 +174,7 @@ var uxRadioElementProto = Object.create(HTMLElement.prototype, {
}
});
-var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}"
+var css = "ux-radio{display:inline-block;outline:0;height:24px;width:24px;box-sizing:border-box;position:relative}ux-radio>input{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}ux-radio>input:disabled{cursor:default}ux-radio>.radio{width:24px;height:24px;border:solid 2px #455a64;border:var(--ux-theme--checkbox-border, solid 2px #455A64);border-radius:50%;display:inline-flex;box-sizing:border-box;cursor:pointer;align-items:center;justify-content:center}ux-radio input:hover:not(:disabled)~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio input:checked~.radio{border:solid 2px #ff4081;border:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border:var(--ux-theme--radio-hover-border, solid 2px var(--ux-design--accent, #FF4081))}ux-radio>.radio>.background-box{width:100%;height:100%;background-color:#ff4081;background-color:var(--ux-theme--radio-checked-background, var(--ux-design--accent, #FF4081));border-radius:50%;transform:scale3d(0,0,0);transition:150ms}ux-radio input:checked~.radio>.background-box{transform:scale3d(.75,.75,.75)}ux-radio>.radio>.background-box>svg{fill:#fff;fill:var(--ux-theme--radio-checkmark-color, #FFF)}ux-radio.disabled{pointer-events:none;cursor:default}ux-radio input:disabled~.radio:hover{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:disabled~.radio{border:solid 2px #9e9e9e;border:var(--ux-theme--radio-disabled-border, solid 2px #9E9E9E)}ux-radio input:checked:disabled~.radio>.background-box{background-color:#9e9e9e;background-color:var(--ux-theme--radio-disabled-background, #9E9E9E)}ux-radio input:disabled~.radio>.background-box::after{border-color:#e0e0e0;border-color:var(--ux-theme--radio-disabled-foreground, #E0E0E0)}ux-radio .ripplecontainer{position:relative;width:0;height:0}ux-radio .ripplecontainer>.paper-ripple{top:auto;left:auto;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%}ux-radio .ripplecontainer>.ripple{position:absolute;right:-36px;bottom:-36px;width:50px;height:50px;border-radius:50%;pointer-events:none;background-color:rgba(0,0,0,.22);transition:transform 100ms ease-in-out;transform:scale3d(0,0,0)}ux-radio input:focus~.ripplecontainer>.ripple{transform:scale3d(1,1,1)}ux-radio input:disabled:focus~.ripplecontainer>.ripple{transform:scale3d(0,0,0)}";
var UxRadioTheme = /** @class */ (function () {
function UxRadioTheme() {
diff --git a/packages/radio/dist/native-modules/ux-radio.js b/packages/radio/dist/native-modules/ux-radio.js
deleted file mode 100644
index 990c30bb..00000000
--- a/packages/radio/dist/native-modules/ux-radio.js
+++ /dev/null
@@ -1,156 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, bindable } from 'aurelia-templating';
-import { computedFrom, observable } from 'aurelia-binding';
-import { inject } from 'aurelia-dependency-injection';
-import { StyleEngine, PaperRipple, normalizeBooleanAttribute } from '@aurelia-ux/core';
-import { ElementEvents, DOM } from 'aurelia-framework';
-var UxRadio = /** @class */ (function () {
- function UxRadio(element, styleEngine) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.disabled = false;
- this.effect = 'ripple';
- this.checked = false;
- this.ripple = null;
- Object.setPrototypeOf(element, uxRadioElementProto);
- }
- Object.defineProperty(UxRadio.prototype, "isDisabled", {
- get: function () {
- return normalizeBooleanAttribute('disabled', this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- UxRadio.prototype.bind = function () {
- var element = this.element;
- var radio = this.radio;
- if (element.hasAttribute('id')) {
- var id = element.id;
- if (id != null) {
- radio.setAttribute('id', id);
- element.removeAttribute('id');
- }
- }
- if (element.hasAttribute('tabindex')) {
- var tabIndex = element.getAttribute('tabindex');
- if (tabIndex != null) {
- radio.setAttribute('tabindex', tabIndex);
- element.removeAttribute('tabindex');
- }
- }
- if (element.hasAttribute('checked')) {
- element.checked = true;
- }
- if (this.checked) {
- radio.checked = true;
- }
- this.themeChanged(this.theme);
- };
- UxRadio.prototype.attached = function () {
- this.radio.addEventListener('change', stopEvent);
- };
- UxRadio.prototype.detached = function () {
- this.radio.removeEventListener('change', stopEvent);
- };
- UxRadio.prototype.getChecked = function () {
- return this.checked;
- };
- UxRadio.prototype.setChecked = function (value) {
- var oldValue = this.checked;
- var newValue = value;
- if (newValue !== oldValue) {
- this.checked = newValue;
- this.ignoreValueChanges = true;
- this.value = newValue;
- if (this.radio) {
- this.radio.checked = !!newValue;
- }
- this.ignoreValueChanges = false;
- this.element.dispatchEvent(DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxRadio.prototype.themeChanged = function (newValue) {
- if (newValue != null && newValue.themeKey == null) {
- newValue.themeKey = 'radio';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxRadio.prototype.valueChanged = function (value) {
- if (this.ignoreValueChanges) {
- return;
- }
- this.setChecked(value);
- };
- UxRadio.prototype.onMouseDown = function (e) {
- var _this = this;
- if (e.button !== 0 || this.isDisabled) {
- return;
- }
- if (this.element.classList.contains('ripple')) {
- if (this.ripple === null) {
- this.ripple = new PaperRipple();
- var container = this.element.querySelector('.ripplecontainer');
- if (container != null) {
- container.appendChild(this.ripple.$);
- }
- }
- this.ripple.center = true;
- this.ripple.round = true;
- this.ripple.downAction(e);
- var winEvents_1 = new ElementEvents(window);
- var upAction = function () {
- _this.ripple.upAction();
- winEvents_1.disposeAll();
- };
- winEvents_1.subscribe('blur', upAction);
- winEvents_1.subscribe('mouseup', upAction, true);
- }
- e.preventDefault();
- };
- __decorate([
- bindable
- ], UxRadio.prototype, "disabled", void 0);
- __decorate([
- bindable
- ], UxRadio.prototype, "effect", void 0);
- __decorate([
- bindable
- ], UxRadio.prototype, "id", void 0);
- __decorate([
- bindable
- ], UxRadio.prototype, "theme", void 0);
- __decorate([
- observable({ initializer: function () { return false; } })
- ], UxRadio.prototype, "value", void 0);
- __decorate([
- computedFrom('disabled')
- ], UxRadio.prototype, "isDisabled", null);
- UxRadio = __decorate([
- inject(Element, StyleEngine),
- customElement('ux-radio')
- ], UxRadio);
- return UxRadio;
-}());
-export { UxRadio };
-function stopEvent(e) {
- e.stopPropagation();
-}
-var getVm = function (_) { return _.au.controller.viewModel; };
-var uxRadioElementProto = Object.create(HTMLElement.prototype, {
- type: {
- value: 'radio',
- },
- checked: {
- get: function () {
- return getVm(this).getChecked();
- },
- set: function (value) {
- getVm(this).setChecked(value);
- }
- }
-});
diff --git a/packages/radio/dist/system/ux-radio.js b/packages/radio/dist/system/ux-radio.js
deleted file mode 100644
index 91a546a5..00000000
--- a/packages/radio/dist/system/ux-radio.js
+++ /dev/null
@@ -1,177 +0,0 @@
-System.register(["aurelia-templating", "aurelia-binding", "aurelia-dependency-injection", "@aurelia-ux/core", "aurelia-framework"], function (exports_1, context_1) {
- "use strict";
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
- };
- var __moduleName = context_1 && context_1.id;
- function stopEvent(e) {
- e.stopPropagation();
- }
- var aurelia_templating_1, aurelia_binding_1, aurelia_dependency_injection_1, core_1, aurelia_framework_1, UxRadio, getVm, uxRadioElementProto;
- return {
- setters: [
- function (aurelia_templating_1_1) {
- aurelia_templating_1 = aurelia_templating_1_1;
- },
- function (aurelia_binding_1_1) {
- aurelia_binding_1 = aurelia_binding_1_1;
- },
- function (aurelia_dependency_injection_1_1) {
- aurelia_dependency_injection_1 = aurelia_dependency_injection_1_1;
- },
- function (core_1_1) {
- core_1 = core_1_1;
- },
- function (aurelia_framework_1_1) {
- aurelia_framework_1 = aurelia_framework_1_1;
- }
- ],
- execute: function () {
- UxRadio = /** @class */ (function () {
- function UxRadio(element, styleEngine) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.disabled = false;
- this.effect = 'ripple';
- this.checked = false;
- this.ripple = null;
- Object.setPrototypeOf(element, uxRadioElementProto);
- }
- Object.defineProperty(UxRadio.prototype, "isDisabled", {
- get: function () {
- return core_1.normalizeBooleanAttribute('disabled', this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- UxRadio.prototype.bind = function () {
- var element = this.element;
- var radio = this.radio;
- if (element.hasAttribute('id')) {
- var id = element.id;
- if (id != null) {
- radio.setAttribute('id', id);
- element.removeAttribute('id');
- }
- }
- if (element.hasAttribute('tabindex')) {
- var tabIndex = element.getAttribute('tabindex');
- if (tabIndex != null) {
- radio.setAttribute('tabindex', tabIndex);
- element.removeAttribute('tabindex');
- }
- }
- if (element.hasAttribute('checked')) {
- element.checked = true;
- }
- if (this.checked) {
- radio.checked = true;
- }
- this.themeChanged(this.theme);
- };
- UxRadio.prototype.attached = function () {
- this.radio.addEventListener('change', stopEvent);
- };
- UxRadio.prototype.detached = function () {
- this.radio.removeEventListener('change', stopEvent);
- };
- UxRadio.prototype.getChecked = function () {
- return this.checked;
- };
- UxRadio.prototype.setChecked = function (value) {
- var oldValue = this.checked;
- var newValue = value;
- if (newValue !== oldValue) {
- this.checked = newValue;
- this.ignoreValueChanges = true;
- this.value = newValue;
- if (this.radio) {
- this.radio.checked = !!newValue;
- }
- this.ignoreValueChanges = false;
- this.element.dispatchEvent(aurelia_framework_1.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxRadio.prototype.themeChanged = function (newValue) {
- if (newValue != null && newValue.themeKey == null) {
- newValue.themeKey = 'radio';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxRadio.prototype.valueChanged = function (value) {
- if (this.ignoreValueChanges) {
- return;
- }
- this.setChecked(value);
- };
- UxRadio.prototype.onMouseDown = function (e) {
- var _this = this;
- if (e.button !== 0 || this.isDisabled) {
- return;
- }
- if (this.element.classList.contains('ripple')) {
- if (this.ripple === null) {
- this.ripple = new core_1.PaperRipple();
- var container = this.element.querySelector('.ripplecontainer');
- if (container != null) {
- container.appendChild(this.ripple.$);
- }
- }
- this.ripple.center = true;
- this.ripple.round = true;
- this.ripple.downAction(e);
- var winEvents_1 = new aurelia_framework_1.ElementEvents(window);
- var upAction = function () {
- _this.ripple.upAction();
- winEvents_1.disposeAll();
- };
- winEvents_1.subscribe('blur', upAction);
- winEvents_1.subscribe('mouseup', upAction, true);
- }
- e.preventDefault();
- };
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "disabled", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "effect", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "id", void 0);
- __decorate([
- aurelia_templating_1.bindable
- ], UxRadio.prototype, "theme", void 0);
- __decorate([
- aurelia_binding_1.observable({ initializer: function () { return false; } })
- ], UxRadio.prototype, "value", void 0);
- __decorate([
- aurelia_binding_1.computedFrom('disabled')
- ], UxRadio.prototype, "isDisabled", null);
- UxRadio = __decorate([
- aurelia_dependency_injection_1.inject(Element, core_1.StyleEngine),
- aurelia_templating_1.customElement('ux-radio')
- ], UxRadio);
- return UxRadio;
- }());
- exports_1("UxRadio", UxRadio);
- getVm = function (_) { return _.au.controller.viewModel; };
- uxRadioElementProto = Object.create(HTMLElement.prototype, {
- type: {
- value: 'radio',
- },
- checked: {
- get: function () {
- return getVm(this).getChecked();
- },
- set: function (value) {
- getVm(this).setChecked(value);
- }
- }
- });
- }
- };
-});
diff --git a/packages/select/dist/amd/ux-select.js b/packages/select/dist/amd/ux-select.js
deleted file mode 100644
index f6f72b4f..00000000
--- a/packages/select/dist/amd/ux-select.js
+++ /dev/null
@@ -1,489 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-define(["require", "exports", "aurelia-framework", "aurelia-logging", "@aurelia-ux/core", "./util"], function (require, exports, aurelia_framework_1, aurelia_logging_1, core_1, util_1) {
- "use strict";
- Object.defineProperty(exports, "__esModule", { value: true });
- var UP = 38;
- // const RIGHT = 39;
- var DOWN = 40;
- // const LEFT = 37;
- // const ESC = 27;
- var ENTER = 13;
- var SPACE = 32;
- var logger = aurelia_logging_1.getLogger('ux-select');
- var invalidMultipleValueMsg = 'Only null or Array instances can be bound to a multi-select';
- var selectArrayContext = 'context:ux-select';
- var UxSelect = /** @class */ (function () {
- function UxSelect(element, styleEngine, observerLocator, taskQueue) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.observerLocator = observerLocator;
- this.taskQueue = taskQueue;
- this.selectedOption = null;
- this.ignoreSelectEvent = true;
- // Only chrome persist the element prototype when cloning with clone node
- Object.setPrototypeOf(element, UxSelectElementProto);
- }
- UxSelect.prototype.bind = function () {
- if (util_1.bool(this.autofocus)) {
- // setTimeout(focusEl, 0, this.button);
- }
- if (this.isMultiple) {
- if (!this.value) {
- this.value = [];
- }
- else if (!Array.isArray(this.value)) {
- throw new Error(invalidMultipleValueMsg);
- }
- }
- if (!this.winEvents) {
- this.winEvents = new aurelia_framework_1.ElementEvents(window);
- }
- // Initially Synchronize options with value of this element
- this.taskQueue.queueMicroTask(this);
- };
- UxSelect.prototype.unbind = function () {
- this.winEvents.disposeAll();
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- this.selectedOption = null;
- };
- UxSelect.prototype.resolveDisplayValue = function () {
- var value = this.value;
- this.displayValue = Array.isArray(value) ? value.slice().sort().join(', ') : value;
- };
- UxSelect.prototype.synchronizeOptions = function () {
- var value = this.value;
- var isArray = Array.isArray(value);
- var options = this.options;
- var matcher = this.element.matcher || defaultMatcher;
- var i = options.length;
- this.ignoreSelectEvent = true;
- var _loop_1 = function () {
- var option = options[i];
- var optionValue = option.value;
- if (isArray) {
- option.selected = value.findIndex(function (item) { return !!matcher(optionValue, item); }) !== -1;
- return "continue";
- }
- option.selected = !!matcher(optionValue, value);
- };
- while (i--) {
- _loop_1();
- }
- this.ignoreSelectEvent = false;
- };
- UxSelect.prototype.synchronizeValue = function () {
- var options = this.options;
- var ii = options.length;
- var count = 0;
- var optionValues = [];
- // extract value from ux-option
- for (var i = 0; i < ii; i++) {
- var option = options[i];
- if (!option.selected) {
- continue;
- }
- optionValues.push(option.value);
- count++;
- }
- if (this.isMultiple) {
- // multi-select
- if (Array.isArray(this.value)) {
- var selectValues = this.value;
- var matcher_1 = this.element.matcher || defaultMatcher;
- // remove items that are no longer selected.
- var i = 0;
- var _loop_2 = function () {
- var a = selectValues[i];
- if (optionValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.splice(i, 1);
- }
- else {
- i++;
- }
- };
- while (i < selectValues.length) {
- _loop_2();
- }
- // add items that have been selected.
- i = 0;
- var _loop_3 = function () {
- var a = optionValues[i];
- if (selectValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.push(a);
- }
- i++;
- };
- while (i < optionValues.length) {
- _loop_3();
- }
- this.resolveDisplayValue();
- return; // don't notify.
- }
- }
- else {
- // single-select
- // tslint:disable-next-line:prefer-conditional-expression
- if (count === 0) {
- optionValues = null;
- }
- else {
- optionValues = optionValues[0];
- }
- this.setValue(optionValues);
- }
- };
- UxSelect.prototype.setupListAnchor = function () {
- var _this = this;
- this.calcAnchorPosition();
- this.winEvents.subscribe('wheel', function (e) {
- if (_this.expanded) {
- if (e.target === aurelia_framework_1.PLATFORM.global || !_this.optionWrapperEl.contains(e.target)) {
- _this.collapse();
- }
- }
- }, true);
- };
- UxSelect.prototype.unsetupListAnchor = function () {
- this.listAnchor = null;
- this.winEvents.disposeAll();
- };
- UxSelect.prototype.calcAnchorPosition = function () {
- var elDim = this.container.getBoundingClientRect();
- var offsetY = (48 - elDim.height) / 2;
- this.listAnchor = { x: elDim.left, y: elDim.top - offsetY };
- };
- UxSelect.prototype.onKeyboardSelect = function () {
- if (!this.expanded) {
- return;
- }
- var focusedOption = this.focusedUxOption;
- if (this.isMultiple) {
- if (!focusedOption) {
- return;
- }
- focusedOption.selected = !focusedOption.selected;
- }
- else {
- this.collapse();
- }
- };
- UxSelect.prototype.call = function () {
- this.synchronizeOptions();
- };
- UxSelect.prototype.getValue = function () {
- return this.value;
- };
- UxSelect.prototype.setValue = function (newValue) {
- if (newValue !== null && newValue !== undefined && this.isMultiple && !Array.isArray(newValue)) {
- throw new Error('Only null, undenfined or Array instances can be bound to a multi-select.');
- }
- if (this.value === newValue) {
- return;
- }
- // unsubscribe from old array.
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- if (this.isMultiple) {
- // subscribe to new array.
- if (Array.isArray(newValue)) {
- this.arrayObserver = this.observerLocator.getArrayObserver(newValue);
- this.arrayObserver.subscribe(selectArrayContext, this);
- }
- }
- if (newValue !== this.value) {
- this.value = newValue;
- this.resolveDisplayValue();
- this.element.dispatchEvent(aurelia_framework_1.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxSelect.prototype.expand = function () {
- var _this = this;
- if (this.expanded) {
- return;
- }
- if (this.isExpanding) {
- return;
- }
- this.isExpanding = true;
- this.optionWrapperEl.classList.add('open');
- setTimeout(function () {
- _this.optionCtEl.classList.add('open');
- _this.isExpanding = false;
- _this.expanded = true;
- _this.setFocusedOption(_this.selectedOption);
- }, this.theme.listTransition);
- this.setupListAnchor();
- };
- UxSelect.prototype.collapse = function () {
- var _this = this;
- if (this.isCollapsing) {
- return;
- }
- this.isCollapsing = true;
- this.optionCtEl.classList.remove('open');
- setTimeout(function () {
- _this.optionWrapperEl.classList.remove('open');
- _this.isCollapsing = false;
- _this.expanded = false;
- _this.setFocusedOption(null);
- _this.unsetupListAnchor();
- }, this.theme.listTransition);
- };
- UxSelect.prototype.setFocusedOption = function (focusedOption) {
- var oldFocusedOption = this.focusedUxOption;
- if (focusedOption !== oldFocusedOption) {
- if (oldFocusedOption) {
- oldFocusedOption.focused = false;
- }
- if (focusedOption) {
- focusedOption.focused = true;
- focusedOption.wave();
- focusedOption.scrollIntoView({ block: 'nearest', inline: 'nearest' });
- }
- this.focusedUxOption = focusedOption;
- }
- };
- UxSelect.prototype.moveSelectedIndex = function (offset) {
- var currentIndex = 0;
- var options = this.options;
- if (this.focusedUxOption) {
- currentIndex = options.indexOf(this.focusedUxOption);
- }
- else if (this.selectedOption) {
- currentIndex = options.indexOf(this.selectedOption);
- }
- var nextIndex = currentIndex + offset;
- if (nextIndex > options.length - 1) {
- nextIndex = options.length - 1;
- }
- if (nextIndex < 0) {
- nextIndex = 0;
- }
- var focusedOption = options[nextIndex];
- if (focusedOption.disabled) {
- if (offset > 0) {
- if (nextIndex === options.length - 1) {
- return;
- }
- this.moveSelectedIndex(offset + 1);
- }
- else {
- if (nextIndex < 0) {
- return;
- }
- this.moveSelectedIndex(offset - 1);
- }
- return;
- }
- this.setFocusedOption(focusedOption);
- focusedOption.focused = true;
- if (this.isMultiple) {
- // empty
- }
- else {
- this.ignoreSelectEvent = true;
- if (this.selectedOption) {
- this.selectedOption.selected = false;
- }
- this.selectedOption = focusedOption;
- this.selectedOption.selected = true;
- this.ignoreSelectEvent = false;
- this.setValue(this.selectedOption.value);
- }
- };
- UxSelect.prototype.onTriggerClick = function () {
- if (!this.isDisabled) {
- if (this.expanded) {
- return;
- }
- this.expand();
- }
- };
- UxSelect.prototype.onBlur = function () {
- if (!this.element.contains(aurelia_framework_1.DOM.activeElement)) {
- this.collapse();
- }
- };
- UxSelect.prototype.onSelect = function (e) {
- e.stopPropagation();
- if (this.ignoreSelectEvent) {
- return;
- }
- var newSelection = e.detail;
- var lastSelection = this.selectedOption;
- if (this.isMultiple) {
- this.synchronizeValue();
- }
- else {
- this.ignoreSelectEvent = true;
- if (lastSelection) {
- lastSelection.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = newSelection;
- this.setValue(newSelection.value);
- if (this.expanded) {
- this.collapse();
- }
- }
- };
- UxSelect.prototype.onKeyDown = function (key) {
- if (this.isDisabled) {
- return;
- }
- // tslint:disable-next-line:switch-default
- switch (key) {
- case UP:
- case DOWN:
- this.moveSelectedIndex(key === UP ? -1 : 1);
- break;
- case ENTER:
- case SPACE:
- this.onKeyboardSelect();
- break;
- }
- return true;
- };
- UxSelect.prototype.themeChanged = function (newValue) {
- if (newValue && !newValue.themeKey) {
- newValue.themeKey = 'ux-select';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxSelect.prototype.multipleChanged = function (newValue, oldValue) {
- newValue = util_1.bool(newValue);
- oldValue = util_1.bool(oldValue);
- var hasChanged = newValue !== oldValue;
- if (hasChanged) {
- this.ignoreSelectEvent = true;
- for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
- var opt = _a[_i];
- opt.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = null;
- this.setValue(newValue
- ? [] // Changing from single to multiple = reset value to empty array
- : null // Changing from multiple to single = reset value to null
- );
- }
- };
- Object.defineProperty(UxSelect.prototype, "options", {
- get: function () {
- if (!this.optionCtEl) {
- return [];
- }
- var result = [];
- var children = this.optionCtEl.children;
- var ii = children.length;
- for (var i = 0; ii > i; ++i) {
- var element = children[i];
- if (element.nodeName === 'UX-OPTION') {
- result.push(element);
- }
- else if (element.nodeName === 'UX-OPTGROUP') {
- var groupOptions = element.options;
- var jj = groupOptions.length;
- for (var j = 0; jj > j; ++j) {
- result.push(groupOptions[j]);
- }
- }
- }
- return result;
- },
- enumerable: true,
- configurable: true
- });
- UxSelect.prototype.getOptions = function () {
- return this.options;
- };
- Object.defineProperty(UxSelect.prototype, "isMultiple", {
- get: function () {
- return util_1.bool(this.multiple);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(UxSelect.prototype, "isDisabled", {
- get: function () {
- return util_1.bool(this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "theme", void 0);
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "autofocus", void 0);
- __decorate([
- aurelia_framework_1.bindable({ defaultValue: false })
- ], UxSelect.prototype, "disabled", void 0);
- __decorate([
- aurelia_framework_1.bindable({ defaultValue: false })
- ], UxSelect.prototype, "multiple", void 0);
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "placeholder", void 0);
- __decorate([
- aurelia_framework_1.computedFrom('multiple')
- ], UxSelect.prototype, "isMultiple", null);
- __decorate([
- aurelia_framework_1.computedFrom('disabled')
- ], UxSelect.prototype, "isDisabled", null);
- UxSelect = __decorate([
- aurelia_framework_1.inject(Element, core_1.StyleEngine, aurelia_framework_1.ObserverLocator, aurelia_framework_1.TaskQueue),
- aurelia_framework_1.processContent(extractUxOption),
- aurelia_framework_1.customElement('ux-select')
- // @inlineView(UX_SELECT_VIEW)
- ], UxSelect);
- return UxSelect;
- }());
- exports.UxSelect = UxSelect;
- function extractUxOption(_, __, node) {
- if (node.hasAttribute('containerless')) {
- logger.warn('cannot use containerless on . Consider using as-element instead.');
- node.removeAttribute('containerless');
- }
- var currentChild = node.firstChild;
- while (currentChild) {
- var nextSibling = currentChild.nextSibling;
- if (currentChild.nodeName === 'UX-OPTION' || currentChild.nodeName === 'UX-OPTGROUP') {
- currentChild = nextSibling;
- continue;
- }
- node.removeChild(currentChild);
- currentChild = nextSibling;
- }
- return true;
- }
- var UxSelectElementProto = Object.create(HTMLElement.prototype, {
- value: {
- get: function () {
- return util_1.getAuViewModel(this).getValue();
- },
- set: function (v) {
- return util_1.getAuViewModel(this).setValue(v);
- }
- },
- options: {
- get: function () {
- return util_1.getAuViewModel(this).getOptions();
- }
- }
- });
- function defaultMatcher(a, b) {
- return a === b;
- }
-});
diff --git a/packages/select/dist/commonjs/ux-select.js b/packages/select/dist/commonjs/ux-select.js
deleted file mode 100644
index 7be18ab3..00000000
--- a/packages/select/dist/commonjs/ux-select.js
+++ /dev/null
@@ -1,491 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var aurelia_framework_1 = require("aurelia-framework");
-var aurelia_logging_1 = require("aurelia-logging");
-var core_1 = require("@aurelia-ux/core");
-var util_1 = require("./util");
-var UP = 38;
-// const RIGHT = 39;
-var DOWN = 40;
-// const LEFT = 37;
-// const ESC = 27;
-var ENTER = 13;
-var SPACE = 32;
-var logger = aurelia_logging_1.getLogger('ux-select');
-var invalidMultipleValueMsg = 'Only null or Array instances can be bound to a multi-select';
-var selectArrayContext = 'context:ux-select';
-var UxSelect = /** @class */ (function () {
- function UxSelect(element, styleEngine, observerLocator, taskQueue) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.observerLocator = observerLocator;
- this.taskQueue = taskQueue;
- this.selectedOption = null;
- this.ignoreSelectEvent = true;
- // Only chrome persist the element prototype when cloning with clone node
- Object.setPrototypeOf(element, UxSelectElementProto);
- }
- UxSelect.prototype.bind = function () {
- if (util_1.bool(this.autofocus)) {
- // setTimeout(focusEl, 0, this.button);
- }
- if (this.isMultiple) {
- if (!this.value) {
- this.value = [];
- }
- else if (!Array.isArray(this.value)) {
- throw new Error(invalidMultipleValueMsg);
- }
- }
- if (!this.winEvents) {
- this.winEvents = new aurelia_framework_1.ElementEvents(window);
- }
- // Initially Synchronize options with value of this element
- this.taskQueue.queueMicroTask(this);
- };
- UxSelect.prototype.unbind = function () {
- this.winEvents.disposeAll();
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- this.selectedOption = null;
- };
- UxSelect.prototype.resolveDisplayValue = function () {
- var value = this.value;
- this.displayValue = Array.isArray(value) ? value.slice().sort().join(', ') : value;
- };
- UxSelect.prototype.synchronizeOptions = function () {
- var value = this.value;
- var isArray = Array.isArray(value);
- var options = this.options;
- var matcher = this.element.matcher || defaultMatcher;
- var i = options.length;
- this.ignoreSelectEvent = true;
- var _loop_1 = function () {
- var option = options[i];
- var optionValue = option.value;
- if (isArray) {
- option.selected = value.findIndex(function (item) { return !!matcher(optionValue, item); }) !== -1;
- return "continue";
- }
- option.selected = !!matcher(optionValue, value);
- };
- while (i--) {
- _loop_1();
- }
- this.ignoreSelectEvent = false;
- };
- UxSelect.prototype.synchronizeValue = function () {
- var options = this.options;
- var ii = options.length;
- var count = 0;
- var optionValues = [];
- // extract value from ux-option
- for (var i = 0; i < ii; i++) {
- var option = options[i];
- if (!option.selected) {
- continue;
- }
- optionValues.push(option.value);
- count++;
- }
- if (this.isMultiple) {
- // multi-select
- if (Array.isArray(this.value)) {
- var selectValues = this.value;
- var matcher_1 = this.element.matcher || defaultMatcher;
- // remove items that are no longer selected.
- var i = 0;
- var _loop_2 = function () {
- var a = selectValues[i];
- if (optionValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.splice(i, 1);
- }
- else {
- i++;
- }
- };
- while (i < selectValues.length) {
- _loop_2();
- }
- // add items that have been selected.
- i = 0;
- var _loop_3 = function () {
- var a = optionValues[i];
- if (selectValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.push(a);
- }
- i++;
- };
- while (i < optionValues.length) {
- _loop_3();
- }
- this.resolveDisplayValue();
- return; // don't notify.
- }
- }
- else {
- // single-select
- // tslint:disable-next-line:prefer-conditional-expression
- if (count === 0) {
- optionValues = null;
- }
- else {
- optionValues = optionValues[0];
- }
- this.setValue(optionValues);
- }
- };
- UxSelect.prototype.setupListAnchor = function () {
- var _this = this;
- this.calcAnchorPosition();
- this.winEvents.subscribe('wheel', function (e) {
- if (_this.expanded) {
- if (e.target === aurelia_framework_1.PLATFORM.global || !_this.optionWrapperEl.contains(e.target)) {
- _this.collapse();
- }
- }
- }, true);
- };
- UxSelect.prototype.unsetupListAnchor = function () {
- this.listAnchor = null;
- this.winEvents.disposeAll();
- };
- UxSelect.prototype.calcAnchorPosition = function () {
- var elDim = this.container.getBoundingClientRect();
- var offsetY = (48 - elDim.height) / 2;
- this.listAnchor = { x: elDim.left, y: elDim.top - offsetY };
- };
- UxSelect.prototype.onKeyboardSelect = function () {
- if (!this.expanded) {
- return;
- }
- var focusedOption = this.focusedUxOption;
- if (this.isMultiple) {
- if (!focusedOption) {
- return;
- }
- focusedOption.selected = !focusedOption.selected;
- }
- else {
- this.collapse();
- }
- };
- UxSelect.prototype.call = function () {
- this.synchronizeOptions();
- };
- UxSelect.prototype.getValue = function () {
- return this.value;
- };
- UxSelect.prototype.setValue = function (newValue) {
- if (newValue !== null && newValue !== undefined && this.isMultiple && !Array.isArray(newValue)) {
- throw new Error('Only null, undenfined or Array instances can be bound to a multi-select.');
- }
- if (this.value === newValue) {
- return;
- }
- // unsubscribe from old array.
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- if (this.isMultiple) {
- // subscribe to new array.
- if (Array.isArray(newValue)) {
- this.arrayObserver = this.observerLocator.getArrayObserver(newValue);
- this.arrayObserver.subscribe(selectArrayContext, this);
- }
- }
- if (newValue !== this.value) {
- this.value = newValue;
- this.resolveDisplayValue();
- this.element.dispatchEvent(aurelia_framework_1.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxSelect.prototype.expand = function () {
- var _this = this;
- if (this.expanded) {
- return;
- }
- if (this.isExpanding) {
- return;
- }
- this.isExpanding = true;
- this.optionWrapperEl.classList.add('open');
- setTimeout(function () {
- _this.optionCtEl.classList.add('open');
- _this.isExpanding = false;
- _this.expanded = true;
- _this.setFocusedOption(_this.selectedOption);
- }, this.theme.listTransition);
- this.setupListAnchor();
- };
- UxSelect.prototype.collapse = function () {
- var _this = this;
- if (this.isCollapsing) {
- return;
- }
- this.isCollapsing = true;
- this.optionCtEl.classList.remove('open');
- setTimeout(function () {
- _this.optionWrapperEl.classList.remove('open');
- _this.isCollapsing = false;
- _this.expanded = false;
- _this.setFocusedOption(null);
- _this.unsetupListAnchor();
- }, this.theme.listTransition);
- };
- UxSelect.prototype.setFocusedOption = function (focusedOption) {
- var oldFocusedOption = this.focusedUxOption;
- if (focusedOption !== oldFocusedOption) {
- if (oldFocusedOption) {
- oldFocusedOption.focused = false;
- }
- if (focusedOption) {
- focusedOption.focused = true;
- focusedOption.wave();
- focusedOption.scrollIntoView({ block: 'nearest', inline: 'nearest' });
- }
- this.focusedUxOption = focusedOption;
- }
- };
- UxSelect.prototype.moveSelectedIndex = function (offset) {
- var currentIndex = 0;
- var options = this.options;
- if (this.focusedUxOption) {
- currentIndex = options.indexOf(this.focusedUxOption);
- }
- else if (this.selectedOption) {
- currentIndex = options.indexOf(this.selectedOption);
- }
- var nextIndex = currentIndex + offset;
- if (nextIndex > options.length - 1) {
- nextIndex = options.length - 1;
- }
- if (nextIndex < 0) {
- nextIndex = 0;
- }
- var focusedOption = options[nextIndex];
- if (focusedOption.disabled) {
- if (offset > 0) {
- if (nextIndex === options.length - 1) {
- return;
- }
- this.moveSelectedIndex(offset + 1);
- }
- else {
- if (nextIndex < 0) {
- return;
- }
- this.moveSelectedIndex(offset - 1);
- }
- return;
- }
- this.setFocusedOption(focusedOption);
- focusedOption.focused = true;
- if (this.isMultiple) {
- // empty
- }
- else {
- this.ignoreSelectEvent = true;
- if (this.selectedOption) {
- this.selectedOption.selected = false;
- }
- this.selectedOption = focusedOption;
- this.selectedOption.selected = true;
- this.ignoreSelectEvent = false;
- this.setValue(this.selectedOption.value);
- }
- };
- UxSelect.prototype.onTriggerClick = function () {
- if (!this.isDisabled) {
- if (this.expanded) {
- return;
- }
- this.expand();
- }
- };
- UxSelect.prototype.onBlur = function () {
- if (!this.element.contains(aurelia_framework_1.DOM.activeElement)) {
- this.collapse();
- }
- };
- UxSelect.prototype.onSelect = function (e) {
- e.stopPropagation();
- if (this.ignoreSelectEvent) {
- return;
- }
- var newSelection = e.detail;
- var lastSelection = this.selectedOption;
- if (this.isMultiple) {
- this.synchronizeValue();
- }
- else {
- this.ignoreSelectEvent = true;
- if (lastSelection) {
- lastSelection.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = newSelection;
- this.setValue(newSelection.value);
- if (this.expanded) {
- this.collapse();
- }
- }
- };
- UxSelect.prototype.onKeyDown = function (key) {
- if (this.isDisabled) {
- return;
- }
- // tslint:disable-next-line:switch-default
- switch (key) {
- case UP:
- case DOWN:
- this.moveSelectedIndex(key === UP ? -1 : 1);
- break;
- case ENTER:
- case SPACE:
- this.onKeyboardSelect();
- break;
- }
- return true;
- };
- UxSelect.prototype.themeChanged = function (newValue) {
- if (newValue && !newValue.themeKey) {
- newValue.themeKey = 'ux-select';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxSelect.prototype.multipleChanged = function (newValue, oldValue) {
- newValue = util_1.bool(newValue);
- oldValue = util_1.bool(oldValue);
- var hasChanged = newValue !== oldValue;
- if (hasChanged) {
- this.ignoreSelectEvent = true;
- for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
- var opt = _a[_i];
- opt.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = null;
- this.setValue(newValue
- ? [] // Changing from single to multiple = reset value to empty array
- : null // Changing from multiple to single = reset value to null
- );
- }
- };
- Object.defineProperty(UxSelect.prototype, "options", {
- get: function () {
- if (!this.optionCtEl) {
- return [];
- }
- var result = [];
- var children = this.optionCtEl.children;
- var ii = children.length;
- for (var i = 0; ii > i; ++i) {
- var element = children[i];
- if (element.nodeName === 'UX-OPTION') {
- result.push(element);
- }
- else if (element.nodeName === 'UX-OPTGROUP') {
- var groupOptions = element.options;
- var jj = groupOptions.length;
- for (var j = 0; jj > j; ++j) {
- result.push(groupOptions[j]);
- }
- }
- }
- return result;
- },
- enumerable: true,
- configurable: true
- });
- UxSelect.prototype.getOptions = function () {
- return this.options;
- };
- Object.defineProperty(UxSelect.prototype, "isMultiple", {
- get: function () {
- return util_1.bool(this.multiple);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(UxSelect.prototype, "isDisabled", {
- get: function () {
- return util_1.bool(this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "theme", void 0);
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "autofocus", void 0);
- __decorate([
- aurelia_framework_1.bindable({ defaultValue: false })
- ], UxSelect.prototype, "disabled", void 0);
- __decorate([
- aurelia_framework_1.bindable({ defaultValue: false })
- ], UxSelect.prototype, "multiple", void 0);
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "placeholder", void 0);
- __decorate([
- aurelia_framework_1.computedFrom('multiple')
- ], UxSelect.prototype, "isMultiple", null);
- __decorate([
- aurelia_framework_1.computedFrom('disabled')
- ], UxSelect.prototype, "isDisabled", null);
- UxSelect = __decorate([
- aurelia_framework_1.inject(Element, core_1.StyleEngine, aurelia_framework_1.ObserverLocator, aurelia_framework_1.TaskQueue),
- aurelia_framework_1.processContent(extractUxOption),
- aurelia_framework_1.customElement('ux-select')
- // @inlineView(UX_SELECT_VIEW)
- ], UxSelect);
- return UxSelect;
-}());
-exports.UxSelect = UxSelect;
-function extractUxOption(_, __, node) {
- if (node.hasAttribute('containerless')) {
- logger.warn('cannot use containerless on . Consider using as-element instead.');
- node.removeAttribute('containerless');
- }
- var currentChild = node.firstChild;
- while (currentChild) {
- var nextSibling = currentChild.nextSibling;
- if (currentChild.nodeName === 'UX-OPTION' || currentChild.nodeName === 'UX-OPTGROUP') {
- currentChild = nextSibling;
- continue;
- }
- node.removeChild(currentChild);
- currentChild = nextSibling;
- }
- return true;
-}
-var UxSelectElementProto = Object.create(HTMLElement.prototype, {
- value: {
- get: function () {
- return util_1.getAuViewModel(this).getValue();
- },
- set: function (v) {
- return util_1.getAuViewModel(this).setValue(v);
- }
- },
- options: {
- get: function () {
- return util_1.getAuViewModel(this).getOptions();
- }
- }
-});
-function defaultMatcher(a, b) {
- return a === b;
-}
diff --git a/packages/select/dist/es2015/ux-select.js b/packages/select/dist/es2015/ux-select.js
deleted file mode 100644
index c3335438..00000000
--- a/packages/select/dist/es2015/ux-select.js
+++ /dev/null
@@ -1,465 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, bindable, computedFrom, DOM, processContent, ElementEvents, inject, PLATFORM, ObserverLocator, TaskQueue, } from 'aurelia-framework';
-import { getLogger } from 'aurelia-logging';
-import { StyleEngine } from '@aurelia-ux/core';
-import { getAuViewModel, bool } from './util';
-const UP = 38;
-// const RIGHT = 39;
-const DOWN = 40;
-// const LEFT = 37;
-// const ESC = 27;
-const ENTER = 13;
-const SPACE = 32;
-const logger = getLogger('ux-select');
-const invalidMultipleValueMsg = 'Only null or Array instances can be bound to a multi-select';
-const selectArrayContext = 'context:ux-select';
-let UxSelect =
-// @inlineView(UX_SELECT_VIEW)
-class UxSelect {
- constructor(element, styleEngine, observerLocator, taskQueue) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.observerLocator = observerLocator;
- this.taskQueue = taskQueue;
- this.selectedOption = null;
- this.ignoreSelectEvent = true;
- // Only chrome persist the element prototype when cloning with clone node
- Object.setPrototypeOf(element, UxSelectElementProto);
- }
- bind() {
- if (bool(this.autofocus)) {
- // setTimeout(focusEl, 0, this.button);
- }
- if (this.isMultiple) {
- if (!this.value) {
- this.value = [];
- }
- else if (!Array.isArray(this.value)) {
- throw new Error(invalidMultipleValueMsg);
- }
- }
- if (!this.winEvents) {
- this.winEvents = new ElementEvents(window);
- }
- // Initially Synchronize options with value of this element
- this.taskQueue.queueMicroTask(this);
- }
- unbind() {
- this.winEvents.disposeAll();
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- this.selectedOption = null;
- }
- resolveDisplayValue() {
- const value = this.value;
- this.displayValue = Array.isArray(value) ? value.slice().sort().join(', ') : value;
- }
- synchronizeOptions() {
- const value = this.value;
- const isArray = Array.isArray(value);
- const options = this.options;
- const matcher = this.element.matcher || defaultMatcher;
- let i = options.length;
- this.ignoreSelectEvent = true;
- while (i--) {
- const option = options[i];
- const optionValue = option.value;
- if (isArray) {
- option.selected = value.findIndex((item) => !!matcher(optionValue, item)) !== -1;
- continue;
- }
- option.selected = !!matcher(optionValue, value);
- }
- this.ignoreSelectEvent = false;
- }
- synchronizeValue() {
- const options = this.options;
- const ii = options.length;
- let count = 0;
- let optionValues = [];
- // extract value from ux-option
- for (let i = 0; i < ii; i++) {
- const option = options[i];
- if (!option.selected) {
- continue;
- }
- optionValues.push(option.value);
- count++;
- }
- if (this.isMultiple) {
- // multi-select
- if (Array.isArray(this.value)) {
- const selectValues = this.value;
- const matcher = this.element.matcher || defaultMatcher;
- // remove items that are no longer selected.
- let i = 0;
- while (i < selectValues.length) {
- const a = selectValues[i];
- if (optionValues.findIndex(b => matcher(a, b)) === -1) {
- selectValues.splice(i, 1);
- }
- else {
- i++;
- }
- }
- // add items that have been selected.
- i = 0;
- while (i < optionValues.length) {
- const a = optionValues[i];
- if (selectValues.findIndex(b => matcher(a, b)) === -1) {
- selectValues.push(a);
- }
- i++;
- }
- this.resolveDisplayValue();
- return; // don't notify.
- }
- }
- else {
- // single-select
- // tslint:disable-next-line:prefer-conditional-expression
- if (count === 0) {
- optionValues = null;
- }
- else {
- optionValues = optionValues[0];
- }
- this.setValue(optionValues);
- }
- }
- setupListAnchor() {
- this.calcAnchorPosition();
- this.winEvents.subscribe('wheel', (e) => {
- if (this.expanded) {
- if (e.target === PLATFORM.global || !this.optionWrapperEl.contains(e.target)) {
- this.collapse();
- }
- }
- }, true);
- }
- unsetupListAnchor() {
- this.listAnchor = null;
- this.winEvents.disposeAll();
- }
- calcAnchorPosition() {
- const elDim = this.container.getBoundingClientRect();
- const offsetY = (48 - elDim.height) / 2;
- this.listAnchor = { x: elDim.left, y: elDim.top - offsetY };
- }
- onKeyboardSelect() {
- if (!this.expanded) {
- return;
- }
- const focusedOption = this.focusedUxOption;
- if (this.isMultiple) {
- if (!focusedOption) {
- return;
- }
- focusedOption.selected = !focusedOption.selected;
- }
- else {
- this.collapse();
- }
- }
- call() {
- this.synchronizeOptions();
- }
- getValue() {
- return this.value;
- }
- setValue(newValue) {
- if (newValue !== null && newValue !== undefined && this.isMultiple && !Array.isArray(newValue)) {
- throw new Error('Only null, undenfined or Array instances can be bound to a multi-select.');
- }
- if (this.value === newValue) {
- return;
- }
- // unsubscribe from old array.
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- if (this.isMultiple) {
- // subscribe to new array.
- if (Array.isArray(newValue)) {
- this.arrayObserver = this.observerLocator.getArrayObserver(newValue);
- this.arrayObserver.subscribe(selectArrayContext, this);
- }
- }
- if (newValue !== this.value) {
- this.value = newValue;
- this.resolveDisplayValue();
- this.element.dispatchEvent(DOM.createCustomEvent('change', { bubbles: true }));
- }
- }
- expand() {
- if (this.expanded) {
- return;
- }
- if (this.isExpanding) {
- return;
- }
- this.isExpanding = true;
- this.optionWrapperEl.classList.add('open');
- setTimeout(() => {
- this.optionCtEl.classList.add('open');
- this.isExpanding = false;
- this.expanded = true;
- this.setFocusedOption(this.selectedOption);
- }, this.theme.listTransition);
- this.setupListAnchor();
- }
- collapse() {
- if (this.isCollapsing) {
- return;
- }
- this.isCollapsing = true;
- this.optionCtEl.classList.remove('open');
- setTimeout(() => {
- this.optionWrapperEl.classList.remove('open');
- this.isCollapsing = false;
- this.expanded = false;
- this.setFocusedOption(null);
- this.unsetupListAnchor();
- }, this.theme.listTransition);
- }
- setFocusedOption(focusedOption) {
- const oldFocusedOption = this.focusedUxOption;
- if (focusedOption !== oldFocusedOption) {
- if (oldFocusedOption) {
- oldFocusedOption.focused = false;
- }
- if (focusedOption) {
- focusedOption.focused = true;
- focusedOption.wave();
- focusedOption.scrollIntoView({ block: 'nearest', inline: 'nearest' });
- }
- this.focusedUxOption = focusedOption;
- }
- }
- moveSelectedIndex(offset) {
- let currentIndex = 0;
- const options = this.options;
- if (this.focusedUxOption) {
- currentIndex = options.indexOf(this.focusedUxOption);
- }
- else if (this.selectedOption) {
- currentIndex = options.indexOf(this.selectedOption);
- }
- let nextIndex = currentIndex + offset;
- if (nextIndex > options.length - 1) {
- nextIndex = options.length - 1;
- }
- if (nextIndex < 0) {
- nextIndex = 0;
- }
- const focusedOption = options[nextIndex];
- if (focusedOption.disabled) {
- if (offset > 0) {
- if (nextIndex === options.length - 1) {
- return;
- }
- this.moveSelectedIndex(offset + 1);
- }
- else {
- if (nextIndex < 0) {
- return;
- }
- this.moveSelectedIndex(offset - 1);
- }
- return;
- }
- this.setFocusedOption(focusedOption);
- focusedOption.focused = true;
- if (this.isMultiple) {
- // empty
- }
- else {
- this.ignoreSelectEvent = true;
- if (this.selectedOption) {
- this.selectedOption.selected = false;
- }
- this.selectedOption = focusedOption;
- this.selectedOption.selected = true;
- this.ignoreSelectEvent = false;
- this.setValue(this.selectedOption.value);
- }
- }
- onTriggerClick() {
- if (!this.isDisabled) {
- if (this.expanded) {
- return;
- }
- this.expand();
- }
- }
- onBlur() {
- if (!this.element.contains(DOM.activeElement)) {
- this.collapse();
- }
- }
- onSelect(e) {
- e.stopPropagation();
- if (this.ignoreSelectEvent) {
- return;
- }
- const newSelection = e.detail;
- const lastSelection = this.selectedOption;
- if (this.isMultiple) {
- this.synchronizeValue();
- }
- else {
- this.ignoreSelectEvent = true;
- if (lastSelection) {
- lastSelection.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = newSelection;
- this.setValue(newSelection.value);
- if (this.expanded) {
- this.collapse();
- }
- }
- }
- onKeyDown(key) {
- if (this.isDisabled) {
- return;
- }
- // tslint:disable-next-line:switch-default
- switch (key) {
- case UP:
- case DOWN:
- this.moveSelectedIndex(key === UP ? -1 : 1);
- break;
- case ENTER:
- case SPACE:
- this.onKeyboardSelect();
- break;
- }
- return true;
- }
- themeChanged(newValue) {
- if (newValue && !newValue.themeKey) {
- newValue.themeKey = 'ux-select';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- }
- multipleChanged(newValue, oldValue) {
- newValue = bool(newValue);
- oldValue = bool(oldValue);
- const hasChanged = newValue !== oldValue;
- if (hasChanged) {
- this.ignoreSelectEvent = true;
- for (const opt of this.options) {
- opt.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = null;
- this.setValue(newValue
- ? [] // Changing from single to multiple = reset value to empty array
- : null // Changing from multiple to single = reset value to null
- );
- }
- }
- get options() {
- if (!this.optionCtEl) {
- return [];
- }
- const result = [];
- const children = this.optionCtEl.children;
- const ii = children.length;
- for (let i = 0; ii > i; ++i) {
- const element = children[i];
- if (element.nodeName === 'UX-OPTION') {
- result.push(element);
- }
- else if (element.nodeName === 'UX-OPTGROUP') {
- const groupOptions = element.options;
- const jj = groupOptions.length;
- for (let j = 0; jj > j; ++j) {
- result.push(groupOptions[j]);
- }
- }
- }
- return result;
- }
- getOptions() {
- return this.options;
- }
- get isMultiple() {
- return bool(this.multiple);
- }
- get isDisabled() {
- return bool(this.disabled);
- }
-};
-__decorate([
- bindable()
-], UxSelect.prototype, "theme", void 0);
-__decorate([
- bindable()
-], UxSelect.prototype, "autofocus", void 0);
-__decorate([
- bindable({ defaultValue: false })
-], UxSelect.prototype, "disabled", void 0);
-__decorate([
- bindable({ defaultValue: false })
-], UxSelect.prototype, "multiple", void 0);
-__decorate([
- bindable()
-], UxSelect.prototype, "placeholder", void 0);
-__decorate([
- computedFrom('multiple')
-], UxSelect.prototype, "isMultiple", null);
-__decorate([
- computedFrom('disabled')
-], UxSelect.prototype, "isDisabled", null);
-UxSelect = __decorate([
- inject(Element, StyleEngine, ObserverLocator, TaskQueue),
- processContent(extractUxOption),
- customElement('ux-select')
- // @inlineView(UX_SELECT_VIEW)
-], UxSelect);
-export { UxSelect };
-function extractUxOption(_, __, node) {
- if (node.hasAttribute('containerless')) {
- logger.warn('cannot use containerless on . Consider using as-element instead.');
- node.removeAttribute('containerless');
- }
- let currentChild = node.firstChild;
- while (currentChild) {
- const nextSibling = currentChild.nextSibling;
- if (currentChild.nodeName === 'UX-OPTION' || currentChild.nodeName === 'UX-OPTGROUP') {
- currentChild = nextSibling;
- continue;
- }
- node.removeChild(currentChild);
- currentChild = nextSibling;
- }
- return true;
-}
-const UxSelectElementProto = Object.create(HTMLElement.prototype, {
- value: {
- get() {
- return getAuViewModel(this).getValue();
- },
- set(v) {
- return getAuViewModel(this).setValue(v);
- }
- },
- options: {
- get() {
- return getAuViewModel(this).getOptions();
- }
- }
-});
-function defaultMatcher(a, b) {
- return a === b;
-}
diff --git a/packages/select/dist/native-modules/ux-select.js b/packages/select/dist/native-modules/ux-select.js
deleted file mode 100644
index 9e4b5233..00000000
--- a/packages/select/dist/native-modules/ux-select.js
+++ /dev/null
@@ -1,489 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, bindable, computedFrom, DOM, processContent, ElementEvents, inject, PLATFORM, ObserverLocator, TaskQueue, } from 'aurelia-framework';
-import { getLogger } from 'aurelia-logging';
-import { StyleEngine } from '@aurelia-ux/core';
-import { getAuViewModel, bool } from './util';
-var UP = 38;
-// const RIGHT = 39;
-var DOWN = 40;
-// const LEFT = 37;
-// const ESC = 27;
-var ENTER = 13;
-var SPACE = 32;
-var logger = getLogger('ux-select');
-var invalidMultipleValueMsg = 'Only null or Array instances can be bound to a multi-select';
-var selectArrayContext = 'context:ux-select';
-var UxSelect = /** @class */ (function () {
- function UxSelect(element, styleEngine, observerLocator, taskQueue) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.observerLocator = observerLocator;
- this.taskQueue = taskQueue;
- this.selectedOption = null;
- this.ignoreSelectEvent = true;
- // Only chrome persist the element prototype when cloning with clone node
- Object.setPrototypeOf(element, UxSelectElementProto);
- }
- UxSelect.prototype.bind = function () {
- if (bool(this.autofocus)) {
- // setTimeout(focusEl, 0, this.button);
- }
- if (this.isMultiple) {
- if (!this.value) {
- this.value = [];
- }
- else if (!Array.isArray(this.value)) {
- throw new Error(invalidMultipleValueMsg);
- }
- }
- if (!this.winEvents) {
- this.winEvents = new ElementEvents(window);
- }
- // Initially Synchronize options with value of this element
- this.taskQueue.queueMicroTask(this);
- };
- UxSelect.prototype.unbind = function () {
- this.winEvents.disposeAll();
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- this.selectedOption = null;
- };
- UxSelect.prototype.resolveDisplayValue = function () {
- var value = this.value;
- this.displayValue = Array.isArray(value) ? value.slice().sort().join(', ') : value;
- };
- UxSelect.prototype.synchronizeOptions = function () {
- var value = this.value;
- var isArray = Array.isArray(value);
- var options = this.options;
- var matcher = this.element.matcher || defaultMatcher;
- var i = options.length;
- this.ignoreSelectEvent = true;
- var _loop_1 = function () {
- var option = options[i];
- var optionValue = option.value;
- if (isArray) {
- option.selected = value.findIndex(function (item) { return !!matcher(optionValue, item); }) !== -1;
- return "continue";
- }
- option.selected = !!matcher(optionValue, value);
- };
- while (i--) {
- _loop_1();
- }
- this.ignoreSelectEvent = false;
- };
- UxSelect.prototype.synchronizeValue = function () {
- var options = this.options;
- var ii = options.length;
- var count = 0;
- var optionValues = [];
- // extract value from ux-option
- for (var i = 0; i < ii; i++) {
- var option = options[i];
- if (!option.selected) {
- continue;
- }
- optionValues.push(option.value);
- count++;
- }
- if (this.isMultiple) {
- // multi-select
- if (Array.isArray(this.value)) {
- var selectValues = this.value;
- var matcher_1 = this.element.matcher || defaultMatcher;
- // remove items that are no longer selected.
- var i = 0;
- var _loop_2 = function () {
- var a = selectValues[i];
- if (optionValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.splice(i, 1);
- }
- else {
- i++;
- }
- };
- while (i < selectValues.length) {
- _loop_2();
- }
- // add items that have been selected.
- i = 0;
- var _loop_3 = function () {
- var a = optionValues[i];
- if (selectValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.push(a);
- }
- i++;
- };
- while (i < optionValues.length) {
- _loop_3();
- }
- this.resolveDisplayValue();
- return; // don't notify.
- }
- }
- else {
- // single-select
- // tslint:disable-next-line:prefer-conditional-expression
- if (count === 0) {
- optionValues = null;
- }
- else {
- optionValues = optionValues[0];
- }
- this.setValue(optionValues);
- }
- };
- UxSelect.prototype.setupListAnchor = function () {
- var _this = this;
- this.calcAnchorPosition();
- this.winEvents.subscribe('wheel', function (e) {
- if (_this.expanded) {
- if (e.target === PLATFORM.global || !_this.optionWrapperEl.contains(e.target)) {
- _this.collapse();
- }
- }
- }, true);
- };
- UxSelect.prototype.unsetupListAnchor = function () {
- this.listAnchor = null;
- this.winEvents.disposeAll();
- };
- UxSelect.prototype.calcAnchorPosition = function () {
- var elDim = this.container.getBoundingClientRect();
- var offsetY = (48 - elDim.height) / 2;
- this.listAnchor = { x: elDim.left, y: elDim.top - offsetY };
- };
- UxSelect.prototype.onKeyboardSelect = function () {
- if (!this.expanded) {
- return;
- }
- var focusedOption = this.focusedUxOption;
- if (this.isMultiple) {
- if (!focusedOption) {
- return;
- }
- focusedOption.selected = !focusedOption.selected;
- }
- else {
- this.collapse();
- }
- };
- UxSelect.prototype.call = function () {
- this.synchronizeOptions();
- };
- UxSelect.prototype.getValue = function () {
- return this.value;
- };
- UxSelect.prototype.setValue = function (newValue) {
- if (newValue !== null && newValue !== undefined && this.isMultiple && !Array.isArray(newValue)) {
- throw new Error('Only null, undenfined or Array instances can be bound to a multi-select.');
- }
- if (this.value === newValue) {
- return;
- }
- // unsubscribe from old array.
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- if (this.isMultiple) {
- // subscribe to new array.
- if (Array.isArray(newValue)) {
- this.arrayObserver = this.observerLocator.getArrayObserver(newValue);
- this.arrayObserver.subscribe(selectArrayContext, this);
- }
- }
- if (newValue !== this.value) {
- this.value = newValue;
- this.resolveDisplayValue();
- this.element.dispatchEvent(DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxSelect.prototype.expand = function () {
- var _this = this;
- if (this.expanded) {
- return;
- }
- if (this.isExpanding) {
- return;
- }
- this.isExpanding = true;
- this.optionWrapperEl.classList.add('open');
- setTimeout(function () {
- _this.optionCtEl.classList.add('open');
- _this.isExpanding = false;
- _this.expanded = true;
- _this.setFocusedOption(_this.selectedOption);
- }, this.theme.listTransition);
- this.setupListAnchor();
- };
- UxSelect.prototype.collapse = function () {
- var _this = this;
- if (this.isCollapsing) {
- return;
- }
- this.isCollapsing = true;
- this.optionCtEl.classList.remove('open');
- setTimeout(function () {
- _this.optionWrapperEl.classList.remove('open');
- _this.isCollapsing = false;
- _this.expanded = false;
- _this.setFocusedOption(null);
- _this.unsetupListAnchor();
- }, this.theme.listTransition);
- };
- UxSelect.prototype.setFocusedOption = function (focusedOption) {
- var oldFocusedOption = this.focusedUxOption;
- if (focusedOption !== oldFocusedOption) {
- if (oldFocusedOption) {
- oldFocusedOption.focused = false;
- }
- if (focusedOption) {
- focusedOption.focused = true;
- focusedOption.wave();
- focusedOption.scrollIntoView({ block: 'nearest', inline: 'nearest' });
- }
- this.focusedUxOption = focusedOption;
- }
- };
- UxSelect.prototype.moveSelectedIndex = function (offset) {
- var currentIndex = 0;
- var options = this.options;
- if (this.focusedUxOption) {
- currentIndex = options.indexOf(this.focusedUxOption);
- }
- else if (this.selectedOption) {
- currentIndex = options.indexOf(this.selectedOption);
- }
- var nextIndex = currentIndex + offset;
- if (nextIndex > options.length - 1) {
- nextIndex = options.length - 1;
- }
- if (nextIndex < 0) {
- nextIndex = 0;
- }
- var focusedOption = options[nextIndex];
- if (focusedOption.disabled) {
- if (offset > 0) {
- if (nextIndex === options.length - 1) {
- return;
- }
- this.moveSelectedIndex(offset + 1);
- }
- else {
- if (nextIndex < 0) {
- return;
- }
- this.moveSelectedIndex(offset - 1);
- }
- return;
- }
- this.setFocusedOption(focusedOption);
- focusedOption.focused = true;
- if (this.isMultiple) {
- // empty
- }
- else {
- this.ignoreSelectEvent = true;
- if (this.selectedOption) {
- this.selectedOption.selected = false;
- }
- this.selectedOption = focusedOption;
- this.selectedOption.selected = true;
- this.ignoreSelectEvent = false;
- this.setValue(this.selectedOption.value);
- }
- };
- UxSelect.prototype.onTriggerClick = function () {
- if (!this.isDisabled) {
- if (this.expanded) {
- return;
- }
- this.expand();
- }
- };
- UxSelect.prototype.onBlur = function () {
- if (!this.element.contains(DOM.activeElement)) {
- this.collapse();
- }
- };
- UxSelect.prototype.onSelect = function (e) {
- e.stopPropagation();
- if (this.ignoreSelectEvent) {
- return;
- }
- var newSelection = e.detail;
- var lastSelection = this.selectedOption;
- if (this.isMultiple) {
- this.synchronizeValue();
- }
- else {
- this.ignoreSelectEvent = true;
- if (lastSelection) {
- lastSelection.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = newSelection;
- this.setValue(newSelection.value);
- if (this.expanded) {
- this.collapse();
- }
- }
- };
- UxSelect.prototype.onKeyDown = function (key) {
- if (this.isDisabled) {
- return;
- }
- // tslint:disable-next-line:switch-default
- switch (key) {
- case UP:
- case DOWN:
- this.moveSelectedIndex(key === UP ? -1 : 1);
- break;
- case ENTER:
- case SPACE:
- this.onKeyboardSelect();
- break;
- }
- return true;
- };
- UxSelect.prototype.themeChanged = function (newValue) {
- if (newValue && !newValue.themeKey) {
- newValue.themeKey = 'ux-select';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxSelect.prototype.multipleChanged = function (newValue, oldValue) {
- newValue = bool(newValue);
- oldValue = bool(oldValue);
- var hasChanged = newValue !== oldValue;
- if (hasChanged) {
- this.ignoreSelectEvent = true;
- for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
- var opt = _a[_i];
- opt.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = null;
- this.setValue(newValue
- ? [] // Changing from single to multiple = reset value to empty array
- : null // Changing from multiple to single = reset value to null
- );
- }
- };
- Object.defineProperty(UxSelect.prototype, "options", {
- get: function () {
- if (!this.optionCtEl) {
- return [];
- }
- var result = [];
- var children = this.optionCtEl.children;
- var ii = children.length;
- for (var i = 0; ii > i; ++i) {
- var element = children[i];
- if (element.nodeName === 'UX-OPTION') {
- result.push(element);
- }
- else if (element.nodeName === 'UX-OPTGROUP') {
- var groupOptions = element.options;
- var jj = groupOptions.length;
- for (var j = 0; jj > j; ++j) {
- result.push(groupOptions[j]);
- }
- }
- }
- return result;
- },
- enumerable: true,
- configurable: true
- });
- UxSelect.prototype.getOptions = function () {
- return this.options;
- };
- Object.defineProperty(UxSelect.prototype, "isMultiple", {
- get: function () {
- return bool(this.multiple);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(UxSelect.prototype, "isDisabled", {
- get: function () {
- return bool(this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- __decorate([
- bindable()
- ], UxSelect.prototype, "theme", void 0);
- __decorate([
- bindable()
- ], UxSelect.prototype, "autofocus", void 0);
- __decorate([
- bindable({ defaultValue: false })
- ], UxSelect.prototype, "disabled", void 0);
- __decorate([
- bindable({ defaultValue: false })
- ], UxSelect.prototype, "multiple", void 0);
- __decorate([
- bindable()
- ], UxSelect.prototype, "placeholder", void 0);
- __decorate([
- computedFrom('multiple')
- ], UxSelect.prototype, "isMultiple", null);
- __decorate([
- computedFrom('disabled')
- ], UxSelect.prototype, "isDisabled", null);
- UxSelect = __decorate([
- inject(Element, StyleEngine, ObserverLocator, TaskQueue),
- processContent(extractUxOption),
- customElement('ux-select')
- // @inlineView(UX_SELECT_VIEW)
- ], UxSelect);
- return UxSelect;
-}());
-export { UxSelect };
-function extractUxOption(_, __, node) {
- if (node.hasAttribute('containerless')) {
- logger.warn('cannot use containerless on . Consider using as-element instead.');
- node.removeAttribute('containerless');
- }
- var currentChild = node.firstChild;
- while (currentChild) {
- var nextSibling = currentChild.nextSibling;
- if (currentChild.nodeName === 'UX-OPTION' || currentChild.nodeName === 'UX-OPTGROUP') {
- currentChild = nextSibling;
- continue;
- }
- node.removeChild(currentChild);
- currentChild = nextSibling;
- }
- return true;
-}
-var UxSelectElementProto = Object.create(HTMLElement.prototype, {
- value: {
- get: function () {
- return getAuViewModel(this).getValue();
- },
- set: function (v) {
- return getAuViewModel(this).setValue(v);
- }
- },
- options: {
- get: function () {
- return getAuViewModel(this).getOptions();
- }
- }
-});
-function defaultMatcher(a, b) {
- return a === b;
-}
diff --git a/packages/select/dist/system/ux-select.js b/packages/select/dist/system/ux-select.js
deleted file mode 100644
index a8f7abdb..00000000
--- a/packages/select/dist/system/ux-select.js
+++ /dev/null
@@ -1,508 +0,0 @@
-System.register(["aurelia-framework", "aurelia-logging", "@aurelia-ux/core", "./util"], function (exports_1, context_1) {
- "use strict";
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
- };
- var __moduleName = context_1 && context_1.id;
- function extractUxOption(_, __, node) {
- if (node.hasAttribute('containerless')) {
- logger.warn('cannot use containerless on . Consider using as-element instead.');
- node.removeAttribute('containerless');
- }
- var currentChild = node.firstChild;
- while (currentChild) {
- var nextSibling = currentChild.nextSibling;
- if (currentChild.nodeName === 'UX-OPTION' || currentChild.nodeName === 'UX-OPTGROUP') {
- currentChild = nextSibling;
- continue;
- }
- node.removeChild(currentChild);
- currentChild = nextSibling;
- }
- return true;
- }
- function defaultMatcher(a, b) {
- return a === b;
- }
- var aurelia_framework_1, aurelia_logging_1, core_1, util_1, UP, DOWN, ENTER, SPACE, logger, invalidMultipleValueMsg, selectArrayContext, UxSelect, UxSelectElementProto;
- return {
- setters: [
- function (aurelia_framework_1_1) {
- aurelia_framework_1 = aurelia_framework_1_1;
- },
- function (aurelia_logging_1_1) {
- aurelia_logging_1 = aurelia_logging_1_1;
- },
- function (core_1_1) {
- core_1 = core_1_1;
- },
- function (util_1_1) {
- util_1 = util_1_1;
- }
- ],
- execute: function () {
- UP = 38;
- // const RIGHT = 39;
- DOWN = 40;
- // const LEFT = 37;
- // const ESC = 27;
- ENTER = 13;
- SPACE = 32;
- logger = aurelia_logging_1.getLogger('ux-select');
- invalidMultipleValueMsg = 'Only null or Array instances can be bound to a multi-select';
- selectArrayContext = 'context:ux-select';
- UxSelect = /** @class */ (function () {
- function UxSelect(element, styleEngine, observerLocator, taskQueue) {
- this.element = element;
- this.styleEngine = styleEngine;
- this.observerLocator = observerLocator;
- this.taskQueue = taskQueue;
- this.selectedOption = null;
- this.ignoreSelectEvent = true;
- // Only chrome persist the element prototype when cloning with clone node
- Object.setPrototypeOf(element, UxSelectElementProto);
- }
- UxSelect.prototype.bind = function () {
- if (util_1.bool(this.autofocus)) {
- // setTimeout(focusEl, 0, this.button);
- }
- if (this.isMultiple) {
- if (!this.value) {
- this.value = [];
- }
- else if (!Array.isArray(this.value)) {
- throw new Error(invalidMultipleValueMsg);
- }
- }
- if (!this.winEvents) {
- this.winEvents = new aurelia_framework_1.ElementEvents(window);
- }
- // Initially Synchronize options with value of this element
- this.taskQueue.queueMicroTask(this);
- };
- UxSelect.prototype.unbind = function () {
- this.winEvents.disposeAll();
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- this.selectedOption = null;
- };
- UxSelect.prototype.resolveDisplayValue = function () {
- var value = this.value;
- this.displayValue = Array.isArray(value) ? value.slice().sort().join(', ') : value;
- };
- UxSelect.prototype.synchronizeOptions = function () {
- var value = this.value;
- var isArray = Array.isArray(value);
- var options = this.options;
- var matcher = this.element.matcher || defaultMatcher;
- var i = options.length;
- this.ignoreSelectEvent = true;
- var _loop_1 = function () {
- var option = options[i];
- var optionValue = option.value;
- if (isArray) {
- option.selected = value.findIndex(function (item) { return !!matcher(optionValue, item); }) !== -1;
- return "continue";
- }
- option.selected = !!matcher(optionValue, value);
- };
- while (i--) {
- _loop_1();
- }
- this.ignoreSelectEvent = false;
- };
- UxSelect.prototype.synchronizeValue = function () {
- var options = this.options;
- var ii = options.length;
- var count = 0;
- var optionValues = [];
- // extract value from ux-option
- for (var i = 0; i < ii; i++) {
- var option = options[i];
- if (!option.selected) {
- continue;
- }
- optionValues.push(option.value);
- count++;
- }
- if (this.isMultiple) {
- // multi-select
- if (Array.isArray(this.value)) {
- var selectValues = this.value;
- var matcher_1 = this.element.matcher || defaultMatcher;
- // remove items that are no longer selected.
- var i = 0;
- var _loop_2 = function () {
- var a = selectValues[i];
- if (optionValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.splice(i, 1);
- }
- else {
- i++;
- }
- };
- while (i < selectValues.length) {
- _loop_2();
- }
- // add items that have been selected.
- i = 0;
- var _loop_3 = function () {
- var a = optionValues[i];
- if (selectValues.findIndex(function (b) { return matcher_1(a, b); }) === -1) {
- selectValues.push(a);
- }
- i++;
- };
- while (i < optionValues.length) {
- _loop_3();
- }
- this.resolveDisplayValue();
- return; // don't notify.
- }
- }
- else {
- // single-select
- // tslint:disable-next-line:prefer-conditional-expression
- if (count === 0) {
- optionValues = null;
- }
- else {
- optionValues = optionValues[0];
- }
- this.setValue(optionValues);
- }
- };
- UxSelect.prototype.setupListAnchor = function () {
- var _this = this;
- this.calcAnchorPosition();
- this.winEvents.subscribe('wheel', function (e) {
- if (_this.expanded) {
- if (e.target === aurelia_framework_1.PLATFORM.global || !_this.optionWrapperEl.contains(e.target)) {
- _this.collapse();
- }
- }
- }, true);
- };
- UxSelect.prototype.unsetupListAnchor = function () {
- this.listAnchor = null;
- this.winEvents.disposeAll();
- };
- UxSelect.prototype.calcAnchorPosition = function () {
- var elDim = this.container.getBoundingClientRect();
- var offsetY = (48 - elDim.height) / 2;
- this.listAnchor = { x: elDim.left, y: elDim.top - offsetY };
- };
- UxSelect.prototype.onKeyboardSelect = function () {
- if (!this.expanded) {
- return;
- }
- var focusedOption = this.focusedUxOption;
- if (this.isMultiple) {
- if (!focusedOption) {
- return;
- }
- focusedOption.selected = !focusedOption.selected;
- }
- else {
- this.collapse();
- }
- };
- UxSelect.prototype.call = function () {
- this.synchronizeOptions();
- };
- UxSelect.prototype.getValue = function () {
- return this.value;
- };
- UxSelect.prototype.setValue = function (newValue) {
- if (newValue !== null && newValue !== undefined && this.isMultiple && !Array.isArray(newValue)) {
- throw new Error('Only null, undenfined or Array instances can be bound to a multi-select.');
- }
- if (this.value === newValue) {
- return;
- }
- // unsubscribe from old array.
- if (this.arrayObserver) {
- this.arrayObserver.unsubscribe(selectArrayContext, this);
- this.arrayObserver = null;
- }
- if (this.isMultiple) {
- // subscribe to new array.
- if (Array.isArray(newValue)) {
- this.arrayObserver = this.observerLocator.getArrayObserver(newValue);
- this.arrayObserver.subscribe(selectArrayContext, this);
- }
- }
- if (newValue !== this.value) {
- this.value = newValue;
- this.resolveDisplayValue();
- this.element.dispatchEvent(aurelia_framework_1.DOM.createCustomEvent('change', { bubbles: true }));
- }
- };
- UxSelect.prototype.expand = function () {
- var _this = this;
- if (this.expanded) {
- return;
- }
- if (this.isExpanding) {
- return;
- }
- this.isExpanding = true;
- this.optionWrapperEl.classList.add('open');
- setTimeout(function () {
- _this.optionCtEl.classList.add('open');
- _this.isExpanding = false;
- _this.expanded = true;
- _this.setFocusedOption(_this.selectedOption);
- }, this.theme.listTransition);
- this.setupListAnchor();
- };
- UxSelect.prototype.collapse = function () {
- var _this = this;
- if (this.isCollapsing) {
- return;
- }
- this.isCollapsing = true;
- this.optionCtEl.classList.remove('open');
- setTimeout(function () {
- _this.optionWrapperEl.classList.remove('open');
- _this.isCollapsing = false;
- _this.expanded = false;
- _this.setFocusedOption(null);
- _this.unsetupListAnchor();
- }, this.theme.listTransition);
- };
- UxSelect.prototype.setFocusedOption = function (focusedOption) {
- var oldFocusedOption = this.focusedUxOption;
- if (focusedOption !== oldFocusedOption) {
- if (oldFocusedOption) {
- oldFocusedOption.focused = false;
- }
- if (focusedOption) {
- focusedOption.focused = true;
- focusedOption.wave();
- focusedOption.scrollIntoView({ block: 'nearest', inline: 'nearest' });
- }
- this.focusedUxOption = focusedOption;
- }
- };
- UxSelect.prototype.moveSelectedIndex = function (offset) {
- var currentIndex = 0;
- var options = this.options;
- if (this.focusedUxOption) {
- currentIndex = options.indexOf(this.focusedUxOption);
- }
- else if (this.selectedOption) {
- currentIndex = options.indexOf(this.selectedOption);
- }
- var nextIndex = currentIndex + offset;
- if (nextIndex > options.length - 1) {
- nextIndex = options.length - 1;
- }
- if (nextIndex < 0) {
- nextIndex = 0;
- }
- var focusedOption = options[nextIndex];
- if (focusedOption.disabled) {
- if (offset > 0) {
- if (nextIndex === options.length - 1) {
- return;
- }
- this.moveSelectedIndex(offset + 1);
- }
- else {
- if (nextIndex < 0) {
- return;
- }
- this.moveSelectedIndex(offset - 1);
- }
- return;
- }
- this.setFocusedOption(focusedOption);
- focusedOption.focused = true;
- if (this.isMultiple) {
- // empty
- }
- else {
- this.ignoreSelectEvent = true;
- if (this.selectedOption) {
- this.selectedOption.selected = false;
- }
- this.selectedOption = focusedOption;
- this.selectedOption.selected = true;
- this.ignoreSelectEvent = false;
- this.setValue(this.selectedOption.value);
- }
- };
- UxSelect.prototype.onTriggerClick = function () {
- if (!this.isDisabled) {
- if (this.expanded) {
- return;
- }
- this.expand();
- }
- };
- UxSelect.prototype.onBlur = function () {
- if (!this.element.contains(aurelia_framework_1.DOM.activeElement)) {
- this.collapse();
- }
- };
- UxSelect.prototype.onSelect = function (e) {
- e.stopPropagation();
- if (this.ignoreSelectEvent) {
- return;
- }
- var newSelection = e.detail;
- var lastSelection = this.selectedOption;
- if (this.isMultiple) {
- this.synchronizeValue();
- }
- else {
- this.ignoreSelectEvent = true;
- if (lastSelection) {
- lastSelection.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = newSelection;
- this.setValue(newSelection.value);
- if (this.expanded) {
- this.collapse();
- }
- }
- };
- UxSelect.prototype.onKeyDown = function (key) {
- if (this.isDisabled) {
- return;
- }
- // tslint:disable-next-line:switch-default
- switch (key) {
- case UP:
- case DOWN:
- this.moveSelectedIndex(key === UP ? -1 : 1);
- break;
- case ENTER:
- case SPACE:
- this.onKeyboardSelect();
- break;
- }
- return true;
- };
- UxSelect.prototype.themeChanged = function (newValue) {
- if (newValue && !newValue.themeKey) {
- newValue.themeKey = 'ux-select';
- }
- this.styleEngine.applyTheme(newValue, this.element);
- };
- UxSelect.prototype.multipleChanged = function (newValue, oldValue) {
- newValue = util_1.bool(newValue);
- oldValue = util_1.bool(oldValue);
- var hasChanged = newValue !== oldValue;
- if (hasChanged) {
- this.ignoreSelectEvent = true;
- for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
- var opt = _a[_i];
- opt.selected = false;
- }
- this.ignoreSelectEvent = false;
- this.selectedOption = null;
- this.setValue(newValue
- ? [] // Changing from single to multiple = reset value to empty array
- : null // Changing from multiple to single = reset value to null
- );
- }
- };
- Object.defineProperty(UxSelect.prototype, "options", {
- get: function () {
- if (!this.optionCtEl) {
- return [];
- }
- var result = [];
- var children = this.optionCtEl.children;
- var ii = children.length;
- for (var i = 0; ii > i; ++i) {
- var element = children[i];
- if (element.nodeName === 'UX-OPTION') {
- result.push(element);
- }
- else if (element.nodeName === 'UX-OPTGROUP') {
- var groupOptions = element.options;
- var jj = groupOptions.length;
- for (var j = 0; jj > j; ++j) {
- result.push(groupOptions[j]);
- }
- }
- }
- return result;
- },
- enumerable: true,
- configurable: true
- });
- UxSelect.prototype.getOptions = function () {
- return this.options;
- };
- Object.defineProperty(UxSelect.prototype, "isMultiple", {
- get: function () {
- return util_1.bool(this.multiple);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(UxSelect.prototype, "isDisabled", {
- get: function () {
- return util_1.bool(this.disabled);
- },
- enumerable: true,
- configurable: true
- });
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "theme", void 0);
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "autofocus", void 0);
- __decorate([
- aurelia_framework_1.bindable({ defaultValue: false })
- ], UxSelect.prototype, "disabled", void 0);
- __decorate([
- aurelia_framework_1.bindable({ defaultValue: false })
- ], UxSelect.prototype, "multiple", void 0);
- __decorate([
- aurelia_framework_1.bindable()
- ], UxSelect.prototype, "placeholder", void 0);
- __decorate([
- aurelia_framework_1.computedFrom('multiple')
- ], UxSelect.prototype, "isMultiple", null);
- __decorate([
- aurelia_framework_1.computedFrom('disabled')
- ], UxSelect.prototype, "isDisabled", null);
- UxSelect = __decorate([
- aurelia_framework_1.inject(Element, core_1.StyleEngine, aurelia_framework_1.ObserverLocator, aurelia_framework_1.TaskQueue),
- aurelia_framework_1.processContent(extractUxOption),
- aurelia_framework_1.customElement('ux-select')
- // @inlineView(UX_SELECT_VIEW)
- ], UxSelect);
- return UxSelect;
- }());
- exports_1("UxSelect", UxSelect);
- UxSelectElementProto = Object.create(HTMLElement.prototype, {
- value: {
- get: function () {
- return util_1.getAuViewModel(this).getValue();
- },
- set: function (v) {
- return util_1.getAuViewModel(this).setValue(v);
- }
- },
- options: {
- get: function () {
- return util_1.getAuViewModel(this).getOptions();
- }
- }
- });
- }
- };
-});
diff --git a/packages/switch/dist/amd/index.js b/packages/switch/dist/amd/index.js
index 684bbbce..d43426b8 100644
--- a/packages/switch/dist/amd/index.js
+++ b/packages/switch/dist/amd/index.js
@@ -1,215 +1,208 @@
define('@aurelia-ux/switch', ['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection', '@aurelia-ux/core', 'aurelia-framework'], function (exports, aureliaTemplating, aureliaBinding, aureliaDependencyInjection, core, aureliaFramework) { 'use strict';
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-
-
-
-
-
-
-function __decorate(decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
+ /*! *****************************************************************************
+ Copyright (c) Microsoft Corporation. All rights reserved.
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+ this file except in compliance with the License. You may obtain a copy of the
+ License at http://www.apache.org/licenses/LICENSE-2.0
+
+ THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+ WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+ MERCHANTABLITY OR NON-INFRINGEMENT.
+
+ See the Apache Version 2.0 License for specific language governing permissions
+ and limitations under the License.
+ ***************************************************************************** */
+
+ function __decorate(decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ }
-var UX_SWITCH_VIEW = "