Socket
Socket
Sign inDemoInstall

@duetds/components

Package Overview
Dependencies
Maintainers
2
Versions
593
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@duetds/components - npm Package Compare versions

Comparing version 0.0.1-alpha.36 to 0.0.1-alpha.37

lib/cjs/es5/build/chunk-c2992f71.js
lib/collection/assets/css-framework/duet.css
lib/collection/utils/createUniqueId.js
lib/duet/chunk-701dc2a6.es5.js
lib/duet/chunk-c2992f71.js
lib/esm/es2017/build/chunk-c2992f71.js
lib/esm/es5/build/chunk-c2992f71.js
lib/types/utils/createUniqueId.d.ts

108

lib/cjs/es5/build/duet-input.entry.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var duet_core_js_1 = require("../duet.core.js");
var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var chunk_c2992f71_js_1 = require("./chunk-c2992f71.js");
var DuetInput = /** @class */ (function () {

@@ -16,6 +16,2 @@ function DuetInput() {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -29,4 +25,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -50,15 +50,39 @@ /**

}
DuetInput.prototype.handleInput = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
DuetInput.prototype.handleClick = function (e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleBlur = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
DuetInput.prototype.handleInput = function (e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleFocus = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
DuetInput.prototype.handleBlur = function (e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
};
/**
* Handle focus event
*/
DuetInput.prototype.handleFocus = function (e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
};
/**
* componentDidLoad() function

@@ -69,7 +93,7 @@ */

// When component loads, check if global Turva theme exists.
chunk_e639420f_js_1.a(this.element);
chunk_c2992f71_js_1.a(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
chunk_e639420f_js_1.a(_this.element);
chunk_c2992f71_js_1.a(_this.element);
});

@@ -95,7 +119,22 @@ // Observe for className changes in <html> element.

var _this = this;
var classes = chunk_e639420f_js_1.b("duet-input", "" + this.variation, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
var containerClasses = chunk_c2992f71_js_1.b("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (duet_core_js_1.h("div", null, duet_core_js_1.h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label), duet_core_js_1.h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, role: this.role, name: this.name, id: this.identifier }), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
var inputClasses = chunk_c2992f71_js_1.b("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
var regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
var regex = this.pattern ? this.pattern : regexType;
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), duet_core_js_1.h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (duet_core_js_1.h("div", { class: "duet-input-icon", innerHTML: chunk_c2992f71_js_1.c["form-" + this.type].svg })) : (""), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -194,2 +233,6 @@ Object.defineProperty(DuetInput, "is", {

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -214,7 +257,4 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}

@@ -229,4 +269,4 @@ };

return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -236,4 +276,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -243,7 +283,13 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}];

@@ -255,3 +301,3 @@ },

Object.defineProperty(DuetInput, "style", {
get: function () { return ".duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; },
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden .duet-label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva .duet-input-icon {\n color: #c60c30;\n}\n\n.duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon .duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva .duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva .duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled], .duet-input.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva .duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva .duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number]::-webkit-inner-spin-button, .duet-input[type=number]::-webkit-outer-spin-button, .duet-input[type=time]::-webkit-inner-spin-button, .duet-input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; },
enumerable: true,

@@ -258,0 +304,0 @@ configurable: true

108

lib/cjs/es5/build/duet-input.sc.entry.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var duet_core_js_1 = require("../duet.core.js");
var chunk_e639420f_js_1 = require("./chunk-e639420f.js");
var chunk_c2992f71_js_1 = require("./chunk-c2992f71.js");
var DuetInput = /** @class */ (function () {

@@ -16,6 +16,2 @@ function DuetInput() {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -29,4 +25,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -50,15 +50,39 @@ /**

}
DuetInput.prototype.handleInput = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
DuetInput.prototype.handleClick = function (e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleBlur = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
DuetInput.prototype.handleInput = function (e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleFocus = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
DuetInput.prototype.handleBlur = function (e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
};
/**
* Handle focus event
*/
DuetInput.prototype.handleFocus = function (e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
};
/**
* componentDidLoad() function

@@ -69,7 +93,7 @@ */

// When component loads, check if global Turva theme exists.
chunk_e639420f_js_1.a(this.element);
chunk_c2992f71_js_1.a(this.element);
// Create mutation observer and apply needed theme classes
// inside Shadow DOM when necessary.
this.mutationObserver = new MutationObserver(function () {
chunk_e639420f_js_1.a(_this.element);
chunk_c2992f71_js_1.a(_this.element);
});

@@ -95,7 +119,22 @@ // Observe for className changes in <html> element.

var _this = this;
var classes = chunk_e639420f_js_1.b("duet-input", "" + this.variation, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
var containerClasses = chunk_c2992f71_js_1.b("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (duet_core_js_1.h("div", null, duet_core_js_1.h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label), duet_core_js_1.h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, role: this.role, name: this.name, id: this.identifier }), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
var inputClasses = chunk_c2992f71_js_1.b("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
var regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
var regex = this.pattern ? this.pattern : regexType;
return (duet_core_js_1.h("div", { class: containerClasses }, duet_core_js_1.h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), duet_core_js_1.h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (duet_core_js_1.h("div", { class: "duet-input-icon", innerHTML: chunk_c2992f71_js_1.c["form-" + this.type].svg })) : (""), duet_core_js_1.h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -194,2 +233,6 @@ Object.defineProperty(DuetInput, "is", {

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -214,7 +257,4 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}

@@ -229,4 +269,4 @@ };

return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -236,4 +276,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -243,7 +283,13 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}];

@@ -255,3 +301,3 @@ },

Object.defineProperty(DuetInput, "style", {
get: function () { return ".duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; },
get: function () { return ".sc-duet-input-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden.sc-duet-input .duet-label.sc-duet-input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon.sc-duet-input {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input {\n color: #c60c30;\n}\n\n.duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon.sc-duet-input .duet-input.sc-duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled].sc-duet-input, .duet-input.disabled.sc-duet-input {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=number].sc-duet-input::-webkit-outer-spin-button, .duet-input[type=time].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=time].sc-duet-input::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; },
enumerable: true,

@@ -258,0 +304,0 @@ configurable: true

2

lib/cjs/es5/duet.components.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Duet: Host Data, ES Module/es5 Target
exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["icon", 1, 0, 1, 2], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]];
exports.COMPONENTS = [["duet-button", "duet-button", 1, [["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleExpanded", 1, 0, "accessible-expanded", 4], ["accessibleLabel", 1, 0, "accessible-label", 2], ["accessiblePressed", 1, 0, "accessible-pressed", 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["external", 1, 0, 1, 4], ["icon", 1, 0, 1, 2], ["identifier", 1, 0, 1, 2], ["submit", 1, 0, 1, 4], ["theme", 1, 0, 1, 2], ["url", 1, 0, 1, 2], ["variation", 1, 0, 1, 2]], 1], ["duet-input", "duet-input", 1, [["accessibleActiveDescendant", 1, 0, "accessible-active-descendant", 2], ["accessibleAutocomplete", 1, 0, "accessible-autocomplete", 2], ["accessibleControls", 1, 0, "accessible-controls", 2], ["accessibleOwns", 1, 0, "accessible-owns", 2], ["autoComplete", 1, 0, "auto-complete", 2], ["autofocus", 1, 0, 1, 4], ["disabled", 1, 0, 1, 4], ["element", 64], ["expand", 1, 0, 1, 4], ["helpText", 1, 0, "help-text", 2], ["identifier", 1, 0, 1, 2], ["inputPrefix", 1, 0, "input-prefix", 2], ["inputSuffix", 1, 0, "input-suffix", 2], ["label", 1, 0, 1, 2], ["labelHidden", 1, 0, "label-hidden", 4], ["maxLength", 1, 0, "max-length", 8], ["minLength", 1, 0, "min-length", 8], ["name", 1, 0, 1, 2], ["pattern", 1, 0, 1, 2], ["placeholder", 1, 0, 1, 2], ["required", 1, 0, 1, 4], ["role", 1, 0, 1, 2], ["spellCheck", 1, 0, "spell-check", 4], ["theme", 1, 0, 1, 2], ["type", 1, 0, 1, 2], ["value", 2, 1, 1, 2]], 1], ["duet-spinner", "duet-button", 1, [["accessibleLabel", 1, 0, "accessible-label", 2], ["color", 1, 0, 1, 2], ["size", 1, 0, 1, 2]], 1]];

20

lib/collection/collection-manifest.json

@@ -209,2 +209,7 @@ {

{
"name": "required",
"type": "Boolean",
"attr": "required"
},
{
"name": "role",

@@ -233,8 +238,4 @@ "type": "String",

"mutable": true,
"reflectToAttr": true,
"attr": "value"
},
{
"name": "variation",
"type": "String",
"attr": "variation"
}

@@ -247,9 +248,12 @@ ],

{
"event": "onBlur"
"event": "blurred"
},
{
"event": "onFocus"
"event": "clicked"
},
{
"event": "onInput"
"event": "focused"
},
{
"event": "typed"
}

@@ -256,0 +260,0 @@ ],

9

lib/collection/components/duet-button/duet-button.js

@@ -99,2 +99,6 @@ import { applyThemeClasses } from "../../utils/applyThemeClasses";

render() {
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for button type and classes used.

@@ -106,3 +110,2 @@ const type = this.submit ? "submit" : "button";

const buttonClasses = classNames("duet-button", `${this.variation}`, {
expand: this.expand,
disabled: this.disabled,

@@ -115,3 +118,3 @@ icon: this.icon !== "",

h("a", { href: this.url, class: buttonClasses, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
this.icon ? h("span", { innerHTML: duetIcons[this.icon].svg }) : "",
this.icon !== "" ? h("span", { innerHTML: duetIcons[this.icon].svg }) : "",
h("slot", null)),

@@ -124,3 +127,3 @@ this.variation === "loading" ? h("duet-spinner", null) : ""));

h("button", { type: type, class: buttonClasses, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
this.icon ? h("span", { innerHTML: duetIcons[this.icon].svg }) : "",
this.icon !== "" ? h("span", { innerHTML: duetIcons[this.icon].svg }) : "",
h("slot", null)),

@@ -127,0 +130,0 @@ this.variation === "loading" ? h("duet-spinner", null) : ""));

106

lib/collection/components/duet-input/duet-input.js
import { applyThemeClasses } from "../../utils/applyThemeClasses";
import classNames from "classnames";
import duetIcons from "@duetds/icons";
export class DuetInput {

@@ -14,6 +15,2 @@ constructor() {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -27,4 +24,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -48,15 +49,39 @@ /**

}
handleInput(ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
handleClick(e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
}
handleBlur(ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
handleInput(e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
}
handleFocus(ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
handleBlur(e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
}
/**
* Handle focus event
*/
handleFocus(e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
}
/**
* componentDidLoad() function

@@ -90,9 +115,25 @@ */

render() {
const classes = classNames("duet-input", `${this.variation}`, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
const containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null,
h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label),
h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), role: this.role, name: this.name, id: this.identifier }),
const inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
let regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
const regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses },
h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label),
h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: ev => this.handleClick(ev), onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }),
this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""),
h("span", { class: "duet-input-help" }, this.helpText)));

@@ -182,2 +223,6 @@ }

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -202,12 +247,9 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}
}; }
static get events() { return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -217,4 +259,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -224,9 +266,15 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return "/**style-placeholder:duet-input:**/"; }
}

109

lib/duet/duet-input.entry.js
const h = window.Duet.h;
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as applyThemeClasses, b as classNames, c as duetIcons } from './chunk-c2992f71.js';

@@ -16,6 +16,2 @@ class DuetInput {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -29,4 +25,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -50,15 +50,39 @@ /**

}
handleInput(ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
handleClick(e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
}
handleBlur(ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
handleInput(e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
}
handleFocus(ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
handleBlur(e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
}
/**
* Handle focus event
*/
handleFocus(e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
}
/**
* componentDidLoad() function

@@ -92,9 +116,25 @@ */

render() {
const classes = classNames("duet-input", `${this.variation}`, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
const containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null,
h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label),
h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), role: this.role, name: this.name, id: this.identifier }),
const inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
let regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
const regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses },
h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label),
h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: ev => this.handleClick(ev), onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }),
this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""),
h("span", { class: "duet-input-help" }, this.helpText)));

@@ -184,2 +224,6 @@ }

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -204,12 +248,9 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}
}; }
static get events() { return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -219,4 +260,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -226,11 +267,17 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return ".duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; }
static get style() { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden .duet-label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva .duet-input-icon {\n color: #c60c30;\n}\n\n.duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon .duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva .duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva .duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled], .duet-input.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva .duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva .duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number]::-webkit-inner-spin-button, .duet-input[type=number]::-webkit-outer-spin-button, .duet-input[type=time]::-webkit-inner-spin-button, .duet-input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; }
}
export { DuetInput };

104

lib/duet/duet-input.es5.entry.js

@@ -1,2 +0,2 @@

Duet.loadBundle('duet-input', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
Duet.loadBundle('duet-input', ['exports', './chunk-701dc2a6.js'], function (exports, __chunk_1) {
var h = window.Duet.h;

@@ -14,6 +14,2 @@ var DuetInput = /** @class */ (function () {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -27,4 +23,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -48,15 +48,39 @@ /**

}
DuetInput.prototype.handleInput = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
DuetInput.prototype.handleClick = function (e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleBlur = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
DuetInput.prototype.handleInput = function (e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleFocus = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
DuetInput.prototype.handleBlur = function (e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
};
/**
* Handle focus event
*/
DuetInput.prototype.handleFocus = function (e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
};
/**
* componentDidLoad() function

@@ -92,7 +116,22 @@ */

var _this = this;
var classes = __chunk_1.classNames("duet-input", "" + this.variation, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
var containerClasses = __chunk_1.classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null, h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label), h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, role: this.role, name: this.name, id: this.identifier }), h("span", { class: "duet-input-help" }, this.helpText)));
var inputClasses = __chunk_1.classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
var regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
var regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses }, h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: __chunk_1.duetIcons["form-" + this.type].svg })) : (""), h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -191,2 +230,6 @@ Object.defineProperty(DuetInput, "is", {

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -211,7 +254,4 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}

@@ -226,4 +266,4 @@ };

return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -233,4 +273,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -240,7 +280,13 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}];

@@ -252,3 +298,3 @@ },

Object.defineProperty(DuetInput, "style", {
get: function () { return ".duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; },
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden .duet-label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva .duet-input-icon {\n color: #c60c30;\n}\n\n.duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon .duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva .duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva .duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled], .duet-input.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva .duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva .duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number]::-webkit-inner-spin-button, .duet-input[type=number]::-webkit-outer-spin-button, .duet-input[type=time]::-webkit-inner-spin-button, .duet-input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; },
enumerable: true,

@@ -255,0 +301,0 @@ configurable: true

109

lib/duet/duet-input.sc.entry.js
const h = window.Duet.h;
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as applyThemeClasses, b as classNames, c as duetIcons } from './chunk-c2992f71.js';

@@ -16,6 +16,2 @@ class DuetInput {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -29,4 +25,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -50,15 +50,39 @@ /**

}
handleInput(ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
handleClick(e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
}
handleBlur(ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
handleInput(e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
}
handleFocus(ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
handleBlur(e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
}
/**
* Handle focus event
*/
handleFocus(e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
}
/**
* componentDidLoad() function

@@ -92,9 +116,25 @@ */

render() {
const classes = classNames("duet-input", `${this.variation}`, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
const containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null,
h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label),
h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), role: this.role, name: this.name, id: this.identifier }),
const inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
let regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
const regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses },
h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label),
h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: ev => this.handleClick(ev), onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }),
this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""),
h("span", { class: "duet-input-help" }, this.helpText)));

@@ -184,2 +224,6 @@ }

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -204,12 +248,9 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}
}; }
static get events() { return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -219,4 +260,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -226,11 +267,17 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return ".duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; }
static get style() { return ".sc-duet-input-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden.sc-duet-input .duet-label.sc-duet-input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon.sc-duet-input {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input {\n color: #c60c30;\n}\n\n.duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon.sc-duet-input .duet-input.sc-duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled].sc-duet-input, .duet-input.disabled.sc-duet-input {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=number].sc-duet-input::-webkit-outer-spin-button, .duet-input[type=time].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=time].sc-duet-input::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; }
}
export { DuetInput };

104

lib/duet/duet-input.sc.es5.entry.js

@@ -1,2 +0,2 @@

Duet.loadBundle('duet-input', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
Duet.loadBundle('duet-input', ['exports', './chunk-701dc2a6.js'], function (exports, __chunk_1) {
var h = window.Duet.h;

@@ -14,6 +14,2 @@ var DuetInput = /** @class */ (function () {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -27,4 +23,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -48,15 +48,39 @@ /**

}
DuetInput.prototype.handleInput = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
DuetInput.prototype.handleClick = function (e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleBlur = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
DuetInput.prototype.handleInput = function (e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleFocus = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
DuetInput.prototype.handleBlur = function (e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
};
/**
* Handle focus event
*/
DuetInput.prototype.handleFocus = function (e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
};
/**
* componentDidLoad() function

@@ -92,7 +116,22 @@ */

var _this = this;
var classes = __chunk_1.classNames("duet-input", "" + this.variation, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
var containerClasses = __chunk_1.classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null, h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label), h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, role: this.role, name: this.name, id: this.identifier }), h("span", { class: "duet-input-help" }, this.helpText)));
var inputClasses = __chunk_1.classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
var regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
var regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses }, h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: __chunk_1.duetIcons["form-" + this.type].svg })) : (""), h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -191,2 +230,6 @@ Object.defineProperty(DuetInput, "is", {

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -211,7 +254,4 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}

@@ -226,4 +266,4 @@ };

return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -233,4 +273,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -240,7 +280,13 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}];

@@ -252,3 +298,3 @@ },

Object.defineProperty(DuetInput, "style", {
get: function () { return ".duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; },
get: function () { return ".sc-duet-input-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden.sc-duet-input .duet-label.sc-duet-input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon.sc-duet-input {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input {\n color: #c60c30;\n}\n\n.duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon.sc-duet-input .duet-input.sc-duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled].sc-duet-input, .duet-input.disabled.sc-duet-input {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=number].sc-duet-input::-webkit-outer-spin-button, .duet-input[type=time].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=time].sc-duet-input::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; },
enumerable: true,

@@ -255,0 +301,0 @@ configurable: true

109

lib/esm/es2017/build/duet-input.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as applyThemeClasses, b as classNames, c as duetIcons } from './chunk-c2992f71.js';

@@ -16,6 +16,2 @@ class DuetInput {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -29,4 +25,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -50,15 +50,39 @@ /**

}
handleInput(ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
handleClick(e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
}
handleBlur(ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
handleInput(e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
}
handleFocus(ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
handleBlur(e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
}
/**
* Handle focus event
*/
handleFocus(e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
}
/**
* componentDidLoad() function

@@ -92,9 +116,25 @@ */

render() {
const classes = classNames("duet-input", `${this.variation}`, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
const containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null,
h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label),
h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), role: this.role, name: this.name, id: this.identifier }),
const inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
let regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
const regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses },
h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label),
h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: ev => this.handleClick(ev), onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }),
this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""),
h("span", { class: "duet-input-help" }, this.helpText)));

@@ -184,2 +224,6 @@ }

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -204,12 +248,9 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}
}; }
static get events() { return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -219,4 +260,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -226,11 +267,17 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return ".duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; }
static get style() { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden .duet-label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva .duet-input-icon {\n color: #c60c30;\n}\n\n.duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon .duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva .duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva .duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled], .duet-input.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva .duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva .duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number]::-webkit-inner-spin-button, .duet-input[type=number]::-webkit-outer-spin-button, .duet-input[type=time]::-webkit-inner-spin-button, .duet-input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; }
}
export { DuetInput };

109

lib/esm/es2017/build/duet-input.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as applyThemeClasses, b as classNames, c as duetIcons } from './chunk-c2992f71.js';

@@ -16,6 +16,2 @@ class DuetInput {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -29,4 +25,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -50,15 +50,39 @@ /**

}
handleInput(ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
handleClick(e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
}
handleBlur(ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
handleInput(e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
}
handleFocus(ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
handleBlur(e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
}
/**
* Handle focus event
*/
handleFocus(e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
}
/**
* componentDidLoad() function

@@ -92,9 +116,25 @@ */

render() {
const classes = classNames("duet-input", `${this.variation}`, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
const containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null,
h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label),
h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), role: this.role, name: this.name, id: this.identifier }),
const inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
let regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
const regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses },
h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label),
h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: ev => this.handleClick(ev), onInput: ev => this.handleInput(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }),
this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""),
h("span", { class: "duet-input-help" }, this.helpText)));

@@ -184,2 +224,6 @@ }

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -204,12 +248,9 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}
}; }
static get events() { return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -219,4 +260,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -226,11 +267,17 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return ".duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; }
static get style() { return ".sc-duet-input-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden.sc-duet-input .duet-label.sc-duet-input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon.sc-duet-input {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input {\n color: #c60c30;\n}\n\n.duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon.sc-duet-input .duet-input.sc-duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled].sc-duet-input, .duet-input.disabled.sc-duet-input {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=number].sc-duet-input::-webkit-outer-spin-button, .duet-input[type=time].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=time].sc-duet-input::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; }
}
export { DuetInput };

2

lib/esm/es2017/duet.components.js
// Duet: Host Data, ES Module/es2017 Target
export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]
export const COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["required",1,0,1,4],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,1,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]

104

lib/esm/es5/build/duet-input.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as applyThemeClasses, b as classNames, c as duetIcons } from './chunk-c2992f71.js';
var DuetInput = /** @class */ (function () {

@@ -14,6 +14,2 @@ function DuetInput() {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -27,4 +23,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -48,15 +48,39 @@ /**

}
DuetInput.prototype.handleInput = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
DuetInput.prototype.handleClick = function (e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleBlur = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
DuetInput.prototype.handleInput = function (e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleFocus = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
DuetInput.prototype.handleBlur = function (e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
};
/**
* Handle focus event
*/
DuetInput.prototype.handleFocus = function (e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
};
/**
* componentDidLoad() function

@@ -92,7 +116,22 @@ */

var _this = this;
var classes = classNames("duet-input", "" + this.variation, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
var containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null, h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label), h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, role: this.role, name: this.name, id: this.identifier }), h("span", { class: "duet-input-help" }, this.helpText)));
var inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
var regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
var regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses }, h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""), h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -191,2 +230,6 @@ Object.defineProperty(DuetInput, "is", {

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -211,7 +254,4 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}

@@ -226,4 +266,4 @@ };

return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -233,4 +273,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -240,7 +280,13 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}];

@@ -252,3 +298,3 @@ },

Object.defineProperty(DuetInput, "style", {
get: function () { return ".duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; },
get: function () { return ":host {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden .duet-label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva .duet-input-icon {\n color: #c60c30;\n}\n\n.duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon .duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva .duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva .duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva .duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled], .duet-input.disabled {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva .duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva .duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number]::-webkit-inner-spin-button, .duet-input[type=number]::-webkit-outer-spin-button, .duet-input[type=time]::-webkit-inner-spin-button, .duet-input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; },
enumerable: true,

@@ -255,0 +301,0 @@ configurable: true

104

lib/esm/es5/build/duet-input.sc.entry.js
import { h } from '../duet.core.js';
import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js';
import { a as applyThemeClasses, b as classNames, c as duetIcons } from './chunk-c2992f71.js';
var DuetInput = /** @class */ (function () {

@@ -14,6 +14,2 @@ function DuetInput() {

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
this.variation = "default";
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -27,4 +23,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
this.required = false;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
this.type = "text";

@@ -48,15 +48,39 @@ /**

}
DuetInput.prototype.handleInput = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onInput.emit(this.value);
/**
* Handle click event
*/
DuetInput.prototype.handleClick = function (e) {
if (!this.disabled) {
this.clicked.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleBlur = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onBlur.emit(this.value);
/**
* Handle user input event
*/
DuetInput.prototype.handleInput = function (e) {
if (!this.disabled) {
this.typed.emit(e);
}
e.cancelBubble = true;
};
DuetInput.prototype.handleFocus = function (ev) {
this.value = ev.target ? ev.target.value : null;
this.onFocus.emit(this.value);
/**
* Handle blur event
*/
DuetInput.prototype.handleBlur = function (e) {
if (!this.disabled) {
this.blurred.emit(e);
}
e.cancelBubble = true;
};
/**
* Handle focus event
*/
DuetInput.prototype.handleFocus = function (e) {
if (!this.disabled) {
this.focused.emit(e);
}
e.cancelBubble = true;
};
/**
* componentDidLoad() function

@@ -92,7 +116,22 @@ */

var _this = this;
var classes = classNames("duet-input", "" + this.variation, {
expand: this.expand,
// If user wants expanded component, add necessary classes
if (this.expand) {
this.element.classList.add("duet-expand");
}
// Set constants for input type and classes used.
var containerClasses = classNames("duet-input-container", {
"duet-theme-turva": this.theme === "turva",
"duet-label-hidden": this.labelHidden,
"has-icon": this.type !== "text" && this.type !== "number" && this.type !== "password",
});
return (h("div", null, h("label", { class: "duet-input-label", htmlFor: this.identifier }, this.label), h("input", { type: this.type, class: classes, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: this.pattern, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, role: this.role, name: this.name, id: this.identifier }), h("span", { class: "duet-input-help" }, this.helpText)));
var inputClasses = classNames("duet-input", {
disabled: this.disabled,
});
// Set validation regexes
var regexType = false;
if (this.type === "tel") {
regexType = "[0-9+ ]+";
}
var regex = this.pattern ? this.pattern : regexType;
return (h("div", { class: containerClasses }, h("label", { class: "duet-label", htmlFor: this.identifier || "item" }, this.label), h("input", { type: this.type, class: inputClasses, value: this.value, autofocus: this.autofocus, disabled: this.disabled, "label-hidden": this.labelHidden, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, maxlength: this.maxLength, minlength: this.minLength, pattern: regex, placeholder: this.placeholder, spellcheck: this.spellCheck, autocomplete: this.autoComplete, onClick: function (ev) { return _this.handleClick(ev); }, onInput: function (ev) { return _this.handleInput(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, required: this.required, role: this.role, name: this.name, id: this.identifier || "item" }), this.type !== "text" && this.type !== "number" && this.type !== "password" ? (h("div", { class: "duet-input-icon", innerHTML: duetIcons["form-" + this.type].svg })) : (""), h("span", { class: "duet-input-help" }, this.helpText)));
};

@@ -191,2 +230,6 @@ Object.defineProperty(DuetInput, "is", {

},
"required": {
"type": Boolean,
"attr": "required"
},
"role": {

@@ -211,7 +254,4 @@ "type": String,

"attr": "value",
"reflectToAttr": true,
"mutable": true
},
"variation": {
"type": String,
"attr": "variation"
}

@@ -226,4 +266,4 @@ };

return [{
"name": "onInput",
"method": "onInput",
"name": "clicked",
"method": "clicked",
"bubbles": true,

@@ -233,4 +273,4 @@ "cancelable": true,

}, {
"name": "onBlur",
"method": "onBlur",
"name": "typed",
"method": "typed",
"bubbles": true,

@@ -240,7 +280,13 @@ "cancelable": true,

}, {
"name": "onFocus",
"method": "onFocus",
"name": "blurred",
"method": "blurred",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "focused",
"method": "focused",
"bubbles": true,
"cancelable": true,
"composed": true
}];

@@ -252,3 +298,3 @@ },

Object.defineProperty(DuetInput, "style", {
get: function () { return ".duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 16px 28px 17px;\n margin-right: 8px;\n margin-bottom: 12px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-input.duet-theme-turva.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}"; },
get: function () { return ".sc-duet-input-h {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n margin-bottom: 12px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-label.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 8px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 600;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n width: 100%;\n cursor: pointer;\n position: relative;\n display: block;\n}\n.duet-label-hidden.sc-duet-input .duet-label.sc-duet-input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.duet-input-icon.sc-duet-input {\n pointer-events: none;\n z-index: 200;\n width: 20px;\n height: 20px;\n color: #00294d;\n position: absolute;\n bottom: 14px;\n right: 16px;\n}\n.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input {\n color: #c60c30;\n}\n\n.duet-input.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 14.5px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #cfd2d4;\n box-shadow: inset 0 0 0 2px #cfd2d4;\n border-radius: 4px;\n font-size: 1rem;\n background: white;\n color: #00294d;\n font-weight: 400;\n line-height: 1.25;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n z-index: 100;\n min-width: 13.75rem;\n width: 100%;\n position: relative;\n display: block;\n}\n.has-icon.sc-duet-input .duet-input.sc-duet-input {\n padding-right: 48px;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input {\n font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n -webkit-box-shadow: inset 0 0 0 2px #d1d1d1;\n box-shadow: inset 0 0 0 2px #d1d1d1;\n color: #111111;\n}\n.duet-input-container.sc-duet-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 0;\n padding: 0;\n margin: 0;\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input::-moz-placeholder {\n color: #cfd2d4;\n opacity: 1 !important;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder {\n color: #d1d1d1;\n}\n.duet-input.sc-duet-input:-ms-input-placeholder {\n color: #cfd2d4;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder {\n color: #d1d1d1;\n}\n.duet-input[disabled].sc-duet-input, .duet-input.disabled.sc-duet-input {\n cursor: not-allowed !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #657787;\n box-shadow: inset 0 0 0 2px #657787;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover {\n -webkit-box-shadow: inset 0 0 0 2px #757575;\n box-shadow: inset 0 0 0 2px #757575;\n}\n.duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n outline: 0;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #de2362;\n box-shadow: inset 0 0 0 2px #de2362;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid {\n -webkit-box-shadow: inset 0 0 0 2px #e02a0d;\n box-shadow: inset 0 0 0 2px #e02a0d;\n}\n.duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:required:valid {\n -webkit-box-shadow: inset 0 0 0 2px #111111;\n box-shadow: inset 0 0 0 2px #111111;\n}\n.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=number].sc-duet-input::-webkit-outer-spin-button, .duet-input[type=time].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=time].sc-duet-input::-webkit-outer-spin-button {\n -webkit-appearance: none;\n display: none;\n margin: 0;\n}"; },
enumerable: true,

@@ -255,0 +301,0 @@ configurable: true

2

lib/esm/es5/duet.components.js
// Duet: Host Data, ES Module/es5 Target
export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,0,1,2],["variation",1,0,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]
export var COMPONENTS = [["duet-button","duet-button",1,[["accessibleControls",1,0,"accessible-controls",2],["accessibleExpanded",1,0,"accessible-expanded",4],["accessibleLabel",1,0,"accessible-label",2],["accessiblePressed",1,0,"accessible-pressed",4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["external",1,0,1,4],["icon",1,0,1,2],["identifier",1,0,1,2],["submit",1,0,1,4],["theme",1,0,1,2],["url",1,0,1,2],["variation",1,0,1,2]],1],["duet-input","duet-input",1,[["accessibleActiveDescendant",1,0,"accessible-active-descendant",2],["accessibleAutocomplete",1,0,"accessible-autocomplete",2],["accessibleControls",1,0,"accessible-controls",2],["accessibleOwns",1,0,"accessible-owns",2],["autoComplete",1,0,"auto-complete",2],["autofocus",1,0,1,4],["disabled",1,0,1,4],["element",64],["expand",1,0,1,4],["helpText",1,0,"help-text",2],["identifier",1,0,1,2],["inputPrefix",1,0,"input-prefix",2],["inputSuffix",1,0,"input-suffix",2],["label",1,0,1,2],["labelHidden",1,0,"label-hidden",4],["maxLength",1,0,"max-length",8],["minLength",1,0,"min-length",8],["name",1,0,1,2],["pattern",1,0,1,2],["placeholder",1,0,1,2],["required",1,0,1,4],["role",1,0,1,2],["spellCheck",1,0,"spell-check",4],["theme",1,0,1,2],["type",1,0,1,2],["value",2,1,1,2]],1],["duet-spinner","duet-button",1,[["accessibleLabel",1,0,"accessible-label",2],["color",1,0,1,2],["size",1,0,1,2]],1]]

32

lib/types/components.d.ts

@@ -218,2 +218,6 @@ /* tslint:disable */

/**
* Set whether the input is required or not.
*/
'required': boolean;
/**
* Defines a specific role attribute for the input

@@ -231,3 +235,3 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/

@@ -239,6 +243,2 @@ 'type': string;

'value': string;
/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
'variation': string;
}

@@ -317,11 +317,15 @@ interface DuetInputAttributes extends StencilHTMLAttributes {

*/
'onOnBlur'?: (event: CustomEvent<string>) => void;
'onBlurred'?: (event: CustomEvent<Event>) => void;
/**
* Callback for when the input is clicked.
*/
'onClicked'?: (event: CustomEvent<Event>) => void;
/**
* Callback when input becomes focused.
*/
'onOnFocus'?: (event: CustomEvent<string>) => void;
'onFocused'?: (event: CustomEvent<Event>) => void;
/**
* Callback when value is changed.
* Callback for when user types into the input.
*/
'onOnInput'?: (event: CustomEvent<string>) => void;
'onTyped'?: (event: CustomEvent<Event>) => void;
/**

@@ -336,2 +340,6 @@ * A regular expression to check the value against

/**
* Set whether the input is required or not.
*/
'required'?: boolean;
/**
* Defines a specific role attribute for the input

@@ -349,3 +357,3 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/

@@ -357,6 +365,2 @@ 'type'?: string;

'value'?: string;
/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
'variation'?: string;
}

@@ -363,0 +367,0 @@

41

lib/types/components/duet-input/duet-input.d.ts

@@ -31,6 +31,2 @@ import '../../stencil.core';

/**
* Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
*/
variation: string;
/**
* Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.

@@ -48,4 +44,8 @@ */

/**
* Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.
* Set whether the input is required or not.
*/
required: boolean;
/**
* Type of the input. Can be one of: text, email, number, password, search, tel, time.
*/
type: string;

@@ -109,17 +109,34 @@ /**

/**
* Callback when value is changed.
* Callback for when the input is clicked.
*/
onInput: EventEmitter<string>;
clicked: EventEmitter<Event>;
/**
* Callback for when user types into the input.
*/
typed: EventEmitter<Event>;
/**
* Callback when focus leaves input.
*/
onBlur: EventEmitter<string>;
blurred: EventEmitter<Event>;
/**
* Callback when input becomes focused.
*/
onFocus: EventEmitter<string>;
handleInput(ev: any): void;
handleBlur(ev: any): void;
handleFocus(ev: any): void;
focused: EventEmitter<Event>;
/**
* Handle click event
*/
handleClick(e: Event): void;
/**
* Handle user input event
*/
handleInput(e: Event): void;
/**
* Handle blur event
*/
handleBlur(e: Event): void;
/**
* Handle focus event
*/
handleFocus(e: Event): void;
/**
* componentDidLoad() function

@@ -126,0 +143,0 @@ */

18

lib/web-components.json

@@ -5,3 +5,3 @@ {

"label": "duet-button",
"description": "---\ntitle: Button\nname: duet-button\nstatus: in review\nslot: Button\nreleased: 0.0.1-alpha.25\nintro: Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\nplatforms: Web only\nvariations:\n - primary\n - icon\n - loading\n - secondary\n - default\n - negative\n - destructive\n - disabled\n - plain\ntags:\n - docs-components\n---",
"description": "---\ntitle: Button\nname: duet-button\nstatus: prototype\nslot: Button\nreleased: 0.0.1-alpha.25\nintro: Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\nplatforms: Web only\nvariations:\n - primary\n - icon\n - loading\n - secondary\n - default\n - negative\n - destructive\n - disabled\n - plain\ntags:\n - docs-components\n---",
"attributes": [

@@ -77,3 +77,3 @@ {

"label": "duet-input",
"description": "---\ntitle: Input\nname: duet-input\nstatus: prototype\nslot: Input\nreleased: 0.0.1-alpha.25\nplatforms: Web only\nintro: Form Inputs are used to allow users to provide text input when the expected input is short. Form Input has a range of options and supports several text formats including numbers.\ndescription: N/A\ntags:\n - docs-components\n---",
"description": "---\ntitle: Input\nname: duet-input\nstatus: prototype\nslot: Input\nreleased: 0.0.1-alpha.25\nplatforms: Web only\nintro: Inputs are used to allow users to provide text input when the expected input is short. Input component has a range of options and supports several text formats including numbers.\ndescription: You can use native HTML5 validation with Input component via validation properties. This allows you to specify rules like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, and a pattern that it must match.\ntypes:\n - text\n - tel\n - time\n - email\n - search\ntags:\n - docs-components\n---",
"attributes": [

@@ -176,2 +176,7 @@ {

{
"label": "required",
"description": "Set whether the input is required or not.",
"required": false
},
{
"label": "role",

@@ -193,3 +198,3 @@ "description": "Defines a specific role attribute for the input",

"label": "type",
"description": "Type of the input. Can be one of: text, email, number, password, search, tel, url, date, time.",
"description": "Type of the input. Can be one of: text, email, number, password, search, tel, time.",
"required": false

@@ -201,7 +206,2 @@ },

"required": false
},
{
"label": "variation",
"description": "Style variation of the input. Can be one of: default, primary, secondary, negative, loading, destructive, plain.",
"required": false
}

@@ -212,3 +212,3 @@ ]

"label": "duet-spinner",
"description": "---\ntitle: Spinner\nname: duet-spinner\nstatus: in review\nintro: Spinners are used to indicate users that their action is being processed. Duet’s spinner is built entirely with HTML and CSS, and doesn’t rely on JavaScript.\ndescription: \"You can customize the size and color of the spinner with the provided properties. Spinner comes in three sizes: small, medium and large.\"\nplatforms: Web only\nappearance: negative\nsizes:\n - small\n - medium\n - large\ntags:\n - docs-components\n---",
"description": "---\ntitle: Spinner\nname: duet-spinner\nstatus: prototype\nintro: Spinners are used to indicate users that their action is being processed. Duet’s spinner is built entirely with HTML and CSS, and doesn’t rely on JavaScript.\ndescription: \"You can customize the size and color of the spinner with the provided properties. Spinner comes in three sizes: small, medium and large.\"\nplatforms: Web only\nappearance: negative\nsizes:\n - small\n - medium\n - large\ntags:\n - docs-components\n---",
"attributes": [

@@ -215,0 +215,0 @@ {

4

package.json
{
"name": "@duetds/components",
"version": "0.0.1-alpha.36",
"version": "0.0.1-alpha.37",
"description": "This package includes Duet Components and related tools.",

@@ -42,3 +42,3 @@ "author": "Viljami Salminen <ext-viljami.salminen@lahitapiola.fi>",

},
"gitHead": "b6e7ecdf885e305f2a1d79daf63cc64170d00e96",
"gitHead": "34989cc131c8351f30346c3d94607c830666e90f",
"devDependencies": {

@@ -45,0 +45,0 @@ "@duetds/fonts": "^1.1.0",

lib/cjs/es5/build/chunk-e639420f.js
lib/duet/chunk-e639420f.js
lib/duet/chunk-fdfae928.es5.js
lib/esm/es2017/build/chunk-e639420f.js
lib/esm/es5/build/chunk-e639420f.js
lib/cjs/es5/build/duet-button.entry.js

Sorry, the diff of this file is too big to display

lib/cjs/es5/build/duet-button.sc.entry.js

Sorry, the diff of this file is too big to display

lib/cjs/es5/duet.core.js

Sorry, the diff of this file is too big to display

lib/collection/components/duet-button/duet-button.css

Sorry, the diff of this file is not supported yet

lib/collection/components/duet-button/duet-button.scss

Sorry, the diff of this file is not supported yet

lib/collection/components/duet-input/duet-input.css

Sorry, the diff of this file is not supported yet

lib/collection/components/duet-input/duet-input.scss

Sorry, the diff of this file is not supported yet

lib/collection/components/duet-spinner/duet-spinner.css

Sorry, the diff of this file is not supported yet

lib/duet/duet-button.entry.js

Sorry, the diff of this file is too big to display

lib/duet/duet-button.es5.entry.js

Sorry, the diff of this file is too big to display

lib/duet/duet-button.sc.entry.js

Sorry, the diff of this file is too big to display

lib/duet/duet-button.sc.es5.entry.js

Sorry, the diff of this file is too big to display

lib/duet/duet.core.js

Sorry, the diff of this file is too big to display

lib/duet/duet.core.pf.js

Sorry, the diff of this file is too big to display

lib/esm/es2017/build/duet-button.entry.js

Sorry, the diff of this file is too big to display

lib/esm/es2017/build/duet-button.sc.entry.js

Sorry, the diff of this file is too big to display

lib/esm/es2017/duet.core.js

Sorry, the diff of this file is too big to display

lib/esm/es5/build/duet-button.entry.js

Sorry, the diff of this file is too big to display

lib/esm/es5/build/duet-button.sc.entry.js

Sorry, the diff of this file is too big to display

lib/esm/es5/duet.core.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc