diff --git a/custom-elements.json b/custom-elements.json index 39a55fa7..20fdd8ce 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -4,68 +4,107 @@ "modules": [ { "kind": "javascript-module", - "path": "src/components/global/localNav/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "LocalNav", - "declaration": { - "name": "LocalNav", - "module": "./localNav" - } - }, - { - "kind": "js", - "name": "LocalNavLink", - "declaration": { - "name": "LocalNavLink", - "module": "./localNavLink" - } - }, - { - "kind": "js", - "name": "LocalNavDivider", - "declaration": { - "name": "LocalNavDivider", - "module": "./localNavDivider" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/localNav/localNav.ts", + "path": "src/components/reusable/blockCodeView/blockCodeView.ts", "declarations": [ { "kind": "class", - "description": "The global Side Navigation component.", - "name": "LocalNav", - "slots": [ + "description": "`` component to display `` snippets as standalone single-/multi-line block elements.", + "name": "BlockCodeView", + "members": [ { - "description": "The default slot, for local nav links.", - "name": "unnamed" + "kind": "field", + "name": "darkTheme", + "type": { + "text": "'light' | 'dark'" + }, + "default": "'dark'", + "description": "Sets background and text theming.", + "attribute": "darkTheme" }, { - "description": "Slot for a search input", - "name": "search" - } - ], - "members": [ + "kind": "field", + "name": "language", + "type": { + "text": "string" + }, + "default": "''", + "description": "If empty string, attempt language syntax auto-detection. Setting a value will override auto-detection and manually configure desired language.", + "attribute": "language" + }, { "kind": "field", - "name": "pinned", + "name": "maxHeight", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Customizable max-height setting for code snippet container.", + "attribute": "maxHeight" + }, + { + "kind": "field", + "name": "codeViewLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optionally displayed label above code snippet container.", + "attribute": "codeViewLabel" + }, + { + "kind": "field", + "name": "copyOptionVisible", "type": { "text": "boolean" }, "default": "false", - "description": "Local nav pinned state.", - "attribute": "pinned" + "description": "Optionally display button to copy code snippet.", + "attribute": "copyOptionVisible" + }, + { + "kind": "field", + "name": "codeViewExpandable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optionally display button to expand code snippet container.", + "attribute": "codeViewExpandable" + }, + { + "kind": "field", + "name": "copyButtonText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy code button text (optional).", + "attribute": "copyButtonText" + }, + { + "kind": "field", + "name": "copyButtonDescriptionAttr", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy button description attr value.", + "attribute": "copyButtonDescriptionAttr" + }, + { + "kind": "field", + "name": "codeSnippet", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", + "attribute": "codeSnippet" }, { "kind": "field", "name": "textStrings", - "default": "{\n pin: 'Pin',\n unpin: 'Unpin',\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n}", + "default": "{\n collapsed: 'Collapsed',\n expanded: 'Expanded',\n}", "description": "Text string customization.", "attribute": "textStrings", "type": { @@ -74,100 +113,300 @@ }, { "kind": "method", - "name": "_handleNavToggle", + "name": "getContainerClasses", + "privacy": "private" + }, + { + "kind": "method", + "name": "renderCopyButton", + "privacy": "private" + }, + { + "kind": "method", + "name": "renderExpandButton", + "privacy": "private" + }, + { + "kind": "method", + "name": "highlightCode", + "privacy": "private" + }, + { + "kind": "method", + "name": "detectLanguage", "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, "parameters": [ { - "name": "e", + "name": "code", "type": { - "text": "Event" + "text": "string" } } ] }, { "kind": "method", - "name": "_handleMobileNavToggle", - "privacy": "private" + "name": "calculateRelevance", + "privacy": "private", + "return": { + "type": { + "text": "number" + } + }, + "parameters": [ + { + "name": "tokens", + "type": { + "text": "(string | Prism.Token)[]" + } + }, + { + "name": "language", + "type": { + "text": "string" + } + } + ] }, { "kind": "method", - "name": "handlePointerEnter", + "name": "getTokenRelevance", "privacy": "private", + "return": { + "type": { + "text": "number" + } + }, "parameters": [ { - "name": "e", + "name": "token", "type": { - "text": "PointerEvent" + "text": "Prism.Token" + } + }, + { + "name": "language", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "handlePointerLeave", + "name": "isLanguageSpecificToken", "privacy": "private", + "return": { + "type": { + "text": "boolean" + } + }, "parameters": [ { - "name": "e", + "name": "token", "type": { - "text": "PointerEvent" + "text": "Prism.Token" + } + }, + { + "name": "language", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "_updateChildren", - "privacy": "private" + "name": "determineMarkupLanguage", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, + "parameters": [ + { + "name": "code", + "type": { + "text": "string" + } + } + ] }, { "kind": "method", - "name": "handleSlotChange", + "name": "checkOverflow", "privacy": "private" }, { "kind": "method", - "name": "_handleLinkActive", + "name": "removeLeadingWhitespace", "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, "parameters": [ { - "name": "e", + "name": "code", "type": { - "text": "any" + "text": "string" } } ] }, { "kind": "method", - "name": "_handleClickOut", + "name": "formatExampleCode", "privacy": "private", "parameters": [ { - "name": "e", + "name": "code", "type": { - "text": "Event" + "text": "string" } } ] - } + }, + { + "kind": "method", + "name": "copyCode", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "getContainerStyle", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + } + }, + { + "kind": "method", + "name": "expandCodeView", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleKeypress", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "KeyboardEvent" + } + } + ] + } ], "events": [ { - "description": "Captures the click event and emits the pinned state and original event details.", - "name": "on-toggle" + "name": "on-copy", + "type": { + "text": "CustomEvent" + }, + "description": "Emits when the copy button is clicked." } ], "attributes": [ { - "name": "pinned", + "name": "darkTheme", + "type": { + "text": "'light' | 'dark'" + }, + "default": "'dark'", + "description": "Sets background and text theming.", + "fieldName": "darkTheme" + }, + { + "name": "language", + "type": { + "text": "string" + }, + "default": "''", + "description": "If empty string, attempt language syntax auto-detection. Setting a value will override auto-detection and manually configure desired language.", + "fieldName": "language" + }, + { + "name": "maxHeight", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Customizable max-height setting for code snippet container.", + "fieldName": "maxHeight" + }, + { + "name": "codeViewLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optionally displayed label above code snippet container.", + "fieldName": "codeViewLabel" + }, + { + "name": "copyOptionVisible", "type": { "text": "boolean" }, "default": "false", - "description": "Local nav pinned state.", - "fieldName": "pinned" + "description": "Optionally display button to copy code snippet.", + "fieldName": "copyOptionVisible" + }, + { + "name": "codeViewExpandable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optionally display button to expand code snippet container.", + "fieldName": "codeViewExpandable" + }, + { + "name": "copyButtonText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy code button text (optional).", + "fieldName": "copyButtonText" + }, + { + "name": "copyButtonDescriptionAttr", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy button description attr value.", + "fieldName": "copyButtonDescriptionAttr" + }, + { + "name": "codeSnippet", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", + "fieldName": "codeSnippet" }, { "name": "textStrings", @@ -180,195 +419,165 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-local-nav", + "tagName": "kyn-block-code-view", "customElement": true } ], "exports": [ { "kind": "js", - "name": "LocalNav", + "name": "BlockCodeView", "declaration": { - "name": "LocalNav", - "module": "src/components/global/localNav/localNav.ts" + "name": "BlockCodeView", + "module": "src/components/reusable/blockCodeView/blockCodeView.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-local-nav", + "name": "kyn-block-code-view", "declaration": { - "name": "LocalNav", - "module": "src/components/global/localNav/localNav.ts" + "name": "BlockCodeView", + "module": "src/components/reusable/blockCodeView/blockCodeView.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/localNav/localNavDivider.ts", + "path": "src/components/reusable/blockCodeView/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "BlockCodeView", + "declaration": { + "name": "BlockCodeView", + "module": "./blockCodeView" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/breadcrumbs/breadcrumbs.ts", "declarations": [ { "kind": "class", - "description": "Local Nav divider", - "name": "LocalNavDivider", - "members": [ - { - "kind": "field", - "name": "heading", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional heading text.", - "attribute": "heading" - } - ], - "attributes": [ + "description": "Breadcrumbs Component.", + "name": "Breadcrumbs", + "slots": [ { - "name": "heading", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional heading text.", - "fieldName": "heading" + "description": "Slot for inserting links.", + "name": "unnamed" } ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-local-nav-divider", + "tagName": "kyn-breadcrumbs", "customElement": true } ], "exports": [ { "kind": "js", - "name": "LocalNavDivider", + "name": "Breadcrumbs", "declaration": { - "name": "LocalNavDivider", - "module": "src/components/global/localNav/localNavDivider.ts" + "name": "Breadcrumbs", + "module": "src/components/reusable/breadcrumbs/breadcrumbs.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-local-nav-divider", + "name": "kyn-breadcrumbs", "declaration": { - "name": "LocalNavDivider", - "module": "src/components/global/localNav/localNavDivider.ts" + "name": "Breadcrumbs", + "module": "src/components/reusable/breadcrumbs/breadcrumbs.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/localNav/localNavLink.ts", + "path": "src/components/reusable/breadcrumbs/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Breadcrumbs", + "declaration": { + "name": "Breadcrumbs", + "module": "./breadcrumbs" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/checkbox/checkbox.ts", "declarations": [ { "kind": "class", - "description": "Link component for use in the global Side Navigation component.", - "name": "LocalNavLink", + "description": "Checkbox.", + "name": "Checkbox", "slots": [ { - "description": "The default slot, for the link text.", + "description": "Slot for label text.", "name": "unnamed" - }, - { - "description": "Slot for an icon. Use 16px size.", - "name": "icon" - }, - { - "description": "Slot for the next level of links, supports three levels.", - "name": "links" } ], "members": [ { "kind": "field", - "name": "href", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "attribute": "href" + "description": "Checkbox value.", + "attribute": "value" }, { "kind": "field", - "name": "expanded", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Expanded state.", - "attribute": "expanded" + "description": "Checkbox disabled state, inherited from the parent group.", + "attribute": "disabled" }, { "kind": "field", - "name": "active", + "name": "visiblyHidden", "type": { "text": "boolean" }, "default": "false", - "description": "Active state.", - "attribute": "active", - "reflects": true + "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", + "attribute": "visiblyHidden" }, { "kind": "field", - "name": "disabled", + "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "attribute": "disabled" - }, - { - "kind": "field", - "name": "backText", - "type": { - "text": "string" - }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" - }, - { - "kind": "method", - "name": "_handleTextSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_getSlotText", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleLinksSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "updateChildren", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleBack", - "privacy": "private" + "description": "Determines whether the checkbox is in an indeterminate state.", + "attribute": "indeterminate" }, { "kind": "method", - "name": "handleClick", + "name": "handleChange", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] @@ -376,258 +585,254 @@ ], "events": [ { - "description": "Captures the click event and emits the original event, level, and if default was prevented.", - "name": "on-click" + "description": "Captures the change event and emits the selected value and original event details.", + "name": "on-checkbox-change" } ], "attributes": [ { - "name": "href", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "fieldName": "href" + "description": "Checkbox value.", + "fieldName": "value" }, { - "name": "expanded", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Expanded state.", - "fieldName": "expanded" + "description": "Checkbox disabled state, inherited from the parent group.", + "fieldName": "disabled" }, { - "name": "active", + "name": "visiblyHidden", "type": { "text": "boolean" }, "default": "false", - "description": "Active state.", - "fieldName": "active" + "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", + "fieldName": "visiblyHidden" }, { - "name": "disabled", + "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "fieldName": "disabled" - }, - { - "name": "backText", - "type": { - "text": "string" - }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" + "description": "Determines whether the checkbox is in an indeterminate state.", + "fieldName": "indeterminate" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-local-nav-link", + "tagName": "kyn-checkbox", "customElement": true } ], "exports": [ { "kind": "js", - "name": "LocalNavLink", + "name": "Checkbox", "declaration": { - "name": "LocalNavLink", - "module": "src/components/global/localNav/localNavLink.ts" + "name": "Checkbox", + "module": "src/components/reusable/checkbox/checkbox.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-local-nav-link", + "name": "kyn-checkbox", "declaration": { - "name": "LocalNavLink", - "module": "src/components/global/localNav/localNavLink.ts" + "name": "Checkbox", + "module": "src/components/reusable/checkbox/checkbox.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/footer/footer.ts", + "path": "src/components/reusable/checkbox/checkboxGroup.ts", "declarations": [ { "kind": "class", - "description": "The global Footer component.", - "name": "Footer", + "description": "Checkbox group container.", + "name": "CheckboxGroup", "slots": [ { - "description": "Default slot, for links.", + "description": "Slot for individual checkboxes.", "name": "unnamed" }, { - "description": "Slot for the logo, will overwrite the default logo.", - "name": "logo" + "description": "Slot for tooltip.", + "name": "tooltip" }, { - "description": "Slot for the copyright text.", - "name": "copyright" + "description": "Slot for description text.", + "name": "description" } ], "members": [ { "kind": "field", - "name": "rootUrl", + "name": "value", "type": { - "text": "string" + "text": "Array" }, - "default": "'/'", - "description": "URL for the footer logo link. Should target the application home page.", - "attribute": "rootUrl" + "default": "[]", + "description": "Checkbox group selected values.", + "attribute": "value" }, { - "kind": "method", - "name": "handleRootLinkClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the logo link click event and emits the original event.", - "name": "on-root-link-click" - } - ], - "attributes": [ - { - "name": "rootUrl", + "kind": "field", + "name": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "'/'", - "description": "URL for the footer logo link. Should target the application home page.", - "fieldName": "rootUrl" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-footer", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Footer", - "declaration": { - "name": "Footer", - "module": "src/components/global/footer/footer.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-footer", - "declaration": { - "name": "Footer", - "module": "src/components/global/footer/footer.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/footer/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Footer", - "declaration": { - "name": "Footer", - "module": "./footer" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/header.ts", - "declarations": [ - { - "kind": "class", - "description": "The global Header component.", - "name": "Header", - "slots": [ - { - "description": "The default slot for all empty space right of the logo/title.", - "name": "unnamed" - }, - { - "description": "Slot for the logo, will overwrite the default logo.", - "name": "logo" + "default": "false", + "description": "Makes a single selection required.", + "attribute": "required" }, { - "description": "Slot left of the logo, intended for the header nav.", - "name": "left" + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Checkbox group disabled state.", + "attribute": "disabled" }, - { - "description": "Slot between logo/title and right flyouts.", - "name": "center" - } - ], - "members": [ { "kind": "field", - "name": "rootUrl", + "name": "horizontal", "type": { - "text": "string" + "text": "boolean" }, - "default": "'/'", - "description": "URL for the header logo link. Should target the application home page.", - "attribute": "rootUrl" + "default": "false", + "description": "Checkbox group horizontal style.", + "attribute": "horizontal" }, { "kind": "field", - "name": "appTitle", + "name": "selectAll", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "App title text next to logo. Hidden on smaller screens.", - "attribute": "appTitle" + "default": "false", + "description": "Adds a \"Select All\" checkbox to the top of the group.", + "attribute": "selectAll" }, { - "kind": "method", - "name": "handleSlotChange", - "privacy": "private" + "kind": "field", + "name": "hideLegend", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide the group legend/label visually.", + "attribute": "hideLegend" }, { - "kind": "method", - "name": "handleRootLinkClick", + "kind": "field", + "name": "filterable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Adds a search input to enable filtering of checkboxes.", + "attribute": "filterable" + }, + { + "kind": "field", + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "attribute": "label" + }, + { + "kind": "field", + "name": "limitCheckboxes", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Limits visible checkboxes behind a \"Show all\" button.", + "attribute": "limitCheckboxes" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n search: 'Search',\n required: 'Required',\n error: 'Error',\n}", + "description": "Text string customization.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, + { + "kind": "field", + "name": "checkboxes", + "type": { + "text": "Array" + }, + "default": "[]" + }, + { + "kind": "field", + "name": "filteredCheckboxes", + "type": { + "text": "Array" + }, + "default": "[]" + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] + }, + { + "kind": "method", + "name": "_handleCheckboxChange", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] }, { "kind": "method", - "name": "_handleNavToggle", + "name": "_emitChangeEvent", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleFilter", "privacy": "private", "parameters": [ { @@ -640,7 +845,30 @@ }, { "kind": "method", - "name": "_handleFlyoutsToggle", + "name": "_toggleRevealed", + "privacy": "private", + "parameters": [ + { + "name": "revealed", + "type": { + "text": "boolean" + } + } + ] + }, + { + "kind": "method", + "name": "_handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleSubgroupChange", "privacy": "private", "parameters": [ { @@ -654,2715 +882,1769 @@ ], "events": [ { - "description": "Captures the menu toggle click event and emits the menu open state in the detail.", - "name": "on-menu-toggle" + "description": "Captures the change event and emits the selected values.", + "name": "on-checkbox-group-change" }, { - "description": "Captures the logo link click event and emits the original event details.", - "name": "on-root-link-click" + "description": "Captures the search input event and emits the search term.", + "name": "on-search" + }, + { + "description": "Captures the show more/less click and emits the expanded state.", + "name": "on-limit-toggle" } ], "attributes": [ { - "name": "rootUrl", + "name": "value", "type": { - "text": "string" + "text": "Array" }, - "default": "'/'", - "description": "URL for the header logo link. Should target the application home page.", - "fieldName": "rootUrl" + "default": "[]", + "description": "Checkbox group selected values.", + "fieldName": "value" }, { - "name": "appTitle", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Makes a single selection required.", + "fieldName": "required" + }, + { + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Checkbox group disabled state.", + "fieldName": "disabled" + }, + { + "name": "horizontal", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Checkbox group horizontal style.", + "fieldName": "horizontal" + }, + { + "name": "selectAll", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Adds a \"Select All\" checkbox to the top of the group.", + "fieldName": "selectAll" + }, + { + "name": "hideLegend", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide the group legend/label visually.", + "fieldName": "hideLegend" + }, + { + "name": "filterable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Adds a search input to enable filtering of checkboxes.", + "fieldName": "filterable" + }, + { + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "App title text next to logo. Hidden on smaller screens.", - "fieldName": "appTitle" + "description": "Label text.", + "fieldName": "label" + }, + { + "name": "limitCheckboxes", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Limits visible checkboxes behind a \"Show all\" button.", + "fieldName": "limitCheckboxes" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header", + "tagName": "kyn-checkbox-group", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Header", + "name": "CheckboxGroup", "declaration": { - "name": "Header", - "module": "src/components/global/header/header.ts" + "name": "CheckboxGroup", + "module": "src/components/reusable/checkbox/checkboxGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header", + "name": "kyn-checkbox-group", "declaration": { - "name": "Header", - "module": "src/components/global/header/header.ts" + "name": "CheckboxGroup", + "module": "src/components/reusable/checkbox/checkboxGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerCategory.ts", + "path": "src/components/reusable/checkbox/checkboxSubgroup.ts", "declarations": [ { "kind": "class", - "description": "Header link category", - "name": "HeaderCategory", + "description": "Checkbox subgroup", + "name": "CheckboxSubgroup", "slots": [ { - "description": "Slot for links.", + "description": "Slot for child kyn-checkboxes.", "name": "unnamed" + }, + { + "description": "Slot for parent kyn-checkbox.", + "name": "parent" } ], "members": [ { - "kind": "field", - "name": "heading", - "type": { - "text": "string" - }, - "default": "''", - "description": "Link url.", - "attribute": "heading" - } - ], - "attributes": [ + "kind": "method", + "name": "_handleSlotchange", + "privacy": "private" + }, { - "name": "heading", + "kind": "method", + "name": "_syncParent", + "privacy": "private", + "parameters": [ + { + "name": "count", + "type": { + "text": "number" + } + } + ] + }, + { + "kind": "method", + "name": "_handleCheckboxChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-checkbox-subgroup", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "CheckboxSubgroup", + "declaration": { + "name": "CheckboxSubgroup", + "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-checkbox-subgroup", + "declaration": { + "name": "CheckboxSubgroup", + "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/checkbox/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Checkbox", + "declaration": { + "name": "Checkbox", + "module": "./checkbox" + } + }, + { + "kind": "js", + "name": "CheckboxGroup", + "declaration": { + "name": "CheckboxGroup", + "module": "./checkboxGroup" + } + }, + { + "kind": "js", + "name": "CheckboxSubgroup", + "declaration": { + "name": "CheckboxSubgroup", + "module": "./checkboxSubgroup" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/card/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "VitalCardSkeleton", + "declaration": { + "name": "VitalCardSkeleton", + "module": "./vitalCard.skeleton" + } + }, + { + "kind": "js", + "name": "InformationalCardSkeleton", + "declaration": { + "name": "InformationalCardSkeleton", + "module": "./informationalCard.skeleton" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/card/informationalCard.skeleton.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-info-card-skeleton` Web Component.\nA skeleton loading state for the informational card component that mirrors its structure.", + "name": "InformationalCardSkeleton", + "members": [ + { + "kind": "field", + "name": "lines", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Link url.", - "fieldName": "heading" + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "attribute": "lines" + }, + { + "kind": "field", + "name": "thumbnailVisible", + "type": { + "text": "boolean | undefined" + }, + "default": "false", + "description": "Sets show or hide thumbnail element.", + "attribute": "thumbnailVisible" + } + ], + "attributes": [ + { + "name": "lines", + "type": { + "text": "number" + }, + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "fieldName": "lines" + }, + { + "name": "thumbnailVisible", + "type": { + "text": "boolean | undefined" + }, + "default": "false", + "description": "Sets show or hide thumbnail element.", + "fieldName": "thumbnailVisible" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-category", + "tagName": "kyn-info-card-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderCategory", + "name": "InformationalCardSkeleton", "declaration": { - "name": "HeaderCategory", - "module": "src/components/global/header/headerCategory.ts" + "name": "InformationalCardSkeleton", + "module": "src/components/reusable/card/informationalCard.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-category", + "name": "kyn-info-card-skeleton", "declaration": { - "name": "HeaderCategory", - "module": "src/components/global/header/headerCategory.ts" + "name": "InformationalCardSkeleton", + "module": "src/components/reusable/card/informationalCard.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerDivider.ts", + "path": "src/components/reusable/card/vitalCard.skeleton.ts", "declarations": [ { "kind": "class", - "description": "Header divider", - "name": "HeaderDivider", - "members": [], + "description": "`kyn-vital-card-skeleton` Web Component.\nA skeleton loading state for the vital card component that mirrors its structure.", + "name": "VitalCardSkeleton", + "members": [ + { + "kind": "field", + "name": "lines", + "type": { + "text": "number" + }, + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "attribute": "lines" + } + ], + "attributes": [ + { + "name": "lines", + "type": { + "text": "number" + }, + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "fieldName": "lines" + } + ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-divider", + "tagName": "kyn-vital-card-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderDivider", + "name": "VitalCardSkeleton", "declaration": { - "name": "HeaderDivider", - "module": "src/components/global/header/headerDivider.ts" + "name": "VitalCardSkeleton", + "module": "src/components/reusable/card/vitalCard.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-divider", + "name": "kyn-vital-card-skeleton", "declaration": { - "name": "HeaderDivider", - "module": "src/components/global/header/headerDivider.ts" + "name": "VitalCardSkeleton", + "module": "src/components/reusable/card/vitalCard.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerFlyout.ts", + "path": "src/components/reusable/datePicker/datepicker.ts", "declarations": [ { "kind": "class", - "description": "Component for header flyout items.", - "name": "HeaderFlyout", + "description": "Datepicker: uses Flatpickr's datetime picker library -- `https://flatpickr.js.org`", + "name": "DatePicker", "slots": [ { - "description": "Slot for flyout menu content.", - "name": "unnamed" - }, - { - "description": "Slot for button/toggle content.", - "name": "button" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "open", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Flyout open state.", - "attribute": "open" + "default": "''", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "anchorLeft", + "name": "locale", "type": { - "text": "boolean" + "text": "SupportedLocale" }, - "default": "false", - "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", - "attribute": "anchorLeft" + "default": "'en'", + "attribute": "locale" }, { "kind": "field", - "name": "hideArrow", + "name": "dateFormat", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hides the arrow.", - "attribute": "hideArrow" + "default": "'Y-m-d'", + "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", + "attribute": "dateFormat" }, { "kind": "field", - "name": "label", + "name": "defaultDate", "type": { - "text": "string" + "text": "Date | null" }, - "default": "''", - "description": "Menu & button label.", - "attribute": "label" + "default": "null", + "description": "Sets the initial selected date(s)", + "attribute": "defaultDate" }, { "kind": "field", - "name": "hideMenuLabel", + "name": "defaultErrorMessage", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hide the label at the top of the flyout menu.", - "attribute": "hideMenuLabel" + "default": "''", + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { "kind": "field", - "name": "hideButtonLabel", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the label in the mobile button.", - "attribute": "hideButtonLabel" + "description": "Sets datepicker form input value to required/required.", + "attribute": "required" }, { "kind": "field", - "name": "assistiveText", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", - "attribute": "assistiveText" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { "kind": "field", - "name": "href", + "name": "value", "type": { - "text": "string" + "text": "Date | Date[] | null" }, - "default": "''", - "description": "Turns the button into a link.", - "attribute": "href" + "default": "null", + "description": "Sets pre-selected date/time value.", + "attribute": "value" }, { "kind": "field", - "name": "backText", + "name": "warnText", "type": { "text": "string" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" - }, - { - "kind": "method", - "name": "_handleBack", - "privacy": "private" + "default": "''", + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { - "kind": "method", - "name": "handleClick", - "privacy": "private" + "kind": "field", + "name": "disable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "attribute": "disable" }, { - "kind": "method", - "name": "handleClickOut", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] + "kind": "field", + "name": "enable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "attribute": "enable" }, { - "kind": "method", - "name": "_handleOverlayClick", - "privacy": "private" - } - ], - "attributes": [ - { - "name": "open", + "kind": "field", + "name": "mode", "type": { - "text": "boolean" + "text": "'single' | 'multiple'" }, - "default": "false", - "description": "Flyout open state.", - "fieldName": "open" + "default": "'single'", + "description": "Sets flatpickr mode to select single (default), multiple dates.", + "attribute": "mode" }, { - "name": "anchorLeft", + "kind": "field", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", - "fieldName": "anchorLeft" + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, { - "name": "hideArrow", + "kind": "field", + "name": "datePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the arrow.", - "fieldName": "hideArrow" + "description": "Sets entire datepicker form element to enabled/disabled.", + "attribute": "datePickerDisabled" }, { - "name": "label", + "kind": "field", + "name": "twentyFourHourFormat", "type": { - "text": "string" + "text": "boolean | null" }, - "default": "''", - "description": "Menu & button label.", - "fieldName": "label" + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" }, { - "name": "hideMenuLabel", + "kind": "field", + "name": "minDate", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "default": "false", - "description": "Hide the label at the top of the flyout menu.", - "fieldName": "hideMenuLabel" + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "attribute": "minDate" }, { - "name": "hideButtonLabel", + "kind": "field", + "name": "maxDate", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "default": "false", - "description": "Hide the label in the mobile button.", - "fieldName": "hideButtonLabel" + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "attribute": "maxDate" }, { - "name": "assistiveText", + "kind": "field", + "name": "errorAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", - "fieldName": "assistiveText" + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" }, { - "name": "href", + "kind": "field", + "name": "errorTitle", "type": { "text": "string" }, "default": "''", - "description": "Turns the button into a link.", - "fieldName": "href" + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" }, { - "name": "backText", + "kind": "field", + "name": "warningAriaLabel", "type": { "text": "string" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-flyout", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderFlyout", - "declaration": { - "name": "HeaderFlyout", - "module": "src/components/global/header/headerFlyout.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-flyout", - "declaration": { - "name": "HeaderFlyout", - "module": "src/components/global/header/headerFlyout.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/headerFlyouts.ts", - "declarations": [ - { - "kind": "class", - "description": "Container for header-flyout components.", - "name": "HeaderFlyouts", - "slots": [ - { - "description": "Slot for header-flyout components.", - "name": "unnamed" - } - ], - "members": [ + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" + }, { "kind": "field", - "name": "open", + "name": "warningTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "attribute": "open" + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" }, { - "kind": "method", - "name": "_toggleOpen", - "privacy": "private" + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "_handleClickOut", + "name": "renderValidationMessage", "privacy": "private", "parameters": [ { - "name": "e", + "name": "errorId", "type": { - "text": "Event" + "text": "string" } - } - ] - } - ], - "attributes": [ - { - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "fieldName": "open" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-flyouts", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderFlyouts", - "declaration": { - "name": "HeaderFlyouts", - "module": "src/components/global/header/headerFlyouts.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-flyouts", - "declaration": { - "name": "HeaderFlyouts", - "module": "src/components/global/header/headerFlyouts.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/headerLink.ts", - "declarations": [ - { - "kind": "class", - "description": "Component for navigation links within the Header.", - "name": "HeaderLink", - "slots": [ - { - "description": "Slot for link text/content.", - "name": "unnamed" - }, - { - "description": "Slot for sublinks (up to two levels).", - "name": "links" - } - ], - "members": [ - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Link open state.", - "attribute": "open" - }, - { - "kind": "field", - "name": "href", - "type": { - "text": "string" - }, - "default": "''", - "description": "Link url.", - "attribute": "href" - }, - { - "kind": "field", - "name": "target", - "default": "'_self'", - "type": { - "text": "'_self'" - }, - "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", - "attribute": "target" - }, - { - "kind": "field", - "name": "rel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "attribute": "rel" - }, - { - "kind": "field", - "name": "isActive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Link active state, for example when URL path matches link href.", - "attribute": "isActive" - }, - { - "kind": "field", - "name": "divider", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", - "attribute": "divider" + }, + { + "name": "warningId", + "type": { + "text": "string" + } + } + ] }, { - "kind": "field", - "name": "searchLabel", - "type": { - "text": "string" - }, - "default": "'Search'", - "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", - "attribute": "searchLabel" + "kind": "method", + "name": "getDatepickerClasses" }, { - "kind": "field", - "name": "backText", - "type": { - "text": "string" - }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" + "kind": "method", + "name": "reinitializeFlatpickr", + "privacy": "private" }, { - "kind": "field", - "name": "_searchTerm", - "type": { - "text": "string" - }, - "default": "''", - "description": "Text for mobile \"Back\" button." + "kind": "method", + "name": "setupAnchor", + "privacy": "private" }, { "kind": "method", - "name": "_handleSearch", + "name": "_handleClear", "privacy": "private", "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "any" + "text": "Event" } } ] }, { "kind": "method", - "name": "_searchFilter", - "privacy": "private" + "name": "initializeFlatpickr", + "return": { + "type": { + "text": "Promise" + } + } }, { "kind": "method", - "name": "_handleBack", - "privacy": "private" + "name": "updateFlatpickrOptions", + "return": { + "type": { + "text": "Promise" + } + } }, { "kind": "method", - "name": "_handleLinksSlotChange", - "privacy": "private" + "name": "setInitialDates", + "return": { + "type": { + "text": "void" + } + } }, { "kind": "method", - "name": "handlePointerEnter", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "PointerEvent" - } + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" } - ] + } }, { "kind": "method", - "name": "handlePointerLeave", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "PointerEvent" - } + "name": "handleOpen", + "return": { + "type": { + "text": "void" } - ] + } }, { "kind": "method", - "name": "handleClick", - "privacy": "private", + "name": "handleClose", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "handleDateChange", + "return": { + "type": { + "text": "Promise" + } + }, "parameters": [ { - "name": "e", + "name": "selectedDates", "type": { - "text": "Event" + "text": "Date[]" + } + }, + { + "name": "dateStr", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "handleClickOut", + "name": "setShouldFlatpickrOpen", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "value", "type": { - "text": "Event" + "text": "boolean" } } ] }, { "kind": "method", - "name": "determineLevel", - "privacy": "private" - }, - { - "kind": "method", - "name": "_positionMenu", + "name": "closeFlatpickr", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "preventFlatpickrOpen", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "handleInputClickEvent", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "handleInputFocusEvent", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "interacted", + "type": { + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" + } + } + ] + }, + { + "kind": "method", + "name": "_onChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleFormReset", "privacy": "private" } ], "events": [ { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-change" } ], "attributes": [ { - "name": "open", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Link open state.", - "fieldName": "open" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "href", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "fieldName": "locale" + }, + { + "name": "dateFormat", "type": { "text": "string" }, - "default": "''", - "description": "Link url.", - "fieldName": "href" + "default": "'Y-m-d'", + "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", + "fieldName": "dateFormat" }, { - "name": "target", - "default": "'_self'", + "name": "defaultDate", "type": { - "text": "'_self'" + "text": "Date | null" }, - "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", - "fieldName": "target" + "default": "null", + "description": "Sets the initial selected date(s)", + "fieldName": "defaultDate" }, { - "name": "rel", + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "fieldName": "rel" + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "name": "isActive", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Link active state, for example when URL path matches link href.", - "fieldName": "isActive" + "description": "Sets datepicker form input value to required/required.", + "fieldName": "required" }, { - "name": "divider", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", - "fieldName": "divider" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "searchLabel", + "name": "value", "type": { - "text": "string" + "text": "Date | Date[] | null" }, - "default": "'Search'", - "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", - "fieldName": "searchLabel" + "default": "null", + "description": "Sets pre-selected date/time value.", + "fieldName": "value" }, { - "name": "backText", + "name": "warnText", "type": { "text": "string" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-link", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderLink", - "declaration": { - "name": "HeaderLink", - "module": "src/components/global/header/headerLink.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-link", - "declaration": { - "name": "HeaderLink", - "module": "src/components/global/header/headerLink.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/headerNav.ts", - "declarations": [ - { - "kind": "class", - "description": "Container for header navigation links.", - "name": "HeaderNav", - "slots": [ - { - "description": "This element has a slot.", - "name": "unnamed" - } - ], - "members": [ + "default": "''", + "description": "Sets validation warning messaging.", + "fieldName": "warnText" + }, { - "kind": "field", - "name": "slot", + "name": "disable", "type": { - "text": "string" + "text": "(string | number | Date)[]" }, - "default": "'left'", - "description": "Force correct slot", - "attribute": "slot", - "reflects": true + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "fieldName": "disable" }, { - "kind": "method", - "name": "_toggleMenuOpen", - "privacy": "private" + "name": "enable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "fieldName": "enable" }, { - "kind": "method", - "name": "_handleClickOut", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] + "name": "mode", + "type": { + "text": "'single' | 'multiple'" + }, + "default": "'single'", + "description": "Sets flatpickr mode to select single (default), multiple dates.", + "fieldName": "mode" }, { - "kind": "method", - "name": "_handleOverlayClick", - "privacy": "private" - } - ], - "attributes": [ - { - "name": "slot", + "name": "caption", "type": { "text": "string" }, - "default": "'left'", - "description": "Force correct slot", - "fieldName": "slot" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-nav", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderNav", - "declaration": { - "name": "HeaderNav", - "module": "src/components/global/header/headerNav.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-nav", - "declaration": { - "name": "HeaderNav", - "module": "src/components/global/header/headerNav.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/headerNotificationPanel.ts", - "declarations": [ - { - "kind": "class", - "description": "Component for notification panel within the Header.", - "name": "HeaderNotificationPanel", - "slots": [ + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" + }, { - "description": "Slot for panel menu", - "name": "menu-slot" + "name": "datePickerDisabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets entire datepicker form element to enabled/disabled.", + "fieldName": "datePickerDisabled" }, { - "description": "Slot for notification content.", - "name": "unnamed" - } - ], - "members": [ + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" + }, { - "kind": "field", - "name": "panelTitle", + "name": "minDate", "type": { - "text": "string" + "text": "string | number | Date" }, "default": "''", - "description": "Notification panel Title.", - "attribute": "panelTitle" + "description": "Sets lower boundary of datepicker date selection.", + "fieldName": "minDate" }, { - "kind": "field", - "name": "panelFooterBtnText", + "name": "maxDate", "type": { - "text": "string" + "text": "string | number | Date" }, "default": "''", - "description": "Notification panel footer button text.", - "attribute": "panelFooterBtnText" + "description": "Sets upper boundary of datepicker date selection.", + "fieldName": "maxDate" }, { - "kind": "field", - "name": "hidePanelFooter", + "name": "errorAriaLabel", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hide notification panel footer", - "attribute": "hidePanelFooter" + "default": "''", + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "kind": "method", - "name": "_handlefooterBtnEvent", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Emits the panel footer button event.", - "name": "on-footer-btn-click" - } - ], - "attributes": [ - { - "name": "panelTitle", + "name": "errorTitle", "type": { "text": "string" }, "default": "''", - "description": "Notification panel Title.", - "fieldName": "panelTitle" + "description": "Sets title attribute for error message.", + "fieldName": "errorTitle" }, { - "name": "panelFooterBtnText", + "name": "warningAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "Notification panel footer button text.", - "fieldName": "panelFooterBtnText" + "description": "Sets aria label attribute for warning message.", + "fieldName": "warningAriaLabel" }, { - "name": "hidePanelFooter", + "name": "warningTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hide notification panel footer", - "fieldName": "hidePanelFooter" + "default": "''", + "description": "Sets title attribute for warning message.", + "fieldName": "warningTitle" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-notification-panel", + "tagName": "kyn-date-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderNotificationPanel", + "name": "DatePicker", "declaration": { - "name": "HeaderNotificationPanel", - "module": "src/components/global/header/headerNotificationPanel.ts" + "name": "DatePicker", + "module": "src/components/reusable/datePicker/datepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-notification-panel", + "name": "kyn-date-picker", "declaration": { - "name": "HeaderNotificationPanel", - "module": "src/components/global/header/headerNotificationPanel.ts" + "name": "DatePicker", + "module": "src/components/reusable/datePicker/datepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerPanelLink.ts", + "path": "src/components/reusable/datePicker/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "DatePicker", + "declaration": { + "name": "DatePicker", + "module": "./datepicker" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/daterangepicker/daterangepicker.ts", "declarations": [ { "kind": "class", - "description": "Header fly-out panel link.", - "name": "HeaderPanelLink", + "description": "Date Range Picker: uses Flatpickr library, range picker implementation -- `https://flatpickr.js.org/examples/#range-calendar`", + "name": "DateRangePicker", "slots": [ { - "description": "Slot for link text/content.", - "name": "unnamed" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "href", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "attribute": "href" + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "target", - "default": "'_self'", + "name": "locale", "type": { - "text": "'_self'" + "text": "SupportedLocale" }, - "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", - "attribute": "target" + "default": "'en'", + "description": "Sets and dynamically imports specific l10n calendar localization.", + "attribute": "locale" }, { "kind": "field", - "name": "rel", + "name": "dateFormat", "type": { "text": "string" }, - "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "attribute": "rel" + "default": "'Y-m-d'", + "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", + "attribute": "dateFormat" }, { - "kind": "method", - "name": "handleClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" - } - ], - "attributes": [ + "kind": "field", + "name": "defaultDate", + "type": { + "text": "Date | null" + }, + "default": "null", + "description": "Sets the initial selected date(s)", + "attribute": "defaultDate" + }, { - "name": "href", + "kind": "field", + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "fieldName": "href" + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { - "name": "target", - "default": "'_self'", + "kind": "field", + "name": "value", "type": { - "text": "'_self'" + "text": "[Date | null, Date | null]" }, - "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", - "fieldName": "target" - }, + "default": "[null, null]", + "description": "Sets date/time range value.", + "attribute": "value" + }, { - "name": "rel", + "kind": "field", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "fieldName": "rel" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-panel-link", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderPanelLink", - "declaration": { - "name": "HeaderPanelLink", - "module": "src/components/global/header/headerPanelLink.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-panel-link", - "declaration": { - "name": "HeaderPanelLink", - "module": "src/components/global/header/headerPanelLink.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/headerUserProfile.ts", - "declarations": [ - { - "kind": "class", - "description": "Header user profile.", - "name": "HeaderUserProfile", - "slots": [ + "description": "Sets validation warning messaging.", + "attribute": "warnText" + }, { - "description": "Slot for the profile picture img.", - "name": "unnamed" - } - ], - "members": [ + "kind": "field", + "name": "disable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "attribute": "disable" + }, { "kind": "field", - "name": "name", + "name": "enable", "type": { - "text": "string" + "text": "(string | number | Date)[]" }, - "default": "''", - "description": "The user's name.", - "attribute": "name" + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "attribute": "enable" }, { "kind": "field", - "name": "subtitle", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "The user's job title, or subtext.", - "attribute": "subtitle" + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, { "kind": "field", - "name": "email", + "name": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "The user's email address.", - "attribute": "email" + "default": "false", + "description": "Sets date range picker form input value to required/required.", + "attribute": "required" }, { "kind": "field", - "name": "profileLink", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "View profile link URL.", - "attribute": "profileLink" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { "kind": "field", - "name": "profileLinkText", + "name": "dateRangePickerDisabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'View Profile'", - "description": "View Profile link text.", - "attribute": "profileLinkText" + "default": "false", + "description": "Sets entire date range picker form element to enabled/disabled.", + "attribute": "dateRangePickerDisabled" }, { - "kind": "method", - "name": "_handleProfileClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ + "kind": "field", + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" + }, { - "description": "Captures the view profile link click event and emits the original event details.", - "name": "on-profile-link-click" - } - ], - "attributes": [ + "kind": "field", + "name": "minDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of date range picker date selection.", + "attribute": "minDate" + }, { - "name": "name", + "kind": "field", + "name": "maxDate", "type": { - "text": "string" + "text": "string | number | Date" }, "default": "''", - "description": "The user's name.", - "fieldName": "name" + "description": "Sets upper boundary of date range picker date selection.", + "attribute": "maxDate" }, { - "name": "subtitle", + "kind": "field", + "name": "errorAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "The user's job title, or subtext.", - "fieldName": "subtitle" + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" }, { - "name": "email", + "kind": "field", + "name": "errorTitle", "type": { "text": "string" }, "default": "''", - "description": "The user's email address.", - "fieldName": "email" + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" }, { - "name": "profileLink", + "kind": "field", + "name": "warningAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "View profile link URL.", - "fieldName": "profileLink" + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" }, { - "name": "profileLinkText", + "kind": "field", + "name": "warningTitle", "type": { "text": "string" }, - "default": "'View Profile'", - "description": "View Profile link text.", - "fieldName": "profileLinkText" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-user-profile", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderUserProfile", - "declaration": { - "name": "HeaderUserProfile", - "module": "src/components/global/header/headerUserProfile.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-user-profile", - "declaration": { - "name": "HeaderUserProfile", - "module": "src/components/global/header/headerUserProfile.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Header", - "declaration": { - "name": "Header", - "module": "./header" - } - }, - { - "kind": "js", - "name": "HeaderNav", - "declaration": { - "name": "HeaderNav", - "module": "./headerNav" - } - }, - { - "kind": "js", - "name": "HeaderLink", - "declaration": { - "name": "HeaderLink", - "module": "./headerLink" - } - }, - { - "kind": "js", - "name": "HeaderCategory", - "declaration": { - "name": "HeaderCategory", - "module": "./headerCategory" - } - }, - { - "kind": "js", - "name": "HeaderDivider", - "declaration": { - "name": "HeaderDivider", - "module": "./headerDivider" - } - }, - { - "kind": "js", - "name": "HeaderFlyouts", - "declaration": { - "name": "HeaderFlyouts", - "module": "./headerFlyouts" - } - }, - { - "kind": "js", - "name": "HeaderFlyout", - "declaration": { - "name": "HeaderFlyout", - "module": "./headerFlyout" - } - }, - { - "kind": "js", - "name": "HeaderUserProfile", - "declaration": { - "name": "HeaderUserProfile", - "module": "./headerUserProfile" - } - }, - { - "kind": "js", - "name": "HeaderPanelLink", - "declaration": { - "name": "HeaderPanelLink", - "module": "./headerPanelLink" - } - }, - { - "kind": "js", - "name": "HeaderNotificationPanel", - "declaration": { - "name": "HeaderNotificationPanel", - "module": "./headerNotificationPanel" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/uiShell/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "UiShell", - "declaration": { - "name": "UiShell", - "module": "./uiShell" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/uiShell/uiShell.ts", - "declarations": [ - { - "kind": "class", - "description": "Container to help with positioning and padding of the global elements such as: adds padding for the fixed Header and Local Nav, adds main content gutters, and makes Footer sticky. This takes the onus off of the consuming app to configure these values.", - "name": "UiShell", - "slots": [ - { - "description": "Slot for global elements.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "method", - "name": "handleSlotChange", - "privacy": "private" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-ui-shell", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "UiShell", - "declaration": { - "name": "UiShell", - "module": "src/components/global/uiShell/uiShell.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-ui-shell", - "declaration": { - "name": "UiShell", - "module": "src/components/global/uiShell/uiShell.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/breadcrumbs/breadcrumbs.ts", - "declarations": [ - { - "kind": "class", - "description": "Breadcrumbs Component.", - "name": "Breadcrumbs", - "slots": [ - { - "description": "Slot for inserting links.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-breadcrumbs", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Breadcrumbs", - "declaration": { - "name": "Breadcrumbs", - "module": "src/components/reusable/breadcrumbs/breadcrumbs.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-breadcrumbs", - "declaration": { - "name": "Breadcrumbs", - "module": "src/components/reusable/breadcrumbs/breadcrumbs.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/breadcrumbs/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Breadcrumbs", - "declaration": { - "name": "Breadcrumbs", - "module": "./breadcrumbs" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/blockCodeView/blockCodeView.ts", - "declarations": [ - { - "kind": "class", - "description": "`` component to display `` snippets as standalone single-/multi-line block elements.", - "name": "BlockCodeView", - "members": [ - { - "kind": "field", - "name": "darkTheme", - "type": { - "text": "'light' | 'dark'" - }, - "default": "'dark'", - "description": "Sets background and text theming.", - "attribute": "darkTheme" - }, - { - "kind": "field", - "name": "language", - "type": { - "text": "string" - }, - "default": "''", - "description": "If empty string, attempt language syntax auto-detection. Setting a value will override auto-detection and manually configure desired language.", - "attribute": "language" - }, - { - "kind": "field", - "name": "maxHeight", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Customizable max-height setting for code snippet container.", - "attribute": "maxHeight" - }, - { - "kind": "field", - "name": "codeViewLabel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optionally displayed label above code snippet container.", - "attribute": "codeViewLabel" - }, - { - "kind": "field", - "name": "copyOptionVisible", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Optionally display button to copy code snippet.", - "attribute": "copyOptionVisible" - }, - { - "kind": "field", - "name": "codeViewExpandable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Optionally display button to expand code snippet container.", - "attribute": "codeViewExpandable" - }, - { - "kind": "field", - "name": "copyButtonText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets copy code button text (optional).", - "attribute": "copyButtonText" - }, - { - "kind": "field", - "name": "copyButtonDescriptionAttr", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets copy button description attr value.", - "attribute": "copyButtonDescriptionAttr" - }, - { - "kind": "field", - "name": "codeSnippet", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", - "attribute": "codeSnippet" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n collapsed: 'Collapsed',\n expanded: 'Expanded',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "getContainerClasses", - "privacy": "private" - }, - { - "kind": "method", - "name": "renderCopyButton", - "privacy": "private" - }, - { - "kind": "method", - "name": "renderExpandButton", - "privacy": "private" - }, - { - "kind": "method", - "name": "highlightCode", - "privacy": "private" - }, - { - "kind": "method", - "name": "detectLanguage", - "privacy": "private", - "return": { - "type": { - "text": "string" - } - }, - "parameters": [ - { - "name": "code", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "calculateRelevance", - "privacy": "private", - "return": { - "type": { - "text": "number" - } - }, - "parameters": [ - { - "name": "tokens", - "type": { - "text": "(string | Prism.Token)[]" - } - }, - { - "name": "language", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "getTokenRelevance", - "privacy": "private", - "return": { - "type": { - "text": "number" - } - }, - "parameters": [ - { - "name": "token", - "type": { - "text": "Prism.Token" - } - }, - { - "name": "language", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "isLanguageSpecificToken", - "privacy": "private", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "token", - "type": { - "text": "Prism.Token" - } - }, - { - "name": "language", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "determineMarkupLanguage", - "privacy": "private", - "return": { - "type": { - "text": "string" - } - }, - "parameters": [ - { - "name": "code", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "checkOverflow", - "privacy": "private" - }, - { - "kind": "method", - "name": "removeLeadingWhitespace", - "privacy": "private", - "return": { - "type": { - "text": "string" - } - }, - "parameters": [ - { - "name": "code", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "formatExampleCode", - "privacy": "private", - "parameters": [ - { - "name": "code", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "copyCode", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "getContainerStyle", - "privacy": "private", - "return": { - "type": { - "text": "string" - } - } - }, - { - "kind": "method", - "name": "expandCodeView", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleKeypress", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "KeyboardEvent" - } - } - ] - } - ], - "events": [ - { - "name": "on-copy", - "type": { - "text": "CustomEvent" - }, - "description": "Emits when the copy button is clicked." - } - ], - "attributes": [ - { - "name": "darkTheme", - "type": { - "text": "'light' | 'dark'" - }, - "default": "'dark'", - "description": "Sets background and text theming.", - "fieldName": "darkTheme" - }, - { - "name": "language", - "type": { - "text": "string" - }, - "default": "''", - "description": "If empty string, attempt language syntax auto-detection. Setting a value will override auto-detection and manually configure desired language.", - "fieldName": "language" - }, - { - "name": "maxHeight", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Customizable max-height setting for code snippet container.", - "fieldName": "maxHeight" - }, - { - "name": "codeViewLabel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optionally displayed label above code snippet container.", - "fieldName": "codeViewLabel" - }, - { - "name": "copyOptionVisible", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Optionally display button to copy code snippet.", - "fieldName": "copyOptionVisible" - }, - { - "name": "codeViewExpandable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Optionally display button to expand code snippet container.", - "fieldName": "codeViewExpandable" - }, - { - "name": "copyButtonText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets copy code button text (optional).", - "fieldName": "copyButtonText" - }, - { - "name": "copyButtonDescriptionAttr", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets copy button description attr value.", - "fieldName": "copyButtonDescriptionAttr" - }, - { - "name": "codeSnippet", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", - "fieldName": "codeSnippet" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-block-code-view", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "BlockCodeView", - "declaration": { - "name": "BlockCodeView", - "module": "src/components/reusable/blockCodeView/blockCodeView.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-block-code-view", - "declaration": { - "name": "BlockCodeView", - "module": "src/components/reusable/blockCodeView/blockCodeView.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/blockCodeView/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "BlockCodeView", - "declaration": { - "name": "BlockCodeView", - "module": "./blockCodeView" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/card/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "VitalCardSkeleton", - "declaration": { - "name": "VitalCardSkeleton", - "module": "./vitalCard.skeleton" - } - }, - { - "kind": "js", - "name": "InformationalCardSkeleton", - "declaration": { - "name": "InformationalCardSkeleton", - "module": "./informationalCard.skeleton" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/card/informationalCard.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-info-card-skeleton` Web Component.\nA skeleton loading state for the informational card component that mirrors its structure.", - "name": "InformationalCardSkeleton", - "members": [ - { - "kind": "field", - "name": "lines", - "type": { - "text": "number" - }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "attribute": "lines" - }, - { - "kind": "field", - "name": "thumbnailVisible", - "type": { - "text": "boolean | undefined" - }, - "default": "false", - "description": "Sets show or hide thumbnail element.", - "attribute": "thumbnailVisible" - } - ], - "attributes": [ - { - "name": "lines", - "type": { - "text": "number" - }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "fieldName": "lines" - }, - { - "name": "thumbnailVisible", - "type": { - "text": "boolean | undefined" - }, - "default": "false", - "description": "Sets show or hide thumbnail element.", - "fieldName": "thumbnailVisible" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-info-card-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "InformationalCardSkeleton", - "declaration": { - "name": "InformationalCardSkeleton", - "module": "src/components/reusable/card/informationalCard.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-info-card-skeleton", - "declaration": { - "name": "InformationalCardSkeleton", - "module": "src/components/reusable/card/informationalCard.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/card/vitalCard.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-vital-card-skeleton` Web Component.\nA skeleton loading state for the vital card component that mirrors its structure.", - "name": "VitalCardSkeleton", - "members": [ - { - "kind": "field", - "name": "lines", - "type": { - "text": "number" - }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "attribute": "lines" - } - ], - "attributes": [ - { - "name": "lines", - "type": { - "text": "number" - }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "fieldName": "lines" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-vital-card-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "VitalCardSkeleton", - "declaration": { - "name": "VitalCardSkeleton", - "module": "src/components/reusable/card/vitalCard.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-vital-card-skeleton", - "declaration": { - "name": "VitalCardSkeleton", - "module": "src/components/reusable/card/vitalCard.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/checkbox/checkbox.ts", - "declarations": [ - { - "kind": "class", - "description": "Checkbox.", - "name": "Checkbox", - "slots": [ - { - "description": "Slot for label text.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "''", - "description": "Checkbox value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox disabled state, inherited from the parent group.", - "attribute": "disabled" - }, - { - "kind": "field", - "name": "visiblyHidden", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", - "attribute": "visiblyHidden" - }, - { - "kind": "field", - "name": "indeterminate", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "attribute": "indeterminate" - }, - { - "kind": "method", - "name": "handleChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-checkbox-change" - } - ], - "attributes": [ - { - "name": "value", - "type": { - "text": "string" - }, - "default": "''", - "description": "Checkbox value.", - "fieldName": "value" - }, - { - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox disabled state, inherited from the parent group.", - "fieldName": "disabled" - }, - { - "name": "visiblyHidden", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", - "fieldName": "visiblyHidden" - }, - { - "name": "indeterminate", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "fieldName": "indeterminate" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-checkbox", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Checkbox", - "declaration": { - "name": "Checkbox", - "module": "src/components/reusable/checkbox/checkbox.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-checkbox", - "declaration": { - "name": "Checkbox", - "module": "src/components/reusable/checkbox/checkbox.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/checkbox/checkboxGroup.ts", - "declarations": [ - { - "kind": "class", - "description": "Checkbox group container.", - "name": "CheckboxGroup", - "slots": [ - { - "description": "Slot for individual checkboxes.", - "name": "unnamed" - }, - { - "description": "Slot for tooltip.", - "name": "tooltip" + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" }, - { - "description": "Slot for description text.", - "name": "description" - } - ], - "members": [ { "kind": "field", - "name": "value", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", "type": { - "text": "Array" - }, - "default": "[]", - "description": "Checkbox group selected values.", - "attribute": "value" + "text": "object" + } }, { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes a single selection required.", - "attribute": "required" + "kind": "method", + "name": "renderValidationMessage", + "privacy": "private", + "parameters": [ + { + "name": "errorId", + "type": { + "text": "string" + } + }, + { + "name": "warningId", + "type": { + "text": "string" + } + } + ] }, { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox group disabled state.", - "attribute": "disabled" + "kind": "method", + "name": "_handleClear", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } + } + ] }, { - "kind": "field", - "name": "horizontal", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox group horizontal style.", - "attribute": "horizontal" + "kind": "method", + "name": "getDateRangePickerClasses" }, { - "kind": "field", - "name": "selectAll", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Adds a \"Select All\" checkbox to the top of the group.", - "attribute": "selectAll" + "kind": "method", + "name": "reinitializeFlatpickr", + "privacy": "private" }, { - "kind": "field", - "name": "hideLegend", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hide the group legend/label visually.", - "attribute": "hideLegend" + "kind": "method", + "name": "setupAnchor", + "privacy": "private" }, { - "kind": "field", - "name": "filterable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Adds a search input to enable filtering of checkboxes.", - "attribute": "filterable" + "kind": "method", + "name": "initializeFlatpickr", + "privacy": "private" }, { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" + "kind": "method", + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" + } + } }, { - "kind": "field", - "name": "limitCheckboxes", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Limits visible checkboxes behind a \"Show all\" button.", - "attribute": "limitCheckboxes" + "kind": "method", + "name": "updateFlatpickrOptions" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n search: 'Search',\n required: 'Required',\n error: 'Error',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" + "kind": "method", + "name": "setInitialDates", + "return": { + "type": { + "text": "void" + } } }, { - "kind": "field", - "name": "checkboxes", - "type": { - "text": "Array" - }, - "default": "[]" - }, - { - "kind": "field", - "name": "filteredCheckboxes", - "type": { - "text": "Array" - }, - "default": "[]" + "kind": "method", + "name": "handleOpen", + "return": { + "type": { + "text": "void" + } + } }, { "kind": "method", - "name": "_validate", - "privacy": "private", + "name": "handleDateChange", + "return": { + "type": { + "text": "Promise" + } + }, "parameters": [ { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", + "name": "selectedDates", "type": { - "text": "Boolean" + "text": "Date[]" } } ] }, { "kind": "method", - "name": "_handleCheckboxChange", - "privacy": "private", + "name": "handleClose" + }, + { + "kind": "method", + "name": "updateSelectedDateRangeAria", "parameters": [ { - "name": "e", + "name": "selectedDates", "type": { - "text": "any" + "text": "Date[]" } } ] }, { "kind": "method", - "name": "_emitChangeEvent", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleFilter", + "name": "setShouldFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "e", + "name": "value", "type": { - "text": "any" + "text": "boolean" } } ] }, { "kind": "method", - "name": "_toggleRevealed", + "name": "closeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "preventFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "revealed", + "name": "event", "type": { - "text": "boolean" + "text": "Event" } } ] }, { "kind": "method", - "name": "_handleSlotChange", + "name": "handleInputClickEvent", "privacy": "private" }, { "kind": "method", - "name": "_updateChildren", + "name": "handleInputFocusEvent", "privacy": "private" }, { "kind": "method", - "name": "_handleSubgroupChange", + "name": "_validate", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "interacted", "type": { - "text": "any" + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" } } ] + }, + { + "kind": "method", + "name": "_onChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleFormReset", + "privacy": "private" } ], "events": [ { - "description": "Captures the change event and emits the selected values.", - "name": "on-checkbox-group-change" + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-change" + } + ], + "attributes": [ + { + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "description": "Captures the search input event and emits the search term.", - "name": "on-search" + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets and dynamically imports specific l10n calendar localization.", + "fieldName": "locale" }, { - "description": "Captures the show more/less click and emits the expanded state.", - "name": "on-limit-toggle" - } - ], - "attributes": [ + "name": "dateFormat", + "type": { + "text": "string" + }, + "default": "'Y-m-d'", + "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", + "fieldName": "dateFormat" + }, + { + "name": "defaultDate", + "type": { + "text": "Date | null" + }, + "default": "null", + "description": "Sets the initial selected date(s)", + "fieldName": "defaultDate" + }, + { + "name": "defaultErrorMessage", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" + }, { "name": "value", "type": { - "text": "Array" + "text": "[Date | null, Date | null]" }, - "default": "[]", - "description": "Checkbox group selected values.", + "default": "[null, null]", + "description": "Sets date/time range value.", "fieldName": "value" }, + { + "name": "warnText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets validation warning messaging.", + "fieldName": "warnText" + }, + { + "name": "disable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "fieldName": "disable" + }, + { + "name": "enable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "fieldName": "enable" + }, + { + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" + }, { "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Makes a single selection required.", + "description": "Sets date range picker form input value to required/required.", "fieldName": "required" }, { - "name": "disabled", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Checkbox group disabled state.", - "fieldName": "disabled" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "horizontal", + "name": "dateRangePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Checkbox group horizontal style.", - "fieldName": "horizontal" + "description": "Sets entire date range picker form element to enabled/disabled.", + "fieldName": "dateRangePickerDisabled" }, { - "name": "selectAll", + "name": "twentyFourHourFormat", "type": { - "text": "boolean" + "text": "boolean | null" }, - "default": "false", - "description": "Adds a \"Select All\" checkbox to the top of the group.", - "fieldName": "selectAll" + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" }, { - "name": "hideLegend", + "name": "minDate", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "default": "false", - "description": "Hide the group legend/label visually.", - "fieldName": "hideLegend" + "default": "''", + "description": "Sets lower boundary of date range picker date selection.", + "fieldName": "minDate" }, { - "name": "filterable", + "name": "maxDate", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "default": "false", - "description": "Adds a search input to enable filtering of checkboxes.", - "fieldName": "filterable" + "default": "''", + "description": "Sets upper boundary of date range picker date selection.", + "fieldName": "maxDate" }, { - "name": "label", + "name": "errorAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "fieldName": "label" + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "name": "limitCheckboxes", + "name": "errorTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Limits visible checkboxes behind a \"Show all\" button.", - "fieldName": "limitCheckboxes" + "default": "''", + "description": "Sets title attribute for error message.", + "fieldName": "errorTitle" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-checkbox-group", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "CheckboxGroup", - "declaration": { - "name": "CheckboxGroup", - "module": "src/components/reusable/checkbox/checkboxGroup.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-checkbox-group", - "declaration": { - "name": "CheckboxGroup", - "module": "src/components/reusable/checkbox/checkboxGroup.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/checkbox/checkboxSubgroup.ts", - "declarations": [ - { - "kind": "class", - "description": "Checkbox subgroup", - "name": "CheckboxSubgroup", - "slots": [ + "name": "warningAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for warning message.", + "fieldName": "warningAriaLabel" + }, { - "description": "Slot for child kyn-checkboxes.", - "name": "unnamed" + "name": "warningTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for warning message.", + "fieldName": "warningTitle" }, { - "description": "Slot for parent kyn-checkbox.", - "name": "parent" + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" } ], - "members": [ - { - "kind": "method", - "name": "_handleSlotchange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_syncParent", - "privacy": "private", - "parameters": [ - { - "name": "count", - "type": { - "text": "number" - } - } - ] - }, + "mixins": [ { - "kind": "method", - "name": "_handleCheckboxChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-checkbox-subgroup", + "tagName": "kyn-date-range-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "CheckboxSubgroup", + "name": "DateRangePicker", "declaration": { - "name": "CheckboxSubgroup", - "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" + "name": "DateRangePicker", + "module": "src/components/reusable/daterangepicker/daterangepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-checkbox-subgroup", + "name": "kyn-date-range-picker", "declaration": { - "name": "CheckboxSubgroup", - "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" + "name": "DateRangePicker", + "module": "src/components/reusable/daterangepicker/daterangepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/checkbox/index.ts", + "path": "src/components/reusable/daterangepicker/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Checkbox", - "declaration": { - "name": "Checkbox", - "module": "./checkbox" - } - }, - { - "kind": "js", - "name": "CheckboxGroup", - "declaration": { - "name": "CheckboxGroup", - "module": "./checkboxGroup" - } - }, - { - "kind": "js", - "name": "CheckboxSubgroup", + "name": "DateRangePicker", "declaration": { - "name": "CheckboxSubgroup", - "module": "./checkboxSubgroup" + "name": "DateRangePicker", + "module": "./daterangepicker" } } ] @@ -4256,741 +3538,682 @@ "declaration": { "name": "DropdownCategory", "module": "./dropdownCategory" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/daterangepicker/daterangepicker.ts", - "declarations": [ - { - "kind": "class", - "description": "Date Range Picker: uses Flatpickr library, range picker implementation -- `https://flatpickr.js.org/examples/#range-calendar`", - "name": "DateRangePicker", - "slots": [ - { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], - "members": [ - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets and dynamically imports specific l10n calendar localization.", - "attribute": "locale" - }, - { - "kind": "field", - "name": "dateFormat", - "type": { - "text": "string" - }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "attribute": "dateFormat" - }, - { - "kind": "field", - "name": "defaultDate", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets the initial selected date(s)", - "attribute": "defaultDate" - }, - { - "kind": "field", - "name": "defaultErrorMessage", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "[Date | null, Date | null]" - }, - "default": "[null, null]", - "description": "Sets date/time range value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "warnText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" - }, - { - "kind": "field", - "name": "disable", - "type": { - "text": "(string | number | Date)[]" - }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "attribute": "disable" - }, - { - "kind": "field", - "name": "enable", - "type": { - "text": "(string | number | Date)[]" - }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "attribute": "enable" - }, - { - "kind": "field", - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets date range picker form input value to required/required.", - "attribute": "required" - }, - { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, - { - "kind": "field", - "name": "dateRangePickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire date range picker form element to enabled/disabled.", - "attribute": "dateRangePickerDisabled" - }, - { - "kind": "field", - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-` locales and 24H for all other locales.", - "attribute": "twentyFourHourFormat" - }, - { - "kind": "field", - "name": "minDate", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets lower boundary of date range picker date selection.", - "attribute": "minDate" - }, + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/errorBlock/errorBlock.ts", + "declarations": [ + { + "kind": "class", + "description": "Error block.", + "name": "ErrorBlock", + "slots": [ { - "kind": "field", - "name": "maxDate", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets upper boundary of date range picker date selection.", - "attribute": "maxDate" + "description": "Slot for the error description.", + "name": "unnamed" }, { - "kind": "field", - "name": "errorAriaLabel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "description": "Slot for the error image.", + "name": "image" }, { - "kind": "field", - "name": "errorTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" - }, + "description": "Slot for the action buttons.", + "name": "actions" + } + ], + "members": [ { "kind": "field", - "name": "warningAriaLabel", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" - }, + "description": "Title text", + "attribute": "titleText" + } + ], + "attributes": [ { - "kind": "field", - "name": "warningTitle", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "renderValidationMessage", - "privacy": "private", - "parameters": [ - { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_handleClear", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "getDateRangePickerClasses" - }, - { - "kind": "method", - "name": "reinitializeFlatpickr", - "privacy": "private" - }, + "description": "Title text", + "fieldName": "titleText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-error-block", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "ErrorBlock", + "declaration": { + "name": "ErrorBlock", + "module": "src/components/reusable/errorBlock/errorBlock.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-error-block", + "declaration": { + "name": "ErrorBlock", + "module": "src/components/reusable/errorBlock/errorBlock.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/errorBlock/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "ErrorBlock", + "declaration": { + "name": "ErrorBlock", + "module": "./errorBlock" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/globalFilter/globalFilter.ts", + "declarations": [ + { + "kind": "class", + "description": "Global Filter bar.", + "name": "GlobalFilter", + "slots": [ { - "kind": "method", - "name": "setupAnchor", - "privacy": "private" + "description": "Left slot, intended for search input and modal.", + "name": "unnamed" }, { - "kind": "method", - "name": "initializeFlatpickr", - "privacy": "private" + "description": "Right slot, intended for action buttons and overflow menu.", + "name": "actions" }, { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } - }, + "description": "Slot below the filter bar, for tag group.", + "name": "tags" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-global-filter", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "GlobalFilter", + "declaration": { + "name": "GlobalFilter", + "module": "src/components/reusable/globalFilter/globalFilter.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-global-filter", + "declaration": { + "name": "GlobalFilter", + "module": "src/components/reusable/globalFilter/globalFilter.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/globalFilter/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "GlobalFilter", + "declaration": { + "name": "GlobalFilter", + "module": "./globalFilter" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/inlineCodeView/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "InlineCodeView", + "declaration": { + "name": "InlineCodeView", + "module": "./inlineCodeView" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/inlineCodeView/inlineCodeView.ts", + "declarations": [ + { + "kind": "class", + "description": "`` component to display code snippets inline within HTML content.", + "name": "InlineCodeView", + "slots": [ { - "kind": "method", - "name": "updateFlatpickrOptions" - }, + "description": "inline code snippet slot.", + "name": "unnamed" + } + ], + "members": [ { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - } + "kind": "field", + "name": "darkTheme", + "type": { + "text": "'light' | 'dark'" + }, + "default": "'dark'", + "description": "Sets background and text theming.", + "attribute": "darkTheme" }, { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } - }, + "kind": "field", + "name": "snippetFontSize", + "type": { + "text": "number" + }, + "default": "14", + "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", + "attribute": "snippetFontSize" + } + ], + "attributes": [ { - "kind": "method", - "name": "handleDateChange", - "return": { - "type": { - "text": "Promise" - } + "name": "darkTheme", + "type": { + "text": "'light' | 'dark'" }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - } - ] + "default": "'dark'", + "description": "Sets background and text theming.", + "fieldName": "darkTheme" }, { - "kind": "method", - "name": "handleClose" - }, + "name": "snippetFontSize", + "type": { + "text": "number" + }, + "default": "14", + "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", + "fieldName": "snippetFontSize" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-inline-code-view", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "InlineCodeView", + "declaration": { + "name": "InlineCodeView", + "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-inline-code-view", + "declaration": { + "name": "InlineCodeView", + "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Loader", + "declaration": { + "name": "Loader", + "module": "./loader" + } + }, + { + "kind": "js", + "name": "LoaderInline", + "declaration": { + "name": "LoaderInline", + "module": "./inline" + } + }, + { + "kind": "js", + "name": "Skeleton", + "declaration": { + "name": "Skeleton", + "module": "./skeleton" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/inline.ts", + "declarations": [ + { + "kind": "class", + "description": "Inline Loader.", + "name": "LoaderInline", + "slots": [ { - "kind": "method", - "name": "updateSelectedDateRangeAria", - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - } - ] - }, + "description": "Slot for text/description.", + "name": "unnamed" + } + ], + "members": [ { - "kind": "method", - "name": "setShouldFlatpickrOpen", - "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "boolean" - } - } - ] + "kind": "field", + "name": "status", + "type": { + "text": "string" + }, + "default": "'active'", + "description": "Status. Can be `active`, `inactive`, `success`, `error`.", + "attribute": "status" }, { "kind": "method", - "name": "closeFlatpickr", + "name": "_emitStart", "privacy": "private" }, { "kind": "method", - "name": "preventFlatpickrOpen", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "handleInputClickEvent", + "name": "_emitStop", "privacy": "private" + } + ], + "events": [ + { + "description": "Emits when the loader been started.", + "name": "on-start" }, { - "kind": "method", - "name": "handleInputFocusEvent", - "privacy": "private" + "description": "Emits when the loader has been stopped and all animations have completed.", + "name": "on-stop" + } + ], + "attributes": [ + { + "name": "status", + "type": { + "text": "string" + }, + "default": "'active'", + "description": "Status. Can be `active`, `inactive`, `success`, `error`.", + "fieldName": "status" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-loader-inline", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "LoaderInline", + "declaration": { + "name": "LoaderInline", + "module": "src/components/reusable/loaders/inline.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-loader-inline", + "declaration": { + "name": "LoaderInline", + "module": "src/components/reusable/loaders/inline.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/loader.ts", + "declarations": [ + { + "kind": "class", + "description": "Loader.", + "name": "Loader", + "members": [ + { + "kind": "field", + "name": "stopped", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Animation stopped state", + "attribute": "stopped" }, { - "kind": "method", - "name": "_validate", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "kind": "field", + "name": "overlay", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "interacted", - "type": { - "text": "boolean" - } - }, - { - "name": "report", - "type": { - "text": "boolean" - } - } - ] + "default": "false", + "description": "Display the loader as an overlay", + "attribute": "overlay" }, { "kind": "method", - "name": "_onChange", + "name": "_emitStart", "privacy": "private" }, { "kind": "method", - "name": "_handleFormReset", + "name": "_emitStop", "privacy": "private" } ], "events": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" + "description": "Emits when the loader been started.", + "name": "on-start" + }, + { + "description": "Emits when the loader has been stopped and all animations have completed.", + "name": "on-stop" } ], "attributes": [ { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets and dynamically imports specific l10n calendar localization.", - "fieldName": "locale" - }, - { - "name": "dateFormat", - "type": { - "text": "string" - }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "fieldName": "dateFormat" - }, - { - "name": "defaultDate", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets the initial selected date(s)", - "fieldName": "defaultDate" - }, - { - "name": "defaultErrorMessage", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" - }, - { - "name": "value", + "name": "stopped", "type": { - "text": "[Date | null, Date | null]" + "text": "boolean" }, - "default": "[null, null]", - "description": "Sets date/time range value.", - "fieldName": "value" + "default": "false", + "description": "Animation stopped state", + "fieldName": "stopped" }, { - "name": "warnText", + "name": "overlay", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" - }, + "default": "false", + "description": "Display the loader as an overlay", + "fieldName": "overlay" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-loader", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Loader", + "declaration": { + "name": "Loader", + "module": "src/components/reusable/loaders/loader.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-loader", + "declaration": { + "name": "Loader", + "module": "src/components/reusable/loaders/loader.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/skeleton.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "Skeleton", + "members": [ { - "name": "disable", + "kind": "field", + "name": "shape", "type": { - "text": "(string | number | Date)[]" + "text": "'rectangle' | 'circle'" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "fieldName": "disable" + "default": "'rectangle'", + "description": "Defines the shape of the skeleton element.", + "attribute": "shape", + "reflects": true }, { - "name": "enable", + "kind": "field", + "name": "size", "type": { - "text": "(string | number | Date)[]" + "text": "'small' | 'medium' | 'large' | undefined" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "fieldName": "enable" + "description": "Optional: Predefined size (small, medium, large).", + "attribute": "size" }, { - "name": "caption", + "kind": "field", + "name": "width", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "description": "Optional: Custom width (overrides size if provided).", + "attribute": "width" }, { - "name": "required", + "kind": "field", + "name": "height", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Sets date range picker form input value to required/required.", - "fieldName": "required" + "description": "Optional: Custom height (overrides size if provided).", + "attribute": "height" }, { - "name": "size", + "kind": "field", + "name": "lines", "type": { - "text": "string" + "text": "number" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "default": "1", + "description": "Sets the number of skeleton lines to display.", + "attribute": "lines" }, { - "name": "dateRangePickerDisabled", + "kind": "field", + "name": "inline", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire date range picker form element to enabled/disabled.", - "fieldName": "dateRangePickerDisabled" + "description": "Sets whether to display inline or block.", + "attribute": "inline" }, { - "name": "twentyFourHourFormat", + "kind": "field", + "name": "shade", "type": { - "text": "boolean | null" + "text": "'light' | 'dark' | string" }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-` locales and 24H for all other locales.", - "fieldName": "twentyFourHourFormat" - }, + "default": "'light'", + "description": "Defines the shade of the skeleton.", + "attribute": "shade" + } + ], + "attributes": [ { - "name": "minDate", + "name": "shape", "type": { - "text": "string | number | Date" + "text": "'rectangle' | 'circle'" }, - "default": "''", - "description": "Sets lower boundary of date range picker date selection.", - "fieldName": "minDate" + "default": "'rectangle'", + "description": "Defines the shape of the skeleton element.", + "fieldName": "shape" }, { - "name": "maxDate", + "name": "size", "type": { - "text": "string | number | Date" + "text": "'small' | 'medium' | 'large' | undefined" }, - "default": "''", - "description": "Sets upper boundary of date range picker date selection.", - "fieldName": "maxDate" + "description": "Optional: Predefined size (small, medium, large).", + "fieldName": "size" }, { - "name": "errorAriaLabel", + "name": "width", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" + "description": "Optional: Custom width (overrides size if provided).", + "fieldName": "width" }, { - "name": "errorTitle", + "name": "height", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "description": "Optional: Custom height (overrides size if provided).", + "fieldName": "height" }, { - "name": "warningAriaLabel", + "name": "lines", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "default": "1", + "description": "Sets the number of skeleton lines to display.", + "fieldName": "lines" }, { - "name": "warningTitle", + "name": "inline", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" + "default": "false", + "description": "Sets whether to display inline or block.", + "fieldName": "inline" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "name": "shade", + "type": { + "text": "'light' | 'dark' | string" + }, + "default": "'light'", + "description": "Defines the shade of the skeleton.", + "fieldName": "shade" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-date-range-picker", + "tagName": "kyn-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "DateRangePicker", + "name": "Skeleton", "declaration": { - "name": "DateRangePicker", - "module": "src/components/reusable/daterangepicker/daterangepicker.ts" + "name": "Skeleton", + "module": "src/components/reusable/loaders/skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-date-range-picker", + "name": "kyn-skeleton", "declaration": { - "name": "DateRangePicker", - "module": "src/components/reusable/daterangepicker/daterangepicker.ts" + "name": "Skeleton", + "module": "src/components/reusable/loaders/skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/daterangepicker/index.ts", + "path": "src/components/reusable/modal/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "DateRangePicker", + "name": "Modal", "declaration": { - "name": "DateRangePicker", - "module": "./daterangepicker" + "name": "Modal", + "module": "./modal" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/datePicker/datepicker.ts", + "path": "src/components/reusable/modal/modal.ts", "declarations": [ { "kind": "class", - "description": "Datepicker: uses Flatpickr's datetime picker library -- `https://flatpickr.js.org`", - "name": "DatePicker", + "description": "Modal.", + "name": "Modal", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for modal body content.", + "name": "unnamed" + }, + { + "description": "Slot for the anchor button content.", + "name": "anchor" } ], "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "attribute": "locale" - }, - { - "kind": "field", - "name": "dateFormat", - "type": { - "text": "string" - }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "attribute": "dateFormat" - }, - { - "kind": "field", - "name": "defaultDate", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets the initial selected date(s)", - "attribute": "defaultDate" - }, - { - "kind": "field", - "name": "defaultErrorMessage", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" - }, - { - "kind": "field", - "name": "required", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", - "attribute": "required" + "description": "Modal open state.", + "attribute": "open" }, { "kind": "field", @@ -4998,173 +4221,156 @@ "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", + "default": "'auto'", + "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", "attribute": "size" }, { "kind": "field", - "name": "value", - "type": { - "text": "Date | Date[] | null" - }, - "default": "null", - "description": "Sets pre-selected date/time value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "warnText", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" + "description": "Title/heading text, required.", + "attribute": "titleText" }, { "kind": "field", - "name": "disable", + "name": "labelText", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "attribute": "disable" + "default": "''", + "description": "Label text, optional.", + "attribute": "labelText" }, { "kind": "field", - "name": "enable", + "name": "okText", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "attribute": "enable" + "default": "'OK'", + "description": "OK button text.", + "attribute": "okText" }, { "kind": "field", - "name": "mode", + "name": "cancelText", "type": { - "text": "'single' | 'multiple'" + "text": "string" }, - "default": "'single'", - "description": "Sets flatpickr mode to select single (default), multiple dates.", - "attribute": "mode" + "default": "'Cancel'", + "description": "Cancel button text.", + "attribute": "cancelText" }, { "kind": "field", - "name": "caption", + "name": "destructive", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "attribute": "destructive" }, { "kind": "field", - "name": "datePickerDisabled", + "name": "okDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "attribute": "datePickerDisabled" + "description": "Disables the primary button.", + "attribute": "okDisabled" }, { "kind": "field", - "name": "twentyFourHourFormat", + "name": "secondaryDisabled", "type": { - "text": "boolean | null" + "text": "boolean" }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "attribute": "twentyFourHourFormat" + "default": "false", + "description": "Disables the secondary button.", + "attribute": "secondaryDisabled" }, { "kind": "field", - "name": "minDate", + "name": "hideFooter", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "attribute": "minDate" + "default": "false", + "description": "Hides the footer/action buttons to create a passive modal.", + "attribute": "hideFooter" }, { "kind": "field", - "name": "maxDate", + "name": "secondaryButtonText", "type": { - "text": "string | number | Date" + "text": "string" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "attribute": "maxDate" + "default": "'Secondary'", + "description": "Secondary button text.", + "attribute": "secondaryButtonText" }, { "kind": "field", - "name": "errorAriaLabel", + "name": "showSecondaryButton", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "default": "false", + "description": "Hides the secondary button.", + "attribute": "showSecondaryButton" }, { "kind": "field", - "name": "errorTitle", + "name": "hideCancelButton", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "default": "false", + "description": "Hides the cancel button.", + "attribute": "hideCancelButton" }, { "kind": "field", - "name": "warningAriaLabel", + "name": "beforeClose", "type": { - "text": "string" + "text": "Function" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "description": "Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." }, { "kind": "field", - "name": "warningTitle", + "name": "closeText", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" + "default": "'Close'", + "description": "Close button text.", + "attribute": "closeText" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "kind": "method", + "name": "_openModal", + "privacy": "private" }, { "kind": "method", - "name": "renderValidationMessage", + "name": "_closeModal", "privacy": "private", "parameters": [ { - "name": "errorId", + "name": "e", "type": { - "text": "string" + "text": "Event" } }, { - "name": "warningId", + "name": "returnValue", "type": { "text": "string" } @@ -5173,1119 +4379,998 @@ }, { "kind": "method", - "name": "getDatepickerClasses" - }, - { - "kind": "method", - "name": "reinitializeFlatpickr", - "privacy": "private" - }, - { - "kind": "method", - "name": "setupAnchor", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleClear", + "name": "_emitCloseEvent", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { "text": "Event" } } ] - }, - { - "kind": "method", - "name": "initializeFlatpickr", - "return": { - "type": { - "text": "Promise" - } - } - }, + } + ], + "events": [ { - "kind": "method", - "name": "updateFlatpickrOptions", - "return": { - "type": { - "text": "Promise" - } - } - }, + "description": "Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).", + "name": "on-close" + } + ], + "attributes": [ { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - } + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Modal open state.", + "fieldName": "open" }, { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } + "name": "size", + "type": { + "text": "string" + }, + "default": "'auto'", + "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", + "fieldName": "size" }, { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } + "name": "titleText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Title/heading text, required.", + "fieldName": "titleText" }, { - "kind": "method", - "name": "handleClose", - "return": { - "type": { - "text": "Promise" - } - } + "name": "labelText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text, optional.", + "fieldName": "labelText" }, { - "kind": "method", - "name": "handleDateChange", - "return": { - "type": { - "text": "Promise" - } + "name": "okText", + "type": { + "text": "string" }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - }, - { - "name": "dateStr", - "type": { - "text": "string" - } - } - ] + "default": "'OK'", + "description": "OK button text.", + "fieldName": "okText" }, { - "kind": "method", - "name": "setShouldFlatpickrOpen", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "name": "cancelText", + "type": { + "text": "string" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "boolean" - } - } - ] + "default": "'Cancel'", + "description": "Cancel button text.", + "fieldName": "cancelText" }, { - "kind": "method", - "name": "closeFlatpickr", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - } + "name": "destructive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "fieldName": "destructive" }, { - "kind": "method", - "name": "preventFlatpickrOpen", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "name": "okDisabled", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] + "default": "false", + "description": "Disables the primary button.", + "fieldName": "okDisabled" }, { - "kind": "method", - "name": "handleInputClickEvent", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - } + "name": "secondaryDisabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disables the secondary button.", + "fieldName": "secondaryDisabled" }, { - "kind": "method", - "name": "handleInputFocusEvent", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - } + "name": "hideFooter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the footer/action buttons to create a passive modal.", + "fieldName": "hideFooter" }, { - "kind": "method", - "name": "_validate", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "name": "secondaryButtonText", + "type": { + "text": "string" + }, + "default": "'Secondary'", + "description": "Secondary button text.", + "fieldName": "secondaryButtonText" + }, + { + "name": "showSecondaryButton", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "interacted", - "type": { - "text": "boolean" - } - }, - { - "name": "report", - "type": { - "text": "boolean" - } - } - ] + "default": "false", + "description": "Hides the secondary button.", + "fieldName": "showSecondaryButton" }, { - "kind": "method", - "name": "_onChange", - "privacy": "private" + "name": "hideCancelButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the cancel button.", + "fieldName": "hideCancelButton" }, { - "kind": "method", - "name": "_handleFormReset", - "privacy": "private" + "name": "closeText", + "type": { + "text": "string" + }, + "default": "'Close'", + "description": "Close button text.", + "fieldName": "closeText" } ], - "events": [ + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-modal", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Modal", + "declaration": { + "name": "Modal", + "module": "src/components/reusable/modal/modal.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-modal", + "declaration": { + "name": "Modal", + "module": "src/components/reusable/modal/modal.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/notification/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Notification", + "declaration": { + "name": "Notification", + "module": "./notification" + } + }, + { + "kind": "js", + "name": "NotificationContainer", + "declaration": { + "name": "NotificationContainer", + "module": "./notificationContainer" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/notification/notification.ts", + "declarations": [ + { + "kind": "class", + "description": "Notification component.", + "name": "Notification", + "slots": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" + "description": "Slot for notification message body.", + "name": "unnamed" + }, + { + "description": "Slot for menu.", + "name": "actions" } ], - "attributes": [ + "members": [ { - "name": "label", + "kind": "field", + "name": "notificationTitle", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "fieldName": "label" + "description": "Notification Title (Required).", + "attribute": "notificationTitle" }, { - "name": "locale", + "kind": "field", + "name": "notificationSubtitle", "type": { - "text": "SupportedLocale" + "text": "string" }, - "default": "'en'", - "fieldName": "locale" + "default": "''", + "description": "Notification subtitle.(optional)", + "attribute": "notificationSubtitle" }, { - "name": "dateFormat", + "kind": "field", + "name": "timeStamp", "type": { "text": "string" }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "fieldName": "dateFormat" + "default": "''", + "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", + "attribute": "timeStamp" }, { - "name": "defaultDate", + "kind": "field", + "name": "href", "type": { - "text": "Date | null" + "text": "string" }, - "default": "null", - "description": "Sets the initial selected date(s)", - "fieldName": "defaultDate" + "default": "''", + "description": "Card href link", + "attribute": "href" }, { - "name": "defaultErrorMessage", + "kind": "field", + "name": "tagStatus", "type": { "text": "string" }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "default": "'default'", + "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", + "attribute": "tagStatus" }, { - "name": "required", + "kind": "field", + "name": "type", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Sets datepicker form input value to required/required.", - "fieldName": "required" + "default": "'normal'", + "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", + "attribute": "type" }, { - "name": "size", + "kind": "field", + "name": "textStrings", "type": { - "text": "string" + "text": "any" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", + "description": "Customizable text strings.", + "attribute": "textStrings" }, { - "name": "value", + "kind": "field", + "name": "closeBtnDescription", "type": { - "text": "Date | Date[] | null" + "text": "string" }, - "default": "null", - "description": "Sets pre-selected date/time value.", - "fieldName": "value" + "default": "'Close'", + "description": "Close button description (Required to support accessibility).", + "attribute": "closeBtnDescription" }, { - "name": "warnText", + "kind": "field", + "name": "assistiveNotificationTypeText", "type": { "text": "string" }, "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" + "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", + "attribute": "assistiveNotificationTypeText" }, { - "name": "disable", + "kind": "field", + "name": "notificationRole", "type": { - "text": "(string | number | Date)[]" + "text": "'alert' | 'log' | 'status' | undefined" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "fieldName": "disable" + "description": "Notification role (Required to support accessibility).", + "attribute": "notificationRole" }, { - "name": "enable", + "kind": "field", + "name": "statusLabel", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "fieldName": "enable" + "default": "'Status'", + "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", + "attribute": "statusLabel" }, { - "name": "mode", + "kind": "field", + "name": "unRead", "type": { - "text": "'single' | 'multiple'" + "text": "boolean" }, - "default": "'single'", - "description": "Sets flatpickr mode to select single (default), multiple dates.", - "fieldName": "mode" + "default": "false", + "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", + "attribute": "unRead", + "reflects": true + }, + { + "kind": "field", + "name": "hideCloseButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", + "attribute": "hideCloseButton" + }, + { + "kind": "field", + "name": "timeout", + "type": { + "text": "number" + }, + "default": "8", + "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", + "attribute": "timeout" + }, + { + "kind": "method", + "name": "renderInnerUI", + "privacy": "private" }, { - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "kind": "method", + "name": "_close", + "privacy": "private" }, { - "name": "datePickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "fieldName": "datePickerDisabled" + "kind": "method", + "name": "_handleClose", + "privacy": "private" }, { - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "fieldName": "twentyFourHourFormat" + "kind": "method", + "name": "_handleCardClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Emit event for clickable notification.", + "name": "on-notification-click" }, { - "name": "minDate", + "description": "Emits when an inline/toast notification closes.", + "name": "on-close" + } + ], + "attributes": [ + { + "name": "notificationTitle", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "fieldName": "minDate" + "description": "Notification Title (Required).", + "fieldName": "notificationTitle" }, { - "name": "maxDate", + "name": "notificationSubtitle", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "fieldName": "maxDate" + "description": "Notification subtitle.(optional)", + "fieldName": "notificationSubtitle" }, { - "name": "errorAriaLabel", + "name": "timeStamp", "type": { "text": "string" }, "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" + "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", + "fieldName": "timeStamp" }, { - "name": "errorTitle", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "description": "Card href link", + "fieldName": "href" }, { - "name": "warningAriaLabel", + "name": "tagStatus", "type": { "text": "string" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "default": "'default'", + "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", + "fieldName": "tagStatus" }, { - "name": "warningTitle", + "name": "type", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" + "default": "'normal'", + "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", + "fieldName": "type" }, { "name": "textStrings", - "default": "_defaultTextStrings", + "type": { + "text": "any" + }, + "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", "description": "Customizable text strings.", "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-date-picker", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "DatePicker", - "declaration": { - "name": "DatePicker", - "module": "src/components/reusable/datePicker/datepicker.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-date-picker", - "declaration": { - "name": "DatePicker", - "module": "src/components/reusable/datePicker/datepicker.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/datePicker/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "DatePicker", - "declaration": { - "name": "DatePicker", - "module": "./datepicker" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/errorBlock/errorBlock.ts", - "declarations": [ - { - "kind": "class", - "description": "Error block.", - "name": "ErrorBlock", - "slots": [ - { - "description": "Slot for the error description.", - "name": "unnamed" }, { - "description": "Slot for the error image.", - "name": "image" + "name": "closeBtnDescription", + "type": { + "text": "string" + }, + "default": "'Close'", + "description": "Close button description (Required to support accessibility).", + "fieldName": "closeBtnDescription" }, { - "description": "Slot for the action buttons.", - "name": "actions" - } - ], - "members": [ - { - "kind": "field", - "name": "titleText", + "name": "assistiveNotificationTypeText", "type": { "text": "string" }, "default": "''", - "description": "Title text", - "attribute": "titleText" - } - ], - "attributes": [ + "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", + "fieldName": "assistiveNotificationTypeText" + }, { - "name": "titleText", + "name": "notificationRole", + "type": { + "text": "'alert' | 'log' | 'status' | undefined" + }, + "description": "Notification role (Required to support accessibility).", + "fieldName": "notificationRole" + }, + { + "name": "statusLabel", "type": { "text": "string" }, - "default": "''", - "description": "Title text", - "fieldName": "titleText" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-error-block", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "ErrorBlock", - "declaration": { - "name": "ErrorBlock", - "module": "src/components/reusable/errorBlock/errorBlock.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-error-block", - "declaration": { - "name": "ErrorBlock", - "module": "src/components/reusable/errorBlock/errorBlock.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/errorBlock/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "ErrorBlock", - "declaration": { - "name": "ErrorBlock", - "module": "./errorBlock" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/globalFilter/globalFilter.ts", - "declarations": [ - { - "kind": "class", - "description": "Global Filter bar.", - "name": "GlobalFilter", - "slots": [ + "default": "'Status'", + "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", + "fieldName": "statusLabel" + }, { - "description": "Left slot, intended for search input and modal.", - "name": "unnamed" + "name": "unRead", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", + "fieldName": "unRead" }, { - "description": "Right slot, intended for action buttons and overflow menu.", - "name": "actions" + "name": "hideCloseButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", + "fieldName": "hideCloseButton" }, { - "description": "Slot below the filter bar, for tag group.", - "name": "tags" + "name": "timeout", + "type": { + "text": "number" + }, + "default": "8", + "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", + "fieldName": "timeout" } ], - "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-global-filter", + "tagName": "kyn-notification", "customElement": true } ], "exports": [ { "kind": "js", - "name": "GlobalFilter", + "name": "Notification", "declaration": { - "name": "GlobalFilter", - "module": "src/components/reusable/globalFilter/globalFilter.ts" + "name": "Notification", + "module": "src/components/reusable/notification/notification.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-global-filter", - "declaration": { - "name": "GlobalFilter", - "module": "src/components/reusable/globalFilter/globalFilter.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/globalFilter/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "GlobalFilter", - "declaration": { - "name": "GlobalFilter", - "module": "./globalFilter" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/inlineCodeView/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "InlineCodeView", + "name": "kyn-notification", "declaration": { - "name": "InlineCodeView", - "module": "./inlineCodeView" + "name": "Notification", + "module": "src/components/reusable/notification/notification.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/inlineCodeView/inlineCodeView.ts", + "path": "src/components/reusable/notification/notificationContainer.ts", "declarations": [ { "kind": "class", - "description": "`` component to display code snippets inline within HTML content.", - "name": "InlineCodeView", + "description": "Notification container component for Toast notification.\nUsage is limited for ..", + "name": "NotificationContainer", "slots": [ { - "description": "inline code snippet slot.", + "description": "Slot for component.", "name": "unnamed" } ], - "members": [ - { - "kind": "field", - "name": "darkTheme", - "type": { - "text": "'light' | 'dark'" - }, - "default": "'dark'", - "description": "Sets background and text theming.", - "attribute": "darkTheme" - }, - { - "kind": "field", - "name": "snippetFontSize", - "type": { - "text": "number" - }, - "default": "14", - "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", - "attribute": "snippetFontSize" - } - ], - "attributes": [ - { - "name": "darkTheme", - "type": { - "text": "'light' | 'dark'" - }, - "default": "'dark'", - "description": "Sets background and text theming.", - "fieldName": "darkTheme" - }, - { - "name": "snippetFontSize", - "type": { - "text": "number" - }, - "default": "14", - "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", - "fieldName": "snippetFontSize" - } - ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-inline-code-view", + "tagName": "kyn-notification-container", "customElement": true } ], "exports": [ { "kind": "js", - "name": "InlineCodeView", + "name": "NotificationContainer", "declaration": { - "name": "InlineCodeView", - "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + "name": "NotificationContainer", + "module": "src/components/reusable/notification/notificationContainer.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-inline-code-view", + "name": "kyn-notification-container", "declaration": { - "name": "InlineCodeView", - "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + "name": "NotificationContainer", + "module": "src/components/reusable/notification/notificationContainer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/loaders/index.ts", + "path": "src/components/reusable/numberInput/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Loader", - "declaration": { - "name": "Loader", - "module": "./loader" - } - }, - { - "kind": "js", - "name": "LoaderInline", - "declaration": { - "name": "LoaderInline", - "module": "./inline" - } - }, - { - "kind": "js", - "name": "Skeleton", + "name": "NumberInput", "declaration": { - "name": "Skeleton", - "module": "./skeleton" + "name": "NumberInput", + "module": "./numberInput" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/loaders/inline.ts", + "path": "src/components/reusable/numberInput/numberInput.ts", "declarations": [ { "kind": "class", - "description": "Inline Loader.", - "name": "LoaderInline", + "description": "Number input.", + "name": "NumberInput", "slots": [ { - "description": "Slot for text/description.", - "name": "unnamed" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "status", + "name": "label", "type": { "text": "string" }, - "default": "'active'", - "description": "Status. Can be `active`, `inactive`, `success`, `error`.", - "attribute": "status" - }, - { - "kind": "method", - "name": "_emitStart", - "privacy": "private" + "default": "''", + "description": "Label text.", + "attribute": "label" }, { - "kind": "method", - "name": "_emitStop", - "privacy": "private" - } - ], - "events": [ - { - "description": "Emits when the loader been started.", - "name": "on-start" + "kind": "field", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { - "description": "Emits when the loader has been stopped and all animations have completed.", - "name": "on-stop" - } - ], - "attributes": [ - { - "name": "status", + "kind": "field", + "name": "value", "type": { - "text": "string" + "text": "number" }, - "default": "'active'", - "description": "Status. Can be `active`, `inactive`, `success`, `error`.", - "fieldName": "status" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-loader-inline", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "LoaderInline", - "declaration": { - "name": "LoaderInline", - "module": "src/components/reusable/loaders/inline.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-loader-inline", - "declaration": { - "name": "LoaderInline", - "module": "src/components/reusable/loaders/inline.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/loaders/loader.ts", - "declarations": [ - { - "kind": "class", - "description": "Loader.", - "name": "Loader", - "members": [ + "default": "0", + "description": "Input value.", + "attribute": "value" + }, { "kind": "field", - "name": "stopped", + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "attribute": "placeholder" + }, + { + "kind": "field", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Animation stopped state", - "attribute": "stopped" + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "overlay", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Display the loader as an overlay", - "attribute": "overlay" + "description": "Input disabled state.", + "attribute": "disabled" }, { - "kind": "method", - "name": "_emitStart", - "privacy": "private" + "kind": "field", + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" }, { - "kind": "method", - "name": "_emitStop", - "privacy": "private" - } - ], - "events": [ - { - "description": "Emits when the loader been started.", - "name": "on-start" + "kind": "field", + "name": "max", + "type": { + "text": "number" + }, + "description": "Maximum value.", + "attribute": "max" }, { - "description": "Emits when the loader has been stopped and all animations have completed.", - "name": "on-stop" - } - ], - "attributes": [ + "kind": "field", + "name": "min", + "type": { + "text": "number" + }, + "description": "Minimum value.", + "attribute": "min" + }, { - "name": "stopped", + "kind": "field", + "name": "step", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Animation stopped state", - "fieldName": "stopped" + "default": "1", + "description": "Step value.", + "attribute": "step" }, { - "name": "overlay", + "kind": "field", + "name": "hideLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Display the loader as an overlay", - "fieldName": "overlay" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-loader", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Loader", - "declaration": { - "name": "Loader", - "module": "src/components/reusable/loaders/loader.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-loader", - "declaration": { - "name": "Loader", - "module": "src/components/reusable/loaders/loader.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/loaders/skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "Skeleton", - "members": [ + "description": "Visually hide the label.", + "attribute": "hideLabel" + }, { "kind": "field", - "name": "shape", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n subtract: 'Subtract',\n add: 'Add',\n error: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", "type": { - "text": "'rectangle' | 'circle'" + "text": "object" + } + }, + { + "kind": "method", + "name": "_sizeMap", + "privacy": "private", + "return": { + "type": { + "text": "'small' | 'medium' | 'large'" + } }, - "default": "'rectangle'", - "description": "Defines the shape of the skeleton element.", - "attribute": "shape", - "reflects": true + "parameters": [ + { + "name": "size", + "type": { + "text": "string" + } + } + ] }, { - "kind": "field", - "name": "size", + "kind": "method", + "name": "_handleSubtract", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleAdd", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleInput", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_emitValue", + "privacy": "private", + "parameters": [ + { + "name": "e", + "optional": true, + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the input event and emits the value and original event details.", + "name": "on-input" + } + ], + "attributes": [ + { + "name": "label", "type": { - "text": "'small' | 'medium' | 'large' | undefined" + "text": "string" }, - "description": "Optional: Predefined size (small, medium, large).", - "attribute": "size" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "kind": "field", - "name": "width", + "name": "size", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Optional: Custom width (overrides size if provided).", - "attribute": "width" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "kind": "field", - "name": "height", + "name": "value", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Optional: Custom height (overrides size if provided).", - "attribute": "height" + "default": "0", + "description": "Input value.", + "fieldName": "value" }, { - "kind": "field", - "name": "lines", + "name": "placeholder", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "description": "Sets the number of skeleton lines to display.", - "attribute": "lines" + "default": "''", + "description": "Input placeholder.", + "fieldName": "placeholder" }, { - "kind": "field", - "name": "inline", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Sets whether to display inline or block.", - "attribute": "inline" + "description": "Makes the input required.", + "fieldName": "required" }, { - "kind": "field", - "name": "shade", - "type": { - "text": "'light' | 'dark' | string" - }, - "default": "'light'", - "description": "Defines the shade of the skeleton.", - "attribute": "shade" - } - ], - "attributes": [ - { - "name": "shape", + "name": "disabled", "type": { - "text": "'rectangle' | 'circle'" + "text": "boolean" }, - "default": "'rectangle'", - "description": "Defines the shape of the skeleton element.", - "fieldName": "shape" + "default": "false", + "description": "Input disabled state.", + "fieldName": "disabled" }, { - "name": "size", + "name": "caption", "type": { - "text": "'small' | 'medium' | 'large' | undefined" + "text": "string" }, - "description": "Optional: Predefined size (small, medium, large).", - "fieldName": "size" + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "width", + "name": "max", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Optional: Custom width (overrides size if provided).", - "fieldName": "width" + "description": "Maximum value.", + "fieldName": "max" }, { - "name": "height", + "name": "min", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Optional: Custom height (overrides size if provided).", - "fieldName": "height" + "description": "Minimum value.", + "fieldName": "min" }, { - "name": "lines", + "name": "step", "type": { "text": "number" }, "default": "1", - "description": "Sets the number of skeleton lines to display.", - "fieldName": "lines" + "description": "Step value.", + "fieldName": "step" }, { - "name": "inline", + "name": "hideLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Sets whether to display inline or block.", - "fieldName": "inline" + "description": "Visually hide the label.", + "fieldName": "hideLabel" }, { - "name": "shade", - "type": { - "text": "'light' | 'dark' | string" - }, - "default": "'light'", - "description": "Defines the shade of the skeleton.", - "fieldName": "shade" + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-skeleton", + "tagName": "kyn-number-input", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Skeleton", + "name": "NumberInput", "declaration": { - "name": "Skeleton", - "module": "src/components/reusable/loaders/skeleton.ts" + "name": "NumberInput", + "module": "src/components/reusable/numberInput/numberInput.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-skeleton", + "name": "kyn-number-input", "declaration": { - "name": "Skeleton", - "module": "src/components/reusable/loaders/skeleton.ts" + "name": "NumberInput", + "module": "src/components/reusable/numberInput/numberInput.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/modal/index.ts", + "path": "src/components/reusable/overflowMenu/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Modal", + "name": "OverflowMenu", "declaration": { - "name": "Modal", - "module": "./modal" + "name": "OverflowMenu", + "module": "./overflowMenu" + } + }, + { + "kind": "js", + "name": "OverflowMenuItem", + "declaration": { + "name": "OverflowMenuItem", + "module": "./overflowMenuItem" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/modal/modal.ts", + "path": "src/components/reusable/overflowMenu/overflowMenu.ts", "declarations": [ { "kind": "class", - "description": "Modal.", - "name": "Modal", + "description": "Overflow Menu.", + "name": "OverflowMenu", "slots": [ { - "description": "Slot for modal body content.", + "description": "Slot for overflow menu items.", "name": "unnamed" - }, - { - "description": "Slot for the anchor button content.", - "name": "anchor" } ], "members": [ @@ -6296,155 +5381,67 @@ "text": "boolean" }, "default": "false", - "description": "Modal open state.", + "description": "Menu open state.", "attribute": "open" }, { "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'auto'", - "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", - "attribute": "size" - }, - { - "kind": "field", - "name": "titleText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Title/heading text, required.", - "attribute": "titleText" - }, - { - "kind": "field", - "name": "labelText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text, optional.", - "attribute": "labelText" - }, - { - "kind": "field", - "name": "okText", - "type": { - "text": "string" - }, - "default": "'OK'", - "description": "OK button text.", - "attribute": "okText" - }, - { - "kind": "field", - "name": "cancelText", - "type": { - "text": "string" - }, - "default": "'Cancel'", - "description": "Cancel button text.", - "attribute": "cancelText" - }, - { - "kind": "field", - "name": "destructive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "attribute": "destructive" - }, - { - "kind": "field", - "name": "okDisabled", + "name": "anchorRight", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the primary button.", - "attribute": "okDisabled" + "description": "Anchors the menu to the right of the button.", + "attribute": "anchorRight" }, { "kind": "field", - "name": "secondaryDisabled", + "name": "verticalDots", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the secondary button.", - "attribute": "secondaryDisabled" + "description": "3 dots vertical orientation.", + "attribute": "verticalDots" }, { "kind": "field", - "name": "hideFooter", + "name": "fixed", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the footer/action buttons to create a passive modal.", - "attribute": "hideFooter" + "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", + "attribute": "fixed" }, { "kind": "field", - "name": "secondaryButtonText", + "name": "assistiveText", "type": { "text": "string" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "attribute": "secondaryButtonText" - }, - { - "kind": "field", - "name": "showSecondaryButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the secondary button.", - "attribute": "showSecondaryButton" - }, - { - "kind": "field", - "name": "hideCancelButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the cancel button.", - "attribute": "hideCancelButton" + "default": "'Toggle Menu'", + "description": "Button assistive text..", + "attribute": "assistiveText" }, { - "kind": "field", - "name": "beforeClose", - "type": { - "text": "Function" - }, - "description": "Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." + "kind": "method", + "name": "_emitToggleEvent", + "privacy": "private" }, { - "kind": "field", - "name": "closeText", - "type": { - "text": "string" - }, - "default": "'Close'", - "description": "Close button text.", - "attribute": "closeText" + "kind": "method", + "name": "toggleMenu", + "privacy": "private" }, { "kind": "method", - "name": "_openModal", + "name": "_positionMenu", "privacy": "private" }, { "kind": "method", - "name": "_closeModal", + "name": "handleClickOut", "privacy": "private", "parameters": [ { @@ -6452,33 +5449,48 @@ "type": { "text": "Event" } - }, + } + ] + }, + { + "kind": "method", + "name": "handleEscapePress", + "privacy": "private", + "parameters": [ { - "name": "returnValue", + "name": "e", "type": { - "text": "string" + "text": "any" } } ] }, { "kind": "method", - "name": "_emitCloseEvent", + "name": "handleKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] + }, + { + "kind": "method", + "name": "getMenuItems" + }, + { + "kind": "method", + "name": "getMenu" } ], "events": [ { - "description": "Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).", - "name": "on-close" + "description": "Capture the open/close event and emits the new state.", + "name": "on-toggle" } ], "attributes": [ @@ -6488,1203 +5500,1494 @@ "text": "boolean" }, "default": "false", - "description": "Modal open state.", + "description": "Menu open state.", "fieldName": "open" }, { - "name": "size", + "name": "anchorRight", "type": { - "text": "string" + "text": "boolean" }, - "default": "'auto'", - "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", - "fieldName": "size" + "default": "false", + "description": "Anchors the menu to the right of the button.", + "fieldName": "anchorRight" }, { - "name": "titleText", + "name": "verticalDots", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Title/heading text, required.", - "fieldName": "titleText" + "default": "false", + "description": "3 dots vertical orientation.", + "fieldName": "verticalDots" }, { - "name": "labelText", + "name": "fixed", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text, optional.", - "fieldName": "labelText" + "default": "false", + "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", + "fieldName": "fixed" }, { - "name": "okText", + "name": "assistiveText", "type": { "text": "string" }, - "default": "'OK'", - "description": "OK button text.", - "fieldName": "okText" - }, + "default": "'Toggle Menu'", + "description": "Button assistive text..", + "fieldName": "assistiveText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-overflow-menu", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "OverflowMenu", + "declaration": { + "name": "OverflowMenu", + "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-overflow-menu", + "declaration": { + "name": "OverflowMenu", + "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/overflowMenu/overflowMenuItem.ts", + "declarations": [ + { + "kind": "class", + "description": "Overflow Menu.", + "name": "OverflowMenuItem", + "slots": [ { - "name": "cancelText", + "description": "Slot for item text.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "href", "type": { "text": "string" }, - "default": "'Cancel'", - "description": "Cancel button text.", - "fieldName": "cancelText" + "default": "''", + "description": "Makes the item a link.", + "attribute": "href" }, { + "kind": "field", "name": "destructive", "type": { "text": "boolean" }, "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "fieldName": "destructive" + "description": "Adds destructive styles.", + "attribute": "destructive" }, { - "name": "okDisabled", + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the primary button.", - "fieldName": "okDisabled" + "description": "Item disabled state.", + "attribute": "disabled" }, { - "name": "secondaryDisabled", + "kind": "field", + "name": "description", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Disables the secondary button.", - "fieldName": "secondaryDisabled" + "default": "''", + "description": "Item description text for screen reader's", + "attribute": "description" }, { - "name": "hideFooter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the footer/action buttons to create a passive modal.", - "fieldName": "hideFooter" + "kind": "method", + "name": "handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] }, { - "name": "secondaryButtonText", + "kind": "method", + "name": "handleKeyDown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "checkOverflow", + "privacy": "private" + } + ], + "events": [ + { + "description": "Captures the click event and emits the original event details.", + "name": "on-click" + } + ], + "attributes": [ + { + "name": "href", "type": { "text": "string" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "fieldName": "secondaryButtonText" + "default": "''", + "description": "Makes the item a link.", + "fieldName": "href" }, { - "name": "showSecondaryButton", + "name": "destructive", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the secondary button.", - "fieldName": "showSecondaryButton" + "description": "Adds destructive styles.", + "fieldName": "destructive" }, { - "name": "hideCancelButton", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the cancel button.", - "fieldName": "hideCancelButton" + "description": "Item disabled state.", + "fieldName": "disabled" }, { - "name": "closeText", + "name": "description", "type": { "text": "string" }, - "default": "'Close'", - "description": "Close button text.", - "fieldName": "closeText" + "default": "''", + "description": "Item description text for screen reader's", + "fieldName": "description" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-modal", + "tagName": "kyn-overflow-menu-item", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Modal", + "name": "OverflowMenuItem", "declaration": { - "name": "Modal", - "module": "src/components/reusable/modal/modal.ts" + "name": "OverflowMenuItem", + "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-modal", + "name": "kyn-overflow-menu-item", "declaration": { - "name": "Modal", - "module": "src/components/reusable/modal/modal.ts" + "name": "OverflowMenuItem", + "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/notification/index.ts", + "path": "src/components/reusable/pagetitle/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Notification", - "declaration": { - "name": "Notification", - "module": "./notification" - } - }, - { - "kind": "js", - "name": "NotificationContainer", + "name": "PageTitle", "declaration": { - "name": "NotificationContainer", - "module": "./notificationContainer" + "name": "PageTitle", + "module": "./pageTitle" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/notification/notification.ts", + "path": "src/components/reusable/pagetitle/pageTitle.ts", "declarations": [ { "kind": "class", - "description": "Notification component.", - "name": "Notification", + "description": "Page Title", + "name": "PageTitle", "slots": [ { - "description": "Slot for notification message body.", - "name": "unnamed" - }, - { - "description": "Slot for menu.", - "name": "actions" + "description": "Slot for icon. Use size 56 * 56 as per UX guidelines.", + "name": "icon" } ], "members": [ { "kind": "field", - "name": "notificationTitle", + "name": "headLine", "type": { "text": "string" }, "default": "''", - "description": "Notification Title (Required).", - "attribute": "notificationTitle" + "description": "Headline text.", + "attribute": "headLine" }, { "kind": "field", - "name": "notificationSubtitle", + "name": "pageTitle", "type": { "text": "string" }, "default": "''", - "description": "Notification subtitle.(optional)", - "attribute": "notificationSubtitle" + "description": "Page title text (required).", + "attribute": "pageTitle" }, { "kind": "field", - "name": "timeStamp", + "name": "subTitle", "type": { "text": "string" }, "default": "''", - "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", - "attribute": "timeStamp" + "description": "Page subtitle text.", + "attribute": "subTitle" }, { "kind": "field", - "name": "href", + "name": "type", + "type": { + "text": "string" + }, + "default": "'primary'", + "description": "Type of page title `'primary'` & `'secondary'`.", + "attribute": "type" + } + ], + "attributes": [ + { + "name": "headLine", "type": { "text": "string" }, "default": "''", - "description": "Card href link", - "attribute": "href" + "description": "Headline text.", + "fieldName": "headLine" }, { - "kind": "field", - "name": "tagStatus", + "name": "pageTitle", "type": { "text": "string" }, - "default": "'default'", - "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", - "attribute": "tagStatus" + "default": "''", + "description": "Page title text (required).", + "fieldName": "pageTitle" }, { - "kind": "field", - "name": "type", + "name": "subTitle", "type": { "text": "string" }, - "default": "'normal'", - "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", - "attribute": "type" + "default": "''", + "description": "Page subtitle text.", + "fieldName": "subTitle" }, + { + "name": "type", + "type": { + "text": "string" + }, + "default": "'primary'", + "description": "Type of page title `'primary'` & `'secondary'`.", + "fieldName": "type" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-page-title", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "PageTitle", + "declaration": { + "name": "PageTitle", + "module": "src/components/reusable/pagetitle/pageTitle.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-page-title", + "declaration": { + "name": "PageTitle", + "module": "src/components/reusable/pagetitle/pageTitle.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/pagination/Pagination.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-pagination` Web Component.\n\nA component that provides pagination functionality, enabling the user to\nnavigate through large datasets by splitting them into discrete chunks.\nIntegrates with other utility components like items range display, page size dropdown,\nand navigation buttons.", + "name": "Pagination", + "members": [ { "kind": "field", - "name": "textStrings", + "name": "count", "type": { - "text": "any" + "text": "number" }, - "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", - "description": "Customizable text strings.", - "attribute": "textStrings" + "default": "0", + "description": "Total number of items that need pagination.", + "attribute": "count", + "reflects": true }, { "kind": "field", - "name": "closeBtnDescription", + "name": "pageNumber", "type": { - "text": "string" + "text": "number" }, - "default": "'Close'", - "description": "Close button description (Required to support accessibility).", - "attribute": "closeBtnDescription" + "default": "1", + "description": "Current active page number.", + "attribute": "pageNumber", + "reflects": true }, { "kind": "field", - "name": "assistiveNotificationTypeText", + "name": "pageSize", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", - "attribute": "assistiveNotificationTypeText" + "default": "5", + "description": "Number of items displayed per page.", + "attribute": "pageSize", + "reflects": true }, { "kind": "field", - "name": "notificationRole", + "name": "pageSizeOptions", "type": { - "text": "'alert' | 'log' | 'status' | undefined" + "text": "number[]" }, - "description": "Notification role (Required to support accessibility).", - "attribute": "notificationRole" + "default": "[5, 10, 20, 30, 40, 50, 100]", + "description": "Available options for the page size.", + "attribute": "pageSizeOptions" }, { "kind": "field", - "name": "statusLabel", + "name": "_numberOfPages", "type": { - "text": "string" + "text": "number" }, - "default": "'Status'", - "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", - "attribute": "statusLabel" + "default": "1", + "description": "Number of pages." }, { "kind": "field", - "name": "unRead", + "name": "pageSizeDropdownLabel", + "default": "PAGE_SIZE_LABEL", + "description": "Label for the page size dropdown. Required for accessibility.", + "attribute": "pageSizeDropdownLabel" + }, + { + "kind": "field", + "name": "hideItemsRange", "type": { "text": "boolean" }, "default": "false", - "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", - "attribute": "unRead", - "reflects": true + "description": "Option to hide the items range display.", + "attribute": "hideItemsRange" }, { "kind": "field", - "name": "hideCloseButton", + "name": "hidePageSizeDropdown", "type": { "text": "boolean" }, "default": "false", - "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", - "attribute": "hideCloseButton" + "description": "Option to hide the page size dropdown.", + "attribute": "hidePageSizeDropdown" }, { "kind": "field", - "name": "timeout", + "name": "hideNavigationButtons", "type": { - "text": "number" + "text": "boolean" }, - "default": "8", - "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", - "attribute": "timeout" - }, - { - "kind": "method", - "name": "renderInnerUI", - "privacy": "private" - }, - { - "kind": "method", - "name": "_close", - "privacy": "private" + "default": "false", + "description": "Option to hide the navigation buttons.", + "attribute": "hideNavigationButtons" }, { - "kind": "method", - "name": "_handleClose", - "privacy": "private" + "kind": "field", + "name": "textStrings", + "type": { + "text": "object" + }, + "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", + "description": "Customizable text strings", + "attribute": "textStrings" }, { "kind": "method", - "name": "_handleCardClick", + "name": "handlePageSizeChange", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Emit event for clickable notification.", - "name": "on-notification-click" - }, - { - "description": "Emits when an inline/toast notification closes.", - "name": "on-close" - } - ], - "attributes": [ - { - "name": "notificationTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Notification Title (Required).", - "fieldName": "notificationTitle" - }, - { - "name": "notificationSubtitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Notification subtitle.(optional)", - "fieldName": "notificationSubtitle" - }, - { - "name": "timeStamp", - "type": { - "text": "string" - }, - "default": "''", - "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", - "fieldName": "timeStamp" + "text": "CustomEvent" + }, + "description": "The emitted custom event with the selected page size." + } + ], + "description": "Handler for the event when the page size is changed by the user.\nUpdates the `pageSize` and resets the `pageNumber` to 1." }, { - "name": "href", - "type": { - "text": "string" - }, - "default": "''", - "description": "Card href link", - "fieldName": "href" - }, + "kind": "method", + "name": "handlePageNumberChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "CustomEvent" + }, + "description": "The emitted custom event with the selected page number." + } + ], + "description": "Handler for the event when the page number is changed by the user.\nUpdates the `pageNumber`." + } + ], + "events": [ { - "name": "tagStatus", - "type": { - "text": "string" - }, - "default": "'default'", - "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", - "fieldName": "tagStatus" + "description": "Dispatched when the page size changes.", + "name": "on-page-size-change" }, { - "name": "type", + "description": "Dispatched when the currently active page changes.", + "name": "on-page-number-change" + } + ], + "attributes": [ + { + "name": "count", "type": { - "text": "string" + "text": "number" }, - "default": "'normal'", - "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", - "fieldName": "type" + "default": "0", + "description": "Total number of items that need pagination.", + "fieldName": "count" }, { - "name": "textStrings", + "name": "pageNumber", "type": { - "text": "any" + "text": "number" }, - "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", - "description": "Customizable text strings.", - "fieldName": "textStrings" + "default": "1", + "description": "Current active page number.", + "fieldName": "pageNumber" }, { - "name": "closeBtnDescription", + "name": "pageSize", "type": { - "text": "string" + "text": "number" }, - "default": "'Close'", - "description": "Close button description (Required to support accessibility).", - "fieldName": "closeBtnDescription" + "default": "5", + "description": "Number of items displayed per page.", + "fieldName": "pageSize" }, { - "name": "assistiveNotificationTypeText", + "name": "pageSizeOptions", "type": { - "text": "string" + "text": "number[]" }, - "default": "''", - "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", - "fieldName": "assistiveNotificationTypeText" + "default": "[5, 10, 20, 30, 40, 50, 100]", + "description": "Available options for the page size.", + "fieldName": "pageSizeOptions" }, { - "name": "notificationRole", - "type": { - "text": "'alert' | 'log' | 'status' | undefined" - }, - "description": "Notification role (Required to support accessibility).", - "fieldName": "notificationRole" + "name": "pageSizeDropdownLabel", + "default": "PAGE_SIZE_LABEL", + "description": "Label for the page size dropdown. Required for accessibility.", + "fieldName": "pageSizeDropdownLabel" }, { - "name": "statusLabel", + "name": "hideItemsRange", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Status'", - "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", - "fieldName": "statusLabel" + "default": "false", + "description": "Option to hide the items range display.", + "fieldName": "hideItemsRange" }, { - "name": "unRead", + "name": "hidePageSizeDropdown", "type": { "text": "boolean" }, "default": "false", - "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", - "fieldName": "unRead" + "description": "Option to hide the page size dropdown.", + "fieldName": "hidePageSizeDropdown" }, { - "name": "hideCloseButton", + "name": "hideNavigationButtons", "type": { "text": "boolean" }, "default": "false", - "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", - "fieldName": "hideCloseButton" + "description": "Option to hide the navigation buttons.", + "fieldName": "hideNavigationButtons" }, { - "name": "timeout", + "name": "textStrings", "type": { - "text": "number" + "text": "object" }, - "default": "8", - "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", - "fieldName": "timeout" + "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", + "description": "Customizable text strings", + "fieldName": "textStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-notification", + "tagName": "kyn-pagination", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Notification", + "name": "Pagination", "declaration": { - "name": "Notification", - "module": "src/components/reusable/notification/notification.ts" + "name": "Pagination", + "module": "src/components/reusable/pagination/Pagination.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-notification", + "name": "kyn-pagination", "declaration": { - "name": "Notification", - "module": "src/components/reusable/notification/notification.ts" + "name": "Pagination", + "module": "src/components/reusable/pagination/Pagination.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/notification/notificationContainer.ts", - "declarations": [ - { - "kind": "class", - "description": "Notification container component for Toast notification.\nUsage is limited for ..", - "name": "NotificationContainer", - "slots": [ - { - "description": "Slot for component.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-notification-container", - "customElement": true - } - ], + "path": "src/components/reusable/pagination/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "NotificationContainer", + "name": "Pagination", "declaration": { - "name": "NotificationContainer", - "module": "src/components/reusable/notification/notificationContainer.ts" + "name": "Pagination", + "module": "./Pagination" } }, { - "kind": "custom-element-definition", - "name": "kyn-notification-container", + "kind": "js", + "name": "PaginationItemsRange", "declaration": { - "name": "NotificationContainer", - "module": "src/components/reusable/notification/notificationContainer.ts" + "name": "PaginationItemsRange", + "module": "./pagination-items-range" } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/numberInput/index.ts", - "declarations": [], - "exports": [ + }, { "kind": "js", - "name": "NumberInput", + "name": "PaginationPageSizeDropdown", "declaration": { - "name": "NumberInput", - "module": "./numberInput" + "name": "PaginationPageSizeDropdown", + "module": "./pagination-page-size-dropdown" + } + }, + { + "kind": "js", + "name": "PaginationNavigationButtons", + "declaration": { + "name": "PaginationNavigationButtons", + "module": "./pagination-navigation-buttons" + } + }, + { + "kind": "js", + "name": "PaginationSkeleton", + "declaration": { + "name": "PaginationSkeleton", + "module": "./pagination.skeleton" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/numberInput/numberInput.ts", + "path": "src/components/reusable/pagination/pagination-items-range.ts", "declarations": [ { "kind": "class", - "description": "Number input.", - "name": "NumberInput", - "slots": [ - { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], + "description": "`kyn-pagination-items-range` Web Component.\n\nThis component is responsible for displaying the range of items being displayed\nin the context of pagination. It shows which items (by number) are currently visible\nand the total number of items.", + "name": "PaginationItemsRange", "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, - { - "kind": "field", - "name": "value", + "name": "count", "type": { "text": "number" }, "default": "0", - "description": "Input value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "placeholder", - "type": { - "text": "string" - }, - "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "description": "Total number of items.", + "attribute": "count", + "reflects": true }, { "kind": "field", - "name": "required", + "name": "pageNumber", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "default": "1", + "description": "Current page number being displayed.", + "attribute": "pageNumber", + "reflects": true }, { "kind": "field", - "name": "disabled", + "name": "pageSize", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "default": "5", + "description": "Number of items displayed per page.", + "attribute": "pageSize", + "reflects": true }, { - "kind": "field", - "name": "caption", + "kind": "method", + "name": "itemsRangeText", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, + "parameters": [ + { + "name": "isMobile", + "type": { + "text": "Boolean" + } + } + ] + } + ], + "attributes": [ + { + "name": "count", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "default": "0", + "description": "Total number of items.", + "fieldName": "count" }, { - "kind": "field", - "name": "max", + "name": "pageNumber", "type": { "text": "number" }, - "description": "Maximum value.", - "attribute": "max" + "default": "1", + "description": "Current page number being displayed.", + "fieldName": "pageNumber" }, { - "kind": "field", - "name": "min", + "name": "pageSize", "type": { "text": "number" }, - "description": "Minimum value.", - "attribute": "min" - }, + "default": "5", + "description": "Number of items displayed per page.", + "fieldName": "pageSize" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-pagination-items-range", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "PaginationItemsRange", + "declaration": { + "name": "PaginationItemsRange", + "module": "src/components/reusable/pagination/pagination-items-range.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-pagination-items-range", + "declaration": { + "name": "PaginationItemsRange", + "module": "src/components/reusable/pagination/pagination-items-range.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/pagination/pagination-navigation-buttons.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-pagination-navigation-buttons` Web Component.\n\nThis component provides navigational controls for pagination.\nIt includes back and next buttons, along with displaying the current page and total pages.", + "name": "PaginationNavigationButtons", + "members": [ { "kind": "field", - "name": "step", + "name": "pageNumber", "type": { "text": "number" }, "default": "1", - "description": "Step value.", - "attribute": "step" + "attribute": "pageNumber", + "reflects": true }, { "kind": "field", - "name": "hideLabel", + "name": "numberOfPages", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" + "default": "1", + "attribute": "numberOfPages", + "reflects": true }, { "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n subtract: 'Subtract',\n add: 'Add',\n error: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", + "name": "SMALLEST_PAGE_NUMBER", "type": { - "text": "object" - } + "text": "number" + }, + "privacy": "private", + "readonly": true, + "default": "1" }, { "kind": "method", - "name": "_sizeMap", + "name": "handleButtonClick", "privacy": "private", - "return": { - "type": { - "text": "'small' | 'medium' | 'large'" - } - }, "parameters": [ { - "name": "size", + "name": "next", "type": { - "text": "string" - } + "text": "boolean" + }, + "description": "If true, will move to the next page, otherwise to the previous page" } - ] - }, + ], + "description": "Handles the button click event, either moving to the next page or previous page" + } + ], + "events": [ { - "kind": "method", - "name": "_handleSubtract", - "privacy": "private" - }, + "name": "on-page-number-change", + "type": { + "text": "CustomEvent" + }, + "description": "Dispatched when the page number is changed." + } + ], + "attributes": [ { - "kind": "method", - "name": "_handleAdd", - "privacy": "private" + "name": "pageNumber", + "type": { + "text": "number" + }, + "default": "1", + "fieldName": "pageNumber" }, { - "kind": "method", - "name": "_handleInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, + "name": "numberOfPages", + "type": { + "text": "number" + }, + "default": "1", + "fieldName": "numberOfPages" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-pagination-navigation-buttons", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "PaginationNavigationButtons", + "declaration": { + "name": "PaginationNavigationButtons", + "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-pagination-navigation-buttons", + "declaration": { + "name": "PaginationNavigationButtons", + "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/pagination/pagination-page-size-dropdown.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-pagination-page-size-dropdown` Web Component.\n\nThis component provides a dropdown to select the page size for pagination.\nIt emits events when the selected page size changes.", + "name": "PaginationPageSizeDropdown", + "members": [ { - "kind": "method", - "name": "_emitValue", - "privacy": "private", - "parameters": [ - { - "name": "e", - "optional": true, - "type": { - "text": "any" - } - } - ] + "kind": "field", + "name": "pageSize", + "type": { + "text": "number" + }, + "default": "5", + "description": "Current page size.", + "attribute": "pageSize", + "reflects": true + }, + { + "kind": "field", + "name": "pageSizeOptions", + "type": { + "text": "Array" + }, + "default": "[5, 10, 20, 30, 40, 50]", + "description": "Available options for the page size.", + "attribute": "pageSizeOptions" }, { "kind": "method", - "name": "_validate", + "name": "handleChange", "privacy": "private", "parameters": [ { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", + "name": "event", "type": { - "text": "Boolean" - } + "text": "CustomEvent" + }, + "description": "The dropdown change event." } - ] + ], + "description": "Handles the dropdown change event." } ], "events": [ { - "description": "Captures the input event and emits the value and original event details.", - "name": "on-input" + "name": "on-page-size-change", + "type": { + "text": "CustomEvent" + }, + "description": "The event fired when the page size changes." } ], "attributes": [ { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, - { - "name": "value", + "name": "pageSize", "type": { "text": "number" }, - "default": "0", - "description": "Input value.", - "fieldName": "value" + "default": "5", + "description": "Current page size.", + "fieldName": "pageSize" }, { - "name": "placeholder", + "name": "pageSizeOptions", "type": { - "text": "string" + "text": "Array" }, - "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" - }, + "default": "[5, 10, 20, 30, 40, 50]", + "description": "Available options for the page size.", + "fieldName": "pageSizeOptions" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-pagination-page-size-dropdown", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "PaginationPageSizeDropdown", + "declaration": { + "name": "PaginationPageSizeDropdown", + "module": "src/components/reusable/pagination/pagination-page-size-dropdown.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-pagination-page-size-dropdown", + "declaration": { + "name": "PaginationPageSizeDropdown", + "module": "src/components/reusable/pagination/pagination-page-size-dropdown.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/pagination/pagination.skeleton.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-pagination-skeleton` Web Component.", + "name": "PaginationSkeleton", + "members": [ { - "name": "required", + "kind": "field", + "name": "hideItemsRange", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "description": "Option to hide the items range display.", + "attribute": "hideItemsRange" }, { - "name": "disabled", + "kind": "field", + "name": "hidePageSizeDropdown", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" - }, - { - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" + "description": "Option to hide the page size dropdown.", + "attribute": "hidePageSizeDropdown" }, { - "name": "max", + "kind": "field", + "name": "hideNavigationButtons", "type": { - "text": "number" + "text": "boolean" }, - "description": "Maximum value.", - "fieldName": "max" - }, + "default": "false", + "description": "Option to hide the navigation buttons.", + "attribute": "hideNavigationButtons" + } + ], + "attributes": [ { - "name": "min", + "name": "hideItemsRange", "type": { - "text": "number" + "text": "boolean" }, - "description": "Minimum value.", - "fieldName": "min" + "default": "false", + "description": "Option to hide the items range display.", + "fieldName": "hideItemsRange" }, { - "name": "step", + "name": "hidePageSizeDropdown", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Step value.", - "fieldName": "step" + "default": "false", + "description": "Option to hide the page size dropdown.", + "fieldName": "hidePageSizeDropdown" }, { - "name": "hideLabel", + "name": "hideNavigationButtons", "type": { "text": "boolean" }, "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "description": "Option to hide the navigation buttons.", + "fieldName": "hideNavigationButtons" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-number-input", + "tagName": "kyn-pagination-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "NumberInput", + "name": "PaginationSkeleton", "declaration": { - "name": "NumberInput", - "module": "src/components/reusable/numberInput/numberInput.ts" + "name": "PaginationSkeleton", + "module": "src/components/reusable/pagination/pagination.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-number-input", + "name": "kyn-pagination-skeleton", "declaration": { - "name": "NumberInput", - "module": "src/components/reusable/numberInput/numberInput.ts" + "name": "PaginationSkeleton", + "module": "src/components/reusable/pagination/pagination.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/overflowMenu/index.ts", + "path": "src/components/reusable/progressBar/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "OverflowMenu", - "declaration": { - "name": "OverflowMenu", - "module": "./overflowMenu" - } - }, - { - "kind": "js", - "name": "OverflowMenuItem", + "name": "ProgressBar", "declaration": { - "name": "OverflowMenuItem", - "module": "./overflowMenuItem" + "name": "ProgressBar", + "module": "./progressBar" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/overflowMenu/overflowMenu.ts", + "path": "src/components/reusable/progressBar/progressBar.ts", "declarations": [ { "kind": "class", - "description": "Overflow Menu.", - "name": "OverflowMenu", + "description": "`` -- progress bar status indicator component.", + "name": "ProgressBar", "slots": [ { - "description": "Slot for overflow menu items.", + "description": "Slot for tooltip text content.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "open", + "name": "showInlineLoadStatus", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets visibility of optional inline load status spinner.", + "attribute": "showInlineLoadStatus" + }, + { + "kind": "field", + "name": "showActiveHelperText", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Controls whether to show default helper text for active state.", + "attribute": "showActiveHelperText" + }, + { + "kind": "field", + "name": "progressBarId", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets progress bar html id property for accessibility (ex: `example-progress-bar`).", + "attribute": "progressBarId" + }, + { + "kind": "field", + "name": "status", + "type": { + "text": "'active' | 'success' | 'error'" + }, + "default": "'active'", + "description": "Sets progress bar status mode.", + "attribute": "status" + }, + { + "kind": "field", + "name": "value", "type": { - "text": "boolean" + "text": "number | null" }, - "default": "false", - "description": "Menu open state.", - "attribute": "open" + "default": "null", + "description": "Sets initial progress bar value (optionally hard-coded).", + "attribute": "value" }, { "kind": "field", - "name": "anchorRight", + "name": "max", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Anchors the menu to the right of the button.", - "attribute": "anchorRight" + "default": "100", + "description": "Sets manual max value (default = 100).", + "attribute": "max" }, { "kind": "field", - "name": "verticalDots", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "3 dots vertical orientation.", - "attribute": "verticalDots" + "default": "''", + "description": "Sets optional progress bar label.", + "attribute": "label" }, { "kind": "field", - "name": "fixed", + "name": "helperText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", - "attribute": "fixed" + "default": "''", + "description": "Sets optional helper text that appears underneath progress bar element.", + "attribute": "helperText" }, { "kind": "field", - "name": "assistiveText", + "name": "unit", "type": { "text": "string" }, - "default": "'Toggle Menu'", - "description": "Button assistive text..", - "attribute": "assistiveText" + "default": "''", + "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", + "attribute": "unit" }, { - "kind": "method", - "name": "_emitToggleEvent", - "privacy": "private" + "kind": "field", + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Visually hide the label.", + "attribute": "hideLabel" }, { "kind": "method", - "name": "toggleMenu", - "privacy": "private" + "name": "renderProgressBar", + "privacy": "private", + "parameters": [ + { + "name": "currentStatus", + "type": { + "text": "ProgressStatus" + } + }, + { + "name": "currentValue", + "type": { + "text": "number | null" + } + } + ] }, { "kind": "method", - "name": "_positionMenu", - "privacy": "private" + "name": "renderProgressBarLabel", + "privacy": "private", + "parameters": [ + { + "name": "currentStatus", + "type": { + "text": "ProgressStatus" + } + }, + { + "name": "currentValue", + "type": { + "text": "number | null" + } + } + ] }, { "kind": "method", - "name": "handleClickOut", + "name": "renderStatusIconOrLoader", "privacy": "private", "parameters": [ { - "name": "e", + "name": "currentStatus", "type": { - "text": "Event" + "text": "ProgressStatus" + } + }, + { + "name": "currentValue", + "type": { + "text": "number | null" } } ] }, { "kind": "method", - "name": "handleEscapePress", + "name": "getProgressBarClasses", "privacy": "private", "parameters": [ { - "name": "e", + "name": "status", "type": { - "text": "any" + "text": "ProgressStatus" } } ] }, { "kind": "method", - "name": "handleKeyDown", + "name": "getHelperText", + "privacy": "private" + }, + { + "kind": "method", + "name": "getCurrentStatus", "privacy": "private", + "return": { + "type": { + "text": "ProgressStatus" + } + }, "parameters": [ { - "name": "e", + "name": "currentValue", "type": { - "text": "any" + "text": "number | null" } } ] }, { "kind": "method", - "name": "getMenuItems" + "name": "startProgress", + "privacy": "private" }, { "kind": "method", - "name": "getMenu" - } - ], - "events": [ - { - "description": "Capture the open/close event and emits the new state.", - "name": "on-toggle" + "name": "cancelAnimation", + "privacy": "private" } ], "attributes": [ { - "name": "open", + "name": "showInlineLoadStatus", "type": { "text": "boolean" }, "default": "false", - "description": "Menu open state.", - "fieldName": "open" + "description": "Sets visibility of optional inline load status spinner.", + "fieldName": "showInlineLoadStatus" }, { - "name": "anchorRight", + "name": "showActiveHelperText", "type": { "text": "boolean" }, "default": "false", - "description": "Anchors the menu to the right of the button.", - "fieldName": "anchorRight" + "description": "Controls whether to show default helper text for active state.", + "fieldName": "showActiveHelperText" }, { - "name": "verticalDots", + "name": "progressBarId", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "3 dots vertical orientation.", - "fieldName": "verticalDots" + "default": "''", + "description": "Sets progress bar html id property for accessibility (ex: `example-progress-bar`).", + "fieldName": "progressBarId" }, { - "name": "fixed", + "name": "status", "type": { - "text": "boolean" + "text": "'active' | 'success' | 'error'" }, - "default": "false", - "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", - "fieldName": "fixed" + "default": "'active'", + "description": "Sets progress bar status mode.", + "fieldName": "status" }, { - "name": "assistiveText", + "name": "value", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial progress bar value (optionally hard-coded).", + "fieldName": "value" + }, + { + "name": "max", + "type": { + "text": "number" + }, + "default": "100", + "description": "Sets manual max value (default = 100).", + "fieldName": "max" + }, + { + "name": "label", "type": { "text": "string" }, - "default": "'Toggle Menu'", - "description": "Button assistive text..", - "fieldName": "assistiveText" + "default": "''", + "description": "Sets optional progress bar label.", + "fieldName": "label" + }, + { + "name": "helperText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets optional helper text that appears underneath progress bar element.", + "fieldName": "helperText" + }, + { + "name": "unit", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", + "fieldName": "unit" + }, + { + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Visually hide the label.", + "fieldName": "hideLabel" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-overflow-menu", + "tagName": "kyn-progress-bar", "customElement": true } ], "exports": [ { "kind": "js", - "name": "OverflowMenu", + "name": "ProgressBar", + "declaration": { + "name": "ProgressBar", + "module": "src/components/reusable/progressBar/progressBar.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-progress-bar", + "declaration": { + "name": "ProgressBar", + "module": "src/components/reusable/progressBar/progressBar.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/radioButton/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "RadioButton", "declaration": { - "name": "OverflowMenu", - "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + "name": "RadioButton", + "module": "./radioButton" } }, { - "kind": "custom-element-definition", - "name": "kyn-overflow-menu", + "kind": "js", + "name": "RadioButtonGroup", "declaration": { - "name": "OverflowMenu", - "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + "name": "RadioButtonGroup", + "module": "./radioButtonGroup" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/overflowMenu/overflowMenuItem.ts", + "path": "src/components/reusable/radioButton/radioButton.ts", "declarations": [ { "kind": "class", - "description": "Overflow Menu.", - "name": "OverflowMenuItem", + "description": "Radio button.", + "name": "RadioButton", "slots": [ { - "description": "Slot for item text.", + "description": "Slot for label text.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "href", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Makes the item a link.", - "attribute": "href" - }, - { - "kind": "field", - "name": "destructive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Adds destructive styles.", - "attribute": "destructive" + "description": "Radio button value.", + "attribute": "value" }, { "kind": "field", @@ -7693,22 +6996,12 @@ "text": "boolean" }, "default": "false", - "description": "Item disabled state.", + "description": "Radio button disabled state, inherited from the parent group.", "attribute": "disabled" }, - { - "kind": "field", - "name": "description", - "type": { - "text": "string" - }, - "default": "''", - "description": "Item description text for screen reader's", - "attribute": "description" - }, { "kind": "method", - "name": "handleClick", + "name": "handleChange", "privacy": "private", "parameters": [ { @@ -7718,50 +7011,23 @@ } } ] - }, - { - "kind": "method", - "name": "handleKeyDown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "checkOverflow", - "privacy": "private" } ], "events": [ { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" + "description": "Captures the change event and emits the selected value and original event details.", + "name": "on-radio-change" } ], "attributes": [ { - "name": "href", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Makes the item a link.", - "fieldName": "href" - }, - { - "name": "destructive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Adds destructive styles.", - "fieldName": "destructive" + "description": "Radio button value.", + "fieldName": "value" }, { "name": "disabled", @@ -7769,1106 +7035,1020 @@ "text": "boolean" }, "default": "false", - "description": "Item disabled state.", + "description": "Radio button disabled state, inherited from the parent group.", "fieldName": "disabled" - }, - { - "name": "description", - "type": { - "text": "string" - }, - "default": "''", - "description": "Item description text for screen reader's", - "fieldName": "description" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-overflow-menu-item", + "tagName": "kyn-radio-button", "customElement": true } ], "exports": [ { "kind": "js", - "name": "OverflowMenuItem", + "name": "RadioButton", "declaration": { - "name": "OverflowMenuItem", - "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" + "name": "RadioButton", + "module": "src/components/reusable/radioButton/radioButton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-overflow-menu-item", - "declaration": { - "name": "OverflowMenuItem", - "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/pagetitle/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "PageTitle", + "name": "kyn-radio-button", "declaration": { - "name": "PageTitle", - "module": "./pageTitle" + "name": "RadioButton", + "module": "src/components/reusable/radioButton/radioButton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagetitle/pageTitle.ts", + "path": "src/components/reusable/radioButton/radioButtonGroup.ts", "declarations": [ { "kind": "class", - "description": "Page Title", - "name": "PageTitle", + "description": "Radio button group container.", + "name": "RadioButtonGroup", "slots": [ { - "description": "Slot for icon. Use size 56 * 56 as per UX guidelines.", - "name": "icon" + "description": "Slot for individual radio buttons.", + "name": "unnamed" + }, + { + "description": "Slot for description text.", + "name": "description" + }, + { + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "headLine", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Headline text.", - "attribute": "headLine" + "description": "Label text", + "attribute": "label" }, { "kind": "field", - "name": "pageTitle", + "name": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Page title text (required).", - "attribute": "pageTitle" + "default": "false", + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "subTitle", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Page subtitle text.", - "attribute": "subTitle" + "default": "false", + "description": "Radio button group disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "type", + "name": "horizontal", "type": { - "text": "string" + "text": "boolean" }, - "default": "'primary'", - "description": "Type of page title `'primary'` & `'secondary'`.", - "attribute": "type" + "default": "false", + "description": "Radio button group horizontal layout.", + "attribute": "horizontal" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n required: 'Required',\n error: 'Error',\n}", + "description": "Text string customization.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, + { + "kind": "method", + "name": "_handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] + }, + { + "kind": "method", + "name": "_handleRadioChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the change event and emits the selected value.", + "name": "on-radio-group-change" } ], "attributes": [ { - "name": "headLine", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Headline text.", - "fieldName": "headLine" + "description": "Label text", + "fieldName": "label" + }, + { + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "pageTitle", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Page title text (required).", - "fieldName": "pageTitle" + "default": "false", + "description": "Radio button group disabled state.", + "fieldName": "disabled" }, { - "name": "subTitle", + "name": "horizontal", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Page subtitle text.", - "fieldName": "subTitle" + "default": "false", + "description": "Radio button group horizontal layout.", + "fieldName": "horizontal" }, { - "name": "type", - "type": { - "text": "string" - }, - "default": "'primary'", - "description": "Type of page title `'primary'` & `'secondary'`.", - "fieldName": "type" + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-page-title", + "tagName": "kyn-radio-button-group", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PageTitle", + "name": "RadioButtonGroup", "declaration": { - "name": "PageTitle", - "module": "src/components/reusable/pagetitle/pageTitle.ts" + "name": "RadioButtonGroup", + "module": "src/components/reusable/radioButton/radioButtonGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-page-title", + "name": "kyn-radio-button-group", "declaration": { - "name": "PageTitle", - "module": "src/components/reusable/pagetitle/pageTitle.ts" + "name": "RadioButtonGroup", + "module": "src/components/reusable/radioButton/radioButtonGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/Pagination.ts", + "path": "src/components/reusable/search/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Search", + "declaration": { + "name": "Search", + "module": "./search" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/search/search.ts", "declarations": [ { "kind": "class", - "description": "`kyn-pagination` Web Component.\n\nA component that provides pagination functionality, enabling the user to\nnavigate through large datasets by splitting them into discrete chunks.\nIntegrates with other utility components like items range display, page size dropdown,\nand navigation buttons.", - "name": "Pagination", + "description": "Search", + "name": "Search", "members": [ { "kind": "field", - "name": "count", + "name": "name", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Total number of items that need pagination.", - "attribute": "count", - "reflects": true + "default": "''", + "description": "Input name.", + "attribute": "name" }, { "kind": "field", - "name": "pageNumber", + "name": "label", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "description": "Current active page number.", - "attribute": "pageNumber", - "reflects": true + "default": "'Search'", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "pageSize", + "name": "expandable", "type": { - "text": "number" + "text": "boolean" }, - "default": "5", - "description": "Number of items displayed per page.", - "attribute": "pageSize", - "reflects": true + "default": "false", + "description": "Expandable style search.", + "attribute": "expandable" }, { "kind": "field", - "name": "pageSizeOptions", + "name": "value", "type": { - "text": "number[]" + "text": "string" }, - "default": "[5, 10, 20, 30, 40, 50, 100]", - "description": "Available options for the page size.", - "attribute": "pageSizeOptions" + "default": "''", + "description": "Input value.", + "attribute": "value" }, { "kind": "field", - "name": "_numberOfPages", + "name": "size", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "description": "Number of pages." - }, - { - "kind": "field", - "name": "pageSizeDropdownLabel", - "default": "PAGE_SIZE_LABEL", - "description": "Label for the page size dropdown. Required for accessibility.", - "attribute": "pageSizeDropdownLabel" + "default": "'md'", + "description": "Input & button size.", + "attribute": "size" }, { "kind": "field", - "name": "hideItemsRange", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the items range display.", - "attribute": "hideItemsRange" + "description": "Disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "hidePageSizeDropdown", + "name": "suggestions", "type": { - "text": "boolean" + "text": "Array" }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "attribute": "hidePageSizeDropdown" + "default": "[]", + "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", + "attribute": "suggestions" }, { "kind": "field", - "name": "hideNavigationButtons", + "name": "expandableSearchBtnDescription", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the navigation buttons.", - "attribute": "hideNavigationButtons" + "default": "''", + "description": "Expandable style search button description (Required to support accessibility).", + "attribute": "expandableSearchBtnDescription" }, { "kind": "field", - "name": "textStrings", + "name": "assistiveTextStrings", + "default": "{\n searchSuggestions: 'Search suggestions.',\n noMatches: 'No matches found for',\n selected: 'Selected',\n found: 'Found',\n}", + "description": "Assistive text strings.", + "attribute": "assistiveTextStrings", "type": { "text": "object" - }, - "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", - "description": "Customizable text strings", - "attribute": "textStrings" + } + }, + { + "kind": "method", + "name": "_buttonSizeMap", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleFocus", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleBlur", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleButtonClick", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleInput", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "CustomEvent" + } + } + ] + }, + { + "kind": "method", + "name": "_handleSuggestionClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + }, + { + "name": "suggestion", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "_handleSuggestionWithMouseUp", + "privacy": "private", + "parameters": [ + { + "name": "suggestion", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "_handleSuggestionWithMouseDown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "handleSearchKeydown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { "kind": "method", - "name": "handlePageSizeChange", + "name": "handleListKeydown", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "CustomEvent" - }, - "description": "The emitted custom event with the selected page size." + "text": "any" + } } - ], - "description": "Handler for the event when the page size is changed by the user.\nUpdates the `pageSize` and resets the `pageNumber` to 1." + ] }, { "kind": "method", - "name": "handlePageNumberChange", + "name": "handleKeyboard", "privacy": "private", "parameters": [ { - "name": "e", + "name": "keyCode", "type": { - "text": "CustomEvent" - }, - "description": "The emitted custom event with the selected page number." + "text": "number" + } + }, + { + "name": "target", + "type": { + "text": "string" + } } - ], - "description": "Handler for the event when the page number is changed by the user.\nUpdates the `pageNumber`." + ] + }, + { + "kind": "method", + "name": "_checkForMatchingSuggestions", + "privacy": "private" } ], "events": [ { - "description": "Dispatched when the page size changes.", - "name": "on-page-size-change" - }, - { - "description": "Dispatched when the currently active page changes.", - "name": "on-page-number-change" + "description": "Emits the value on text input/clear.", + "name": "on-input" } ], "attributes": [ { - "name": "count", - "type": { - "text": "number" - }, - "default": "0", - "description": "Total number of items that need pagination.", - "fieldName": "count" - }, - { - "name": "pageNumber", - "type": { - "text": "number" - }, - "default": "1", - "description": "Current active page number.", - "fieldName": "pageNumber" - }, - { - "name": "pageSize", - "type": { - "text": "number" - }, - "default": "5", - "description": "Number of items displayed per page.", - "fieldName": "pageSize" - }, - { - "name": "pageSizeOptions", - "type": { - "text": "number[]" - }, - "default": "[5, 10, 20, 30, 40, 50, 100]", - "description": "Available options for the page size.", - "fieldName": "pageSizeOptions" - }, - { - "name": "pageSizeDropdownLabel", - "default": "PAGE_SIZE_LABEL", - "description": "Label for the page size dropdown. Required for accessibility.", - "fieldName": "pageSizeDropdownLabel" - }, - { - "name": "hideItemsRange", + "name": "name", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the items range display.", - "fieldName": "hideItemsRange" + "default": "''", + "description": "Input name.", + "fieldName": "name" }, { - "name": "hidePageSizeDropdown", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "fieldName": "hidePageSizeDropdown" + "default": "'Search'", + "description": "Label text.", + "fieldName": "label" }, { - "name": "hideNavigationButtons", + "name": "expandable", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the navigation buttons.", - "fieldName": "hideNavigationButtons" - }, - { - "name": "textStrings", - "type": { - "text": "object" - }, - "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", - "description": "Customizable text strings", - "fieldName": "textStrings" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-pagination", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Pagination", - "declaration": { - "name": "Pagination", - "module": "src/components/reusable/pagination/Pagination.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-pagination", - "declaration": { - "name": "Pagination", - "module": "src/components/reusable/pagination/Pagination.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/pagination/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Pagination", - "declaration": { - "name": "Pagination", - "module": "./Pagination" - } - }, - { - "kind": "js", - "name": "PaginationItemsRange", - "declaration": { - "name": "PaginationItemsRange", - "module": "./pagination-items-range" - } - }, - { - "kind": "js", - "name": "PaginationPageSizeDropdown", - "declaration": { - "name": "PaginationPageSizeDropdown", - "module": "./pagination-page-size-dropdown" - } - }, - { - "kind": "js", - "name": "PaginationNavigationButtons", - "declaration": { - "name": "PaginationNavigationButtons", - "module": "./pagination-navigation-buttons" - } - }, - { - "kind": "js", - "name": "PaginationSkeleton", - "declaration": { - "name": "PaginationSkeleton", - "module": "./pagination.skeleton" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination-items-range.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-pagination-items-range` Web Component.\n\nThis component is responsible for displaying the range of items being displayed\nin the context of pagination. It shows which items (by number) are currently visible\nand the total number of items.", - "name": "PaginationItemsRange", - "members": [ - { - "kind": "field", - "name": "count", - "type": { - "text": "number" - }, - "default": "0", - "description": "Total number of items.", - "attribute": "count", - "reflects": true - }, - { - "kind": "field", - "name": "pageNumber", - "type": { - "text": "number" - }, - "default": "1", - "description": "Current page number being displayed.", - "attribute": "pageNumber", - "reflects": true + "description": "Expandable style search.", + "fieldName": "expandable" }, { - "kind": "field", - "name": "pageSize", + "name": "value", "type": { - "text": "number" - }, - "default": "5", - "description": "Number of items displayed per page.", - "attribute": "pageSize", - "reflects": true - }, - { - "kind": "method", - "name": "itemsRangeText", - "privacy": "private", - "return": { - "type": { - "text": "string" - } + "text": "string" }, - "parameters": [ - { - "name": "isMobile", - "type": { - "text": "Boolean" - } - } - ] - } - ], - "attributes": [ + "default": "''", + "description": "Input value.", + "fieldName": "value" + }, { - "name": "count", + "name": "size", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Total number of items.", - "fieldName": "count" + "default": "'md'", + "description": "Input & button size.", + "fieldName": "size" }, { - "name": "pageNumber", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Current page number being displayed.", - "fieldName": "pageNumber" + "default": "false", + "description": "Disabled state.", + "fieldName": "disabled" }, { - "name": "pageSize", + "name": "suggestions", "type": { - "text": "number" + "text": "Array" }, - "default": "5", - "description": "Number of items displayed per page.", - "fieldName": "pageSize" + "default": "[]", + "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", + "fieldName": "suggestions" + }, + { + "name": "expandableSearchBtnDescription", + "type": { + "text": "string" + }, + "default": "''", + "description": "Expandable style search button description (Required to support accessibility).", + "fieldName": "expandableSearchBtnDescription" + }, + { + "name": "assistiveTextStrings", + "default": "_defaultTextStrings", + "description": "Assistive text strings.", + "fieldName": "assistiveTextStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination-items-range", + "tagName": "kyn-search", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PaginationItemsRange", + "name": "Search", "declaration": { - "name": "PaginationItemsRange", - "module": "src/components/reusable/pagination/pagination-items-range.ts" + "name": "Search", + "module": "src/components/reusable/search/search.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-pagination-items-range", + "name": "kyn-search", "declaration": { - "name": "PaginationItemsRange", - "module": "src/components/reusable/pagination/pagination-items-range.ts" + "name": "Search", + "module": "src/components/reusable/search/search.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination-navigation-buttons.ts", + "path": "src/components/reusable/sideDrawer/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "SideDrawer", + "declaration": { + "name": "SideDrawer", + "module": "./sideDrawer" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/sideDrawer/sideDrawer.ts", "declarations": [ { "kind": "class", - "description": "`kyn-pagination-navigation-buttons` Web Component.\n\nThis component provides navigational controls for pagination.\nIt includes back and next buttons, along with displaying the current page and total pages.", - "name": "PaginationNavigationButtons", + "description": "Side Drawer.", + "name": "SideDrawer", + "slots": [ + { + "description": "Slot for drawer body content.", + "name": "unnamed" + }, + { + "description": "Slot for the anchor button content.", + "name": "anchor" + } + ], "members": [ { "kind": "field", - "name": "pageNumber", + "name": "open", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "attribute": "pageNumber", - "reflects": true + "default": "false", + "description": "Drawer open state.", + "attribute": "open" }, { "kind": "field", - "name": "numberOfPages", + "name": "size", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "attribute": "numberOfPages", - "reflects": true + "default": "'md'", + "description": "Drawer size. `'md'`, or `'sm'`.", + "attribute": "size" }, { "kind": "field", - "name": "SMALLEST_PAGE_NUMBER", + "name": "titleText", "type": { - "text": "number" + "text": "string" }, - "privacy": "private", - "readonly": true, - "default": "1" + "default": "''", + "description": "Title / Heading text, required.", + "attribute": "titleText" }, { - "kind": "method", - "name": "handleButtonClick", - "privacy": "private", - "parameters": [ - { - "name": "next", - "type": { - "text": "boolean" - }, - "description": "If true, will move to the next page, otherwise to the previous page" - } - ], - "description": "Handles the button click event, either moving to the next page or previous page" - } - ], - "events": [ + "kind": "field", + "name": "labelText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text, optional.", + "attribute": "labelText" + }, { - "name": "on-page-number-change", + "kind": "field", + "name": "submitBtnText", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Dispatched when the page number is changed." - } - ], - "attributes": [ + "default": "'Ok'", + "description": "Submit button text.", + "attribute": "submitBtnText" + }, { - "name": "pageNumber", + "kind": "field", + "name": "cancelBtnText", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "fieldName": "pageNumber" + "default": "'Cancel'", + "description": "Cancel button text.", + "attribute": "cancelBtnText" }, { - "name": "numberOfPages", + "kind": "field", + "name": "submitBtnDisabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "fieldName": "numberOfPages" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-pagination-navigation-buttons", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "PaginationNavigationButtons", - "declaration": { - "name": "PaginationNavigationButtons", - "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-pagination-navigation-buttons", - "declaration": { - "name": "PaginationNavigationButtons", - "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination-page-size-dropdown.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-pagination-page-size-dropdown` Web Component.\n\nThis component provides a dropdown to select the page size for pagination.\nIt emits events when the selected page size changes.", - "name": "PaginationPageSizeDropdown", - "members": [ + "default": "false", + "description": "Disables the primary button.", + "attribute": "submitBtnDisabled" + }, + { + "kind": "field", + "name": "hideFooter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determine whether needs footer", + "attribute": "hideFooter" + }, + { + "kind": "field", + "name": "destructive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "attribute": "destructive" + }, + { + "kind": "field", + "name": "secondaryButtonText", + "type": { + "text": "string" + }, + "default": "'Secondary'", + "description": "Secondary button text.", + "attribute": "secondaryButtonText" + }, + { + "kind": "field", + "name": "showSecondaryButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the secondary button.", + "attribute": "showSecondaryButton" + }, { "kind": "field", - "name": "pageSize", + "name": "hideCancelButton", "type": { - "text": "number" + "text": "boolean" }, - "default": "5", - "description": "Current page size.", - "attribute": "pageSize", - "reflects": true + "default": "false", + "description": "Hides the cancel button.", + "attribute": "hideCancelButton" }, { "kind": "field", - "name": "pageSizeOptions", + "name": "beforeClose", "type": { - "text": "Array" + "text": "Function" }, - "default": "[5, 10, 20, 30, 40, 50]", - "description": "Available options for the page size.", - "attribute": "pageSizeOptions" + "description": "Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." }, { "kind": "method", - "name": "handleChange", + "name": "_openDrawer", + "privacy": "private" + }, + { + "kind": "method", + "name": "_closeDrawer", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { - "text": "CustomEvent" - }, - "description": "The dropdown change event." + "text": "Event" + } + }, + { + "name": "returnValue", + "type": { + "text": "string" + } } - ], - "description": "Handles the dropdown change event." + ] + }, + { + "kind": "method", + "name": "_emitCloseEvent", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] } ], "events": [ { - "name": "on-page-size-change", - "type": { - "text": "CustomEvent" - }, - "description": "The event fired when the page size changes." + "description": "Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).", + "name": "on-close" } ], "attributes": [ { - "name": "pageSize", + "name": "open", "type": { - "text": "number" + "text": "boolean" }, - "default": "5", - "description": "Current page size.", - "fieldName": "pageSize" + "default": "false", + "description": "Drawer open state.", + "fieldName": "open" }, { - "name": "pageSizeOptions", - "type": { - "text": "Array" - }, - "default": "[5, 10, 20, 30, 40, 50]", - "description": "Available options for the page size.", - "fieldName": "pageSizeOptions" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-pagination-page-size-dropdown", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "PaginationPageSizeDropdown", - "declaration": { - "name": "PaginationPageSizeDropdown", - "module": "src/components/reusable/pagination/pagination-page-size-dropdown.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-pagination-page-size-dropdown", - "declaration": { - "name": "PaginationPageSizeDropdown", - "module": "src/components/reusable/pagination/pagination-page-size-dropdown.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-pagination-skeleton` Web Component.", - "name": "PaginationSkeleton", - "members": [ - { - "kind": "field", - "name": "hideItemsRange", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the items range display.", - "attribute": "hideItemsRange" + "default": "'md'", + "description": "Drawer size. `'md'`, or `'sm'`.", + "fieldName": "size" }, { - "kind": "field", - "name": "hidePageSizeDropdown", + "name": "titleText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "attribute": "hidePageSizeDropdown" + "default": "''", + "description": "Title / Heading text, required.", + "fieldName": "titleText" }, { - "kind": "field", - "name": "hideNavigationButtons", + "name": "labelText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the navigation buttons.", - "attribute": "hideNavigationButtons" - } - ], - "attributes": [ + "default": "''", + "description": "Label text, optional.", + "fieldName": "labelText" + }, { - "name": "hideItemsRange", + "name": "submitBtnText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the items range display.", - "fieldName": "hideItemsRange" + "default": "'Ok'", + "description": "Submit button text.", + "fieldName": "submitBtnText" }, { - "name": "hidePageSizeDropdown", + "name": "cancelBtnText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "fieldName": "hidePageSizeDropdown" + "default": "'Cancel'", + "description": "Cancel button text.", + "fieldName": "cancelBtnText" }, { - "name": "hideNavigationButtons", + "name": "submitBtnDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the navigation buttons.", - "fieldName": "hideNavigationButtons" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-pagination-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "PaginationSkeleton", - "declaration": { - "name": "PaginationSkeleton", - "module": "src/components/reusable/pagination/pagination.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-pagination-skeleton", - "declaration": { - "name": "PaginationSkeleton", - "module": "src/components/reusable/pagination/pagination.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/radioButton/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "RadioButton", - "declaration": { - "name": "RadioButton", - "module": "./radioButton" - } - }, - { - "kind": "js", - "name": "RadioButtonGroup", - "declaration": { - "name": "RadioButtonGroup", - "module": "./radioButtonGroup" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/radioButton/radioButton.ts", - "declarations": [ - { - "kind": "class", - "description": "Radio button.", - "name": "RadioButton", - "slots": [ - { - "description": "Slot for label text.", - "name": "unnamed" - } - ], - "members": [ + "description": "Disables the primary button.", + "fieldName": "submitBtnDisabled" + }, { - "kind": "field", - "name": "value", + "name": "hideFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Radio button value.", - "attribute": "value" + "default": "false", + "description": "Determine whether needs footer", + "fieldName": "hideFooter" }, { - "kind": "field", - "name": "disabled", + "name": "destructive", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button disabled state, inherited from the parent group.", - "attribute": "disabled" + "description": "Changes the primary button styles to indicate the action is destructive.", + "fieldName": "destructive" }, { - "kind": "method", - "name": "handleChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-radio-change" - } - ], - "attributes": [ - { - "name": "value", + "name": "secondaryButtonText", "type": { "text": "string" }, - "default": "''", - "description": "Radio button value.", - "fieldName": "value" + "default": "'Secondary'", + "description": "Secondary button text.", + "fieldName": "secondaryButtonText" }, { - "name": "disabled", + "name": "showSecondaryButton", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button disabled state, inherited from the parent group.", - "fieldName": "disabled" + "description": "Hides the secondary button.", + "fieldName": "showSecondaryButton" + }, + { + "name": "hideCancelButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the cancel button.", + "fieldName": "hideCancelButton" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-radio-button", + "tagName": "kyn-side-drawer", "customElement": true } ], "exports": [ { "kind": "js", - "name": "RadioButton", + "name": "SideDrawer", "declaration": { - "name": "RadioButton", - "module": "src/components/reusable/radioButton/radioButton.ts" + "name": "SideDrawer", + "module": "src/components/reusable/sideDrawer/sideDrawer.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-radio-button", + "name": "kyn-side-drawer", "declaration": { - "name": "RadioButton", - "module": "src/components/reusable/radioButton/radioButton.ts" + "name": "SideDrawer", + "module": "src/components/reusable/sideDrawer/sideDrawer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/radioButton/radioButtonGroup.ts", + "path": "src/components/reusable/stepper/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Stepper", + "declaration": { + "name": "Stepper", + "module": "./stepper" + } + }, + { + "kind": "js", + "name": "StepperItem", + "declaration": { + "name": "StepperItem", + "module": "./stepperItem" + } + }, + { + "kind": "js", + "name": "StepperItemChild", + "declaration": { + "name": "StepperItemChild", + "module": "./stepperItemChild" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/stepper/stepper.ts", "declarations": [ { "kind": "class", - "description": "Radio button group container.", - "name": "RadioButtonGroup", + "description": "Stepper", + "name": "Stepper", "slots": [ { - "description": "Slot for individual radio buttons.", + "description": "Slot for step items.", "name": "unnamed" - }, - { - "description": "Slot for description text.", - "name": "description" - }, - { - "description": "Slot for tooltip.", - "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "label", + "name": "stepperType", "type": { "text": "string" }, - "default": "''", - "description": "Label text", - "attribute": "label" + "default": "'procedure'", + "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", + "attribute": "stepperType" }, { "kind": "field", - "name": "required", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "description": "Wheter the stepper is in vertical type.", + "attribute": "vertical" }, { "kind": "field", - "name": "disabled", + "name": "stepperSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Radio button group disabled state.", - "attribute": "disabled" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "attribute": "stepperSize" }, { "kind": "field", - "name": "horizontal", + "name": "currentIndex", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Radio button group horizontal layout.", - "attribute": "horizontal" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n required: 'Required',\n error: 'Error',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "default": "0", + "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", + "attribute": "currentIndex" }, { "kind": "method", @@ -8882,26 +8062,12 @@ }, { "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" - } - } - ] + "name": "_determineFirstLastSteps", + "privacy": "private" }, { "kind": "method", - "name": "_handleRadioChange", + "name": "_handleStepClick", "privacy": "private", "parameters": [ { @@ -8915,2011 +8081,2235 @@ ], "events": [ { - "description": "Captures the change event and emits the selected value.", - "name": "on-radio-group-change" + "description": "Captures the event and emits the active step and original event details when click on any step title. This is only for procedure type stepper. Status stepper doesn't emit this event.", + "name": "on-click" } ], "attributes": [ { - "name": "label", + "name": "stepperType", "type": { "text": "string" }, - "default": "''", - "description": "Label text", - "fieldName": "label" + "default": "'procedure'", + "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", + "fieldName": "stepperType" }, { - "name": "required", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "description": "Wheter the stepper is in vertical type.", + "fieldName": "vertical" }, { - "name": "disabled", + "name": "stepperSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Radio button group disabled state.", - "fieldName": "disabled" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "fieldName": "stepperSize" }, { - "name": "horizontal", + "name": "currentIndex", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Radio button group horizontal layout.", - "fieldName": "horizontal" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "default": "0", + "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", + "fieldName": "currentIndex" } ], "superclass": { "name": "LitElement", "package": "lit" - }, - "tagName": "kyn-radio-button-group", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "RadioButtonGroup", - "declaration": { - "name": "RadioButtonGroup", - "module": "src/components/reusable/radioButton/radioButtonGroup.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-radio-button-group", - "declaration": { - "name": "RadioButtonGroup", - "module": "src/components/reusable/radioButton/radioButtonGroup.ts" - } + }, + "tagName": "kyn-stepper", + "customElement": true } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/progressBar/index.ts", - "declarations": [], + ], "exports": [ { "kind": "js", - "name": "ProgressBar", + "name": "Stepper", "declaration": { - "name": "ProgressBar", - "module": "./progressBar" + "name": "Stepper", + "module": "src/components/reusable/stepper/stepper.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-stepper", + "declaration": { + "name": "Stepper", + "module": "src/components/reusable/stepper/stepper.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/progressBar/progressBar.ts", + "path": "src/components/reusable/stepper/stepperItem.ts", "declarations": [ { "kind": "class", - "description": "`` -- progress bar status indicator component.", - "name": "ProgressBar", + "description": "Stepper Item.", + "name": "StepperItem", "slots": [ { - "description": "Slot for tooltip text content.", + "description": "Slot for tooltip.", + "name": "tooltip" + }, + { + "description": "Children slot. Used for nested children in vertical stepper. Visible only when step state is active. Do not use inside stepperType `'status'`.", + "name": "child" + }, + { + "description": "Optional slot for content in vertical stepper. Visible only when step state is active.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "showInlineLoadStatus", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Sets visibility of optional inline load status spinner.", - "attribute": "showInlineLoadStatus" + "description": "Whether the stepper is in vertical type.", + "attribute": "vertical" }, { "kind": "field", - "name": "showActiveHelperText", + "name": "stepSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Controls whether to show default helper text for active state.", - "attribute": "showActiveHelperText" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "attribute": "stepSize" }, { "kind": "field", - "name": "progressBarId", + "name": "stepName", "type": { "text": "string" }, "default": "''", - "description": "Sets progress bar html id property for accessibility (ex: `example-progress-bar`).", - "attribute": "progressBarId" - }, - { - "kind": "field", - "name": "status", - "type": { - "text": "'active' | 'success' | 'error'" - }, - "default": "'active'", - "description": "Sets progress bar status mode.", - "attribute": "status" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial progress bar value (optionally hard-coded).", - "attribute": "value" + "description": "Step name.", + "attribute": "stepName" }, { "kind": "field", - "name": "max", + "name": "stepTitle", "type": { - "text": "number" + "text": "string" }, - "default": "100", - "description": "Sets manual max value (default = 100).", - "attribute": "max" + "default": "''", + "description": "Step title.", + "attribute": "stepTitle" }, { "kind": "field", - "name": "label", + "name": "stepLink", "type": { "text": "string" }, "default": "''", - "description": "Sets optional progress bar label.", - "attribute": "label" + "description": "Step link.", + "attribute": "stepLink" }, { "kind": "field", - "name": "helperText", + "name": "stepState", "type": { "text": "string" }, - "default": "''", - "description": "Sets optional helper text that appears underneath progress bar element.", - "attribute": "helperText" + "default": "'pending'", + "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", + "attribute": "stepState" }, { "kind": "field", - "name": "unit", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", - "attribute": "unit" + "default": "false", + "description": "Disable step.", + "attribute": "disabled" }, { "kind": "field", - "name": "hideLabel", + "name": "showCounter", "type": { "text": "boolean" }, "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" - }, - { - "kind": "method", - "name": "renderProgressBar", - "privacy": "private", - "parameters": [ - { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", - "type": { - "text": "number | null" - } - } - ] + "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", + "attribute": "showCounter" }, { "kind": "method", - "name": "renderProgressBarLabel", - "privacy": "private", - "parameters": [ - { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", - "type": { - "text": "number | null" - } - } - ] + "name": "_handleChildToggle", + "privacy": "private" }, { "kind": "method", - "name": "renderStatusIconOrLoader", + "name": "_handleStepClick", "privacy": "private", "parameters": [ { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", + "name": "e", "type": { - "text": "number | null" + "text": "any" } } ] }, { "kind": "method", - "name": "getProgressBarClasses", - "privacy": "private", - "parameters": [ - { - "name": "status", - "type": { - "text": "ProgressStatus" - } - } - ] + "name": "_handleChildSlotChange", + "privacy": "private" }, { "kind": "method", - "name": "getHelperText", + "name": "_updateChildren", "privacy": "private" }, { "kind": "method", - "name": "getCurrentStatus", + "name": "getProgressValue", "privacy": "private", "return": { "type": { - "text": "ProgressStatus" + "text": "number" } + } + } + ], + "events": [ + { + "description": "Emits the step details to the parent stepper component when click on step title.", + "name": "on-step-click" + } + ], + "attributes": [ + { + "name": "vertical", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "currentValue", - "type": { - "text": "number | null" - } - } - ] + "default": "false", + "description": "Whether the stepper is in vertical type.", + "fieldName": "vertical" }, { - "kind": "method", - "name": "startProgress", - "privacy": "private" + "name": "stepSize", + "type": { + "text": "string" + }, + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "fieldName": "stepSize" + }, + { + "name": "stepName", + "type": { + "text": "string" + }, + "default": "''", + "description": "Step name.", + "fieldName": "stepName" + }, + { + "name": "stepTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Step title.", + "fieldName": "stepTitle" + }, + { + "name": "stepLink", + "type": { + "text": "string" + }, + "default": "''", + "description": "Step link.", + "fieldName": "stepLink" + }, + { + "name": "stepState", + "type": { + "text": "string" + }, + "default": "'pending'", + "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", + "fieldName": "stepState" }, { - "kind": "method", - "name": "cancelAnimation", - "privacy": "private" - } - ], - "attributes": [ - { - "name": "showInlineLoadStatus", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets visibility of optional inline load status spinner.", - "fieldName": "showInlineLoadStatus" + "description": "Disable step.", + "fieldName": "disabled" }, { - "name": "showActiveHelperText", + "name": "showCounter", "type": { "text": "boolean" }, "default": "false", - "description": "Controls whether to show default helper text for active state.", - "fieldName": "showActiveHelperText" - }, + "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", + "fieldName": "showCounter" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-stepper-item", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "StepperItem", + "declaration": { + "name": "StepperItem", + "module": "src/components/reusable/stepper/stepperItem.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-stepper-item", + "declaration": { + "name": "StepperItem", + "module": "src/components/reusable/stepper/stepperItem.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/stepper/stepperItemChild.ts", + "declarations": [ + { + "kind": "class", + "description": "Stepper Item child.", + "name": "StepperItemChild", + "slots": [ { - "name": "progressBarId", + "description": "Slot for other elements.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "childTitle", "type": { "text": "string" }, "default": "''", - "description": "Sets progress bar html id property for accessibility (ex: `example-progress-bar`).", - "fieldName": "progressBarId" + "description": "Child Title. Required for nested child inside step.", + "attribute": "childTitle" }, { - "name": "status", + "kind": "field", + "name": "childLink", "type": { - "text": "'active' | 'success' | 'error'" + "text": "string" }, - "default": "'active'", - "description": "Sets progress bar status mode.", - "fieldName": "status" + "default": "''", + "description": "Child link.", + "attribute": "childLink" }, { - "name": "value", + "kind": "field", + "name": "childSubTitle", "type": { - "text": "number | null" + "text": "string" }, - "default": "null", - "description": "Sets initial progress bar value (optionally hard-coded).", - "fieldName": "value" + "default": "''", + "description": "Optional Child Subtitle.", + "attribute": "childSubTitle" }, { - "name": "max", + "kind": "field", + "name": "childState", "type": { - "text": "number" + "text": "string" }, - "default": "100", - "description": "Sets manual max value (default = 100).", - "fieldName": "max" + "default": "'pending'", + "description": "Child State. `'pending'`, `'active'` & `'completed'`.", + "attribute": "childState" }, { - "name": "label", + "kind": "method", + "name": "_handleChildStepClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "getProgressValue", + "privacy": "private", + "return": { + "type": { + "text": "number" + } + } + } + ], + "events": [ + { + "description": "Emits event on child click. Only for vertical mode.", + "name": "on-child-click" + } + ], + "attributes": [ + { + "name": "childTitle", "type": { "text": "string" }, "default": "''", - "description": "Sets optional progress bar label.", - "fieldName": "label" + "description": "Child Title. Required for nested child inside step.", + "fieldName": "childTitle" }, { - "name": "helperText", + "name": "childLink", "type": { "text": "string" }, "default": "''", - "description": "Sets optional helper text that appears underneath progress bar element.", - "fieldName": "helperText" + "description": "Child link.", + "fieldName": "childLink" }, { - "name": "unit", + "name": "childSubTitle", "type": { "text": "string" }, "default": "''", - "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", - "fieldName": "unit" + "description": "Optional Child Subtitle.", + "fieldName": "childSubTitle" }, { - "name": "hideLabel", + "name": "childState", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" + "default": "'pending'", + "description": "Child State. `'pending'`, `'active'` & `'completed'`.", + "fieldName": "childState" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-progress-bar", + "tagName": "kyn-stepper-item-child", "customElement": true } ], "exports": [ { "kind": "js", - "name": "ProgressBar", + "name": "StepperItemChild", + "declaration": { + "name": "StepperItemChild", + "module": "src/components/reusable/stepper/stepperItemChild.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-stepper-item-child", + "declaration": { + "name": "StepperItemChild", + "module": "src/components/reusable/stepper/stepperItemChild.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/defs.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Table", + "declaration": { + "name": "Table", + "module": "./table" + } + }, + { + "kind": "js", + "name": "TableCell", + "declaration": { + "name": "TableCell", + "module": "./table-cell" + } + }, + { + "kind": "js", + "name": "TableRow", + "declaration": { + "name": "TableRow", + "module": "./table-row" + } + }, + { + "kind": "js", + "name": "TableBody", + "declaration": { + "name": "TableBody", + "module": "./table-body" + } + }, + { + "kind": "js", + "name": "TableHead", + "declaration": { + "name": "TableHead", + "module": "./table-head" + } + }, + { + "kind": "js", + "name": "TableHeader", + "declaration": { + "name": "TableHeader", + "module": "./table-header" + } + }, + { + "kind": "js", + "name": "TableFoot", + "declaration": { + "name": "TableFoot", + "module": "./table-foot" + } + }, + { + "kind": "js", + "name": "TableFooter", + "declaration": { + "name": "TableFooter", + "module": "./table-footer" + } + }, + { + "kind": "js", + "name": "TableLegend", "declaration": { - "name": "ProgressBar", - "module": "src/components/reusable/progressBar/progressBar.ts" + "name": "TableLegend", + "module": "./table-legend" } }, { - "kind": "custom-element-definition", - "name": "kyn-progress-bar", + "kind": "js", + "name": "TableLegendItem", "declaration": { - "name": "ProgressBar", - "module": "src/components/reusable/progressBar/progressBar.ts" + "name": "TableLegendItem", + "module": "./table-legend-item" } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/search/index.ts", - "declarations": [], - "exports": [ + }, { "kind": "js", - "name": "Search", + "name": "TableToolbar", "declaration": { - "name": "Search", - "module": "./search" + "name": "TableToolbar", + "module": "./table-toolbar" + } + }, + { + "kind": "js", + "name": "TableContainer", + "declaration": { + "name": "TableContainer", + "module": "./table-container" + } + }, + { + "kind": "js", + "name": "TableHeaderRow", + "declaration": { + "name": "TableHeaderRow", + "module": "./table-header-row" + } + }, + { + "kind": "js", + "name": "TableExpandedRow", + "declaration": { + "name": "TableExpandedRow", + "module": "./table-expanded-row" + } + }, + { + "kind": "js", + "name": "TableSkeleton", + "declaration": { + "name": "TableSkeleton", + "module": "./table.skeleton" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/search/search.ts", + "path": "src/components/reusable/table/table-body.ts", "declarations": [ { "kind": "class", - "description": "Search", - "name": "Search", - "members": [ - { - "kind": "field", - "name": "name", - "type": { - "text": "string" - }, - "default": "''", - "description": "Input name.", - "attribute": "name" - }, - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "'Search'", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "expandable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Expandable style search.", - "attribute": "expandable" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "''", - "description": "Input value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input & button size.", - "attribute": "size" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Disabled state.", - "attribute": "disabled" - }, - { - "kind": "field", - "name": "suggestions", - "type": { - "text": "Array" - }, - "default": "[]", - "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", - "attribute": "suggestions" - }, - { - "kind": "field", - "name": "expandableSearchBtnDescription", - "type": { - "text": "string" - }, - "default": "''", - "description": "Expandable style search button description (Required to support accessibility).", - "attribute": "expandableSearchBtnDescription" - }, - { - "kind": "field", - "name": "assistiveTextStrings", - "default": "{\n searchSuggestions: 'Search suggestions.',\n noMatches: 'No matches found for',\n selected: 'Selected',\n found: 'Found',\n}", - "description": "Assistive text strings.", - "attribute": "assistiveTextStrings", - "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "_buttonSizeMap", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleFocus", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleBlur", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleButtonClick", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "CustomEvent" - } - } - ] - }, - { - "kind": "method", - "name": "_handleSuggestionClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - }, - { - "name": "suggestion", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_handleSuggestionWithMouseUp", - "privacy": "private", - "parameters": [ - { - "name": "suggestion", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_handleSuggestionWithMouseDown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, + "description": "`kyn-tbody` Web Component.\n\nRepresents the body section of Shidoka's design system tables. Designed to provide\na consistent look and feel, and can offer striped rows for enhanced readability.", + "name": "TableBody", + "slots": [ { - "kind": "method", - "name": "handleSearchKeydown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, + "description": "The content slot for adding rows (``) within the table body.", + "name": "unnamed" + } + ], + "members": [ { - "kind": "method", - "name": "handleListKeydown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "kind": "field", + "name": "striped", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines if the rows in the table body should be striped.", + "attribute": "striped", + "reflects": true }, { - "kind": "method", - "name": "handleKeyboard", - "privacy": "private", + "kind": "field", + "name": "handleContextChange", + "description": "Updates the row's striped property when the context changes.", "parameters": [ { - "name": "keyCode", - "type": { - "text": "number" - } - }, - { - "name": "target", + "description": "The updated context.", + "name": "context", "type": { - "text": "string" + "text": "TableContextType" } } ] - }, - { - "kind": "method", - "name": "_checkForMatchingSuggestions", - "privacy": "private" } ], "events": [ { - "description": "Emits the value on text input/clear.", - "name": "on-input" + "name": "on-rows-change", + "type": { + "text": "CustomEvent" + }, + "description": "Dispatched when the rows in the table body change." } ], "attributes": [ { - "name": "name", - "type": { - "text": "string" - }, - "default": "''", - "description": "Input name.", - "fieldName": "name" - }, - { - "name": "label", - "type": { - "text": "string" - }, - "default": "'Search'", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "expandable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Expandable style search.", - "fieldName": "expandable" - }, - { - "name": "value", - "type": { - "text": "string" - }, - "default": "''", - "description": "Input value.", - "fieldName": "value" - }, - { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input & button size.", - "fieldName": "size" - }, - { - "name": "disabled", + "name": "striped", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "fieldName": "disabled" - }, - { - "name": "suggestions", - "type": { - "text": "Array" - }, - "default": "[]", - "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", - "fieldName": "suggestions" - }, - { - "name": "expandableSearchBtnDescription", - "type": { - "text": "string" - }, - "default": "''", - "description": "Expandable style search button description (Required to support accessibility).", - "fieldName": "expandableSearchBtnDescription" - }, - { - "name": "assistiveTextStrings", - "default": "_defaultTextStrings", - "description": "Assistive text strings.", - "fieldName": "assistiveTextStrings" + "description": "Determines if the rows in the table body should be striped.", + "fieldName": "striped" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-search", + "tagName": "kyn-tbody", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Search", + "name": "TableBody", "declaration": { - "name": "Search", - "module": "src/components/reusable/search/search.ts" + "name": "TableBody", + "module": "src/components/reusable/table/table-body.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-search", - "declaration": { - "name": "Search", - "module": "src/components/reusable/search/search.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/sideDrawer/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "SideDrawer", + "name": "kyn-tbody", "declaration": { - "name": "SideDrawer", - "module": "./sideDrawer" + "name": "TableBody", + "module": "src/components/reusable/table/table-body.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/sideDrawer/sideDrawer.ts", + "path": "src/components/reusable/table/table-cell.ts", "declarations": [ { "kind": "class", - "description": "Side Drawer.", - "name": "SideDrawer", + "description": "`kyn-td` Web Component.\n\nRepresents a table cell (data cell) within Shidoka's design system tables.\nAllows customization of alignment and can reflect the sort direction when\nused within sortable columns.", + "name": "TableCell", "slots": [ { - "description": "Slot for drawer body content.", + "description": "The content slot for adding table data inside the cell.", "name": "unnamed" - }, - { - "description": "Slot for the anchor button content.", - "name": "anchor" } ], "members": [ { "kind": "field", - "name": "open", + "name": "dense", "type": { "text": "boolean" }, "default": "false", - "description": "Drawer open state.", - "attribute": "open" + "attribute": "dense", + "reflects": true }, { "kind": "field", - "name": "size", + "name": "align", "type": { - "text": "string" + "text": "TABLE_CELL_ALIGN" }, - "default": "'md'", - "description": "Drawer size. `'md'`, or `'sm'`.", - "attribute": "size" + "description": "Determines the text alignment of the table cell's content.", + "attribute": "align", + "reflects": true }, { "kind": "field", - "name": "titleText", + "name": "width", "type": { "text": "string" }, "default": "''", - "description": "Title / Heading text, required.", - "attribute": "titleText" + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "width", + "reflects": true }, { "kind": "field", - "name": "labelText", + "name": "maxWidth", "type": { "text": "string" }, "default": "''", - "description": "Label text, optional.", - "attribute": "labelText" - }, - { - "kind": "field", - "name": "submitBtnText", - "type": { - "text": "string" - }, - "default": "'Ok'", - "description": "Submit button text.", - "attribute": "submitBtnText" - }, - { - "kind": "field", - "name": "cancelBtnText", - "type": { - "text": "string" - }, - "default": "'Cancel'", - "description": "Cancel button text.", - "attribute": "cancelBtnText" - }, - { - "kind": "field", - "name": "submitBtnDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Disables the primary button.", - "attribute": "submitBtnDisabled" - }, - { - "kind": "field", - "name": "hideFooter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determine whether needs footer", - "attribute": "hideFooter" - }, - { - "kind": "field", - "name": "destructive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "attribute": "destructive" + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "maxWidth", + "reflects": true }, { "kind": "field", - "name": "secondaryButtonText", + "name": "minWidth", "type": { - "text": "string" - }, - "default": "'Secondary'", - "description": "Secondary button text.", - "attribute": "secondaryButtonText" + "text": "string" + }, + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "minWidth", + "reflects": true }, { "kind": "field", - "name": "showSecondaryButton", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the secondary button.", - "attribute": "showSecondaryButton" + "description": "Disables the cell.", + "attribute": "disabled", + "reflects": true }, { "kind": "field", - "name": "hideCancelButton", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the cancel button.", - "attribute": "hideCancelButton" + "description": "Dim the cell.", + "attribute": "dimmed", + "reflects": true }, { "kind": "field", - "name": "beforeClose", - "type": { - "text": "Function" - }, - "description": "Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." - }, - { - "kind": "method", - "name": "_openDrawer", - "privacy": "private" - }, - { - "kind": "method", - "name": "_closeDrawer", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - }, - { - "name": "returnValue", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_emitCloseEvent", - "privacy": "private", + "name": "handleContextChange", + "description": "Updates the cell's dense properties when the context changes.", "parameters": [ { - "name": "e", + "description": "The updated context.", + "name": "context", "type": { - "text": "Event" + "text": "TableContextType" } } ] } ], - "events": [ - { - "description": "Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).", - "name": "on-close" - } - ], "attributes": [ { - "name": "open", + "name": "dense", "type": { "text": "boolean" }, "default": "false", - "description": "Drawer open state.", - "fieldName": "open" + "fieldName": "dense" }, { - "name": "size", + "name": "align", "type": { - "text": "string" + "text": "TABLE_CELL_ALIGN" }, - "default": "'md'", - "description": "Drawer size. `'md'`, or `'sm'`.", - "fieldName": "size" + "description": "Determines the text alignment of the table cell's content.", + "fieldName": "align" }, { - "name": "titleText", + "name": "width", "type": { "text": "string" }, "default": "''", - "description": "Title / Heading text, required.", - "fieldName": "titleText" + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "width" }, { - "name": "labelText", + "name": "maxWidth", "type": { "text": "string" }, "default": "''", - "description": "Label text, optional.", - "fieldName": "labelText" + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "maxWidth" }, { - "name": "submitBtnText", + "name": "minWidth", "type": { "text": "string" }, - "default": "'Ok'", - "description": "Submit button text.", - "fieldName": "submitBtnText" + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "minWidth" }, { - "name": "cancelBtnText", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Cancel'", - "description": "Cancel button text.", - "fieldName": "cancelBtnText" + "default": "false", + "description": "Disables the cell.", + "fieldName": "disabled" }, { - "name": "submitBtnDisabled", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the primary button.", - "fieldName": "submitBtnDisabled" - }, + "description": "Dim the cell.", + "fieldName": "dimmed" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-td", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TableCell", + "declaration": { + "name": "TableCell", + "module": "src/components/reusable/table/table-cell.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-td", + "declaration": { + "name": "TableCell", + "module": "src/components/reusable/table/table-cell.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-container.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-table-container` Web Component.\n\nProvides a container for Shidoka's design system tables. It's designed to encapsulate\nand apply styles uniformly across the table elements.", + "name": "TableContainer", + "slots": [ { - "name": "hideFooter", + "description": "The content slot for adding table and related elements.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "tabIndex", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Determine whether needs footer", - "fieldName": "hideFooter" - }, + "default": "0", + "attribute": "tabIndex", + "reflects": true + } + ], + "attributes": [ { - "name": "destructive", + "name": "tabIndex", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "fieldName": "destructive" - }, + "default": "0", + "fieldName": "tabIndex" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-table-container", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TableContainer", + "declaration": { + "name": "TableContainer", + "module": "src/components/reusable/table/table-container.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-table-container", + "declaration": { + "name": "TableContainer", + "module": "src/components/reusable/table/table-container.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-context.ts", + "declarations": [ + { + "kind": "variable", + "name": "tableContext" + } + ], + "exports": [ + { + "kind": "js", + "name": "tableContext", + "declaration": { + "name": "tableContext", + "module": "src/components/reusable/table/table-context.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-expanded-row.ts", + "declarations": [ + { + "kind": "class", + "description": "\n`kyn-expanded-tr` Web Component.\n\nDesigned to display additional details for a row in a table.\nThe row is expandable and can be expanded/collapsed by toggling the plus/minus icons.", + "name": "TableExpandedRow", + "slots": [ { - "name": "secondaryButtonText", + "description": "The slot for adding content to the expandable details section.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "colSpan", "type": { - "text": "string" + "text": "number" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "fieldName": "secondaryButtonText" + "default": "1", + "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", + "attribute": "colspan" }, { - "name": "showSecondaryButton", + "kind": "field", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the secondary button.", - "fieldName": "showSecondaryButton" + "description": "`true` if the table row should be expanded.", + "attribute": "expanded", + "reflects": true + } + ], + "attributes": [ + { + "name": "colspan", + "type": { + "text": "number" + }, + "default": "1", + "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", + "fieldName": "colSpan" }, { - "name": "hideCancelButton", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the cancel button.", - "fieldName": "hideCancelButton" + "description": "`true` if the table row should be expanded.", + "fieldName": "expanded" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-side-drawer", + "tagName": "kyn-expanded-tr", "customElement": true } ], "exports": [ { "kind": "js", - "name": "SideDrawer", + "name": "TableExpandedRow", "declaration": { - "name": "SideDrawer", - "module": "src/components/reusable/sideDrawer/sideDrawer.ts" + "name": "TableExpandedRow", + "module": "src/components/reusable/table/table-expanded-row.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-side-drawer", + "name": "kyn-expanded-tr", "declaration": { - "name": "SideDrawer", - "module": "src/components/reusable/sideDrawer/sideDrawer.ts" + "name": "TableExpandedRow", + "module": "src/components/reusable/table/table-expanded-row.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/stepper/index.ts", - "declarations": [], + "path": "src/components/reusable/table/table-foot.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-tfoot` Web Component.\n\nRepresents a custom table foot (``) for Shidoka's design system tables.\nDesigned to contain and style table footer rows (``) and footer cells (``).", + "name": "TableFoot", + "slots": [ + { + "description": "The content slot for adding table foot rows.", + "name": "unnamed" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tfoot", + "customElement": true + } + ], "exports": [ { "kind": "js", - "name": "Stepper", + "name": "TableFoot", "declaration": { - "name": "Stepper", - "module": "./stepper" + "name": "TableFoot", + "module": "src/components/reusable/table/table-foot.ts" } }, + { + "kind": "custom-element-definition", + "name": "kyn-tfoot", + "declaration": { + "name": "TableFoot", + "module": "src/components/reusable/table/table-foot.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-footer.ts", + "declarations": [ + { + "kind": "class", + "description": "Table Footer\n\nIntended to contain Legend and Pagination.", + "name": "TableFooter", + "slots": [ + { + "description": "Default slot.", + "name": "unnamed" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-table-footer", + "customElement": true + } + ], + "exports": [ { "kind": "js", - "name": "StepperItem", + "name": "TableFooter", "declaration": { - "name": "StepperItem", - "module": "./stepperItem" + "name": "TableFooter", + "module": "src/components/reusable/table/table-footer.ts" } }, { - "kind": "js", - "name": "StepperItemChild", + "kind": "custom-element-definition", + "name": "kyn-table-footer", "declaration": { - "name": "StepperItemChild", - "module": "./stepperItemChild" + "name": "TableFooter", + "module": "src/components/reusable/table/table-footer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/stepper/stepper.ts", + "path": "src/components/reusable/table/table-head.ts", "declarations": [ { "kind": "class", - "description": "Stepper", - "name": "Stepper", + "description": "`kyn-thead` Web Component.\n\nRepresents a custom table head (``) for Shidoka's design system tables.\nDesigned to contain and style table header rows (``) and header cells (``).", + "name": "TableHead", "slots": [ { - "description": "Slot for step items.", + "description": "The content slot for adding table header rows (``).", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "stepperType", + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "attribute": "stickyHeader", + "reflects": true + }, + { + "kind": "field", + "name": "handleContextChange", + "description": "Update the stickyHeader property when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ] + }, + { + "kind": "method", + "name": "handleChildSort", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "CustomEvent" + } + } + ] + } + ], + "attributes": [ + { + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "fieldName": "stickyHeader" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-thead", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TableHead", + "declaration": { + "name": "TableHead", + "module": "src/components/reusable/table/table-head.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-thead", + "declaration": { + "name": "TableHead", + "module": "src/components/reusable/table/table-head.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-header-row.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-header-tr` Web Component.\n\nThe `` component is designed to function as the\nheader row within a table that's part of Shidoka's design system.", + "name": "TableHeaderRow", + "members": [ + { + "kind": "field", + "name": "expandableColumnWidth", + "type": { + "text": "string" + }, + "default": "'64px'", + "description": "expandableColumnWidth: The width of the expandable column.", + "attribute": "expandableColumnWidth" + }, + { + "kind": "field", + "name": "multiSelectColumnWidth", + "type": { + "text": "string" + }, + "default": "'64px'", + "description": "multiSelectColumnWidth: The width of the multi-select column.", + "attribute": "multiSelectColumnWidth" + }, + { + "kind": "method", + "name": "handleToggleSelectionAll", + "parameters": [ + { + "name": "event", + "type": { + "text": "CustomEvent" + } + } + ], + "description": "Toggles the selection state of all rows in the table." + }, + { + "kind": "method", + "name": "updateHeaderCheckboxState", + "parameters": [ + { + "name": "indeterminate", + "type": { + "text": "boolean" + } + }, + { + "name": "checked", + "type": { + "text": "boolean" + } + } + ], + "description": "Updates the state of the header checkbox based on the number of\nselected rows." + }, + { + "kind": "field", + "name": "rowId", "type": { "text": "string" }, - "default": "'procedure'", - "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", - "attribute": "stepperType" + "default": "''", + "description": "rowId: String - Unique identifier for the row.", + "attribute": "rowId", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { "kind": "field", - "name": "vertical", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Wheter the stepper is in vertical type.", - "attribute": "vertical" + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "attribute": "selected", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { "kind": "field", - "name": "stepperSize", + "name": "checkboxSelection", "type": { - "text": "string" + "text": "boolean" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "attribute": "stepperSize" + "default": "false", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "attribute": "checkboxSelection", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { "kind": "field", - "name": "currentIndex", + "name": "dense", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", - "attribute": "currentIndex" + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "attribute": "dense", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "method", - "name": "_handleSlotChange", - "privacy": "private" + "kind": "field", + "name": "unread", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Unread row state.", + "attribute": "unread", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "method", - "name": "_updateChildren", - "privacy": "private" + "kind": "field", + "name": "locked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "locked", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "method", - "name": "_determineFirstLastSteps", - "privacy": "private" + "kind": "field", + "name": "expandable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "expandable: Boolean indicating whether the row is expandable.", + "attribute": "expandable", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "method", - "name": "_handleStepClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the event and emits the active step and original event details when click on any step title. This is only for procedure type stepper. Status stepper doesn't emit this event.", - "name": "on-click" - } - ], - "attributes": [ + "kind": "field", + "name": "expanded", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "expanded: Boolean indicating whether the row is expanded.", + "attribute": "expanded", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, { - "name": "stepperType", + "kind": "field", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'procedure'", - "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", - "fieldName": "stepperType" + "default": "false", + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "disabled", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "vertical", + "kind": "field", + "name": "preventHighlight", "type": { "text": "boolean" }, "default": "false", - "description": "Wheter the stepper is in vertical type.", - "fieldName": "vertical" + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "attribute": "preventHighlight", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "stepperSize", + "kind": "field", + "name": "dimmed", "type": { - "text": "string" + "text": "boolean" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "fieldName": "stepperSize" + "default": "false", + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "attribute": "dimmed", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "currentIndex", + "kind": "field", + "name": "textStrings", + "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", + "description": "Text string customization.", + "attribute": "textStrings", "type": { - "text": "number" + "text": "object" }, - "default": "0", - "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", - "fieldName": "currentIndex" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-stepper", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Stepper", - "declaration": { - "name": "Stepper", - "module": "src/components/reusable/stepper/stepper.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-stepper", - "declaration": { - "name": "Stepper", - "module": "src/components/reusable/stepper/stepper.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/stepper/stepperItem.ts", - "declarations": [ - { - "kind": "class", - "description": "Stepper Item.", - "name": "StepperItem", - "slots": [ + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "kind": "field", + "name": "handleContextChange", + "description": "Updates the cell's dense and ellipsis properties when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ], + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, { - "description": "Slot for tooltip.", - "name": "tooltip" + "kind": "method", + "name": "handleRowSelectionChange", + "parameters": [ + { + "name": "event", + "type": { + "text": "CustomEvent" + } + } + ], + "description": "Handles the change of selection state for a specific row.", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "description": "Children slot. Used for nested children in vertical stepper. Visible only when step state is active. Do not use inside stepperType `'status'`.", - "name": "child" + "kind": "method", + "name": "_handleUserInitiatedToggleExpando", + "parameters": [ + { + "name": "expanded", + "default": "!this.expanded" + } + ], + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "description": "Optional slot for content in vertical stepper. Visible only when step state is active.", - "name": "unnamed" + "kind": "method", + "name": "_handleExpanding", + "privacy": "private", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } } ], - "members": [ + "events": [ { - "kind": "field", - "name": "vertical", + "name": "on-header-checkbox-toggle", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Whether the stepper is in vertical type.", - "attribute": "vertical" + "text": "CustomEvent" + } }, { - "kind": "field", - "name": "stepSize", + "name": "on-row-select", "type": { - "text": "string" + "text": "CustomEvent" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "attribute": "stepSize" + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "field", - "name": "stepName", + "name": "table-row-expando-beingtoggled", "type": { - "text": "string" + "text": "CustomEvent" }, - "default": "''", - "description": "Step name.", - "attribute": "stepName" + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "field", - "name": "stepTitle", + "name": "table-row-expando-toggled", + "type": { + "text": "CustomEvent" + }, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + } + ], + "attributes": [ + { + "name": "expandableColumnWidth", "type": { "text": "string" }, - "default": "''", - "description": "Step title.", - "attribute": "stepTitle" + "default": "'64px'", + "description": "expandableColumnWidth: The width of the expandable column.", + "fieldName": "expandableColumnWidth" }, { - "kind": "field", - "name": "stepLink", + "name": "multiSelectColumnWidth", "type": { "text": "string" }, - "default": "''", - "description": "Step link.", - "attribute": "stepLink" + "default": "'64px'", + "description": "multiSelectColumnWidth: The width of the multi-select column.", + "fieldName": "multiSelectColumnWidth" }, { - "kind": "field", - "name": "stepState", + "name": "rowId", "type": { "text": "string" }, - "default": "'pending'", - "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", - "attribute": "stepState" + "default": "''", + "description": "rowId: String - Unique identifier for the row.", + "fieldName": "rowId", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "field", - "name": "disabled", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Disable step.", - "attribute": "disabled" + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "fieldName": "selected", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "field", - "name": "showCounter", + "name": "checkboxSelection", "type": { "text": "boolean" }, "default": "false", - "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", - "attribute": "showCounter" - }, - { - "kind": "method", - "name": "_handleChildToggle", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleStepClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "_handleChildSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateChildren", - "privacy": "private" - }, - { - "kind": "method", - "name": "getProgressValue", - "privacy": "private", - "return": { - "type": { - "text": "number" - } + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "fieldName": "checkboxSelection", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" } - } - ], - "events": [ - { - "description": "Emits the step details to the parent stepper component when click on step title.", - "name": "on-step-click" - } - ], - "attributes": [ + }, { - "name": "vertical", + "name": "dense", "type": { "text": "boolean" }, "default": "false", - "description": "Whether the stepper is in vertical type.", - "fieldName": "vertical" + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "fieldName": "dense", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "stepSize", + "name": "unread", "type": { - "text": "string" + "text": "boolean" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "fieldName": "stepSize" + "default": "false", + "description": "Unread row state.", + "fieldName": "unread", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "stepName", + "name": "locked", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step name.", - "fieldName": "stepName" + "default": "false", + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "locked", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "stepTitle", + "name": "expandable", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step title.", - "fieldName": "stepTitle" + "default": "false", + "description": "expandable: Boolean indicating whether the row is expandable.", + "fieldName": "expandable", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "stepLink", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step link.", - "fieldName": "stepLink" + "default": "false", + "description": "expanded: Boolean indicating whether the row is expanded.", + "fieldName": "expanded", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "stepState", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'pending'", - "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", - "fieldName": "stepState" + "default": "false", + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "disabled", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "disabled", + "name": "preventHighlight", "type": { "text": "boolean" }, "default": "false", - "description": "Disable step.", - "fieldName": "disabled" + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "fieldName": "preventHighlight", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "showCounter", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", - "fieldName": "showCounter" + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "fieldName": "dimmed", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } } ], "superclass": { - "name": "LitElement", - "package": "lit" + "name": "TableRow", + "module": "/src/components/reusable/table/table-row" }, - "tagName": "kyn-stepper-item", - "customElement": true + "tagName": "kyn-header-tr", + "customElement": true, + "slots": [ + { + "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", + "name": "unnamed", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + } + ] } ], "exports": [ { "kind": "js", - "name": "StepperItem", + "name": "TableHeaderRow", "declaration": { - "name": "StepperItem", - "module": "src/components/reusable/stepper/stepperItem.ts" + "name": "TableHeaderRow", + "module": "src/components/reusable/table/table-header-row.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-stepper-item", + "name": "kyn-header-tr", "declaration": { - "name": "StepperItem", - "module": "src/components/reusable/stepper/stepperItem.ts" + "name": "TableHeaderRow", + "module": "src/components/reusable/table/table-header-row.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/stepper/stepperItemChild.ts", + "path": "src/components/reusable/table/table-header.ts", "declarations": [ { "kind": "class", - "description": "Stepper Item child.", - "name": "StepperItemChild", + "description": "`kyn-th` Web Component.\n\nRepresents a custom table header cell (``) for Shidoka's design system tables.\nProvides sorting functionality when enabled and allows alignment customization.", + "name": "TableHeader", "slots": [ { - "description": "Slot for other elements.", + "description": "The content slot for adding header text or content.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "childTitle", + "name": "dense", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines if the cell should have a denser layout.", + "attribute": "dense", + "reflects": true + }, + { + "kind": "field", + "name": "handleContextChange", + "description": "Updates the cell's dense properties when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ] + }, + { + "kind": "field", + "name": "align", + "type": { + "text": "TABLE_CELL_ALIGN" + }, + "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", + "attribute": "align", + "reflects": true + }, + { + "kind": "field", + "name": "sortable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", + "attribute": "sortable", + "reflects": true + }, + { + "kind": "field", + "name": "sortDirection", + "type": { + "text": "SORT_DIRECTION" + }, + "description": "Specifies the direction of sorting applied to the column.", + "attribute": "sortDirection", + "reflects": true + }, + { + "kind": "field", + "name": "headerLabel", "type": { "text": "string" }, "default": "''", - "description": "Child Title. Required for nested child inside step.", - "attribute": "childTitle" + "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", + "attribute": "headerLabel" }, { "kind": "field", - "name": "childLink", + "name": "sortKey", "type": { "text": "string" }, "default": "''", - "description": "Child link.", - "attribute": "childLink" + "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", + "attribute": "sortKey" }, { "kind": "field", - "name": "childSubTitle", + "name": "visiblyHidden", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", + "attribute": "visiblyHidden" + }, + { + "kind": "field", + "name": "width", "type": { "text": "string" }, "default": "''", - "description": "Optional Child Subtitle.", - "attribute": "childSubTitle" + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "width", + "reflects": true }, { "kind": "field", - "name": "childState", + "name": "maxWidth", "type": { "text": "string" }, - "default": "'pending'", - "description": "Child State. `'pending'`, `'active'` & `'completed'`.", - "attribute": "childState" + "default": "''", + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "maxWidth", + "reflects": true + }, + { + "kind": "field", + "name": "minWidth", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "minWidth", + "reflects": true }, { "kind": "method", - "name": "_handleChildStepClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] + "name": "resetSort", + "description": "Resets the sorting direction of the component to its default state.\nUseful for initializing or clearing any applied sorting on the element." }, { "kind": "method", - "name": "getProgressValue", + "name": "toggleSortDirection", "privacy": "private", - "return": { - "type": { - "text": "number" - } - } + "description": "Toggles the sort direction between ascending, descending, and default states.\nIt also dispatches an event to notify parent components of the sorting change." + }, + { + "kind": "method", + "name": "getTextContent" } ], "events": [ { - "description": "Emits event on child click. Only for vertical mode.", - "name": "on-child-click" + "name": "on-sort-changed", + "type": { + "text": "CustomEvent" + }, + "description": "Dispatched when the sort direction is changed." } ], "attributes": [ { - "name": "childTitle", + "name": "dense", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines if the cell should have a denser layout.", + "fieldName": "dense" + }, + { + "name": "align", + "type": { + "text": "TABLE_CELL_ALIGN" + }, + "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", + "fieldName": "align" + }, + { + "name": "sortable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", + "fieldName": "sortable" + }, + { + "name": "sortDirection", + "type": { + "text": "SORT_DIRECTION" + }, + "description": "Specifies the direction of sorting applied to the column.", + "fieldName": "sortDirection" + }, + { + "name": "headerLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", + "fieldName": "headerLabel" + }, + { + "name": "sortKey", "type": { "text": "string" }, "default": "''", - "description": "Child Title. Required for nested child inside step.", - "fieldName": "childTitle" + "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", + "fieldName": "sortKey" }, { - "name": "childLink", + "name": "visiblyHidden", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", + "fieldName": "visiblyHidden" + }, + { + "name": "width", "type": { "text": "string" }, "default": "''", - "description": "Child link.", - "fieldName": "childLink" + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "width" }, { - "name": "childSubTitle", + "name": "maxWidth", "type": { "text": "string" }, "default": "''", - "description": "Optional Child Subtitle.", - "fieldName": "childSubTitle" + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "maxWidth" }, { - "name": "childState", + "name": "minWidth", "type": { "text": "string" }, - "default": "'pending'", - "description": "Child State. `'pending'`, `'active'` & `'completed'`.", - "fieldName": "childState" + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "minWidth" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-stepper-item-child", + "tagName": "kyn-th", "customElement": true } ], "exports": [ { "kind": "js", - "name": "StepperItemChild", + "name": "TableHeader", "declaration": { - "name": "StepperItemChild", - "module": "src/components/reusable/stepper/stepperItemChild.ts" + "name": "TableHeader", + "module": "src/components/reusable/table/table-header.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-stepper-item-child", + "name": "kyn-th", "declaration": { - "name": "StepperItemChild", - "module": "src/components/reusable/stepper/stepperItemChild.ts" + "name": "TableHeader", + "module": "src/components/reusable/table/table-header.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/defs.ts", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Table", - "declaration": { - "name": "Table", - "module": "./table" - } - }, - { - "kind": "js", - "name": "TableCell", - "declaration": { - "name": "TableCell", - "module": "./table-cell" - } - }, - { - "kind": "js", - "name": "TableRow", - "declaration": { - "name": "TableRow", - "module": "./table-row" - } - }, - { - "kind": "js", - "name": "TableBody", - "declaration": { - "name": "TableBody", - "module": "./table-body" - } - }, - { - "kind": "js", - "name": "TableHead", - "declaration": { - "name": "TableHead", - "module": "./table-head" - } - }, - { - "kind": "js", - "name": "TableHeader", - "declaration": { - "name": "TableHeader", - "module": "./table-header" - } - }, - { - "kind": "js", - "name": "TableFoot", - "declaration": { - "name": "TableFoot", - "module": "./table-foot" - } - }, - { - "kind": "js", - "name": "TableFooter", - "declaration": { - "name": "TableFooter", - "module": "./table-footer" - } - }, + "path": "src/components/reusable/table/table-legend-item.ts", + "declarations": [ { - "kind": "js", - "name": "TableLegend", - "declaration": { - "name": "TableLegend", - "module": "./table-legend" - } - }, + "kind": "class", + "description": "Table Legend Item", + "name": "TableLegendItem", + "slots": [ + { + "description": "Default slot for icon and text.", + "name": "unnamed" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-table-legend-item", + "customElement": true + } + ], + "exports": [ { "kind": "js", "name": "TableLegendItem", "declaration": { "name": "TableLegendItem", - "module": "./table-legend-item" - } - }, - { - "kind": "js", - "name": "TableToolbar", - "declaration": { - "name": "TableToolbar", - "module": "./table-toolbar" - } - }, - { - "kind": "js", - "name": "TableContainer", - "declaration": { - "name": "TableContainer", - "module": "./table-container" - } - }, - { - "kind": "js", - "name": "TableHeaderRow", - "declaration": { - "name": "TableHeaderRow", - "module": "./table-header-row" - } - }, - { - "kind": "js", - "name": "TableExpandedRow", - "declaration": { - "name": "TableExpandedRow", - "module": "./table-expanded-row" + "module": "src/components/reusable/table/table-legend-item.ts" } }, { - "kind": "js", - "name": "TableSkeleton", + "kind": "custom-element-definition", + "name": "kyn-table-legend-item", "declaration": { - "name": "TableSkeleton", - "module": "./table.skeleton" + "name": "TableLegendItem", + "module": "src/components/reusable/table/table-legend-item.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-body.ts", + "path": "src/components/reusable/table/table-legend.ts", "declarations": [ { "kind": "class", - "description": "`kyn-tbody` Web Component.\n\nRepresents the body section of Shidoka's design system tables. Designed to provide\na consistent look and feel, and can offer striped rows for enhanced readability.", - "name": "TableBody", + "description": "Table Legend", + "name": "TableLegend", "slots": [ { - "description": "The content slot for adding rows (``) within the table body.", + "description": "Default slot for Legend Items.", "name": "unnamed" } ], - "members": [ - { - "kind": "field", - "name": "striped", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the rows in the table body should be striped.", - "attribute": "striped", - "reflects": true - }, - { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the row's striped property when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] - } - ], - "events": [ - { - "name": "on-rows-change", - "type": { - "text": "CustomEvent" - }, - "description": "Dispatched when the rows in the table body change." - } - ], - "attributes": [ - { - "name": "striped", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the rows in the table body should be striped.", - "fieldName": "striped" - } - ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tbody", + "tagName": "kyn-table-legend", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableBody", + "name": "TableLegend", "declaration": { - "name": "TableBody", - "module": "src/components/reusable/table/table-body.ts" + "name": "TableLegend", + "module": "src/components/reusable/table/table-legend.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tbody", + "name": "kyn-table-legend", "declaration": { - "name": "TableBody", - "module": "src/components/reusable/table/table-body.ts" + "name": "TableLegend", + "module": "src/components/reusable/table/table-legend.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-cell.ts", + "path": "src/components/reusable/table/table-row.ts", "declarations": [ { "kind": "class", - "description": "`kyn-td` Web Component.\n\nRepresents a table cell (data cell) within Shidoka's design system tables.\nAllows customization of alignment and can reflect the sort direction when\nused within sortable columns.", - "name": "TableCell", + "description": "`kyn-tr` Web Component.\n\nRepresents a table row (``) equivalent for custom tables created with Shidoka's design system.\nIt primarily acts as a container for individual table cells and behaves similarly to a native `` element.", + "name": "TableRow", "slots": [ { - "description": "The content slot for adding table data inside the cell.", + "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "dense", + "name": "rowId", + "type": { + "text": "string" + }, + "default": "''", + "description": "rowId: String - Unique identifier for the row.", + "attribute": "rowId", + "reflects": true + }, + { + "kind": "field", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "attribute": "dense", + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "attribute": "selected", "reflects": true }, { "kind": "field", - "name": "align", + "name": "checkboxSelection", "type": { - "text": "TABLE_CELL_ALIGN" + "text": "boolean" }, - "description": "Determines the text alignment of the table cell's content.", - "attribute": "align", + "default": "false", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "attribute": "checkboxSelection", "reflects": true }, { "kind": "field", - "name": "width", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "width", + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "attribute": "dense" + }, + { + "kind": "field", + "name": "unread", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Unread row state.", + "attribute": "unread" + }, + { + "kind": "field", + "name": "locked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "locked", "reflects": true }, { "kind": "field", - "name": "maxWidth", + "name": "expandable", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "maxWidth", + "default": "false", + "description": "expandable: Boolean indicating whether the row is expandable.", + "attribute": "expandable", "reflects": true }, { "kind": "field", - "name": "minWidth", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "minWidth", + "default": "false", + "description": "expanded: Boolean indicating whether the row is expanded.", + "attribute": "expanded", "reflects": true }, { @@ -10929,10 +10319,21 @@ "text": "boolean" }, "default": "false", - "description": "Disables the cell.", + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", "attribute": "disabled", "reflects": true }, + { + "kind": "field", + "name": "preventHighlight", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "attribute": "preventHighlight", + "reflects": true + }, { "kind": "field", "name": "dimmed", @@ -10940,14 +10341,24 @@ "text": "boolean" }, "default": "false", - "description": "Dim the cell.", + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", "attribute": "dimmed", "reflects": true }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", + "description": "Text string customization.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, { "kind": "field", "name": "handleContextChange", - "description": "Updates the cell's dense properties when the context changes.", + "description": "Updates the cell's dense and ellipsis properties when the context changes.", "parameters": [ { "description": "The updated context.", @@ -10957,698 +10368,579 @@ } } ] - } - ], - "attributes": [ + }, { - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "fieldName": "dense" + "kind": "method", + "name": "handleRowSelectionChange", + "parameters": [ + { + "name": "event", + "type": { + "text": "CustomEvent" + } + } + ], + "description": "Handles the change of selection state for a specific row." }, { - "name": "align", - "type": { - "text": "TABLE_CELL_ALIGN" - }, - "description": "Determines the text alignment of the table cell's content.", - "fieldName": "align" + "kind": "method", + "name": "_handleUserInitiatedToggleExpando", + "parameters": [ + { + "name": "expanded", + "default": "!this.expanded" + } + ] }, { - "name": "width", + "kind": "method", + "name": "_handleExpanding", + "privacy": "private" + } + ], + "events": [ + { + "name": "on-row-select", "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "width" + "text": "CustomEvent" + } }, { - "name": "maxWidth", + "name": "table-row-expando-beingtoggled", "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "maxWidth" + "text": "CustomEvent" + } }, { - "name": "minWidth", + "name": "table-row-expando-toggled", + "type": { + "text": "CustomEvent" + } + } + ], + "attributes": [ + { + "name": "rowId", "type": { "text": "string" }, "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "minWidth" + "description": "rowId: String - Unique identifier for the row.", + "fieldName": "rowId" }, { - "name": "disabled", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the cell.", - "fieldName": "disabled" + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "fieldName": "selected" }, { - "name": "dimmed", + "name": "checkboxSelection", "type": { "text": "boolean" }, "default": "false", - "description": "Dim the cell.", - "fieldName": "dimmed" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-td", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableCell", - "declaration": { - "name": "TableCell", - "module": "src/components/reusable/table/table-cell.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-td", - "declaration": { - "name": "TableCell", - "module": "src/components/reusable/table/table-cell.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-container.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-table-container` Web Component.\n\nProvides a container for Shidoka's design system tables. It's designed to encapsulate\nand apply styles uniformly across the table elements.", - "name": "TableContainer", - "slots": [ - { - "description": "The content slot for adding table and related elements.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "tabIndex", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "fieldName": "checkboxSelection" + }, + { + "name": "dense", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "attribute": "tabIndex", - "reflects": true - } - ], - "attributes": [ + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "fieldName": "dense" + }, { - "name": "tabIndex", + "name": "unread", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "fieldName": "tabIndex" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-container", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableContainer", - "declaration": { - "name": "TableContainer", - "module": "src/components/reusable/table/table-container.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-table-container", - "declaration": { - "name": "TableContainer", - "module": "src/components/reusable/table/table-container.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-context.ts", - "declarations": [ - { - "kind": "variable", - "name": "tableContext" - } - ], - "exports": [ - { - "kind": "js", - "name": "tableContext", - "declaration": { - "name": "tableContext", - "module": "src/components/reusable/table/table-context.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-expanded-row.ts", - "declarations": [ - { - "kind": "class", - "description": "\n`kyn-expanded-tr` Web Component.\n\nDesigned to display additional details for a row in a table.\nThe row is expandable and can be expanded/collapsed by toggling the plus/minus icons.", - "name": "TableExpandedRow", - "slots": [ + "default": "false", + "description": "Unread row state.", + "fieldName": "unread" + }, { - "description": "The slot for adding content to the expandable details section.", - "name": "unnamed" - } - ], - "members": [ + "name": "locked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "locked" + }, { - "kind": "field", - "name": "colSpan", + "name": "expandable", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", - "attribute": "colspan" + "default": "false", + "description": "expandable: Boolean indicating whether the row is expandable.", + "fieldName": "expandable" }, { - "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "`true` if the table row should be expanded.", - "attribute": "expanded", - "reflects": true - } - ], - "attributes": [ + "description": "expanded: Boolean indicating whether the row is expanded.", + "fieldName": "expanded" + }, { - "name": "colspan", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", - "fieldName": "colSpan" + "default": "false", + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "disabled" }, { - "name": "expanded", + "name": "preventHighlight", "type": { "text": "boolean" }, "default": "false", - "description": "`true` if the table row should be expanded.", - "fieldName": "expanded" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-expanded-tr", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableExpandedRow", - "declaration": { - "name": "TableExpandedRow", - "module": "src/components/reusable/table/table-expanded-row.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-expanded-tr", - "declaration": { - "name": "TableExpandedRow", - "module": "src/components/reusable/table/table-expanded-row.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-foot.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-tfoot` Web Component.\n\nRepresents a custom table foot (``) for Shidoka's design system tables.\nDesigned to contain and style table footer rows (``) and footer cells (``).", - "name": "TableFoot", - "slots": [ + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "fieldName": "preventHighlight" + }, { - "description": "The content slot for adding table foot rows.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-tfoot", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableFoot", - "declaration": { - "name": "TableFoot", - "module": "src/components/reusable/table/table-foot.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-tfoot", - "declaration": { - "name": "TableFoot", - "module": "src/components/reusable/table/table-foot.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-footer.ts", - "declarations": [ - { - "kind": "class", - "description": "Table Footer\n\nIntended to contain Legend and Pagination.", - "name": "TableFooter", - "slots": [ + "name": "dimmed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "fieldName": "dimmed" + }, { - "description": "Default slot.", - "name": "unnamed" + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" } ], - "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-table-footer", + "tagName": "kyn-tr", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableFooter", + "name": "TableRow", "declaration": { - "name": "TableFooter", - "module": "src/components/reusable/table/table-footer.ts" + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table-footer", + "name": "kyn-tr", "declaration": { - "name": "TableFooter", - "module": "src/components/reusable/table/table-footer.ts" + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-head.ts", + "path": "src/components/reusable/table/table-toolbar.ts", "declarations": [ { "kind": "class", - "description": "`kyn-thead` Web Component.\n\nRepresents a custom table head (``) for Shidoka's design system tables.\nDesigned to contain and style table header rows (``) and header cells (``).", - "name": "TableHead", + "description": "`kyn-table-toolbar` Web Component.\n\nThis component provides a toolbar for tables, primarily featuring a title and additional content.\nThe title is rendered prominently, while the slot can be used for controls, buttons, or other interactive elements.", + "name": "TableToolbar", "slots": [ { - "description": "The content slot for adding table header rows (``).", + "description": "The primary content slot for controls, buttons, or other toolbar content.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "stickyHeader", + "name": "tableTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "attribute": "stickyHeader", - "reflects": true + "default": "''", + "description": "The title for the toolbar", + "attribute": "tableTitle" }, { "kind": "field", - "name": "handleContextChange", - "description": "Update the stickyHeader property when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] - }, - { - "kind": "method", - "name": "handleChildSort", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "CustomEvent" - } - } - ] + "name": "tableSubtitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "The subtitle for the toolbar", + "attribute": "tableSubtitle" } ], "attributes": [ { - "name": "stickyHeader", + "name": "tableTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "fieldName": "stickyHeader" + "default": "''", + "description": "The title for the toolbar", + "fieldName": "tableTitle" + }, + { + "name": "tableSubtitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "The subtitle for the toolbar", + "fieldName": "tableSubtitle" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-thead", + "tagName": "kyn-table-toolbar", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableHead", + "name": "TableToolbar", "declaration": { - "name": "TableHead", - "module": "src/components/reusable/table/table-head.ts" + "name": "TableToolbar", + "module": "src/components/reusable/table/table-toolbar.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-thead", + "name": "kyn-table-toolbar", "declaration": { - "name": "TableHead", - "module": "src/components/reusable/table/table-head.ts" + "name": "TableToolbar", + "module": "src/components/reusable/table/table-toolbar.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-header-row.ts", + "path": "src/components/reusable/table/table.skeleton.ts", "declarations": [ { "kind": "class", - "description": "`kyn-header-tr` Web Component.\n\nThe `` component is designed to function as the\nheader row within a table that's part of Shidoka's design system.", - "name": "TableHeaderRow", + "description": "`kyn-table-skeleton` Web Component.\nA skeleton loading state for the table component that mirrors its structure.", + "name": "TableSkeleton", "members": [ { "kind": "field", - "name": "expandableColumnWidth", + "name": "rows", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of skeleton rows to display.", + "attribute": "rows" + }, + { + "kind": "field", + "name": "showPagination", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Shows/hides pagination skeleton.", + "attribute": "showPagination" + }, + { + "kind": "field", + "name": "dense", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets dense mode value.", + "attribute": "dense" + }, + { + "kind": "field", + "name": "striped", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets striped rows value.", + "attribute": "striped" + }, + { + "kind": "field", + "name": "hideTableTitles", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Show/hide table header.", + "attribute": "hideTableTitles" + }, + { + "kind": "field", + "name": "fixedLayout", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Fixed layout boolean.", + "attribute": "fixedLayout" + }, + { + "kind": "field", + "name": "tableTitle", "type": { "text": "string" }, - "default": "'64px'", - "description": "expandableColumnWidth: The width of the expandable column.", - "attribute": "expandableColumnWidth" + "default": "''", + "description": "Sets title to display in the table toolbar.", + "attribute": "tableTitle" }, { "kind": "field", - "name": "multiSelectColumnWidth", + "name": "tableSubtitle", "type": { "text": "string" }, - "default": "'64px'", - "description": "multiSelectColumnWidth: The width of the multi-select column.", - "attribute": "multiSelectColumnWidth" + "default": "''", + "description": "Sets subtitle to display in the table toolbar.", + "attribute": "tableSubtitle" }, { - "kind": "method", - "name": "handleToggleSelectionAll", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - } - } - ], - "description": "Toggles the selection state of all rows in the table." + "kind": "field", + "name": "showGlobalFilter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Shows/hides golbal filter skeleton.", + "attribute": "showGlobalFilter" }, { "kind": "method", - "name": "updateHeaderCheckboxState", + "name": "renderSkeletonCell", + "privacy": "private", "parameters": [ { - "name": "indeterminate", - "type": { - "text": "boolean" - } - }, - { - "name": "checked", + "name": "type", "type": { - "text": "boolean" + "text": "'thead' | 'tbody'" } } - ], - "description": "Updates the state of the header checkbox based on the number of\nselected rows." + ] + } + ], + "attributes": [ + { + "name": "rows", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of skeleton rows to display.", + "fieldName": "rows" }, { - "kind": "field", - "name": "rowId", + "name": "showPagination", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "attribute": "rowId", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "false", + "description": "Shows/hides pagination skeleton.", + "fieldName": "showPagination" }, { - "kind": "field", - "name": "selected", + "name": "dense", "type": { "text": "boolean" }, "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "attribute": "selected", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Sets dense mode value.", + "fieldName": "dense" }, { - "kind": "field", - "name": "checkboxSelection", + "name": "striped", "type": { "text": "boolean" }, "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "attribute": "checkboxSelection", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Sets striped rows value.", + "fieldName": "striped" }, { - "kind": "field", - "name": "dense", + "name": "hideTableTitles", "type": { "text": "boolean" }, "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "attribute": "dense", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Show/hide table header.", + "fieldName": "hideTableTitles" + }, + { + "name": "fixedLayout", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Fixed layout boolean.", + "fieldName": "fixedLayout" + }, + { + "name": "tableTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title to display in the table toolbar.", + "fieldName": "tableTitle" }, { - "kind": "field", - "name": "unread", + "name": "tableSubtitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Unread row state.", - "attribute": "unread", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "''", + "description": "Sets subtitle to display in the table toolbar.", + "fieldName": "tableSubtitle" }, { - "kind": "field", - "name": "locked", + "name": "showGlobalFilter", "type": { "text": "boolean" }, "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "locked", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, + "description": "Shows/hides golbal filter skeleton.", + "fieldName": "showGlobalFilter" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-table-skeleton", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TableSkeleton", + "declaration": { + "name": "TableSkeleton", + "module": "src/components/reusable/table/table.skeleton.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-table-skeleton", + "declaration": { + "name": "TableSkeleton", + "module": "src/components/reusable/table/table.skeleton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-table` Web Component.\nThis component provides a table with sorting, pagination, and selection capabilities.\nIt is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.", + "name": "Table", + "members": [ { "kind": "field", - "name": "expandable", + "name": "checkboxSelection", "type": { "text": "boolean" }, + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "attribute": "expandable", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "attribute": "checkboxSelection" }, { "kind": "field", - "name": "expanded", + "name": "striped", "type": { "text": "boolean" }, + "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "attribute": "expanded", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "attribute": "striped" }, { "kind": "field", - "name": "disabled", + "name": "stickyHeader", "type": { "text": "boolean" }, + "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "disabled", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "attribute": "stickyHeader" }, { "kind": "field", - "name": "preventHighlight", + "name": "dense", "type": { "text": "boolean" }, + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "attribute": "preventHighlight", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "attribute": "dense" }, { "kind": "field", - "name": "dimmed", + "name": "fixedLayout", "type": { "text": "boolean" }, + "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "attribute": "dimmed", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "attribute": "fixedLayout" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "kind": "method", + "name": "_updateHeaderCheckbox", + "privacy": "private", + "description": "Updates the state of the header checkbox based on the number of\nselected rows." }, { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense and ellipsis properties when the context changes.", + "kind": "method", + "name": "_handleRowSelectionChange", + "privacy": "private", "parameters": [ { - "description": "The updated context.", - "name": "context", + "name": "event", "type": { - "text": "TableContextType" + "text": "CustomEvent" } } ], - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Handles the change of selection state for a specific row." }, { "kind": "method", - "name": "handleRowSelectionChange", + "name": "_toggleSelectionAll", + "privacy": "private", "parameters": [ { "name": "event", @@ -11657,1576 +10949,1834 @@ } } ], - "description": "Handles the change of selection state for a specific row.", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Toggles the selection state of all rows in the table." }, { "kind": "method", - "name": "_handleUserInitiatedToggleExpando", - "parameters": [ - { - "name": "expanded", - "default": "!this.expanded" + "name": "updateAfterExternalChanges", + "privacy": "public", + "description": "Resets the selection state of all rows in the table.\nThis method is called when the table is reset or cleared.", + "return": { + "type": { + "text": "" } - ], - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" } }, { "kind": "method", - "name": "_handleExpanding", - "privacy": "private", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - } - ], - "events": [ - { - "name": "on-header-checkbox-toggle", - "type": { - "text": "CustomEvent" - } - }, - { - "name": "on-row-select", - "type": { - "text": "CustomEvent" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" + "name": "getSelectedRows", + "privacy": "public", + "description": "Returns the selected rows in the table.", + "return": { + "type": { + "text": "" + } } }, { - "name": "table-row-expando-beingtoggled", - "type": { - "text": "CustomEvent" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "kind": "method", + "name": "_handleRowsChange", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "CustomEvent" + }, + "description": "The custom event containing the updated rows." + } + ], + "description": "Handles the change of rows in the table body." }, { - "name": "table-row-expando-toggled", - "type": { - "text": "CustomEvent" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "kind": "method", + "name": "_updateSelectionStates", + "privacy": "private" } ], - "attributes": [ + "events": [ { - "name": "expandableColumnWidth", + "name": "on-row-selection-change", "type": { - "text": "string" + "text": "CustomEvent" }, - "default": "'64px'", - "description": "expandableColumnWidth: The width of the expandable column.", - "fieldName": "expandableColumnWidth" + "description": "Dispatched when the selection state of a row is toggled." }, { - "name": "multiSelectColumnWidth", + "name": "on-all-rows-selection-change", "type": { - "text": "string" + "text": "CustomEvent" }, - "default": "'64px'", - "description": "multiSelectColumnWidth: The width of the multi-select column.", - "fieldName": "multiSelectColumnWidth" - }, + "description": "Dispatched when the selection state of all rows is toggled." + } + ], + "attributes": [ { - "name": "rowId", + "name": "checkboxSelection", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "fieldName": "rowId", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "default": "false", + "fieldName": "checkboxSelection" }, { - "name": "selected", + "name": "striped", "type": { "text": "boolean" }, + "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "fieldName": "selected", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "fieldName": "striped" }, { - "name": "checkboxSelection", + "name": "stickyHeader", "type": { "text": "boolean" }, + "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "fieldName": "checkboxSelection", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "fieldName": "stickyHeader" }, { "name": "dense", "type": { "text": "boolean" }, - "default": "false", "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "fieldName": "dense", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "false", + "fieldName": "dense" }, { - "name": "unread", + "name": "fixedLayout", "type": { "text": "boolean" }, + "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", "default": "false", - "description": "Unread row state.", - "fieldName": "unread", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, + "fieldName": "fixedLayout" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-table", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Table", + "declaration": { + "name": "Table", + "module": "src/components/reusable/table/table.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-table", + "declaration": { + "name": "Table", + "module": "src/components/reusable/table/table.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tabs/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Tabs", + "declaration": { + "name": "Tabs", + "module": "./tabs" + } + }, + { + "kind": "js", + "name": "Tab", + "declaration": { + "name": "Tab", + "module": "./tab" + } + }, + { + "kind": "js", + "name": "TabPanel", + "declaration": { + "name": "TabPanel", + "module": "./tabPanel" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tabs/tab.ts", + "declarations": [ + { + "kind": "class", + "description": "Tabs.", + "name": "Tab", + "slots": [ { - "name": "locked", + "description": "Slot for tab button text.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "id", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "locked", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "''", + "description": "Tab ID, required.", + "attribute": "id", + "reflects": true }, { - "name": "expandable", + "kind": "field", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "fieldName": "expandable", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tab selected state. Must match Tab Panel visible state.", + "attribute": "selected", + "reflects": true }, { - "name": "expanded", + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "fieldName": "expanded", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tab disabled state.", + "attribute": "disabled" }, { - "name": "disabled", + "kind": "method", + "name": "_handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + }, + "description": "The parameter \"e\" is an event object that represents the event that triggered the\nclick event handler." + } + ], + "description": "Dispatches a custom event called 'tab-activated' with the original event and tabId as details,\nif the tab is not selected." + } + ], + "attributes": [ + { + "name": "id", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "disabled", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "''", + "description": "Tab ID, required.", + "fieldName": "id" }, { - "name": "preventHighlight", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "fieldName": "preventHighlight", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tab selected state. Must match Tab Panel visible state.", + "fieldName": "selected" }, { - "name": "dimmed", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "fieldName": "dimmed", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tab disabled state.", + "fieldName": "disabled" } ], "superclass": { - "name": "TableRow", - "module": "/src/components/reusable/table/table-row" - }, - "tagName": "kyn-header-tr", - "customElement": true, - "slots": [ - { - "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", - "name": "unnamed", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - } - ] + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tab", + "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableHeaderRow", + "name": "Tab", "declaration": { - "name": "TableHeaderRow", - "module": "src/components/reusable/table/table-header-row.ts" + "name": "Tab", + "module": "src/components/reusable/tabs/tab.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-tr", + "name": "kyn-tab", "declaration": { - "name": "TableHeaderRow", - "module": "src/components/reusable/table/table-header-row.ts" + "name": "Tab", + "module": "src/components/reusable/tabs/tab.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-header.ts", + "path": "src/components/reusable/tabs/tabPanel.ts", "declarations": [ { "kind": "class", - "description": "`kyn-th` Web Component.\n\nRepresents a custom table header cell (``) for Shidoka's design system tables.\nProvides sorting functionality when enabled and allows alignment customization.", - "name": "TableHeader", + "description": "Tabs.", + "name": "TabPanel", "slots": [ { - "description": "The content slot for adding header text or content.", + "description": "Slot for tab content.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "dense", + "name": "tabId", + "type": { + "text": "string" + }, + "default": "''", + "description": "Matching Tab ID, required.", + "attribute": "tabId" + }, + { + "kind": "field", + "name": "visible", "type": { "text": "boolean" }, "default": "false", - "description": "Determines if the cell should have a denser layout.", - "attribute": "dense", + "description": "Tab Panel visible state. Must match Tab selected state.", + "attribute": "visible", "reflects": true }, { "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense properties when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] - }, + "name": "noPadding", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Remove side padding (left/right) on tab panel.", + "attribute": "noPadding" + } + ], + "attributes": [ { - "kind": "field", - "name": "align", + "name": "tabId", "type": { - "text": "TABLE_CELL_ALIGN" + "text": "string" }, - "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", - "attribute": "align", - "reflects": true + "default": "''", + "description": "Matching Tab ID, required.", + "fieldName": "tabId" }, { - "kind": "field", - "name": "sortable", + "name": "visible", "type": { "text": "boolean" }, "default": "false", - "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", - "attribute": "sortable", - "reflects": true + "description": "Tab Panel visible state. Must match Tab selected state.", + "fieldName": "visible" }, { - "kind": "field", - "name": "sortDirection", + "name": "noPadding", "type": { - "text": "SORT_DIRECTION" + "text": "boolean" }, - "description": "Specifies the direction of sorting applied to the column.", - "attribute": "sortDirection", - "reflects": true + "default": "false", + "description": "Remove side padding (left/right) on tab panel.", + "fieldName": "noPadding" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tab-panel", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TabPanel", + "declaration": { + "name": "TabPanel", + "module": "src/components/reusable/tabs/tabPanel.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-tab-panel", + "declaration": { + "name": "TabPanel", + "module": "src/components/reusable/tabs/tabPanel.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tabs/tabs.ts", + "declarations": [ + { + "kind": "class", + "description": "Tabs.", + "name": "Tabs", + "slots": [ + { + "description": "Slot for kyn-tab-panel components.", + "name": "unnamed" }, + { + "description": "Slot for kyn-tab components.", + "name": "tabs" + } + ], + "members": [ { "kind": "field", - "name": "headerLabel", + "name": "tabStyle", "type": { "text": "string" }, - "default": "''", - "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", - "attribute": "headerLabel" + "default": "'contained'", + "description": "Tab style. `'contained'` or `'line'`.", + "attribute": "tabStyle" }, { "kind": "field", - "name": "sortKey", + "name": "tabSize", "type": { "text": "string" }, - "default": "''", - "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", - "attribute": "sortKey" + "default": "'md'", + "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", + "attribute": "tabSize" }, { "kind": "field", - "name": "visiblyHidden", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", - "attribute": "visiblyHidden" + "description": "Vertical orientation.", + "attribute": "vertical" }, { "kind": "field", - "name": "width", + "name": "disableAutoFocusUpdate", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "width", - "reflects": true + "default": "false", + "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", + "attribute": "disableAutoFocusUpdate" }, { - "kind": "field", - "name": "maxWidth", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "maxWidth", - "reflects": true + "kind": "method", + "name": "_handleSlotChangeTabs", + "privacy": "private" }, { - "kind": "field", - "name": "minWidth", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "minWidth", - "reflects": true + "kind": "method", + "name": "_updateChildren", + "privacy": "private" }, { "kind": "method", - "name": "resetSort", - "description": "Resets the sorting direction of the component to its default state.\nUseful for initializing or clearing any applied sorting on the element." + "name": "_handleChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + }, + "description": "The parameter \"e\" is an event object that contains information about the event\nthat triggered the handleChange function." + } + ], + "description": "Updates children and emits a change event based on the provided\nevent details when a child kyn-tab is clicked." }, { "kind": "method", - "name": "toggleSortDirection", + "name": "_updateChildrenSelection", "privacy": "private", - "description": "Toggles the sort direction between ascending, descending, and default states.\nIt also dispatches an event to notify parent components of the sorting change." + "parameters": [ + { + "name": "selectedTabId", + "type": { + "text": "string" + }, + "description": "The selectedTabId parameter is a string that represents the ID of\nthe tab that is currently selected." + }, + { + "name": "updatePanel", + "default": "true" + } + ], + "description": "Updates the selected property of tabs and the visible property of tab panels based on\nthe selected tab ID." }, { "kind": "method", - "name": "getTextContent" + "name": "_emitChangeEvent", + "privacy": "private", + "parameters": [ + { + "name": "origEvent", + "type": { + "text": "any" + }, + "description": "The origEvent parameter is the original event object that triggered the\nchange event. It could be any type of event object, such as a click event or a keydown event." + }, + { + "name": "selectedTabId", + "type": { + "text": "string" + }, + "description": "The selectedTabId parameter is a string that represents the ID of\nthe selected tab." + } + ], + "description": "Creates and dispatches a custom event called 'on-change' with the provided original event and\nselected tab ID as details." + }, + { + "kind": "method", + "name": "_handleKeyboard", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + }, + "description": "The parameter `e` is an event object that represents the keyboard event. It\ncontains information about the keyboard event, such as the key code of the pressed key." + } + ], + "description": "Handles keyboard events for navigating between tabs.", + "return": { + "type": { + "text": "" + } + } } ], "events": [ { - "name": "on-sort-changed", - "type": { - "text": "CustomEvent" - }, - "description": "Dispatched when the sort direction is changed." + "description": "Emits the new selected Tab ID when switching tabs.", + "name": "on-change" } ], "attributes": [ { - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the cell should have a denser layout.", - "fieldName": "dense" - }, - { - "name": "align", - "type": { - "text": "TABLE_CELL_ALIGN" - }, - "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", - "fieldName": "align" - }, - { - "name": "sortable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", - "fieldName": "sortable" - }, - { - "name": "sortDirection", - "type": { - "text": "SORT_DIRECTION" - }, - "description": "Specifies the direction of sorting applied to the column.", - "fieldName": "sortDirection" - }, - { - "name": "headerLabel", + "name": "tabStyle", "type": { "text": "string" }, - "default": "''", - "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", - "fieldName": "headerLabel" + "default": "'contained'", + "description": "Tab style. `'contained'` or `'line'`.", + "fieldName": "tabStyle" }, { - "name": "sortKey", + "name": "tabSize", "type": { "text": "string" }, - "default": "''", - "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", - "fieldName": "sortKey" + "default": "'md'", + "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", + "fieldName": "tabSize" }, { - "name": "visiblyHidden", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", - "fieldName": "visiblyHidden" - }, - { - "name": "width", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "width" - }, - { - "name": "maxWidth", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "maxWidth" + "description": "Vertical orientation.", + "fieldName": "vertical" }, { - "name": "minWidth", + "name": "disableAutoFocusUpdate", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "minWidth" + "default": "false", + "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", + "fieldName": "disableAutoFocusUpdate" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-th", + "tagName": "kyn-tabs", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableHeader", + "name": "Tabs", "declaration": { - "name": "TableHeader", - "module": "src/components/reusable/table/table-header.ts" + "name": "Tabs", + "module": "src/components/reusable/tabs/tabs.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-th", + "name": "kyn-tabs", "declaration": { - "name": "TableHeader", - "module": "src/components/reusable/table/table-header.ts" + "name": "Tabs", + "module": "src/components/reusable/tabs/tabs.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-legend-item.ts", - "declarations": [ - { - "kind": "class", - "description": "Table Legend Item", - "name": "TableLegendItem", - "slots": [ - { - "description": "Default slot for icon and text.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-legend-item", - "customElement": true - } - ], + "path": "src/components/reusable/tag/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "TableLegendItem", + "name": "Tag", "declaration": { - "name": "TableLegendItem", - "module": "src/components/reusable/table/table-legend-item.ts" + "name": "Tag", + "module": "./tag" } }, { - "kind": "custom-element-definition", - "name": "kyn-table-legend-item", + "kind": "js", + "name": "TagGroup", "declaration": { - "name": "TableLegendItem", - "module": "src/components/reusable/table/table-legend-item.ts" + "name": "TagGroup", + "module": "./tagGroup" + } + }, + { + "kind": "js", + "name": "TagSkeleton", + "declaration": { + "name": "TagSkeleton", + "module": "./tag.skeleton" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-legend.ts", + "path": "src/components/reusable/tag/tag.skeleton.ts", "declarations": [ { "kind": "class", - "description": "Table Legend", - "name": "TableLegend", - "slots": [ + "description": "", + "name": "TagSkeleton", + "members": [ { - "description": "Default slot for Legend Items.", - "name": "unnamed" + "kind": "field", + "name": "tagSize", + "type": { + "text": "string" + }, + "default": "'sm'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "attribute": "tagSize" + } + ], + "attributes": [ + { + "name": "tagSize", + "type": { + "text": "string" + }, + "default": "'sm'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "fieldName": "tagSize" } ], - "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-table-legend", + "tagName": "kyn-tag-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableLegend", + "name": "TagSkeleton", "declaration": { - "name": "TableLegend", - "module": "src/components/reusable/table/table-legend.ts" + "name": "TagSkeleton", + "module": "src/components/reusable/tag/tag.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table-legend", + "name": "kyn-tag-skeleton", "declaration": { - "name": "TableLegend", - "module": "src/components/reusable/table/table-legend.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-row.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-tr` Web Component.\n\nRepresents a table row (``) equivalent for custom tables created with Shidoka's design system.\nIt primarily acts as a container for individual table cells and behaves similarly to a native `` element.", - "name": "TableRow", - "slots": [ - { - "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "rowId", - "type": { - "text": "string" - }, - "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "attribute": "rowId", - "reflects": true - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "attribute": "selected", - "reflects": true - }, - { - "kind": "field", - "name": "checkboxSelection", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "attribute": "checkboxSelection", - "reflects": true - }, + "name": "TagSkeleton", + "module": "src/components/reusable/tag/tag.skeleton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tag/tag.ts", + "declarations": [ + { + "kind": "class", + "description": "Tag.", + "name": "Tag", + "members": [ { "kind": "field", - "name": "dense", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "attribute": "dense" + "default": "''", + "description": "Tag name (Required).", + "attribute": "label" }, { "kind": "field", - "name": "unread", + "name": "tagSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Unread row state.", - "attribute": "unread" + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "attribute": "tagSize" }, { "kind": "field", - "name": "locked", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "locked", - "reflects": true + "description": "Specify if the Tag is disabled.", + "attribute": "disabled" }, { "kind": "field", - "name": "expandable", + "name": "filter", "type": { "text": "boolean" }, "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "attribute": "expandable", - "reflects": true + "description": "Determine if Tag state is filter.", + "attribute": "filter" }, { "kind": "field", - "name": "expanded", + "name": "noTruncation", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "attribute": "expanded", - "reflects": true + "description": "Removes label text truncation.", + "attribute": "noTruncation" }, { "kind": "field", - "name": "disabled", + "name": "clickable", "type": { "text": "boolean" }, "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "disabled", - "reflects": true + "description": "Determine if Tag is clickable.", + "attribute": "clickable" }, { "kind": "field", - "name": "preventHighlight", + "name": "tagColor", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "attribute": "preventHighlight", - "reflects": true + "default": "'spruce'", + "description": "Color variants. Default spruce", + "attribute": "tagColor" }, { "kind": "field", - "name": "dimmed", + "name": "clearTagText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "attribute": "dimmed", - "reflects": true - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "default": "'Clear Tag'", + "description": "Clear Tag Text to improve accessibility", + "attribute": "clearTagText" }, { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense and ellipsis properties when the context changes.", + "kind": "method", + "name": "handleTagClear", + "privacy": "private", "parameters": [ { - "description": "The updated context.", - "name": "context", + "name": "e", "type": { - "text": "TableContextType" + "text": "any" + } + }, + { + "name": "value", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "handleRowSelectionChange", + "name": "handleTagClick", + "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { - "text": "CustomEvent" + "text": "any" } - } - ], - "description": "Handles the change of selection state for a specific row." - }, - { - "kind": "method", - "name": "_handleUserInitiatedToggleExpando", - "parameters": [ + }, { - "name": "expanded", - "default": "!this.expanded" + "name": "value", + "type": { + "text": "string" + } } ] - }, - { - "kind": "method", - "name": "_handleExpanding", - "privacy": "private" } ], "events": [ { - "name": "on-row-select", - "type": { - "text": "CustomEvent" - } - }, - { - "name": "table-row-expando-beingtoggled", - "type": { - "text": "CustomEvent" - } - }, - { - "name": "table-row-expando-toggled", - "type": { - "text": "CustomEvent" - } + "description": "Captures the close event and emits the Tag value. Works with filterable tags.", + "name": "on-close" } ], "attributes": [ { - "name": "rowId", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "fieldName": "rowId" - }, - { - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "fieldName": "selected" - }, - { - "name": "checkboxSelection", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "fieldName": "checkboxSelection" - }, - { - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "fieldName": "dense" + "description": "Tag name (Required).", + "fieldName": "label" }, { - "name": "unread", + "name": "tagSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Unread row state.", - "fieldName": "unread" + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "fieldName": "tagSize" }, { - "name": "locked", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "locked" + "description": "Specify if the Tag is disabled.", + "fieldName": "disabled" }, { - "name": "expandable", + "name": "filter", "type": { "text": "boolean" }, "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "fieldName": "expandable" + "description": "Determine if Tag state is filter.", + "fieldName": "filter" }, { - "name": "expanded", + "name": "noTruncation", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "fieldName": "expanded" + "description": "Removes label text truncation.", + "fieldName": "noTruncation" }, { - "name": "disabled", + "name": "clickable", "type": { "text": "boolean" }, "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "disabled" + "description": "Determine if Tag is clickable.", + "fieldName": "clickable" }, { - "name": "preventHighlight", + "name": "tagColor", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "fieldName": "preventHighlight" + "default": "'spruce'", + "description": "Color variants. Default spruce", + "fieldName": "tagColor" }, { - "name": "dimmed", + "name": "clearTagText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "fieldName": "dimmed" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" + "default": "'Clear Tag'", + "description": "Clear Tag Text to improve accessibility", + "fieldName": "clearTagText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tr", + "tagName": "kyn-tag", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableRow", + "name": "Tag", "declaration": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" + "name": "Tag", + "module": "src/components/reusable/tag/tag.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tr", + "name": "kyn-tag", "declaration": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" + "name": "Tag", + "module": "src/components/reusable/tag/tag.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-toolbar.ts", + "path": "src/components/reusable/tag/tagGroup.ts", "declarations": [ { "kind": "class", - "description": "`kyn-table-toolbar` Web Component.\n\nThis component provides a toolbar for tables, primarily featuring a title and additional content.\nThe title is rendered prominently, while the slot can be used for controls, buttons, or other interactive elements.", - "name": "TableToolbar", + "description": "Tag & Tag Group", + "name": "TagGroup", "slots": [ { - "description": "The primary content slot for controls, buttons, or other toolbar content.", + "description": "Slot for individual tags and tagsskeleton.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "tableTitle", + "name": "textStrings", "type": { - "text": "string" + "text": "object" }, - "default": "''", - "description": "The title for the toolbar", - "attribute": "tableTitle" + "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", + "description": "Text string customization.", + "attribute": "textStrings" }, { "kind": "field", - "name": "tableSubtitle", + "name": "limitTags", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", + "attribute": "limitTags" + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tag group filter", + "attribute": "filter" + }, + { + "kind": "field", + "name": "tagSize", "type": { "text": "string" }, - "default": "''", - "description": "The subtitle for the toolbar", - "attribute": "tableSubtitle" + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "attribute": "tagSize" + }, + { + "kind": "method", + "name": "_handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_toggleRevealed", + "privacy": "private", + "parameters": [ + { + "name": "revealed", + "type": { + "text": "boolean" + } + } + ] } ], "attributes": [ { - "name": "tableTitle", + "name": "textStrings", "type": { - "text": "string" + "text": "object" }, - "default": "''", - "description": "The title for the toolbar", - "fieldName": "tableTitle" + "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", + "description": "Text string customization.", + "fieldName": "textStrings" }, { - "name": "tableSubtitle", + "name": "limitTags", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", + "fieldName": "limitTags" + }, + { + "name": "filter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tag group filter", + "fieldName": "filter" + }, + { + "name": "tagSize", "type": { "text": "string" }, - "default": "''", - "description": "The subtitle for the toolbar", - "fieldName": "tableSubtitle" + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "fieldName": "tagSize" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-table-toolbar", + "tagName": "kyn-tag-group", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableToolbar", + "name": "TagGroup", "declaration": { - "name": "TableToolbar", - "module": "src/components/reusable/table/table-toolbar.ts" + "name": "TagGroup", + "module": "src/components/reusable/tag/tagGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table-toolbar", + "name": "kyn-tag-group", "declaration": { - "name": "TableToolbar", - "module": "src/components/reusable/table/table-toolbar.ts" + "name": "TagGroup", + "module": "src/components/reusable/tag/tagGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table.skeleton.ts", + "path": "src/components/reusable/textArea/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "TextArea", + "declaration": { + "name": "TextArea", + "module": "./textArea" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/textArea/textArea.ts", "declarations": [ { "kind": "class", - "description": "`kyn-table-skeleton` Web Component.\nA skeleton loading state for the table component that mirrors its structure.", - "name": "TableSkeleton", + "description": "Text area.", + "name": "TextArea", + "slots": [ + { + "description": "Slot for tooltip.", + "name": "tooltip" + } + ], "members": [ { "kind": "field", - "name": "rows", + "name": "label", "type": { - "text": "number" + "text": "string" }, - "default": "5", - "description": "Number of skeleton rows to display.", - "attribute": "rows" + "default": "''", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "showPagination", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Shows/hides pagination skeleton.", - "attribute": "showPagination" + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" }, { "kind": "field", - "name": "dense", + "name": "placeholder", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Sets dense mode value.", - "attribute": "dense" + "default": "''", + "description": "Input placeholder.", + "attribute": "placeholder" }, { "kind": "field", - "name": "striped", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Sets striped rows value.", - "attribute": "striped" + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "hideTableTitles", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Show/hide table header.", - "attribute": "hideTableTitles" + "description": "Input disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "fixedLayout", + "name": "maxLength", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Fixed layout boolean.", - "attribute": "fixedLayout" + "description": "Maximum number of characters.", + "attribute": "maxLength" }, { "kind": "field", - "name": "tableTitle", + "name": "minLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets title to display in the table toolbar.", - "attribute": "tableTitle" + "description": "Minimum number of characters.", + "attribute": "minLength" }, { "kind": "field", - "name": "tableSubtitle", + "name": "rows", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets subtitle to display in the table toolbar.", - "attribute": "tableSubtitle" + "description": "textarea rows attribute. The number of visible text lines.", + "attribute": "rows" }, { "kind": "field", - "name": "showGlobalFilter", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n errorText: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Shows/hides golbal filter skeleton.", - "attribute": "showGlobalFilter" + "text": "object" + } }, { "kind": "method", - "name": "renderSkeletonCell", + "name": "handleInput", "privacy": "private", "parameters": [ { - "name": "type", + "name": "e", "type": { - "text": "'thead' | 'tbody'" + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" } } ] } ], + "events": [ + { + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-input" + } + ], "attributes": [ { - "name": "rows", + "name": "label", "type": { - "text": "number" + "text": "string" }, - "default": "5", - "description": "Number of skeleton rows to display.", - "fieldName": "rows" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "showPagination", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Shows/hides pagination skeleton.", - "fieldName": "showPagination" + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "dense", + "name": "placeholder", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Sets dense mode value.", - "fieldName": "dense" + "default": "''", + "description": "Input placeholder.", + "fieldName": "placeholder" }, { - "name": "striped", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Sets striped rows value.", - "fieldName": "striped" + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "hideTableTitles", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Show/hide table header.", - "fieldName": "hideTableTitles" + "description": "Input disabled state.", + "fieldName": "disabled" }, { - "name": "fixedLayout", + "name": "maxLength", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Fixed layout boolean.", - "fieldName": "fixedLayout" + "description": "Maximum number of characters.", + "fieldName": "maxLength" }, { - "name": "tableTitle", + "name": "minLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets title to display in the table toolbar.", - "fieldName": "tableTitle" + "description": "Minimum number of characters.", + "fieldName": "minLength" }, { - "name": "tableSubtitle", + "name": "rows", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets subtitle to display in the table toolbar.", - "fieldName": "tableSubtitle" + "description": "textarea rows attribute. The number of visible text lines.", + "fieldName": "rows" }, { - "name": "showGlobalFilter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Shows/hides golbal filter skeleton.", - "fieldName": "showGlobalFilter" + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-table-skeleton", + "tagName": "kyn-text-area", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableSkeleton", + "name": "TextArea", "declaration": { - "name": "TableSkeleton", - "module": "src/components/reusable/table/table.skeleton.ts" + "name": "TextArea", + "module": "src/components/reusable/textArea/textArea.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table-skeleton", + "name": "kyn-text-area", "declaration": { - "name": "TableSkeleton", - "module": "src/components/reusable/table/table.skeleton.ts" + "name": "TextArea", + "module": "src/components/reusable/textArea/textArea.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table.ts", + "path": "src/components/reusable/textInput/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "TextInput", + "declaration": { + "name": "TextInput", + "module": "./textInput" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/textInput/textInput.ts", "declarations": [ { "kind": "class", - "description": "`kyn-table` Web Component.\nThis component provides a table with sorting, pagination, and selection capabilities.\nIt is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.", - "name": "Table", + "description": "Text input.", + "name": "TextInput", + "slots": [ + { + "description": "Slot for contextual icon.", + "name": "icon" + }, + { + "description": "Slot for tooltip.", + "name": "tooltip" + } + ], "members": [ { "kind": "field", - "name": "checkboxSelection", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "default": "false", - "attribute": "checkboxSelection" + "default": "''", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "striped", + "name": "type", "type": { - "text": "boolean" + "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" }, - "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", - "default": "false", - "attribute": "striped" + "default": "'text'", + "description": "Input type, limited to options that are \"text like\".", + "attribute": "type" }, { "kind": "field", - "name": "stickyHeader", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" + }, + { + "kind": "field", + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "attribute": "placeholder" + }, + { + "kind": "field", + "name": "required", "type": { "text": "boolean" }, - "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", "default": "false", - "attribute": "stickyHeader" + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "dense", + "name": "disabled", "type": { "text": "boolean" }, - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", "default": "false", - "attribute": "dense" + "description": "Input disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "fixedLayout", + "name": "pattern", + "type": { + "text": "string" + }, + "description": "RegEx pattern to validate.", + "attribute": "pattern" + }, + { + "kind": "field", + "name": "maxLength", + "type": { + "text": "number" + }, + "description": "Maximum number of characters.", + "attribute": "maxLength" + }, + { + "kind": "field", + "name": "minLength", + "type": { + "text": "number" + }, + "description": "Minimum number of characters.", + "attribute": "minLength" + }, + { + "kind": "field", + "name": "iconRight", "type": { "text": "boolean" }, - "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", "default": "false", - "attribute": "fixedLayout" + "description": "Place icon on the right.", + "attribute": "iconRight" }, { - "kind": "method", - "name": "_updateHeaderCheckbox", - "privacy": "private", - "description": "Updates the state of the header checkbox based on the number of\nselected rows." + "kind": "field", + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Visually hide the label.", + "attribute": "hideLabel" }, { - "kind": "method", - "name": "_handleRowSelectionChange", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - } - } - ], - "description": "Handles the change of selection state for a specific row." + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "_toggleSelectionAll", + "name": "_handleInput", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { - "text": "CustomEvent" + "text": "any" } } - ], - "description": "Toggles the selection state of all rows in the table." + ] }, { "kind": "method", - "name": "updateAfterExternalChanges", - "privacy": "public", - "description": "Resets the selection state of all rows in the table.\nThis method is called when the table is reset or cleared.", - "return": { - "type": { - "text": "" - } - } + "name": "_handleClear", + "privacy": "private" }, { "kind": "method", - "name": "getSelectedRows", - "privacy": "public", - "description": "Returns the selected rows in the table.", - "return": { - "type": { - "text": "" + "name": "_emitValue", + "privacy": "private", + "parameters": [ + { + "name": "e", + "optional": true, + "type": { + "text": "any" + } } - } + ] }, { "kind": "method", - "name": "_handleRowsChange", + "name": "_validate", "privacy": "private", "parameters": [ { - "name": "event", + "name": "interacted", "type": { - "text": "CustomEvent" - }, - "description": "The custom event containing the updated rows." + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } } - ], - "description": "Handles the change of rows in the table body." + ] }, { "kind": "method", - "name": "_updateSelectionStates", + "name": "determineIfSlotted", "privacy": "private" } ], "events": [ { - "name": "on-row-selection-change", + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-input" + } + ], + "attributes": [ + { + "name": "label", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Dispatched when the selection state of a row is toggled." + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "on-all-rows-selection-change", + "name": "type", "type": { - "text": "CustomEvent" + "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" }, - "description": "Dispatched when the selection state of all rows is toggled." - } - ], - "attributes": [ + "default": "'text'", + "description": "Input type, limited to options that are \"text like\".", + "fieldName": "type" + }, { - "name": "checkboxSelection", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "default": "false", - "fieldName": "checkboxSelection" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "striped", + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" + }, + { + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "fieldName": "placeholder" + }, + { + "name": "required", "type": { "text": "boolean" }, - "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", "default": "false", - "fieldName": "striped" + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "stickyHeader", + "name": "disabled", "type": { "text": "boolean" }, - "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", "default": "false", - "fieldName": "stickyHeader" + "description": "Input disabled state.", + "fieldName": "disabled" }, { - "name": "dense", + "name": "pattern", + "type": { + "text": "string" + }, + "description": "RegEx pattern to validate.", + "fieldName": "pattern" + }, + { + "name": "maxLength", + "type": { + "text": "number" + }, + "description": "Maximum number of characters.", + "fieldName": "maxLength" + }, + { + "name": "minLength", + "type": { + "text": "number" + }, + "description": "Minimum number of characters.", + "fieldName": "minLength" + }, + { + "name": "iconRight", "type": { "text": "boolean" }, - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", "default": "false", - "fieldName": "dense" + "description": "Place icon on the right.", + "fieldName": "iconRight" }, { - "name": "fixedLayout", + "name": "hideLabel", "type": { "text": "boolean" }, - "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", "default": "false", - "fieldName": "fixedLayout" + "description": "Visually hide the label.", + "fieldName": "hideLabel" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-table", + "tagName": "kyn-text-input", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Table", + "name": "TextInput", "declaration": { - "name": "Table", - "module": "src/components/reusable/table/table.ts" + "name": "TextInput", + "module": "src/components/reusable/textInput/textInput.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table", + "name": "kyn-text-input", "declaration": { - "name": "Table", - "module": "src/components/reusable/table/table.ts" + "name": "TextInput", + "module": "src/components/reusable/textInput/textInput.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textArea/index.ts", + "path": "src/components/reusable/timepicker/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "TextArea", + "name": "TimePicker", "declaration": { - "name": "TextArea", - "module": "./textArea" + "name": "TimePicker", + "module": "./timepicker" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textArea/textArea.ts", + "path": "src/components/reusable/timepicker/timepicker.ts", "declarations": [ { "kind": "class", - "description": "Text area.", - "name": "TextArea", + "description": "Timepicker: uses Flatpickr library,time picker implementation -- `https://flatpickr.js.org/examples/#time-picker`", + "name": "TimePicker", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], - "members": [ + "description": "Slot for tooltip.", + "name": "tooltip" + } + ], + "members": [ + { + "kind": "field", + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "attribute": "label" + }, + { + "kind": "field", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets desired locale and, if supported, dynamically loads language lib", + "attribute": "locale" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "Date | null" + }, + "default": "null", + "description": "Sets date/time value.", + "attribute": "value" + }, + { + "kind": "field", + "name": "defaultDate", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets default time value.", + "attribute": "defaultDate" + }, + { + "kind": "field", + "name": "defaultHour", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the hour element.", + "attribute": "defaultHour" + }, + { + "kind": "field", + "name": "defaultMinute", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the minute element.", + "attribute": "defaultMinute" + }, { "kind": "field", - "name": "label", + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "attribute": "label" + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { "kind": "field", - "name": "caption", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { "kind": "field", - "name": "placeholder", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, { "kind": "field", @@ -13235,93 +12785,315 @@ "text": "boolean" }, "default": "false", - "description": "Makes the input required.", + "description": "Sets datepicker form input value to required/required.", "attribute": "required" }, { "kind": "field", - "name": "disabled", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" + }, + { + "kind": "field", + "name": "timepickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "description": "Sets entire datepicker form element to enabled/disabled.", + "attribute": "timepickerDisabled" }, { "kind": "field", - "name": "maxLength", + "name": "twentyFourHourFormat", "type": { - "text": "number" + "text": "boolean | null" }, - "description": "Maximum number of characters.", - "attribute": "maxLength" + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" }, { "kind": "field", - "name": "minLength", + "name": "minTime", "type": { - "text": "number" + "text": "string | number | Date" }, - "description": "Minimum number of characters.", - "attribute": "minLength" + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "attribute": "minTime" + }, + { + "kind": "field", + "name": "maxTime", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "attribute": "maxTime" + }, + { + "kind": "field", + "name": "errorAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" + }, + { + "kind": "field", + "name": "errorTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" + }, + { + "kind": "field", + "name": "warningAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" + }, + { + "kind": "field", + "name": "warningTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, + { + "kind": "method", + "name": "renderValidationMessage", + "privacy": "private", + "parameters": [ + { + "name": "errorId", + "type": { + "text": "string" + } + }, + { + "name": "warningId", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "getTimepickerClasses" + }, + { + "kind": "method", + "name": "_handleClear", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "setupAnchor", + "privacy": "private" + }, + { + "kind": "method", + "name": "initializeFlatpickr", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "updateFlatpickrOptions", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" + } + } + }, + { + "kind": "method", + "name": "setInitialDates", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "instance", + "type": { + "text": "flatpickr.Instance" + } + } + ] + }, + { + "kind": "method", + "name": "handleOpen", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "handleClose", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "handleTimeChange", + "return": { + "type": { + "text": "Promise" + } + }, + "parameters": [ + { + "name": "selectedDates", + "type": { + "text": "Date[]" + } + }, + { + "name": "dateStr", + "type": { + "text": "string" + } + } + ] }, { - "kind": "field", - "name": "rows", - "type": { - "text": "number" + "kind": "method", + "name": "_validate", + "privacy": "private", + "return": { + "type": { + "text": "void" + } }, - "description": "textarea rows attribute. The number of visible text lines.", - "attribute": "rows" + "parameters": [ + { + "name": "interacted", + "type": { + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" + } + } + ] }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n errorText: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "kind": "method", + "name": "_onChange", + "privacy": "private" }, { "kind": "method", - "name": "handleInput", + "name": "_handleFormReset", + "privacy": "private" + }, + { + "kind": "method", + "name": "setShouldFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "e", + "name": "value", "type": { - "text": "any" + "text": "boolean" } } ] }, { "kind": "method", - "name": "_validate", + "name": "closeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "preventFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", + "name": "event", "type": { - "text": "Boolean" + "text": "Event" } } ] + }, + { + "kind": "method", + "name": "handleInputClickEvent", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleInputFocusEvent", + "privacy": "private" } ], "events": [ { "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-input" + "name": "on-change" } ], "attributes": [ @@ -13335,221 +13107,236 @@ "fieldName": "label" }, { - "name": "caption", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets desired locale and, if supported, dynamically loads language lib", + "fieldName": "locale" + }, + { + "name": "value", + "type": { + "text": "Date | null" + }, + "default": "null", + "description": "Sets date/time value.", + "fieldName": "value" + }, + { + "name": "defaultDate", "type": { "text": "string" }, "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" + "description": "Sets default time value.", + "fieldName": "defaultDate" }, { - "name": "placeholder", + "name": "defaultHour", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the hour element.", + "fieldName": "defaultHour" + }, + { + "name": "defaultMinute", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the minute element.", + "fieldName": "defaultMinute" + }, + { + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "name": "required", + "name": "warnText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "default": "''", + "description": "Sets validation warning messaging.", + "fieldName": "warnText" }, { - "name": "disabled", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" }, { - "name": "maxLength", + "name": "required", "type": { - "text": "number" + "text": "boolean" }, - "description": "Maximum number of characters.", - "fieldName": "maxLength" + "default": "false", + "description": "Sets datepicker form input value to required/required.", + "fieldName": "required" }, { - "name": "minLength", + "name": "size", "type": { - "text": "number" + "text": "string" }, - "description": "Minimum number of characters.", - "fieldName": "minLength" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "rows", + "name": "timepickerDisabled", "type": { - "text": "number" + "text": "boolean" }, - "description": "textarea rows attribute. The number of visible text lines.", - "fieldName": "rows" + "default": "false", + "description": "Sets entire datepicker form element to enabled/disabled.", + "fieldName": "timepickerDisabled" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-text-area", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TextArea", - "declaration": { - "name": "TextArea", - "module": "src/components/reusable/textArea/textArea.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-text-area", - "declaration": { - "name": "TextArea", - "module": "src/components/reusable/textArea/textArea.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/tag/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Tag", - "declaration": { - "name": "Tag", - "module": "./tag" - } - }, - { - "kind": "js", - "name": "TagGroup", - "declaration": { - "name": "TagGroup", - "module": "./tagGroup" - } - }, - { - "kind": "js", - "name": "TagSkeleton", - "declaration": { - "name": "TagSkeleton", - "module": "./tag.skeleton" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/tag/tag.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "TagSkeleton", - "members": [ + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" + }, { - "kind": "field", - "name": "tagSize", + "name": "minTime", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "fieldName": "minTime" + }, + { + "name": "maxTime", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "fieldName": "maxTime" + }, + { + "name": "errorAriaLabel", "type": { "text": "string" }, - "default": "'sm'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "attribute": "tagSize" + "default": "''", + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "kind": "field", - "name": "shade", + "name": "errorTitle", "type": { "text": "string" }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag.", - "attribute": "shade" - } - ], - "attributes": [ + "default": "''", + "description": "Sets title attribute for error message.", + "fieldName": "errorTitle" + }, { - "name": "tagSize", + "name": "warningAriaLabel", "type": { "text": "string" }, - "default": "'sm'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "fieldName": "tagSize" + "default": "''", + "description": "Sets aria label attribute for warning message.", + "fieldName": "warningAriaLabel" }, { - "name": "shade", + "name": "warningTitle", "type": { "text": "string" }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag.", - "fieldName": "shade" + "default": "''", + "description": "Sets title attribute for warning message.", + "fieldName": "warningTitle" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tag-skeleton", + "tagName": "kyn-time-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TagSkeleton", + "name": "TimePicker", "declaration": { - "name": "TagSkeleton", - "module": "src/components/reusable/tag/tag.skeleton.ts" + "name": "TimePicker", + "module": "src/components/reusable/timepicker/timepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tag-skeleton", + "name": "kyn-time-picker", "declaration": { - "name": "TagSkeleton", - "module": "src/components/reusable/tag/tag.skeleton.ts" + "name": "TimePicker", + "module": "src/components/reusable/timepicker/timepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tag/tag.ts", + "path": "src/components/reusable/toggleButton/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "ToggleButton", + "declaration": { + "name": "ToggleButton", + "module": "./toggleButton" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/toggleButton/toggleButton.ts", "declarations": [ { "kind": "class", - "description": "Tag.", - "name": "Tag", + "description": "Toggle Button.", + "name": "ToggleButton", + "slots": [ + { + "description": "Slot for tooltip.", + "name": "tooltip" + } + ], "members": [ { "kind": "field", @@ -13558,82 +13345,82 @@ "text": "string" }, "default": "''", - "description": "Tag name (Required).", + "description": "Label text.", "attribute": "label" }, { "kind": "field", - "name": "tagSize", + "name": "checked", "type": { - "text": "string" + "text": "boolean" }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "attribute": "tagSize" + "default": "false", + "description": "Checkbox checked state.", + "attribute": "checked" }, { "kind": "field", - "name": "disabled", + "name": "checkedText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Specify if the Tag is disabled.", - "attribute": "disabled" + "default": "'On'", + "description": "Checked state text.", + "attribute": "checkedText" }, { "kind": "field", - "name": "filter", + "name": "uncheckedText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Determine if Tag state is filter.", - "attribute": "filter" + "default": "'Off'", + "description": "Unchecked state text.", + "attribute": "uncheckedText" }, { "kind": "field", - "name": "noTruncation", + "name": "small", "type": { "text": "boolean" }, "default": "false", - "description": "Removes label text truncation.", - "attribute": "noTruncation" + "description": "Option to use small size.", + "attribute": "small" }, { "kind": "field", - "name": "shade", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag", - "attribute": "shade" + "default": "false", + "description": "Checkbox disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "tagColor", + "name": "reverse", "type": { - "text": "string" + "text": "boolean" }, - "default": "'spruce'", - "description": "Color variants. Default spruce", - "attribute": "tagColor" + "default": "false", + "description": "Reverse UI element order, label on the left.", + "attribute": "reverse" }, { "kind": "field", - "name": "clearTagText", + "name": "hideLabel", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Clear Tag'", - "description": "Clear Tag Text to improve accessibility", - "attribute": "clearTagText" + "default": "false", + "description": "Hides the label visually.", + "attribute": "hideLabel" }, { "kind": "method", - "name": "handleTagClear", + "name": "handleChange", "privacy": "private", "parameters": [ { @@ -13641,11 +13428,24 @@ "type": { "text": "any" } + } + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } }, { - "name": "value", + "name": "report", "type": { - "text": "string" + "text": "Boolean" } } ] @@ -13653,8 +13453,8 @@ ], "events": [ { - "description": "Captures the close event and emits the Tag value. Works with filterable tags.", - "name": "on-close" + "description": "Captures the change event and emits the selected value and original event details.", + "name": "on-change" } ], "attributes": [ @@ -13664,311 +13464,426 @@ "text": "string" }, "default": "''", - "description": "Tag name (Required).", + "description": "Label text.", "fieldName": "label" }, { - "name": "tagSize", + "name": "checked", "type": { - "text": "string" + "text": "boolean" }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "fieldName": "tagSize" + "default": "false", + "description": "Checkbox checked state.", + "fieldName": "checked" }, { - "name": "disabled", + "name": "checkedText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Specify if the Tag is disabled.", - "fieldName": "disabled" + "default": "'On'", + "description": "Checked state text.", + "fieldName": "checkedText" }, { - "name": "filter", + "name": "uncheckedText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Determine if Tag state is filter.", - "fieldName": "filter" + "default": "'Off'", + "description": "Unchecked state text.", + "fieldName": "uncheckedText" }, { - "name": "noTruncation", + "name": "small", "type": { "text": "boolean" }, "default": "false", - "description": "Removes label text truncation.", - "fieldName": "noTruncation" + "description": "Option to use small size.", + "fieldName": "small" }, { - "name": "shade", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag", - "fieldName": "shade" + "default": "false", + "description": "Checkbox disabled state.", + "fieldName": "disabled" }, { - "name": "tagColor", + "name": "reverse", "type": { - "text": "string" + "text": "boolean" }, - "default": "'spruce'", - "description": "Color variants. Default spruce", - "fieldName": "tagColor" + "default": "false", + "description": "Reverse UI element order, label on the left.", + "fieldName": "reverse" }, { - "name": "clearTagText", + "name": "hideLabel", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Clear Tag'", - "description": "Clear Tag Text to improve accessibility", - "fieldName": "clearTagText" + "default": "false", + "description": "Hides the label visually.", + "fieldName": "hideLabel" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tag", + "tagName": "kyn-toggle-button", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tag", + "name": "ToggleButton", "declaration": { - "name": "Tag", - "module": "src/components/reusable/tag/tag.ts" + "name": "ToggleButton", + "module": "src/components/reusable/toggleButton/toggleButton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tag", + "name": "kyn-toggle-button", "declaration": { - "name": "Tag", - "module": "src/components/reusable/tag/tag.ts" + "name": "ToggleButton", + "module": "src/components/reusable/toggleButton/toggleButton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tag/tagGroup.ts", + "path": "src/components/reusable/tooltip/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Tooltip", + "declaration": { + "name": "Tooltip", + "module": "./tooltip" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tooltip/tooltip.ts", "declarations": [ { "kind": "class", - "description": "Tag & Tag Group", - "name": "TagGroup", + "description": "Tooltip.", + "name": "Tooltip", "slots": [ { - "description": "Slot for individual tags and tagsskeleton.", + "description": "Slot for tooltip content.", "name": "unnamed" + }, + { + "description": "Slot for custom anchor button content.", + "name": "anchor" } ], "members": [ { "kind": "field", - "name": "textStrings", - "type": { - "text": "object" - }, - "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", - "description": "Text string customization.", - "attribute": "textStrings" - }, - { - "kind": "field", - "name": "limitTags", + "name": "assistiveText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", - "attribute": "limitTags" + "default": "'Tooltip'", + "description": "Assistive text for anchor button.", + "attribute": "assistiveText" }, { - "kind": "field", - "name": "filter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tag group filter", - "attribute": "filter" + "kind": "method", + "name": "_positionTooltip", + "privacy": "private" }, { - "kind": "field", - "name": "tagSize", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "attribute": "tagSize" + "kind": "method", + "name": "_handleOpen", + "privacy": "private" }, { "kind": "method", - "name": "_handleSlotChange", + "name": "_handleClose", "privacy": "private" }, { "kind": "method", - "name": "_updateChildren", + "name": "_handleMouseLeave", "privacy": "private" }, { "kind": "method", - "name": "_toggleRevealed", + "name": "_handleEsc", "privacy": "private", "parameters": [ { - "name": "revealed", + "name": "e", "type": { - "text": "boolean" + "text": "KeyboardEvent" } } ] + }, + { + "kind": "method", + "name": "_emitToggle", + "privacy": "private" + } + ], + "events": [ + { + "description": "Emits the open state of the tooltip on open/close.", + "name": "on-tooltip-toggle" } ], "attributes": [ { - "name": "textStrings", + "name": "assistiveText", "type": { - "text": "object" + "text": "string" }, - "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", - "description": "Text string customization.", - "fieldName": "textStrings" + "default": "'Tooltip'", + "description": "Assistive text for anchor button.", + "fieldName": "assistiveText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tooltip", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Tooltip", + "declaration": { + "name": "Tooltip", + "module": "src/components/reusable/tooltip/tooltip.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-tooltip", + "declaration": { + "name": "Tooltip", + "module": "src/components/reusable/tooltip/tooltip.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/footer/footer.ts", + "declarations": [ + { + "kind": "class", + "description": "The global Footer component.", + "name": "Footer", + "slots": [ + { + "description": "Default slot, for links.", + "name": "unnamed" }, { - "name": "limitTags", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", - "fieldName": "limitTags" + "description": "Slot for the logo, will overwrite the default logo.", + "name": "logo" }, { - "name": "filter", + "description": "Slot for the copyright text.", + "name": "copyright" + } + ], + "members": [ + { + "kind": "field", + "name": "rootUrl", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Tag group filter", - "fieldName": "filter" + "default": "'/'", + "description": "URL for the footer logo link. Should target the application home page.", + "attribute": "rootUrl" }, { - "name": "tagSize", + "kind": "method", + "name": "handleRootLinkClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the logo link click event and emits the original event.", + "name": "on-root-link-click" + } + ], + "attributes": [ + { + "name": "rootUrl", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "fieldName": "tagSize" + "default": "'/'", + "description": "URL for the footer logo link. Should target the application home page.", + "fieldName": "rootUrl" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tag-group", + "tagName": "kyn-footer", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TagGroup", + "name": "Footer", "declaration": { - "name": "TagGroup", - "module": "src/components/reusable/tag/tagGroup.ts" + "name": "Footer", + "module": "src/components/global/footer/footer.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tag-group", + "name": "kyn-footer", "declaration": { - "name": "TagGroup", - "module": "src/components/reusable/tag/tagGroup.ts" + "name": "Footer", + "module": "src/components/global/footer/footer.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/footer/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Footer", + "declaration": { + "name": "Footer", + "module": "./footer" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/index.ts", + "path": "src/components/reusable/widget/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Tabs", + "name": "Widget", "declaration": { - "name": "Tabs", - "module": "./tabs" + "name": "Widget", + "module": "./widget" } }, { "kind": "js", - "name": "Tab", + "name": "WidgetDragHandle", "declaration": { - "name": "Tab", - "module": "./tab" + "name": "WidgetDragHandle", + "module": "./widgetDragHandle" } }, { "kind": "js", - "name": "TabPanel", + "name": "WidgetGridstack", "declaration": { - "name": "TabPanel", - "module": "./tabPanel" + "name": "WidgetGridstack", + "module": "./widgetGridstack" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/tab.ts", + "path": "src/components/reusable/widget/widget.ts", "declarations": [ { "kind": "class", - "description": "Tabs.", - "name": "Tab", + "description": "Widget.", + "name": "Widget", "slots": [ { - "description": "Slot for tab button text.", + "description": "Slot for widget content.", "name": "unnamed" + }, + { + "description": "Slot for action buttons.", + "name": "action" + }, + { + "description": "Slot for tooltip in header.", + "name": "tooltip" + }, + { + "description": "Slot for drag handle.", + "name": "draghandle" } ], "members": [ { "kind": "field", - "name": "id", + "name": "widgetTitle", "type": { "text": "string" }, "default": "''", - "description": "Tab ID, required.", - "attribute": "id", - "reflects": true + "description": "Widget title.", + "attribute": "widgetTitle" }, { "kind": "field", - "name": "selected", + "name": "subTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Widget sub-title.", + "attribute": "subTitle" + }, + { + "kind": "field", + "name": "dragActive", "type": { "text": "boolean" }, "default": "false", - "description": "Tab selected state. Must match Tab Panel visible state.", - "attribute": "selected", - "reflects": true + "description": "Widget drag active state.", + "attribute": "dragActive" }, { "kind": "field", @@ -13977,43 +13892,47 @@ "text": "boolean" }, "default": "false", - "description": "Tab disabled state.", + "description": "Widget disabled state.", "attribute": "disabled" }, { "kind": "method", - "name": "_handleClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - }, - "description": "The parameter \"e\" is an event object that represents the event that triggered the\nclick event handler." - } - ], - "description": "Dispatches a custom event called 'tab-activated' with the original event and tabId as details,\nif the tab is not selected." + "name": "_handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" } ], "attributes": [ { - "name": "id", + "name": "widgetTitle", "type": { "text": "string" }, "default": "''", - "description": "Tab ID, required.", - "fieldName": "id" + "description": "Widget title.", + "fieldName": "widgetTitle" }, { - "name": "selected", + "name": "subTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Widget sub-title.", + "fieldName": "subTitle" + }, + { + "name": "dragActive", "type": { "text": "boolean" }, "default": "false", - "description": "Tab selected state. Must match Tab Panel visible state.", - "fieldName": "selected" + "description": "Widget drag active state.", + "fieldName": "dragActive" }, { "name": "disabled", @@ -14021,7 +13940,7 @@ "text": "boolean" }, "default": "false", - "description": "Tab disabled state.", + "description": "Widget disabled state.", "fieldName": "disabled" } ], @@ -14029,1134 +13948,959 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tab", + "tagName": "kyn-widget", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tab", + "name": "Widget", "declaration": { - "name": "Tab", - "module": "src/components/reusable/tabs/tab.ts" + "name": "Widget", + "module": "src/components/reusable/widget/widget.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tab", + "name": "kyn-widget", "declaration": { - "name": "Tab", - "module": "src/components/reusable/tabs/tab.ts" + "name": "Widget", + "module": "src/components/reusable/widget/widget.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/tabPanel.ts", + "path": "src/components/reusable/widget/widgetDragHandle.ts", "declarations": [ { "kind": "class", - "description": "Tabs.", - "name": "TabPanel", + "description": "Widget drag handle.", + "name": "WidgetDragHandle", + "members": [ + { + "kind": "field", + "name": "slot", + "type": { + "text": "string" + }, + "default": "'draghandle'", + "description": "Force widget slot", + "attribute": "slot", + "reflects": true + } + ], + "attributes": [ + { + "name": "slot", + "type": { + "text": "string" + }, + "default": "'draghandle'", + "description": "Force widget slot", + "fieldName": "slot" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-widget-drag-handle", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "WidgetDragHandle", + "declaration": { + "name": "WidgetDragHandle", + "module": "src/components/reusable/widget/widgetDragHandle.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-widget-drag-handle", + "declaration": { + "name": "WidgetDragHandle", + "module": "src/components/reusable/widget/widgetDragHandle.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/widget/widgetGridstack.ts", + "declarations": [ + { + "kind": "class", + "description": "GridStack wrapper that includes Shidoka default config and styles.", + "name": "WidgetGridstack", "slots": [ { - "description": "Slot for tab content.", + "description": "Slot for .grid-stack container element.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "tabId", + "name": "layout", "type": { - "text": "string" + "text": "any" }, - "default": "''", - "description": "Matching Tab ID, required.", - "attribute": "tabId" + "default": "{}", + "description": "GridStack layout/widget size/position definitions for each breakpoint.", + "attribute": "layout" }, { "kind": "field", - "name": "visible", + "name": "gridstackConfig", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Tab Panel visible state. Must match Tab selected state.", - "attribute": "visible", - "reflects": true + "default": "Config", + "description": "GridStack config.", + "attribute": "gridstackConfig" }, { "kind": "field", - "name": "noPadding", + "name": "gridStack", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Remove side padding (left/right) on tab panel.", - "attribute": "noPadding" - } - ], - "attributes": [ + "default": "GridStack", + "description": "GridStack instance." + }, { - "name": "tabId", + "kind": "field", + "name": "grid", "type": { - "text": "string" + "text": "any" }, - "default": "''", - "description": "Matching Tab ID, required.", - "fieldName": "tabId" + "description": "GridStack grid instance." + }, + { + "kind": "method", + "name": "_saveLayout", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateLayout", + "privacy": "private" + }, + { + "kind": "method", + "name": "_setBreakpoint", + "privacy": "private" + } + ], + "events": [ + { + "description": "Emits after GridStack initializes.", + "name": "on-grid-init" }, { - "name": "visible", + "description": "Emits the GridStack save() method results (new layout) on dragstop and resizestop.", + "name": "on-grid-save" + } + ], + "attributes": [ + { + "name": "layout", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Tab Panel visible state. Must match Tab selected state.", - "fieldName": "visible" + "default": "{}", + "description": "GridStack layout/widget size/position definitions for each breakpoint.", + "fieldName": "layout" }, { - "name": "noPadding", + "name": "gridstackConfig", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Remove side padding (left/right) on tab panel.", - "fieldName": "noPadding" + "default": "Config", + "description": "GridStack config.", + "fieldName": "gridstackConfig" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tab-panel", + "tagName": "kyn-widget-gridstack", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TabPanel", + "name": "WidgetGridstack", "declaration": { - "name": "TabPanel", - "module": "src/components/reusable/tabs/tabPanel.ts" + "name": "WidgetGridstack", + "module": "src/components/reusable/widget/widgetGridstack.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tab-panel", + "name": "kyn-widget-gridstack", "declaration": { - "name": "TabPanel", - "module": "src/components/reusable/tabs/tabPanel.ts" + "name": "WidgetGridstack", + "module": "src/components/reusable/widget/widgetGridstack.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/tabs.ts", + "path": "src/components/global/header/header.ts", "declarations": [ { "kind": "class", - "description": "Tabs.", - "name": "Tabs", + "description": "The global Header component.", + "name": "Header", "slots": [ { - "description": "Slot for kyn-tab-panel components.", + "description": "The default slot for all empty space right of the logo/title.", "name": "unnamed" }, { - "description": "Slot for kyn-tab components.", - "name": "tabs" + "description": "Slot for the logo, will overwrite the default logo.", + "name": "logo" + }, + { + "description": "Slot left of the logo, intended for the header nav.", + "name": "left" + }, + { + "description": "Slot between logo/title and right flyouts.", + "name": "center" } ], "members": [ { "kind": "field", - "name": "tabStyle", + "name": "rootUrl", "type": { "text": "string" }, - "default": "'contained'", - "description": "Tab style. `'contained'` or `'line'`.", - "attribute": "tabStyle" + "default": "'/'", + "description": "URL for the header logo link. Should target the application home page.", + "attribute": "rootUrl" }, { "kind": "field", - "name": "tabSize", + "name": "appTitle", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", - "attribute": "tabSize" - }, - { - "kind": "field", - "name": "vertical", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Vertical orientation.", - "attribute": "vertical" - }, - { - "kind": "field", - "name": "disableAutoFocusUpdate", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", - "attribute": "disableAutoFocusUpdate" - }, - { - "kind": "method", - "name": "_handleSlotChangeTabs", - "privacy": "private" + "default": "''", + "description": "App title text next to logo. Hidden on smaller screens.", + "attribute": "appTitle" }, { "kind": "method", - "name": "_updateChildren", + "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", - "name": "_handleChange", + "name": "handleRootLinkClick", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" - }, - "description": "The parameter \"e\" is an event object that contains information about the event\nthat triggered the handleChange function." - } - ], - "description": "Updates children and emits a change event based on the provided\nevent details when a child kyn-tab is clicked." - }, - { - "kind": "method", - "name": "_updateChildrenSelection", - "privacy": "private", - "parameters": [ - { - "name": "selectedTabId", - "type": { - "text": "string" - }, - "description": "The selectedTabId parameter is a string that represents the ID of\nthe tab that is currently selected." - }, - { - "name": "updatePanel", - "default": "true" + "text": "Event" + } } - ], - "description": "Updates the selected property of tabs and the visible property of tab panels based on\nthe selected tab ID." + ] }, { "kind": "method", - "name": "_emitChangeEvent", + "name": "_handleNavToggle", "privacy": "private", "parameters": [ { - "name": "origEvent", + "name": "e", "type": { "text": "any" - }, - "description": "The origEvent parameter is the original event object that triggered the\nchange event. It could be any type of event object, such as a click event or a keydown event." - }, - { - "name": "selectedTabId", - "type": { - "text": "string" - }, - "description": "The selectedTabId parameter is a string that represents the ID of\nthe selected tab." + } } - ], - "description": "Creates and dispatches a custom event called 'on-change' with the provided original event and\nselected tab ID as details." + ] }, { "kind": "method", - "name": "_handleKeyboard", + "name": "_handleFlyoutsToggle", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "any" - }, - "description": "The parameter `e` is an event object that represents the keyboard event. It\ncontains information about the keyboard event, such as the key code of the pressed key." - } - ], - "description": "Handles keyboard events for navigating between tabs.", - "return": { - "type": { - "text": "" + } } - } + ] } ], "events": [ { - "description": "Emits the new selected Tab ID when switching tabs.", - "name": "on-change" + "description": "Captures the menu toggle click event and emits the menu open state in the detail.", + "name": "on-menu-toggle" + }, + { + "description": "Captures the logo link click event and emits the original event details.", + "name": "on-root-link-click" } ], "attributes": [ { - "name": "tabStyle", + "name": "rootUrl", "type": { "text": "string" }, - "default": "'contained'", - "description": "Tab style. `'contained'` or `'line'`.", - "fieldName": "tabStyle" + "default": "'/'", + "description": "URL for the header logo link. Should target the application home page.", + "fieldName": "rootUrl" }, { - "name": "tabSize", + "name": "appTitle", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", - "fieldName": "tabSize" - }, + "default": "''", + "description": "App title text next to logo. Hidden on smaller screens.", + "fieldName": "appTitle" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Header", + "declaration": { + "name": "Header", + "module": "src/components/global/header/header.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header", + "declaration": { + "name": "Header", + "module": "src/components/global/header/header.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerCategory.ts", + "declarations": [ + { + "kind": "class", + "description": "Header link category", + "name": "HeaderCategory", + "slots": [ { - "name": "vertical", + "description": "Slot for links.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "heading", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Vertical orientation.", - "fieldName": "vertical" - }, + "default": "''", + "description": "Link url.", + "attribute": "heading" + } + ], + "attributes": [ { - "name": "disableAutoFocusUpdate", + "name": "heading", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", - "fieldName": "disableAutoFocusUpdate" + "default": "''", + "description": "Link url.", + "fieldName": "heading" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tabs", + "tagName": "kyn-header-category", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tabs", + "name": "HeaderCategory", "declaration": { - "name": "Tabs", - "module": "src/components/reusable/tabs/tabs.ts" + "name": "HeaderCategory", + "module": "src/components/global/header/headerCategory.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tabs", + "name": "kyn-header-category", "declaration": { - "name": "Tabs", - "module": "src/components/reusable/tabs/tabs.ts" + "name": "HeaderCategory", + "module": "src/components/global/header/headerCategory.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textInput/index.ts", - "declarations": [], + "path": "src/components/global/header/headerDivider.ts", + "declarations": [ + { + "kind": "class", + "description": "Header divider", + "name": "HeaderDivider", + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-divider", + "customElement": true + } + ], "exports": [ { "kind": "js", - "name": "TextInput", + "name": "HeaderDivider", "declaration": { - "name": "TextInput", - "module": "./textInput" + "name": "HeaderDivider", + "module": "src/components/global/header/headerDivider.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-divider", + "declaration": { + "name": "HeaderDivider", + "module": "src/components/global/header/headerDivider.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textInput/textInput.ts", + "path": "src/components/global/header/headerFlyout.ts", "declarations": [ { "kind": "class", - "description": "Text input.", - "name": "TextInput", + "description": "Component for header flyout items.", + "name": "HeaderFlyout", "slots": [ { - "description": "Slot for contextual icon.", - "name": "icon" + "description": "Slot for flyout menu content.", + "name": "unnamed" }, { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for button/toggle content.", + "name": "button" } ], "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "type", + "name": "open", "type": { - "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" + "text": "boolean" }, - "default": "'text'", - "description": "Input type, limited to options that are \"text like\".", - "attribute": "type" + "default": "false", + "description": "Flyout open state.", + "attribute": "open" }, { "kind": "field", - "name": "size", + "name": "anchorLeft", "type": { - "text": "string" + "text": "boolean" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" + "default": "false", + "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", + "attribute": "anchorLeft" }, { "kind": "field", - "name": "caption", + "name": "hideArrow", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "default": "false", + "description": "Hides the arrow.", + "attribute": "hideArrow" }, { "kind": "field", - "name": "placeholder", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "description": "Menu & button label.", + "attribute": "label" }, { "kind": "field", - "name": "required", + "name": "hideMenuLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "description": "Hide the label at the top of the flyout menu.", + "attribute": "hideMenuLabel" }, { "kind": "field", - "name": "disabled", + "name": "hideButtonLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "description": "Hide the label in the mobile button.", + "attribute": "hideButtonLabel" }, { "kind": "field", - "name": "pattern", + "name": "assistiveText", "type": { "text": "string" }, - "description": "RegEx pattern to validate.", - "attribute": "pattern" - }, - { - "kind": "field", - "name": "maxLength", - "type": { - "text": "number" - }, - "description": "Maximum number of characters.", - "attribute": "maxLength" - }, - { - "kind": "field", - "name": "minLength", - "type": { - "text": "number" - }, - "description": "Minimum number of characters.", - "attribute": "minLength" + "default": "''", + "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", + "attribute": "assistiveText" }, { "kind": "field", - "name": "iconRight", + "name": "href", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Place icon on the right.", - "attribute": "iconRight" + "default": "''", + "description": "Turns the button into a link.", + "attribute": "href" }, { "kind": "field", - "name": "hideLabel", + "name": "backText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { "kind": "method", - "name": "_handleInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "_handleBack", + "privacy": "private" }, { "kind": "method", - "name": "_handleClear", + "name": "handleClick", "privacy": "private" }, { "kind": "method", - "name": "_emitValue", + "name": "handleClickOut", "privacy": "private", "parameters": [ { "name": "e", - "optional": true, - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" + "text": "Event" } } ] }, { - "kind": "method", - "name": "determineIfSlotted", - "privacy": "private" - } - ], - "events": [ - { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-input" - } - ], - "attributes": [ - { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "type", - "type": { - "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" - }, - "default": "'text'", - "description": "Input type, limited to options that are \"text like\".", - "fieldName": "type" - }, - { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, - { - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" - }, + "kind": "method", + "name": "_handleOverlayClick", + "privacy": "private" + } + ], + "attributes": [ { - "name": "placeholder", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" + "default": "false", + "description": "Flyout open state.", + "fieldName": "open" }, { - "name": "required", + "name": "anchorLeft", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", + "fieldName": "anchorLeft" }, { - "name": "disabled", + "name": "hideArrow", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" + "description": "Hides the arrow.", + "fieldName": "hideArrow" }, { - "name": "pattern", + "name": "label", "type": { "text": "string" }, - "description": "RegEx pattern to validate.", - "fieldName": "pattern" + "default": "''", + "description": "Menu & button label.", + "fieldName": "label" }, { - "name": "maxLength", + "name": "hideMenuLabel", "type": { - "text": "number" + "text": "boolean" }, - "description": "Maximum number of characters.", - "fieldName": "maxLength" + "default": "false", + "description": "Hide the label at the top of the flyout menu.", + "fieldName": "hideMenuLabel" }, { - "name": "minLength", + "name": "hideButtonLabel", "type": { - "text": "number" + "text": "boolean" }, - "description": "Minimum number of characters.", - "fieldName": "minLength" + "default": "false", + "description": "Hide the label in the mobile button.", + "fieldName": "hideButtonLabel" }, { - "name": "iconRight", + "name": "assistiveText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Place icon on the right.", - "fieldName": "iconRight" + "default": "''", + "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", + "fieldName": "assistiveText" }, { - "name": "hideLabel", + "name": "href", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" + "default": "''", + "description": "Turns the button into a link.", + "fieldName": "href" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "name": "backText", + "type": { + "text": "string" + }, + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-text-input", + "tagName": "kyn-header-flyout", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TextInput", + "name": "HeaderFlyout", "declaration": { - "name": "TextInput", - "module": "src/components/reusable/textInput/textInput.ts" + "name": "HeaderFlyout", + "module": "src/components/global/header/headerFlyout.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-text-input", - "declaration": { - "name": "TextInput", - "module": "src/components/reusable/textInput/textInput.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/timepicker/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "TimePicker", + "name": "kyn-header-flyout", "declaration": { - "name": "TimePicker", - "module": "./timepicker" + "name": "HeaderFlyout", + "module": "src/components/global/header/headerFlyout.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/timepicker/timepicker.ts", + "path": "src/components/global/header/headerFlyouts.ts", "declarations": [ { "kind": "class", - "description": "Timepicker: uses Flatpickr library,time picker implementation -- `https://flatpickr.js.org/examples/#time-picker`", - "name": "TimePicker", + "description": "Container for header-flyout components.", + "name": "HeaderFlyouts", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for header-flyout components.", + "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets desired locale and, if supported, dynamically loads language lib", - "attribute": "locale" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets date/time value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "defaultDate", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default time value.", - "attribute": "defaultDate" - }, - { - "kind": "field", - "name": "defaultHour", + "name": "open", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial value of the hour element.", - "attribute": "defaultHour" + "default": "false", + "attribute": "open" }, { - "kind": "field", - "name": "defaultMinute", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial value of the minute element.", - "attribute": "defaultMinute" + "kind": "method", + "name": "_toggleOpen", + "privacy": "private" }, { - "kind": "field", - "name": "defaultErrorMessage", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" - }, + "kind": "method", + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "attributes": [ { - "kind": "field", - "name": "warnText", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" - }, + "default": "false", + "fieldName": "open" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-flyouts", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderFlyouts", + "declaration": { + "name": "HeaderFlyouts", + "module": "src/components/global/header/headerFlyouts.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-flyouts", + "declaration": { + "name": "HeaderFlyouts", + "module": "src/components/global/header/headerFlyouts.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerLink.ts", + "declarations": [ + { + "kind": "class", + "description": "Component for navigation links within the Header.", + "name": "HeaderLink", + "slots": [ { - "kind": "field", - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "description": "Slot for link text/content.", + "name": "unnamed" }, + { + "description": "Slot for sublinks (up to two levels).", + "name": "links" + } + ], + "members": [ { "kind": "field", - "name": "required", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", - "attribute": "required" + "description": "Link open state.", + "attribute": "open" }, { "kind": "field", - "name": "size", + "name": "href", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, - { - "kind": "field", - "name": "timepickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "attribute": "timepickerDisabled" + "default": "''", + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "twentyFourHourFormat", + "name": "target", + "default": "'_self'", "type": { - "text": "boolean | null" + "text": "'_self'" }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "attribute": "twentyFourHourFormat" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "attribute": "target" }, { "kind": "field", - "name": "minTime", + "name": "rel", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "attribute": "minTime" + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "attribute": "rel" }, { "kind": "field", - "name": "maxTime", + "name": "isActive", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "attribute": "maxTime" + "default": "false", + "description": "Link active state, for example when URL path matches link href.", + "attribute": "isActive" }, { "kind": "field", - "name": "errorAriaLabel", + "name": "divider", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "default": "false", + "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", + "attribute": "divider" }, { "kind": "field", - "name": "errorTitle", + "name": "searchLabel", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "default": "'Search'", + "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", + "attribute": "searchLabel" }, { "kind": "field", - "name": "warningAriaLabel", + "name": "backText", "type": { "text": "string" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { "kind": "field", - "name": "warningTitle", + "name": "_searchTerm", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "renderValidationMessage", - "privacy": "private", - "parameters": [ - { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "getTimepickerClasses" - }, - { - "kind": "method", - "name": "_handleClear", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "setupAnchor", - "privacy": "private" - }, - { - "kind": "method", - "name": "initializeFlatpickr", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "updateFlatpickrOptions", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } - }, - { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "instance", - "type": { - "text": "flatpickr.Instance" - } - } - ] - }, - { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } - }, - { - "kind": "method", - "name": "handleClose", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "handleTimeChange", - "return": { - "type": { - "text": "Promise" - } - }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - }, - { - "name": "dateStr", - "type": { - "text": "string" - } - } - ] + "description": "Text for mobile \"Back\" button." }, { "kind": "method", - "name": "_validate", + "name": "_handleSearch", "privacy": "private", - "return": { - "type": { - "text": "void" - } - }, "parameters": [ { - "name": "interacted", - "type": { - "text": "boolean" - } - }, - { - "name": "report", + "name": "e", "type": { - "text": "boolean" + "text": "any" } } ] }, { "kind": "method", - "name": "_onChange", + "name": "_searchFilter", "privacy": "private" }, { "kind": "method", - "name": "_handleFormReset", + "name": "_handleBack", "privacy": "private" }, { "kind": "method", - "name": "setShouldFlatpickrOpen", + "name": "_handleLinksSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "handlePointerEnter", "privacy": "private", "parameters": [ { - "name": "value", + "name": "e", "type": { - "text": "boolean" + "text": "PointerEvent" } } ] }, { "kind": "method", - "name": "closeFlatpickr", - "privacy": "private" + "name": "handlePointerLeave", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] }, { "kind": "method", - "name": "preventFlatpickrOpen", + "name": "handleClick", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { "text": "Event" } @@ -15165,346 +14909,537 @@ }, { "kind": "method", - "name": "handleInputClickEvent", + "name": "handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "determineLevel", "privacy": "private" }, { "kind": "method", - "name": "handleInputFocusEvent", + "name": "_positionMenu", "privacy": "private" } ], "events": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" + "description": "Captures the click event and emits the original event details.", + "name": "on-click" } ], "attributes": [ { - "name": "label", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text.", - "fieldName": "label" + "default": "false", + "description": "Link open state.", + "fieldName": "open" }, { - "name": "locale", + "name": "href", "type": { - "text": "SupportedLocale" + "text": "string" }, - "default": "'en'", - "description": "Sets desired locale and, if supported, dynamically loads language lib", - "fieldName": "locale" + "default": "''", + "description": "Link url.", + "fieldName": "href" }, { - "name": "value", + "name": "target", + "default": "'_self'", "type": { - "text": "Date | null" + "text": "'_self'" }, - "default": "null", - "description": "Sets date/time value.", - "fieldName": "value" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "fieldName": "target" }, { - "name": "defaultDate", + "name": "rel", "type": { "text": "string" }, "default": "''", - "description": "Sets default time value.", - "fieldName": "defaultDate" + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "fieldName": "rel" }, { - "name": "defaultHour", + "name": "isActive", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial value of the hour element.", - "fieldName": "defaultHour" + "default": "false", + "description": "Link active state, for example when URL path matches link href.", + "fieldName": "isActive" }, { - "name": "defaultMinute", + "name": "divider", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial value of the minute element.", - "fieldName": "defaultMinute" + "default": "false", + "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", + "fieldName": "divider" }, { - "name": "defaultErrorMessage", + "name": "searchLabel", "type": { "text": "string" }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "default": "'Search'", + "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", + "fieldName": "searchLabel" }, { - "name": "warnText", + "name": "backText", "type": { "text": "string" }, - "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" - }, + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-link", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderLink", + "declaration": { + "name": "HeaderLink", + "module": "src/components/global/header/headerLink.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-link", + "declaration": { + "name": "HeaderLink", + "module": "src/components/global/header/headerLink.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerNav.ts", + "declarations": [ + { + "kind": "class", + "description": "Container for header navigation links.", + "name": "HeaderNav", + "slots": [ { - "name": "caption", + "description": "This element has a slot.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "slot", "type": { "text": "string" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "default": "'left'", + "description": "Force correct slot", + "attribute": "slot", + "reflects": true }, { - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets datepicker form input value to required/required.", - "fieldName": "required" + "kind": "method", + "name": "_toggleMenuOpen", + "privacy": "private" }, { - "name": "size", + "kind": "method", + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "_handleOverlayClick", + "privacy": "private" + } + ], + "attributes": [ + { + "name": "slot", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, + "default": "'left'", + "description": "Force correct slot", + "fieldName": "slot" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-nav", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderNav", + "declaration": { + "name": "HeaderNav", + "module": "src/components/global/header/headerNav.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-nav", + "declaration": { + "name": "HeaderNav", + "module": "src/components/global/header/headerNav.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerNotificationPanel.ts", + "declarations": [ + { + "kind": "class", + "description": "Component for notification panel within the Header.", + "name": "HeaderNotificationPanel", + "slots": [ { - "name": "timepickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "fieldName": "timepickerDisabled" + "description": "Slot for panel menu", + "name": "menu-slot" }, { - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "fieldName": "twentyFourHourFormat" - }, + "description": "Slot for notification content.", + "name": "unnamed" + } + ], + "members": [ { - "name": "minTime", + "kind": "field", + "name": "panelTitle", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "fieldName": "minTime" + "description": "Notification panel Title.", + "attribute": "panelTitle" }, { - "name": "maxTime", + "kind": "field", + "name": "panelFooterBtnText", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "fieldName": "maxTime" + "description": "Notification panel footer button text.", + "attribute": "panelFooterBtnText" }, { - "name": "errorAriaLabel", + "kind": "field", + "name": "hidePanelFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" + "default": "false", + "description": "Hide notification panel footer", + "attribute": "hidePanelFooter" }, { - "name": "errorTitle", + "kind": "method", + "name": "_handlefooterBtnEvent", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Emits the panel footer button event.", + "name": "on-footer-btn-click" + } + ], + "attributes": [ + { + "name": "panelTitle", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "description": "Notification panel Title.", + "fieldName": "panelTitle" }, { - "name": "warningAriaLabel", + "name": "panelFooterBtnText", "type": { "text": "string" }, "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "description": "Notification panel footer button text.", + "fieldName": "panelFooterBtnText" }, { - "name": "warningTitle", + "name": "hidePanelFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "default": "false", + "description": "Hide notification panel footer", + "fieldName": "hidePanelFooter" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-time-picker", + "tagName": "kyn-header-notification-panel", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TimePicker", + "name": "HeaderNotificationPanel", "declaration": { - "name": "TimePicker", - "module": "src/components/reusable/timepicker/timepicker.ts" + "name": "HeaderNotificationPanel", + "module": "src/components/global/header/headerNotificationPanel.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-time-picker", - "declaration": { - "name": "TimePicker", - "module": "src/components/reusable/timepicker/timepicker.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/toggleButton/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "ToggleButton", + "name": "kyn-header-notification-panel", "declaration": { - "name": "ToggleButton", - "module": "./toggleButton" + "name": "HeaderNotificationPanel", + "module": "src/components/global/header/headerNotificationPanel.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/toggleButton/toggleButton.ts", + "path": "src/components/global/header/headerPanelLink.ts", "declarations": [ { "kind": "class", - "description": "Toggle Button.", - "name": "ToggleButton", + "description": "Header fly-out panel link.", + "name": "HeaderPanelLink", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for link text/content.", + "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "label", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "attribute": "label" + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "checked", + "name": "target", + "default": "'_self'", "type": { - "text": "boolean" + "text": "'_self'" }, - "default": "false", - "description": "Checkbox checked state.", - "attribute": "checked" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "attribute": "target" }, { "kind": "field", - "name": "checkedText", + "name": "rel", "type": { "text": "string" }, - "default": "'On'", - "description": "Checked state text.", - "attribute": "checkedText" + "default": "''", + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "attribute": "rel" + }, + { + "kind": "method", + "name": "handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the click event and emits the original event details.", + "name": "on-click" + } + ], + "attributes": [ + { + "name": "href", + "type": { + "text": "string" + }, + "default": "''", + "description": "Link url.", + "fieldName": "href" + }, + { + "name": "target", + "default": "'_self'", + "type": { + "text": "'_self'" + }, + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "fieldName": "target" }, + { + "name": "rel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "fieldName": "rel" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-panel-link", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderPanelLink", + "declaration": { + "name": "HeaderPanelLink", + "module": "src/components/global/header/headerPanelLink.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-panel-link", + "declaration": { + "name": "HeaderPanelLink", + "module": "src/components/global/header/headerPanelLink.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerUserProfile.ts", + "declarations": [ + { + "kind": "class", + "description": "Header user profile.", + "name": "HeaderUserProfile", + "slots": [ + { + "description": "Slot for the profile picture img.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "uncheckedText", + "name": "name", "type": { "text": "string" }, - "default": "'Off'", - "description": "Unchecked state text.", - "attribute": "uncheckedText" + "default": "''", + "description": "The user's name.", + "attribute": "name" }, { "kind": "field", - "name": "small", + "name": "subtitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to use small size.", - "attribute": "small" + "default": "''", + "description": "The user's job title, or subtext.", + "attribute": "subtitle" }, { "kind": "field", - "name": "disabled", + "name": "email", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Checkbox disabled state.", - "attribute": "disabled" + "default": "''", + "description": "The user's email address.", + "attribute": "email" }, { "kind": "field", - "name": "reverse", + "name": "profileLink", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Reverse UI element order, label on the left.", - "attribute": "reverse" + "default": "''", + "description": "View profile link URL.", + "attribute": "profileLink" }, { "kind": "field", - "name": "hideLabel", + "name": "profileLinkText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hides the label visually.", - "attribute": "hideLabel" + "default": "'View Profile'", + "description": "View Profile link text.", + "attribute": "profileLinkText" }, { "kind": "method", - "name": "handleChange", + "name": "_handleProfileClick", "privacy": "private", "parameters": [ { @@ -15514,403 +15449,580 @@ } } ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" - } - } - ] } ], "events": [ { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-change" + "description": "Captures the view profile link click event and emits the original event details.", + "name": "on-profile-link-click" } ], "attributes": [ { - "name": "label", + "name": "name", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox checked state.", - "fieldName": "checked" + "description": "The user's name.", + "fieldName": "name" }, { - "name": "checkedText", + "name": "subtitle", "type": { "text": "string" }, - "default": "'On'", - "description": "Checked state text.", - "fieldName": "checkedText" + "default": "''", + "description": "The user's job title, or subtext.", + "fieldName": "subtitle" }, { - "name": "uncheckedText", + "name": "email", "type": { "text": "string" }, - "default": "'Off'", - "description": "Unchecked state text.", - "fieldName": "uncheckedText" - }, - { - "name": "small", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to use small size.", - "fieldName": "small" - }, - { - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "The user's email address.", + "fieldName": "email" }, { - "name": "reverse", + "name": "profileLink", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Reverse UI element order, label on the left.", - "fieldName": "reverse" + "default": "''", + "description": "View profile link URL.", + "fieldName": "profileLink" }, { - "name": "hideLabel", + "name": "profileLinkText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hides the label visually.", - "fieldName": "hideLabel" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "default": "'View Profile'", + "description": "View Profile link text.", + "fieldName": "profileLinkText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-toggle-button", + "tagName": "kyn-header-user-profile", "customElement": true } ], "exports": [ { "kind": "js", - "name": "ToggleButton", + "name": "HeaderUserProfile", "declaration": { - "name": "ToggleButton", - "module": "src/components/reusable/toggleButton/toggleButton.ts" + "name": "HeaderUserProfile", + "module": "src/components/global/header/headerUserProfile.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-toggle-button", + "name": "kyn-header-user-profile", "declaration": { - "name": "ToggleButton", - "module": "src/components/reusable/toggleButton/toggleButton.ts" + "name": "HeaderUserProfile", + "module": "src/components/global/header/headerUserProfile.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tooltip/index.ts", + "path": "src/components/global/header/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Header", + "declaration": { + "name": "Header", + "module": "./header" + } + }, + { + "kind": "js", + "name": "HeaderNav", + "declaration": { + "name": "HeaderNav", + "module": "./headerNav" + } + }, + { + "kind": "js", + "name": "HeaderLink", + "declaration": { + "name": "HeaderLink", + "module": "./headerLink" + } + }, + { + "kind": "js", + "name": "HeaderCategory", + "declaration": { + "name": "HeaderCategory", + "module": "./headerCategory" + } + }, + { + "kind": "js", + "name": "HeaderDivider", + "declaration": { + "name": "HeaderDivider", + "module": "./headerDivider" + } + }, + { + "kind": "js", + "name": "HeaderFlyouts", + "declaration": { + "name": "HeaderFlyouts", + "module": "./headerFlyouts" + } + }, + { + "kind": "js", + "name": "HeaderFlyout", + "declaration": { + "name": "HeaderFlyout", + "module": "./headerFlyout" + } + }, + { + "kind": "js", + "name": "HeaderUserProfile", + "declaration": { + "name": "HeaderUserProfile", + "module": "./headerUserProfile" + } + }, + { + "kind": "js", + "name": "HeaderPanelLink", + "declaration": { + "name": "HeaderPanelLink", + "module": "./headerPanelLink" + } + }, + { + "kind": "js", + "name": "HeaderNotificationPanel", + "declaration": { + "name": "HeaderNotificationPanel", + "module": "./headerNotificationPanel" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/localNav/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Tooltip", + "name": "LocalNav", "declaration": { - "name": "Tooltip", - "module": "./tooltip" + "name": "LocalNav", + "module": "./localNav" + } + }, + { + "kind": "js", + "name": "LocalNavLink", + "declaration": { + "name": "LocalNavLink", + "module": "./localNavLink" + } + }, + { + "kind": "js", + "name": "LocalNavDivider", + "declaration": { + "name": "LocalNavDivider", + "module": "./localNavDivider" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tooltip/tooltip.ts", + "path": "src/components/global/localNav/localNav.ts", "declarations": [ { "kind": "class", - "description": "Tooltip.", - "name": "Tooltip", + "description": "The global Side Navigation component.", + "name": "LocalNav", "slots": [ { - "description": "Slot for tooltip content.", + "description": "The default slot, for local nav links.", "name": "unnamed" }, { - "description": "Slot for custom anchor button content.", - "name": "anchor" + "description": "Slot for a search input", + "name": "search" } ], "members": [ { "kind": "field", - "name": "assistiveText", + "name": "pinned", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Tooltip'", - "description": "Assistive text for anchor button.", - "attribute": "assistiveText" + "default": "false", + "description": "Local nav pinned state.", + "attribute": "pinned" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n pin: 'Pin',\n unpin: 'Unpin',\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n}", + "description": "Text string customization.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "_positionTooltip", - "privacy": "private" + "name": "_handleNavToggle", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] }, { "kind": "method", - "name": "_handleOpen", + "name": "_handleMobileNavToggle", "privacy": "private" }, { "kind": "method", - "name": "_handleClose", + "name": "handlePointerEnter", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] + }, + { + "kind": "method", + "name": "handlePointerLeave", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] + }, + { + "kind": "method", + "name": "_updateChildren", "privacy": "private" }, { "kind": "method", - "name": "_handleMouseLeave", + "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", - "name": "_handleEsc", + "name": "_handleLinkActive", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "KeyboardEvent" + "text": "any" } } ] }, { "kind": "method", - "name": "_emitToggle", - "privacy": "private" + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] } ], "events": [ { - "description": "Emits the open state of the tooltip on open/close.", - "name": "on-tooltip-toggle" + "description": "Captures the click event and emits the pinned state and original event details.", + "name": "on-toggle" } ], "attributes": [ { - "name": "assistiveText", + "name": "pinned", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Tooltip'", - "description": "Assistive text for anchor button.", - "fieldName": "assistiveText" + "default": "false", + "description": "Local nav pinned state.", + "fieldName": "pinned" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tooltip", + "tagName": "kyn-local-nav", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tooltip", + "name": "LocalNav", "declaration": { - "name": "Tooltip", - "module": "src/components/reusable/tooltip/tooltip.ts" + "name": "LocalNav", + "module": "src/components/global/localNav/localNav.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tooltip", + "name": "kyn-local-nav", "declaration": { - "name": "Tooltip", - "module": "src/components/reusable/tooltip/tooltip.ts" + "name": "LocalNav", + "module": "src/components/global/localNav/localNav.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/index.ts", - "declarations": [], - "exports": [ + "path": "src/components/global/localNav/localNavDivider.ts", + "declarations": [ { - "kind": "js", - "name": "Widget", - "declaration": { - "name": "Widget", - "module": "./widget" - } - }, + "kind": "class", + "description": "Local Nav divider", + "name": "LocalNavDivider", + "members": [ + { + "kind": "field", + "name": "heading", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional heading text.", + "attribute": "heading" + } + ], + "attributes": [ + { + "name": "heading", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional heading text.", + "fieldName": "heading" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-local-nav-divider", + "customElement": true + } + ], + "exports": [ { "kind": "js", - "name": "WidgetDragHandle", + "name": "LocalNavDivider", "declaration": { - "name": "WidgetDragHandle", - "module": "./widgetDragHandle" + "name": "LocalNavDivider", + "module": "src/components/global/localNav/localNavDivider.ts" } }, { - "kind": "js", - "name": "WidgetGridstack", + "kind": "custom-element-definition", + "name": "kyn-local-nav-divider", "declaration": { - "name": "WidgetGridstack", - "module": "./widgetGridstack" + "name": "LocalNavDivider", + "module": "src/components/global/localNav/localNavDivider.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/widget.ts", + "path": "src/components/global/localNav/localNavLink.ts", "declarations": [ { "kind": "class", - "description": "Widget.", - "name": "Widget", + "description": "Link component for use in the global Side Navigation component.", + "name": "LocalNavLink", "slots": [ { - "description": "Slot for widget content.", + "description": "The default slot, for the link text.", "name": "unnamed" }, { - "description": "Slot for action buttons.", - "name": "action" - }, - { - "description": "Slot for tooltip in header.", - "name": "tooltip" + "description": "Slot for an icon. Use 16px size.", + "name": "icon" }, { - "description": "Slot for drag handle.", - "name": "draghandle" + "description": "Slot for the next level of links, supports three levels.", + "name": "links" } ], "members": [ { "kind": "field", - "name": "widgetTitle", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Widget title.", - "attribute": "widgetTitle" + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "subTitle", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Widget sub-title.", - "attribute": "subTitle" + "default": "false", + "description": "Expanded state.", + "attribute": "expanded" + }, + { + "kind": "field", + "name": "active", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Active state.", + "attribute": "active", + "reflects": true }, { "kind": "field", - "name": "dragActive", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Widget drag active state.", - "attribute": "dragActive" + "description": "Disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "disabled", + "name": "backText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Widget disabled state.", - "attribute": "disabled" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { "kind": "method", - "name": "_handleSlotChange", + "name": "_handleTextSlotChange", "privacy": "private" }, { "kind": "method", - "name": "_updateChildren", + "name": "_getSlotText", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleLinksSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleBack", "privacy": "private" + }, + { + "kind": "method", + "name": "handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the click event and emits the original event, level, and if default was prevented.", + "name": "on-click" } ], "attributes": [ { - "name": "widgetTitle", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Widget title.", - "fieldName": "widgetTitle" + "description": "Link url.", + "fieldName": "href" }, { - "name": "subTitle", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Widget sub-title.", - "fieldName": "subTitle" + "default": "false", + "description": "Expanded state.", + "fieldName": "expanded" }, { - "name": "dragActive", + "name": "active", "type": { "text": "boolean" }, "default": "false", - "description": "Widget drag active state.", - "fieldName": "dragActive" + "description": "Active state.", + "fieldName": "active" }, { "name": "disabled", @@ -15918,217 +16030,105 @@ "text": "boolean" }, "default": "false", - "description": "Widget disabled state.", + "description": "Disabled state.", "fieldName": "disabled" + }, + { + "name": "backText", + "type": { + "text": "string" + }, + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-widget", + "tagName": "kyn-local-nav-link", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Widget", + "name": "LocalNavLink", "declaration": { - "name": "Widget", - "module": "src/components/reusable/widget/widget.ts" + "name": "LocalNavLink", + "module": "src/components/global/localNav/localNavLink.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-widget", + "name": "kyn-local-nav-link", "declaration": { - "name": "Widget", - "module": "src/components/reusable/widget/widget.ts" + "name": "LocalNavLink", + "module": "src/components/global/localNav/localNavLink.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/widgetDragHandle.ts", - "declarations": [ - { - "kind": "class", - "description": "Widget drag handle.", - "name": "WidgetDragHandle", - "members": [ - { - "kind": "field", - "name": "slot", - "type": { - "text": "string" - }, - "default": "'draghandle'", - "description": "Force widget slot", - "attribute": "slot", - "reflects": true - } - ], - "attributes": [ - { - "name": "slot", - "type": { - "text": "string" - }, - "default": "'draghandle'", - "description": "Force widget slot", - "fieldName": "slot" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-widget-drag-handle", - "customElement": true - } - ], + "path": "src/components/global/uiShell/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "WidgetDragHandle", - "declaration": { - "name": "WidgetDragHandle", - "module": "src/components/reusable/widget/widgetDragHandle.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-widget-drag-handle", + "name": "UiShell", "declaration": { - "name": "WidgetDragHandle", - "module": "src/components/reusable/widget/widgetDragHandle.ts" + "name": "UiShell", + "module": "./uiShell" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/widgetGridstack.ts", + "path": "src/components/global/uiShell/uiShell.ts", "declarations": [ { "kind": "class", - "description": "GridStack wrapper that includes Shidoka default config and styles.", - "name": "WidgetGridstack", + "description": "Container to help with positioning and padding of the global elements such as: adds padding for the fixed Header and Local Nav, adds main content gutters, and makes Footer sticky. This takes the onus off of the consuming app to configure these values.", + "name": "UiShell", "slots": [ { - "description": "Slot for .grid-stack container element.", + "description": "Slot for global elements.", "name": "unnamed" } ], "members": [ - { - "kind": "field", - "name": "layout", - "type": { - "text": "any" - }, - "default": "{}", - "description": "GridStack layout/widget size/position definitions for each breakpoint.", - "attribute": "layout" - }, - { - "kind": "field", - "name": "gridstackConfig", - "type": { - "text": "any" - }, - "default": "Config", - "description": "GridStack config.", - "attribute": "gridstackConfig" - }, - { - "kind": "field", - "name": "gridStack", - "type": { - "text": "any" - }, - "default": "GridStack", - "description": "GridStack instance." - }, - { - "kind": "field", - "name": "grid", - "type": { - "text": "any" - }, - "description": "GridStack grid instance." - }, - { - "kind": "method", - "name": "_saveLayout", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateLayout", - "privacy": "private" - }, { "kind": "method", - "name": "_setBreakpoint", + "name": "handleSlotChange", "privacy": "private" } ], - "events": [ - { - "description": "Emits after GridStack initializes.", - "name": "on-grid-init" - }, - { - "description": "Emits the GridStack save() method results (new layout) on dragstop and resizestop.", - "name": "on-grid-save" - } - ], - "attributes": [ - { - "name": "layout", - "type": { - "text": "any" - }, - "default": "{}", - "description": "GridStack layout/widget size/position definitions for each breakpoint.", - "fieldName": "layout" - }, - { - "name": "gridstackConfig", - "type": { - "text": "any" - }, - "default": "Config", - "description": "GridStack config.", - "fieldName": "gridstackConfig" - } - ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-widget-gridstack", + "tagName": "kyn-ui-shell", "customElement": true } ], "exports": [ { "kind": "js", - "name": "WidgetGridstack", + "name": "UiShell", "declaration": { - "name": "WidgetGridstack", - "module": "src/components/reusable/widget/widgetGridstack.ts" + "name": "UiShell", + "module": "src/components/global/uiShell/uiShell.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-widget-gridstack", + "name": "kyn-ui-shell", "declaration": { - "name": "WidgetGridstack", - "module": "src/components/reusable/widget/widgetGridstack.ts" + "name": "UiShell", + "module": "src/components/global/uiShell/uiShell.ts" } } ] diff --git a/src/components/reusable/tag/tag.scss b/src/components/reusable/tag/tag.scss index 50a862c6..f2489cb4 100644 --- a/src/components/reusable/tag/tag.scss +++ b/src/components/reusable/tag/tag.scss @@ -13,7 +13,7 @@ justify-content: space-around; border-radius: 4px; gap: 4px; - color: var(--kd-color-text-primary); + color: var(--kd-color-text-level-primary); min-width: 24px; } @@ -76,13 +76,13 @@ &:focus, &:active { - outline-width: 2px; + outline-width: 1px; outline-style: solid; } &[disabled] { - background-color: var(--kd-color-background-disabled); - color: var(--kd-color-text-link-level-disabled); + background-color: var(--kd-color-tags-background-disabled); + color: var(--kd-color-icon-disabled); border: none; cursor: not-allowed; pointer-events: none; @@ -125,35 +125,120 @@ } &-disable { - cursor: not-allowed; - background-color: var(--kd-color-background-disabled) !important; - color: var(--kd-color-text-disabled) !important; + cursor: not-allowed !important; + background-color: var(--kd-color-tags-background-disabled) !important; + color: var(--kd-color-text-level-disabled) !important; + } + + &-clickable { + cursor: pointer; + + &:focus, + &:active { + outline: 1px solid var(--kd-color-border-variants-focus); + outline-offset: 1px; + } + + &-grey { + &:hover { + background-color: var(--kd-color-tags-hover-gray); + } + } + + &-spruce { + &:hover { + background-color: var(--kd-color-tags-hover-spruce); + } + } + + &-interactive { + &:hover { + background-color: var(--kd-color-tags-hover-interactive); + } + } + + &-blue { + &:hover { + background-color: var(--kd-color-tags-hover-blue); + } + } + + &-error { + &:hover { + background-color: var(--kd-color-tags-hover-error); + } + } + + &-warning { + &:hover { + background-color: var(--kd-color-tags-hover-warning); + } + } + + &-success { + &:hover { + background-color: var(--kd-color-tags-hover-success); + } + } + + &-cat01 { + &:hover { + background-color: var(--kd-color-tags-hover-cat-1); + } + } + + &-cat02 { + &:hover { + background-color: var(--kd-color-tags-hover-cat-2); + } + } + + &-cat03 { + &:hover { + background-color: var(--kd-color-tags-hover-cat-3); + } + } + + &-cat04 { + &:hover { + background-color: var(--kd-color-tags-hover-cat-4); + } + } + + &-cat05 { + &:hover { + background-color: var(--kd-color-tags-hover-cat-5); + } + } + + &-cat06 { + &:hover { + background-color: var(--kd-color-tags-hover-cat-6); + } + } } /* Grey color */ &-grey { - background-color: var(--kd-color-background-ui-soft); - color: var(--kd-color-text-primary); + background-color: var(--kd-color-tags-background-gray); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-border-primary); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-background-ui-strong); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-gray); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-gray); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-border-inverse); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -161,55 +246,103 @@ /* spruce color */ &-spruce { - background-color: var(--kd-color-spruce-10); + background-color: var(--kd-color-tags-background-spruce); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-background-primary); + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-spruce); + } + + &:focus { + background-color: var(--kd-color-tags-hover-spruce); + outline-color: var(--kd-color-border-variants-focus); + + &:active { + outline-color: var(--kd-color-border-ui-pressed); + } } } + } - &-dark { - background-color: var(--kd-color-background-primary); - color: var(--kd-color-text-inversed); + /* interactive color */ + &-interactive { + background-color: var(--kd-color-tags-background-interactive); - &-close-btn { + &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-interactive); + } + + &:focus { + background-color: var(--kd-color-tags-hover-interactive); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-background-inverse-hover); + outline-color: var(--kd-color-border-ui-pressed); } } } } - /* failed color */ - &-failed { - background-color: var(--kd-color-background-error-light); + /* blue color */ + &-blue { + background-color: var(--kd-color-tags-background-blue); &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-border-error); + &:hover { + background-color: var(--kd-color-tags-hover-blue); + } + + &:focus { + background-color: var(--kd-color-tags-hover-blue); + outline-color: var(--kd-color-border-variants-focus); + + &:active { + outline-color: var(--kd-color-border-ui-pressed); + } } } + } - &-dark { - background-color: var(--kd-color-background-destructive); - color: var(--kd-color-text-inversed); + /* error color */ + &-error { + background-color: var(--kd-color-tags-background-error); - &-close-btn { + &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-error); + } + + &:focus { + background-color: var(--kd-color-tags-hover-error); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-error-light); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -217,54 +350,51 @@ /* warning color */ &-warning { - background-color: var(--kd-color-background-warning-light); + background-color: var(--kd-color-tags-background-warning); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-background-warning); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-background-warning); + &:hover { + background-color: var(--kd-color-tags-hover-warning); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-warning); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-background-warning-light); + outline-color: var(--kd-color-border-ui-pressed); } } } } - /* passed color */ - &-passed { - background-color: var(--kd-color-background-success-light); + /* success color */ + &-success { + background-color: var(--kd-color-tags-background-success); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: #00af41; + svg { + display: block; } - } - &-dark { - background-color: #00af41; - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-success); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-success); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-background-success-light); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -272,27 +402,25 @@ /* cat01 color */ &-cat01 { - background-color: var(--kd-color-data-seq-01-10); + background-color: var(--kd-color-tags-background-cat-1); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-01-40); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-01-40); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat-1); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat-1); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-01-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -300,27 +428,25 @@ /* cat02 color */ &-cat02 { - background-color: var(--kd-color-data-seq-02-10); + background-color: var(--kd-color-tags-background-cat-2); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-02-70); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-02-70); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat-2); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat-2); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-02-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -328,27 +454,25 @@ /* cat03 color */ &-cat03 { - background-color: var(--kd-color-data-seq-03-10); + background-color: var(--kd-color-tags-background-cat-3); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-03-40); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-03-40); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat-3); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat-3); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-03-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -356,27 +480,25 @@ /* cat04 color */ &-cat04 { - background-color: var(--kd-color-data-seq-04-10); + background-color: var(--kd-color-tags-background-cat-4); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-04-70); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-04-70); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat-4); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat-4); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-04-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -384,27 +506,51 @@ /* cat05 color */ &-cat05 { - background-color: var(--kd-color-data-seq-05-10); + background-color: var(--kd-color-tags-background-cat-5); &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-05-70); + &:hover { + background-color: var(--kd-color-tags-hover-cat-5); + } + + &:focus { + background-color: var(--kd-color-tags-hover-cat-5); + outline-color: var(--kd-color-border-variants-focus); + + &:active { + outline-color: var(--kd-color-border-ui-pressed); + } } } + } - &-dark { - background-color: var(--kd-color-data-seq-05-70); - color: var(--kd-color-text-inversed); + /* cat06 color */ + &-cat06 { + background-color: var(--kd-color-tags-background-cat-6); + + &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-cat-6); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat-6); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-05-10); + outline-color: var(--kd-color-border-ui-pressed); } } } diff --git a/src/components/reusable/tag/tag.skeleton.ts b/src/components/reusable/tag/tag.skeleton.ts index f42956b9..c5a02acc 100644 --- a/src/components/reusable/tag/tag.skeleton.ts +++ b/src/components/reusable/tag/tag.skeleton.ts @@ -34,24 +34,16 @@ export class TagSkeleton extends LitElement { @property({ type: String }) tagSize = 'sm'; - /** - * Shade `'light'` (default) and `'dark'` for tag. - */ - @property({ type: String }) - shade = 'light'; - override render() { - const shadeClass = this.shade === 'dark' ? '-dark' : ''; const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small'; const tagClasses = { tags: true, - [`${shadeClass}`]: true, [`${sizeClass}`]: true, }; return html` -
+
action(e.type)(e)} + @on-click=${(e) => action(e.type)(e)} /> `; }, diff --git a/src/components/reusable/tag/tag.ts b/src/components/reusable/tag/tag.ts index a6c6bf10..5583df2a 100644 --- a/src/components/reusable/tag/tag.ts +++ b/src/components/reusable/tag/tag.ts @@ -45,10 +45,10 @@ export class Tag extends LitElement { noTruncation = false; /** - * Shade `'light'` (default) and `'dark'` for tag + * Determine if Tag is clickable. */ - @property({ type: String }) - shade = 'light'; + @property({ type: Boolean }) + clickable = false; /** * Color variants. Default spruce @@ -64,18 +64,19 @@ export class Tag extends LitElement { override render() { const baseColorClass = `tag-${this.tagColor}`; - const shadeClass = this.shade === 'dark' ? '-dark' : ''; const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small'; const tagClasses = { tags: true, 'tag-disable': this.disabled, - [`${baseColorClass}${shadeClass}`]: true, + 'tag-clickable': this.clickable, + [`tag-clickable-${this.tagColor}`]: this.clickable, + [`${baseColorClass}`]: true, [`${sizeClass}`]: true, [`${sizeClass}-filter`]: this.filter, }; - const iconOutlineClasses = `${baseColorClass}${shadeClass}-close-btn`; + const iconOutlineClasses = `${baseColorClass}-close-btn`; const iconOutlineOffsetClass = `tag-close-btn-${this.tagSize}`; const iconClasses = { 'tag-close-btn': true, @@ -97,21 +98,23 @@ export class Tag extends LitElement { ?disabled="${this.disabled}" ?filter=${this.filter} tagColor=${this.tagColor} - shade=${this.shade} title="${this.label}" + tabindex="${this.clickable ? '0' : '-1'}" + @click=${(e: any) => this.handleTagClick(e, this.label)} + @keydown=${(e: any) => this.handleTagPress(e, this.label)} > ${this.label} ${this.filter ? html` @@ -122,7 +125,8 @@ export class Tag extends LitElement { } private handleTagClear(e: any, value: string) { - if (!this.disabled) { + e.stopPropagation(); + if (e.pointerType && !this.disabled) { const event = new CustomEvent('on-close', { detail: { value, @@ -132,6 +136,49 @@ export class Tag extends LitElement { this.dispatchEvent(event); } } + + private handleTagClearPress(e: any, value: string) { + e.stopPropagation(); + // Keyboard key codes: 32 = SPACE | 13 = ENTER + if ((e.keyCode === 32 || e.keyCode === 13) && !this.disabled) { + const event = new CustomEvent('on-close', { + detail: { + value, + origEvent: e, + }, + }); + this.dispatchEvent(event); + } + } + + private handleTagClick(e: any, value: string) { + if (!this.disabled && this.clickable) { + const event = new CustomEvent('on-click', { + detail: { + value, + origEvent: e, + }, + }); + this.dispatchEvent(event); + } + } + + private handleTagPress(e: any, value: string) { + // Keyboard key codes: 32 = SPACE | 13 = ENTER + if ( + (e.keyCode === 32 || e.keyCode === 13) && + !this.disabled && + this.clickable + ) { + const event = new CustomEvent('on-click', { + detail: { + value, + origEvent: e, + }, + }); + this.dispatchEvent(event); + } + } } declare global { diff --git a/src/components/reusable/tag/tagGroup.scss b/src/components/reusable/tag/tagGroup.scss index a85a6d96..f32d31a4 100644 --- a/src/components/reusable/tag/tagGroup.scss +++ b/src/components/reusable/tag/tagGroup.scss @@ -11,29 +11,7 @@ gap: 4px; } .tag-reveal-toggle { - @include typography.type-ui-03; - padding: 0 4px 0 4px; - background: 0 0; - border: none; - color: var(--kd-color-text-link); - border-radius: 2px; - cursor: pointer; - outline: 2px solid transparent; - min-width: 72px; - margin-left: 2px; - - &:hover { - color: var(--kd-color-text-link-hover); - background-color: var(--kd-color-background-accent-subtle); - } - - &:active { - color: var(--kd-color-text-pressed); - } - - &:focus { - outline-color: var(--kd-color-border-focus); - } + margin-left: 4px; &-md { height: 24px; diff --git a/src/components/reusable/tag/tagGroup.stories.js b/src/components/reusable/tag/tagGroup.stories.js index 34d296c8..06d4f258 100644 --- a/src/components/reusable/tag/tagGroup.stories.js +++ b/src/components/reusable/tag/tagGroup.stories.js @@ -14,25 +14,6 @@ export default { options: ['sm', 'md'], control: { type: 'select' }, }, - shade: { - options: ['light', 'dark'], - control: { type: 'select' }, - }, - tagColor: { - options: [ - 'grey', - 'spruce', - 'failed', - 'warning', - 'passed', - 'cat01', - 'cat02', - 'cat03', - 'cat04', - 'cat05', - ], - control: { type: 'select' }, - }, }, parameters: { design: { @@ -47,11 +28,10 @@ export const TagGroup = { filter: false, limitTags: false, tagSize: 'md', - textStrings:{ + textStrings: { showAll: 'Show all', showLess: 'Show less', }, - tagColor:"failed" }, render: (args) => { return html` @@ -85,7 +65,6 @@ export const Skeleton = { showLess: 'Show less', }, tagSkeletonLength: 10, - shade: 'light', }, render: (args) => { return html` @@ -97,7 +76,7 @@ export const Skeleton = { > ${Array.from( { length: args.tagSkeletonLength }, - () => html`` + () => html`` )} `; diff --git a/src/components/reusable/tag/tagGroup.ts b/src/components/reusable/tag/tagGroup.ts index 66547ee3..1afbd503 100644 --- a/src/components/reusable/tag/tagGroup.ts +++ b/src/components/reusable/tag/tagGroup.ts @@ -8,6 +8,7 @@ import { import { classMap } from 'lit-html/directives/class-map.js'; import './tag'; import TagGroupScss from './tagGroup.scss'; +import '@kyndryl-design-system/shidoka-foundation/components/link'; /** * Tag & Tag Group @@ -64,14 +65,15 @@ export class TagGroup extends LitElement { ${this.limitTags && this.tags.length > 5 ? html` - + ` : null}
diff --git a/src/stories/migration.mdx b/src/stories/migration.mdx index 3271b39f..d11bf1bf 100644 --- a/src/stories/migration.mdx +++ b/src/stories/migration.mdx @@ -31,6 +31,10 @@ _No migration effort required._ - Dropdown options - `selected` prop has been removed. Use the `value` prop from Dropdown to control the selection. +#### Tag & Tag skeleton + +- `shade` prop is removed. + #### Form Input Components - Radio Button Group , Number Input, Text Input , Text Area, Checkbox Group, Checkbox Subgroups, Dropdown