@duetds/components
Advanced tools
@duetds/components - npm Package Compare versions
Comparing version 0.0.1-alpha.49 to 0.0.1-alpha.50
| { | ||
| "components": [ | ||
| { | ||
| "tag": "duet-button", | ||
| "dependencies": [ | ||
| "duet-spinner" | ||
| ], | ||
| "componentClass": "DuetButton", | ||
| "componentPath": "components/duet-button/duet-button.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-button/duet-button.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "accessibleControls", | ||
| "type": "String", | ||
| "attr": "accessible-controls" | ||
| }, | ||
| { | ||
| "name": "accessibleExpanded", | ||
| "type": "Boolean", | ||
| "attr": "accessible-expanded" | ||
| }, | ||
| { | ||
| "name": "accessibleLabel", | ||
| "type": "String", | ||
| "attr": "accessible-label" | ||
| }, | ||
| { | ||
| "name": "accessiblePressed", | ||
| "type": "Boolean", | ||
| "attr": "accessible-pressed" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": "Boolean", | ||
| "attr": "disabled" | ||
| }, | ||
| { | ||
| "name": "expand", | ||
| "type": "Boolean", | ||
| "attr": "expand" | ||
| }, | ||
| { | ||
| "name": "external", | ||
| "type": "Boolean", | ||
| "attr": "external" | ||
| }, | ||
| { | ||
| "name": "icon", | ||
| "type": "String", | ||
| "attr": "icon" | ||
| }, | ||
| { | ||
| "name": "iconRight", | ||
| "type": "Boolean", | ||
| "attr": "icon-right" | ||
| }, | ||
| { | ||
| "name": "identifier", | ||
| "type": "String", | ||
| "attr": "identifier" | ||
| }, | ||
| { | ||
| "name": "submit", | ||
| "type": "Boolean", | ||
| "attr": "submit" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| }, | ||
| { | ||
| "name": "url", | ||
| "type": "String", | ||
| "attr": "url" | ||
| }, | ||
| { | ||
| "name": "variation", | ||
| "type": "String", | ||
| "attr": "variation" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "events": [ | ||
| { | ||
| "event": "blurred" | ||
| }, | ||
| { | ||
| "event": "clicked" | ||
| }, | ||
| { | ||
| "event": "focused" | ||
| } | ||
| ], | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-card", | ||
| "dependencies": [], | ||
| "componentClass": "DuetCard", | ||
| "componentPath": "components/duet-card/duet-card.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-card/duet-card.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "cardTitle", | ||
| "type": "String", | ||
| "attr": "card-title" | ||
| }, | ||
| { | ||
| "name": "padding", | ||
| "type": "String", | ||
| "attr": "padding" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| }, | ||
| { | ||
| "name": "url", | ||
| "type": "String", | ||
| "attr": "url" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-grid", | ||
| "dependencies": [], | ||
| "componentClass": "DuetGrid", | ||
| "componentPath": "components/duet-grid/duet-grid.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-grid/duet-grid.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "hostElement": { | ||
| "name": "element" | ||
| } | ||
| }, | ||
| { | ||
| "tag": "duet-grid-cell", | ||
| "dependencies": [], | ||
| "componentClass": "DuetGridCell", | ||
| "componentPath": "components/duet-grid-cell/duet-grid-cell.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-grid-cell/duet-grid-cell.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "hostElement": { | ||
| "name": "element" | ||
| } | ||
| }, | ||
| { | ||
| "tag": "duet-header", | ||
| "dependencies": [], | ||
| "componentClass": "DuetHeader", | ||
| "componentPath": "components/duet-header/duet-header.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-header/duet-header.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "position", | ||
| "type": "String", | ||
| "attr": "position" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| }, | ||
| { | ||
| "name": "variant", | ||
| "type": "String", | ||
| "attr": "variant" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-heading", | ||
| "dependencies": [], | ||
| "componentClass": "DuetHeading", | ||
| "componentPath": "components/duet-heading/duet-heading.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-heading/duet-heading.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "color", | ||
| "type": "String", | ||
| "attr": "color" | ||
| }, | ||
| { | ||
| "name": "level", | ||
| "type": "String", | ||
| "attr": "level" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-input", | ||
| "dependencies": [], | ||
| "componentClass": "DuetInput", | ||
| "componentPath": "components/duet-input/duet-input.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-input/duet-input.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "accessibleActiveDescendant", | ||
| "type": "String", | ||
| "attr": "accessible-active-descendant" | ||
| }, | ||
| { | ||
| "name": "accessibleAutocomplete", | ||
| "type": "String", | ||
| "attr": "accessible-autocomplete" | ||
| }, | ||
| { | ||
| "name": "accessibleControls", | ||
| "type": "String", | ||
| "attr": "accessible-controls" | ||
| }, | ||
| { | ||
| "name": "accessibleOwns", | ||
| "type": "String", | ||
| "attr": "accessible-owns" | ||
| }, | ||
| { | ||
| "name": "autoComplete", | ||
| "type": "String", | ||
| "attr": "auto-complete" | ||
| }, | ||
| { | ||
| "name": "autofocus", | ||
| "type": "Boolean", | ||
| "attr": "autofocus" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": "Boolean", | ||
| "attr": "disabled" | ||
| }, | ||
| { | ||
| "name": "expand", | ||
| "type": "Boolean", | ||
| "attr": "expand" | ||
| }, | ||
| { | ||
| "name": "helpText", | ||
| "type": "String", | ||
| "attr": "help-text" | ||
| }, | ||
| { | ||
| "name": "identifier", | ||
| "type": "String", | ||
| "attr": "identifier" | ||
| }, | ||
| { | ||
| "name": "inputPrefix", | ||
| "type": "String", | ||
| "attr": "input-prefix" | ||
| }, | ||
| { | ||
| "name": "inputSuffix", | ||
| "type": "String", | ||
| "attr": "input-suffix" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": "String", | ||
| "attr": "label" | ||
| }, | ||
| { | ||
| "name": "labelHidden", | ||
| "type": "Boolean", | ||
| "attr": "label-hidden" | ||
| }, | ||
| { | ||
| "name": "maxLength", | ||
| "type": "Number", | ||
| "attr": "max-length" | ||
| }, | ||
| { | ||
| "name": "minLength", | ||
| "type": "Number", | ||
| "attr": "min-length" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": "String", | ||
| "attr": "name" | ||
| }, | ||
| { | ||
| "name": "pattern", | ||
| "type": "String", | ||
| "attr": "pattern" | ||
| }, | ||
| { | ||
| "name": "placeholder", | ||
| "type": "String", | ||
| "attr": "placeholder" | ||
| }, | ||
| { | ||
| "name": "required", | ||
| "type": "Boolean", | ||
| "attr": "required" | ||
| }, | ||
| { | ||
| "name": "role", | ||
| "type": "String", | ||
| "attr": "role" | ||
| }, | ||
| { | ||
| "name": "spellCheck", | ||
| "type": "Boolean", | ||
| "attr": "spell-check" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| }, | ||
| { | ||
| "name": "type", | ||
| "type": "String", | ||
| "attr": "type" | ||
| }, | ||
| { | ||
| "name": "value", | ||
| "type": "String", | ||
| "mutable": true, | ||
| "reflectToAttr": true, | ||
| "attr": "value" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "events": [ | ||
| { | ||
| "event": "blurred" | ||
| }, | ||
| { | ||
| "event": "clicked" | ||
| }, | ||
| { | ||
| "event": "focused" | ||
| }, | ||
| { | ||
| "event": "typed" | ||
| } | ||
| ], | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-layout", | ||
| "dependencies": [], | ||
| "componentClass": "DuetLayout", | ||
| "componentPath": "components/duet-layout/duet-layout.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-layout/duet-layout.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "variation", | ||
| "type": "String", | ||
| "attr": "variation" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-paragraph", | ||
| "dependencies": [], | ||
| "componentClass": "DuetParagraph", | ||
| "componentPath": "components/duet-paragraph/duet-paragraph.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-paragraph/duet-paragraph.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "color", | ||
| "type": "String", | ||
| "attr": "color" | ||
| }, | ||
| { | ||
| "name": "theme", | ||
| "type": "String", | ||
| "attr": "theme" | ||
| } | ||
| ], | ||
| "hostElement": { | ||
| "name": "element" | ||
| }, | ||
| "shadow": true | ||
| }, | ||
| { | ||
| "tag": "duet-spinner", | ||
| "dependencies": [], | ||
| "componentClass": "DuetSpinner", | ||
| "componentPath": "components/duet-spinner/duet-spinner.js", | ||
| "styles": { | ||
| "$": { | ||
| "stylePaths": [ | ||
| "components/duet-spinner/duet-spinner.scss" | ||
| ] | ||
| } | ||
| }, | ||
| "props": [ | ||
| { | ||
| "name": "accessibleLabel", | ||
| "type": "String", | ||
| "attr": "accessible-label" | ||
| }, | ||
| { | ||
| "name": "color", | ||
| "type": "String", | ||
| "attr": "color" | ||
| }, | ||
| { | ||
| "name": "size", | ||
| "type": "String", | ||
| "attr": "size" | ||
| } | ||
| ], | ||
| "shadow": true | ||
| } | ||
| "entries": [ | ||
| "components/duet-grid/duet-grid.js", | ||
| "components/duet-grid-cell/duet-grid-cell.js", | ||
| "components/duet-paragraph/duet-paragraph.js", | ||
| "components/duet-spinner/duet-spinner.js", | ||
| "components/duet-layout/duet-layout.js", | ||
| "components/duet-card/duet-card.js", | ||
| "components/duet-heading/duet-heading.js", | ||
| "components/duet-button/duet-button.js", | ||
| "components/duet-input/duet-input.js", | ||
| "components/duet-header/duet-header.js" | ||
| ], | ||
| "collections": [], | ||
| "compiler": { | ||
| "name": "@stencil/core", | ||
| "version": "0.18.1", | ||
| "typescriptVersion": "3.3.3" | ||
| "version": "1.0.2", | ||
| "typescriptVersion": "3.5.1" | ||
| }, | ||
| "collections": [], | ||
| "bundles": [] | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
@@ -141,83 +142,305 @@ import classNames from "classnames"; | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-button.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-button.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "accessibleLabel": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology." | ||
| }, | ||
| "attribute": "accessible-label", | ||
| "reflect": false | ||
| }, | ||
| "accessibleControls": { | ||
| "type": String, | ||
| "attr": "accessible-controls" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Use this prop to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages." | ||
| }, | ||
| "attribute": "accessible-controls", | ||
| "reflect": false | ||
| }, | ||
| "accessibleExpanded": { | ||
| "type": Boolean, | ||
| "attr": "accessible-expanded" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content." | ||
| }, | ||
| "attribute": "accessible-expanded", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "accessibleLabel": { | ||
| "type": String, | ||
| "attr": "accessible-label" | ||
| }, | ||
| "accessiblePressed": { | ||
| "type": Boolean, | ||
| "attr": "accessible-pressed" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Tells screen reader the element is pressed." | ||
| }, | ||
| "attribute": "accessible-pressed", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "disabled": { | ||
| "type": Boolean, | ||
| "attr": "disabled" | ||
| "variation": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain." | ||
| }, | ||
| "attribute": "variation", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| "theme": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Theme of the button. Can be one of: default, turva." | ||
| }, | ||
| "attribute": "theme", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| }, | ||
| "expand": { | ||
| "type": Boolean, | ||
| "attr": "expand" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Expands the button to fill 100% of the container width." | ||
| }, | ||
| "attribute": "expand", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "disabled": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies." | ||
| }, | ||
| "attribute": "disabled", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "identifier": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Adds a unique identifier for the button." | ||
| }, | ||
| "attribute": "identifier", | ||
| "reflect": false | ||
| }, | ||
| "submit": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Allows the button to submit a form." | ||
| }, | ||
| "attribute": "submit", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "external": { | ||
| "type": Boolean, | ||
| "attr": "external" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Forces URL to open in a new browser tab. Used together with URL prop." | ||
| }, | ||
| "attribute": "external", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Icon to display to the left of the button content" | ||
| }, | ||
| "attribute": "icon", | ||
| "reflect": false, | ||
| "defaultValue": "\"\"" | ||
| }, | ||
| "iconRight": { | ||
| "type": Boolean, | ||
| "attr": "icon-right" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Show icon on the right side of the button content." | ||
| }, | ||
| "attribute": "icon-right", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "identifier": { | ||
| "type": String, | ||
| "attr": "identifier" | ||
| }, | ||
| "submit": { | ||
| "type": Boolean, | ||
| "attr": "submit" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| }, | ||
| "url": { | ||
| "type": String, | ||
| "attr": "url" | ||
| }, | ||
| "variation": { | ||
| "type": String, | ||
| "attr": "variation" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "A destination to link to, rendered in the href attribute of a link." | ||
| }, | ||
| "attribute": "url", | ||
| "reflect": false | ||
| } | ||
| }; } | ||
| static get events() { return [{ | ||
| "method": "clicked", | ||
| "name": "clicked", | ||
| "method": "clicked", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback for when the button is clicked." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }, { | ||
| "method": "blurred", | ||
| "name": "blurred", | ||
| "method": "blurred", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback when focus leaves button." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }, { | ||
| "method": "focused", | ||
| "name": "focused", | ||
| "method": "focused", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback when button becomes focused." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }]; } | ||
| static get style() { return "/**style-placeholder:duet-button:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
@@ -66,24 +67,82 @@ import classNames from "classnames"; | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-card.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-card.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "cardTitle": { | ||
| "type": String, | ||
| "attr": "card-title" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "The content for the card title" | ||
| }, | ||
| "attribute": "card-title", | ||
| "reflect": false, | ||
| "defaultValue": "\"\"" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "padding": { | ||
| "type": String, | ||
| "attr": "padding" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "The padding for the card. Can be one of: large, medium, small." | ||
| }, | ||
| "attribute": "padding", | ||
| "reflect": false, | ||
| "defaultValue": "\"small\"" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Theme of the card. Can be one of: default, turva." | ||
| }, | ||
| "attribute": "theme", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| }, | ||
| "url": { | ||
| "type": String, | ||
| "attr": "url" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "A destination to link to, rendered in the href attribute of a link." | ||
| }, | ||
| "attribute": "url", | ||
| "reflect": false | ||
| } | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-card:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| export class DuetGridCell { | ||
@@ -11,8 +12,9 @@ /** | ||
| static get is() { return "duet-grid-cell"; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-grid-cell.scss"] | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-grid-cell:**/"; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-grid-cell.css"] | ||
| }; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| export class DuetGrid { | ||
@@ -11,8 +12,9 @@ /** | ||
| static get is() { return "duet-grid"; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-grid.scss"] | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-grid:**/"; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-grid.css"] | ||
| }; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
@@ -243,8 +244,8 @@ import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js"; | ||
| this.variant === "public" ? (h("div", { class: "dropdown-content" }, | ||
| h("a", { href: "/prototype/navigation/" }, "Kaikki yhteystiedot"), | ||
| h("a", { href: "/prototype/navigation/" }, "Asiakaspalvelu"), | ||
| h("a", { href: "/prototype/navigation/" }, "Kysy chatissa"))) : (h("div", { class: "dropdown-content" }, | ||
| h("a", { href: "/prototype/navigation/index-logged.html" }, "Kaikki yhteystiedot"), | ||
| h("a", { href: "/prototype/navigation/index-logged.html" }, "Omat viestit"), | ||
| h("a", { href: "/prototype/navigation/index-logged.html" }, "Aloita chat")))), | ||
| h("a", { href: "/" }, "Kaikki yhteystiedot"), | ||
| h("a", { href: "/" }, "Asiakaspalvelu"), | ||
| h("a", { href: "/" }, "Kysy chatissa"))) : (h("div", { class: "dropdown-content" }, | ||
| h("a", { href: "index-logged.html" }, "Kaikki yhteystiedot"), | ||
| h("a", { href: "index-logged.html" }, "Omat viestit"), | ||
| h("a", { href: "index-logged.html" }, "Aloita chat")))), | ||
| h("div", { class: "dropdown" }, | ||
@@ -259,9 +260,9 @@ h("button", { class: "dropdown-toggle" }, | ||
| h("button", { "data-lang": "EN" }, "In English"))), | ||
| this.variant === "public" ? (h("a", { href: "/prototype/navigation/index-logged.html", class: "menu-item" }, | ||
| this.variant === "public" ? (h("a", { href: "index-logged.html", class: "menu-item" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-login"].svg }), | ||
| h("span", { class: "text" }, "Kirjaudu sis\u00E4\u00E4n"))) : (h("div", null, | ||
| h("a", { class: "menu-item", href: "/prototype/navigation/index-logged.html" }, | ||
| h("a", { class: "menu-item", href: "index-logged.html" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-user"].svg }), | ||
| h("span", { class: "text" }, "Laura-Karoliina")), | ||
| h("a", { class: "menu-item", href: "/prototype/navigation/" }, | ||
| h("a", { class: "menu-item", href: "/" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-logout"].svg }), | ||
@@ -272,20 +273,65 @@ h("span", { class: "text" }, "Kirjaudu ulos")))))))); | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-header.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-header.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "position": { | ||
| "type": String, | ||
| "attr": "position" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Theme of the header. Can be one of: default, turva." | ||
| }, | ||
| "attribute": "theme", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| }, | ||
| "variant": { | ||
| "type": String, | ||
| "attr": "variant" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Show public or private style variant. Can be one of: public, private." | ||
| }, | ||
| "attribute": "variant", | ||
| "reflect": false, | ||
| "defaultValue": "\"private\"" | ||
| }, | ||
| "position": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Position of the primary navigation. Can be one of: sticky, normal." | ||
| }, | ||
| "attribute": "position", | ||
| "reflect": false, | ||
| "defaultValue": "\"sticky\"" | ||
| } | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-header:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
@@ -81,20 +82,65 @@ import classNames from "classnames"; | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-heading.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-heading.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "level": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "The heading level used for the heading. Can be one of: h1, h2, h3, h4, h5, h6." | ||
| }, | ||
| "attribute": "level", | ||
| "reflect": false, | ||
| "defaultValue": "\"h2\"" | ||
| }, | ||
| "color": { | ||
| "type": String, | ||
| "attr": "color" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Custom color for the heading." | ||
| }, | ||
| "attribute": "color", | ||
| "reflect": false, | ||
| "defaultValue": "\"\"" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "level": { | ||
| "type": String, | ||
| "attr": "level" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Theme of the card. Can be one of: default, turva." | ||
| }, | ||
| "attribute": "theme", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| } | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-heading:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
@@ -139,135 +140,507 @@ import classNames from "classnames"; | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-input.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-input.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "accessibleActiveDescendant": { | ||
| "type": String, | ||
| "attr": "accessible-active-descendant" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Indicates the id of a related component\u2019s visually focused element to the input" | ||
| }, | ||
| "attribute": "accessible-active-descendant", | ||
| "reflect": false | ||
| }, | ||
| "accessibleAutocomplete": { | ||
| "type": String, | ||
| "attr": "accessible-autocomplete" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Indicates what kind of user input completion suggestions are provided" | ||
| }, | ||
| "attribute": "accessible-autocomplete", | ||
| "reflect": false | ||
| }, | ||
| "accessibleControls": { | ||
| "type": String, | ||
| "attr": "accessible-controls" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Use this prop to add an aria-controls attribute to the button. Use the attribute to indicate the id of a component controlled by the input." | ||
| }, | ||
| "attribute": "accessible-controls", | ||
| "reflect": false | ||
| }, | ||
| "accessibleOwns": { | ||
| "type": String, | ||
| "attr": "accessible-owns" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Indicates the id of a component owned by the input" | ||
| }, | ||
| "attribute": "accessible-owns", | ||
| "reflect": false | ||
| }, | ||
| "autoComplete": { | ||
| "type": String, | ||
| "attr": "auto-complete" | ||
| "theme": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Theme of the input. Can be one of: default, turva." | ||
| }, | ||
| "attribute": "theme", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| }, | ||
| "autofocus": { | ||
| "type": Boolean, | ||
| "attr": "autofocus" | ||
| "expand": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Expands the input to fill 100% of the container width." | ||
| }, | ||
| "attribute": "expand", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "disabled": { | ||
| "type": Boolean, | ||
| "attr": "disabled" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies." | ||
| }, | ||
| "attribute": "disabled", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| "identifier": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Adds a unique identifier for the button." | ||
| }, | ||
| "attribute": "identifier", | ||
| "reflect": false | ||
| }, | ||
| "expand": { | ||
| "type": Boolean, | ||
| "attr": "expand" | ||
| "autofocus": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Automatically focus the input." | ||
| }, | ||
| "attribute": "autofocus", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "helpText": { | ||
| "type": String, | ||
| "attr": "help-text" | ||
| "required": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Set whether the input is required or not." | ||
| }, | ||
| "attribute": "required", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "identifier": { | ||
| "type": String, | ||
| "attr": "identifier" | ||
| "type": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Type of the input. Can be one of: text, email, number, password, search, tel, time." | ||
| }, | ||
| "attribute": "type", | ||
| "reflect": false, | ||
| "defaultValue": "\"text\"" | ||
| }, | ||
| "inputPrefix": { | ||
| "type": String, | ||
| "attr": "input-prefix" | ||
| }, | ||
| "inputSuffix": { | ||
| "type": String, | ||
| "attr": "input-suffix" | ||
| }, | ||
| "label": { | ||
| "type": String, | ||
| "attr": "label" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Label for the input." | ||
| }, | ||
| "attribute": "label", | ||
| "reflect": false, | ||
| "defaultValue": "\"label\"" | ||
| }, | ||
| "labelHidden": { | ||
| "type": Boolean, | ||
| "attr": "label-hidden" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Visually hide the label, but still show it to screen readers." | ||
| }, | ||
| "attribute": "label-hidden", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "helpText": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Additional hint text to display." | ||
| }, | ||
| "attribute": "help-text", | ||
| "reflect": false | ||
| }, | ||
| "maxLength": { | ||
| "type": Number, | ||
| "attr": "max-length" | ||
| "type": "number", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Maximum character length for an input." | ||
| }, | ||
| "attribute": "max-length", | ||
| "reflect": false | ||
| }, | ||
| "minLength": { | ||
| "type": Number, | ||
| "attr": "min-length" | ||
| "type": "number", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Minimum character length for an input." | ||
| }, | ||
| "attribute": "min-length", | ||
| "reflect": false | ||
| }, | ||
| "name": { | ||
| "type": String, | ||
| "attr": "name" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Name of the input." | ||
| }, | ||
| "attribute": "name", | ||
| "reflect": false | ||
| }, | ||
| "pattern": { | ||
| "type": String, | ||
| "attr": "pattern" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "A regular expression to check the value against" | ||
| }, | ||
| "attribute": "pattern", | ||
| "reflect": false | ||
| }, | ||
| "placeholder": { | ||
| "type": String, | ||
| "attr": "placeholder" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Hint text to display" | ||
| }, | ||
| "attribute": "placeholder", | ||
| "reflect": false | ||
| }, | ||
| "required": { | ||
| "type": Boolean, | ||
| "attr": "required" | ||
| }, | ||
| "role": { | ||
| "type": String, | ||
| "attr": "role" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Defines a specific role attribute for the input" | ||
| }, | ||
| "attribute": "role", | ||
| "reflect": false | ||
| }, | ||
| "inputSuffix": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Text to display after value." | ||
| }, | ||
| "attribute": "input-suffix", | ||
| "reflect": false | ||
| }, | ||
| "inputPrefix": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Text to display before value." | ||
| }, | ||
| "attribute": "input-prefix", | ||
| "reflect": false | ||
| }, | ||
| "spellCheck": { | ||
| "type": Boolean, | ||
| "attr": "spell-check" | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Indicate whether value should have spelling checked" | ||
| }, | ||
| "attribute": "spell-check", | ||
| "reflect": false, | ||
| "defaultValue": "false" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| "autoComplete": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Enable or disable automatic completion by the browser" | ||
| }, | ||
| "attribute": "auto-complete", | ||
| "reflect": false, | ||
| "defaultValue": "\"on\"" | ||
| }, | ||
| "type": { | ||
| "type": String, | ||
| "attr": "type" | ||
| }, | ||
| "value": { | ||
| "type": String, | ||
| "attr": "value", | ||
| "reflectToAttr": true, | ||
| "mutable": true | ||
| "type": "string", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Value of the input." | ||
| }, | ||
| "attribute": "value", | ||
| "reflect": true | ||
| } | ||
| }; } | ||
| static get events() { return [{ | ||
| "method": "clicked", | ||
| "name": "clicked", | ||
| "method": "clicked", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback for when the input is clicked." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }, { | ||
| "method": "typed", | ||
| "name": "typed", | ||
| "method": "typed", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback for when user types into the input." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }, { | ||
| "method": "blurred", | ||
| "name": "blurred", | ||
| "method": "blurred", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback when focus leaves input." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }, { | ||
| "method": "focused", | ||
| "name": "focused", | ||
| "method": "focused", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Callback when input becomes focused." | ||
| }, | ||
| "complexType": { | ||
| "original": "any", | ||
| "resolved": "any", | ||
| "references": {} | ||
| } | ||
| }]; } | ||
| static get style() { return "/**style-placeholder:duet-input:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| export class DuetLayout { | ||
@@ -18,12 +19,29 @@ constructor() { | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-layout.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-layout.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "variation": { | ||
| "type": String, | ||
| "attr": "variation" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Layout variation. Can be one of: one-column, two-column." | ||
| }, | ||
| "attribute": "variation", | ||
| "reflect": false, | ||
| "defaultValue": "\"one-column\"" | ||
| } | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-layout:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import { applyThemeClasses } from "../../utils/applyThemeClasses"; | ||
@@ -55,16 +56,47 @@ import classNames from "classnames"; | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-paragraph.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-paragraph.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "theme": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Theme of the card. Can be one of: default, turva." | ||
| }, | ||
| "attribute": "theme", | ||
| "reflect": false, | ||
| "defaultValue": "\"default\"" | ||
| }, | ||
| "color": { | ||
| "type": String, | ||
| "attr": "color" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Custom color for the paragraph." | ||
| }, | ||
| "attribute": "color", | ||
| "reflect": false, | ||
| "defaultValue": "\"\"" | ||
| } | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-paragraph:**/"; } | ||
| static get elementRef() { return "element"; } | ||
| } |
@@ -0,1 +1,2 @@ | ||
| import { h } from "@stencil/core"; | ||
| import tokens from "@duetds/tokens"; | ||
@@ -27,17 +28,63 @@ import classNames from "classnames"; | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["duet-spinner.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["duet-spinner.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "accessibleLabel": { | ||
| "type": String, | ||
| "attr": "accessible-label" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Adds accessible label for the spinner that is only shown for screen readers." | ||
| }, | ||
| "attribute": "accessible-label", | ||
| "reflect": false | ||
| }, | ||
| "color": { | ||
| "type": String, | ||
| "attr": "color" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Color of the spinner, as a design token. Example: \u201Ctokens.colorPrimary\u201D." | ||
| }, | ||
| "attribute": "color", | ||
| "reflect": false, | ||
| "defaultValue": "tokens.colorGrayLightest" | ||
| }, | ||
| "size": { | ||
| "type": String, | ||
| "attr": "size" | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Size variation of the spinner. Can be one of: small, medium, large." | ||
| }, | ||
| "attribute": "size", | ||
| "reflect": false, | ||
| "defaultValue": "\"small\"" | ||
| } | ||
| }; } | ||
| static get style() { return "/**style-placeholder:duet-spinner:**/"; } | ||
| } |
151
lib/duet.js
| (function(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components) { | ||
| (function(doc){ | ||
| var scriptElm = doc.scripts[doc.scripts.length - 1]; | ||
| var warn = ['[duet] Deprecated script, please remove: ' + scriptElm.outerHTML]; | ||
| function init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCorePolyfilled, hydratedCssClass, cmpTags, HTMLElementPrototype, App, x, y, scriptElm) { | ||
| // create global namespace if it doesn't already exist | ||
| App = win[namespace] = win[namespace] || {}; | ||
| if (cmpTags) { | ||
| // auto hide components until they been fully hydrated | ||
| // reusing the "x" and "i" variables from the args for funzies | ||
| x = doc.createElement('style'); | ||
| x.innerHTML = cmpTags + '{visibility:hidden}.' + hydratedCssClass + '{visibility:inherit}'; | ||
| x.setAttribute('data-styles', ''); | ||
| y = doc.head.querySelector('meta[charset]'); | ||
| doc.head.insertBefore(x, y ? y.nextSibling : doc.head.firstChild); | ||
| } | ||
| createComponentOnReadyPrototype(win, namespace, HTMLElementPrototype); | ||
| resourcesUrl = resourcesUrl || App.resourcesUrl; | ||
| // figure out the script element for this current script | ||
| y = doc.querySelectorAll('script'); | ||
| for (x = y.length - 1; x >= 0; x--) { | ||
| scriptElm = y[x]; | ||
| if (scriptElm.src || scriptElm.hasAttribute('data-resources-url')) { | ||
| break; | ||
| } | ||
| } | ||
| // get the resource path attribute on this script element | ||
| y = scriptElm.getAttribute('data-resources-url'); | ||
| if (!resourcesUrl && y) { | ||
| // the script element has a data-resources-url attribute, always use that | ||
| resourcesUrl = y; | ||
| } | ||
| if (!resourcesUrl && scriptElm.src) { | ||
| // we don't have an exact resourcesUrl, so let's | ||
| // figure it out relative to this script's src and app's filesystem namespace | ||
| y = scriptElm.src.split('/').slice(0, -1); | ||
| resourcesUrl = (y.join('/')) + (y.length ? '/' : '') + fsNamespace + '/'; | ||
| } | ||
| // request the core this browser needs | ||
| // test for native support of custom elements and fetch | ||
| // if either of those are not supported, then use the core w/ polyfills | ||
| // also check if the page was build with ssr or not | ||
| x = doc.createElement('script'); | ||
| if (usePolyfills(win, win.location, x, 'import("")')) { | ||
| // requires the es5/polyfilled core | ||
| x.src = resourcesUrl + appCorePolyfilled; | ||
| } | ||
| else { | ||
| // let's do this! | ||
| x.src = resourcesUrl + appCore; | ||
| x.setAttribute('type', 'module'); | ||
| x.setAttribute('crossorigin', true); | ||
| } | ||
| x.setAttribute('data-resources-url', resourcesUrl); | ||
| x.setAttribute('data-namespace', fsNamespace); | ||
| doc.head.appendChild(x); | ||
| } | ||
| function usePolyfills(win, location, scriptElm, dynamicImportTest) { | ||
| // fyi, dev mode has verbose if/return statements | ||
| // but it minifies to a nice 'lil one-liner ;) | ||
| if (location.search.indexOf('core=esm') > 0) { | ||
| // force esm build | ||
| return false; | ||
| } | ||
| if ((location.search.indexOf('core=es5') > 0) || | ||
| (location.protocol === 'file:') || | ||
| (!(win.customElements && win.customElements.define)) || | ||
| (!win.fetch) || | ||
| (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) || | ||
| (!('noModule' in scriptElm))) { | ||
| // es5 build w/ polyfills | ||
| return true; | ||
| } | ||
| // final test to see if this browser support dynamic imports | ||
| return doesNotSupportsDynamicImports(dynamicImportTest); | ||
| } | ||
| function doesNotSupportsDynamicImports(dynamicImportTest) { | ||
| try { | ||
| new Function(dynamicImportTest); | ||
| return false; | ||
| } | ||
| catch (e) { } | ||
| return true; | ||
| } | ||
| function createComponentOnReadyPrototype(win, namespace, HTMLElementPrototype) { | ||
| (win['s-apps'] = win['s-apps'] || []).push(namespace); | ||
| if (!HTMLElementPrototype.componentOnReady) { | ||
| HTMLElementPrototype.componentOnReady = function componentOnReady() { | ||
| /*tslint:disable*/ | ||
| var elm = this; | ||
| function executor(resolve) { | ||
| if (elm.nodeName.indexOf('-') > 0) { | ||
| // window hasn't loaded yet and there's a | ||
| // good chance this is a custom element | ||
| var apps = win['s-apps']; | ||
| var appsReady = 0; | ||
| // loop through all the app namespaces | ||
| for (var i = 0; i < apps.length; i++) { | ||
| // see if this app has "componentOnReady" setup | ||
| if (win[apps[i]].componentOnReady) { | ||
| // this app's core has loaded call its "componentOnReady" | ||
| if (win[apps[i]].componentOnReady(elm, resolve)) { | ||
| // this component does belong to this app and would | ||
| // have fired off the resolve fn | ||
| // let's stop here, we're good | ||
| return; | ||
| } | ||
| appsReady++; | ||
| } | ||
| } | ||
| if (appsReady < apps.length) { | ||
| // not all apps are ready yet | ||
| // add it to the queue to be figured out when they are | ||
| (win['s-cr'] = win['s-cr'] || []).push([elm, resolve]); | ||
| return; | ||
| } | ||
| } | ||
| // not a recognized app component | ||
| resolve(null); | ||
| } | ||
| // callback wasn't provided, let's return a promise | ||
| if (win.Promise) { | ||
| // use native/polyfilled promise | ||
| return new win.Promise(executor); | ||
| } | ||
| // promise may not have been polyfilled yet | ||
| return { then: executor }; | ||
| }; | ||
| } | ||
| } | ||
| warn.push('To improve performance it is recommended to set the differential scripts in the head as follows:') | ||
| var parts = scriptElm.src.split('/'); | ||
| parts.pop(); | ||
| parts.push('duet'); | ||
| var url = parts.join('/'); | ||
| init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components); | ||
| var scriptElm = doc.createElement('script'); | ||
| scriptElm.setAttribute('type', 'module'); | ||
| scriptElm.src = url + '/duet.esm.js'; | ||
| doc.head.appendChild(scriptElm); | ||
| warn.push(scriptElm.outerHTML); | ||
| })(window, document, "Duet","duet",0,"duet.core.js","duet.core.pf.js","hydrated","duet-button,duet-card,duet-grid,duet-grid-cell,duet-header,duet-heading,duet-input,duet-layout,duet-paragraph,duet-spinner",HTMLElement.prototype); | ||
| scriptElm = doc.createElement('script'); | ||
| scriptElm.setAttribute('nomodule', ''); | ||
| scriptElm.src = url + '/duet.js'; | ||
| doc.head.appendChild(scriptElm); | ||
| warn.push(scriptElm.outerHTML); | ||
| console.warn(warn.join('\n')); | ||
| })(document); |
@@ -1,8 +0,9 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, c as createEvent, h, d as getElement } from './duet-0ab8831d.js'; | ||
| import { a as applyThemeClasses } from './chunk-a86f69c1.js'; | ||
| import { c as classNames } from './chunk-b4bc4d1f.js'; | ||
| import { d as duetIcons } from './chunk-94f81923.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| import { a as duetIcons } from './chunk-11bf8d04.js'; | ||
| class DuetButton { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -48,2 +49,5 @@ * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. | ||
| this.iconRight = false; | ||
| this.clicked = createEvent(this, "clicked", 7); | ||
| this.blurred = createEvent(this, "blurred", 7); | ||
| this.focused = createEvent(this, "focused", 7); | ||
| } | ||
@@ -125,378 +129,13 @@ /** | ||
| if (this.url) { | ||
| return (h("div", { class: containerClasses }, | ||
| 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 }, | ||
| h("span", { class: "duet-button-contents" }, | ||
| this.icon !== "" ? h("span", { class: iconClasses, innerHTML: duetIcons[this.icon].svg }) : "", | ||
| h("slot", null))), | ||
| this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, 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 }, h("span", { class: "duet-button-contents" }, this.icon !== "" ? h("span", { class: iconClasses, innerHTML: duetIcons[this.icon].svg }) : "", h("slot", null))), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| // If URL prop doesn’t exist, render a regular button. | ||
| } | ||
| else { | ||
| return (h("div", { class: containerClasses }, | ||
| 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 }, | ||
| h("span", { class: "duet-button-contents" }, | ||
| this.icon !== "" ? h("span", { class: iconClasses, innerHTML: duetIcons[this.icon].svg }) : "", | ||
| h("slot", null))), | ||
| this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| return (h("div", { class: containerClasses }, 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 }, h("span", { class: "duet-button-contents" }, this.icon !== "" ? h("span", { class: iconClasses, innerHTML: duetIcons[this.icon].svg }) : "", h("slot", null))), this.variation === "loading" ? h("duet-spinner", null) : "")); | ||
| } | ||
| } | ||
| static get is() { return "duet-button"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "accessibleControls": { | ||
| "type": String, | ||
| "attr": "accessible-controls" | ||
| }, | ||
| "accessibleExpanded": { | ||
| "type": Boolean, | ||
| "attr": "accessible-expanded" | ||
| }, | ||
| "accessibleLabel": { | ||
| "type": String, | ||
| "attr": "accessible-label" | ||
| }, | ||
| "accessiblePressed": { | ||
| "type": Boolean, | ||
| "attr": "accessible-pressed" | ||
| }, | ||
| "disabled": { | ||
| "type": Boolean, | ||
| "attr": "disabled" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
| "type": Boolean, | ||
| "attr": "expand" | ||
| }, | ||
| "external": { | ||
| "type": Boolean, | ||
| "attr": "external" | ||
| }, | ||
| "icon": { | ||
| "type": String, | ||
| "attr": "icon" | ||
| }, | ||
| "iconRight": { | ||
| "type": Boolean, | ||
| "attr": "icon-right" | ||
| }, | ||
| "identifier": { | ||
| "type": String, | ||
| "attr": "identifier" | ||
| }, | ||
| "submit": { | ||
| "type": Boolean, | ||
| "attr": "submit" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| }, | ||
| "url": { | ||
| "type": String, | ||
| "attr": "url" | ||
| }, | ||
| "variation": { | ||
| "type": String, | ||
| "attr": "variation" | ||
| } | ||
| }; } | ||
| static get events() { return [{ | ||
| "name": "clicked", | ||
| "method": "clicked", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "blurred", | ||
| "method": "blurred", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "focused", | ||
| "method": "focused", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n margin-right: 8px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n vertical-align: bottom;\n max-width: 100%;\n}\n\n.duet-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 15px 28px 16px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n border-width: 2px;\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: #0077b3;\n border-radius: 20rem;\n font-weight: 600;\n line-height: 1;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n min-width: 6.875rem;\n z-index: 100;\n width: 100%;\n border-style: solid;\n position: relative;\n display: block;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.duet-theme-turva .duet-button {\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}\n.duet-button-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.duet-button-contents {\n position: relative;\n margin: 0 auto;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: 100%;\n width: auto;\n}\n.duet-button.icon {\n padding-left: 52px;\n}\n.duet-button.icon-right {\n padding-left: 28px;\n padding-right: 52px;\n}\n.duet-button svg {\n fill: currentColor;\n}\n.duet-button-icon {\n width: 16px;\n height: 16px;\n position: absolute;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n top: 50%;\n left: -28px;\n}\n.duet-button-icon.right {\n right: -28px;\n left: auto;\n}\n.duet-button:active {\n -webkit-transition: none;\n transition: none;\n}\n.duet-button[disabled], .duet-button.disabled {\n cursor: not-allowed !important;\n border-color: #e1e3e6 !important;\n background: #e1e3e6 !important;\n color: #657787 !important;\n}\n.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button.disabled {\n background: #e6e6e6 !important;\n color: #757575 !important;\n border-color: #e6e6e6 !important;\n}\n.duet-button.default {\n border-color: #e1e3e6;\n}\n.duet-theme-turva .duet-button.default {\n border-color: #e6e6e6;\n color: #c60c30;\n}\n.duet-button.default:hover {\n border-color: #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover {\n border-color: #c60c30;\n}\n.duet-button.primary {\n color: white;\n border-color: #0077b3;\n background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary {\n background: #c60c30;\n border-color: #c60c30;\n}\n.duet-button.primary:hover {\n background: #004d80;\n border-color: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover {\n background: #940925;\n border-color: #940925;\n}\n.duet-button.secondary {\n border-color: #00294d;\n color: #00294d;\n background: white;\n}\n.duet-button.secondary:hover {\n border-color: #0077b3;\n color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover {\n border-color: #c60c30;\n color: #c60c30;\n}\n.duet-button.loading {\n background: #0077b3;\n color: white;\n border-color: #0077b3;\n text-indent: -9999px;\n pointer-events: none;\n overflow: hidden;\n}\n.duet-theme-turva .duet-button.loading {\n background: #c60c30;\n border-color: #c60c30;\n}\n.duet-button.loading.duet-button-icon {\n display: none;\n}\n.duet-button.negative {\n color: #00294d;\n background: white;\n border-color: white;\n}\n.duet-theme-turva .duet-button.negative {\n color: #111111;\n}\n.duet-button.negative:hover {\n border-color: white;\n background: transparent;\n color: white;\n}\n.duet-button.destructive {\n color: white;\n background: #de2362;\n border-color: #de2362;\n}\n.duet-theme-turva .duet-button.destructive {\n background: #e02a0d;\n border-color: #e02a0d;\n}\n.duet-button.destructive:hover {\n background: #b21c4e;\n border-color: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover {\n background: #b3220a;\n border-color: #b3220a;\n}\n.duet-button.plain {\n border-color: transparent;\n overflow: visible;\n margin: 0 0 0 -28px;\n min-width: 0;\n}\n.duet-theme-turva .duet-button.plain {\n color: #c60c30;\n}\n.duet-button.plain:hover {\n color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover {\n color: #940925;\n}"; } | ||
| } | ||
| var tokens_common = { | ||
| colorWarning: "rgb(247, 178, 40)", | ||
| colorGrayLighter: "rgb(245, 248, 250)", | ||
| colorCategoryHome: "rgb(211, 36, 131)", | ||
| colorPrimary: "rgb(0, 119, 179)", | ||
| colorCategoryVehicle: "rgb(54, 74, 129)", | ||
| colorSuccess: "rgb(0, 135, 90)", | ||
| colorCategoryFamily: "rgb(11, 114, 136)", | ||
| colorPrimaryLightest: "rgb(243, 249, 252)", | ||
| colorPrimaryLighter: "rgb(230, 242, 248)", | ||
| colorBrandBlue: "rgb(0, 161, 212)", | ||
| colorPrimaryDark: "rgb(0, 77, 128)", | ||
| colorGrayLightest: "rgb(255, 255, 255)", | ||
| colorCategoryFinance: "rgb(122, 1, 196)", | ||
| colorGrayDark: "rgb(101, 119, 135)", | ||
| colorGrayLight: "rgb(225, 227, 230)", | ||
| colorSecondary: "rgb(0, 41, 77)", | ||
| colorCategoryPet: "rgb(168, 1, 78)", | ||
| colorPrimaryLight: "rgb(205, 229, 241)", | ||
| colorCategoryTravel: "rgb(213, 66, 3)", | ||
| colorGray: "rgb(207, 210, 212)", | ||
| colorDanger: "rgb(222, 35, 98)", | ||
| colorGrayDarkerTurva: "rgb(69, 69, 69)", | ||
| colorGrayLighterTurva: "rgb(249, 249, 249)", | ||
| colorCategoryHomeTurva: "rgb(161, 10, 78)", | ||
| colorPrimaryTurva: "rgb(198, 12, 48)", | ||
| colorCategoryVehicleTurva: "rgb(62, 85, 173)", | ||
| colorSuccessTurva: "rgb(8, 135, 78)", | ||
| colorPrimaryLightestTurva: "rgb(252, 243, 244)", | ||
| colorCategoryFamilyTurva: "rgb(199, 12, 112)", | ||
| colorCategoryUnionTurva: "rgb(132, 68, 148)", | ||
| colorPrimaryLighterTurva: "rgb(249, 230, 234)", | ||
| colorPrimaryDarkTurva: "rgb(148, 9, 37)", | ||
| colorGrayLightestTurva: "rgb(255, 255, 255)", | ||
| colorGrayDarkTurva: "rgb(117, 117, 117)", | ||
| colorGrayLightTurva: "rgb(230, 230, 230)", | ||
| colorBrandGrayTurva: "rgb(178, 180, 179)", | ||
| colorSecondaryTurva: "rgb(17, 17, 17)", | ||
| colorPrimaryLightTurva: "rgb(244, 207, 214)", | ||
| colorCategoryTravelTurva: "rgb(9, 129, 148)", | ||
| colorGrayTurva: "rgb(209, 209, 209)", | ||
| colorDangerTurva: "rgb(224, 42, 13)", | ||
| colorWarningTurva: "rgb(250, 164, 15)", | ||
| fontWeightExtraBold: "800", | ||
| letterSpacingHeading: "-0.01rem", | ||
| fontFamilyHeadingTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
| fontFamilyTextTurva: "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
| fontFamilyHeading: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
| fontFamilyText: "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", | ||
| fontWeightBold: "700", | ||
| fontWeightNormal: "400", | ||
| fontWeightSemiBold: "600", | ||
| fontSizeXxxxLarge: "4.5rem", | ||
| fontSizeXxxLarge: "3rem", | ||
| fontSizeXxLarge: "2.25rem", | ||
| fontSizeXLarge: "1.5rem", | ||
| fontSizeLarge: "1.25rem", | ||
| fontSizeMedium: "1rem", | ||
| fontSizeSmall: "0.875rem", | ||
| fontSizeXSmall: "0.75rem", | ||
| radiusSharp: "0", | ||
| radiusDefault: "4px", | ||
| radiusCircle: "50%", | ||
| radiusPill: "20rem", | ||
| shadowDefault: "0 2px 6px 0 rgba(0, 41, 77, 0.07)", | ||
| shadowHover: "0 2px 10px 0 rgba(0, 41, 77, 0.1)", | ||
| shadowModal: "0 2px 20px 0 rgba(0, 0, 0, 0.2)", | ||
| shadowCard: "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)", | ||
| shadowDefaultTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13)", | ||
| shadowHoverTurva: "0 2px 10px 0 rgba(117, 117, 117, 0.15)", | ||
| shadowCardTurva: "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)", | ||
| spaceXxSmall: "4px", | ||
| spaceLarge: "20px", | ||
| spaceXSmall: "8px", | ||
| spaceSmall: "12px", | ||
| spaceMedium: "16px", | ||
| spaceXxLarge: "36px", | ||
| spaceXxxxLarge: "72px", | ||
| spaceXxxLarge: "48px", | ||
| spaceXLarge: "28px", | ||
| sizeIconXxLarge: "48px", | ||
| sizeFormBorder: "2px", | ||
| sizeStepMedium: "40px", | ||
| sizeButtonMinWidth: "6.875rem", | ||
| sizeHeader: "70px", | ||
| sizeIconXxxLarge: "72px", | ||
| sizeIconXLarge: "36px", | ||
| sizeIconXxSmall: "10px", | ||
| sizeStepSmall: "30px", | ||
| sizeIconLarge: "30px", | ||
| sizeTappableSquare: "48px", | ||
| sizeIconXSmall: "16px", | ||
| sizeIconMedium: "24px", | ||
| sizeIconSmall: "20px", | ||
| opacity75: "0.75", | ||
| opacity50: "0.50", | ||
| opacity30: "0.30", | ||
| zIndexDropdown: "600", | ||
| zIndexSpinner: "800", | ||
| zIndexDefault: "1", | ||
| zIndexToast: "500", | ||
| zIndexPopup: "950", | ||
| zIndexModal: "900", | ||
| zIndexSticky: "300", | ||
| zIndexMasked: "100", | ||
| zIndexDeep: "-999999", | ||
| zIndexOverlay: "700", | ||
| zIndexMask: "200", | ||
| zIndexHeader: "400", | ||
| lineHeightMedium: "1.5", | ||
| lineHeightSmall: "1.25", | ||
| lineHeightXSmall: "1", | ||
| transitionQuickly: "300ms ease", | ||
| mediaQuerySmall: "'only screen and (max-width: 47.9375em)'", | ||
| mediaQueryMedium: "'only screen and (min-width: 48em)'", | ||
| mediaQueryLarge: "'only screen and (min-width: 64.0625em)'", | ||
| }; | ||
| var tokens_common_1 = tokens_common.colorWarning; | ||
| var tokens_common_2 = tokens_common.colorGrayLighter; | ||
| var tokens_common_3 = tokens_common.colorCategoryHome; | ||
| var tokens_common_4 = tokens_common.colorPrimary; | ||
| var tokens_common_5 = tokens_common.colorCategoryVehicle; | ||
| var tokens_common_6 = tokens_common.colorSuccess; | ||
| var tokens_common_7 = tokens_common.colorCategoryFamily; | ||
| var tokens_common_8 = tokens_common.colorPrimaryLightest; | ||
| var tokens_common_9 = tokens_common.colorPrimaryLighter; | ||
| var tokens_common_10 = tokens_common.colorBrandBlue; | ||
| var tokens_common_11 = tokens_common.colorPrimaryDark; | ||
| var tokens_common_12 = tokens_common.colorGrayLightest; | ||
| var tokens_common_13 = tokens_common.colorCategoryFinance; | ||
| var tokens_common_14 = tokens_common.colorGrayDark; | ||
| var tokens_common_15 = tokens_common.colorGrayLight; | ||
| var tokens_common_16 = tokens_common.colorSecondary; | ||
| var tokens_common_17 = tokens_common.colorCategoryPet; | ||
| var tokens_common_18 = tokens_common.colorPrimaryLight; | ||
| var tokens_common_19 = tokens_common.colorCategoryTravel; | ||
| var tokens_common_20 = tokens_common.colorGray; | ||
| var tokens_common_21 = tokens_common.colorDanger; | ||
| var tokens_common_22 = tokens_common.colorGrayDarkerTurva; | ||
| var tokens_common_23 = tokens_common.colorGrayLighterTurva; | ||
| var tokens_common_24 = tokens_common.colorCategoryHomeTurva; | ||
| var tokens_common_25 = tokens_common.colorPrimaryTurva; | ||
| var tokens_common_26 = tokens_common.colorCategoryVehicleTurva; | ||
| var tokens_common_27 = tokens_common.colorSuccessTurva; | ||
| var tokens_common_28 = tokens_common.colorPrimaryLightestTurva; | ||
| var tokens_common_29 = tokens_common.colorCategoryFamilyTurva; | ||
| var tokens_common_30 = tokens_common.colorCategoryUnionTurva; | ||
| var tokens_common_31 = tokens_common.colorPrimaryLighterTurva; | ||
| var tokens_common_32 = tokens_common.colorPrimaryDarkTurva; | ||
| var tokens_common_33 = tokens_common.colorGrayLightestTurva; | ||
| var tokens_common_34 = tokens_common.colorGrayDarkTurva; | ||
| var tokens_common_35 = tokens_common.colorGrayLightTurva; | ||
| var tokens_common_36 = tokens_common.colorBrandGrayTurva; | ||
| var tokens_common_37 = tokens_common.colorSecondaryTurva; | ||
| var tokens_common_38 = tokens_common.colorPrimaryLightTurva; | ||
| var tokens_common_39 = tokens_common.colorCategoryTravelTurva; | ||
| var tokens_common_40 = tokens_common.colorGrayTurva; | ||
| var tokens_common_41 = tokens_common.colorDangerTurva; | ||
| var tokens_common_42 = tokens_common.colorWarningTurva; | ||
| var tokens_common_43 = tokens_common.fontWeightExtraBold; | ||
| var tokens_common_44 = tokens_common.letterSpacingHeading; | ||
| var tokens_common_45 = tokens_common.fontFamilyHeadingTurva; | ||
| var tokens_common_46 = tokens_common.fontFamilyTextTurva; | ||
| var tokens_common_47 = tokens_common.fontFamilyHeading; | ||
| var tokens_common_48 = tokens_common.fontFamilyText; | ||
| var tokens_common_49 = tokens_common.fontWeightBold; | ||
| var tokens_common_50 = tokens_common.fontWeightNormal; | ||
| var tokens_common_51 = tokens_common.fontWeightSemiBold; | ||
| var tokens_common_52 = tokens_common.fontSizeXxxxLarge; | ||
| var tokens_common_53 = tokens_common.fontSizeXxxLarge; | ||
| var tokens_common_54 = tokens_common.fontSizeXxLarge; | ||
| var tokens_common_55 = tokens_common.fontSizeXLarge; | ||
| var tokens_common_56 = tokens_common.fontSizeLarge; | ||
| var tokens_common_57 = tokens_common.fontSizeMedium; | ||
| var tokens_common_58 = tokens_common.fontSizeSmall; | ||
| var tokens_common_59 = tokens_common.fontSizeXSmall; | ||
| var tokens_common_60 = tokens_common.radiusSharp; | ||
| var tokens_common_61 = tokens_common.radiusDefault; | ||
| var tokens_common_62 = tokens_common.radiusCircle; | ||
| var tokens_common_63 = tokens_common.radiusPill; | ||
| var tokens_common_64 = tokens_common.shadowDefault; | ||
| var tokens_common_65 = tokens_common.shadowHover; | ||
| var tokens_common_66 = tokens_common.shadowModal; | ||
| var tokens_common_67 = tokens_common.shadowCard; | ||
| var tokens_common_68 = tokens_common.shadowDefaultTurva; | ||
| var tokens_common_69 = tokens_common.shadowHoverTurva; | ||
| var tokens_common_70 = tokens_common.shadowCardTurva; | ||
| var tokens_common_71 = tokens_common.spaceXxSmall; | ||
| var tokens_common_72 = tokens_common.spaceLarge; | ||
| var tokens_common_73 = tokens_common.spaceXSmall; | ||
| var tokens_common_74 = tokens_common.spaceSmall; | ||
| var tokens_common_75 = tokens_common.spaceMedium; | ||
| var tokens_common_76 = tokens_common.spaceXxLarge; | ||
| var tokens_common_77 = tokens_common.spaceXxxxLarge; | ||
| var tokens_common_78 = tokens_common.spaceXxxLarge; | ||
| var tokens_common_79 = tokens_common.spaceXLarge; | ||
| var tokens_common_80 = tokens_common.sizeIconXxLarge; | ||
| var tokens_common_81 = tokens_common.sizeFormBorder; | ||
| var tokens_common_82 = tokens_common.sizeStepMedium; | ||
| var tokens_common_83 = tokens_common.sizeButtonMinWidth; | ||
| var tokens_common_84 = tokens_common.sizeHeader; | ||
| var tokens_common_85 = tokens_common.sizeIconXxxLarge; | ||
| var tokens_common_86 = tokens_common.sizeIconXLarge; | ||
| var tokens_common_87 = tokens_common.sizeIconXxSmall; | ||
| var tokens_common_88 = tokens_common.sizeStepSmall; | ||
| var tokens_common_89 = tokens_common.sizeIconLarge; | ||
| var tokens_common_90 = tokens_common.sizeTappableSquare; | ||
| var tokens_common_91 = tokens_common.sizeIconXSmall; | ||
| var tokens_common_92 = tokens_common.sizeIconMedium; | ||
| var tokens_common_93 = tokens_common.sizeIconSmall; | ||
| var tokens_common_94 = tokens_common.opacity75; | ||
| var tokens_common_95 = tokens_common.opacity50; | ||
| var tokens_common_96 = tokens_common.opacity30; | ||
| var tokens_common_97 = tokens_common.zIndexDropdown; | ||
| var tokens_common_98 = tokens_common.zIndexSpinner; | ||
| var tokens_common_99 = tokens_common.zIndexDefault; | ||
| var tokens_common_100 = tokens_common.zIndexToast; | ||
| var tokens_common_101 = tokens_common.zIndexPopup; | ||
| var tokens_common_102 = tokens_common.zIndexModal; | ||
| var tokens_common_103 = tokens_common.zIndexSticky; | ||
| var tokens_common_104 = tokens_common.zIndexMasked; | ||
| var tokens_common_105 = tokens_common.zIndexDeep; | ||
| var tokens_common_106 = tokens_common.zIndexOverlay; | ||
| var tokens_common_107 = tokens_common.zIndexMask; | ||
| var tokens_common_108 = tokens_common.zIndexHeader; | ||
| var tokens_common_109 = tokens_common.lineHeightMedium; | ||
| var tokens_common_110 = tokens_common.lineHeightSmall; | ||
| var tokens_common_111 = tokens_common.lineHeightXSmall; | ||
| var tokens_common_112 = tokens_common.transitionQuickly; | ||
| var tokens_common_113 = tokens_common.mediaQuerySmall; | ||
| var tokens_common_114 = tokens_common.mediaQueryMedium; | ||
| var tokens_common_115 = tokens_common.mediaQueryLarge; | ||
| class DuetSpinner { | ||
| constructor() { | ||
| /** | ||
| * Color of the spinner, as a design token. Example: “tokens.colorPrimary”. | ||
| */ | ||
| this.color = tokens_common.colorGrayLightest; | ||
| /** | ||
| * Size variation of the spinner. Can be one of: small, medium, large. | ||
| */ | ||
| this.size = "small"; | ||
| } | ||
| /** | ||
| * render() function | ||
| * Always the last one in the class. | ||
| */ | ||
| render() { | ||
| const classes = classNames("duet-spinner", `${this.size}`); | ||
| const styles = { | ||
| color: this.color, | ||
| }; | ||
| return h("div", { class: classes, style: styles, "aria-label": this.accessibleLabel }); | ||
| } | ||
| static get is() { return "duet-spinner"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "accessibleLabel": { | ||
| "type": String, | ||
| "attr": "accessible-label" | ||
| }, | ||
| "color": { | ||
| "type": String, | ||
| "attr": "color" | ||
| }, | ||
| "size": { | ||
| "type": String, | ||
| "attr": "size" | ||
| } | ||
| }; } | ||
| static get style() { return ":host {\n margin: 0;\n position: absolute;\n z-index: 800;\n top: 50%;\n left: 50%;\n max-width: 100%;\n}\n\n.duet-spinner {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\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 position: absolute;\n top: 50%;\n left: 50%;\n width: 24px;\n height: 24px;\n will-change: tranform;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n z-index: 800;\n border-radius: 50%;\n -webkit-animation: duetRotate 0.6s linear infinite;\n animation: duetRotate 0.6s linear infinite;\n border: 2px solid transparent;\n border-left: 2px solid currentColor;\n -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n transform: translateZ(0) translateX(-50%) translateY(-50%);\n}\n.duet-spinner::after {\n content: \"\";\n position: absolute;\n -webkit-transform-origin: 0% 0%;\n transform-origin: 0% 0%;\n opacity: 0.3;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n overflow: hidden;\n -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);\n transform: translateZ(0) translateX(-50%) translateY(-50%);\n z-index: 200;\n border-radius: 50%;\n border: 2px solid currentColor;\n}\n.duet-spinner.medium {\n width: 36px;\n height: 36px;\n border-width: 4px;\n}\n.duet-spinner.medium::after {\n border-width: 4px;\n}\n.duet-spinner.large {\n width: 72px;\n height: 72px;\n border-width: 8px;\n}\n.duet-spinner.large::after {\n border-width: 8px;\n}\n\n\@-webkit-keyframes duetRotate {\n 0% {\n -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}\n\n\@keyframes duetRotate {\n 0% {\n -webkit-transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n transform: translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);\n }\n 100% {\n -webkit-transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);\n }\n}"; } | ||
| } | ||
| export { DuetButton, DuetSpinner }; | ||
| export { DuetButton as duet_button }; |
@@ -1,7 +0,8 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| import { a as applyThemeClasses } from './chunk-a86f69c1.js'; | ||
| import { c as classNames } from './chunk-b4bc4d1f.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| class DuetCard { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -55,39 +56,13 @@ * The content for the card title | ||
| if (this.url) { | ||
| return (h("a", { href: this.url, class: cardClasses }, | ||
| this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", | ||
| h("slot", null))); | ||
| return (h("a", { href: this.url, class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null))); | ||
| // If URL prop doesn’t exist, render a regular div | ||
| } | ||
| else { | ||
| return (h("div", { class: cardClasses }, | ||
| this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", | ||
| h("slot", null))); | ||
| return (h("div", { class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null))); | ||
| } | ||
| } | ||
| static get is() { return "duet-card"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "cardTitle": { | ||
| "type": String, | ||
| "attr": "card-title" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "padding": { | ||
| "type": String, | ||
| "attr": "padding" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| }, | ||
| "url": { | ||
| "type": String, | ||
| "attr": "url" | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-card {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 28px;\n border-radius: 4px;\n background: white;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);\n display: block;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n}\n.duet-card.duet-theme-turva {\n -webkit-box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);\n box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);\n}\n.duet-card.medium {\n padding: 36px;\n}\n.duet-card.large {\n padding: 48px;\n}\n\nh2 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 15px 28px 16px;\n margin: -28px -28px 20px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\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-weight: 800;\n font-size: 1.25rem;\n border-bottom: 1px solid #e1e3e6;\n color: #00294d;\n}\n.duet-theme-turva h2 {\n border-color: #e6e6e6;\n color: #111111;\n}\n.medium h2 {\n padding: 19px 36px 20px;\n margin: -36px -36px 28px;\n}\n.large h2 {\n padding: 26px 48px 27px;\n margin: -48px -48px 36px;\n}"; } | ||
| } | ||
| export { DuetCard }; | ||
| export { DuetCard as duet_card }; |
@@ -1,4 +0,7 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| class DuetGridCell { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| } | ||
| /** | ||
@@ -9,14 +12,8 @@ * render() function | ||
| render() { | ||
| return (h("div", { class: "duet-grid-cell" }, | ||
| h("slot", null))); | ||
| return (h("div", { class: "duet-grid-cell" }, h("slot", null))); | ||
| } | ||
| static get is() { return "duet-grid-cell"; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n}"; } | ||
| } | ||
| export { DuetGridCell }; | ||
| export { DuetGridCell as duet_grid_cell }; |
@@ -1,4 +0,7 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| class DuetGrid { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| } | ||
| /** | ||
@@ -9,14 +12,8 @@ * render() function | ||
| render() { | ||
| return (h("div", { class: "duet-grid" }, | ||
| h("slot", null))); | ||
| return (h("div", { class: "duet-grid" }, h("slot", null))); | ||
| } | ||
| static get is() { return "duet-grid"; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: -ms-flexbox;\n display: flex;\n vertical-align: top;\n width: 100%;\n}\n\n.duet-grid {\n display: grid;\n grid-template-columns: calc(33.333% - 20px) calc(33.333% - 20px) calc( 33.333% - 20px );\n grid-column-gap: 20px;\n grid-row-gap: 0;\n width: 100%;\n}"; } | ||
| } | ||
| export { DuetGrid }; | ||
| export { DuetGrid as duet_grid }; |
@@ -1,6 +0,6 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| import { a as applyThemeClasses } from './chunk-a86f69c1.js'; | ||
| import { c as classNames } from './chunk-b4bc4d1f.js'; | ||
| import { d as duetIcons } from './chunk-94f81923.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| import { a as duetIcons } from './chunk-11bf8d04.js'; | ||
| // Older browsers don't support event options, feature detect it. | ||
@@ -227,3 +227,4 @@ | ||
| class DuetHeader { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -413,101 +414,8 @@ * Theme of the header. Can be one of: default, turva. | ||
| }); | ||
| return (h("span", null, | ||
| h("header", { class: headerClasses }, | ||
| h("a", { href: "#", class: "logo" }, | ||
| h("svg", { role: "img", "aria-labelledby": "uniqueTitle32423", viewBox: "0 0 144 30", xmlns: "http://www.w3.org/2000/svg" }, | ||
| h("title", { id: "uniqueTitle32423" }, "L\u00E4hiTapiola"), | ||
| h("path", { d: "M42.11 20.151a3.79 3.79 0 0 1-.026.498 1.463 1.463 0 0 1-.073.336.402.402 0 0 1-.124.19.26.26 0 0 1-.18.045h-5.853a.805.805 0 0 1-.545-.19.79.79 0 0 1-.22-.626V8.835a.263.263 0 0 1 .062-.175.439.439 0 0 1 .212-.128 2.22 2.22 0 0 1 .4-.08c.418-.035.839-.035 1.258 0 .133.015.266.042.395.08.08.021.153.066.208.128a.27.27 0 0 1 .066.175v10.263h4.025a.274.274 0 0 1 .172.054.366.366 0 0 1 .124.176c.039.105.064.214.073.326.02.165.028.331.026.497M51.845 6.117a1.35 1.35 0 0 1-.274.966 2.1 2.1 0 0 1-2.056 0 1.339 1.339 0 0 1-.26-.937c-.037-.347.06-.695.27-.973a1.463 1.463 0 0 1 1.029-.27c.363-.042.73.051 1.028.263.206.267.3.604.263.94zm-3.615 4.79l-1.803 5.421h3.618zm-.691-4.8c.035.344-.061.689-.27.965a1.463 1.463 0 0 1-1.029.274 1.485 1.485 0 0 1-1.028-.263 1.32 1.32 0 0 1-.263-.937 1.357 1.357 0 0 1 .274-.973 2.111 2.111 0 0 1 2.056 0c.205.268.298.605.26.94zm6.545 14.161c.064.183.114.37.15.56a.34.34 0 0 1-.08.311.655.655 0 0 1-.384.128c-.187 0-.44.026-.761.026h-.783a2.034 2.034 0 0 1-.428-.059.432.432 0 0 1-.209-.124.651.651 0 0 1-.095-.209l-.86-2.56h-4.789l-.808 2.49a.867.867 0 0 1-.103.235.435.435 0 0 1-.208.146c-.13.044-.266.069-.403.073-.175 0-.402.022-.688.022a5.828 5.828 0 0 1-.706-.033.527.527 0 0 1-.366-.142.366.366 0 0 1-.065-.322c.03-.187.08-.371.146-.549l3.933-11.312a1.01 1.01 0 0 1 .139-.275.505.505 0 0 1 .249-.157 1.88 1.88 0 0 1 .479-.066h1.734c.181.001.362.023.538.066a.501.501 0 0 1 .274.165c.066.089.114.19.143.296zM65.824 20.88a.293.293 0 0 1-.065.179.468.468 0 0 1-.213.128 1.983 1.983 0 0 1-.395.076 4.818 4.818 0 0 1-.622.033 5.009 5.009 0 0 1-.633-.033 1.88 1.88 0 0 1-.395-.076.476.476 0 0 1-.208-.128.289.289 0 0 1-.063-.18v-5.147h-4.756v5.147a.285.285 0 0 1-.058.18.435.435 0 0 1-.209.128 1.939 1.939 0 0 1-.391.076 6.03 6.03 0 0 1-1.259 0 1.972 1.972 0 0 1-.398-.076.468.468 0 0 1-.213-.128.289.289 0 0 1-.062-.18V8.835c0-.063.023-.125.062-.175a.439.439 0 0 1 .213-.128 2.22 2.22 0 0 1 .398-.08c.42-.035.84-.035 1.259 0 .133.014.264.041.391.08a.41.41 0 0 1 .209.128c.039.05.06.112.058.175v4.702h4.756V8.835c.001-.063.023-.125.063-.175a.443.443 0 0 1 .208-.128c.13-.04.261-.067.395-.08.21-.02.422-.029.633-.026.208-.003.416.006.622.025.134.015.266.042.395.08a.439.439 0 0 1 .213.129c.04.05.064.111.065.175zM71.202 20.88a.289.289 0 0 1-.062.179.49.49 0 0 1-.212.128 1.983 1.983 0 0 1-.395.076 5.996 5.996 0 0 1-1.255 0 2.016 2.016 0 0 1-.402-.076.435.435 0 0 1-.209-.128.27.27 0 0 1-.066-.18V8.835a.27.27 0 0 1 .066-.175.417.417 0 0 1 .216-.128c.13-.039.264-.065.399-.08.206-.02.414-.029.622-.026.21-.003.42.006.629.025.134.015.266.042.395.08a.457.457 0 0 1 .212.129c.04.05.062.112.062.175zM82.485 9.549c0 .162-.008.325-.025.486-.013.112-.039.22-.077.326a.428.428 0 0 1-.12.18.26.26 0 0 1-.165.058h-3.194v10.28a.267.267 0 0 1-.063.18.468.468 0 0 1-.212.128c-.13.039-.263.065-.399.076a5.96 5.96 0 0 1-1.25 0 1.972 1.972 0 0 1-.4-.076.446.446 0 0 1-.212-.128.27.27 0 0 1-.066-.18V10.61h-3.19a.238.238 0 0 1-.168-.058.428.428 0 0 1-.12-.179 1.463 1.463 0 0 1-.074-.326 4.599 4.599 0 0 1-.022-.486 4.928 4.928 0 0 1 .022-.505 1.39 1.39 0 0 1 .073-.33.406.406 0 0 1 .12-.179.27.27 0 0 1 .17-.05h8.985a.3.3 0 0 1 .164.05c.056.048.098.11.12.18.04.106.066.216.078.329.017.168.026.336.025.505M86.989 10.917l-1.804 5.422h3.619zm5.854 9.355c.065.182.115.37.15.56a.34.34 0 0 1-.08.31.655.655 0 0 1-.367.129c-.183 0-.435.025-.757.025h-.787a1.851 1.851 0 0 1-.428-.055.402.402 0 0 1-.204-.124.651.651 0 0 1-.1-.208l-.859-2.561h-4.807l-.824 2.473a.768.768 0 0 1-.102.234.435.435 0 0 1-.208.146 1.39 1.39 0 0 1-.403.073c-.176 0-.402.022-.684.022a5.894 5.894 0 0 1-.71-.033.527.527 0 0 1-.366-.142.388.388 0 0 1-.07-.322c.034-.187.083-.37.147-.549l3.933-11.312c.034-.098.08-.19.14-.275a.501.501 0 0 1 .252-.157c.155-.042.314-.065.475-.066h1.734c.182.001.362.023.538.066a.527.527 0 0 1 .278.165c.064.09.112.19.143.296zM100.65 12.541a2.283 2.283 0 0 0-.238-1.097 1.61 1.61 0 0 0-.582-.64 1.928 1.928 0 0 0-.731-.264 5.44 5.44 0 0 0-.783-.055h-1.098v4.325h1.164a2.77 2.77 0 0 0 1.039-.169c.262-.098.498-.258.688-.464a2.1 2.1 0 0 0 .402-.732c.095-.295.141-.604.139-.915m2.711-.186a5.045 5.045 0 0 1-.337 1.902 3.688 3.688 0 0 1-.976 1.398 4.306 4.306 0 0 1-1.57.86c-.712.21-1.453.31-2.195.296h-1.065v4.08a.27.27 0 0 1-.066.179.435.435 0 0 1-.208.128 1.983 1.983 0 0 1-.395.076 5.996 5.996 0 0 1-1.255 0 1.92 1.92 0 0 1-.399-.076.435.435 0 0 1-.208-.128.285.285 0 0 1-.059-.18V9.41a.918.918 0 0 1 .242-.694.87.87 0 0 1 .636-.235h3.004c.303 0 .589 0 .863.037.33.033.657.083.98.15a4.23 4.23 0 0 1 1.16.417c.377.196.715.457 1 .772.279.321.493.694.628 1.098.152.452.227.927.22 1.405M107.97 20.88a.267.267 0 0 1-.061.179.468.468 0 0 1-.213.128 1.983 1.983 0 0 1-.395.076 5.993 5.993 0 0 1-1.255 0 1.92 1.92 0 0 1-.398-.076.446.446 0 0 1-.213-.128.27.27 0 0 1-.065-.18V8.835a.27.27 0 0 1 .065-.175.417.417 0 0 1 .216-.128c.13-.039.264-.065.399-.08a5.81 5.81 0 0 1 .618-.026c.212-.003.423.005.633.025.134.015.266.042.395.08a.439.439 0 0 1 .213.129.263.263 0 0 1 .062.175zM119.502 14.85a9.684 9.684 0 0 0-.157-1.83 3.93 3.93 0 0 0-.538-1.408 2.561 2.561 0 0 0-1.002-.907 3.428 3.428 0 0 0-1.577-.322 3.194 3.194 0 0 0-1.595.366c-.42.23-.779.558-1.043.958-.267.43-.451.907-.541 1.405a8.682 8.682 0 0 0-.161 1.698c-.005.629.048 1.257.157 1.877.086.504.267.987.534 1.423.238.39.58.708.988.914.497.224 1.04.33 1.584.311a3.293 3.293 0 0 0 1.599-.365 2.872 2.872 0 0 0 1.032-.966c.274-.437.464-.92.56-1.427a8.96 8.96 0 0 0 .16-1.727m2.722-.139a9.424 9.424 0 0 1-.395 2.85 5.693 5.693 0 0 1-1.174 2.122 5.027 5.027 0 0 1-1.925 1.332c-.848.32-1.75.475-2.656.457a7.83 7.83 0 0 1-2.597-.388 4.47 4.47 0 0 1-1.848-1.189 5.03 5.03 0 0 1-1.097-2.03 10.112 10.112 0 0 1-.366-2.927 9.011 9.011 0 0 1 .395-2.784 5.612 5.612 0 0 1 1.17-2.104 5.093 5.093 0 0 1 1.929-1.332 7.112 7.112 0 0 1 2.663-.464 7.683 7.683 0 0 1 2.561.387c.705.233 1.34.64 1.848 1.182.513.58.889 1.27 1.097 2.016.265.934.388 1.902.366 2.872M131.407 20.151a3.79 3.79 0 0 1-.025.498 1.687 1.687 0 0 1-.07.336.465.465 0 0 1-.124.19.263.263 0 0 1-.172.06h-5.854a.801.801 0 0 1-.549-.191.78.78 0 0 1-.223-.626V8.835a.27.27 0 0 1 .066-.175.406.406 0 0 1 .212-.128c.13-.04.261-.066.395-.08.21-.02.42-.029.63-.026.21-.003.42.006.629.025.134.015.266.042.395.08a.439.439 0 0 1 .212.129.263.263 0 0 1 .062.175v10.263h4.025c.062-.001.122.018.172.054a.424.424 0 0 1 .124.176c.036.105.06.215.07.326.019.165.028.331.025.497M137.528 10.917l-1.796 5.422h3.618zm5.854 9.355c.063.183.112.37.146.56a.366.366 0 0 1-.077.31.67.67 0 0 1-.388.129c-.183 0-.435.025-.757.025h-.783a1.83 1.83 0 0 1-.428-.055.432.432 0 0 1-.208-.124.651.651 0 0 1-.1-.208l-.859-2.561h-4.785l-.809 2.491a.768.768 0 0 1-.102.234.424.424 0 0 1-.205.147 1.42 1.42 0 0 1-.406.073c-.176 0-.403.022-.684.022a5.854 5.854 0 0 1-.71-.033.527.527 0 0 1-.366-.143.366.366 0 0 1-.07-.322c.035-.187.085-.37.15-.549l3.93-11.312c.033-.097.08-.19.139-.274a.501.501 0 0 1 .252-.158c.155-.042.315-.064.476-.065h1.738c.18 0 .359.022.534.065a.512.512 0 0 1 .278.165c.064.09.112.19.142.296zM2.195 19.756a6.454 6.454 0 0 1 0-9.11L10.9 1.95a6.45 6.45 0 0 1 7.35-1.255l-.022.022-8.568 8.568-.022.022a2.142 2.142 0 0 0 3.029 3.03l1.518-1.519c.856-.856 1.712-.874 2.459-.128l3.263 3.249c.89.889.98 1.624 0 2.601l-3.077 3.092c-.856.856-1.664.936-2.601 0l-5.952-5.938a2.142 2.142 0 0 0-3.03 3.03l7.559 7.554a3.798 3.798 0 0 0 5.367 0l6.38-6.388a3.798 3.798 0 0 0 0-5.367L19.676 7.65c-.765-.765-.696-1.628.08-2.4l1.57-1.573c.07-.07.135-.146.194-.227l6.106 6.106a7.99 7.99 0 0 1 0 11.301l-6.513 6.513a7.994 7.994 0 0 1-11.308 0z" }))), | ||
| this.variant === "public" ? (h("div", { class: "seutu public" }, | ||
| h("span", { class: "text" }, "P\u00E4\u00E4kaupunkiseutu"), | ||
| h("a", { href: "#" }, | ||
| "Vaihda aluetta ", | ||
| h("span", { class: "icon", innerHTML: duetIcons["action-arrow-right-small"].svg })))) : (h("div", { class: "seutu private" }, | ||
| h("span", { class: "text" }, "P\u00E4\u00E4kaupunkiseutu"))), | ||
| h("button", { class: "mobile-menu" }, | ||
| h("span", { class: "name" }, "Valikko"), | ||
| h("div", { class: "nav-icon" }, | ||
| h("span", { class: "bar" }), | ||
| h("span", { class: "bar" }), | ||
| h("span", { class: "bar" }), | ||
| h("span", { class: "bar" })))), | ||
| h("div", { class: "menus" }, | ||
| this.variant === "public" ? (h("nav", { class: "primary-nav public" }, | ||
| h("div", { class: "dropdown" }, | ||
| h("button", { class: "dropdown-toggle" }, | ||
| h("span", { class: "text context-selector" }, "Henkil\u00F6asiakas"), | ||
| h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), | ||
| h("div", { class: "dropdown-content context" }, | ||
| h("button", { class: "selected" }, "Henkil\u00F6asiakas"), | ||
| h("button", null, "Maatila-asiakas"), | ||
| h("button", null, "Yritysasiakas"), | ||
| h("button", null, "Tietoa meist\u00E4"))), | ||
| h("a", { href: "#", class: "main-link selected" }, "Etusivu"), | ||
| h("a", { href: "#", class: "main-link" }, "Edut"), | ||
| h("a", { href: "#", class: "main-link" }, "Vakuutukset"), | ||
| h("a", { href: "#", class: "main-link" }, "S\u00E4\u00E4st\u00F6t ja sijoitukset"), | ||
| h("a", { href: "#", class: "main-link" }, "Ilmoita vahingosta"), | ||
| h("a", { href: "#", class: "main-link" }, "Asiakaspalvelu"), | ||
| h("a", { href: "#", class: "main-link" }, "Pankki ja rahoitus"))) : (h("nav", { class: "primary-nav private" }, | ||
| h("a", { href: "#", class: "main-link selected" }, "Etusivu"), | ||
| h("a", { href: "#", class: "main-link" }, "Vakuutukset"), | ||
| h("a", { href: "#", class: "main-link" }, "Korvaukset"), | ||
| h("a", { href: "#", class: "main-link" }, "S\u00E4\u00E4st\u00F6t ja sijoitukset"), | ||
| h("a", { href: "#", class: "main-link" }, "Laskut"), | ||
| h("a", { href: "#", class: "main-link" }, | ||
| "Omat viestit ", | ||
| h("span", { class: "indicator" }, "(Lukemattomia viestej\u00E4)")))), | ||
| h("div", { class: "secondary-nav" }, | ||
| h("div", { class: "dropdown" }, | ||
| h("button", { class: "dropdown-toggle" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-contact-dropdown"].svg }), | ||
| h("span", { class: "text" }, "Ota yhteytt\u00E4"), | ||
| h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), | ||
| this.variant === "public" ? (h("div", { class: "dropdown-content" }, | ||
| h("a", { href: "/prototype/navigation/" }, "Kaikki yhteystiedot"), | ||
| h("a", { href: "/prototype/navigation/" }, "Asiakaspalvelu"), | ||
| h("a", { href: "/prototype/navigation/" }, "Kysy chatissa"))) : (h("div", { class: "dropdown-content" }, | ||
| h("a", { href: "/prototype/navigation/index-logged.html" }, "Kaikki yhteystiedot"), | ||
| h("a", { href: "/prototype/navigation/index-logged.html" }, "Omat viestit"), | ||
| h("a", { href: "/prototype/navigation/index-logged.html" }, "Aloita chat")))), | ||
| h("div", { class: "dropdown" }, | ||
| h("button", { class: "dropdown-toggle" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-language"].svg }), | ||
| h("span", { class: "text language-selector" }, "FI"), | ||
| h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), | ||
| h("div", { class: "dropdown-content language" }, | ||
| h("button", { "data-lang": "FI", class: "selected" }, "Suomeksi"), | ||
| h("button", { "data-lang": "SV" }, "P\u00E5 Svenska"), | ||
| h("button", { "data-lang": "EN" }, "In English"))), | ||
| this.variant === "public" ? (h("a", { href: "/prototype/navigation/index-logged.html", class: "menu-item" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-login"].svg }), | ||
| h("span", { class: "text" }, "Kirjaudu sis\u00E4\u00E4n"))) : (h("div", null, | ||
| h("a", { class: "menu-item", href: "/prototype/navigation/index-logged.html" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-user"].svg }), | ||
| h("span", { class: "text" }, "Laura-Karoliina")), | ||
| h("a", { class: "menu-item", href: "/prototype/navigation/" }, | ||
| h("span", { class: "icon", innerHTML: duetIcons["navigation-logout"].svg }), | ||
| h("span", { class: "text" }, "Kirjaudu ulos")))))))); | ||
| return (h("span", null, h("header", { class: headerClasses }, h("a", { href: "#", class: "logo" }, h("svg", { role: "img", "aria-labelledby": "uniqueTitle32423", viewBox: "0 0 144 30", xmlns: "http://www.w3.org/2000/svg" }, h("title", { id: "uniqueTitle32423" }, "L\u00E4hiTapiola"), h("path", { d: "M42.11 20.151a3.79 3.79 0 0 1-.026.498 1.463 1.463 0 0 1-.073.336.402.402 0 0 1-.124.19.26.26 0 0 1-.18.045h-5.853a.805.805 0 0 1-.545-.19.79.79 0 0 1-.22-.626V8.835a.263.263 0 0 1 .062-.175.439.439 0 0 1 .212-.128 2.22 2.22 0 0 1 .4-.08c.418-.035.839-.035 1.258 0 .133.015.266.042.395.08.08.021.153.066.208.128a.27.27 0 0 1 .066.175v10.263h4.025a.274.274 0 0 1 .172.054.366.366 0 0 1 .124.176c.039.105.064.214.073.326.02.165.028.331.026.497M51.845 6.117a1.35 1.35 0 0 1-.274.966 2.1 2.1 0 0 1-2.056 0 1.339 1.339 0 0 1-.26-.937c-.037-.347.06-.695.27-.973a1.463 1.463 0 0 1 1.029-.27c.363-.042.73.051 1.028.263.206.267.3.604.263.94zm-3.615 4.79l-1.803 5.421h3.618zm-.691-4.8c.035.344-.061.689-.27.965a1.463 1.463 0 0 1-1.029.274 1.485 1.485 0 0 1-1.028-.263 1.32 1.32 0 0 1-.263-.937 1.357 1.357 0 0 1 .274-.973 2.111 2.111 0 0 1 2.056 0c.205.268.298.605.26.94zm6.545 14.161c.064.183.114.37.15.56a.34.34 0 0 1-.08.311.655.655 0 0 1-.384.128c-.187 0-.44.026-.761.026h-.783a2.034 2.034 0 0 1-.428-.059.432.432 0 0 1-.209-.124.651.651 0 0 1-.095-.209l-.86-2.56h-4.789l-.808 2.49a.867.867 0 0 1-.103.235.435.435 0 0 1-.208.146c-.13.044-.266.069-.403.073-.175 0-.402.022-.688.022a5.828 5.828 0 0 1-.706-.033.527.527 0 0 1-.366-.142.366.366 0 0 1-.065-.322c.03-.187.08-.371.146-.549l3.933-11.312a1.01 1.01 0 0 1 .139-.275.505.505 0 0 1 .249-.157 1.88 1.88 0 0 1 .479-.066h1.734c.181.001.362.023.538.066a.501.501 0 0 1 .274.165c.066.089.114.19.143.296zM65.824 20.88a.293.293 0 0 1-.065.179.468.468 0 0 1-.213.128 1.983 1.983 0 0 1-.395.076 4.818 4.818 0 0 1-.622.033 5.009 5.009 0 0 1-.633-.033 1.88 1.88 0 0 1-.395-.076.476.476 0 0 1-.208-.128.289.289 0 0 1-.063-.18v-5.147h-4.756v5.147a.285.285 0 0 1-.058.18.435.435 0 0 1-.209.128 1.939 1.939 0 0 1-.391.076 6.03 6.03 0 0 1-1.259 0 1.972 1.972 0 0 1-.398-.076.468.468 0 0 1-.213-.128.289.289 0 0 1-.062-.18V8.835c0-.063.023-.125.062-.175a.439.439 0 0 1 .213-.128 2.22 2.22 0 0 1 .398-.08c.42-.035.84-.035 1.259 0 .133.014.264.041.391.08a.41.41 0 0 1 .209.128c.039.05.06.112.058.175v4.702h4.756V8.835c.001-.063.023-.125.063-.175a.443.443 0 0 1 .208-.128c.13-.04.261-.067.395-.08.21-.02.422-.029.633-.026.208-.003.416.006.622.025.134.015.266.042.395.08a.439.439 0 0 1 .213.129c.04.05.064.111.065.175zM71.202 20.88a.289.289 0 0 1-.062.179.49.49 0 0 1-.212.128 1.983 1.983 0 0 1-.395.076 5.996 5.996 0 0 1-1.255 0 2.016 2.016 0 0 1-.402-.076.435.435 0 0 1-.209-.128.27.27 0 0 1-.066-.18V8.835a.27.27 0 0 1 .066-.175.417.417 0 0 1 .216-.128c.13-.039.264-.065.399-.08.206-.02.414-.029.622-.026.21-.003.42.006.629.025.134.015.266.042.395.08a.457.457 0 0 1 .212.129c.04.05.062.112.062.175zM82.485 9.549c0 .162-.008.325-.025.486-.013.112-.039.22-.077.326a.428.428 0 0 1-.12.18.26.26 0 0 1-.165.058h-3.194v10.28a.267.267 0 0 1-.063.18.468.468 0 0 1-.212.128c-.13.039-.263.065-.399.076a5.96 5.96 0 0 1-1.25 0 1.972 1.972 0 0 1-.4-.076.446.446 0 0 1-.212-.128.27.27 0 0 1-.066-.18V10.61h-3.19a.238.238 0 0 1-.168-.058.428.428 0 0 1-.12-.179 1.463 1.463 0 0 1-.074-.326 4.599 4.599 0 0 1-.022-.486 4.928 4.928 0 0 1 .022-.505 1.39 1.39 0 0 1 .073-.33.406.406 0 0 1 .12-.179.27.27 0 0 1 .17-.05h8.985a.3.3 0 0 1 .164.05c.056.048.098.11.12.18.04.106.066.216.078.329.017.168.026.336.025.505M86.989 10.917l-1.804 5.422h3.619zm5.854 9.355c.065.182.115.37.15.56a.34.34 0 0 1-.08.31.655.655 0 0 1-.367.129c-.183 0-.435.025-.757.025h-.787a1.851 1.851 0 0 1-.428-.055.402.402 0 0 1-.204-.124.651.651 0 0 1-.1-.208l-.859-2.561h-4.807l-.824 2.473a.768.768 0 0 1-.102.234.435.435 0 0 1-.208.146 1.39 1.39 0 0 1-.403.073c-.176 0-.402.022-.684.022a5.894 5.894 0 0 1-.71-.033.527.527 0 0 1-.366-.142.388.388 0 0 1-.07-.322c.034-.187.083-.37.147-.549l3.933-11.312c.034-.098.08-.19.14-.275a.501.501 0 0 1 .252-.157c.155-.042.314-.065.475-.066h1.734c.182.001.362.023.538.066a.527.527 0 0 1 .278.165c.064.09.112.19.143.296zM100.65 12.541a2.283 2.283 0 0 0-.238-1.097 1.61 1.61 0 0 0-.582-.64 1.928 1.928 0 0 0-.731-.264 5.44 5.44 0 0 0-.783-.055h-1.098v4.325h1.164a2.77 2.77 0 0 0 1.039-.169c.262-.098.498-.258.688-.464a2.1 2.1 0 0 0 .402-.732c.095-.295.141-.604.139-.915m2.711-.186a5.045 5.045 0 0 1-.337 1.902 3.688 3.688 0 0 1-.976 1.398 4.306 4.306 0 0 1-1.57.86c-.712.21-1.453.31-2.195.296h-1.065v4.08a.27.27 0 0 1-.066.179.435.435 0 0 1-.208.128 1.983 1.983 0 0 1-.395.076 5.996 5.996 0 0 1-1.255 0 1.92 1.92 0 0 1-.399-.076.435.435 0 0 1-.208-.128.285.285 0 0 1-.059-.18V9.41a.918.918 0 0 1 .242-.694.87.87 0 0 1 .636-.235h3.004c.303 0 .589 0 .863.037.33.033.657.083.98.15a4.23 4.23 0 0 1 1.16.417c.377.196.715.457 1 .772.279.321.493.694.628 1.098.152.452.227.927.22 1.405M107.97 20.88a.267.267 0 0 1-.061.179.468.468 0 0 1-.213.128 1.983 1.983 0 0 1-.395.076 5.993 5.993 0 0 1-1.255 0 1.92 1.92 0 0 1-.398-.076.446.446 0 0 1-.213-.128.27.27 0 0 1-.065-.18V8.835a.27.27 0 0 1 .065-.175.417.417 0 0 1 .216-.128c.13-.039.264-.065.399-.08a5.81 5.81 0 0 1 .618-.026c.212-.003.423.005.633.025.134.015.266.042.395.08a.439.439 0 0 1 .213.129.263.263 0 0 1 .062.175zM119.502 14.85a9.684 9.684 0 0 0-.157-1.83 3.93 3.93 0 0 0-.538-1.408 2.561 2.561 0 0 0-1.002-.907 3.428 3.428 0 0 0-1.577-.322 3.194 3.194 0 0 0-1.595.366c-.42.23-.779.558-1.043.958-.267.43-.451.907-.541 1.405a8.682 8.682 0 0 0-.161 1.698c-.005.629.048 1.257.157 1.877.086.504.267.987.534 1.423.238.39.58.708.988.914.497.224 1.04.33 1.584.311a3.293 3.293 0 0 0 1.599-.365 2.872 2.872 0 0 0 1.032-.966c.274-.437.464-.92.56-1.427a8.96 8.96 0 0 0 .16-1.727m2.722-.139a9.424 9.424 0 0 1-.395 2.85 5.693 5.693 0 0 1-1.174 2.122 5.027 5.027 0 0 1-1.925 1.332c-.848.32-1.75.475-2.656.457a7.83 7.83 0 0 1-2.597-.388 4.47 4.47 0 0 1-1.848-1.189 5.03 5.03 0 0 1-1.097-2.03 10.112 10.112 0 0 1-.366-2.927 9.011 9.011 0 0 1 .395-2.784 5.612 5.612 0 0 1 1.17-2.104 5.093 5.093 0 0 1 1.929-1.332 7.112 7.112 0 0 1 2.663-.464 7.683 7.683 0 0 1 2.561.387c.705.233 1.34.64 1.848 1.182.513.58.889 1.27 1.097 2.016.265.934.388 1.902.366 2.872M131.407 20.151a3.79 3.79 0 0 1-.025.498 1.687 1.687 0 0 1-.07.336.465.465 0 0 1-.124.19.263.263 0 0 1-.172.06h-5.854a.801.801 0 0 1-.549-.191.78.78 0 0 1-.223-.626V8.835a.27.27 0 0 1 .066-.175.406.406 0 0 1 .212-.128c.13-.04.261-.066.395-.08.21-.02.42-.029.63-.026.21-.003.42.006.629.025.134.015.266.042.395.08a.439.439 0 0 1 .212.129.263.263 0 0 1 .062.175v10.263h4.025c.062-.001.122.018.172.054a.424.424 0 0 1 .124.176c.036.105.06.215.07.326.019.165.028.331.025.497M137.528 10.917l-1.796 5.422h3.618zm5.854 9.355c.063.183.112.37.146.56a.366.366 0 0 1-.077.31.67.67 0 0 1-.388.129c-.183 0-.435.025-.757.025h-.783a1.83 1.83 0 0 1-.428-.055.432.432 0 0 1-.208-.124.651.651 0 0 1-.1-.208l-.859-2.561h-4.785l-.809 2.491a.768.768 0 0 1-.102.234.424.424 0 0 1-.205.147 1.42 1.42 0 0 1-.406.073c-.176 0-.403.022-.684.022a5.854 5.854 0 0 1-.71-.033.527.527 0 0 1-.366-.143.366.366 0 0 1-.07-.322c.035-.187.085-.37.15-.549l3.93-11.312c.033-.097.08-.19.139-.274a.501.501 0 0 1 .252-.158c.155-.042.315-.064.476-.065h1.738c.18 0 .359.022.534.065a.512.512 0 0 1 .278.165c.064.09.112.19.142.296zM2.195 19.756a6.454 6.454 0 0 1 0-9.11L10.9 1.95a6.45 6.45 0 0 1 7.35-1.255l-.022.022-8.568 8.568-.022.022a2.142 2.142 0 0 0 3.029 3.03l1.518-1.519c.856-.856 1.712-.874 2.459-.128l3.263 3.249c.89.889.98 1.624 0 2.601l-3.077 3.092c-.856.856-1.664.936-2.601 0l-5.952-5.938a2.142 2.142 0 0 0-3.03 3.03l7.559 7.554a3.798 3.798 0 0 0 5.367 0l6.38-6.388a3.798 3.798 0 0 0 0-5.367L19.676 7.65c-.765-.765-.696-1.628.08-2.4l1.57-1.573c.07-.07.135-.146.194-.227l6.106 6.106a7.99 7.99 0 0 1 0 11.301l-6.513 6.513a7.994 7.994 0 0 1-11.308 0z" }))), this.variant === "public" ? (h("div", { class: "seutu public" }, h("span", { class: "text" }, "P\u00E4\u00E4kaupunkiseutu"), h("a", { href: "#" }, "Vaihda aluetta ", h("span", { class: "icon", innerHTML: duetIcons["action-arrow-right-small"].svg })))) : (h("div", { class: "seutu private" }, h("span", { class: "text" }, "P\u00E4\u00E4kaupunkiseutu"))), h("button", { class: "mobile-menu" }, h("span", { class: "name" }, "Valikko"), h("div", { class: "nav-icon" }, h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" })))), h("div", { class: "menus" }, this.variant === "public" ? (h("nav", { class: "primary-nav public" }, h("div", { class: "dropdown" }, h("button", { class: "dropdown-toggle" }, h("span", { class: "text context-selector" }, "Henkil\u00F6asiakas"), h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), h("div", { class: "dropdown-content context" }, h("button", { class: "selected" }, "Henkil\u00F6asiakas"), h("button", null, "Maatila-asiakas"), h("button", null, "Yritysasiakas"), h("button", null, "Tietoa meist\u00E4"))), h("a", { href: "#", class: "main-link selected" }, "Etusivu"), h("a", { href: "#", class: "main-link" }, "Edut"), h("a", { href: "#", class: "main-link" }, "Vakuutukset"), h("a", { href: "#", class: "main-link" }, "S\u00E4\u00E4st\u00F6t ja sijoitukset"), h("a", { href: "#", class: "main-link" }, "Ilmoita vahingosta"), h("a", { href: "#", class: "main-link" }, "Asiakaspalvelu"), h("a", { href: "#", class: "main-link" }, "Pankki ja rahoitus"))) : (h("nav", { class: "primary-nav private" }, h("a", { href: "#", class: "main-link selected" }, "Etusivu"), h("a", { href: "#", class: "main-link" }, "Vakuutukset"), h("a", { href: "#", class: "main-link" }, "Korvaukset"), h("a", { href: "#", class: "main-link" }, "S\u00E4\u00E4st\u00F6t ja sijoitukset"), h("a", { href: "#", class: "main-link" }, "Laskut"), h("a", { href: "#", class: "main-link" }, "Omat viestit ", h("span", { class: "indicator" }, "(Lukemattomia viestej\u00E4)")))), h("div", { class: "secondary-nav" }, h("div", { class: "dropdown" }, h("button", { class: "dropdown-toggle" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-contact-dropdown"].svg }), h("span", { class: "text" }, "Ota yhteytt\u00E4"), h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), this.variant === "public" ? (h("div", { class: "dropdown-content" }, h("a", { href: "/" }, "Kaikki yhteystiedot"), h("a", { href: "/" }, "Asiakaspalvelu"), h("a", { href: "/" }, "Kysy chatissa"))) : (h("div", { class: "dropdown-content" }, h("a", { href: "index-logged.html" }, "Kaikki yhteystiedot"), h("a", { href: "index-logged.html" }, "Omat viestit"), h("a", { href: "index-logged.html" }, "Aloita chat")))), h("div", { class: "dropdown" }, h("button", { class: "dropdown-toggle" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-language"].svg }), h("span", { class: "text language-selector" }, "FI"), h("span", { class: "icon-mobile", innerHTML: duetIcons["action-arrow-down-small"].svg })), h("div", { class: "dropdown-content language" }, h("button", { "data-lang": "FI", class: "selected" }, "Suomeksi"), h("button", { "data-lang": "SV" }, "P\u00E5 Svenska"), h("button", { "data-lang": "EN" }, "In English"))), this.variant === "public" ? (h("a", { href: "index-logged.html", class: "menu-item" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-login"].svg }), h("span", { class: "text" }, "Kirjaudu sis\u00E4\u00E4n"))) : (h("div", null, h("a", { class: "menu-item", href: "index-logged.html" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-user"].svg }), h("span", { class: "text" }, "Laura-Karoliina")), h("a", { class: "menu-item", href: "/" }, h("span", { class: "icon", innerHTML: duetIcons["navigation-logout"].svg }), h("span", { class: "text" }, "Kirjaudu ulos")))))))); | ||
| } | ||
| static get is() { return "duet-header"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "position": { | ||
| "type": String, | ||
| "attr": "position" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| }, | ||
| "variant": { | ||
| "type": String, | ||
| "attr": "variant" | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 48px;\n position: fixed;\n z-index: 300;\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: 0.875rem;\n font-weight: 400;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: block;\n top: 0;\n left: 0;\n width: 100%;\n}\n\@media only screen and (min-width: 64.0625em) {\n :host {\n position: relative;\n top: auto;\n left: auto;\n z-index: auto;\n }\n}\n\n* {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\nheader {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\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 border-bottom: 1px solid #e1e3e6;\n background: white;\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: 0.875rem;\n font-weight: 400;\n line-height: 1.5;\n z-index: 301;\n height: 67.2px;\n width: 100%;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n position: relative;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);\n}\n\@media only screen and (min-width: 64.0625em) {\n header {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n top: auto;\n left: auto;\n }\n}\n\n.logo {\n margin-left: 28px;\n height: 100%;\n display: -ms-flexbox;\n display: flex;\n}\n\@media only screen and (max-width: 47.9375em) {\n .logo {\n margin-left: 20px;\n }\n}\n.logo svg {\n width: 130px;\n height: auto;\n}\n.logo svg path {\n fill: #00a1d4;\n}\n\n.dropdown-toggle,\n.menu-item {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-transition: color 300ms ease, -webkit-box-shadow 300ms ease;\n transition: color 300ms ease, -webkit-box-shadow 300ms ease;\n transition: color 300ms ease, box-shadow 300ms ease;\n transition: color 300ms ease, box-shadow 300ms ease, -webkit-box-shadow 300ms ease;\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-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n padding: 16px;\n cursor: pointer;\n text-decoration: none;\n white-space: nowrap;\n position: relative;\n color: #00294d;\n border-bottom: 1px solid #e1e3e6;\n height: 48px;\n padding-left: 28px;\n width: 100%;\n display: -ms-flexbox;\n display: flex;\n text-align: left;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\@media only screen and (max-width: 47.9375em) {\n .dropdown-toggle,\n.menu-item {\n padding-left: 20px;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-toggle,\n.menu-item {\n padding-left: 16px;\n font-size: 0.875rem;\n height: 100%;\n }\n .dropdown-toggle::after,\n.menu-item::after {\n content: \"\";\n position: absolute;\n background: #e1e3e6;\n top: 50%;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n right: 0;\n height: 20px;\n width: 1px;\n }\n .dropdown-toggle:last-child::after,\n.menu-item:last-child::after {\n display: none;\n }\n}\n.dropdown-toggle:hover,\n.menu-item:hover {\n color: #004d80;\n}\n.dropdown-toggle:active,\n.menu-item:active {\n -webkit-transition: none;\n transition: none;\n}\n\n.menu-item {\n height: 54px;\n}\n\@media only screen and (min-width: 64.0625em) {\n .menu-item {\n height: 100%;\n }\n}\n\n.mobile-user-menu {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n color: #00294d;\n width: 48px;\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n}\n.mobile-user-menu svg {\n pointer-events: none;\n width: 26.4px;\n height: 26.4px;\n}\n\n.mobile-menu {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n color: #00294d;\n display: -ms-flexbox;\n display: flex;\n height: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n cursor: pointer;\n padding-left: 28px;\n padding-right: 28px;\n}\n\@media only screen and (min-width: 64.0625em) {\n .mobile-menu {\n display: none;\n }\n}\n\@media only screen and (max-width: 47.9375em) {\n .mobile-menu {\n padding-right: 20px;\n }\n}\n.mobile-menu:focus {\n outline: 0;\n}\n.mobile-menu .name {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n opacity: 0;\n display: block;\n text-indent: -999px;\n}\n.mobile-menu svg {\n pointer-events: none;\n width: 24px;\n height: 24px;\n}\n\n.menus {\n background: #f5f8fa;\n -webkit-transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;\n transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;\n -webkit-overflow-scrolling: touch;\n z-index: 300;\n position: fixed;\n text-align: left;\n overflow: hidden;\n overflow-y: auto;\n width: 100%;\n top: 67.2px;\n opacity: 0;\n visibility: hidden;\n bottom: 0;\n left: 0;\n will-change: opacity, visibility;\n}\n\@media only screen and (min-width: 64.0625em) {\n .menus {\n background: transparent;\n z-index: auto;\n -webkit-transition: none;\n transition: none;\n position: static;\n will-change: initial;\n -webkit-overflow-scrolling: auto;\n overflow: visible;\n opacity: 1;\n visibility: visible;\n bottom: auto;\n left: auto;\n top: auto;\n }\n}\n.menus.active {\n opacity: 1;\n visibility: visible;\n}\n\n.secondary-nav {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n -webkit-transition: opacity 600ms ease, -webkit-transform 600ms ease;\n transition: opacity 600ms ease, -webkit-transform 600ms ease;\n transition: transform 600ms ease, opacity 600ms ease;\n transition: transform 600ms ease, opacity 600ms ease, -webkit-transform 600ms ease;\n will-change: transform, opacity;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n -webkit-font-smoothing: antialiased;\n opacity: 0;\n}\n.active .secondary-nav {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n}\n\@media only screen and (min-width: 64.0625em) {\n .secondary-nav {\n z-index: 302;\n height: 67.2px;\n -webkit-transition: none;\n transition: none;\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n position: absolute;\n top: 0;\n right: 0;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: 20px;\n }\n .secondary-nav > *,\n.secondary-nav span {\n height: 100%;\n display: -ms-flexbox;\n display: flex;\n border: 0;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n.secondary-nav .dropdown-toggle {\n -ms-flex-direction: row;\n flex-direction: row;\n height: 100%;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\@media only screen and (min-width: 64.0625em) {\n .secondary-nav .dropdown-toggle {\n -ms-flex-pack: center;\n justify-content: center;\n border-bottom: 0;\n }\n}\n.secondary-nav .dropdown-toggle.active {\n border-bottom: 0;\n}\n\@media only screen and (min-width: 64.0625em) {\n .secondary-nav .dropdown-toggle.active {\n color: #004d80;\n -webkit-box-shadow: inset 0 -3px 0 #0077b3;\n box-shadow: inset 0 -3px 0 #0077b3;\n }\n}\n.secondary-nav .dropdown-toggle.active .icon-mobile {\n -webkit-transform: translateY(-50%) rotate(180deg);\n transform: translateY(-50%) rotate(180deg);\n}\n.secondary-nav .dropdown-toggle:focus {\n outline: 0;\n}\n.secondary-nav .icon-mobile {\n height: 100%;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n width: 48px;\n color: #00294d;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%) rotate(0deg);\n transform: translateY(-50%) rotate(0deg);\n right: 0;\n}\n\@media only screen and (min-width: 64.0625em) {\n .secondary-nav .icon-mobile {\n display: none;\n }\n}\n.secondary-nav .icon-mobile svg {\n margin: auto;\n vertical-align: top;\n width: 10px;\n height: 10px;\n}\n.secondary-nav svg {\n width: 16px;\n height: 16px;\n margin-right: 8px;\n margin-bottom: -3px;\n}\n\@media only screen and (min-width: 64.0625em) {\n .secondary-nav svg {\n margin-bottom: 0;\n margin-top: -1px;\n }\n}\n\nnav {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n display: block;\n -webkit-font-smoothing: antialiased;\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 font-weight: 400;\n line-height: 1.5;\n z-index: 300;\n background: white;\n width: 100%;\n position: relative;\n will-change: transform, opacity;\n -webkit-transition: opacity 600ms ease, -webkit-transform 600ms ease;\n transition: opacity 600ms ease, -webkit-transform 600ms ease;\n transition: transform 600ms ease, opacity 600ms ease;\n transition: transform 600ms ease, opacity 600ms ease, -webkit-transform 600ms ease;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n opacity: 0;\n}\n.active nav {\n opacity: 1;\n -webkit-transform: translateY(0);\n transform: translateY(0);\n}\n\@media only screen and (min-width: 64.0625em) {\n nav {\n font-size: 0.875rem;\n opacity: 1;\n -webkit-transition: none;\n transition: none;\n -webkit-transform: none;\n transform: none;\n top: 67.2px;\n -webkit-box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);\n box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);\n height: 48px;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: start;\n justify-content: flex-start;\n }\n nav.private {\n padding-left: 20px;\n }\n nav.fixed {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n nav .dropdown {\n margin-right: 20px;\n }\n}\nnav .dropdown-toggle {\n background: #00294d;\n color: white;\n padding: 0 28px;\n border-bottom: 0;\n height: 54px;\n font-weight: 600;\n display: -ms-flexbox;\n display: flex;\n min-width: 186px;\n z-index: 601;\n -ms-flex-align: center;\n align-items: center;\n line-height: 58px;\n -ms-flex-pack: start;\n justify-content: flex-start;\n vertical-align: top;\n}\n\@media only screen and (min-width: 64.0625em) {\n nav .dropdown-toggle {\n height: 48px;\n line-height: 51px;\n padding: 0 20px 0 36px;\n }\n}\n\@media only screen and (max-width: 47.9375em) {\n nav .dropdown-toggle {\n padding: 0 20px;\n }\n}\nnav .dropdown-toggle .text {\n margin-top: -2px;\n}\nnav .dropdown-toggle .icon-mobile {\n display: block;\n will-change: transform;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n margin-top: -2px;\n margin-left: 8px;\n position: absolute;\n top: 0;\n right: 20px;\n}\n\@media only screen and (min-width: 64.0625em) {\n nav .dropdown-toggle .icon-mobile {\n position: relative;\n top: auto;\n right: auto;\n }\n}\nnav .dropdown-toggle .icon-mobile svg {\n width: 10px;\n height: 10px;\n}\nnav .dropdown-toggle:hover {\n color: white;\n}\nnav .dropdown-toggle:focus {\n outline: 0;\n}\nnav .dropdown-toggle::after {\n display: none;\n}\nnav .dropdown-toggle.active .icon-mobile {\n -webkit-transform: rotate(180deg);\n transform: rotate(180deg);\n}\nnav .dropdown-content {\n background: #00294d;\n color: white;\n width: 100%;\n}\nnav .dropdown-content button {\n padding-left: 0;\n color: white;\n}\n\@media only screen and (min-width: 64.0625em) {\n nav .dropdown-content button {\n padding-left: 36px;\n }\n nav .dropdown-content button:hover {\n background: #0d3456;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n nav .dropdown-content {\n padding-top: 0;\n will-change: transform, opacity, visibility;\n -webkit-transform: translateZ(0) translateY(-100%);\n transform: translateZ(0) translateY(-100%);\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n nav .dropdown-content.active {\n opacity: 1;\n visibility: visible;\n -webkit-transform: translateZ(0) translateY(0);\n transform: translateZ(0) translateY(0);\n }\n}\nnav a {\n line-height: 51px;\n font-weight: 600;\n border-bottom: 1px solid #e1e3e6;\n display: block;\n position: relative;\n white-space: nowrap;\n padding: 0 12px;\n height: 51px;\n color: #00294d;\n text-decoration: none;\n padding-left: 28px;\n}\n\@media only screen and (max-width: 47.9375em) {\n nav a {\n padding-left: 20px;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n nav a {\n line-height: 47px;\n padding-left: 12px;\n height: 100%;\n border: 0;\n }\n nav a::after {\n content: \"\";\n bottom: 0;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n background: white;\n position: absolute;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n width: 100%;\n max-width: 0;\n height: 3px;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n nav a.public:first-child {\n padding-left: 0;\n }\n nav a.public:first-child::after {\n left: 0 !important;\n }\n}\nnav a.selected {\n color: #0077b3;\n}\nnav a.selected:hover {\n color: #0077b3;\n}\n\@media only screen and (min-width: 64.0625em) {\n nav a.selected::after {\n background: #0077b3;\n max-width: calc(100% - 24px);\n }\n}\n\@media (max-width: 64em) {\n nav a.selected::after {\n content: \"\";\n background: #0077b3;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n }\n}\nnav a:hover {\n color: #004d80;\n}\n\n.indicator {\n overflow: hidden;\n text-indent: -9999px;\n display: -ms-inline-flexbox;\n display: inline-flex;\n top: 16px;\n position: relative;\n width: 7.1428571429px;\n height: 7.1428571429px;\n border-radius: 50%;\n background: #f7b228;\n}\n\@media only screen and (min-width: 64.0625em) {\n .indicator {\n right: -3px;\n top: 10px;\n width: 10px;\n height: 10px;\n position: absolute;\n }\n}\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-content {\n padding-bottom: 16px;\n background: #f5f8fa;\n border-bottom: 1px solid #e1e3e6;\n padding-left: 36px;\n text-align: left;\n display: none;\n}\n\@media only screen and (max-width: 47.9375em) {\n .dropdown-content {\n padding-left: 28px;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content {\n padding-top: 16px;\n padding-left: 0;\n border: 0;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n -webkit-box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);\n box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);\n z-index: 600;\n min-width: 130px;\n left: 0;\n top: 100%;\n position: absolute;\n display: block;\n opacity: 0;\n visibility: hidden;\n will-change: transform, opacity, visibility;\n -webkit-transform: scale(0.85) translateZ(0) translateY(-20px);\n transform: scale(0.85) translateZ(0) translateY(-20px);\n }\n}\n.dropdown-content.active {\n display: block;\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content.active {\n opacity: 1;\n visibility: visible;\n -webkit-transform: scale(1) translateZ(0) translateY(0);\n transform: scale(1) translateZ(0) translateY(0);\n }\n}\n.dropdown-content button,\n.dropdown-content a {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 3px 8px 4px;\n -webkit-transition: 300ms ease;\n transition: 300ms ease;\n padding-left: 16px;\n padding-right: 16px;\n cursor: pointer;\n text-decoration: none;\n position: relative;\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: 0.875rem;\n font-weight: 400;\n line-height: 1.5;\n color: #00294d;\n width: 100%;\n white-space: nowrap;\n display: block;\n text-align: left;\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content button:hover,\n.dropdown-content a:hover {\n background: #e6f2f8;\n }\n}\n.dropdown-content button:focus,\n.dropdown-content a:focus {\n outline: 0;\n}\n.dropdown-content button.selected,\n.dropdown-content a.selected {\n pointer-events: none;\n -webkit-font-smoothing: subpixel-antialiased;\n font-weight: 600;\n padding-right: 36px;\n vertical-align: baseline;\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content button.selected,\n.dropdown-content a.selected {\n -webkit-font-smoothing: antialiased;\n color: white;\n background: #0077b3;\n }\n}\n.dropdown-content button.selected .icon,\n.dropdown-content a.selected .icon {\n width: 10px;\n height: 10px;\n display: inline-block;\n margin-top: 5px;\n vertical-align: top;\n margin-left: 12px;\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content button.selected .icon,\n.dropdown-content a.selected .icon {\n margin-top: 0;\n }\n}\n.dropdown-content button.selected .icon svg,\n.dropdown-content a.selected .icon svg {\n vertical-align: top;\n width: 100%;\n height: 100%;\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content button.selected .icon svg,\n.dropdown-content a.selected .icon svg {\n vertical-align: inherit;\n }\n}\n\@media only screen and (min-width: 64.0625em) {\n .dropdown-content button.selected .icon,\n.dropdown-content a.selected .icon {\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-60%);\n transform: translateY(-60%);\n right: 8px;\n }\n}\n\n.nav-icon {\n width: 24px;\n height: 17.1428571429px;\n position: relative;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n -webkit-transition: 0.4s ease-in-out;\n transition: 0.4s ease-in-out;\n cursor: pointer;\n}\n.nav-icon .bar {\n display: block;\n position: absolute;\n height: 2px;\n width: 100%;\n background: #00294d;\n border-radius: 20rem;\n opacity: 1;\n left: 0;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n -webkit-transition: 0.25s ease-in-out;\n transition: 0.25s ease-in-out;\n}\n.nav-icon .bar:nth-child(1) {\n top: 0px;\n}\n.nav-icon .bar:nth-child(2), .nav-icon .bar:nth-child(3) {\n top: 7px;\n}\n.nav-icon .bar:nth-child(4) {\n top: 14px;\n}\n.open .nav-icon .bar:nth-child(1) {\n top: 7px;\n width: 0%;\n left: 50%;\n}\n.open .nav-icon .bar:nth-child(2) {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n.open .nav-icon .bar:nth-child(3) {\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n.open .nav-icon .bar:nth-child(4) {\n top: 7px;\n width: 0%;\n left: 50%;\n}\n\n.seutu.private {\n color: #00294d;\n top: 0;\n position: absolute;\n left: 176px;\n height: 67.2px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\@media only screen and (max-width: 47.9375em) {\n .seutu.private {\n left: 162px;\n }\n}\n\@media (max-width: 370px) {\n .seutu.private {\n display: none;\n }\n}\n.seutu.private .text {\n padding-left: 16px;\n border-left: 1px solid #e1e3e6;\n}\n\@media only screen and (max-width: 47.9375em) {\n .seutu.private .text {\n padding-left: 12px;\n font-size: 0.875rem;\n }\n}\n\@media (max-width: 390px) {\n .seutu.private .text {\n font-size: 0.75rem;\n }\n}\n.seutu.private a {\n color: #0077b3;\n text-decoration: none;\n}\n\@media only screen and (max-width: 47.9375em) {\n .seutu.private a {\n display: none;\n }\n}\n.seutu.private svg {\n width: 6.6666666667px;\n height: 6.6666666667px;\n}\n\n.seutu.public {\n color: #00294d;\n top: 0;\n position: absolute;\n left: 186px;\n height: 67.2px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\@media only screen and (max-width: 47.9375em) {\n .seutu.public {\n left: 162px;\n }\n}\n\@media (max-width: 370px) {\n .seutu.public {\n display: none;\n }\n}\n.seutu.public .text {\n padding-right: 12px;\n margin-right: 12px;\n border-right: 1px solid #e1e3e6;\n}\n\@media only screen and (max-width: 47.9375em) {\n .seutu.public .text {\n font-size: 0.875rem;\n padding: 0;\n margin: 0;\n border: 0;\n padding-left: 12px;\n border-left: 1px solid #e1e3e6;\n }\n}\n\@media (max-width: 390px) {\n .seutu.public .text {\n font-size: 0.75rem;\n }\n}\n.seutu.public a {\n color: #0077b3;\n text-decoration: none;\n}\n\@media only screen and (max-width: 47.9375em) {\n .seutu.public a {\n display: none;\n }\n}\n.seutu.public svg {\n margin-top: -10px;\n width: 6.6666666667px;\n height: 6.6666666667px;\n}\n\n.language-selector {\n min-width: 20px;\n}\n\n\@media only screen and (min-width: 64.0625em) {\n .normal-position + .menus nav.fixed {\n position: absolute;\n top: 67.2px;\n left: auto;\n right: auto;\n }\n}"; } | ||
| } | ||
| export { DuetHeader }; | ||
| export { DuetHeader as duet_header }; |
@@ -1,7 +0,8 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| import { a as applyThemeClasses } from './chunk-a86f69c1.js'; | ||
| import { c as classNames } from './chunk-b4bc4d1f.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| class DuetHeading { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -57,48 +58,24 @@ * The heading level used for the heading. Can be one of: h1, h2, h3, h4, h5, h6. | ||
| if (this.level === "h1") { | ||
| return (h("h1", { class: headingClasses, style: headingStyles }, | ||
| h("slot", null))); | ||
| return (h("h1", { class: headingClasses, style: headingStyles }, h("slot", null))); | ||
| } | ||
| else if (this.level === "h3") { | ||
| return (h("h3", { class: headingClasses, style: headingStyles }, | ||
| h("slot", null))); | ||
| return (h("h3", { class: headingClasses, style: headingStyles }, h("slot", null))); | ||
| } | ||
| else if (this.level === "h4") { | ||
| return (h("h4", { class: headingClasses, style: headingStyles }, | ||
| h("slot", null))); | ||
| return (h("h4", { class: headingClasses, style: headingStyles }, h("slot", null))); | ||
| } | ||
| else if (this.level === "h5") { | ||
| return (h("h5", { class: headingClasses, style: headingStyles }, | ||
| h("slot", null))); | ||
| return (h("h5", { class: headingClasses, style: headingStyles }, h("slot", null))); | ||
| } | ||
| else if (this.level === "h6") { | ||
| return (h("h6", { class: headingClasses, style: headingStyles }, | ||
| h("slot", null))); | ||
| return (h("h6", { class: headingClasses, style: headingStyles }, h("slot", null))); | ||
| } | ||
| else { | ||
| return (h("h2", { class: headingClasses, style: headingStyles }, | ||
| h("slot", null))); | ||
| return (h("h2", { class: headingClasses, style: headingStyles }, h("slot", null))); | ||
| } | ||
| } | ||
| static get is() { return "duet-heading"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "color": { | ||
| "type": String, | ||
| "attr": "color" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "level": { | ||
| "type": String, | ||
| "attr": "level" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 20px;\n display: block;\n width: 100%;\n}\n\n.duet-heading {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\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-weight: 800;\n line-height: 1.25;\n letter-spacing: -0.01rem;\n color: #00294d;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-style: normal;\n width: 100%;\n}\n.duet-heading.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 font-weight: 700;\n color: #111111;\n font-style: italic;\n}\n.duet-heading.h1 {\n font-size: 3rem;\n}\n\@media only screen and (max-width: 47.9375em) {\n .duet-heading.h1 {\n font-size: 2.25rem;\n }\n}\n.duet-heading.h2 {\n font-size: 2.25rem;\n}\n\@media only screen and (max-width: 47.9375em) {\n .duet-heading.h2 {\n font-size: 1.5rem;\n }\n}\n.duet-heading.h3 {\n font-size: 1.5rem;\n}\n.duet-heading.h3.duet-theme-turva {\n font-style: normal;\n}\n.duet-heading.h4 {\n font-size: 1.25rem;\n letter-spacing: 0;\n}\n.duet-heading.h4.duet-theme-turva {\n font-style: normal;\n}\n.duet-heading.h5 {\n -webkit-font-smoothing: subpixel-antialiased;\n letter-spacing: 0;\n margin-top: 36px;\n font-size: 1rem;\n font-weight: 600;\n}\n.duet-heading.h5.duet-theme-turva {\n font-weight: 700;\n font-style: normal;\n}\n.duet-heading.h6 {\n -webkit-font-smoothing: subpixel-antialiased;\n letter-spacing: 0;\n font-size: 0.875rem;\n font-weight: 600;\n}\n.duet-heading.h6.duet-theme-turva {\n font-weight: 700;\n font-style: normal;\n}"; } | ||
| } | ||
| export { DuetHeading }; | ||
| export { DuetHeading as duet_heading }; |
@@ -1,8 +0,9 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, c as createEvent, h, d as getElement } from './duet-0ab8831d.js'; | ||
| import { a as applyThemeClasses } from './chunk-a86f69c1.js'; | ||
| import { c as classNames } from './chunk-b4bc4d1f.js'; | ||
| import { d as duetIcons } from './chunk-94f81923.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| import { a as duetIcons } from './chunk-11bf8d04.js'; | ||
| class DuetInput { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -48,2 +49,6 @@ * Theme of the input. Can be one of: default, turva. | ||
| this.autoComplete = "on"; | ||
| this.clicked = createEvent(this, "clicked", 7); | ||
| this.typed = createEvent(this, "typed", 7); | ||
| this.blurred = createEvent(this, "blurred", 7); | ||
| this.focused = createEvent(this, "focused", 7); | ||
| } | ||
@@ -134,145 +139,8 @@ /** | ||
| 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))); | ||
| 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))); | ||
| } | ||
| static get is() { return "duet-input"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "accessibleActiveDescendant": { | ||
| "type": String, | ||
| "attr": "accessible-active-descendant" | ||
| }, | ||
| "accessibleAutocomplete": { | ||
| "type": String, | ||
| "attr": "accessible-autocomplete" | ||
| }, | ||
| "accessibleControls": { | ||
| "type": String, | ||
| "attr": "accessible-controls" | ||
| }, | ||
| "accessibleOwns": { | ||
| "type": String, | ||
| "attr": "accessible-owns" | ||
| }, | ||
| "autoComplete": { | ||
| "type": String, | ||
| "attr": "auto-complete" | ||
| }, | ||
| "autofocus": { | ||
| "type": Boolean, | ||
| "attr": "autofocus" | ||
| }, | ||
| "disabled": { | ||
| "type": Boolean, | ||
| "attr": "disabled" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "expand": { | ||
| "type": Boolean, | ||
| "attr": "expand" | ||
| }, | ||
| "helpText": { | ||
| "type": String, | ||
| "attr": "help-text" | ||
| }, | ||
| "identifier": { | ||
| "type": String, | ||
| "attr": "identifier" | ||
| }, | ||
| "inputPrefix": { | ||
| "type": String, | ||
| "attr": "input-prefix" | ||
| }, | ||
| "inputSuffix": { | ||
| "type": String, | ||
| "attr": "input-suffix" | ||
| }, | ||
| "label": { | ||
| "type": String, | ||
| "attr": "label" | ||
| }, | ||
| "labelHidden": { | ||
| "type": Boolean, | ||
| "attr": "label-hidden" | ||
| }, | ||
| "maxLength": { | ||
| "type": Number, | ||
| "attr": "max-length" | ||
| }, | ||
| "minLength": { | ||
| "type": Number, | ||
| "attr": "min-length" | ||
| }, | ||
| "name": { | ||
| "type": String, | ||
| "attr": "name" | ||
| }, | ||
| "pattern": { | ||
| "type": String, | ||
| "attr": "pattern" | ||
| }, | ||
| "placeholder": { | ||
| "type": String, | ||
| "attr": "placeholder" | ||
| }, | ||
| "required": { | ||
| "type": Boolean, | ||
| "attr": "required" | ||
| }, | ||
| "role": { | ||
| "type": String, | ||
| "attr": "role" | ||
| }, | ||
| "spellCheck": { | ||
| "type": Boolean, | ||
| "attr": "spell-check" | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| }, | ||
| "type": { | ||
| "type": String, | ||
| "attr": "type" | ||
| }, | ||
| "value": { | ||
| "type": String, | ||
| "attr": "value", | ||
| "reflectToAttr": true, | ||
| "mutable": true | ||
| } | ||
| }; } | ||
| static get events() { return [{ | ||
| "name": "clicked", | ||
| "method": "clicked", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "typed", | ||
| "method": "typed", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "blurred", | ||
| "method": "blurred", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }, { | ||
| "name": "focused", | ||
| "method": "focused", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true | ||
| }]; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\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 background: transparent;\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: 16px;\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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 13.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 border: 2px solid #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 border-color: #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 background: transparent;\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 border-color: #f5f8fa !important;\n background: #f5f8fa !important;\n color: #657787 !important;\n}\n.duet-input:hover {\n border-color: #657787;\n}\n.duet-theme-turva .duet-input:hover {\n border-color: #757575;\n}\n.duet-input:focus {\n border-color: #0077b3;\n outline: 0;\n}\n.duet-theme-turva .duet-input:focus {\n border-color: #111111;\n}\n.duet-input:not(:placeholder-shown):focus:required:invalid {\n border-color: #de2362;\n}\n.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid {\n border-color: #e02a0d;\n}\n.duet-input:focus:required:valid {\n border-color: #0077b3;\n}\n.duet-theme-turva .duet-input:focus:required:valid {\n border-color: #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 }; | ||
| export { DuetInput as duet_input }; |
@@ -1,5 +0,6 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| class DuetLayout { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -15,19 +16,8 @@ * Layout variation. Can be one of: one-column, two-column. | ||
| render() { | ||
| return (h("div", { class: "duet-layout" }, | ||
| h("slot", null))); | ||
| return (h("div", { class: "duet-layout" }, h("slot", null))); | ||
| } | ||
| static get is() { return "duet-layout"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "variation": { | ||
| "type": String, | ||
| "attr": "variation" | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n display: block;\n margin: 0 auto;\n max-width: 800px;\n width: 100%;\n}\n\n.duet-layout {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n padding: 36px;\n padding-top: 48px;\n padding-bottom: 48px;\n width: 100%;\n}"; } | ||
| } | ||
| export { DuetLayout }; | ||
| export { DuetLayout as duet_layout }; |
@@ -1,7 +0,8 @@ | ||
| const h = window.Duet.h; | ||
| import { r as registerInstance, h, d as getElement } from './duet-0ab8831d.js'; | ||
| import { a as applyThemeClasses } from './chunk-a86f69c1.js'; | ||
| import { c as classNames } from './chunk-b4bc4d1f.js'; | ||
| import { a as applyThemeClasses, b as classNames } from './chunk-e639420f.js'; | ||
| class DuetParagraph { | ||
| constructor() { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| /** | ||
@@ -52,23 +53,8 @@ * Theme of the card. Can be one of: default, turva. | ||
| }; | ||
| return (h("p", { class: paragraphClasses, style: paragraphStyles }, | ||
| h("slot", null))); | ||
| return (h("p", { class: paragraphClasses, style: paragraphStyles }, h("slot", null))); | ||
| } | ||
| static get is() { return "duet-paragraph"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get properties() { return { | ||
| "color": { | ||
| "type": String, | ||
| "attr": "color" | ||
| }, | ||
| "element": { | ||
| "elementRef": true | ||
| }, | ||
| "theme": { | ||
| "type": String, | ||
| "attr": "theme" | ||
| } | ||
| }; } | ||
| get element() { return getElement(this); } | ||
| 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 background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n display: block;\n width: 100%;\n}\n\n.duet-paragraph {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: 16px;\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-weight: 400;\n line-height: 1.5;\n color: #00294d;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-style: normal;\n display: block;\n width: 100%;\n}\n.duet-paragraph.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 color: #111111;\n}"; } | ||
| } | ||
| export { DuetParagraph }; | ||
| export { DuetParagraph as duet_paragraph }; |
@@ -1,2 +0,1 @@ | ||
| // Duet: CommonJS Main | ||
| module.exports = require('../esm/index.js'); | ||
| module.exports = require('./cjs/index.cjs.js'); |
@@ -1,1 +0,4 @@ | ||
| module.exports = require('../cjs/es5/duet.define.js'); | ||
| module.exports = require('../cjs/loader.cjs.js'); | ||
| module.exports.applyPolyfills = function() { return Promise.resolve() }; | ||
@@ -1,1 +0,12 @@ | ||
| export declare function defineCustomElements(win: any, opts?: any): Promise<void>; | ||
| export * from '../types/components'; | ||
| export interface CustomElementsDefineOptions { | ||
| exclude?: string[]; | ||
| resourcesUrl?: string; | ||
| syncQueue?: boolean; | ||
| raf?: (c: FrameRequestCallback) => number; | ||
| ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void; | ||
| rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void; | ||
| } | ||
| export declare function defineCustomElements(win: Window, opts?: CustomElementsDefineOptions): Promise<void>; | ||
| export declare function applyPolyfills(): Promise<void>; |
| { | ||
| "name": "loader", | ||
| "name": "duet-loader", | ||
| "typings": "./index.d.ts", | ||
| "module": "./index.js", | ||
| "module": "./index.mjs", | ||
| "main": "./index.cjs.js", | ||
| "jsnext:main": "./index.es2017.js", | ||
| "es2015": "./index.es2017.js", | ||
| "es2017": "./index.es2017.js" | ||
| "jsnext:main": "./index.es2017.mjs", | ||
| "es2015": "./index.es2017.mjs", | ||
| "es2017": "./index.es2017.mjs" | ||
| } |
@@ -8,13 +8,6 @@ /* tslint:disable */ | ||
| import './stencil.core'; | ||
| import { HTMLStencilElement, JSXBase } from './stencil.core'; | ||
| import { | ||
| Event, | ||
| EventEmitter, | ||
| } from './stencil.core'; | ||
| export namespace Components { | ||
| interface DuetButton { | ||
@@ -78,73 +71,2 @@ /** | ||
| } | ||
| interface DuetButtonAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Use this prop to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages. | ||
| */ | ||
| 'accessibleControls'?: string; | ||
| /** | ||
| * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. | ||
| */ | ||
| 'accessibleExpanded'?: boolean; | ||
| /** | ||
| * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. | ||
| */ | ||
| 'accessibleLabel'?: string; | ||
| /** | ||
| * Tells screen reader the element is pressed. | ||
| */ | ||
| 'accessiblePressed'?: boolean; | ||
| /** | ||
| * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies. | ||
| */ | ||
| 'disabled'?: boolean; | ||
| /** | ||
| * Expands the button to fill 100% of the container width. | ||
| */ | ||
| 'expand'?: boolean; | ||
| /** | ||
| * Forces URL to open in a new browser tab. Used together with URL prop. | ||
| */ | ||
| 'external'?: boolean; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| 'icon'?: string; | ||
| /** | ||
| * Show icon on the right side of the button content. | ||
| */ | ||
| 'iconRight'?: boolean; | ||
| /** | ||
| * Adds a unique identifier for the button. | ||
| */ | ||
| 'identifier'?: string; | ||
| /** | ||
| * Callback when focus leaves button. | ||
| */ | ||
| 'onBlurred'?: (event: CustomEvent<Event>) => void; | ||
| /** | ||
| * Callback for when the button is clicked. | ||
| */ | ||
| 'onClicked'?: (event: CustomEvent<Event>) => void; | ||
| /** | ||
| * Callback when button becomes focused. | ||
| */ | ||
| 'onFocused'?: (event: CustomEvent<Event>) => void; | ||
| /** | ||
| * Allows the button to submit a form. | ||
| */ | ||
| 'submit'?: boolean; | ||
| /** | ||
| * Theme of the button. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * A destination to link to, rendered in the href attribute of a link. | ||
| */ | ||
| 'url'?: string; | ||
| /** | ||
| * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain. | ||
| */ | ||
| 'variation'?: string; | ||
| } | ||
| interface DuetCard { | ||
@@ -168,27 +90,4 @@ /** | ||
| } | ||
| interface DuetCardAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * The content for the card title | ||
| */ | ||
| 'cardTitle'?: string; | ||
| /** | ||
| * The padding for the card. Can be one of: large, medium, small. | ||
| */ | ||
| 'padding'?: string; | ||
| /** | ||
| * Theme of the card. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * A destination to link to, rendered in the href attribute of a link. | ||
| */ | ||
| 'url'?: string; | ||
| } | ||
| interface DuetGrid {} | ||
| interface DuetGridCell {} | ||
| interface DuetGridCellAttributes extends StencilHTMLAttributes {} | ||
| interface DuetGrid {} | ||
| interface DuetGridAttributes extends StencilHTMLAttributes {} | ||
| interface DuetHeader { | ||
@@ -208,17 +107,2 @@ /** | ||
| } | ||
| interface DuetHeaderAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Position of the primary navigation. Can be one of: sticky, normal. | ||
| */ | ||
| 'position'?: string; | ||
| /** | ||
| * Theme of the header. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * Show public or private style variant. Can be one of: public, private. | ||
| */ | ||
| 'variant'?: string; | ||
| } | ||
| interface DuetHeading { | ||
@@ -238,17 +122,2 @@ /** | ||
| } | ||
| interface DuetHeadingAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Custom color for the heading. | ||
| */ | ||
| 'color'?: string; | ||
| /** | ||
| * The heading level used for the heading. Can be one of: h1, h2, h3, h4, h5, h6. | ||
| */ | ||
| 'level'?: string; | ||
| /** | ||
| * Theme of the card. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| } | ||
| interface DuetInput { | ||
@@ -356,4 +225,231 @@ /** | ||
| } | ||
| interface DuetInputAttributes extends StencilHTMLAttributes { | ||
| interface DuetLayout { | ||
| /** | ||
| * Layout variation. Can be one of: one-column, two-column. | ||
| */ | ||
| 'variation': string; | ||
| } | ||
| interface DuetParagraph { | ||
| /** | ||
| * Custom color for the paragraph. | ||
| */ | ||
| 'color': string; | ||
| /** | ||
| * Theme of the card. Can be one of: default, turva. | ||
| */ | ||
| 'theme': string; | ||
| } | ||
| interface DuetSpinner { | ||
| /** | ||
| * Adds accessible label for the spinner that is only shown for screen readers. | ||
| */ | ||
| 'accessibleLabel': string; | ||
| /** | ||
| * Color of the spinner, as a design token. Example: “tokens.colorPrimary”. | ||
| */ | ||
| 'color': string; | ||
| /** | ||
| * Size variation of the spinner. Can be one of: small, medium, large. | ||
| */ | ||
| 'size': string; | ||
| } | ||
| } | ||
| declare global { | ||
| interface HTMLDuetButtonElement extends Components.DuetButton, HTMLStencilElement {} | ||
| var HTMLDuetButtonElement: { | ||
| prototype: HTMLDuetButtonElement; | ||
| new (): HTMLDuetButtonElement; | ||
| }; | ||
| interface HTMLDuetCardElement extends Components.DuetCard, HTMLStencilElement {} | ||
| var HTMLDuetCardElement: { | ||
| prototype: HTMLDuetCardElement; | ||
| new (): HTMLDuetCardElement; | ||
| }; | ||
| interface HTMLDuetGridElement extends Components.DuetGrid, HTMLStencilElement {} | ||
| var HTMLDuetGridElement: { | ||
| prototype: HTMLDuetGridElement; | ||
| new (): HTMLDuetGridElement; | ||
| }; | ||
| interface HTMLDuetGridCellElement extends Components.DuetGridCell, HTMLStencilElement {} | ||
| var HTMLDuetGridCellElement: { | ||
| prototype: HTMLDuetGridCellElement; | ||
| new (): HTMLDuetGridCellElement; | ||
| }; | ||
| interface HTMLDuetHeaderElement extends Components.DuetHeader, HTMLStencilElement {} | ||
| var HTMLDuetHeaderElement: { | ||
| prototype: HTMLDuetHeaderElement; | ||
| new (): HTMLDuetHeaderElement; | ||
| }; | ||
| interface HTMLDuetHeadingElement extends Components.DuetHeading, HTMLStencilElement {} | ||
| var HTMLDuetHeadingElement: { | ||
| prototype: HTMLDuetHeadingElement; | ||
| new (): HTMLDuetHeadingElement; | ||
| }; | ||
| interface HTMLDuetInputElement extends Components.DuetInput, HTMLStencilElement {} | ||
| var HTMLDuetInputElement: { | ||
| prototype: HTMLDuetInputElement; | ||
| new (): HTMLDuetInputElement; | ||
| }; | ||
| interface HTMLDuetLayoutElement extends Components.DuetLayout, HTMLStencilElement {} | ||
| var HTMLDuetLayoutElement: { | ||
| prototype: HTMLDuetLayoutElement; | ||
| new (): HTMLDuetLayoutElement; | ||
| }; | ||
| interface HTMLDuetParagraphElement extends Components.DuetParagraph, HTMLStencilElement {} | ||
| var HTMLDuetParagraphElement: { | ||
| prototype: HTMLDuetParagraphElement; | ||
| new (): HTMLDuetParagraphElement; | ||
| }; | ||
| interface HTMLDuetSpinnerElement extends Components.DuetSpinner, HTMLStencilElement {} | ||
| var HTMLDuetSpinnerElement: { | ||
| prototype: HTMLDuetSpinnerElement; | ||
| new (): HTMLDuetSpinnerElement; | ||
| }; | ||
| interface HTMLElementTagNameMap { | ||
| 'duet-button': HTMLDuetButtonElement; | ||
| 'duet-card': HTMLDuetCardElement; | ||
| 'duet-grid': HTMLDuetGridElement; | ||
| 'duet-grid-cell': HTMLDuetGridCellElement; | ||
| 'duet-header': HTMLDuetHeaderElement; | ||
| 'duet-heading': HTMLDuetHeadingElement; | ||
| 'duet-input': HTMLDuetInputElement; | ||
| 'duet-layout': HTMLDuetLayoutElement; | ||
| 'duet-paragraph': HTMLDuetParagraphElement; | ||
| 'duet-spinner': HTMLDuetSpinnerElement; | ||
| } | ||
| } | ||
| declare namespace LocalJSX { | ||
| interface DuetButton extends JSXBase.HTMLAttributes<HTMLDuetButtonElement> { | ||
| /** | ||
| * Use this prop to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages. | ||
| */ | ||
| 'accessibleControls'?: string; | ||
| /** | ||
| * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content. | ||
| */ | ||
| 'accessibleExpanded'?: boolean; | ||
| /** | ||
| * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. | ||
| */ | ||
| 'accessibleLabel'?: string; | ||
| /** | ||
| * Tells screen reader the element is pressed. | ||
| */ | ||
| 'accessiblePressed'?: boolean; | ||
| /** | ||
| * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies. | ||
| */ | ||
| 'disabled'?: boolean; | ||
| /** | ||
| * Expands the button to fill 100% of the container width. | ||
| */ | ||
| 'expand'?: boolean; | ||
| /** | ||
| * Forces URL to open in a new browser tab. Used together with URL prop. | ||
| */ | ||
| 'external'?: boolean; | ||
| /** | ||
| * Icon to display to the left of the button content | ||
| */ | ||
| 'icon'?: string; | ||
| /** | ||
| * Show icon on the right side of the button content. | ||
| */ | ||
| 'iconRight'?: boolean; | ||
| /** | ||
| * Adds a unique identifier for the button. | ||
| */ | ||
| 'identifier'?: string; | ||
| /** | ||
| * Callback when focus leaves button. | ||
| */ | ||
| 'onBlurred'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
| * Callback for when the button is clicked. | ||
| */ | ||
| 'onClicked'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
| * Callback when button becomes focused. | ||
| */ | ||
| 'onFocused'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
| * Allows the button to submit a form. | ||
| */ | ||
| 'submit'?: boolean; | ||
| /** | ||
| * Theme of the button. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * A destination to link to, rendered in the href attribute of a link. | ||
| */ | ||
| 'url'?: string; | ||
| /** | ||
| * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain. | ||
| */ | ||
| 'variation'?: string; | ||
| } | ||
| interface DuetCard extends JSXBase.HTMLAttributes<HTMLDuetCardElement> { | ||
| /** | ||
| * The content for the card title | ||
| */ | ||
| 'cardTitle'?: string; | ||
| /** | ||
| * The padding for the card. Can be one of: large, medium, small. | ||
| */ | ||
| 'padding'?: string; | ||
| /** | ||
| * Theme of the card. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * A destination to link to, rendered in the href attribute of a link. | ||
| */ | ||
| 'url'?: string; | ||
| } | ||
| interface DuetGrid extends JSXBase.HTMLAttributes<HTMLDuetGridElement> {} | ||
| interface DuetGridCell extends JSXBase.HTMLAttributes<HTMLDuetGridCellElement> {} | ||
| interface DuetHeader extends JSXBase.HTMLAttributes<HTMLDuetHeaderElement> { | ||
| /** | ||
| * Position of the primary navigation. Can be one of: sticky, normal. | ||
| */ | ||
| 'position'?: string; | ||
| /** | ||
| * Theme of the header. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| /** | ||
| * Show public or private style variant. Can be one of: public, private. | ||
| */ | ||
| 'variant'?: string; | ||
| } | ||
| interface DuetHeading extends JSXBase.HTMLAttributes<HTMLDuetHeadingElement> { | ||
| /** | ||
| * Custom color for the heading. | ||
| */ | ||
| 'color'?: string; | ||
| /** | ||
| * The heading level used for the heading. Can be one of: h1, h2, h3, h4, h5, h6. | ||
| */ | ||
| 'level'?: string; | ||
| /** | ||
| * Theme of the card. Can be one of: default, turva. | ||
| */ | ||
| 'theme'?: string; | ||
| } | ||
| interface DuetInput extends JSXBase.HTMLAttributes<HTMLDuetInputElement> { | ||
| /** | ||
| * Indicates the id of a related component’s visually focused element to the input | ||
@@ -429,15 +525,15 @@ */ | ||
| */ | ||
| 'onBlurred'?: (event: CustomEvent<Event>) => void; | ||
| 'onBlurred'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
| * Callback for when the input is clicked. | ||
| */ | ||
| 'onClicked'?: (event: CustomEvent<Event>) => void; | ||
| 'onClicked'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
| * Callback when input becomes focused. | ||
| */ | ||
| 'onFocused'?: (event: CustomEvent<Event>) => void; | ||
| 'onFocused'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
| * Callback for when user types into the input. | ||
| */ | ||
| 'onTyped'?: (event: CustomEvent<Event>) => void; | ||
| 'onTyped'?: (event: CustomEvent<any>) => void; | ||
| /** | ||
@@ -476,30 +572,12 @@ * A regular expression to check the value against | ||
| } | ||
| interface DuetLayout { | ||
| interface DuetLayout extends JSXBase.HTMLAttributes<HTMLDuetLayoutElement> { | ||
| /** | ||
| * Layout variation. Can be one of: one-column, two-column. | ||
| */ | ||
| 'variation': string; | ||
| } | ||
| interface DuetLayoutAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Layout variation. Can be one of: one-column, two-column. | ||
| */ | ||
| 'variation'?: string; | ||
| } | ||
| interface DuetParagraph { | ||
| interface DuetParagraph extends JSXBase.HTMLAttributes<HTMLDuetParagraphElement> { | ||
| /** | ||
| * Custom color for the paragraph. | ||
| */ | ||
| 'color': string; | ||
| /** | ||
| * Theme of the card. Can be one of: default, turva. | ||
| */ | ||
| 'theme': string; | ||
| } | ||
| interface DuetParagraphAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Custom color for the paragraph. | ||
| */ | ||
| 'color'?: string; | ||
@@ -511,21 +589,6 @@ /** | ||
| } | ||
| interface DuetSpinner { | ||
| interface DuetSpinner extends JSXBase.HTMLAttributes<HTMLDuetSpinnerElement> { | ||
| /** | ||
| * Adds accessible label for the spinner that is only shown for screen readers. | ||
| */ | ||
| 'accessibleLabel': string; | ||
| /** | ||
| * Color of the spinner, as a design token. Example: “tokens.colorPrimary”. | ||
| */ | ||
| 'color': string; | ||
| /** | ||
| * Size variation of the spinner. Can be one of: small, medium, large. | ||
| */ | ||
| 'size': string; | ||
| } | ||
| interface DuetSpinnerAttributes extends StencilHTMLAttributes { | ||
| /** | ||
| * Adds accessible label for the spinner that is only shown for screen readers. | ||
| */ | ||
| 'accessibleLabel'?: string; | ||
@@ -541,119 +604,26 @@ /** | ||
| } | ||
| } | ||
| declare global { | ||
| interface StencilElementInterfaces { | ||
| 'DuetButton': Components.DuetButton; | ||
| 'DuetCard': Components.DuetCard; | ||
| 'DuetGridCell': Components.DuetGridCell; | ||
| 'DuetGrid': Components.DuetGrid; | ||
| 'DuetHeader': Components.DuetHeader; | ||
| 'DuetHeading': Components.DuetHeading; | ||
| 'DuetInput': Components.DuetInput; | ||
| 'DuetLayout': Components.DuetLayout; | ||
| 'DuetParagraph': Components.DuetParagraph; | ||
| 'DuetSpinner': Components.DuetSpinner; | ||
| interface IntrinsicElements { | ||
| 'duet-button': DuetButton; | ||
| 'duet-card': DuetCard; | ||
| 'duet-grid': DuetGrid; | ||
| 'duet-grid-cell': DuetGridCell; | ||
| 'duet-header': DuetHeader; | ||
| 'duet-heading': DuetHeading; | ||
| 'duet-input': DuetInput; | ||
| 'duet-layout': DuetLayout; | ||
| 'duet-paragraph': DuetParagraph; | ||
| 'duet-spinner': DuetSpinner; | ||
| } | ||
| } | ||
| interface StencilIntrinsicElements { | ||
| 'duet-button': Components.DuetButtonAttributes; | ||
| 'duet-card': Components.DuetCardAttributes; | ||
| 'duet-grid-cell': Components.DuetGridCellAttributes; | ||
| 'duet-grid': Components.DuetGridAttributes; | ||
| 'duet-header': Components.DuetHeaderAttributes; | ||
| 'duet-heading': Components.DuetHeadingAttributes; | ||
| 'duet-input': Components.DuetInputAttributes; | ||
| 'duet-layout': Components.DuetLayoutAttributes; | ||
| 'duet-paragraph': Components.DuetParagraphAttributes; | ||
| 'duet-spinner': Components.DuetSpinnerAttributes; | ||
| } | ||
| export { LocalJSX as JSX }; | ||
| interface HTMLDuetButtonElement extends Components.DuetButton, HTMLStencilElement {} | ||
| var HTMLDuetButtonElement: { | ||
| prototype: HTMLDuetButtonElement; | ||
| new (): HTMLDuetButtonElement; | ||
| }; | ||
| interface HTMLDuetCardElement extends Components.DuetCard, HTMLStencilElement {} | ||
| var HTMLDuetCardElement: { | ||
| prototype: HTMLDuetCardElement; | ||
| new (): HTMLDuetCardElement; | ||
| }; | ||
| interface HTMLDuetGridCellElement extends Components.DuetGridCell, HTMLStencilElement {} | ||
| var HTMLDuetGridCellElement: { | ||
| prototype: HTMLDuetGridCellElement; | ||
| new (): HTMLDuetGridCellElement; | ||
| }; | ||
| interface HTMLDuetGridElement extends Components.DuetGrid, HTMLStencilElement {} | ||
| var HTMLDuetGridElement: { | ||
| prototype: HTMLDuetGridElement; | ||
| new (): HTMLDuetGridElement; | ||
| }; | ||
| interface HTMLDuetHeaderElement extends Components.DuetHeader, HTMLStencilElement {} | ||
| var HTMLDuetHeaderElement: { | ||
| prototype: HTMLDuetHeaderElement; | ||
| new (): HTMLDuetHeaderElement; | ||
| }; | ||
| interface HTMLDuetHeadingElement extends Components.DuetHeading, HTMLStencilElement {} | ||
| var HTMLDuetHeadingElement: { | ||
| prototype: HTMLDuetHeadingElement; | ||
| new (): HTMLDuetHeadingElement; | ||
| }; | ||
| interface HTMLDuetInputElement extends Components.DuetInput, HTMLStencilElement {} | ||
| var HTMLDuetInputElement: { | ||
| prototype: HTMLDuetInputElement; | ||
| new (): HTMLDuetInputElement; | ||
| }; | ||
| interface HTMLDuetLayoutElement extends Components.DuetLayout, HTMLStencilElement {} | ||
| var HTMLDuetLayoutElement: { | ||
| prototype: HTMLDuetLayoutElement; | ||
| new (): HTMLDuetLayoutElement; | ||
| }; | ||
| interface HTMLDuetParagraphElement extends Components.DuetParagraph, HTMLStencilElement {} | ||
| var HTMLDuetParagraphElement: { | ||
| prototype: HTMLDuetParagraphElement; | ||
| new (): HTMLDuetParagraphElement; | ||
| }; | ||
| interface HTMLDuetSpinnerElement extends Components.DuetSpinner, HTMLStencilElement {} | ||
| var HTMLDuetSpinnerElement: { | ||
| prototype: HTMLDuetSpinnerElement; | ||
| new (): HTMLDuetSpinnerElement; | ||
| }; | ||
| interface HTMLElementTagNameMap { | ||
| 'duet-button': HTMLDuetButtonElement | ||
| 'duet-card': HTMLDuetCardElement | ||
| 'duet-grid-cell': HTMLDuetGridCellElement | ||
| 'duet-grid': HTMLDuetGridElement | ||
| 'duet-header': HTMLDuetHeaderElement | ||
| 'duet-heading': HTMLDuetHeadingElement | ||
| 'duet-input': HTMLDuetInputElement | ||
| 'duet-layout': HTMLDuetLayoutElement | ||
| 'duet-paragraph': HTMLDuetParagraphElement | ||
| 'duet-spinner': HTMLDuetSpinnerElement | ||
| declare module "@stencil/core" { | ||
| export namespace JSX { | ||
| interface IntrinsicElements extends LocalJSX.IntrinsicElements {} | ||
| } | ||
| } | ||
| interface ElementTagNameMap { | ||
| 'duet-button': HTMLDuetButtonElement; | ||
| 'duet-card': HTMLDuetCardElement; | ||
| 'duet-grid-cell': HTMLDuetGridCellElement; | ||
| 'duet-grid': HTMLDuetGridElement; | ||
| 'duet-header': HTMLDuetHeaderElement; | ||
| 'duet-heading': HTMLDuetHeadingElement; | ||
| 'duet-input': HTMLDuetInputElement; | ||
| 'duet-layout': HTMLDuetLayoutElement; | ||
| 'duet-paragraph': HTMLDuetParagraphElement; | ||
| 'duet-spinner': HTMLDuetSpinnerElement; | ||
| } | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| import { EventEmitter } from "../../stencil.core"; | ||
@@ -65,11 +64,11 @@ export declare class DuetButton { | ||
| */ | ||
| clicked: EventEmitter<Event>; | ||
| clicked: EventEmitter; | ||
| /** | ||
| * Callback when focus leaves button. | ||
| */ | ||
| blurred: EventEmitter<Event>; | ||
| blurred: EventEmitter; | ||
| /** | ||
| * Callback when button becomes focused. | ||
| */ | ||
| focused: EventEmitter<Event>; | ||
| focused: EventEmitter; | ||
| /** | ||
@@ -99,3 +98,3 @@ * Handle click event | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetCard { | ||
@@ -33,3 +32,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetGridCell { | ||
@@ -8,3 +7,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetGrid { | ||
@@ -8,3 +7,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetHeader { | ||
@@ -29,3 +28,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetHeading { | ||
@@ -29,3 +28,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| import { EventEmitter } from "../../stencil.core"; | ||
@@ -109,15 +108,15 @@ export declare class DuetInput { | ||
| */ | ||
| clicked: EventEmitter<Event>; | ||
| clicked: EventEmitter; | ||
| /** | ||
| * Callback for when user types into the input. | ||
| */ | ||
| typed: EventEmitter<Event>; | ||
| typed: EventEmitter; | ||
| /** | ||
| * Callback when focus leaves input. | ||
| */ | ||
| blurred: EventEmitter<Event>; | ||
| blurred: EventEmitter; | ||
| /** | ||
| * Callback when input becomes focused. | ||
| */ | ||
| focused: EventEmitter<Event>; | ||
| focused: EventEmitter; | ||
| /** | ||
@@ -151,3 +150,3 @@ * Handle click event | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetLayout { | ||
@@ -12,3 +11,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetParagraph { | ||
@@ -25,3 +24,3 @@ element: HTMLElement; | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import '../../stencil.core'; | ||
| export declare class DuetSpinner { | ||
@@ -19,3 +18,3 @@ /** | ||
| */ | ||
| render(): JSX.Element; | ||
| render(): any; | ||
| } |
@@ -65,2 +65,5 @@ /** | ||
| export interface ComponentInstance { | ||
| connectedCallback?: () => void; | ||
| disconnectedCallback?: () => void; | ||
| /** | ||
@@ -137,6 +140,2 @@ * The component is about to load and it has not | ||
| export interface EventListenerEnable { | ||
| (instance: any, eventName: string, enabled: boolean, attachTo?: string|Element, passive?: boolean): void; | ||
| } | ||
| export interface QueueApi { | ||
@@ -154,137 +153,191 @@ tick: (cb: RafCallback) => void; | ||
| /** | ||
| * This file gets copied to all distributions of stencil component collections. | ||
| * - no imports | ||
| */ | ||
| export interface HTMLStencilElement extends HTMLElement { | ||
| componentOnReady(): Promise<this>; | ||
| forceUpdate(): void; | ||
| } | ||
| declare global { | ||
| interface HTMLStencilElement extends HTMLElement { | ||
| componentOnReady(): Promise<this>; | ||
| forceUpdate(): void; | ||
| } | ||
| interface StencilHTMLAttributes extends JSXElements.HTMLAttributes {} | ||
| interface StencilIntrinsicElements extends JSXElements.DefaultIntrinsicElements {} | ||
| interface StencilElementInterfaces {} | ||
| interface StencilGlobalHTMLAttributes {} | ||
| declare namespace LocalJSX { | ||
| export interface Element {} | ||
| export interface IntrinsicElements {} | ||
| } | ||
| export { LocalJSX as JSX }; | ||
| export namespace JSXElements { | ||
| export interface DefaultIntrinsicElements { | ||
| export namespace JSXBase { | ||
| export interface IntrinsicElements { | ||
| // Stencil elements | ||
| slot: JSXElements.SlotAttributes; | ||
| slot: JSXBase.SlotAttributes; | ||
| // HTML | ||
| a: JSXElements.AnchorHTMLAttributes<HTMLAnchorElement>; | ||
| abbr: JSXElements.HTMLAttributes; | ||
| address: JSXElements.HTMLAttributes; | ||
| area: JSXElements.AreaHTMLAttributes<HTMLAreaElement>; | ||
| article: JSXElements.HTMLAttributes; | ||
| aside: JSXElements.HTMLAttributes; | ||
| audio: JSXElements.AudioHTMLAttributes<HTMLAudioElement>; | ||
| b: JSXElements.HTMLAttributes; | ||
| base: JSXElements.BaseHTMLAttributes<HTMLBaseElement>; | ||
| bdi: JSXElements.HTMLAttributes; | ||
| bdo: JSXElements.HTMLAttributes; | ||
| big: JSXElements.HTMLAttributes; | ||
| blockquote: JSXElements.BlockquoteHTMLAttributes<HTMLQuoteElement>; | ||
| body: JSXElements.HTMLAttributes<HTMLBodyElement>; | ||
| br: JSXElements.HTMLAttributes<HTMLBRElement>; | ||
| button: JSXElements.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| canvas: JSXElements.CanvasHTMLAttributes<HTMLCanvasElement>; | ||
| caption: JSXElements.HTMLAttributes<HTMLTableCaptionElement>; | ||
| cite: JSXElements.HTMLAttributes; | ||
| code: JSXElements.HTMLAttributes; | ||
| col: JSXElements.ColHTMLAttributes<HTMLTableColElement>; | ||
| colgroup: JSXElements.ColgroupHTMLAttributes<HTMLTableColElement>; | ||
| data: JSXElements.HTMLAttributes<HTMLDataElement>; | ||
| datalist: JSXElements.HTMLAttributes<HTMLDataListElement>; | ||
| dd: JSXElements.HTMLAttributes; | ||
| del: JSXElements.DelHTMLAttributes<HTMLModElement>; | ||
| details: JSXElements.DetailsHTMLAttributes<HTMLElement>; | ||
| dfn: JSXElements.HTMLAttributes; | ||
| dialog: JSXElements.DialogHTMLAttributes<HTMLDialogElement>; | ||
| div: JSXElements.HTMLAttributes<HTMLDivElement>; | ||
| dl: JSXElements.HTMLAttributes<HTMLDListElement>; | ||
| dt: JSXElements.HTMLAttributes; | ||
| em: JSXElements.HTMLAttributes; | ||
| embed: JSXElements.EmbedHTMLAttributes<HTMLEmbedElement>; | ||
| fieldset: JSXElements.FieldsetHTMLAttributes<HTMLFieldSetElement>; | ||
| figcaption: JSXElements.HTMLAttributes; | ||
| figure: JSXElements.HTMLAttributes; | ||
| footer: JSXElements.HTMLAttributes; | ||
| form: JSXElements.FormHTMLAttributes<HTMLFormElement>; | ||
| h1: JSXElements.HTMLAttributes<HTMLHeadingElement>; | ||
| h2: JSXElements.HTMLAttributes<HTMLHeadingElement>; | ||
| h3: JSXElements.HTMLAttributes<HTMLHeadingElement>; | ||
| h4: JSXElements.HTMLAttributes<HTMLHeadingElement>; | ||
| h5: JSXElements.HTMLAttributes<HTMLHeadingElement>; | ||
| h6: JSXElements.HTMLAttributes<HTMLHeadingElement>; | ||
| head: JSXElements.HTMLAttributes<HTMLHeadElement>; | ||
| header: JSXElements.HTMLAttributes; | ||
| hgroup: JSXElements.HTMLAttributes; | ||
| hr: JSXElements.HTMLAttributes<HTMLHRElement>; | ||
| html: JSXElements.HTMLAttributes<HTMLHtmlElement>; | ||
| i: JSXElements.HTMLAttributes; | ||
| iframe: JSXElements.IframeHTMLAttributes<HTMLIFrameElement>; | ||
| img: JSXElements.ImgHTMLAttributes<HTMLImageElement>; | ||
| input: JSXElements.InputHTMLAttributes<HTMLInputElement>; | ||
| ins: JSXElements.InsHTMLAttributes<HTMLModElement>; | ||
| kbd: JSXElements.HTMLAttributes; | ||
| keygen: JSXElements.KeygenHTMLAttributes<HTMLElement>; | ||
| label: JSXElements.LabelHTMLAttributes<HTMLLabelElement>; | ||
| legend: JSXElements.HTMLAttributes<HTMLLegendElement>; | ||
| li: JSXElements.LiHTMLAttributes<HTMLLIElement>; | ||
| link: JSXElements.LinkHTMLAttributes<HTMLLinkElement>; | ||
| main: JSXElements.HTMLAttributes; | ||
| map: JSXElements.MapHTMLAttributes<HTMLMapElement>; | ||
| mark: JSXElements.HTMLAttributes; | ||
| menu: JSXElements.MenuHTMLAttributes<HTMLMenuElement>; | ||
| menuitem: JSXElements.HTMLAttributes; | ||
| meta: JSXElements.MetaHTMLAttributes<HTMLMetaElement>; | ||
| meter: JSXElements.MeterHTMLAttributes<HTMLMeterElement>; | ||
| nav: JSXElements.HTMLAttributes; | ||
| noscript: JSXElements.HTMLAttributes; | ||
| object: JSXElements.ObjectHTMLAttributes<HTMLObjectElement>; | ||
| ol: JSXElements.OlHTMLAttributes<HTMLOListElement>; | ||
| optgroup: JSXElements.OptgroupHTMLAttributes<HTMLOptGroupElement>; | ||
| option: JSXElements.OptionHTMLAttributes<HTMLOptionElement>; | ||
| output: JSXElements.OutputHTMLAttributes<HTMLOutputElement>; | ||
| p: JSXElements.HTMLAttributes<HTMLParagraphElement>; | ||
| param: JSXElements.ParamHTMLAttributes<HTMLParamElement>; | ||
| picture: JSXElements.HTMLAttributes<HTMLPictureElement>; | ||
| pre: JSXElements.HTMLAttributes<HTMLPreElement>; | ||
| progress: JSXElements.ProgressHTMLAttributes<HTMLProgressElement>; | ||
| q: JSXElements.QuoteHTMLAttributes<HTMLQuoteElement>; | ||
| rp: JSXElements.HTMLAttributes; | ||
| rt: JSXElements.HTMLAttributes; | ||
| ruby: JSXElements.HTMLAttributes; | ||
| s: JSXElements.HTMLAttributes; | ||
| samp: JSXElements.HTMLAttributes; | ||
| script: JSXElements.ScriptHTMLAttributes<HTMLScriptElement>; | ||
| section: JSXElements.HTMLAttributes; | ||
| select: JSXElements.SelectHTMLAttributes<HTMLSelectElement>; | ||
| small: JSXElements.HTMLAttributes; | ||
| source: JSXElements.SourceHTMLAttributes<HTMLSourceElement>; | ||
| span: JSXElements.HTMLAttributes<HTMLSpanElement>; | ||
| strong: JSXElements.HTMLAttributes; | ||
| style: JSXElements.StyleHTMLAttributes<HTMLStyleElement>; | ||
| sub: JSXElements.HTMLAttributes; | ||
| summary: JSXElements.HTMLAttributes; | ||
| sup: JSXElements.HTMLAttributes; | ||
| table: JSXElements.TableHTMLAttributes<HTMLTableElement>; | ||
| tbody: JSXElements.HTMLAttributes<HTMLTableSectionElement>; | ||
| td: JSXElements.TdHTMLAttributes<HTMLTableDataCellElement>; | ||
| textarea: JSXElements.TextareaHTMLAttributes<HTMLTextAreaElement>; | ||
| tfoot: JSXElements.HTMLAttributes<HTMLTableSectionElement>; | ||
| th: JSXElements.ThHTMLAttributes<HTMLTableHeaderCellElement>; | ||
| thead: JSXElements.HTMLAttributes<HTMLTableSectionElement>; | ||
| time: JSXElements.TimeHTMLAttributes<HTMLTimeElement>; | ||
| title: JSXElements.HTMLAttributes<HTMLTitleElement>; | ||
| tr: JSXElements.HTMLAttributes<HTMLTableRowElement>; | ||
| track: JSXElements.TrackHTMLAttributes<HTMLTrackElement>; | ||
| u: JSXElements.HTMLAttributes; | ||
| ul: JSXElements.HTMLAttributes<HTMLUListElement>; | ||
| 'var': JSXElements.HTMLAttributes; | ||
| video: JSXElements.VideoHTMLAttributes<HTMLVideoElement>; | ||
| wbr: JSXElements.HTMLAttributes; | ||
| a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>; | ||
| abbr: JSXBase.HTMLAttributes; | ||
| address: JSXBase.HTMLAttributes; | ||
| area: JSXBase.AreaHTMLAttributes<HTMLAreaElement>; | ||
| article: JSXBase.HTMLAttributes; | ||
| aside: JSXBase.HTMLAttributes; | ||
| audio: JSXBase.AudioHTMLAttributes<HTMLAudioElement>; | ||
| b: JSXBase.HTMLAttributes; | ||
| base: JSXBase.BaseHTMLAttributes<HTMLBaseElement>; | ||
| bdi: JSXBase.HTMLAttributes; | ||
| bdo: JSXBase.HTMLAttributes; | ||
| big: JSXBase.HTMLAttributes; | ||
| blockquote: JSXBase.BlockquoteHTMLAttributes<HTMLQuoteElement>; | ||
| body: JSXBase.HTMLAttributes<HTMLBodyElement>; | ||
| br: JSXBase.HTMLAttributes<HTMLBRElement>; | ||
| button: JSXBase.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| canvas: JSXBase.CanvasHTMLAttributes<HTMLCanvasElement>; | ||
| caption: JSXBase.HTMLAttributes<HTMLTableCaptionElement>; | ||
| cite: JSXBase.HTMLAttributes; | ||
| code: JSXBase.HTMLAttributes; | ||
| col: JSXBase.ColHTMLAttributes<HTMLTableColElement>; | ||
| colgroup: JSXBase.ColgroupHTMLAttributes<HTMLTableColElement>; | ||
| data: JSXBase.HTMLAttributes<HTMLDataElement>; | ||
| datalist: JSXBase.HTMLAttributes<HTMLDataListElement>; | ||
| dd: JSXBase.HTMLAttributes; | ||
| del: JSXBase.DelHTMLAttributes<HTMLModElement>; | ||
| details: JSXBase.DetailsHTMLAttributes<HTMLElement>; | ||
| dfn: JSXBase.HTMLAttributes; | ||
| dialog: JSXBase.DialogHTMLAttributes<HTMLDialogElement>; | ||
| div: JSXBase.HTMLAttributes<HTMLDivElement>; | ||
| dl: JSXBase.HTMLAttributes<HTMLDListElement>; | ||
| dt: JSXBase.HTMLAttributes; | ||
| em: JSXBase.HTMLAttributes; | ||
| embed: JSXBase.EmbedHTMLAttributes<HTMLEmbedElement>; | ||
| fieldset: JSXBase.FieldsetHTMLAttributes<HTMLFieldSetElement>; | ||
| figcaption: JSXBase.HTMLAttributes; | ||
| figure: JSXBase.HTMLAttributes; | ||
| footer: JSXBase.HTMLAttributes; | ||
| form: JSXBase.FormHTMLAttributes<HTMLFormElement>; | ||
| h1: JSXBase.HTMLAttributes<HTMLHeadingElement>; | ||
| h2: JSXBase.HTMLAttributes<HTMLHeadingElement>; | ||
| h3: JSXBase.HTMLAttributes<HTMLHeadingElement>; | ||
| h4: JSXBase.HTMLAttributes<HTMLHeadingElement>; | ||
| h5: JSXBase.HTMLAttributes<HTMLHeadingElement>; | ||
| h6: JSXBase.HTMLAttributes<HTMLHeadingElement>; | ||
| head: JSXBase.HTMLAttributes<HTMLHeadElement>; | ||
| header: JSXBase.HTMLAttributes; | ||
| hgroup: JSXBase.HTMLAttributes; | ||
| hr: JSXBase.HTMLAttributes<HTMLHRElement>; | ||
| html: JSXBase.HTMLAttributes<HTMLHtmlElement>; | ||
| i: JSXBase.HTMLAttributes; | ||
| iframe: JSXBase.IframeHTMLAttributes<HTMLIFrameElement>; | ||
| img: JSXBase.ImgHTMLAttributes<HTMLImageElement>; | ||
| input: JSXBase.InputHTMLAttributes<HTMLInputElement>; | ||
| ins: JSXBase.InsHTMLAttributes<HTMLModElement>; | ||
| kbd: JSXBase.HTMLAttributes; | ||
| keygen: JSXBase.KeygenHTMLAttributes<HTMLElement>; | ||
| label: JSXBase.LabelHTMLAttributes<HTMLLabelElement>; | ||
| legend: JSXBase.HTMLAttributes<HTMLLegendElement>; | ||
| li: JSXBase.LiHTMLAttributes<HTMLLIElement>; | ||
| link: JSXBase.LinkHTMLAttributes<HTMLLinkElement>; | ||
| main: JSXBase.HTMLAttributes; | ||
| map: JSXBase.MapHTMLAttributes<HTMLMapElement>; | ||
| mark: JSXBase.HTMLAttributes; | ||
| menu: JSXBase.MenuHTMLAttributes<HTMLMenuElement>; | ||
| menuitem: JSXBase.HTMLAttributes; | ||
| meta: JSXBase.MetaHTMLAttributes<HTMLMetaElement>; | ||
| meter: JSXBase.MeterHTMLAttributes<HTMLMeterElement>; | ||
| nav: JSXBase.HTMLAttributes; | ||
| noscript: JSXBase.HTMLAttributes; | ||
| object: JSXBase.ObjectHTMLAttributes<HTMLObjectElement>; | ||
| ol: JSXBase.OlHTMLAttributes<HTMLOListElement>; | ||
| optgroup: JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>; | ||
| option: JSXBase.OptionHTMLAttributes<HTMLOptionElement>; | ||
| output: JSXBase.OutputHTMLAttributes<HTMLOutputElement>; | ||
| p: JSXBase.HTMLAttributes<HTMLParagraphElement>; | ||
| param: JSXBase.ParamHTMLAttributes<HTMLParamElement>; | ||
| picture: JSXBase.HTMLAttributes<HTMLPictureElement>; | ||
| pre: JSXBase.HTMLAttributes<HTMLPreElement>; | ||
| progress: JSXBase.ProgressHTMLAttributes<HTMLProgressElement>; | ||
| q: JSXBase.QuoteHTMLAttributes<HTMLQuoteElement>; | ||
| rp: JSXBase.HTMLAttributes; | ||
| rt: JSXBase.HTMLAttributes; | ||
| ruby: JSXBase.HTMLAttributes; | ||
| s: JSXBase.HTMLAttributes; | ||
| samp: JSXBase.HTMLAttributes; | ||
| script: JSXBase.ScriptHTMLAttributes<HTMLScriptElement>; | ||
| section: JSXBase.HTMLAttributes; | ||
| select: JSXBase.SelectHTMLAttributes<HTMLSelectElement>; | ||
| small: JSXBase.HTMLAttributes; | ||
| source: JSXBase.SourceHTMLAttributes<HTMLSourceElement>; | ||
| span: JSXBase.HTMLAttributes<HTMLSpanElement>; | ||
| strong: JSXBase.HTMLAttributes; | ||
| style: JSXBase.StyleHTMLAttributes<HTMLStyleElement>; | ||
| sub: JSXBase.HTMLAttributes; | ||
| summary: JSXBase.HTMLAttributes; | ||
| sup: JSXBase.HTMLAttributes; | ||
| table: JSXBase.TableHTMLAttributes<HTMLTableElement>; | ||
| tbody: JSXBase.HTMLAttributes<HTMLTableSectionElement>; | ||
| td: JSXBase.TdHTMLAttributes<HTMLTableDataCellElement>; | ||
| textarea: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>; | ||
| tfoot: JSXBase.HTMLAttributes<HTMLTableSectionElement>; | ||
| th: JSXBase.ThHTMLAttributes<HTMLTableHeaderCellElement>; | ||
| thead: JSXBase.HTMLAttributes<HTMLTableSectionElement>; | ||
| time: JSXBase.TimeHTMLAttributes<HTMLTimeElement>; | ||
| title: JSXBase.HTMLAttributes<HTMLTitleElement>; | ||
| tr: JSXBase.HTMLAttributes<HTMLTableRowElement>; | ||
| track: JSXBase.TrackHTMLAttributes<HTMLTrackElement>; | ||
| u: JSXBase.HTMLAttributes; | ||
| ul: JSXBase.HTMLAttributes<HTMLUListElement>; | ||
| 'var': JSXBase.HTMLAttributes; | ||
| video: JSXBase.VideoHTMLAttributes<HTMLVideoElement>; | ||
| wbr: JSXBase.HTMLAttributes; | ||
| // SVG | ||
| animate: JSXBase.SVGAttributes; | ||
| circle: JSXBase.SVGAttributes; | ||
| clipPath: JSXBase.SVGAttributes; | ||
| defs: JSXBase.SVGAttributes; | ||
| desc: JSXBase.SVGAttributes; | ||
| ellipse: JSXBase.SVGAttributes; | ||
| feBlend: JSXBase.SVGAttributes; | ||
| feColorMatrix: JSXBase.SVGAttributes; | ||
| feComponentTransfer: JSXBase.SVGAttributes; | ||
| feComposite: JSXBase.SVGAttributes; | ||
| feConvolveMatrix: JSXBase.SVGAttributes; | ||
| feDiffuseLighting: JSXBase.SVGAttributes; | ||
| feDisplacementMap: JSXBase.SVGAttributes; | ||
| feDistantLight: JSXBase.SVGAttributes; | ||
| feDropShadow: JSXBase.SVGAttributes; | ||
| feFlood: JSXBase.SVGAttributes; | ||
| feFuncA: JSXBase.SVGAttributes; | ||
| feFuncB: JSXBase.SVGAttributes; | ||
| feFuncG: JSXBase.SVGAttributes; | ||
| feFuncR: JSXBase.SVGAttributes; | ||
| feGaussianBlur: JSXBase.SVGAttributes; | ||
| feImage: JSXBase.SVGAttributes; | ||
| feMerge: JSXBase.SVGAttributes; | ||
| feMergeNode: JSXBase.SVGAttributes; | ||
| feMorphology: JSXBase.SVGAttributes; | ||
| feOffset: JSXBase.SVGAttributes; | ||
| fePointLight: JSXBase.SVGAttributes; | ||
| feSpecularLighting: JSXBase.SVGAttributes; | ||
| feSpotLight: JSXBase.SVGAttributes; | ||
| feTile: JSXBase.SVGAttributes; | ||
| feTurbulence: JSXBase.SVGAttributes; | ||
| filter: JSXBase.SVGAttributes; | ||
| foreignObject: JSXBase.SVGAttributes; | ||
| g: JSXBase.SVGAttributes; | ||
| image: JSXBase.SVGAttributes; | ||
| line: JSXBase.SVGAttributes; | ||
| linearGradient: JSXBase.SVGAttributes; | ||
| marker: JSXBase.SVGAttributes; | ||
| mask: JSXBase.SVGAttributes; | ||
| metadata: JSXBase.SVGAttributes; | ||
| path: JSXBase.SVGAttributes; | ||
| pattern: JSXBase.SVGAttributes; | ||
| polygon: JSXBase.SVGAttributes; | ||
| polyline: JSXBase.SVGAttributes; | ||
| radialGradient: JSXBase.SVGAttributes; | ||
| rect: JSXBase.SVGAttributes; | ||
| stop: JSXBase.SVGAttributes; | ||
| svg: JSXBase.SVGAttributes; | ||
| switch: JSXBase.SVGAttributes; | ||
| symbol: JSXBase.SVGAttributes; | ||
| text: JSXBase.SVGAttributes; | ||
| textPath: JSXBase.SVGAttributes; | ||
| tspan: JSXBase.SVGAttributes; | ||
| use: JSXBase.SVGAttributes; | ||
| view: JSXBase.SVGAttributes; | ||
| } | ||
@@ -374,2 +427,3 @@ | ||
| export interface DialogHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| onClose?: (event: Event) => void; | ||
| open?: boolean; | ||
@@ -418,3 +472,5 @@ returnValue?: string; | ||
| frameborder?: number | string; | ||
| importance?: 'low' | 'auto' | 'high'; | ||
| height?: number | string; | ||
| loading?: 'lazy' | 'auto' | 'eager'; | ||
| marginHeight?: number; | ||
@@ -437,3 +493,5 @@ marginheight?: string | number; | ||
| decoding?: 'async' | 'auto' | 'sync'; | ||
| importance?: 'low' | 'auto' | 'high'; | ||
| height?: number | string; | ||
| loading?: 'lazy' | 'auto' | 'eager'; | ||
| sizes?: string; | ||
@@ -527,2 +585,3 @@ src?: string; | ||
| hreflang?: string; | ||
| importance?: 'low' | 'auto' | 'high'; | ||
| integrity?: string; | ||
@@ -555,2 +614,29 @@ media?: string; | ||
| src?: string; | ||
| // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events | ||
| onAbort?: (event: Event) => void; | ||
| onCanPlay?: (event: Event) => void; | ||
| onCanPlayThrough?: (event: Event) => void; | ||
| onDurationChange?: (event: Event) => void; | ||
| onEmptied?: (event: Event) => void; | ||
| onEnded?: (event: Event) => void; | ||
| onError?: (event: Event) => void; | ||
| onInterruptBegin?: (event: Event) => void; | ||
| onInterruptEnd?: (event: Event) => void; | ||
| onLoadedData?: (event: Event) => void; | ||
| onLoadedMetaData?: (event: Event) => void; | ||
| onLoadStart?: (event: Event) => void; | ||
| onMozAudioAvailable?: (event: Event) => void; | ||
| onPause?: (event: Event) => void; | ||
| onPlay?: (event: Event) => void; | ||
| onPlaying?: (event: Event) => void; | ||
| onProgress?: (event: Event) => void; | ||
| onRateChange?: (event: Event) => void; | ||
| onSeeked?: (event: Event) => void; | ||
| onSeeking?: (event: Event) => void; | ||
| onStalled?: (event: Event) => void; | ||
| onSuspend?: (event: Event) => void; | ||
| onTimeUpdate?: (event: Event) => void; | ||
| onVolumeChange?: (event: Event) => void; | ||
| onWaiting?: (event: Event) => void; | ||
| } | ||
@@ -636,2 +722,3 @@ | ||
| defer?: boolean; | ||
| importance?: 'low' | 'auto' | 'high'; | ||
| integrity?: string; | ||
@@ -731,6 +818,5 @@ nonce?: string; | ||
| export interface HTMLAttributes<T = HTMLElement> extends StencilGlobalHTMLAttributes, DOMAttributes { | ||
| export interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> { | ||
| // vdom specific | ||
| innerHTML?: string; | ||
| ref?: (elm?: T) => void; | ||
| key?: string | number; | ||
@@ -740,3 +826,3 @@ | ||
| accessKey?: string; | ||
| class?: string | { [className: string]: boolean }; | ||
| class?: string | { [className: string]: boolean }; | ||
| contentEditable?: boolean | string; | ||
@@ -754,3 +840,3 @@ contenteditable?: boolean | string; | ||
| spellcheck?: boolean | string; | ||
| style?: { [key: string]: string }; | ||
| style?: { [key: string]: string | undefined }; | ||
| tabIndex?: number; | ||
@@ -766,2 +852,3 @@ tabindex?: number | string; | ||
| radiogroup?: string; | ||
| part?: string; | ||
@@ -804,3 +891,3 @@ // WAI-ARIA | ||
| export interface SVGAttributes extends StencilGlobalHTMLAttributes, DOMAttributes { | ||
| export interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> { | ||
| // Attributes which also defined in HTMLAttributes | ||
@@ -818,3 +905,3 @@ // See comment in SVGDOMPropertyConfig.js | ||
| name?: string; | ||
| style?: { [key: string]: any; }; | ||
| style?: { [key: string]: string | undefined }; | ||
| target?: string; | ||
@@ -1071,3 +1158,5 @@ type?: string; | ||
| export interface DOMAttributes { | ||
| export interface DOMAttributes<T = Element> { | ||
| ref?: (elm?: T) => void; | ||
| // Clipboard Events | ||
@@ -1168,2 +1257,24 @@ onCopy?: (event: ClipboardEvent) => void; | ||
| // Pointer Events | ||
| onPointerDown?: (event: PointerEvent) => void; | ||
| onPointerDownCapture?: (event: PointerEvent) => void; | ||
| onPointerMove?: (event: PointerEvent) => void; | ||
| onPointerMoveCapture?: (event: PointerEvent) => void; | ||
| onPointerUp?: (event: PointerEvent) => void; | ||
| onPointerUpCapture?: (event: PointerEvent) => void; | ||
| onPointerCancel?: (event: PointerEvent) => void; | ||
| onPointerCancelCapture?: (event: PointerEvent) => void; | ||
| onPointerEnter?: (event: PointerEvent) => void; | ||
| onPointerEnterCapture?: (event: PointerEvent) => void; | ||
| onPointerLeave?: (event: PointerEvent) => void; | ||
| onPointerLeaveCapture?: (event: PointerEvent) => void; | ||
| onPointerOver?: (event: PointerEvent) => void; | ||
| onPointerOverCapture?: (event: PointerEvent) => void; | ||
| onPointerOut?: (event: PointerEvent) => void; | ||
| onPointerOutCapture?: (event: PointerEvent) => void; | ||
| onGotPointerCapture?: (event: PointerEvent) => void; | ||
| onGotPointerCaptureCapture?: (event: PointerEvent) => void; | ||
| onLostPointerCapture?: (event: PointerEvent) => void; | ||
| onLostPointerCaptureCapture?: (event: PointerEvent) => void; | ||
| // UI Events | ||
@@ -1191,22 +1302,51 @@ onScroll?: (event: UIEvent) => void; | ||
| export interface Hyperscript { | ||
| (sel: any): VNode; | ||
| (sel: Node, data: VNodeData): VNode; | ||
| (sel: any, data: VNodeData): VNode; | ||
| (sel: any, text: string): VNode; | ||
| (sel: any, children: Array<VNode | undefined | null>): VNode; | ||
| (sel: any, data: VNodeData, text: string): VNode; | ||
| (sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode; | ||
| (sel: any, data: VNodeData, children: VNode): VNode; | ||
| } | ||
| export interface VNodeData { | ||
| class?: {[className: string]: boolean}; | ||
| style?: any; | ||
| [attrName: string]: any; | ||
| } | ||
| export type ChildType = VNode | number | string; | ||
| export type PropsType = VNodeProdData | number | string | null; | ||
| export interface VNodeProdData { | ||
| key?: string | number; | ||
| class?: {[className: string]: boolean} | string; | ||
| className?: {[className: string]: boolean} | string; | ||
| style?: any; | ||
| [key: string]: any; | ||
| } | ||
| export interface FunctionalUtilities { | ||
| forEach: (children: FVNode[], cb: (vnode: ChildNode, index: number, array: FVNode[]) => void) => void; | ||
| map: (children: FVNode[], cb: (vnode: ChildNode, index: number, array: FVNode[]) => ChildNode) => FVNode[]; | ||
| forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void; | ||
| map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[]; | ||
| } | ||
| export interface FunctionalComponent<T = {}> { | ||
| (props: T, children: FVNode[], utils: FunctionalUtilities): FVNode | FVNode[]; | ||
| (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[]; | ||
| } | ||
| export interface FVNode { | ||
| // using v prefixes largely so closure has no issue property renaming | ||
| vtag?: string | number | Function; | ||
| vkey?: string | number; | ||
| vtext?: string; | ||
| vchildren?: FVNode[]; | ||
| vattrs?: any; | ||
| vname?: string; | ||
| ishost?: boolean; | ||
| isSlotFallback?: boolean; | ||
| isSlotReference?: boolean; | ||
| export interface VNode { | ||
| $tag$?: string | number | Function; | ||
| $key$?: string | number; | ||
| $text$?: string; | ||
| $children$?: VNode[]; | ||
| $attrs$?: any; | ||
| $name$?: string; | ||
| $flags$: number; | ||
| $elm$?: any; | ||
| } | ||
@@ -1218,5 +1358,5 @@ | ||
| vtext?: string; | ||
| vchildren?: ChildNode[]; | ||
| vchildren?: VNode[]; | ||
| vattrs?: any; | ||
| vname?: string; | ||
| } |
| { | ||
| "name": "@duetds/components", | ||
| "version": "0.0.1-alpha.49", | ||
| "version": "0.0.1-alpha.50", | ||
| "description": "This package includes Duet Components and related tools.", | ||
| "author": "Viljami Salminen <ext-viljami.salminen@lahitapiola.fi>", | ||
| "module": "lib/esm/es5/index.js", | ||
| "module": "lib/index.mjs", | ||
| "es2015": "lib/esm/index.mjs", | ||
| "es2017": "lib/esm/index.mjs", | ||
| "jsnext:main": "lib/esm/index.mjs", | ||
| "main": "lib/index.js", | ||
@@ -24,14 +27,15 @@ "unpkg": "lib/ionic.js", | ||
| "build": "copyfiles --flat src/*.js lib", | ||
| "start": "npm-run-all --parallel copy:fonts copy:build copy:docs duet:onchange duet:start", | ||
| "wait": "wait-on http://localhost:3333/ --delay 30000 && npm run accessibility", | ||
| "exit": "wait-on http://localhost:3333/ --delay 120000 && kill $(lsof -t -i :3333)", | ||
| "start": "npm-run-all --parallel copy:fonts clean:build copy:docs copy:build duet:onchange duet:start", | ||
| "accessibility:start": "wait-on http://localhost:3333/ --delay 20000 && npm run accessibility", | ||
| "accessibility:exit": "wait-on http://localhost:3333/ --delay 60000 && kill $(lsof -t -i :3333)", | ||
| "accessibility:stop": "wait-on http://localhost:3333/ --reverse --delay 1000 && killall \"Stencil: Duet\"", | ||
| "accessibility": "axe http://localhost:3333/ --disable frame-title,html-has-lang,document-title,landmark-one-main,page-has-heading-one,region,heading-order --timeout=15000 --exit", | ||
| "duet:build": "stencil build --docs --es5", | ||
| "duet:start": "stencil build --docs --dev --es5 --watch --serve", | ||
| "duet:start:nowatch": "stencil build --serve", | ||
| "clean:build": "rm -rf ../../docs/src/docs/components/duet*", | ||
| "duet:build": "stencil build --docs-readme --es5", | ||
| "duet:start": "stencil build --docs-readme --es5 --dev --watch --serve", | ||
| "duet:test": "stencil test --spec --e2e --es5", | ||
| "duet:test.watch": "stencil test --spec --e2e --es5 --watchAll", | ||
| "duet:test:accessibility": "npm-run-all --parallel wait duet:start:nowatch exit", | ||
| "duet:onchange": "onchange \"./src/components/**/*\" -- npm-run-all copy:build", | ||
| "copy:fonts": "copyfiles --flat node_modules/@duetds/fonts/lib/* src/assets/fonts", | ||
| "duet:test:accessibility": "concurrently --success last \"npm run accessibility:start\" \"npm run duet:start\" \"npm run accessibility:exit\" \"npm run accessibility:stop\"", | ||
| "duet:onchange": "onchange \"./src/components/**/*\" -- npm-run-all copy:build copy:docs", | ||
| "copy:fonts": "copyfiles --flat node_modules/@duetds/fonts/lib/* src/assets/fonts && echo 'Fonts cloned from Duet'", | ||
| "copy:build": "copyfiles --up 2 \"./www/build/**/*\" \"../../docs/src/docs/components\" && echo 'Build copied over to docs'", | ||
@@ -43,19 +47,20 @@ "copy:docs": "copyfiles --up 2 \"./src/components/**/*\" \"../../docs/src/docs/components\" && echo 'Readmes copied over to docs'" | ||
| }, | ||
| "gitHead": "e212a5b773c0ec527d2ef67a1eb8d42ecd86736d", | ||
| "gitHead": "16fd64e41ca0590edd4c2f8cec69303d872c6485", | ||
| "devDependencies": { | ||
| "@duetds/fonts": "^1.1.3", | ||
| "@duetds/icons": "^1.0.9", | ||
| "@duetds/tokens": "^1.2.7", | ||
| "@stencil/core": "^0.18.1", | ||
| "@stencil/sass": "^0.2.3", | ||
| "@duetds/fonts": "^1.1.4", | ||
| "@duetds/icons": "^1.0.10", | ||
| "@duetds/tokens": "^1.2.8", | ||
| "@stencil/core": "^1.0.2", | ||
| "@stencil/sass": "^1.0.0", | ||
| "@stencil/utils": "latest", | ||
| "@types/jest": "23.3.14", | ||
| "@types/jest": "24.0.13", | ||
| "@types/puppeteer": "^1.12.4", | ||
| "axe-cli": "^3.0.0", | ||
| "concurrently": "^4.1.0", | ||
| "copyfiles": "^2.1.0", | ||
| "jest": "23.6.0", | ||
| "jest-cli": "23.6.0", | ||
| "jest": "^24.8.0", | ||
| "jest-cli": "^24.8.0", | ||
| "npm-run-all": "^4.1.5", | ||
| "onchange": "^6.0.0", | ||
| "puppeteer": "1.11.0", | ||
| "puppeteer": "^1.17.0", | ||
| "rollup-plugin-node-builtins": "^2.1.2", | ||
@@ -62,0 +67,0 @@ "rollup-plugin-node-globals": "^1.4.0", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-74.26%
35
Worsened metrics
- Total package byte prevSize
- decreased by-41.38%
2948561
- Dev dependency count
- increased by5.56%
19
- Number of package files
- decreased by-33.19%
151
- Lines of code
- decreased by-18.52%
37424
- Number of medium supply chain risk alerts
- increased by66.67%
10
No dependency changes