diff --git a/custom-elements.json b/custom-elements.json index 614f0527..39a55fa7 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -4,191 +4,131 @@ "modules": [ { "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" - }, - { - "description": "Slot for the logo, will overwrite the default logo.", - "name": "logo" - }, - { - "description": "Slot for the copyright text.", - "name": "copyright" - } - ], - "members": [ - { - "kind": "field", - "name": "rootUrl", - "type": { - "text": "string" - }, - "default": "'/'", - "description": "URL for the footer logo link. Should target the application home page.", - "attribute": "rootUrl" - }, - { - "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": "'/'", - "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 - } - ], + "path": "src/components/global/localNav/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "Footer", + "name": "LocalNav", "declaration": { - "name": "Footer", - "module": "src/components/global/footer/footer.ts" + "name": "LocalNav", + "module": "./localNav" } }, { - "kind": "custom-element-definition", - "name": "kyn-footer", + "kind": "js", + "name": "LocalNavLink", "declaration": { - "name": "Footer", - "module": "src/components/global/footer/footer.ts" + "name": "LocalNavLink", + "module": "./localNavLink" } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/footer/index.ts", - "declarations": [], - "exports": [ + }, { "kind": "js", - "name": "Footer", + "name": "LocalNavDivider", "declaration": { - "name": "Footer", - "module": "./footer" + "name": "LocalNavDivider", + "module": "./localNavDivider" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/header.ts", + "path": "src/components/global/localNav/localNav.ts", "declarations": [ { "kind": "class", - "description": "The global Header component.", - "name": "Header", + "description": "The global Side Navigation component.", + "name": "LocalNav", "slots": [ { - "description": "The default slot for all empty space right of the logo/title.", + "description": "The default slot, for local nav links.", "name": "unnamed" }, { - "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" + "description": "Slot for a search input", + "name": "search" } ], "members": [ { "kind": "field", - "name": "rootUrl", + "name": "pinned", "type": { - "text": "string" + "text": "boolean" }, - "default": "'/'", - "description": "URL for the header logo link. Should target the application home page.", - "attribute": "rootUrl" + "default": "false", + "description": "Local nav pinned state.", + "attribute": "pinned" }, { "kind": "field", - "name": "appTitle", + "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": "string" - }, - "default": "''", - "description": "App title text next to logo. Hidden on smaller screens.", - "attribute": "appTitle" + "text": "object" + } }, { "kind": "method", - "name": "handleSlotChange", + "name": "_handleNavToggle", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "_handleMobileNavToggle", "privacy": "private" }, { "kind": "method", - "name": "handleRootLinkClick", + "name": "handlePointerEnter", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "PointerEvent" } } ] }, { "kind": "method", - "name": "_handleNavToggle", + "name": "handlePointerLeave", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" + "text": "PointerEvent" } } ] }, { "kind": "method", - "name": "_handleFlyoutsToggle", + "name": "_updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleLinkActive", "privacy": "private", "parameters": [ { @@ -198,79 +138,79 @@ } } ] + }, + { + "kind": "method", + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] } ], "events": [ { - "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" + "description": "Captures the click event and emits the pinned state and original event details.", + "name": "on-toggle" } ], "attributes": [ { - "name": "rootUrl", + "name": "pinned", "type": { - "text": "string" + "text": "boolean" }, - "default": "'/'", - "description": "URL for the header logo link. Should target the application home page.", - "fieldName": "rootUrl" + "default": "false", + "description": "Local nav pinned state.", + "fieldName": "pinned" }, { - "name": "appTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "App title text next to logo. Hidden on smaller screens.", - "fieldName": "appTitle" + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header", + "tagName": "kyn-local-nav", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Header", + "name": "LocalNav", "declaration": { - "name": "Header", - "module": "src/components/global/header/header.ts" + "name": "LocalNav", + "module": "src/components/global/localNav/localNav.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header", + "name": "kyn-local-nav", "declaration": { - "name": "Header", - "module": "src/components/global/header/header.ts" + "name": "LocalNav", + "module": "src/components/global/localNav/localNav.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerCategory.ts", + "path": "src/components/global/localNav/localNavDivider.ts", "declarations": [ { "kind": "class", - "description": "Header link category", - "name": "HeaderCategory", - "slots": [ - { - "description": "Slot for links.", - "name": "unnamed" - } - ], + "description": "Local Nav divider", + "name": "LocalNavDivider", "members": [ { "kind": "field", @@ -279,7 +219,7 @@ "text": "string" }, "default": "''", - "description": "Link url.", + "description": "Optional heading text.", "attribute": "heading" } ], @@ -290,7 +230,7 @@ "text": "string" }, "default": "''", - "description": "Link url.", + "description": "Optional heading text.", "fieldName": "heading" } ], @@ -298,187 +238,131 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-category", + "tagName": "kyn-local-nav-divider", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderCategory", + "name": "LocalNavDivider", "declaration": { - "name": "HeaderCategory", - "module": "src/components/global/header/headerCategory.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-category", - "declaration": { - "name": "HeaderCategory", - "module": "src/components/global/header/headerCategory.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "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": "HeaderDivider", - "declaration": { - "name": "HeaderDivider", - "module": "src/components/global/header/headerDivider.ts" + "name": "LocalNavDivider", + "module": "src/components/global/localNav/localNavDivider.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-divider", + "name": "kyn-local-nav-divider", "declaration": { - "name": "HeaderDivider", - "module": "src/components/global/header/headerDivider.ts" + "name": "LocalNavDivider", + "module": "src/components/global/localNav/localNavDivider.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerFlyout.ts", + "path": "src/components/global/localNav/localNavLink.ts", "declarations": [ { "kind": "class", - "description": "Component for header flyout items.", - "name": "HeaderFlyout", + "description": "Link component for use in the global Side Navigation component.", + "name": "LocalNavLink", "slots": [ { - "description": "Slot for flyout menu content.", + "description": "The default slot, for the link text.", "name": "unnamed" }, { - "description": "Slot for button/toggle content.", - "name": "button" + "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": "open", + "name": "href", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Flyout open state.", - "attribute": "open" + "default": "''", + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "anchorLeft", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", - "attribute": "anchorLeft" + "description": "Expanded state.", + "attribute": "expanded" }, { "kind": "field", - "name": "hideArrow", + "name": "active", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the arrow.", - "attribute": "hideArrow" - }, - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Menu & button label.", - "attribute": "label" + "description": "Active state.", + "attribute": "active", + "reflects": true }, { "kind": "field", - "name": "hideMenuLabel", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the label at the top of the flyout menu.", - "attribute": "hideMenuLabel" + "description": "Disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "hideButtonLabel", + "name": "backText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hide the label in the mobile button.", - "attribute": "hideButtonLabel" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { - "kind": "field", - "name": "assistiveText", - "type": { - "text": "string" - }, - "default": "''", - "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", - "attribute": "assistiveText" + "kind": "method", + "name": "_handleTextSlotChange", + "privacy": "private" }, { - "kind": "field", - "name": "href", - "type": { - "text": "string" - }, - "default": "''", - "description": "Turns the button into a link.", - "attribute": "href" + "kind": "method", + "name": "_getSlotText", + "privacy": "private" }, { - "kind": "field", - "name": "backText", - "type": { - "text": "string" - }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" + "kind": "method", + "name": "_handleLinksSlotChange", + "privacy": "private" }, { "kind": "method", - "name": "_handleBack", + "name": "updateChildren", "privacy": "private" }, { "kind": "method", - "name": "handleClick", + "name": "_handleBack", "privacy": "private" }, { "kind": "method", - "name": "handleClickOut", + "name": "handleClick", "privacy": "private", "parameters": [ { @@ -488,85 +372,50 @@ } } ] - }, + } + ], + "events": [ { - "kind": "method", - "name": "_handleOverlayClick", - "privacy": "private" + "description": "Captures the click event and emits the original event, level, and if default was prevented.", + "name": "on-click" } ], "attributes": [ { - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Flyout open state.", - "fieldName": "open" - }, - { - "name": "anchorLeft", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", - "fieldName": "anchorLeft" - }, - { - "name": "hideArrow", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the arrow.", - "fieldName": "hideArrow" - }, - { - "name": "label", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Menu & button label.", - "fieldName": "label" + "description": "Link url.", + "fieldName": "href" }, { - "name": "hideMenuLabel", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the label at the top of the flyout menu.", - "fieldName": "hideMenuLabel" + "description": "Expanded state.", + "fieldName": "expanded" }, { - "name": "hideButtonLabel", + "name": "active", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the label in the mobile button.", - "fieldName": "hideButtonLabel" - }, - { - "name": "assistiveText", - "type": { - "text": "string" - }, - "default": "''", - "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", - "fieldName": "assistiveText" + "description": "Active state.", + "fieldName": "active" }, { - "name": "href", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Turns the button into a link.", - "fieldName": "href" + "default": "false", + "description": "Disabled state.", + "fieldName": "disabled" }, { "name": "backText", @@ -582,61 +431,65 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-flyout", + "tagName": "kyn-local-nav-link", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderFlyout", + "name": "LocalNavLink", "declaration": { - "name": "HeaderFlyout", - "module": "src/components/global/header/headerFlyout.ts" + "name": "LocalNavLink", + "module": "src/components/global/localNav/localNavLink.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-flyout", + "name": "kyn-local-nav-link", "declaration": { - "name": "HeaderFlyout", - "module": "src/components/global/header/headerFlyout.ts" + "name": "LocalNavLink", + "module": "src/components/global/localNav/localNavLink.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerFlyouts.ts", + "path": "src/components/global/footer/footer.ts", "declarations": [ { "kind": "class", - "description": "Container for header-flyout components.", - "name": "HeaderFlyouts", + "description": "The global Footer component.", + "name": "Footer", "slots": [ { - "description": "Slot for header-flyout components.", + "description": "Default slot, for links.", "name": "unnamed" + }, + { + "description": "Slot for the logo, will overwrite the default logo.", + "name": "logo" + }, + { + "description": "Slot for the copyright text.", + "name": "copyright" } ], "members": [ { "kind": "field", - "name": "open", + "name": "rootUrl", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "attribute": "open" - }, - { - "kind": "method", - "name": "_toggleOpen", - "privacy": "private" + "default": "'/'", + "description": "URL for the footer logo link. Should target the application home page.", + "attribute": "rootUrl" }, { "kind": "method", - "name": "_handleClickOut", + "name": "handleRootLinkClick", "privacy": "private", "parameters": [ { @@ -648,1066 +501,591 @@ ] } ], + "events": [ + { + "description": "Captures the logo link click event and emits the original event.", + "name": "on-root-link-click" + } + ], "attributes": [ { - "name": "open", + "name": "rootUrl", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "fieldName": "open" + "default": "'/'", + "description": "URL for the footer logo link. Should target the application home page.", + "fieldName": "rootUrl" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-flyouts", + "tagName": "kyn-footer", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderFlyouts", + "name": "Footer", "declaration": { - "name": "HeaderFlyouts", - "module": "src/components/global/header/headerFlyouts.ts" + "name": "Footer", + "module": "src/components/global/footer/footer.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-flyouts", + "name": "kyn-footer", "declaration": { - "name": "HeaderFlyouts", - "module": "src/components/global/header/headerFlyouts.ts" + "name": "Footer", + "module": "src/components/global/footer/footer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerLink.ts", + "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": "Component for navigation links within the Header.", - "name": "HeaderLink", + "description": "The global Header component.", + "name": "Header", "slots": [ { - "description": "Slot for link text/content.", + "description": "The default slot for all empty space right of the logo/title.", "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" + "description": "Slot for the logo, will overwrite the default logo.", + "name": "logo" }, { - "kind": "field", - "name": "divider", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", - "attribute": "divider" + "description": "Slot left of the logo, intended for the header nav.", + "name": "left" }, { - "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" - }, + "description": "Slot between logo/title and right flyouts.", + "name": "center" + } + ], + "members": [ { "kind": "field", - "name": "backText", + "name": "rootUrl", "type": { "text": "string" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" + "default": "'/'", + "description": "URL for the header logo link. Should target the application home page.", + "attribute": "rootUrl" }, { "kind": "field", - "name": "_searchTerm", + "name": "appTitle", "type": { "text": "string" }, "default": "''", - "description": "Text for mobile \"Back\" button." - }, - { - "kind": "method", - "name": "_handleSearch", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "_searchFilter", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleBack", - "privacy": "private" + "description": "App title text next to logo. Hidden on smaller screens.", + "attribute": "appTitle" }, { "kind": "method", - "name": "_handleLinksSlotChange", + "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", - "name": "handlePointerEnter", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "PointerEvent" - } - } - ] - }, - { - "kind": "method", - "name": "handlePointerLeave", + "name": "handleRootLinkClick", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "PointerEvent" + "text": "Event" } } ] }, { "kind": "method", - "name": "handleClick", + "name": "_handleNavToggle", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] }, { "kind": "method", - "name": "handleClickOut", + "name": "_handleFlyoutsToggle", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] - }, - { - "kind": "method", - "name": "determineLevel", - "privacy": "private" - }, - { - "kind": "method", - "name": "_positionMenu", - "privacy": "private" } ], "events": [ { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" + "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": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Link open state.", - "fieldName": "open" - }, - { - "name": "href", + "name": "rootUrl", "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" + "default": "'/'", + "description": "URL for the header logo link. Should target the application home page.", + "fieldName": "rootUrl" }, { - "name": "rel", + "name": "appTitle", "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" - }, - { - "name": "isActive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Link active state, for example when URL path matches link href.", - "fieldName": "isActive" - }, - { - "name": "divider", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", - "fieldName": "divider" - }, - { - "name": "searchLabel", - "type": { - "text": "string" - }, - "default": "'Search'", - "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", - "fieldName": "searchLabel" - }, - { - "name": "backText", - "type": { - "text": "string" - }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" + "description": "App title text next to logo. Hidden on smaller screens.", + "fieldName": "appTitle" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-link", + "tagName": "kyn-header", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderLink", + "name": "Header", "declaration": { - "name": "HeaderLink", - "module": "src/components/global/header/headerLink.ts" + "name": "Header", + "module": "src/components/global/header/header.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-link", + "name": "kyn-header", "declaration": { - "name": "HeaderLink", - "module": "src/components/global/header/headerLink.ts" + "name": "Header", + "module": "src/components/global/header/header.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerNav.ts", + "path": "src/components/global/header/headerCategory.ts", "declarations": [ { "kind": "class", - "description": "Container for header navigation links.", - "name": "HeaderNav", + "description": "Header link category", + "name": "HeaderCategory", "slots": [ { - "description": "This element has a slot.", + "description": "Slot for links.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "slot", + "name": "heading", "type": { "text": "string" }, - "default": "'left'", - "description": "Force correct slot", - "attribute": "slot", - "reflects": true - }, - { - "kind": "method", - "name": "_toggleMenuOpen", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleClickOut", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "_handleOverlayClick", - "privacy": "private" + "default": "''", + "description": "Link url.", + "attribute": "heading" } ], "attributes": [ { - "name": "slot", + "name": "heading", "type": { "text": "string" }, - "default": "'left'", - "description": "Force correct slot", - "fieldName": "slot" + "default": "''", + "description": "Link url.", + "fieldName": "heading" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-nav", + "tagName": "kyn-header-category", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderNav", + "name": "HeaderCategory", "declaration": { - "name": "HeaderNav", - "module": "src/components/global/header/headerNav.ts" + "name": "HeaderCategory", + "module": "src/components/global/header/headerCategory.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-nav", + "name": "kyn-header-category", "declaration": { - "name": "HeaderNav", - "module": "src/components/global/header/headerNav.ts" + "name": "HeaderCategory", + "module": "src/components/global/header/headerCategory.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerNotificationPanel.ts", + "path": "src/components/global/header/headerDivider.ts", "declarations": [ { "kind": "class", - "description": "Component for notification panel within the Header.", - "name": "HeaderNotificationPanel", - "slots": [ - { - "description": "Slot for panel menu", - "name": "menu-slot" - }, - { - "description": "Slot for notification content.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "panelTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Notification panel Title.", - "attribute": "panelTitle" - }, - { - "kind": "field", - "name": "panelFooterBtnText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Notification panel footer button text.", - "attribute": "panelFooterBtnText" - }, - { - "kind": "field", - "name": "hidePanelFooter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hide notification panel footer", - "attribute": "hidePanelFooter" - }, - { - "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": "Notification panel Title.", - "fieldName": "panelTitle" - }, - { - "name": "panelFooterBtnText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Notification panel footer button text.", - "fieldName": "panelFooterBtnText" - }, - { - "name": "hidePanelFooter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hide notification panel footer", - "fieldName": "hidePanelFooter" - } - ], + "description": "Header divider", + "name": "HeaderDivider", + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-notification-panel", + "tagName": "kyn-header-divider", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderNotificationPanel", + "name": "HeaderDivider", "declaration": { - "name": "HeaderNotificationPanel", - "module": "src/components/global/header/headerNotificationPanel.ts" + "name": "HeaderDivider", + "module": "src/components/global/header/headerDivider.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-notification-panel", + "name": "kyn-header-divider", "declaration": { - "name": "HeaderNotificationPanel", - "module": "src/components/global/header/headerNotificationPanel.ts" + "name": "HeaderDivider", + "module": "src/components/global/header/headerDivider.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerPanelLink.ts", + "path": "src/components/global/header/headerFlyout.ts", "declarations": [ { "kind": "class", - "description": "Header fly-out panel link.", - "name": "HeaderPanelLink", + "description": "Component for header flyout items.", + "name": "HeaderFlyout", "slots": [ { - "description": "Slot for link text/content.", + "description": "Slot for flyout menu content.", "name": "unnamed" + }, + { + "description": "Slot for button/toggle content.", + "name": "button" } ], "members": [ { "kind": "field", - "name": "href", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Link url.", - "attribute": "href" + "default": "false", + "description": "Flyout open state.", + "attribute": "open" }, { "kind": "field", - "name": "target", - "default": "'_self'", + "name": "anchorLeft", "type": { - "text": "'_self'" + "text": "boolean" }, - "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", - "attribute": "target" + "default": "false", + "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", + "attribute": "anchorLeft" }, { "kind": "field", - "name": "rel", + "name": "hideArrow", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "attribute": "rel" + "default": "false", + "description": "Hides the arrow.", + "attribute": "hideArrow" }, { - "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", + "kind": "field", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "fieldName": "href" + "description": "Menu & button label.", + "attribute": "label" }, { - "name": "target", - "default": "'_self'", + "kind": "field", + "name": "hideMenuLabel", "type": { - "text": "'_self'" + "text": "boolean" }, - "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", - "fieldName": "target" + "default": "false", + "description": "Hide the label at the top of the flyout menu.", + "attribute": "hideMenuLabel" }, - { - "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": "name", + "name": "hideButtonLabel", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "The user's name.", - "attribute": "name" + "default": "false", + "description": "Hide the label in the mobile button.", + "attribute": "hideButtonLabel" }, { "kind": "field", - "name": "subtitle", + "name": "assistiveText", "type": { "text": "string" }, "default": "''", - "description": "The user's job title, or subtext.", - "attribute": "subtitle" + "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", + "attribute": "assistiveText" }, { "kind": "field", - "name": "email", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "The user's email address.", - "attribute": "email" + "description": "Turns the button into a link.", + "attribute": "href" }, { "kind": "field", - "name": "profileLink", + "name": "backText", "type": { "text": "string" }, - "default": "''", - "description": "View profile link URL.", - "attribute": "profileLink" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { - "kind": "field", - "name": "profileLinkText", - "type": { - "text": "string" - }, - "default": "'View Profile'", - "description": "View Profile link text.", - "attribute": "profileLinkText" + "kind": "method", + "name": "_handleBack", + "privacy": "private" }, { "kind": "method", - "name": "_handleProfileClick", + "name": "handleClick", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleClickOut", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" + "text": "Event" } } ] - } - ], - "events": [ + }, { - "description": "Captures the view profile link click event and emits the original event details.", - "name": "on-profile-link-click" + "kind": "method", + "name": "_handleOverlayClick", + "privacy": "private" } ], "attributes": [ { - "name": "name", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "The user's name.", - "fieldName": "name" + "default": "false", + "description": "Flyout open state.", + "fieldName": "open" }, { - "name": "subtitle", + "name": "anchorLeft", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", + "fieldName": "anchorLeft" + }, + { + "name": "hideArrow", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the arrow.", + "fieldName": "hideArrow" + }, + { + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "The user's job title, or subtext.", - "fieldName": "subtitle" + "description": "Menu & button label.", + "fieldName": "label" }, { - "name": "email", + "name": "hideMenuLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide the label at the top of the flyout menu.", + "fieldName": "hideMenuLabel" + }, + { + "name": "hideButtonLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide the label in the mobile button.", + "fieldName": "hideButtonLabel" + }, + { + "name": "assistiveText", "type": { "text": "string" }, "default": "''", - "description": "The user's email address.", - "fieldName": "email" + "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", + "fieldName": "assistiveText" }, { - "name": "profileLink", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "View profile link URL.", - "fieldName": "profileLink" + "description": "Turns the button into a link.", + "fieldName": "href" }, { - "name": "profileLinkText", + "name": "backText", "type": { "text": "string" }, - "default": "'View Profile'", - "description": "View Profile link text.", - "fieldName": "profileLinkText" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-user-profile", + "tagName": "kyn-header-flyout", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderUserProfile", + "name": "HeaderFlyout", "declaration": { - "name": "HeaderUserProfile", - "module": "src/components/global/header/headerUserProfile.ts" + "name": "HeaderFlyout", + "module": "src/components/global/header/headerFlyout.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-user-profile", + "name": "kyn-header-flyout", "declaration": { - "name": "HeaderUserProfile", - "module": "src/components/global/header/headerUserProfile.ts" + "name": "HeaderFlyout", + "module": "src/components/global/header/headerFlyout.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/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", - "declarations": [ + "path": "src/components/global/header/headerFlyouts.ts", + "declarations": [ { "kind": "class", - "description": "The global Side Navigation component.", - "name": "LocalNav", + "description": "Container for header-flyout components.", + "name": "HeaderFlyouts", "slots": [ { - "description": "The default slot, for local nav links.", + "description": "Slot for header-flyout components.", "name": "unnamed" - }, - { - "description": "Slot for a search input", - "name": "search" } ], "members": [ { "kind": "field", - "name": "pinned", + "name": "open", "type": { "text": "boolean" }, "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": "_handleNavToggle", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "_handleMobileNavToggle", - "privacy": "private" - }, - { - "kind": "method", - "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" + "attribute": "open" }, { "kind": "method", - "name": "handleSlotChange", + "name": "_toggleOpen", "privacy": "private" }, - { - "kind": "method", - "name": "_handleLinkActive", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, { "kind": "method", "name": "_handleClickOut", @@ -1722,177 +1100,131 @@ ] } ], - "events": [ - { - "description": "Captures the click event and emits the pinned state and original event details.", - "name": "on-toggle" - } - ], "attributes": [ { - "name": "pinned", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Local nav pinned state.", - "fieldName": "pinned" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" + "fieldName": "open" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-local-nav", + "tagName": "kyn-header-flyouts", "customElement": true } ], "exports": [ { "kind": "js", - "name": "LocalNav", + "name": "HeaderFlyouts", "declaration": { - "name": "LocalNav", - "module": "src/components/global/localNav/localNav.ts" + "name": "HeaderFlyouts", + "module": "src/components/global/header/headerFlyouts.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-local-nav", + "name": "kyn-header-flyouts", "declaration": { - "name": "LocalNav", - "module": "src/components/global/localNav/localNav.ts" + "name": "HeaderFlyouts", + "module": "src/components/global/header/headerFlyouts.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/localNav/localNavDivider.ts", + "path": "src/components/global/header/headerLink.ts", "declarations": [ { "kind": "class", - "description": "Local Nav divider", - "name": "LocalNavDivider", + "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": "heading", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Optional heading text.", - "attribute": "heading" - } - ], - "attributes": [ + "default": "false", + "description": "Link open state.", + "attribute": "open" + }, { - "name": "heading", + "kind": "field", + "name": "href", "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": "LocalNavDivider", - "declaration": { - "name": "LocalNavDivider", - "module": "src/components/global/localNav/localNavDivider.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-local-nav-divider", - "declaration": { - "name": "LocalNavDivider", - "module": "src/components/global/localNav/localNavDivider.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/localNav/localNavLink.ts", - "declarations": [ - { - "kind": "class", - "description": "Link component for use in the global Side Navigation component.", - "name": "LocalNavLink", - "slots": [ - { - "description": "The default slot, for the link text.", - "name": "unnamed" + "description": "Link url.", + "attribute": "href" }, { - "description": "Slot for an icon. Use 16px size.", - "name": "icon" + "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" }, - { - "description": "Slot for the next level of links, supports three levels.", - "name": "links" - } - ], - "members": [ { "kind": "field", - "name": "href", + "name": "rel", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "attribute": "href" + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "attribute": "rel" }, { "kind": "field", - "name": "expanded", + "name": "isActive", "type": { "text": "boolean" }, "default": "false", - "description": "Expanded state.", - "attribute": "expanded" + "description": "Link active state, for example when URL path matches link href.", + "attribute": "isActive" }, { "kind": "field", - "name": "active", + "name": "divider", "type": { "text": "boolean" }, "default": "false", - "description": "Active state.", - "attribute": "active", - "reflects": true + "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", + "attribute": "divider" }, { "kind": "field", - "name": "disabled", + "name": "searchLabel", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Disabled state.", - "attribute": "disabled" + "default": "'Search'", + "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", + "attribute": "searchLabel" }, { "kind": "field", @@ -1904,14 +1236,36 @@ "description": "Text for mobile \"Back\" button.", "attribute": "backText" }, + { + "kind": "field", + "name": "_searchTerm", + "type": { + "text": "string" + }, + "default": "''", + "description": "Text for mobile \"Back\" button." + }, { "kind": "method", - "name": "_handleTextSlotChange", + "name": "_handleSearch", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_searchFilter", "privacy": "private" }, { "kind": "method", - "name": "_getSlotText", + "name": "_handleBack", "privacy": "private" }, { @@ -1921,13 +1275,29 @@ }, { "kind": "method", - "name": "updateChildren", - "privacy": "private" + "name": "handlePointerEnter", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] }, { "kind": "method", - "name": "_handleBack", - "privacy": "private" + "name": "handlePointerLeave", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] }, { "kind": "method", @@ -1941,15 +1311,47 @@ } } ] + }, + { + "kind": "method", + "name": "handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "determineLevel", + "privacy": "private" + }, + { + "kind": "method", + "name": "_positionMenu", + "privacy": "private" } ], "events": [ { - "description": "Captures the click event and emits the original event, level, and if default was prevented.", + "description": "Captures the click event and emits the original event details.", "name": "on-click" } ], "attributes": [ + { + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Link open state.", + "fieldName": "open" + }, { "name": "href", "type": { @@ -1960,31 +1362,49 @@ "fieldName": "href" }, { - "name": "expanded", + "name": "target", + "default": "'_self'", "type": { - "text": "boolean" + "text": "'_self'" }, - "default": "false", - "description": "Expanded state.", - "fieldName": "expanded" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "fieldName": "target" }, { - "name": "active", + "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" + }, + { + "name": "isActive", "type": { "text": "boolean" }, "default": "false", - "description": "Active state.", - "fieldName": "active" + "description": "Link active state, for example when URL path matches link href.", + "fieldName": "isActive" }, { - "name": "disabled", + "name": "divider", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "fieldName": "disabled" + "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", + "fieldName": "divider" + }, + { + "name": "searchLabel", + "type": { + "text": "string" + }, + "default": "'Search'", + "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", + "fieldName": "searchLabel" }, { "name": "backText", @@ -2000,235 +1420,872 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-local-nav-link", + "tagName": "kyn-header-link", "customElement": true } ], "exports": [ { "kind": "js", - "name": "LocalNavLink", + "name": "HeaderLink", "declaration": { - "name": "LocalNavLink", - "module": "src/components/global/localNav/localNavLink.ts" + "name": "HeaderLink", + "module": "src/components/global/header/headerLink.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-local-nav-link", - "declaration": { - "name": "LocalNavLink", - "module": "src/components/global/localNav/localNavLink.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/uiShell/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "UiShell", + "name": "kyn-header-link", "declaration": { - "name": "UiShell", - "module": "./uiShell" + "name": "HeaderLink", + "module": "src/components/global/header/headerLink.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/uiShell/uiShell.ts", + "path": "src/components/global/header/headerNav.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": "Container for header navigation links.", + "name": "HeaderNav", + "slots": [ { - "description": "Slot for global elements.", + "description": "This element has a slot.", "name": "unnamed" } ], "members": [ + { + "kind": "field", + "name": "slot", + "type": { + "text": "string" + }, + "default": "'left'", + "description": "Force correct slot", + "attribute": "slot", + "reflects": true + }, { "kind": "method", - "name": "handleSlotChange", + "name": "_toggleMenuOpen", + "privacy": "private" + }, + { + "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": "'left'", + "description": "Force correct slot", + "fieldName": "slot" + } + ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-ui-shell", + "tagName": "kyn-header-nav", "customElement": true } ], "exports": [ { "kind": "js", - "name": "UiShell", + "name": "HeaderNav", "declaration": { - "name": "UiShell", - "module": "src/components/global/uiShell/uiShell.ts" + "name": "HeaderNav", + "module": "src/components/global/header/headerNav.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-ui-shell", + "name": "kyn-header-nav", "declaration": { - "name": "UiShell", - "module": "src/components/global/uiShell/uiShell.ts" + "name": "HeaderNav", + "module": "src/components/global/header/headerNav.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/blockCodeView/blockCodeView.ts", + "path": "src/components/global/header/headerNotificationPanel.ts", "declarations": [ { "kind": "class", - "description": "`` component to display `` snippets as standalone single-/multi-line block elements.", - "name": "BlockCodeView", + "description": "Component for notification panel within the Header.", + "name": "HeaderNotificationPanel", + "slots": [ + { + "description": "Slot for panel menu", + "name": "menu-slot" + }, + { + "description": "Slot for notification content.", + "name": "unnamed" + } + ], "members": [ { "kind": "field", - "name": "darkTheme", + "name": "panelTitle", "type": { - "text": "'light' | 'dark'" + "text": "string" }, - "default": "'dark'", - "description": "Sets background and text theming.", - "attribute": "darkTheme" + "default": "''", + "description": "Notification panel Title.", + "attribute": "panelTitle" }, { "kind": "field", - "name": "language", + "name": "panelFooterBtnText", "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" + "description": "Notification panel footer button text.", + "attribute": "panelFooterBtnText" }, { "kind": "field", - "name": "maxHeight", + "name": "hidePanelFooter", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Customizable max-height setting for code snippet container.", - "attribute": "maxHeight" + "default": "false", + "description": "Hide notification panel footer", + "attribute": "hidePanelFooter" }, { - "kind": "field", - "name": "codeViewLabel", + "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": "Optionally displayed label above code snippet container.", - "attribute": "codeViewLabel" + "description": "Notification panel Title.", + "fieldName": "panelTitle" }, { - "kind": "field", - "name": "copyOptionVisible", + "name": "panelFooterBtnText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Optionally display button to copy code snippet.", - "attribute": "copyOptionVisible" + "default": "''", + "description": "Notification panel footer button text.", + "fieldName": "panelFooterBtnText" }, { - "kind": "field", - "name": "codeViewExpandable", + "name": "hidePanelFooter", "type": { "text": "boolean" }, "default": "false", - "description": "Optionally display button to expand code snippet container.", - "attribute": "codeViewExpandable" - }, + "description": "Hide notification panel footer", + "fieldName": "hidePanelFooter" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-notification-panel", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderNotificationPanel", + "declaration": { + "name": "HeaderNotificationPanel", + "module": "src/components/global/header/headerNotificationPanel.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-notification-panel", + "declaration": { + "name": "HeaderNotificationPanel", + "module": "src/components/global/header/headerNotificationPanel.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerPanelLink.ts", + "declarations": [ + { + "kind": "class", + "description": "Header fly-out panel link.", + "name": "HeaderPanelLink", + "slots": [ + { + "description": "Slot for link text/content.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "copyButtonText", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Sets copy code button text (optional).", - "attribute": "copyButtonText" + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "copyButtonDescriptionAttr", + "name": "target", + "default": "'_self'", "type": { - "text": "string" + "text": "'_self'" }, - "default": "''", - "description": "Sets copy button description attr value.", - "attribute": "copyButtonDescriptionAttr" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "attribute": "target" }, { "kind": "field", - "name": "codeSnippet", + "name": "rel", "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" + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "attribute": "rel" }, { "kind": "method", - "name": "detectLanguage", + "name": "handleClick", "privacy": "private", - "return": { - "type": { - "text": "string" - } - }, "parameters": [ { - "name": "code", + "name": "e", "type": { - "text": "string" + "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": "name", + "type": { + "text": "string" + }, + "default": "''", + "description": "The user's name.", + "attribute": "name" + }, + { + "kind": "field", + "name": "subtitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "The user's job title, or subtext.", + "attribute": "subtitle" + }, + { + "kind": "field", + "name": "email", + "type": { + "text": "string" + }, + "default": "''", + "description": "The user's email address.", + "attribute": "email" + }, + { + "kind": "field", + "name": "profileLink", + "type": { + "text": "string" + }, + "default": "''", + "description": "View profile link URL.", + "attribute": "profileLink" + }, + { + "kind": "field", + "name": "profileLinkText", + "type": { + "text": "string" + }, + "default": "'View Profile'", + "description": "View Profile link text.", + "attribute": "profileLinkText" + }, + { + "kind": "method", + "name": "_handleProfileClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the view profile link click event and emits the original event details.", + "name": "on-profile-link-click" + } + ], + "attributes": [ + { + "name": "name", + "type": { + "text": "string" + }, + "default": "''", + "description": "The user's name.", + "fieldName": "name" + }, + { + "name": "subtitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "The user's job title, or subtext.", + "fieldName": "subtitle" + }, + { + "name": "email", + "type": { + "text": "string" + }, + "default": "''", + "description": "The user's email address.", + "fieldName": "email" + }, + { + "name": "profileLink", + "type": { + "text": "string" + }, + "default": "''", + "description": "View profile link URL.", + "fieldName": "profileLink" + }, + { + "name": "profileLinkText", + "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" } } ] @@ -2541,63 +2598,6 @@ } ] }, - { - "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/card/index.ts", @@ -3369,13 +3369,17 @@ }, { "kind": "javascript-module", - "path": "src/components/reusable/datePicker/datepicker.ts", + "path": "src/components/reusable/dropdown/dropdown.ts", "declarations": [ { "kind": "class", - "description": "Datepicker: uses Flatpickr's datetime picker library -- `https://flatpickr.js.org`", - "name": "DatePicker", + "description": "Dropdown, single select.", + "name": "Dropdown", "slots": [ + { + "description": "Slot for dropdown options.", + "name": "unnamed" + }, { "description": "Slot for tooltip.", "name": "tooltip" @@ -3392,55 +3396,6 @@ "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", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets datepicker form input value to required/required.", - "attribute": "required" - }, { "kind": "field", "name": "size", @@ -3448,380 +3403,440 @@ "text": "string" }, "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", + "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", "attribute": "size" }, { "kind": "field", - "name": "value", + "name": "inline", "type": { - "text": "Date | Date[] | null" + "text": "boolean" }, - "default": "null", - "description": "Sets pre-selected date/time value.", - "attribute": "value" + "default": "false", + "description": "Dropdown inline style type.", + "attribute": "inline" }, { "kind": "field", - "name": "warnText", + "name": "caption", "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" + "description": "Optional text beneath the input.", + "attribute": "caption" }, { "kind": "field", - "name": "enable", + "name": "placeholder", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "attribute": "enable" + "default": "''", + "description": "Dropdown placeholder.", + "attribute": "placeholder" }, { "kind": "field", - "name": "mode", + "name": "open", "type": { - "text": "'single' | 'multiple'" + "text": "boolean" }, - "default": "'single'", - "description": "Sets flatpickr mode to select single (default), multiple dates.", - "attribute": "mode" + "default": "false", + "description": "Listbox/drawer open state.", + "attribute": "open" }, { "kind": "field", - "name": "caption", + "name": "searchable", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "default": "false", + "description": "Makes the dropdown searchable.", + "attribute": "searchable" }, { "kind": "field", - "name": "datePickerDisabled", + "name": "filterSearch", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "attribute": "datePickerDisabled" + "description": "Searchable variant filters results.", + "attribute": "filterSearch" }, { "kind": "field", - "name": "twentyFourHourFormat", + "name": "multiple", "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": "Enabled multi-select functionality.", + "attribute": "multiple" }, { "kind": "field", - "name": "minDate", + "name": "required", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "attribute": "minDate" + "default": "false", + "description": "Makes the dropdown required.", + "attribute": "required" }, { "kind": "field", - "name": "maxDate", + "name": "disabled", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "attribute": "maxDate" + "default": "false", + "description": "Dropdown disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "errorAriaLabel", + "name": "hideTags", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "default": "false", + "description": "Hide the tags below multi-select.", + "attribute": "hideTags" }, { "kind": "field", - "name": "errorTitle", + "name": "selectAll", "type": { - "text": "string" - }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "text": "boolean" + }, + "default": "false", + "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", + "attribute": "selectAll" }, { "kind": "field", - "name": "warningAriaLabel", + "name": "selectAllText", "type": { "text": "string" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "default": "'Select all'", + "description": "\"Select all\" text customization.", + "attribute": "selectAllText" }, { "kind": "field", - "name": "warningTitle", + "name": "menuMinWidth", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" + "default": "'initial'", + "description": "Menu CSS min-width value.", + "attribute": "menuMinWidth" }, { "kind": "field", "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", + "default": "{\n selectedOptions: 'List of selected options',\n required: 'Required',\n error: 'Error',\n}", + "description": "Text string customization.", "attribute": "textStrings", "type": { "text": "object" } }, { - "kind": "method", - "name": "renderValidationMessage", - "privacy": "private", - "parameters": [ - { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", - "type": { - "text": "string" - } - } - ] + "kind": "field", + "name": "searchText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Search input value.", + "attribute": "searchText" }, { "kind": "method", - "name": "getDatepickerClasses" + "name": "handleSlotChange", + "privacy": "private" }, { "kind": "method", - "name": "reinitializeFlatpickr", + "name": "handleClick", "privacy": "private" }, { "kind": "method", - "name": "setupAnchor", + "name": "_handleLabelClick", "privacy": "private" }, { "kind": "method", - "name": "_handleClear", + "name": "handleButtonKeydown", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { - "text": "Event" + "text": "any" } } ] }, { "kind": "method", - "name": "initializeFlatpickr", - "return": { - "type": { - "text": "Promise" + "name": "handleListKeydown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - } + ] }, { "kind": "method", - "name": "updateFlatpickrOptions", - "return": { - "type": { - "text": "Promise" + "name": "handleListBlur", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - } + ] }, { "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" + "name": "handleKeyboard", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + }, + { + "name": "keyCode", + "type": { + "text": "number" + } + }, + { + "name": "target", + "type": { + "text": "string" + } } - } + ] }, { "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" + "name": "handleClearMultiple", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - } + ] }, { "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" + "name": "handleTagClear", + "privacy": "private", + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + } } - } + ] }, { "kind": "method", - "name": "handleClose", - "return": { - "type": { - "text": "Promise" + "name": "handleClear", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - } + ] }, { "kind": "method", - "name": "handleDateChange", - "return": { - "type": { - "text": "Promise" - } - }, + "name": "handleSearchClick", + "privacy": "private", "parameters": [ { - "name": "selectedDates", + "name": "e", "type": { - "text": "Date[]" + "text": "any" } - }, + } + ] + }, + { + "kind": "method", + "name": "handleButtonBlur", + "privacy": "private", + "parameters": [ { - "name": "dateStr", + "name": "e", "type": { - "text": "string" + "text": "any" } } ] }, { "kind": "method", - "name": "setShouldFlatpickrOpen", + "name": "handleSearchBlur", "privacy": "private", - "return": { - "type": { - "text": "void" + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - }, + ] + }, + { + "kind": "method", + "name": "handleSearchKeydown", + "privacy": "private", "parameters": [ { - "name": "value", + "name": "e", "type": { - "text": "boolean" + "text": "any" } } ] }, { "kind": "method", - "name": "closeFlatpickr", + "name": "handleSearchInput", "privacy": "private", - "return": { - "type": { - "text": "void" + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - } + ] }, { "kind": "method", - "name": "preventFlatpickrOpen", + "name": "_updateSelectedOptions", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleClick", "privacy": "private", - "return": { - "type": { - "text": "void" + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - }, + ] + }, + { + "kind": "method", + "name": "_handleBlur", + "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { - "text": "Event" + "text": "any" } } ] }, { "kind": "method", - "name": "handleInputClickEvent", + "name": "_handleClickOut", "privacy": "private", - "return": { - "type": { - "text": "void" + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } } - } + ] }, { "kind": "method", - "name": "handleInputFocusEvent", + "name": "updateValue", "privacy": "private", - "return": { - "type": { - "text": "void" + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + } + }, + { + "name": "selected", + "default": "false" } - } + ] }, { "kind": "method", "name": "_validate", "privacy": "private", - "return": { - "type": { - "text": "void" - } - }, "parameters": [ { "name": "interacted", "type": { - "text": "boolean" + "text": "Boolean" } }, { "name": "report", "type": { - "text": "boolean" + "text": "Boolean" } } ] }, { "kind": "method", - "name": "_onChange", + "name": "emitValue", "privacy": "private" }, { "kind": "method", - "name": "_handleFormReset", + "name": "_emitSearch", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateTags", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateOptions", "privacy": "private" } ], @@ -3829,6 +3844,14 @@ { "description": "Captures the input event and emits the selected value and original event details.", "name": "on-change" + }, + { + "description": "Capture the search input event and emits the search text.", + "name": "on-search" + }, + { + "description": "Captures the the multi-select clear all button click event and emits the value.", + "name": "on-clear-all" } ], "attributes": [ @@ -3842,39 +3865,76 @@ "fieldName": "label" }, { - "name": "locale", + "name": "size", "type": { - "text": "SupportedLocale" + "text": "string" }, - "default": "'en'", - "fieldName": "locale" + "default": "'md'", + "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "dateFormat", + "name": "inline", "type": { - "text": "string" + "text": "boolean" }, - "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": "false", + "description": "Dropdown inline style type.", + "fieldName": "inline" }, { - "name": "defaultDate", + "name": "caption", "type": { - "text": "Date | null" + "text": "string" }, - "default": "null", - "description": "Sets the initial selected date(s)", - "fieldName": "defaultDate" + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "defaultErrorMessage", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "description": "Dropdown placeholder.", + "fieldName": "placeholder" + }, + { + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Listbox/drawer open state.", + "fieldName": "open" + }, + { + "name": "searchable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Makes the dropdown searchable.", + "fieldName": "searchable" + }, + { + "name": "filterSearch", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Searchable variant filters results.", + "fieldName": "filterSearch" + }, + { + "name": "multiple", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Enabled multi-select functionality.", + "fieldName": "multiple" }, { "name": "required", @@ -3882,195 +3942,320 @@ "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", + "description": "Makes the dropdown required.", "fieldName": "required" }, { - "name": "size", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "default": "false", + "description": "Dropdown disabled state.", + "fieldName": "disabled" }, { - "name": "value", + "name": "hideTags", "type": { - "text": "Date | Date[] | null" + "text": "boolean" }, - "default": "null", - "description": "Sets pre-selected date/time value.", - "fieldName": "value" + "default": "false", + "description": "Hide the tags below multi-select.", + "fieldName": "hideTags" }, { - "name": "warnText", + "name": "selectAll", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" + "default": "false", + "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", + "fieldName": "selectAll" }, { - "name": "disable", + "name": "selectAllText", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "fieldName": "disable" + "default": "'Select all'", + "description": "\"Select all\" text customization.", + "fieldName": "selectAllText" }, { - "name": "enable", + "name": "menuMinWidth", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "fieldName": "enable" + "default": "'initial'", + "description": "Menu CSS min-width value.", + "fieldName": "menuMinWidth" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" }, { - "name": "mode", - "type": { - "text": "'single' | 'multiple'" - }, - "default": "'single'", - "description": "Sets flatpickr mode to select single (default), multiple dates.", - "fieldName": "mode" - }, + "name": "searchText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Search input value.", + "fieldName": "searchText" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-dropdown", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Dropdown", + "declaration": { + "name": "Dropdown", + "module": "src/components/reusable/dropdown/dropdown.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-dropdown", + "declaration": { + "name": "Dropdown", + "module": "src/components/reusable/dropdown/dropdown.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/dropdown/dropdownCategory.ts", + "declarations": [ + { + "kind": "class", + "description": "Dropdown category.", + "name": "DropdownCategory", + "slots": [ + { + "description": "Slot for category title text.", + "name": "unnamed" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-dropdown-category", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "DropdownCategory", + "declaration": { + "name": "DropdownCategory", + "module": "src/components/reusable/dropdown/dropdownCategory.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-dropdown-category", + "declaration": { + "name": "DropdownCategory", + "module": "src/components/reusable/dropdown/dropdownCategory.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/dropdown/dropdownOption.ts", + "declarations": [ + { + "kind": "class", + "description": "Dropdown option.", + "name": "DropdownOption", + "slots": [ + { + "description": "Slot for option text.", + "name": "unnamed" + } + ], + "members": [ { - "name": "caption", + "kind": "field", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "description": "Option value.", + "attribute": "value" }, { - "name": "datePickerDisabled", + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "fieldName": "datePickerDisabled" + "description": "Option disabled state.", + "attribute": "disabled" }, { - "name": "twentyFourHourFormat", + "kind": "field", + "name": "indeterminate", "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.", - "fieldName": "twentyFourHourFormat" + "default": "false", + "description": "Determines whether the checkbox is in an indeterminate state.", + "attribute": "indeterminate", + "reflects": true }, { - "name": "minDate", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "fieldName": "minDate" + "kind": "method", + "name": "handleSlotChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { - "name": "maxDate", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "fieldName": "maxDate" + "kind": "method", + "name": "handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] }, { - "name": "errorAriaLabel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" - }, + "kind": "method", + "name": "handleBlur", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ { - "name": "errorTitle", + "description": "Emits the option details to the parent dropdown.", + "name": "on-click" + } + ], + "attributes": [ + { + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "description": "Option value.", + "fieldName": "value" }, { - "name": "warningAriaLabel", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "default": "false", + "description": "Option disabled state.", + "fieldName": "disabled" }, { - "name": "warningTitle", + "name": "indeterminate", "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": "Determines whether the checkbox is in an indeterminate state.", + "fieldName": "indeterminate" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-date-picker", + "tagName": "kyn-dropdown-option", "customElement": true } ], "exports": [ { "kind": "js", - "name": "DatePicker", + "name": "DropdownOption", "declaration": { - "name": "DatePicker", - "module": "src/components/reusable/datePicker/datepicker.ts" + "name": "DropdownOption", + "module": "src/components/reusable/dropdown/dropdownOption.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-date-picker", + "name": "kyn-dropdown-option", "declaration": { - "name": "DatePicker", - "module": "src/components/reusable/datePicker/datepicker.ts" + "name": "DropdownOption", + "module": "src/components/reusable/dropdown/dropdownOption.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/datePicker/index.ts", + "path": "src/components/reusable/dropdown/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "DatePicker", + "name": "Dropdown", "declaration": { - "name": "DatePicker", - "module": "./datepicker" + "name": "Dropdown", + "module": "./dropdown" + } + }, + { + "kind": "js", + "name": "DropdownOption", + "declaration": { + "name": "DropdownOption", + "module": "./dropdownOption" + } + }, + { + "kind": "js", + "name": "DropdownCategory", + "declaration": { + "name": "DropdownCategory", + "module": "./dropdownCategory" } } ] @@ -4735,17 +4920,13 @@ }, { "kind": "javascript-module", - "path": "src/components/reusable/dropdown/dropdown.ts", + "path": "src/components/reusable/datePicker/datepicker.ts", "declarations": [ { "kind": "class", - "description": "Dropdown, single select.", - "name": "Dropdown", + "description": "Datepicker: uses Flatpickr's datetime picker library -- `https://flatpickr.js.org`", + "name": "DatePicker", "slots": [ - { - "description": "Slot for dropdown options.", - "name": "unnamed" - }, { "description": "Slot for tooltip.", "name": "tooltip" @@ -4764,445 +4945,434 @@ }, { "kind": "field", - "name": "size", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "attribute": "locale" + }, + { + "kind": "field", + "name": "dateFormat", "type": { "text": "string" }, - "default": "'md'", - "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", - "attribute": "size" + "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": "inline", + "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", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets datepicker form input value to required/required.", + "attribute": "required" + }, + { + "kind": "field", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Dropdown inline style type.", - "attribute": "inline" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { "kind": "field", - "name": "caption", + "name": "value", "type": { - "text": "string" + "text": "Date | Date[] | null" }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "default": "null", + "description": "Sets pre-selected date/time value.", + "attribute": "value" }, { "kind": "field", - "name": "placeholder", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Dropdown placeholder.", - "attribute": "placeholder" + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { "kind": "field", - "name": "open", + "name": "disable", "type": { - "text": "boolean" + "text": "(string | number | Date)[]" }, - "default": "false", - "description": "Listbox/drawer open state.", - "attribute": "open" + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "attribute": "disable" }, { "kind": "field", - "name": "searchable", + "name": "enable", "type": { - "text": "boolean" + "text": "(string | number | Date)[]" }, - "default": "false", - "description": "Makes the dropdown searchable.", - "attribute": "searchable" + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "attribute": "enable" }, { "kind": "field", - "name": "filterSearch", + "name": "mode", "type": { - "text": "boolean" + "text": "'single' | 'multiple'" }, - "default": "false", - "description": "Searchable variant filters results.", - "attribute": "filterSearch" + "default": "'single'", + "description": "Sets flatpickr mode to select single (default), multiple dates.", + "attribute": "mode" }, { "kind": "field", - "name": "multiple", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Enabled multi-select functionality.", - "attribute": "multiple" + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, { "kind": "field", - "name": "required", + "name": "datePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the dropdown required.", - "attribute": "required" + "description": "Sets entire datepicker form element to enabled/disabled.", + "attribute": "datePickerDisabled" }, { "kind": "field", - "name": "disabled", + "name": "twentyFourHourFormat", "type": { - "text": "boolean" + "text": "boolean | null" }, - "default": "false", - "description": "Dropdown disabled state.", - "attribute": "disabled" + "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": "hideTags", + "name": "minDate", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "default": "false", - "description": "Hide the tags below multi-select.", - "attribute": "hideTags" + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "attribute": "minDate" }, { "kind": "field", - "name": "selectAll", + "name": "maxDate", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "default": "false", - "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", - "attribute": "selectAll" + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "attribute": "maxDate" }, { "kind": "field", - "name": "selectAllText", + "name": "errorAriaLabel", "type": { "text": "string" }, - "default": "'Select all'", - "description": "\"Select all\" text customization.", - "attribute": "selectAllText" + "default": "''", + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" }, { "kind": "field", - "name": "menuMinWidth", + "name": "errorTitle", "type": { "text": "string" }, - "default": "'initial'", - "description": "Menu CSS min-width value.", - "attribute": "menuMinWidth" + "default": "''", + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" }, { "kind": "field", - "name": "textStrings", - "default": "{\n selectedOptions: 'List of selected options',\n required: 'Required',\n error: 'Error',\n}", - "description": "Text string customization.", - "attribute": "textStrings", + "name": "warningAriaLabel", "type": { - "text": "object" - } + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" }, { "kind": "field", - "name": "searchText", + "name": "warningTitle", "type": { "text": "string" }, "default": "''", - "description": "Search input value.", - "attribute": "searchText" - }, - { - "kind": "method", - "name": "handleSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleClick", - "privacy": "private" + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" }, { - "kind": "method", - "name": "_handleLabelClick", - "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": "handleButtonKeydown", + "name": "renderValidationMessage", "privacy": "private", "parameters": [ { - "name": "e", + "name": "errorId", "type": { - "text": "any" + "text": "string" } - } - ] - }, - { - "kind": "method", - "name": "handleListKeydown", - "privacy": "private", - "parameters": [ + }, { - "name": "e", + "name": "warningId", "type": { - "text": "any" + "text": "string" } } ] }, { "kind": "method", - "name": "handleListBlur", + "name": "getDatepickerClasses" + }, + { + "kind": "method", + "name": "reinitializeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "setupAnchor", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleClear", "privacy": "private", "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "any" + "text": "Event" } } ] }, { "kind": "method", - "name": "handleKeyboard", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - }, - { - "name": "keyCode", - "type": { - "text": "number" - } - }, - { - "name": "target", - "type": { - "text": "string" - } + "name": "initializeFlatpickr", + "return": { + "type": { + "text": "Promise" } - ] + } }, { "kind": "method", - "name": "handleClearMultiple", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } + "name": "updateFlatpickrOptions", + "return": { + "type": { + "text": "Promise" } - ] + } }, { "kind": "method", - "name": "handleTagClear", - "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - } + "name": "setInitialDates", + "return": { + "type": { + "text": "void" } - ] + } }, { "kind": "method", - "name": "handleClear", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" } - ] + } }, { "kind": "method", - "name": "handleSearchClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } + "name": "handleOpen", + "return": { + "type": { + "text": "void" } - ] + } }, { "kind": "method", - "name": "handleButtonBlur", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } + "name": "handleClose", + "return": { + "type": { + "text": "Promise" } - ] + } }, { "kind": "method", - "name": "handleSearchBlur", - "privacy": "private", + "name": "handleDateChange", + "return": { + "type": { + "text": "Promise" + } + }, "parameters": [ { - "name": "e", + "name": "selectedDates", "type": { - "text": "any" + "text": "Date[]" } - } - ] - }, - { - "kind": "method", - "name": "handleSearchKeydown", - "privacy": "private", - "parameters": [ + }, { - "name": "e", + "name": "dateStr", "type": { - "text": "any" + "text": "string" } } ] }, { "kind": "method", - "name": "handleSearchInput", + "name": "setShouldFlatpickrOpen", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "value", "type": { - "text": "any" + "text": "boolean" } } ] }, { "kind": "method", - "name": "_updateSelectedOptions", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleClick", + "name": "closeFlatpickr", "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } + "return": { + "type": { + "text": "void" } - ] + } }, { "kind": "method", - "name": "_handleBlur", + "name": "preventFlatpickrOpen", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "any" + "text": "Event" } } ] }, { "kind": "method", - "name": "_handleClickOut", + "name": "handleInputClickEvent", "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } + "return": { + "type": { + "text": "void" } - ] + } }, { "kind": "method", - "name": "updateValue", + "name": "handleInputFocusEvent", "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - } - }, - { - "name": "selected", - "default": "false" + "return": { + "type": { + "text": "void" } - ] + } }, { "kind": "method", "name": "_validate", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { "name": "interacted", "type": { - "text": "Boolean" + "text": "boolean" } }, { "name": "report", "type": { - "text": "Boolean" + "text": "boolean" } } ] }, { "kind": "method", - "name": "emitValue", - "privacy": "private" - }, - { - "kind": "method", - "name": "_emitSearch", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateTags", + "name": "_onChange", "privacy": "private" }, { "kind": "method", - "name": "_updateOptions", + "name": "_handleFormReset", "privacy": "private" } ], @@ -5210,14 +5380,6 @@ { "description": "Captures the input event and emits the selected value and original event details.", "name": "on-change" - }, - { - "description": "Capture the search input event and emits the search text.", - "name": "on-search" - }, - { - "description": "Captures the the multi-select clear all button click event and emits the value.", - "name": "on-clear-all" } ], "attributes": [ @@ -5231,397 +5393,235 @@ "fieldName": "label" }, { - "name": "size", + "name": "locale", "type": { - "text": "string" + "text": "SupportedLocale" }, - "default": "'md'", - "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "default": "'en'", + "fieldName": "locale" }, { - "name": "inline", + "name": "dateFormat", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Dropdown inline style type.", - "fieldName": "inline" + "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": "caption", + "name": "defaultDate", "type": { - "text": "string" + "text": "Date | null" }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" + "default": "null", + "description": "Sets the initial selected date(s)", + "fieldName": "defaultDate" }, { - "name": "placeholder", + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Dropdown placeholder.", - "fieldName": "placeholder" - }, - { - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Listbox/drawer open state.", - "fieldName": "open" - }, - { - "name": "searchable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the dropdown searchable.", - "fieldName": "searchable" - }, - { - "name": "filterSearch", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Searchable variant filters results.", - "fieldName": "filterSearch" - }, - { - "name": "multiple", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enabled multi-select functionality.", - "fieldName": "multiple" - }, - { - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the dropdown required.", - "fieldName": "required" - }, - { - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Dropdown disabled state.", - "fieldName": "disabled" - }, - { - "name": "hideTags", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hide the tags below multi-select.", - "fieldName": "hideTags" + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "name": "selectAll", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", - "fieldName": "selectAll" + "description": "Sets datepicker form input value to required/required.", + "fieldName": "required" }, { - "name": "selectAllText", + "name": "size", "type": { "text": "string" }, - "default": "'Select all'", - "description": "\"Select all\" text customization.", - "fieldName": "selectAllText" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "menuMinWidth", + "name": "value", "type": { - "text": "string" + "text": "Date | Date[] | null" }, - "default": "'initial'", - "description": "Menu CSS min-width value.", - "fieldName": "menuMinWidth" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" + "default": "null", + "description": "Sets pre-selected date/time value.", + "fieldName": "value" }, { - "name": "searchText", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Search input value.", - "fieldName": "searchText" - } - ], - "mixins": [ + "description": "Sets validation warning messaging.", + "fieldName": "warnText" + }, { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-dropdown", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Dropdown", - "declaration": { - "name": "Dropdown", - "module": "src/components/reusable/dropdown/dropdown.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-dropdown", - "declaration": { - "name": "Dropdown", - "module": "src/components/reusable/dropdown/dropdown.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/dropdown/dropdownCategory.ts", - "declarations": [ - { - "kind": "class", - "description": "Dropdown category.", - "name": "DropdownCategory", - "slots": [ + "name": "disable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "fieldName": "disable" + }, { - "description": "Slot for category title text.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-dropdown-category", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "DropdownCategory", - "declaration": { - "name": "DropdownCategory", - "module": "src/components/reusable/dropdown/dropdownCategory.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-dropdown-category", - "declaration": { - "name": "DropdownCategory", - "module": "src/components/reusable/dropdown/dropdownCategory.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/dropdown/dropdownOption.ts", - "declarations": [ - { - "kind": "class", - "description": "Dropdown option.", - "name": "DropdownOption", - "slots": [ + "name": "enable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "fieldName": "enable" + }, { - "description": "Slot for option text.", - "name": "unnamed" - } - ], - "members": [ + "name": "mode", + "type": { + "text": "'single' | 'multiple'" + }, + "default": "'single'", + "description": "Sets flatpickr mode to select single (default), multiple dates.", + "fieldName": "mode" + }, { - "kind": "field", - "name": "value", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Option value.", - "attribute": "value" + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" }, { - "kind": "field", - "name": "disabled", + "name": "datePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Option disabled state.", - "attribute": "disabled" + "description": "Sets entire datepicker form element to enabled/disabled.", + "fieldName": "datePickerDisabled" }, { - "kind": "field", - "name": "indeterminate", + "name": "twentyFourHourFormat", "type": { - "text": "boolean" + "text": "boolean | null" }, - "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "attribute": "indeterminate", - "reflects": true + "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": "handleSlotChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "minDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "fieldName": "minDate" }, { - "kind": "method", - "name": "handleClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] + "name": "maxDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "fieldName": "maxDate" }, { - "kind": "method", - "name": "handleBlur", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Emits the option details to the parent dropdown.", - "name": "on-click" - } - ], - "attributes": [ - { - "name": "value", + "name": "errorAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "Option value.", - "fieldName": "value" + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "name": "disabled", + "name": "errorTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "Sets title attribute for error message.", + "fieldName": "errorTitle" + }, + { + "name": "warningAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for warning message.", + "fieldName": "warningAriaLabel" }, { - "name": "indeterminate", + "name": "warningTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "fieldName": "indeterminate" + "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-dropdown-option", + "tagName": "kyn-date-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "DropdownOption", + "name": "DatePicker", "declaration": { - "name": "DropdownOption", - "module": "src/components/reusable/dropdown/dropdownOption.ts" + "name": "DatePicker", + "module": "src/components/reusable/datePicker/datepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-dropdown-option", + "name": "kyn-date-picker", "declaration": { - "name": "DropdownOption", - "module": "src/components/reusable/dropdown/dropdownOption.ts" + "name": "DatePicker", + "module": "src/components/reusable/datePicker/datepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/dropdown/index.ts", + "path": "src/components/reusable/datePicker/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Dropdown", - "declaration": { - "name": "Dropdown", - "module": "./dropdown" - } - }, - { - "kind": "js", - "name": "DropdownOption", - "declaration": { - "name": "DropdownOption", - "module": "./dropdownOption" - } - }, - { - "kind": "js", - "name": "DropdownCategory", + "name": "DatePicker", "declaration": { - "name": "DropdownCategory", - "module": "./dropdownCategory" + "name": "DatePicker", + "module": "./datepicker" } } ] @@ -7205,6 +7205,11 @@ "kind": "method", "name": "_sizeMap", "privacy": "private", + "return": { + "type": { + "text": "'small' | 'medium' | 'large'" + } + }, "parameters": [ { "name": "size", @@ -8412,661 +8417,428 @@ "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": [ - { - "name": "on-page-number-change", - "type": { - "text": "CustomEvent" - }, - "description": "Dispatched when the page number is changed." - } - ], - "attributes": [ - { - "name": "pageNumber", - "type": { - "text": "number" - }, - "default": "1", - "fieldName": "pageNumber" - }, - { - "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": "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": "handleChange", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - }, - "description": "The dropdown change event." - } - ], - "description": "Handles the dropdown change event." - } - ], - "events": [ - { - "name": "on-page-size-change", - "type": { - "text": "CustomEvent" - }, - "description": "The event fired when the page size changes." - } - ], - "attributes": [ - { - "name": "pageSize", - "type": { - "text": "number" - }, - "default": "5", - "description": "Current page size.", - "fieldName": "pageSize" - }, - { - "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", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the items range display.", - "attribute": "hideItemsRange" - }, - { - "kind": "field", - "name": "hidePageSizeDropdown", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "attribute": "hidePageSizeDropdown" - }, + "description": "Handles the button click event, either moving to the next page or previous page" + } + ], + "events": [ { - "kind": "field", - "name": "hideNavigationButtons", + "name": "on-page-number-change", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Option to hide the navigation buttons.", - "attribute": "hideNavigationButtons" + "description": "Dispatched when the page number is changed." } ], "attributes": [ { - "name": "hideItemsRange", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the items range display.", - "fieldName": "hideItemsRange" - }, - { - "name": "hidePageSizeDropdown", + "name": "pageNumber", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "fieldName": "hidePageSizeDropdown" + "default": "1", + "fieldName": "pageNumber" }, { - "name": "hideNavigationButtons", + "name": "numberOfPages", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Option to hide the navigation buttons.", - "fieldName": "hideNavigationButtons" + "default": "1", + "fieldName": "numberOfPages" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination-skeleton", + "tagName": "kyn-pagination-navigation-buttons", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PaginationSkeleton", + "name": "PaginationNavigationButtons", "declaration": { - "name": "PaginationSkeleton", - "module": "src/components/reusable/pagination/pagination.skeleton.ts" + "name": "PaginationNavigationButtons", + "module": "src/components/reusable/pagination/pagination-navigation-buttons.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/progressBar/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "ProgressBar", + "name": "kyn-pagination-navigation-buttons", "declaration": { - "name": "ProgressBar", - "module": "./progressBar" + "name": "PaginationNavigationButtons", + "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/progressBar/progressBar.ts", + "path": "src/components/reusable/pagination/pagination-page-size-dropdown.ts", "declarations": [ { "kind": "class", - "description": "`` -- progress bar status indicator component.", - "name": "ProgressBar", - "slots": [ - { - "description": "Slot for tooltip text content.", - "name": "unnamed" - } - ], + "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": "field", - "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": "number | null" - }, - "default": "null", - "description": "Sets initial progress bar value (optionally hard-coded).", - "attribute": "value" - }, - { - "kind": "field", - "name": "max", + "name": "pageSize", "type": { "text": "number" }, - "default": "100", - "description": "Sets manual max value (default = 100).", - "attribute": "max" - }, - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets optional progress bar label.", - "attribute": "label" - }, - { - "kind": "field", - "name": "helperText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets optional helper text that appears underneath progress bar element.", - "attribute": "helperText" - }, - { - "kind": "field", - "name": "unit", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", - "attribute": "unit" + "default": "5", + "description": "Current page size.", + "attribute": "pageSize", + "reflects": true }, { "kind": "field", - "name": "hideLabel", + "name": "pageSizeOptions", "type": { - "text": "boolean" + "text": "Array" }, - "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" - } - } - ] - }, - { - "kind": "method", - "name": "renderProgressBarLabel", - "privacy": "private", - "parameters": [ - { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", - "type": { - "text": "number | null" - } - } - ] - }, - { - "kind": "method", - "name": "renderStatusIconOrLoader", - "privacy": "private", - "parameters": [ - { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", - "type": { - "text": "number | null" - } - } - ] - }, - { - "kind": "method", - "name": "getProgressBarClasses", - "privacy": "private", - "parameters": [ - { - "name": "status", - "type": { - "text": "ProgressStatus" - } - } - ] - }, - { - "kind": "method", - "name": "getHelperText", - "privacy": "private" + "default": "[5, 10, 20, 30, 40, 50]", + "description": "Available options for the page size.", + "attribute": "pageSizeOptions" }, { "kind": "method", - "name": "getCurrentStatus", + "name": "handleChange", "privacy": "private", - "return": { - "type": { - "text": "ProgressStatus" - } - }, "parameters": [ { - "name": "currentValue", + "name": "event", "type": { - "text": "number | null" - } + "text": "CustomEvent" + }, + "description": "The dropdown change event." } - ] - }, + ], + "description": "Handles the dropdown change event." + } + ], + "events": [ { - "kind": "method", - "name": "startProgress", - "privacy": "private" + "name": "on-page-size-change", + "type": { + "text": "CustomEvent" + }, + "description": "The event fired when the page size changes." + } + ], + "attributes": [ + { + "name": "pageSize", + "type": { + "text": "number" + }, + "default": "5", + "description": "Current page size.", + "fieldName": "pageSize" }, { - "kind": "method", - "name": "cancelAnimation", - "privacy": "private" + "name": "pageSizeOptions", + "type": { + "text": "Array" + }, + "default": "[5, 10, 20, 30, 40, 50]", + "description": "Available options for the page size.", + "fieldName": "pageSizeOptions" } ], - "attributes": [ + "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": "showInlineLoadStatus", + "kind": "field", + "name": "hideItemsRange", "type": { "text": "boolean" }, "default": "false", - "description": "Sets visibility of optional inline load status spinner.", - "fieldName": "showInlineLoadStatus" + "description": "Option to hide the items range display.", + "attribute": "hideItemsRange" }, { - "name": "showActiveHelperText", + "kind": "field", + "name": "hidePageSizeDropdown", "type": { "text": "boolean" }, "default": "false", - "description": "Controls whether to show default helper text for active state.", - "fieldName": "showActiveHelperText" + "description": "Option to hide the page size dropdown.", + "attribute": "hidePageSizeDropdown" }, { - "name": "progressBarId", + "kind": "field", + "name": "hideNavigationButtons", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets progress bar html id property for accessibility (ex: `example-progress-bar`).", - "fieldName": "progressBarId" - }, + "default": "false", + "description": "Option to hide the navigation buttons.", + "attribute": "hideNavigationButtons" + } + ], + "attributes": [ { - "name": "status", + "name": "hideItemsRange", "type": { - "text": "'active' | 'success' | 'error'" + "text": "boolean" }, - "default": "'active'", - "description": "Sets progress bar status mode.", - "fieldName": "status" + "default": "false", + "description": "Option to hide the items range display.", + "fieldName": "hideItemsRange" }, { - "name": "value", + "name": "hidePageSizeDropdown", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial progress bar value (optionally hard-coded).", - "fieldName": "value" + "default": "false", + "description": "Option to hide the page size dropdown.", + "fieldName": "hidePageSizeDropdown" }, { - "name": "max", + "name": "hideNavigationButtons", "type": { - "text": "number" + "text": "boolean" }, - "default": "100", - "description": "Sets manual max value (default = 100).", - "fieldName": "max" - }, + "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": [ { - "name": "label", + "description": "Slot for label text.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Sets optional progress bar label.", - "fieldName": "label" + "description": "Radio button value.", + "attribute": "value" }, { - "name": "helperText", + "kind": "field", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets optional helper text that appears underneath progress bar element.", - "fieldName": "helperText" + "default": "false", + "description": "Radio button disabled state, inherited from the parent group.", + "attribute": "disabled" }, { - "name": "unit", + "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", "type": { "text": "string" }, "default": "''", - "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", - "fieldName": "unit" + "description": "Radio button value.", + "fieldName": "value" }, { - "name": "hideLabel", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" + "description": "Radio button disabled state, inherited from the parent group.", + "fieldName": "disabled" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-progress-bar", + "tagName": "kyn-radio-button", "customElement": true } ], - "exports": [ - { - "kind": "js", - "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": "RadioButton", - "module": "./radioButton" + "module": "src/components/reusable/radioButton/radioButton.ts" } }, { - "kind": "js", - "name": "RadioButtonGroup", + "kind": "custom-element-definition", + "name": "kyn-radio-button", "declaration": { - "name": "RadioButtonGroup", - "module": "./radioButtonGroup" + "name": "RadioButton", + "module": "src/components/reusable/radioButton/radioButton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/radioButton/radioButton.ts", + "path": "src/components/reusable/radioButton/radioButtonGroup.ts", "declarations": [ { "kind": "class", - "description": "Radio button.", - "name": "RadioButton", + "description": "Radio button group container.", + "name": "RadioButtonGroup", "slots": [ { - "description": "Slot for label text.", + "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": "value", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Radio button value.", - "attribute": "value" + "description": "Label text", + "attribute": "label" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", @@ -9075,18 +8847,67 @@ "text": "boolean" }, "default": "false", - "description": "Radio button disabled state, inherited from the parent group.", + "description": "Radio button group disabled state.", "attribute": "disabled" }, + { + "kind": "field", + "name": "horizontal", + "type": { + "text": "boolean" + }, + "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": "handleChange", + "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": "Event" + "text": "any" } } ] @@ -9094,19 +8915,28 @@ ], "events": [ { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-radio-change" + "description": "Captures the change event and emits the selected value.", + "name": "on-radio-group-change" } ], "attributes": [ { - "name": "value", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Radio button value.", - "fieldName": "value" + "description": "Label text", + "fieldName": "label" + }, + { + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Makes the input required.", + "fieldName": "required" }, { "name": "disabled", @@ -9114,60 +8944,148 @@ "text": "boolean" }, "default": "false", - "description": "Radio button disabled state, inherited from the parent group.", + "description": "Radio button group disabled state.", "fieldName": "disabled" + }, + { + "name": "horizontal", + "type": { + "text": "boolean" + }, + "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" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-radio-button", + "tagName": "kyn-radio-button-group", "customElement": true } ], "exports": [ { "kind": "js", - "name": "RadioButton", + "name": "RadioButtonGroup", "declaration": { - "name": "RadioButton", - "module": "src/components/reusable/radioButton/radioButton.ts" + "name": "RadioButtonGroup", + "module": "src/components/reusable/radioButton/radioButtonGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-radio-button", + "name": "kyn-radio-button-group", "declaration": { - "name": "RadioButton", - "module": "src/components/reusable/radioButton/radioButton.ts" + "name": "RadioButtonGroup", + "module": "src/components/reusable/radioButton/radioButtonGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/radioButton/radioButtonGroup.ts", + "path": "src/components/reusable/progressBar/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "ProgressBar", + "declaration": { + "name": "ProgressBar", + "module": "./progressBar" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/progressBar/progressBar.ts", "declarations": [ { "kind": "class", - "description": "Radio button group container.", - "name": "RadioButtonGroup", + "description": "`` -- progress bar status indicator component.", + "name": "ProgressBar", "slots": [ { - "description": "Slot for individual radio buttons.", + "description": "Slot for tooltip text content.", "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "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": "number | null" + }, + "default": "null", + "description": "Sets initial progress bar value (optionally hard-coded).", + "attribute": "value" }, { - "description": "Slot for description text.", - "name": "description" + "kind": "field", + "name": "max", + "type": { + "text": "number" + }, + "default": "100", + "description": "Sets manual max value (default = 100).", + "attribute": "max" }, - { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], - "members": [ { "kind": "field", "name": "label", @@ -9175,171 +9093,258 @@ "text": "string" }, "default": "''", - "description": "Label text", + "description": "Sets optional progress bar label.", "attribute": "label" }, { "kind": "field", - "name": "required", + "name": "helperText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "default": "''", + "description": "Sets optional helper text that appears underneath progress bar element.", + "attribute": "helperText" }, { "kind": "field", - "name": "disabled", + "name": "unit", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Radio button group disabled state.", - "attribute": "disabled" + "default": "''", + "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", + "attribute": "unit" }, { "kind": "field", - "name": "horizontal", + "name": "hideLabel", "type": { "text": "boolean" }, "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" - } + "description": "Visually hide the label.", + "attribute": "hideLabel" }, { "kind": "method", - "name": "_handleSlotChange", - "privacy": "private" + "name": "renderProgressBar", + "privacy": "private", + "parameters": [ + { + "name": "currentStatus", + "type": { + "text": "ProgressStatus" + } + }, + { + "name": "currentValue", + "type": { + "text": "number | null" + } + } + ] }, { "kind": "method", - "name": "_updateChildren", - "privacy": "private" + "name": "renderProgressBarLabel", + "privacy": "private", + "parameters": [ + { + "name": "currentStatus", + "type": { + "text": "ProgressStatus" + } + }, + { + "name": "currentValue", + "type": { + "text": "number | null" + } + } + ] }, { "kind": "method", - "name": "_validate", + "name": "renderStatusIconOrLoader", "privacy": "private", "parameters": [ { - "name": "interacted", + "name": "currentStatus", "type": { - "text": "Boolean" + "text": "ProgressStatus" } }, { - "name": "report", + "name": "currentValue", "type": { - "text": "Boolean" + "text": "number | null" } } ] }, { "kind": "method", - "name": "_handleRadioChange", + "name": "getProgressBarClasses", "privacy": "private", "parameters": [ { - "name": "e", + "name": "status", "type": { - "text": "any" + "text": "ProgressStatus" } } ] - } - ], - "events": [ + }, { - "description": "Captures the change event and emits the selected value.", - "name": "on-radio-group-change" + "kind": "method", + "name": "getHelperText", + "privacy": "private" + }, + { + "kind": "method", + "name": "getCurrentStatus", + "privacy": "private", + "return": { + "type": { + "text": "ProgressStatus" + } + }, + "parameters": [ + { + "name": "currentValue", + "type": { + "text": "number | null" + } + } + ] + }, + { + "kind": "method", + "name": "startProgress", + "privacy": "private" + }, + { + "kind": "method", + "name": "cancelAnimation", + "privacy": "private" } ], "attributes": [ + { + "name": "showInlineLoadStatus", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets visibility of optional inline load status spinner.", + "fieldName": "showInlineLoadStatus" + }, + { + "name": "showActiveHelperText", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Controls whether to show default helper text for active state.", + "fieldName": "showActiveHelperText" + }, + { + "name": "progressBarId", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets progress bar html id property for accessibility (ex: `example-progress-bar`).", + "fieldName": "progressBarId" + }, + { + "name": "status", + "type": { + "text": "'active' | 'success' | 'error'" + }, + "default": "'active'", + "description": "Sets progress bar status mode.", + "fieldName": "status" + }, + { + "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": "''", - "description": "Label text", + "description": "Sets optional progress bar label.", "fieldName": "label" }, { - "name": "required", + "name": "helperText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "default": "''", + "description": "Sets optional helper text that appears underneath progress bar element.", + "fieldName": "helperText" }, { - "name": "disabled", + "name": "unit", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Radio button group disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", + "fieldName": "unit" }, { - "name": "horizontal", + "name": "hideLabel", "type": { "text": "boolean" }, "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" + "description": "Visually hide the label.", + "fieldName": "hideLabel" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-radio-button-group", + "tagName": "kyn-progress-bar", "customElement": true } ], "exports": [ { "kind": "js", - "name": "RadioButtonGroup", + "name": "ProgressBar", "declaration": { - "name": "RadioButtonGroup", - "module": "src/components/reusable/radioButton/radioButtonGroup.ts" + "name": "ProgressBar", + "module": "src/components/reusable/progressBar/progressBar.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-radio-button-group", + "name": "kyn-progress-bar", "declaration": { - "name": "RadioButtonGroup", - "module": "src/components/reusable/radioButton/radioButtonGroup.ts" + "name": "ProgressBar", + "module": "src/components/reusable/progressBar/progressBar.ts" } } ] @@ -13148,487 +13153,283 @@ { "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": [ - { - "description": "Slot for tab button text.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "id", - "type": { - "text": "string" - }, - "default": "''", - "description": "Tab ID, required.", - "attribute": "id", - "reflects": true - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tab selected state. Must match Tab Panel visible state.", - "attribute": "selected", - "reflects": true - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tab 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." - } - ], - "attributes": [ - { - "name": "id", - "type": { - "text": "string" - }, - "default": "''", - "description": "Tab ID, required.", - "fieldName": "id" - }, - { - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tab selected state. Must match Tab Panel visible state.", - "fieldName": "selected" - }, - { - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tab disabled state.", - "fieldName": "disabled" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-tab", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Tab", - "declaration": { - "name": "Tab", - "module": "src/components/reusable/tabs/tab.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-tab", - "declaration": { - "name": "Tab", - "module": "src/components/reusable/tabs/tab.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/tabs/tabPanel.ts", - "declarations": [ - { - "kind": "class", - "description": "Tabs.", - "name": "TabPanel", - "slots": [ - { - "description": "Slot for tab content.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "tabId", - "type": { - "text": "string" - }, - "default": "''", - "description": "Matching Tab ID, required.", - "attribute": "tabId" - }, - { - "kind": "field", - "name": "visible", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tab Panel visible state. Must match Tab selected state.", - "attribute": "visible", - "reflects": true - }, - { - "kind": "field", - "name": "noPadding", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Remove side padding (left/right) on tab panel.", - "attribute": "noPadding" - } - ], - "attributes": [ - { - "name": "tabId", - "type": { - "text": "string" - }, - "default": "''", - "description": "Matching Tab ID, required.", - "fieldName": "tabId" - }, - { - "name": "visible", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Tab Panel visible state. Must match Tab selected state.", - "fieldName": "visible" - }, - { - "name": "noPadding", - "type": { - "text": "boolean" - }, - "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" + "declaration": { + "name": "Table", + "module": "src/components/reusable/table/table.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tab-panel", + "name": "kyn-table", "declaration": { - "name": "TabPanel", - "module": "src/components/reusable/tabs/tabPanel.ts" + "name": "Table", + "module": "src/components/reusable/table/table.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/tabs.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": "Tabs.", - "name": "Tabs", + "description": "Text area.", + "name": "TextArea", "slots": [ { - "description": "Slot for kyn-tab-panel components.", - "name": "unnamed" - }, - { - "description": "Slot for kyn-tab components.", - "name": "tabs" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "tabStyle", + "name": "label", "type": { "text": "string" }, - "default": "'contained'", - "description": "Tab style. `'contained'` or `'line'`.", - "attribute": "tabStyle" + "default": "''", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "tabSize", + "name": "caption", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", - "attribute": "tabSize" + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" }, { "kind": "field", - "name": "vertical", + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "attribute": "placeholder" + }, + { + "kind": "field", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Vertical orientation.", - "attribute": "vertical" + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "disableAutoFocusUpdate", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", - "attribute": "disableAutoFocusUpdate" + "description": "Input disabled state.", + "attribute": "disabled" }, { - "kind": "method", - "name": "_handleSlotChangeTabs", - "privacy": "private" + "kind": "field", + "name": "maxLength", + "type": { + "text": "number" + }, + "description": "Maximum number of characters.", + "attribute": "maxLength" }, { - "kind": "method", - "name": "_updateChildren", - "privacy": "private" + "kind": "field", + "name": "minLength", + "type": { + "text": "number" + }, + "description": "Minimum number of characters.", + "attribute": "minLength" }, { - "kind": "method", - "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": "field", + "name": "rows", + "type": { + "text": "number" + }, + "description": "textarea rows attribute. The number of visible text lines.", + "attribute": "rows" }, { - "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" - } - ], - "description": "Updates the selected property of tabs and the visible property of tab panels based on\nthe selected tab ID." + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n errorText: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "_emitChangeEvent", + "name": "handleInput", "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": "_validate", "privacy": "private", "parameters": [ { - "name": "e", + "name": "interacted", "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": "" + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } } - } + ] } ], "events": [ { - "description": "Emits the new selected Tab ID when switching tabs.", - "name": "on-change" + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-input" } ], "attributes": [ { - "name": "tabStyle", + "name": "label", "type": { "text": "string" }, - "default": "'contained'", - "description": "Tab style. `'contained'` or `'line'`.", - "fieldName": "tabStyle" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "tabSize", + "name": "caption", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", - "fieldName": "tabSize" + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "vertical", + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "fieldName": "placeholder" + }, + { + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Vertical orientation.", - "fieldName": "vertical" + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "disableAutoFocusUpdate", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", - "fieldName": "disableAutoFocusUpdate" + "description": "Input disabled state.", + "fieldName": "disabled" + }, + { + "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": "rows", + "type": { + "text": "number" + }, + "description": "textarea rows attribute. The number of visible text lines.", + "fieldName": "rows" + }, + { + "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-tabs", + "tagName": "kyn-text-area", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tabs", + "name": "TextArea", "declaration": { - "name": "Tabs", - "module": "src/components/reusable/tabs/tabs.ts" + "name": "TextArea", + "module": "src/components/reusable/textArea/textArea.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tabs", + "name": "kyn-text-area", "declaration": { - "name": "Tabs", - "module": "src/components/reusable/tabs/tabs.ts" + "name": "TextArea", + "module": "src/components/reusable/textArea/textArea.ts" } } ] @@ -14103,266 +13904,470 @@ }, { "kind": "javascript-module", - "path": "src/components/reusable/textArea/index.ts", + "path": "src/components/reusable/tabs/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "TextArea", + "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": [ + { + "description": "Slot for tab button text.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "id", + "type": { + "text": "string" + }, + "default": "''", + "description": "Tab ID, required.", + "attribute": "id", + "reflects": true + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab selected state. Must match Tab Panel visible state.", + "attribute": "selected", + "reflects": true + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab 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." + } + ], + "attributes": [ + { + "name": "id", + "type": { + "text": "string" + }, + "default": "''", + "description": "Tab ID, required.", + "fieldName": "id" + }, + { + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab selected state. Must match Tab Panel visible state.", + "fieldName": "selected" + }, + { + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab disabled state.", + "fieldName": "disabled" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tab", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Tab", + "declaration": { + "name": "Tab", + "module": "src/components/reusable/tabs/tab.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-tab", + "declaration": { + "name": "Tab", + "module": "src/components/reusable/tabs/tab.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tabs/tabPanel.ts", + "declarations": [ + { + "kind": "class", + "description": "Tabs.", + "name": "TabPanel", + "slots": [ + { + "description": "Slot for tab content.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "tabId", + "type": { + "text": "string" + }, + "default": "''", + "description": "Matching Tab ID, required.", + "attribute": "tabId" + }, + { + "kind": "field", + "name": "visible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab Panel visible state. Must match Tab selected state.", + "attribute": "visible", + "reflects": true + }, + { + "kind": "field", + "name": "noPadding", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Remove side padding (left/right) on tab panel.", + "attribute": "noPadding" + } + ], + "attributes": [ + { + "name": "tabId", + "type": { + "text": "string" + }, + "default": "''", + "description": "Matching Tab ID, required.", + "fieldName": "tabId" + }, + { + "name": "visible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab Panel visible state. Must match Tab selected state.", + "fieldName": "visible" + }, + { + "name": "noPadding", + "type": { + "text": "boolean" + }, + "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": "TextArea", - "module": "./textArea" + "name": "TabPanel", + "module": "src/components/reusable/tabs/tabPanel.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textArea/textArea.ts", + "path": "src/components/reusable/tabs/tabs.ts", "declarations": [ { "kind": "class", - "description": "Text area.", - "name": "TextArea", + "description": "Tabs.", + "name": "Tabs", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for kyn-tab-panel components.", + "name": "unnamed" + }, + { + "description": "Slot for kyn-tab components.", + "name": "tabs" } ], "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "caption", + "name": "tabStyle", "type": { "text": "string" }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "default": "'contained'", + "description": "Tab style. `'contained'` or `'line'`.", + "attribute": "tabStyle" }, { "kind": "field", - "name": "placeholder", + "name": "tabSize", "type": { "text": "string" }, - "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "default": "'md'", + "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", + "attribute": "tabSize" }, { "kind": "field", - "name": "required", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "description": "Vertical orientation.", + "attribute": "vertical" }, { "kind": "field", - "name": "disabled", + "name": "disableAutoFocusUpdate", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" - }, - { - "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" + "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", + "attribute": "disableAutoFocusUpdate" }, { - "kind": "field", - "name": "rows", - "type": { - "text": "number" - }, - "description": "textarea rows attribute. The number of visible text lines.", - "attribute": "rows" + "kind": "method", + "name": "_handleSlotChangeTabs", + "privacy": "private" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n errorText: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "kind": "method", + "name": "_updateChildren", + "privacy": "private" }, { "kind": "method", - "name": "handleInput", + "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": "_validate", + "name": "_updateChildrenSelection", "privacy": "private", "parameters": [ { - "name": "interacted", + "name": "selectedTabId", "type": { - "text": "Boolean" - } + "text": "string" + }, + "description": "The selectedTabId parameter is a string that represents the ID of\nthe tab that is currently selected." }, { - "name": "report", + "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": "_emitChangeEvent", + "privacy": "private", + "parameters": [ + { + "name": "origEvent", "type": { - "text": "Boolean" - } + "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": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-input" + "description": "Emits the new selected Tab ID when switching tabs.", + "name": "on-change" } ], "attributes": [ { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "caption", + "name": "tabStyle", "type": { "text": "string" }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" + "default": "'contained'", + "description": "Tab style. `'contained'` or `'line'`.", + "fieldName": "tabStyle" }, { - "name": "placeholder", + "name": "tabSize", "type": { "text": "string" }, - "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" + "default": "'md'", + "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", + "fieldName": "tabSize" }, { - "name": "required", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "description": "Vertical orientation.", + "fieldName": "vertical" }, { - "name": "disabled", + "name": "disableAutoFocusUpdate", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" - }, - { - "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": "rows", - "type": { - "text": "number" - }, - "description": "textarea rows attribute. The number of visible text lines.", - "fieldName": "rows" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", + "fieldName": "disableAutoFocusUpdate" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-text-area", + "tagName": "kyn-tabs", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TextArea", + "name": "Tabs", "declaration": { - "name": "TextArea", - "module": "src/components/reusable/textArea/textArea.ts" + "name": "Tabs", + "module": "src/components/reusable/tabs/tabs.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-text-area", + "name": "kyn-tabs", "declaration": { - "name": "TextArea", - "module": "src/components/reusable/textArea/textArea.ts" + "name": "Tabs", + "module": "src/components/reusable/tabs/tabs.ts" } } ] @@ -14415,7 +14420,7 @@ "kind": "field", "name": "type", "type": { - "text": "string" + "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" }, "default": "'text'", "description": "Input type, limited to options that are \"text like\".", @@ -14604,7 +14609,7 @@ { "name": "type", "type": { - "text": "string" + "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" }, "default": "'text'", "description": "Input type, limited to options that are \"text like\".", diff --git a/package-lock.json b/package-lock.json index d29b31e7..d9b4f768 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,7 @@ "@commitlint/config-conventional": "^17.4.4", "@custom-elements-manifest/analyzer": "^0.9.4", "@kyndryl-design-system/shidoka-charts": "^2.0.0-next.3", - "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.26", + "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.27", "@open-wc/testing": "^3.1.7", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-json": "^6.1.0", @@ -96,7 +96,7 @@ "typescript": "^4.9.4" }, "peerDependencies": { - "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.26" + "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.27" } }, "node_modules/@adobe/css-tools": { diff --git a/package.json b/package.json index 9e4f8f1d..5e095ebb 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "swiper": "^11.1.12" }, "peerDependencies": { - "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.26" + "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.27" }, "devDependencies": { "@babel/core": "^7.20.12", @@ -52,7 +52,7 @@ "@commitlint/config-conventional": "^17.4.4", "@custom-elements-manifest/analyzer": "^0.9.4", "@kyndryl-design-system/shidoka-charts": "^2.0.0-next.3", - "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.26", + "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.27", "@open-wc/testing": "^3.1.7", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-json": "^6.1.0", diff --git a/src/common/scss/form-input.scss b/src/common/scss/form-input.scss index 98363c4c..a42212a3 100644 --- a/src/common/scss/form-input.scss +++ b/src/common/scss/form-input.scss @@ -37,7 +37,7 @@ input[disabled], .input-custom[disabled], textarea[disabled] { - & ~ .input-icon { + &~.input-icon { color: var(--kd-color-icon-disabled); } } @@ -54,8 +54,8 @@ input, textarea { pointer-events: auto; @include typography.type-body-02; - border-color: var(--kd-color-border-ui-default); - color: var(--kd-color-text-forms-input-field-text); + border-color: var(--kd-color-border-forms-default); + color: var(--kd-color-text-level-primary); transition: background-color 150ms ease-out, border-color 150ms ease-out, outline-color 150ms ease-out; background: var(--kd-color-background-forms-default); @@ -90,20 +90,21 @@ textarea { &[invalid] { border-color: var(--kd-color-border-ui-disabled); } + &::placeholder { color: var(--kd-color-text-link-level-disabled); } } - input:not([disabled])[invalid] { - border-color: var(--kd-color-status-error-dark); + &:not([disabled])[invalid] { + border-color: var(--kd-color-border-variants-destructive); } } .error { display: flex; align-items: center; - color: var(--kd-color-status-error-dark); + color: var(--kd-color-text-variant-destructive); margin-top: 8px; cursor: default; @@ -116,11 +117,16 @@ textarea { [disabled] & { color: var(--kd-color-text-link-level-disabled); + + span svg { + color: var(--kd-color-text-link-level-disabled); + } } span svg { margin-right: 8px; display: block; + color: var(--kd-color-icon-destructive); } } diff --git a/src/components/reusable/dropdown/dropdown.ts b/src/components/reusable/dropdown/dropdown.ts index 4f9a6f14..4993f8ec 100644 --- a/src/components/reusable/dropdown/dropdown.ts +++ b/src/components/reusable/dropdown/dropdown.ts @@ -13,7 +13,7 @@ import './dropdownOption'; import '../tag'; import { FormMixin } from '../../../common/mixins/form-input'; import downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg'; -import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg'; +import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg'; import clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg'; import clearIcon16 from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg'; import { deepmerge } from 'deepmerge-ts'; diff --git a/src/components/reusable/numberInput/numberInput.scss b/src/components/reusable/numberInput/numberInput.scss index 3c03d291..5ba2e998 100644 --- a/src/components/reusable/numberInput/numberInput.scss +++ b/src/components/reusable/numberInput/numberInput.scss @@ -16,8 +16,9 @@ input { appearance: none; display: block; flex-grow: 1; - min-width: 48px; - border: 1px solid var(--kd-color-border-ui-default); + min-width: 170px; + border-width: 1px; + border-style: solid; border-radius: 4px; height: 48px; padding: 0 16px; @@ -37,6 +38,16 @@ input { &.icon--left { padding-left: 48px; } + + &:not([disabled])[invalid] { + border-color: var(--kd-color-border-variants-destructive); + } + + &:not([disabled]) { + &:active { + outline: 2px solid var(--kd-color-border-ui-pressed); + } + } } /* Hide native arrow controls */ diff --git a/src/components/reusable/numberInput/numberInput.ts b/src/components/reusable/numberInput/numberInput.ts index 5c51dbab..406c57d8 100644 --- a/src/components/reusable/numberInput/numberInput.ts +++ b/src/components/reusable/numberInput/numberInput.ts @@ -8,9 +8,9 @@ import { FormMixin } from '../../../common/mixins/form-input'; import '@kyndryl-design-system/shidoka-foundation/components/button'; import { deepmerge } from 'deepmerge-ts'; -import addIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/add-simple.svg'; -import subtractIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/substract-simple.svg'; -import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg'; +import chevronLeft from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-left.svg'; +import chevronRight from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg'; +import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg'; const _defaultTextStrings = { requiredText: 'Required', @@ -114,13 +114,14 @@ export class NumberInput extends FormMixin(LitElement) { })}" > - ${unsafeSVG(subtractIcon)} + ${unsafeSVG(chevronLeft)} = this.max} + outlineOnly description=${this._textStrings.add} @on-click=${this._handleAdd} > - ${unsafeSVG(addIcon)} + ${unsafeSVG(chevronRight)} @@ -172,8 +174,8 @@ export class NumberInput extends FormMixin(LitElement) { `; } - private _sizeMap(size: string) { - let btnSize = 'medium'; + private _sizeMap(size: string): 'small' | 'medium' | 'large' { + let btnSize: 'small' | 'medium' | 'large' = 'medium'; switch (size) { case 'lg': diff --git a/src/components/reusable/progressBar/progressBar.ts b/src/components/reusable/progressBar/progressBar.ts index 8d85aff2..6861ee82 100644 --- a/src/components/reusable/progressBar/progressBar.ts +++ b/src/components/reusable/progressBar/progressBar.ts @@ -7,7 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import '../loaders'; import '../tooltip'; import checkmarkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg'; -import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg'; +import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg'; import ProgressBarStyles from './progressBar.scss'; diff --git a/src/components/reusable/radioButton/radioButtonGroup.ts b/src/components/reusable/radioButton/radioButtonGroup.ts index 6fe0645e..db749c67 100644 --- a/src/components/reusable/radioButton/radioButtonGroup.ts +++ b/src/components/reusable/radioButton/radioButtonGroup.ts @@ -9,7 +9,7 @@ import { import { deepmerge } from 'deepmerge-ts'; import RadioButtonGroupScss from './radioButtonGroup.scss'; import { FormMixin } from '../../../common/mixins/form-input'; -import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg'; +import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg'; const _defaultTextStrings = { required: 'Required', diff --git a/src/components/reusable/textArea/textArea.scss b/src/components/reusable/textArea/textArea.scss index f5f639cc..d760f837 100644 --- a/src/components/reusable/textArea/textArea.scss +++ b/src/components/reusable/textArea/textArea.scss @@ -12,7 +12,8 @@ textarea { display: block; width: 100%; resize: vertical; - border: 1px solid var(--kd-color-border-ui-default); + border-width: 1px; + border-style: solid; border-radius: 4px; margin: 0; padding: 16px; diff --git a/src/components/reusable/textArea/textArea.ts b/src/components/reusable/textArea/textArea.ts index 4e631aa6..d01cfd70 100644 --- a/src/components/reusable/textArea/textArea.ts +++ b/src/components/reusable/textArea/textArea.ts @@ -2,11 +2,13 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'; import { LitElement, html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import TextAreaScss from './textArea.scss'; import { FormMixin } from '../../../common/mixins/form-input'; -import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg'; import { deepmerge } from 'deepmerge-ts'; +import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg'; + +import TextAreaScss from './textArea.scss'; + const _defaultTextStrings = { requiredText: 'Required', errorText: 'Error', diff --git a/src/components/reusable/textInput/textInput.scss b/src/components/reusable/textInput/textInput.scss index fed7bf9a..2e26bb79 100644 --- a/src/components/reusable/textInput/textInput.scss +++ b/src/components/reusable/textInput/textInput.scss @@ -38,7 +38,8 @@ input { appearance: none; display: block; width: 100%; - border: 1px solid var(--kd-color-border-forms-default); + border-width: 1px; + border-style: solid; border-radius: 4px; height: 48px; padding: 0 48px 0 16px; diff --git a/src/components/reusable/textInput/textInput.ts b/src/components/reusable/textInput/textInput.ts index 26544d5c..eaf8cfd0 100644 --- a/src/components/reusable/textInput/textInput.ts +++ b/src/components/reusable/textInput/textInput.ts @@ -12,7 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { classMap } from 'lit/directives/class-map.js'; import clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg'; -import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg'; +import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg'; import { FormMixin } from '../../../common/mixins/form-input'; import TextInputScss from './textInput.scss'; @@ -43,7 +43,7 @@ export class TextInput extends FormMixin(LitElement) { /** Input type, limited to options that are "text like". */ @property({ type: String }) - type = 'text'; + type: 'text' | 'password' | 'email' | 'search' | 'tel' | 'url' = 'text'; /** Input size. "sm", "md", or "lg". */ @property({ type: String })