{ "version": "experimental", "tags": [ { "name": "kor-icon", "path": "./components\\icon\\kor-icon.ts", "attributes": [ { "name": "icon", "description": "Defines the icon shown. Takes any string from the Material Design Library or custom url('') pointing to local or remote images or vectors.", "type": "String" }, { "name": "size", "description": "If set, defines the size of the icon. Possible values are `xl`(48px) `l`(32px), `m`(24px) and `s`(16px), but css font-size can be used to set custom sizes.", "type": "'s'|'m'|'l'|'xl'", "default": "\"m\"" }, { "name": "color", "description": "If set, replaces the text label with a custom icon.", "type": "String" }, { "name": "button", "description": "If set to true, updates hover, click effects and cursors.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "icon", "attribute": "icon", "description": "Defines the icon shown. Takes any string from the Material Design Library or custom url('') pointing to local or remote images or vectors.", "type": "String" }, { "name": "size", "attribute": "size", "description": "If set, defines the size of the icon. Possible values are `xl`(48px) `l`(32px), `m`(24px) and `s`(16px), but css font-size can be used to set custom sizes.", "type": "'s'|'m'|'l'|'xl'", "default": "\"m\"" }, { "name": "color", "attribute": "color", "description": "If set, replaces the text label with a custom icon.", "type": "String" }, { "name": "button", "attribute": "button", "description": "If set to true, updates hover, click effects and cursors.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-card", "path": "./components\\card\\kor-card.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "image", "description": "If set, defines the image shown on top of the card.", "type": "String" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "flat", "description": "If set, background, shadows and external padding are not shown.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "image", "attribute": "image", "description": "If set, defines the image shown on top of the card.", "type": "String" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "flat", "attribute": "flat", "description": "If set, background, shadows and external padding are not shown.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "Shown on top of the card, below the label (if any is set)." }, { "name": "functions", "description": "Shown on the right side of the label or header slot." }, { "name": "footer", "description": "Shown below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-accordion", "path": "./components\\accordion\\kor-accordion.ts", "attributes": [ { "name": "label", "description": "Defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "icon", "description": "If set, defines the icon shown before the label.", "type": "String" }, { "name": "expanded", "description": "If set to true, expands the accordion to display its content.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyBody", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "Defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown before the label.", "type": "String" }, { "name": "expanded", "attribute": "expanded", "description": "If set to true, expands the accordion to display its content.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the accordion when it is expanded." }, { "name": "header", "description": "If used, the header slot replaces the default text label and expand arrow with custom content." }, { "name": "functions", "description": "Displayed close to the 'expand' arrow." }, { "name": "footer", "description": "Displayed below the content when it is expanded." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-app-bar", "path": "./components\\app-bar\\kor-app-bar.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label shown on the left side (if mobile is unset).", "type": "String" }, { "name": "logo", "description": "If set, defines the logo shown on the left side.", "type": "String" }, { "name": "mobile", "description": "If set, toggles the mobile variation.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label shown on the left side (if mobile is unset).", "type": "String" }, { "name": "logo", "attribute": "logo", "description": "If set, defines the logo shown on the left side.", "type": "String" }, { "name": "mobile", "attribute": "mobile", "description": "If set, toggles the mobile variation.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "logo-clicked", "description": "Fired when clicking on the logo." } ], "slots": [ { "name": "", "description": "The central content area. Used for hosting components such as Tabs." }, { "name": "functions", "description": "Displayed on the right side (if mobile is unset). Used for hosting components such as Icon and Avatar." }, { "name": "left", "description": "Displayed on the left side (if mobile is set to true). Used for hosting components such as Icon." }, { "name": "right", "description": "Displayed on the right side (if mobile is set to true). Used for hosting components such as Icon." } ], "cssProperties": [ { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." } ] }, { "name": "kor-text", "path": "./components\\text\\kor-text.ts", "attributes": [ { "name": "size", "description": "Defines the size, line height, font family and initial color of the text. Possible values are `header-1`, `header-2`, `body-1` and `body-2`, but custom styles can be set through css.", "type": "'header-1'|'header-2'|'body-1'|'body-2'", "default": "\"body-1\"" }, { "name": "color", "description": "If set, overwrites the initial color of the text. Possible values are var(--text-1) (90% neutral color), var(--text-2) (60% neutral color) and var(--text-3) (20% neutral color), but any custom RGB, RGBA, HEX or color variable can be passed to the property as value as well.", "type": "String" } ], "properties": [ { "name": "size", "attribute": "size", "description": "Defines the size, line height, font family and initial color of the text. Possible values are `header-1`, `header-2`, `body-1` and `body-2`, but custom styles can be set through css.", "type": "'header-1'|'header-2'|'body-1'|'body-2'", "default": "\"body-1\"" }, { "name": "color", "attribute": "color", "description": "If set, overwrites the initial color of the text. Possible values are var(--text-1) (90% neutral color), var(--text-2) (60% neutral color) and var(--text-3) (20% neutral color), but any custom RGB, RGBA, HEX or color variable can be passed to the property as value as well.", "type": "String" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Container where plain text (and/or other elements) is written." } ] }, { "name": "kor-avatar", "path": "./components\\avatar\\kor-avatar.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label shown next to the icon/image. If the label is set and an image is not defined, the initials will be shown as a placeholder.", "type": "String" }, { "name": "info", "description": "If set, defines the information text shown below the label.", "type": "String" }, { "name": "image", "description": "If set, replaces the placeholder image with a custom image.", "type": "String" }, { "name": "condensed", "description": "If set, the image is shown in a smaller size.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label shown next to the icon/image. If the label is set and an image is not defined, the initials will be shown as a placeholder.", "type": "String" }, { "name": "info", "attribute": "info", "description": "If set, defines the information text shown below the label.", "type": "String" }, { "name": "image", "attribute": "image", "description": "If set, replaces the placeholder image with a custom image.", "type": "String" }, { "name": "condensed", "attribute": "condensed", "description": "If set, the image is shown in a smaller size.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-badge", "path": "./components\\badge\\kor-badge.ts", "attributes": [ { "name": "label", "description": "If set, degines the number shown inside the badge. Numbers bigger than 3 digits are shown as 999+.", "type": "Number" }, { "name": "status", "description": "If set, a status icon is shown inside the badge. Accepted values are `error`, `warning`, `success`.", "type": "'error'|'warning'|'success'|undefined" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, degines the number shown inside the badge. Numbers bigger than 3 digits are shown as 999+.", "type": "Number" }, { "name": "status", "attribute": "status", "description": "If set, a status icon is shown inside the badge. Accepted values are `error`, `warning`, `success`.", "type": "'error'|'warning'|'success'|undefined" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-breadcrumb-item", "path": "./components\\breadcrumbs\\kor-breadcrumb-item.ts", "attributes": [ { "name": "label", "description": "Defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "active", "description": "Defines whether the item is currently active or not.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "Defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "active", "attribute": "active", "description": "Defines whether the item is currently active or not.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-breadcrumbs", "path": "./components\\breadcrumbs\\kor-breadcrumbs.ts", "properties": [ { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "The default slot. Takes `kor-breadcrumb-item`s as children." } ] }, { "name": "kor-button", "path": "./components\\button\\kor-button.ts", "attributes": [ { "name": "label", "description": "Defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, replaces the text label with a custom icon.", "type": "String" }, { "name": "color", "description": "Defines the color. The possible values are `primary`, `secondary` and `tertiary`", "type": "'primary'|'secondary'|'tertiary'", "default": "\"primary\"" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "Defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, replaces the text label with a custom icon.", "type": "String" }, { "name": "color", "attribute": "color", "description": "Defines the color. The possible values are `primary`, `secondary` and `tertiary`", "type": "'primary'|'secondary'|'tertiary'", "default": "\"primary\"" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-checkbox", "path": "./components\\checkbox\\kor-checkbox.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "change" } ] }, { "name": "kor-divider", "path": "./components\\divider\\kor-divider.ts", "attributes": [ { "name": "spacing", "description": "Defines the space around the divider. Possible values are `s`, `m` and `l`.", "type": "'s'|'m'|'l'", "default": "\"m\"" }, { "name": "orientation", "description": "Defines the orientation of the divider. Possible values are `vertical` and `horizontal`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" } ], "properties": [ { "name": "spacing", "attribute": "spacing", "description": "Defines the space around the divider. Possible values are `s`, `m` and `l`.", "type": "'s'|'m'|'l'", "default": "\"m\"" }, { "name": "orientation", "attribute": "orientation", "description": "Defines the orientation of the divider. Possible values are `vertical` and `horizontal`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-empty-state", "path": "./components\\empty-state\\kor-empty-state.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label shown under the icon.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown above the label.", "type": "String" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label shown under the icon.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown above the label.", "type": "String" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "footer", "description": "Displayed below the label." } ], "cssProperties": [ { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-drawer", "path": "./components\\drawer\\kor-drawer.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "position", "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.", "type": "'left'|'right'|'top'|'bottom'", "default": "\"left\"" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "height", "description": "Defines the height of the container (not the overlay).", "type": "String", "default": "\"320px\"" }, { "name": "width", "description": "Defines the width of the container (not the overlay).", "type": "String", "default": "\"320px\"" }, { "name": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "description": "If set to true, clicking on the background will not hide the component. The close icon will also not be displayed.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "position", "attribute": "position", "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.", "type": "'left'|'right'|'top'|'bottom'", "default": "\"left\"" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "height", "attribute": "height", "description": "Defines the height of the container (not the overlay).", "type": "String", "default": "\"320px\"" }, { "name": "width", "attribute": "width", "description": "Defines the width of the container (not the overlay).", "type": "String", "default": "\"320px\"" }, { "name": "visible", "attribute": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "attribute": "sticky", "description": "If set to true, clicking on the background will not hide the component. The close icon will also not be displayed.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "If used, the header slot is shown on top of the component, below the label (if any is set)." }, { "name": "functions", "description": "Shown on the right side of the label or header slot." }, { "name": "footer", "description": "Shown below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-grid", "path": "./components\\grid\\kor-grid.ts", "attributes": [ { "name": "columns", "description": "Defines how many columns the grid has.", "type": "Number", "default": "12" }, { "name": "rows", "description": "If set, defines how many rows the grid has. If left undefined, the rows will be automatically populated according to the columns wrapping.", "type": "Number" }, { "name": "spacing", "description": "Defines the gap between the elements in the grid. Possible values are `s`(8px), `m`(12px) and `l`(16px).", "type": "'s'|'m'|'l'", "default": "\"m\"" } ], "properties": [ { "name": "columns", "attribute": "columns", "description": "Defines how many columns the grid has.", "type": "Number", "default": "12" }, { "name": "rows", "attribute": "rows", "description": "If set, defines how many rows the grid has. If left undefined, the rows will be automatically populated according to the columns wrapping.", "type": "Number" }, { "name": "spacing", "attribute": "spacing", "description": "Defines the gap between the elements in the grid. Possible values are `s`(8px), `m`(12px) and `l`(16px).", "type": "'s'|'m'|'l'", "default": "\"m\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "The slot where the content is rendered." } ] }, { "name": "kor-image", "path": "./components\\image\\kor-image.ts", "attributes": [ { "name": "src", "description": "Defines the source image to be displayed. Must be a url (web or relative path).", "type": "String" }, { "name": "alt", "description": "Defines the text shown in case the image cannot be loaded.", "type": "String" }, { "name": "width", "description": "Defines the width of the image. Can take a numeric or percentual value.", "type": "String", "default": "\"100%\"" }, { "name": "height", "description": "Defines the height of the image. Can take a numeric or percentual value.", "type": "String" }, { "name": "fit", "description": "Defines how the image fits to the component. Possible values are `fill`, `contain`, `cover`, `none` and `scale-down`.", "type": "'fill'|'contain'|'cover'|'none'|'scale-down'", "default": "\"contain\"" }, { "name": "legend", "description": "Defines the legend text.", "type": "String" }, { "name": "legend-position", "description": "Defines the position of the legend. Possible values are `inner-top` and `inner-bottom`. If left unset, the legend is displayed underneath the image", "type": "'inner-top'|'inner-bottom'" } ], "properties": [ { "name": "src", "attribute": "src", "description": "Defines the source image to be displayed. Must be a url (web or relative path).", "type": "String" }, { "name": "alt", "attribute": "alt", "description": "Defines the text shown in case the image cannot be loaded.", "type": "String" }, { "name": "width", "attribute": "width", "description": "Defines the width of the image. Can take a numeric or percentual value.", "type": "String", "default": "\"100%\"" }, { "name": "height", "attribute": "height", "description": "Defines the height of the image. Can take a numeric or percentual value.", "type": "String" }, { "name": "fit", "attribute": "fit", "description": "Defines how the image fits to the component. Possible values are `fill`, `contain`, `cover`, `none` and `scale-down`.", "type": "'fill'|'contain'|'cover'|'none'|'scale-down'", "default": "\"contain\"" }, { "name": "legend", "attribute": "legend", "description": "Defines the legend text.", "type": "String" }, { "name": "legendPosition", "attribute": "legend-position", "description": "Defines the position of the legend. Possible values are `inner-top` and `inner-bottom`. If left unset, the legend is displayed underneath the image", "type": "'inner-top'|'inner-bottom'" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "top", "description": "The container for components overlayed at the top corner of the image." }, { "name": "bottom", "description": "The container for components overlayed at the bottom corner of the image." } ] }, { "name": "kor-input", "path": "./components\\input\\kor-input.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label shown on top.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown before the label/value.", "type": "String" }, { "name": "value", "description": "If set, defines the value of the input. Changes upon user interaction.", "type": "String" }, { "name": "type", "description": "Defines the type. Possible values are `text`, `number`, `select` and `date`.", "type": "'text'|'number'|'select'|'name'", "default": "\"text\"" }, { "name": "name", "description": "Sets the name of the input. Corresponds to the native input's 'name' attribute.", "type": "String" }, { "name": "status", "description": "If set, Displays a status icon on the right side of the input.", "type": "String" }, { "name": "pattern", "description": "(If type=\"number\" only) If set, defines a custom input pattern (see full documentation).", "type": "String" }, { "name": "min", "description": "(If type=\"number\" only) If set, defines the minimum value accepted.", "type": "String" }, { "name": "max", "description": "(If type=\"number\" only) If set, defines the maximum value accepted.", "type": "String" }, { "name": "step", "description": "(If type=\"number\" only) Defines the steps to skip when the user presses the left or right arrows.", "type": "Number", "default": "1" }, { "name": "condensed", "description": "If set to true, reduces the height of the input. The label is only shown if the value is undefined.", "type": "Boolean" }, { "name": "active", "description": "If set to true, highlights the label and underline.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "readonly", "description": "If set to true, disables the input without reducing the opacity.", "type": "Boolean" }, { "name": "no-clear", "description": "If set to true, the clear icon and functionality will not be available.", "type": "Boolean" }, { "name": "autofocus", "description": "If set to true, the component gets focused as soon as the page loads.", "type": "Boolean", "default": "false" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label shown on top.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown before the label/value.", "type": "String" }, { "name": "value", "attribute": "value", "description": "If set, defines the value of the input. Changes upon user interaction.", "type": "String" }, { "name": "type", "attribute": "type", "description": "Defines the type. Possible values are `text`, `number`, `select` and `date`.", "type": "'text'|'number'|'select'|'name'", "default": "\"text\"" }, { "name": "name", "attribute": "name", "description": "Sets the name of the input. Corresponds to the native input's 'name' attribute.", "type": "String" }, { "name": "status", "attribute": "status", "description": "If set, Displays a status icon on the right side of the input.", "type": "String" }, { "name": "pattern", "attribute": "pattern", "description": "(If type=\"number\" only) If set, defines a custom input pattern (see full documentation).", "type": "String" }, { "name": "min", "attribute": "min", "description": "(If type=\"number\" only) If set, defines the minimum value accepted.", "type": "String" }, { "name": "max", "attribute": "max", "description": "(If type=\"number\" only) If set, defines the maximum value accepted.", "type": "String" }, { "name": "step", "attribute": "step", "description": "(If type=\"number\" only) Defines the steps to skip when the user presses the left or right arrows.", "type": "Number", "default": "1" }, { "name": "condensed", "attribute": "condensed", "description": "If set to true, reduces the height of the input. The label is only shown if the value is undefined.", "type": "Boolean" }, { "name": "active", "attribute": "active", "description": "If set to true, highlights the label and underline.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "readonly", "attribute": "readonly", "description": "If set to true, disables the input without reducing the opacity.", "type": "Boolean" }, { "name": "noClear", "attribute": "no-clear", "description": "If set to true, the clear icon and functionality will not be available.", "type": "Boolean" }, { "name": "autofocus", "attribute": "autofocus", "description": "If set to true, the component gets focused as soon as the page loads.", "type": "Boolean", "default": "false" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "change" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "functions", "description": "Displayed on the right side." } ] }, { "name": "kor-menu-item", "path": "./components\\menu-item\\kor-menu-item.ts", "attributes": [ { "name": "label", "description": "Defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "icon", "description": "If set, defines the icon shown before the label.", "type": "String" }, { "name": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "toggle", "description": "If set to true, clicking on the component will toggle the active property between true and false.", "type": "Boolean", "default": "true" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "Defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown before the label.", "type": "String" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "toggle", "attribute": "toggle", "description": "If set to true, clicking on the component will toggle the active property between true and false.", "type": "Boolean", "default": "true" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "functions", "description": "Shown on the right side." } ] }, { "name": "kor-modal", "path": "./components\\modal\\kor-modal.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "height", "description": "Defines the height of the container (not the overlay).", "type": "String", "default": "\"400px\"" }, { "name": "width", "description": "Defines the width of the container (not the overlay).", "type": "String", "default": "\"600px\"" }, { "name": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "description": "If set to true, clicking on the background will not hide the component. The close icon will also not be displayed.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "height", "attribute": "height", "description": "Defines the height of the container (not the overlay).", "type": "String", "default": "\"400px\"" }, { "name": "width", "attribute": "width", "description": "Defines the width of the container (not the overlay).", "type": "String", "default": "\"600px\"" }, { "name": "visible", "attribute": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "attribute": "sticky", "description": "If set to true, clicking on the background will not hide the component. The close icon will also not be displayed.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "If used, the header slot is shown on top of the component, below the label (if any is set)." }, { "name": "functions", "description": "Displayed on the right side of the label or header slot." }, { "name": "footer", "description": "Displayed below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-nav-bar", "path": "./components\\nav-bar\\kor-nav-bar.ts", "properties": [ { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "The main content area." }, { "name": "functions", "description": "Shown on the right side." } ] }, { "name": "kor-notification-item", "path": "./components\\notifications\\kor-notification-item.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "description": "If set to true, the close icon will not be displayed.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "visible", "attribute": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "attribute": "sticky", "description": "If set to true, the close icon will not be displayed.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "If used, the header slot is shown on top of the component, below the label (if any is set)." }, { "name": "functions", "description": "Displayed on the right side of the label or header slot." }, { "name": "footer", "description": "Displayed below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-notifications", "path": "./components\\notifications\\kor-notifications.ts", "attributes": [ { "name": "position", "description": "Defines the corner where the notification is located. Possible values are `top-left`, `top-right`, `bottom-left` and `bottom-right`.", "type": "'top-left'|'top-right'|'bottom-left'|'bottom-right'", "default": "\"top-right\"" } ], "properties": [ { "name": "position", "attribute": "position", "description": "Defines the corner where the notification is located. Possible values are `top-left`, `top-right`, `bottom-left` and `bottom-right`.", "type": "'top-left'|'top-right'|'bottom-left'|'bottom-right'", "default": "\"top-right\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Hosts kor-notification-items." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." } ] }, { "name": "kor-page", "path": "./components\\page\\kor-page.ts", "attributes": [ { "name": "theme", "description": "Defines the color theme of the page. Possible values are `dark` and `light`.", "type": "'dark'|'light'|undefined" }, { "name": "padding", "description": "Defines the padding style of the default slot.", "type": "String", "default": "\"var(--spacing-l)\"" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"row\"" }, { "name": "flat", "description": "If set to true, the page background will be flat, without the need to use card as containers for the content.", "type": "Boolean" }, { "name": "scrollable", "description": "If set to true, the page content will scroll if there is an overflow of content.", "type": "Boolean" } ], "properties": [ { "name": "theme", "attribute": "theme", "description": "Defines the color theme of the page. Possible values are `dark` and `light`.", "type": "'dark'|'light'|undefined" }, { "name": "padding", "attribute": "padding", "description": "Defines the padding style of the default slot.", "type": "String", "default": "\"var(--spacing-l)\"" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"row\"" }, { "name": "flat", "attribute": "flat", "description": "If set to true, the page background will be flat, without the need to use card as containers for the content.", "type": "Boolean" }, { "name": "scrollable", "attribute": "scrollable", "description": "If set to true, the page content will scroll if there is an overflow of content.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "The main content area." }, { "name": "top", "description": "Shown on the top. Hosts components such as kor-app-bar and kor-nav-bar." }, { "name": "bottom", "description": "Shown on the bottom. Hosts components such as kor-nav-bar." }, { "name": "left", "description": "Shown on the left side. Hosts components such as kor-pane." }, { "name": "right", "description": "Shown on the right side. Hosts components such as kor-pane." } ] }, { "name": "kor-pane", "path": "./components\\pane\\kor-pane.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "size", "description": "Defines the size (width) of the component. Possible values are `s`(80px), `m`(120px) and `l`(320px).", "type": "'s'|'m'|'l'", "default": "\"l\"" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "size", "attribute": "size", "description": "Defines the size (width) of the component. Possible values are `s`(80px), `m`(120px) and `l`(320px).", "type": "'s'|'m'|'l'", "default": "\"l\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "If used, the header slot is shown on top of the component, below the label (if any is set)." }, { "name": "functions", "description": "Displayed on the right side of the label or header slot." }, { "name": "footer", "description": "Displayed below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-popover", "path": "./components\\popover\\kor-popover.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "position", "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.", "type": "'left'|'right'|'top'|'bottom'", "default": "\"bottom\"" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "target", "description": "Defines the DOM element to which the click event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique.", "type": "String" }, { "name": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "description": "If set to true, clicking on the page will not hide the component.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "position", "attribute": "position", "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.", "type": "'left'|'right'|'top'|'bottom'", "default": "\"bottom\"" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'row'|'column'", "default": "\"column\"" }, { "name": "target", "attribute": "target", "description": "Defines the DOM element to which the click event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique.", "type": "String" }, { "name": "visible", "attribute": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "sticky", "attribute": "sticky", "description": "If set to true, clicking on the page will not hide the component.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "If used, the header slot is shown on top of the component, below the label (if any is set)." }, { "name": "functions", "description": "Displayed on the right side of the label or header slot." }, { "name": "footer", "description": "Displayed below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] }, { "name": "kor-progress-bar", "path": "./components\\progress-bar\\kor-progress-bar.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label shown above the bar.", "type": "String" }, { "name": "info", "description": "If set, defines the info text shown below of the bar.", "type": "String" }, { "name": "status", "description": "If set, shows a status icon besides the information text. Possible values are `success`, `warning` and `error`.", "type": "'success'|'warning'|'error'|undefined" }, { "name": "color", "description": "If set, defines the color of the bar.", "type": "String" }, { "name": "size", "description": "(Only if radial is true) Defines the size of the bar. Possible values are `s`, `m` and `l`.", "type": "'s'|'m'|'l'", "default": "\"m\"" }, { "name": "value", "description": "Defines the value of the bar. Must be a number from 0 to 100.", "type": "Number" }, { "name": "radial", "description": "If set to true, the bar will become a circle instead of a linear bar.", "type": "Boolean" }, { "name": "show-progress", "description": "If set to true, the value (in %) will be visible.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label shown above the bar.", "type": "String" }, { "name": "info", "attribute": "info", "description": "If set, defines the info text shown below of the bar.", "type": "String" }, { "name": "status", "attribute": "status", "description": "If set, shows a status icon besides the information text. Possible values are `success`, `warning` and `error`.", "type": "'success'|'warning'|'error'|undefined" }, { "name": "color", "attribute": "color", "description": "If set, defines the color of the bar.", "type": "String" }, { "name": "size", "attribute": "size", "description": "(Only if radial is true) Defines the size of the bar. Possible values are `s`, `m` and `l`.", "type": "'s'|'m'|'l'", "default": "\"m\"" }, { "name": "value", "attribute": "value", "description": "Defines the value of the bar. Must be a number from 0 to 100.", "type": "Number" }, { "name": "radial", "attribute": "radial", "description": "If set to true, the bar will become a circle instead of a linear bar.", "type": "Boolean" }, { "name": "showProgress", "attribute": "show-progress", "description": "If set to true, the value (in %) will be visible.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-radio-button", "path": "./components\\radio-button\\kor-radio-button.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "change" } ] }, { "name": "kor-slider", "path": "./components\\slider\\kor-slider.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label shown on top.", "type": "String" }, { "name": "value", "description": "Defines the current value. Must be a value between min and max.", "type": "Number", "default": "50" }, { "name": "min", "description": "Defines the minimum value accepted.", "type": "Number", "default": "0" }, { "name": "max", "description": "Defines the maximum value accepted.", "type": "Number", "default": "100" }, { "name": "step", "description": "Defines the steps to skip when the user drags the thumb.", "type": "Number", "default": "1" }, { "name": "input", "description": "If set to true, allows the user to input a value using the keyboard.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label shown on top.", "type": "String" }, { "name": "value", "attribute": "value", "description": "Defines the current value. Must be a value between min and max.", "type": "Number", "default": "50" }, { "name": "min", "attribute": "min", "description": "Defines the minimum value accepted.", "type": "Number", "default": "0" }, { "name": "max", "attribute": "max", "description": "Defines the maximum value accepted.", "type": "Number", "default": "100" }, { "name": "step", "attribute": "step", "description": "Defines the steps to skip when the user drags the thumb.", "type": "Number", "default": "1" }, { "name": "input", "attribute": "input", "description": "If set to true, allows the user to input a value using the keyboard.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-spinner", "path": "./components\\spinner\\kor-spinner.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "size", "description": "Defines the size of the component. Possible values are `s`(24px), `m`(32px) and `l`(40px).", "type": "'s'|'m'|'l'", "default": "\"m\"" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "size", "attribute": "size", "description": "Defines the size of the component. Possible values are `s`(24px), `m`(32px) and `l`(40px).", "type": "'s'|'m'|'l'", "default": "\"m\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-stepper-item", "path": "./components\\stepper\\kor-stepper-item.ts", "attributes": [ { "name": "first", "type": "boolean | undefined" }, { "name": "last", "type": "boolean | undefined" }, { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "info", "description": "If set, defines the information text shown below the label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown instead of the index number.", "type": "String" }, { "name": "index", "description": "Defines the index number shown inside the bubble (if icon is undefined). It is set dinamically by the component.", "type": "Number" }, { "name": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" } ], "properties": [ { "name": "first", "attribute": "first", "type": "boolean | undefined" }, { "name": "last", "attribute": "last", "type": "boolean | undefined" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "info", "attribute": "info", "description": "If set, defines the information text shown below the label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown instead of the index number.", "type": "String" }, { "name": "index", "attribute": "index", "description": "Defines the index number shown inside the bubble (if icon is undefined). It is set dinamically by the component.", "type": "Number" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "orientation", "attribute": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-stepper", "path": "./components\\stepper\\kor-stepper.ts", "attributes": [ { "name": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" } ], "properties": [ { "name": "orientation", "attribute": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Hosts kor-stepper-items." } ] }, { "name": "kor-swipe-action", "path": "./components\\swipe-actions\\kor-swipe-action.ts", "attributes": [ { "name": "icon", "type": "string | undefined" }, { "name": "bg-color", "type": "string | undefined" } ], "properties": [ { "name": "icon", "attribute": "icon", "type": "string | undefined" }, { "name": "bgColor", "attribute": "bg-color", "type": "string | undefined" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-swipe-actions", "path": "./components\\swipe-actions\\kor-swipe-actions.ts", "properties": [ { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "swipe-right", "description": "Fired when the user swipes right more than 1/3 of the element's width" }, { "name": "swipe-left", "description": "Fired when the user swipes left more than 1/3 of the element's width" } ], "slots": [ { "name": "", "description": "Contains the visible element to be scrolled left or right" }, { "name": "left", "description": "Contains the action shown when the user swipes to the left" }, { "name": "right", "description": "Contains the action shown when the user swipes to the right" } ] }, { "name": "kor-switch-item", "path": "./components\\switch\\kor-switch-item.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown instead of text label.", "type": "String" }, { "name": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown instead of text label.", "type": "String" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-switch", "path": "./components\\switch\\kor-switch.ts", "properties": [ { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Hosts kor-switch-items." } ] }, { "name": "kor-table-cell", "path": "./components\\table\\kor-table-cell.ts", "attributes": [ { "name": "alignment", "description": "Defines the alignment of items inside the cell. Possible values are left, center and right.", "type": "String", "default": "\"left\"" }, { "name": "sort-direction", "description": "(If head, sortable and sorted are true) Defines the direction of sorting. Possible values are asc and desc.", "type": "String" }, { "name": "grid-cols", "description": "Defines how many columns the cell occupies. The sum of all cells in a given row should not surpass the total number of columns in the table (which is 24 by default).", "type": "Number" }, { "name": "head", "description": "If set to true, the cell will behave like a table head (use if the parent kor-table-row is placed on the header slot of the table).", "type": "Boolean" }, { "name": "sortable", "description": "(If head is true) If set to true, upon clicking on the cell it will toggle the sorted property.", "type": "Boolean" }, { "name": "sorted", "description": "(If head and sortable are true) If set to true, an arrow will be shown to indicate that the column is sorted.", "type": "Boolean" } ], "properties": [ { "name": "alignment", "attribute": "alignment", "description": "Defines the alignment of items inside the cell. Possible values are left, center and right.", "type": "String", "default": "\"left\"" }, { "name": "sortDirection", "attribute": "sort-direction", "description": "(If head, sortable and sorted are true) Defines the direction of sorting. Possible values are asc and desc.", "type": "String" }, { "name": "gridCols", "attribute": "grid-cols", "description": "Defines how many columns the cell occupies. The sum of all cells in a given row should not surpass the total number of columns in the table (which is 24 by default).", "type": "Number" }, { "name": "head", "attribute": "head", "description": "If set to true, the cell will behave like a table head (use if the parent kor-table-row is placed on the header slot of the table).", "type": "Boolean" }, { "name": "sortable", "attribute": "sortable", "description": "(If head is true) If set to true, upon clicking on the cell it will toggle the sorted property.", "type": "Boolean" }, { "name": "sorted", "attribute": "sorted", "description": "(If head and sortable are true) If set to true, an arrow will be shown to indicate that the column is sorted.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Hosts plain text or other elements." } ] }, { "name": "kor-table-row", "path": "./components\\table\\kor-table-row.ts", "attributes": [ { "name": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" } ], "properties": [ { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Hosts (kor-table-cells)." } ] }, { "name": "kor-table", "path": "./components\\table\\kor-table.ts", "attributes": [ { "name": "columns", "description": "Defines the column template. It accepts any value also accepted by the standard css grid-template-columns (e.g. repeat(4, 1fr), 40px 1fr auto).", "type": "String", "default": "\"repeat(24, 1fr)\"" }, { "name": "readonly", "description": "If set to true, disables selection on mouse clicks and the hover effects.", "type": "Boolean" }, { "name": "condensed", "description": "If set to true, condensed the height of the rows and cells.", "type": "Boolean" } ], "properties": [ { "name": "columns", "attribute": "columns", "description": "Defines the column template. It accepts any value also accepted by the standard css grid-template-columns (e.g. repeat(4, 1fr), 40px 1fr auto).", "type": "String", "default": "\"repeat(24, 1fr)\"" }, { "name": "readonly", "attribute": "readonly", "description": "If set to true, disables selection on mouse clicks and the hover effects.", "type": "Boolean" }, { "name": "condensed", "attribute": "condensed", "description": "If set to true, condensed the height of the rows and cells.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "The container where the table body is rendered (kor-table-rows)." }, { "name": "header", "description": "The container for the header (kor-table-row). It does not scroll with the content, but remains sticky on top." } ] }, { "name": "kor-tab-item", "path": "./components\\tabs\\kor-tab-item.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown above the label (if set).", "type": "String" }, { "name": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown above the label (if set).", "type": "String" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied. Only one item can be active at a time.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "orientation", "attribute": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "The main content area. If used, replaces the label and icon elements." } ] }, { "name": "kor-tabs", "path": "./components\\tabs\\kor-tabs.ts", "attributes": [ { "name": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" } ], "properties": [ { "name": "orientation", "attribute": "orientation", "description": "Defines the orientation of the component. Possible values are `horizontal` and `vertical`.", "type": "'horizontal'|'vertical'", "default": "\"horizontal\"" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Hosts kor-tab-items." } ] }, { "name": "kor-tag", "path": "./components\\tag\\kor-tag.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "icon", "description": "If set, defines the icon shown besides the label.", "type": "String" }, { "name": "button", "description": "If set to true, hover and click effects will be added.", "type": "Boolean" }, { "name": "removable", "description": "If set to true, a close icon is displayed. Clicking on it dispatches a remove event.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String", "default": "\"Label\"" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown besides the label.", "type": "String" }, { "name": "button", "attribute": "button", "description": "If set to true, hover and click effects will be added.", "type": "Boolean" }, { "name": "removable", "attribute": "removable", "description": "If set to true, a close icon is displayed. Clicking on it dispatches a remove event.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "remove", "description": "Dispatched when clicking on the close icon (removable only)." } ] }, { "name": "kor-toggle", "path": "./components\\toggle\\kor-toggle.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "events": [ { "name": "change" } ] }, { "name": "kor-tool", "path": "./components\\tool\\kor-tool.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown above the text label (if set).", "type": "String" }, { "name": "size", "description": "Defines the size of the component. Possible values are `s` and `m`.", "type": "'s'|'m'", "default": "\"m\"" }, { "name": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "toggle", "description": "If set to true, clicking on the menu item will toggle the active property between true and false.", "type": "Boolean" }, { "name": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown above the text label (if set).", "type": "String" }, { "name": "size", "attribute": "size", "description": "Defines the size of the component. Possible values are `s` and `m`.", "type": "'s'|'m'", "default": "\"m\"" }, { "name": "active", "attribute": "active", "description": "If set to true, a highlight style gets applied.", "type": "Boolean" }, { "name": "toggle", "attribute": "toggle", "description": "If set to true, clicking on the menu item will toggle the active property between true and false.", "type": "Boolean" }, { "name": "disabled", "attribute": "disabled", "description": "If set to true, disables mouse clicks and the style gets updated.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ] }, { "name": "kor-tooltip", "path": "./components\\tooltip\\kor-tooltip.ts", "attributes": [ { "name": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "position", "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.", "type": "'left'|'right'|'top'|'bottom'", "default": "\"bottom\"" }, { "name": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'column'|'row'", "default": "\"column\"" }, { "name": "target", "description": "Defines the DOM element to which the mouseover event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique.", "type": "String" }, { "name": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" } ], "properties": [ { "name": "emptyHeader", "type": "boolean", "default": "true" }, { "name": "emptyFunctions", "type": "boolean", "default": "true" }, { "name": "emptyFooter", "type": "boolean", "default": "true" }, { "name": "label", "attribute": "label", "description": "If set, defines the text label.", "type": "String" }, { "name": "icon", "attribute": "icon", "description": "If set, defines the icon shown close to the label.", "type": "String" }, { "name": "position", "attribute": "position", "description": "Defines the position of the component in the screen. Possible values are `left`, `right`, `top` and `bottom`.", "type": "'left'|'right'|'top'|'bottom'", "default": "\"bottom\"" }, { "name": "flexDirection", "attribute": "flex-direction", "description": "Defines the direction in which the slotted content flows (e.g. top to bottom or left to right). Possible values are `column` and `row`.", "type": "'column'|'row'", "default": "\"column\"" }, { "name": "target", "attribute": "target", "description": "Defines the DOM element to which the mouseover event will be attached. It behaves identically to querySelector, which means tag names, IDs, classes and similar can be used (e.g. #myEl, .myEl, kor-input[type='number']). Please ensure the selector is unique.", "type": "String" }, { "name": "visible", "attribute": "visible", "description": "If set to true, displays the component on top of the screen.", "type": "Boolean" }, { "name": "renderRoot", "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", "type": "HTMLElement | ShadowRoot" }, { "name": "isUpdatePending", "type": "boolean" }, { "name": "hasUpdated", "type": "boolean" }, { "name": "updateComplete", "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", "type": "Promise" } ], "slots": [ { "name": "", "description": "Displayed inside the content area." }, { "name": "header", "description": "If used, the header slot is shown on top of the component, below the label (if any is set)." }, { "name": "functions", "description": "Displayed on the right side of the label or header slot." }, { "name": "footer", "description": "Displayed below the content area." } ], "cssProperties": [ { "name": "--body-gap", "description": "Defines the gap between elements in the body slot." }, { "name": "--header-gap", "description": "Defines the gap between elements in the header slot." }, { "name": "--functions-gap", "description": "Defines the gap between elements in the functions slot." }, { "name": "--footer-gap", "description": "Defines the gap between elements in the footer slot." } ] } ] }