From 2708155b2979dab8757f50e910bff111053798c5 Mon Sep 17 00:00:00 2001 From: Jaideep M V <107jaideep@gmail.com> Date: Fri, 20 Dec 2024 07:47:29 +0530 Subject: [PATCH 01/12] feat: colour token updates - tag --- custom-elements.json | 1083 ++++++++++---------- src/components/reusable/tag/tag.scss | 330 +++--- src/components/reusable/tag/tag.stories.js | 6 +- src/components/reusable/tag/tag.ts | 13 +- 4 files changed, 732 insertions(+), 700 deletions(-) diff --git a/custom-elements.json b/custom-elements.json index ef87f9d9..219b1cfb 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -13800,16 +13800,6 @@ "description": "Removes label text truncation.", "attribute": "noTruncation" }, - { - "kind": "field", - "name": "shade", - "type": { - "text": "string" - }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag", - "attribute": "shade" - }, { "kind": "field", "name": "tagColor", @@ -13902,15 +13892,6 @@ "description": "Removes label text truncation.", "fieldName": "noTruncation" }, - { - "name": "shade", - "type": { - "text": "string" - }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag", - "fieldName": "shade" - }, { "name": "tagColor", "type": { @@ -14369,28 +14350,32 @@ }, { "kind": "javascript-module", - "path": "src/components/reusable/timepicker/index.ts", + "path": "src/components/reusable/textInput/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "TimePicker", + "name": "TextInput", "declaration": { - "name": "TimePicker", - "module": "./timepicker" + "name": "TextInput", + "module": "./textInput" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/timepicker/timepicker.ts", + "path": "src/components/reusable/textInput/textInput.ts", "declarations": [ { "kind": "class", - "description": "Timepicker: uses Flatpickr library,time picker implementation -- `https://flatpickr.js.org/examples/#time-picker`", - "name": "TimePicker", + "description": "Text input.", + "name": "TextInput", "slots": [ + { + "description": "Slot for contextual icon.", + "name": "icon" + }, { "description": "Slot for tooltip.", "name": "tooltip" @@ -14409,83 +14394,43 @@ }, { "kind": "field", - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets desired locale and, if supported, dynamically loads language lib", - "attribute": "locale" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets date/time value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "defaultDate", + "name": "type", "type": { "text": "string" }, - "default": "''", - "description": "Sets default time value.", - "attribute": "defaultDate" - }, - { - "kind": "field", - "name": "defaultHour", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial value of the hour element.", - "attribute": "defaultHour" - }, - { - "kind": "field", - "name": "defaultMinute", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial value of the minute element.", - "attribute": "defaultMinute" + "default": "'text'", + "description": "Input type, limited to options that are \"text like\".", + "attribute": "type" }, { "kind": "field", - "name": "defaultErrorMessage", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { "kind": "field", - "name": "warnText", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" + "description": "Optional text beneath the input.", + "attribute": "caption" }, { "kind": "field", - "name": "caption", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "description": "Input placeholder.", + "attribute": "placeholder" }, { "kind": "field", @@ -14494,103 +14439,70 @@ "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", + "description": "Makes the input required.", "attribute": "required" }, { "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, - { - "kind": "field", - "name": "timepickerDisabled", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "attribute": "timepickerDisabled" - }, - { - "kind": "field", - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "attribute": "twentyFourHourFormat" - }, - { - "kind": "field", - "name": "minTime", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "attribute": "minTime" + "description": "Input disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "maxTime", + "name": "pattern", "type": { - "text": "string | number | Date" + "text": "string" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "attribute": "maxTime" + "description": "RegEx pattern to validate.", + "attribute": "pattern" }, { "kind": "field", - "name": "errorAriaLabel", + "name": "maxLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "description": "Maximum number of characters.", + "attribute": "maxLength" }, { "kind": "field", - "name": "errorTitle", + "name": "minLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "description": "Minimum number of characters.", + "attribute": "minLength" }, { "kind": "field", - "name": "warningAriaLabel", + "name": "iconRight", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "default": "false", + "description": "Place icon on the right.", + "attribute": "iconRight" }, { "kind": "field", - "name": "warningTitle", + "name": "hideLabel", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" + "default": "false", + "description": "Visually hide the label.", + "attribute": "hideLabel" }, { "kind": "field", "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n}", "description": "Customizable text strings.", "attribute": "textStrings", "type": { @@ -14599,210 +14511,65 @@ }, { "kind": "method", - "name": "renderValidationMessage", + "name": "_handleInput", "privacy": "private", "parameters": [ { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", + "name": "e", "type": { - "text": "string" + "text": "any" } } ] }, { "kind": "method", - "name": "getTimepickerClasses" + "name": "_handleClear", + "privacy": "private" }, { "kind": "method", - "name": "_handleClear", + "name": "_emitValue", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", + "optional": true, "type": { - "text": "Event" + "text": "any" } } ] }, { "kind": "method", - "name": "setupAnchor", - "privacy": "private" - }, - { - "kind": "method", - "name": "initializeFlatpickr", - "return": { - "type": { - "text": "Promise" + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } } - } + ] }, { "kind": "method", - "name": "updateFlatpickrOptions", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } - }, - { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "instance", - "type": { - "text": "flatpickr.Instance" - } - } - ] - }, - { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } - }, - { - "kind": "method", - "name": "handleClose", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "handleTimeChange", - "return": { - "type": { - "text": "Promise" - } - }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - }, - { - "name": "dateStr", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "interacted", - "type": { - "text": "boolean" - } - }, - { - "name": "report", - "type": { - "text": "boolean" - } - } - ] - }, - { - "kind": "method", - "name": "_onChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleFormReset", - "privacy": "private" - }, - { - "kind": "method", - "name": "setShouldFlatpickrOpen", - "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "boolean" - } - } - ] - }, - { - "kind": "method", - "name": "closeFlatpickr", - "privacy": "private" - }, - { - "kind": "method", - "name": "preventFlatpickrOpen", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "handleInputClickEvent", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleInputFocusEvent", - "privacy": "private" - } - ], - "events": [ + "name": "determineIfSlotted", + "privacy": "private" + } + ], + "events": [ { "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" + "name": "on-input" } ], "attributes": [ @@ -14816,76 +14583,40 @@ "fieldName": "label" }, { - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets desired locale and, if supported, dynamically loads language lib", - "fieldName": "locale" - }, - { - "name": "value", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets date/time value.", - "fieldName": "value" - }, - { - "name": "defaultDate", + "name": "type", "type": { "text": "string" }, - "default": "''", - "description": "Sets default time value.", - "fieldName": "defaultDate" - }, - { - "name": "defaultHour", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial value of the hour element.", - "fieldName": "defaultHour" - }, - { - "name": "defaultMinute", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial value of the minute element.", - "fieldName": "defaultMinute" + "default": "'text'", + "description": "Input type, limited to options that are \"text like\".", + "fieldName": "type" }, { - "name": "defaultErrorMessage", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "warnText", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "caption", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "description": "Input placeholder.", + "fieldName": "placeholder" }, { "name": "required", @@ -14893,89 +14624,59 @@ "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", + "description": "Makes the input required.", "fieldName": "required" }, { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, - { - "name": "timepickerDisabled", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "fieldName": "timepickerDisabled" - }, - { - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "fieldName": "twentyFourHourFormat" - }, - { - "name": "minTime", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "fieldName": "minTime" + "description": "Input disabled state.", + "fieldName": "disabled" }, { - "name": "maxTime", + "name": "pattern", "type": { - "text": "string | number | Date" + "text": "string" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "fieldName": "maxTime" + "description": "RegEx pattern to validate.", + "fieldName": "pattern" }, { - "name": "errorAriaLabel", + "name": "maxLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" + "description": "Maximum number of characters.", + "fieldName": "maxLength" }, { - "name": "errorTitle", + "name": "minLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "description": "Minimum number of characters.", + "fieldName": "minLength" }, { - "name": "warningAriaLabel", + "name": "iconRight", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "default": "false", + "description": "Place icon on the right.", + "fieldName": "iconRight" }, { - "name": "warningTitle", + "name": "hideLabel", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" + "default": "false", + "description": "Visually hide the label.", + "fieldName": "hideLabel" }, { "name": "textStrings", @@ -14994,57 +14695,53 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-time-picker", + "tagName": "kyn-text-input", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TimePicker", + "name": "TextInput", "declaration": { - "name": "TimePicker", - "module": "src/components/reusable/timepicker/timepicker.ts" + "name": "TextInput", + "module": "src/components/reusable/textInput/textInput.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-time-picker", + "name": "kyn-text-input", "declaration": { - "name": "TimePicker", - "module": "src/components/reusable/timepicker/timepicker.ts" + "name": "TextInput", + "module": "src/components/reusable/textInput/textInput.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textInput/index.ts", + "path": "src/components/reusable/timepicker/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "TextInput", + "name": "TimePicker", "declaration": { - "name": "TextInput", - "module": "./textInput" + "name": "TimePicker", + "module": "./timepicker" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textInput/textInput.ts", + "path": "src/components/reusable/timepicker/timepicker.ts", "declarations": [ { "kind": "class", - "description": "Text input.", - "name": "TextInput", + "description": "Timepicker: uses Flatpickr library,time picker implementation -- `https://flatpickr.js.org/examples/#time-picker`", + "name": "TimePicker", "slots": [ - { - "description": "Slot for contextual icon.", - "name": "icon" - }, { "description": "Slot for tooltip.", "name": "tooltip" @@ -15063,43 +14760,83 @@ }, { "kind": "field", - "name": "type", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets desired locale and, if supported, dynamically loads language lib", + "attribute": "locale" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "Date | null" + }, + "default": "null", + "description": "Sets date/time value.", + "attribute": "value" + }, + { + "kind": "field", + "name": "defaultDate", "type": { "text": "string" }, - "default": "'text'", - "description": "Input type, limited to options that are \"text like\".", - "attribute": "type" + "default": "''", + "description": "Sets default time value.", + "attribute": "defaultDate" }, { "kind": "field", - "name": "size", + "name": "defaultHour", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the hour element.", + "attribute": "defaultHour" + }, + { + "kind": "field", + "name": "defaultMinute", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the minute element.", + "attribute": "defaultMinute" + }, + { + "kind": "field", + "name": "defaultErrorMessage", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" + "default": "''", + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { "kind": "field", - "name": "caption", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { "kind": "field", - "name": "placeholder", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, { "kind": "field", @@ -15108,137 +14845,315 @@ "text": "boolean" }, "default": "false", - "description": "Makes the input required.", + "description": "Sets datepicker form input value to required/required.", "attribute": "required" }, { "kind": "field", - "name": "disabled", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" + }, + { + "kind": "field", + "name": "timepickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "description": "Sets entire datepicker form element to enabled/disabled.", + "attribute": "timepickerDisabled" }, { "kind": "field", - "name": "pattern", + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" + }, + { + "kind": "field", + "name": "minTime", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "attribute": "minTime" + }, + { + "kind": "field", + "name": "maxTime", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "attribute": "maxTime" + }, + { + "kind": "field", + "name": "errorAriaLabel", "type": { "text": "string" }, - "description": "RegEx pattern to validate.", - "attribute": "pattern" + "default": "''", + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" }, { "kind": "field", - "name": "maxLength", + "name": "errorTitle", "type": { - "text": "number" + "text": "string" }, - "description": "Maximum number of characters.", - "attribute": "maxLength" + "default": "''", + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" }, { "kind": "field", - "name": "minLength", + "name": "warningAriaLabel", "type": { - "text": "number" + "text": "string" }, - "description": "Minimum number of characters.", - "attribute": "minLength" + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" }, { "kind": "field", - "name": "iconRight", + "name": "warningTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Place icon on the right.", - "attribute": "iconRight" + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" }, { "kind": "field", - "name": "hideLabel", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", "type": { - "text": "boolean" + "text": "object" + } + }, + { + "kind": "method", + "name": "renderValidationMessage", + "privacy": "private", + "parameters": [ + { + "name": "errorId", + "type": { + "text": "string" + } + }, + { + "name": "warningId", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "getTimepickerClasses" + }, + { + "kind": "method", + "name": "_handleClear", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "setupAnchor", + "privacy": "private" + }, + { + "kind": "method", + "name": "initializeFlatpickr", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "updateFlatpickrOptions", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" + } + } + }, + { + "kind": "method", + "name": "setInitialDates", + "return": { + "type": { + "text": "void" + } }, - "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" + "parameters": [ + { + "name": "instance", + "type": { + "text": "flatpickr.Instance" + } + } + ] + }, + { + "kind": "method", + "name": "handleOpen", + "return": { + "type": { + "text": "void" + } + } }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" + "kind": "method", + "name": "handleClose", + "return": { + "type": { + "text": "Promise" + } } }, { "kind": "method", - "name": "_handleInput", + "name": "handleTimeChange", + "return": { + "type": { + "text": "Promise" + } + }, + "parameters": [ + { + "name": "selectedDates", + "type": { + "text": "Date[]" + } + }, + { + "name": "dateStr", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "_validate", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "interacted", "type": { - "text": "any" + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" } } ] }, { "kind": "method", - "name": "_handleClear", + "name": "_onChange", "privacy": "private" }, { "kind": "method", - "name": "_emitValue", + "name": "_handleFormReset", + "privacy": "private" + }, + { + "kind": "method", + "name": "setShouldFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "e", - "optional": true, + "name": "value", "type": { - "text": "any" + "text": "boolean" } } ] }, { "kind": "method", - "name": "_validate", + "name": "closeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "preventFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", + "name": "event", "type": { - "text": "Boolean" + "text": "Event" } } ] }, { "kind": "method", - "name": "determineIfSlotted", + "name": "handleInputClickEvent", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleInputFocusEvent", "privacy": "private" } ], "events": [ { "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-input" + "name": "on-change" } ], "attributes": [ @@ -15252,40 +15167,76 @@ "fieldName": "label" }, { - "name": "type", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets desired locale and, if supported, dynamically loads language lib", + "fieldName": "locale" + }, + { + "name": "value", + "type": { + "text": "Date | null" + }, + "default": "null", + "description": "Sets date/time value.", + "fieldName": "value" + }, + { + "name": "defaultDate", "type": { "text": "string" }, - "default": "'text'", - "description": "Input type, limited to options that are \"text like\".", - "fieldName": "type" + "default": "''", + "description": "Sets default time value.", + "fieldName": "defaultDate" }, { - "name": "size", + "name": "defaultHour", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the hour element.", + "fieldName": "defaultHour" + }, + { + "name": "defaultMinute", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Sets initial value of the minute element.", + "fieldName": "defaultMinute" + }, + { + "name": "defaultErrorMessage", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "default": "''", + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "name": "caption", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" + "description": "Sets validation warning messaging.", + "fieldName": "warnText" }, { - "name": "placeholder", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" }, { "name": "required", @@ -15293,59 +15244,89 @@ "text": "boolean" }, "default": "false", - "description": "Makes the input required.", + "description": "Sets datepicker form input value to required/required.", "fieldName": "required" }, { - "name": "disabled", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" + }, + { + "name": "timepickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" + "description": "Sets entire datepicker form element to enabled/disabled.", + "fieldName": "timepickerDisabled" }, { - "name": "pattern", + "name": "twentyFourHourFormat", "type": { - "text": "string" + "text": "boolean | null" }, - "description": "RegEx pattern to validate.", - "fieldName": "pattern" + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" }, { - "name": "maxLength", + "name": "minTime", "type": { - "text": "number" + "text": "string | number | Date" }, - "description": "Maximum number of characters.", - "fieldName": "maxLength" + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "fieldName": "minTime" }, { - "name": "minLength", + "name": "maxTime", "type": { - "text": "number" + "text": "string | number | Date" }, - "description": "Minimum number of characters.", - "fieldName": "minLength" + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "fieldName": "maxTime" }, { - "name": "iconRight", + "name": "errorAriaLabel", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Place icon on the right.", - "fieldName": "iconRight" + "default": "''", + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "name": "hideLabel", + "name": "errorTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" + "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": "warningTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for warning message.", + "fieldName": "warningTitle" }, { "name": "textStrings", @@ -15364,25 +15345,25 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-text-input", + "tagName": "kyn-time-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TextInput", + "name": "TimePicker", "declaration": { - "name": "TextInput", - "module": "src/components/reusable/textInput/textInput.ts" + "name": "TimePicker", + "module": "src/components/reusable/timepicker/timepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-text-input", + "name": "kyn-time-picker", "declaration": { - "name": "TextInput", - "module": "src/components/reusable/textInput/textInput.ts" + "name": "TimePicker", + "module": "src/components/reusable/timepicker/timepicker.ts" } } ] diff --git a/src/components/reusable/tag/tag.scss b/src/components/reusable/tag/tag.scss index 50a862c6..8f31b468 100644 --- a/src/components/reusable/tag/tag.scss +++ b/src/components/reusable/tag/tag.scss @@ -13,7 +13,7 @@ justify-content: space-around; border-radius: 4px; gap: 4px; - color: var(--kd-color-text-primary); + color: var(--kd-color-text-level-primary); min-width: 24px; } @@ -81,8 +81,8 @@ } &[disabled] { - background-color: var(--kd-color-background-disabled); - color: var(--kd-color-text-link-level-disabled); + background-color: var(--kd-color-tags-background-disabled); + color: var(--kd-color-icon-disabled); border: none; cursor: not-allowed; pointer-events: none; @@ -126,34 +126,31 @@ &-disable { cursor: not-allowed; - background-color: var(--kd-color-background-disabled) !important; - color: var(--kd-color-text-disabled) !important; + background-color: var(--kd-color-tags-background-disabled) !important; + color: var(--kd-color-text-level-disabled) !important; } /* Grey color */ &-grey { - background-color: var(--kd-color-background-ui-soft); - color: var(--kd-color-text-primary); + background-color: var(--kd-color-tags-background-gray); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-border-primary); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-background-ui-strong); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-gray); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-gray); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-border-inverse); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -161,55 +158,103 @@ /* spruce color */ &-spruce { - background-color: var(--kd-color-spruce-10); + background-color: var(--kd-color-tags-background-spruce); &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-spruce); + } + + &:focus { + background-color: var(--kd-color-tags-hover-spruce); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-background-primary); + &:active { + outline-color: var(--kd-color-border-ui-pressed); + } } } + } + + /* interactive color */ + &-interactive { + background-color: var(--kd-color-tags-background-interactive); + + &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } - &-dark { - background-color: var(--kd-color-background-primary); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-interactive); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-interactive); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-background-inverse-hover); + outline-color: var(--kd-color-border-ui-pressed); } } } } - /* failed color */ - &-failed { - background-color: var(--kd-color-background-error-light); + /* blue color */ + &-blue { + background-color: var(--kd-color-tags-background-blue); &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-blue); + } + + &:focus { + background-color: var(--kd-color-tags-hover-blue); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-border-error); + &:active { + outline-color: var(--kd-color-border-ui-pressed); + } } } + } + + /* error color */ + &-error { + background-color: var(--kd-color-tags-background-error); + + &-close-btn { + color: var(--kd-color-icon-primary); + + svg { + display: block; + } - &-dark { - background-color: var(--kd-color-background-destructive); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-error); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-error); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-error-light); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -217,54 +262,51 @@ /* warning color */ &-warning { - background-color: var(--kd-color-background-warning-light); + background-color: var(--kd-color-tags-background-warning); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-background-warning); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-background-warning); + &:hover { + background-color: var(--kd-color-tags-hover-warning); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-warning); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-background-warning-light); + outline-color: var(--kd-color-border-ui-pressed); } } } } - /* passed color */ - &-passed { - background-color: var(--kd-color-background-success-light); + /* success color */ + &-success { + background-color: var(--kd-color-tags-background-success); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: #00af41; + svg { + display: block; } - } - &-dark { - background-color: #00af41; - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-success); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-success); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-background-success-light); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -272,27 +314,25 @@ /* cat01 color */ &-cat01 { - background-color: var(--kd-color-data-seq-01-10); + background-color: var(--kd-color-tags-background-cat1); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-01-40); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-01-40); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat1); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat1); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-01-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -300,27 +340,25 @@ /* cat02 color */ &-cat02 { - background-color: var(--kd-color-data-seq-02-10); + background-color: var(--kd-color-tags-background-cat2); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-02-70); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-02-70); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat2); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat2); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-02-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -328,27 +366,25 @@ /* cat03 color */ &-cat03 { - background-color: var(--kd-color-data-seq-03-10); + background-color: var(--kd-color-tags-background-cat3); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-03-40); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-03-40); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat3); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat3); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-03-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -356,27 +392,25 @@ /* cat04 color */ &-cat04 { - background-color: var(--kd-color-data-seq-04-10); + background-color: var(--kd-color-tags-background-cat4); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-04-70); + svg { + display: block; } - } - &-dark { - background-color: var(--kd-color-data-seq-04-70); - color: var(--kd-color-text-inversed); + &:hover { + background-color: var(--kd-color-tags-hover-cat4); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat4); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-04-10); + outline-color: var(--kd-color-border-ui-pressed); } } } @@ -384,27 +418,51 @@ /* cat05 color */ &-cat05 { - background-color: var(--kd-color-data-seq-05-10); + background-color: var(--kd-color-tags-background-cat5); &-close-btn { + color: var(--kd-color-icon-primary); - &:hover, - &:focus, - &:active { - outline-color: var(--kd-color-data-seq-05-70); + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-cat5); + } + + &:focus { + background-color: var(--kd-color-tags-hover-cat5); + outline-color: var(--kd-color-border-variants-focus); + + &:active { + outline-color: var(--kd-color-border-ui-pressed); + } } } + } + + /* cat06 color */ + &-cat06 { + background-color: var(--kd-color-tags-background-cat6); + + &-close-btn { + color: var(--kd-color-icon-primary); - &-dark { - background-color: var(--kd-color-data-seq-05-70); - color: var(--kd-color-text-inversed); + svg { + display: block; + } + + &:hover { + background-color: var(--kd-color-tags-hover-cat6); + } - &-close-btn { + &:focus { + background-color: var(--kd-color-tags-hover-cat6); + outline-color: var(--kd-color-border-variants-focus); - &:hover, - &:focus, &:active { - outline-color: var(--kd-color-data-seq-05-10); + outline-color: var(--kd-color-border-ui-pressed); } } } diff --git a/src/components/reusable/tag/tag.stories.js b/src/components/reusable/tag/tag.stories.js index 24e5f66f..2dabb54a 100644 --- a/src/components/reusable/tag/tag.stories.js +++ b/src/components/reusable/tag/tag.stories.js @@ -18,9 +18,11 @@ export default { options: [ 'grey', 'spruce', - 'failed', + 'interactive', + 'blue', + 'error', 'warning', - 'passed', + 'success', 'cat01', 'cat02', 'cat03', diff --git a/src/components/reusable/tag/tag.ts b/src/components/reusable/tag/tag.ts index a6c6bf10..144286ae 100644 --- a/src/components/reusable/tag/tag.ts +++ b/src/components/reusable/tag/tag.ts @@ -44,12 +44,6 @@ export class Tag extends LitElement { @property({ type: Boolean }) noTruncation = false; - /** - * Shade `'light'` (default) and `'dark'` for tag - */ - @property({ type: String }) - shade = 'light'; - /** * Color variants. Default spruce */ @@ -64,18 +58,17 @@ export class Tag extends LitElement { override render() { const baseColorClass = `tag-${this.tagColor}`; - const shadeClass = this.shade === 'dark' ? '-dark' : ''; const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small'; const tagClasses = { tags: true, 'tag-disable': this.disabled, - [`${baseColorClass}${shadeClass}`]: true, + [`${baseColorClass}`]: true, [`${sizeClass}`]: true, [`${sizeClass}-filter`]: this.filter, }; - const iconOutlineClasses = `${baseColorClass}${shadeClass}-close-btn`; + const iconOutlineClasses = `${baseColorClass}-close-btn`; const iconOutlineOffsetClass = `tag-close-btn-${this.tagSize}`; const iconClasses = { 'tag-close-btn': true, @@ -97,7 +90,6 @@ export class Tag extends LitElement { ?disabled="${this.disabled}" ?filter=${this.filter} tagColor=${this.tagColor} - shade=${this.shade} title="${this.label}" > ${this.label} @@ -105,7 +97,6 @@ export class Tag extends LitElement { ? html` + ` : null} From 546ed792995dd7887b0b433c8f5781c2c3d393cd Mon Sep 17 00:00:00 2001 From: Jaideep M V <107jaideep@gmail.com> Date: Tue, 7 Jan 2025 12:42:52 +0530 Subject: [PATCH 09/12] chore: code cleanup - tag group and skeleton --- custom-elements.json | 19671 ++++++++-------- src/components/reusable/tag/tag.skeleton.ts | 10 +- .../reusable/tag/tagGroup.stories.js | 25 +- 3 files changed, 9829 insertions(+), 9877 deletions(-) diff --git a/custom-elements.json b/custom-elements.json index 4aed47e3..20fdd8ce 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -4,2253 +4,2231 @@ "modules": [ { "kind": "javascript-module", - "path": "src/components/global/footer/footer.ts", + "path": "src/components/reusable/blockCodeView/blockCodeView.ts", "declarations": [ { "kind": "class", - "description": "The global Footer component.", - "name": "Footer", - "slots": [ - { - "description": "Default slot, for links.", - "name": "unnamed" - }, + "description": "`` component to display `` snippets as standalone single-/multi-line block elements.", + "name": "BlockCodeView", + "members": [ { - "description": "Slot for the logo, will overwrite the default logo.", - "name": "logo" + "kind": "field", + "name": "darkTheme", + "type": { + "text": "'light' | 'dark'" + }, + "default": "'dark'", + "description": "Sets background and text theming.", + "attribute": "darkTheme" }, - { - "description": "Slot for the copyright text.", - "name": "copyright" - } - ], - "members": [ { "kind": "field", - "name": "rootUrl", + "name": "language", "type": { "text": "string" }, - "default": "'/'", - "description": "URL for the footer logo link. Should target the application home page.", - "attribute": "rootUrl" + "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": "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": [ + "kind": "field", + "name": "maxHeight", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Customizable max-height setting for code snippet container.", + "attribute": "maxHeight" + }, { - "name": "rootUrl", + "kind": "field", + "name": "codeViewLabel", "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 - } - ], - "exports": [ - { - "kind": "js", - "name": "Footer", - "declaration": { - "name": "Footer", - "module": "src/components/global/footer/footer.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-footer", - "declaration": { - "name": "Footer", - "module": "src/components/global/footer/footer.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/footer/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Footer", - "declaration": { - "name": "Footer", - "module": "./footer" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/header.ts", - "declarations": [ - { - "kind": "class", - "description": "The global Header component.", - "name": "Header", - "slots": [ - { - "description": "The default slot for all empty space right of the logo/title.", - "name": "unnamed" + "default": "''", + "description": "Optionally displayed label above code snippet container.", + "attribute": "codeViewLabel" }, { - "description": "Slot for the logo, will overwrite the default logo.", - "name": "logo" + "kind": "field", + "name": "copyOptionVisible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optionally display button to copy code snippet.", + "attribute": "copyOptionVisible" }, { - "description": "Slot left of the logo, intended for the header nav.", - "name": "left" + "kind": "field", + "name": "codeViewExpandable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optionally display button to expand code snippet container.", + "attribute": "codeViewExpandable" }, { - "description": "Slot between logo/title and right flyouts.", - "name": "center" - } - ], - "members": [ + "kind": "field", + "name": "copyButtonText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy code button text (optional).", + "attribute": "copyButtonText" + }, { "kind": "field", - "name": "rootUrl", + "name": "copyButtonDescriptionAttr", "type": { "text": "string" }, - "default": "'/'", - "description": "URL for the header logo link. Should target the application home page.", - "attribute": "rootUrl" + "default": "''", + "description": "Sets copy button description attr value.", + "attribute": "copyButtonDescriptionAttr" }, { "kind": "field", - "name": "appTitle", + "name": "codeSnippet", "type": { "text": "string" }, "default": "''", - "description": "App title text next to logo. Hidden on smaller screens.", - "attribute": "appTitle" + "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": "handleSlotChange", + "name": "getContainerClasses", "privacy": "private" }, { "kind": "method", - "name": "handleRootLinkClick", + "name": "renderCopyButton", + "privacy": "private" + }, + { + "kind": "method", + "name": "renderExpandButton", + "privacy": "private" + }, + { + "kind": "method", + "name": "highlightCode", + "privacy": "private" + }, + { + "kind": "method", + "name": "detectLanguage", "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, "parameters": [ { - "name": "e", + "name": "code", "type": { - "text": "Event" + "text": "string" } } ] }, { "kind": "method", - "name": "_handleNavToggle", + "name": "calculateRelevance", "privacy": "private", + "return": { + "type": { + "text": "number" + } + }, "parameters": [ { - "name": "e", + "name": "tokens", "type": { - "text": "any" + "text": "(string | Prism.Token)[]" + } + }, + { + "name": "language", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "_handleFlyoutsToggle", + "name": "getTokenRelevance", "privacy": "private", + "return": { + "type": { + "text": "number" + } + }, "parameters": [ { - "name": "e", + "name": "token", "type": { - "text": "any" + "text": "Prism.Token" + } + }, + { + "name": "language", + "type": { + "text": "string" } } ] - } - ], - "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" + "kind": "method", + "name": "isLanguageSpecificToken", + "privacy": "private", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "token", + "type": { + "text": "Prism.Token" + } + }, + { + "name": "language", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "determineMarkupLanguage", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, + "parameters": [ + { + "name": "code", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "checkOverflow", + "privacy": "private" + }, + { + "kind": "method", + "name": "removeLeadingWhitespace", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, + "parameters": [ + { + "name": "code", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "formatExampleCode", + "privacy": "private", + "parameters": [ + { + "name": "code", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "copyCode", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "getContainerStyle", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + } + }, + { + "kind": "method", + "name": "expandCodeView", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleKeypress", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "KeyboardEvent" + } + } + ] + } + ], + "events": [ + { + "name": "on-copy", + "type": { + "text": "CustomEvent" + }, + "description": "Emits when the copy button is clicked." } ], "attributes": [ { - "name": "rootUrl", + "name": "darkTheme", + "type": { + "text": "'light' | 'dark'" + }, + "default": "'dark'", + "description": "Sets background and text theming.", + "fieldName": "darkTheme" + }, + { + "name": "language", "type": { "text": "string" }, - "default": "'/'", - "description": "URL for the header logo link. Should target the application home page.", - "fieldName": "rootUrl" + "default": "''", + "description": "If empty string, attempt language syntax auto-detection. Setting a value will override auto-detection and manually configure desired language.", + "fieldName": "language" }, { - "name": "appTitle", + "name": "maxHeight", + "type": { + "text": "number | null" + }, + "default": "null", + "description": "Customizable max-height setting for code snippet container.", + "fieldName": "maxHeight" + }, + { + "name": "codeViewLabel", "type": { "text": "string" }, "default": "''", - "description": "App title text next to logo. Hidden on smaller screens.", - "fieldName": "appTitle" + "description": "Optionally displayed label above code snippet container.", + "fieldName": "codeViewLabel" + }, + { + "name": "copyOptionVisible", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optionally display button to copy code snippet.", + "fieldName": "copyOptionVisible" + }, + { + "name": "codeViewExpandable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optionally display button to expand code snippet container.", + "fieldName": "codeViewExpandable" + }, + { + "name": "copyButtonText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy code button text (optional).", + "fieldName": "copyButtonText" + }, + { + "name": "copyButtonDescriptionAttr", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets copy button description attr value.", + "fieldName": "copyButtonDescriptionAttr" + }, + { + "name": "codeSnippet", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", + "fieldName": "codeSnippet" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header", + "tagName": "kyn-block-code-view", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Header", + "name": "BlockCodeView", "declaration": { - "name": "Header", - "module": "src/components/global/header/header.ts" + "name": "BlockCodeView", + "module": "src/components/reusable/blockCodeView/blockCodeView.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header", + "name": "kyn-block-code-view", "declaration": { - "name": "Header", - "module": "src/components/global/header/header.ts" + "name": "BlockCodeView", + "module": "src/components/reusable/blockCodeView/blockCodeView.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerCategory.ts", + "path": "src/components/reusable/blockCodeView/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "BlockCodeView", + "declaration": { + "name": "BlockCodeView", + "module": "./blockCodeView" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/breadcrumbs/breadcrumbs.ts", "declarations": [ { "kind": "class", - "description": "Header link category", - "name": "HeaderCategory", + "description": "Breadcrumbs Component.", + "name": "Breadcrumbs", "slots": [ { - "description": "Slot for links.", + "description": "Slot for inserting links.", "name": "unnamed" } ], - "members": [ - { - "kind": "field", - "name": "heading", - "type": { - "text": "string" - }, - "default": "''", - "description": "Link url.", - "attribute": "heading" - } - ], - "attributes": [ - { - "name": "heading", - "type": { - "text": "string" - }, - "default": "''", - "description": "Link url.", - "fieldName": "heading" - } - ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-category", + "tagName": "kyn-breadcrumbs", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderCategory", + "name": "Breadcrumbs", "declaration": { - "name": "HeaderCategory", - "module": "src/components/global/header/headerCategory.ts" + "name": "Breadcrumbs", + "module": "src/components/reusable/breadcrumbs/breadcrumbs.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-category", + "name": "kyn-breadcrumbs", "declaration": { - "name": "HeaderCategory", - "module": "src/components/global/header/headerCategory.ts" + "name": "Breadcrumbs", + "module": "src/components/reusable/breadcrumbs/breadcrumbs.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 - } - ], + "path": "src/components/reusable/breadcrumbs/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "HeaderDivider", - "declaration": { - "name": "HeaderDivider", - "module": "src/components/global/header/headerDivider.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-divider", + "name": "Breadcrumbs", "declaration": { - "name": "HeaderDivider", - "module": "src/components/global/header/headerDivider.ts" + "name": "Breadcrumbs", + "module": "./breadcrumbs" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerFlyout.ts", + "path": "src/components/reusable/checkbox/checkbox.ts", "declarations": [ { "kind": "class", - "description": "Component for header flyout items.", - "name": "HeaderFlyout", + "description": "Checkbox.", + "name": "Checkbox", "slots": [ { - "description": "Slot for flyout menu content.", + "description": "Slot for label text.", "name": "unnamed" - }, - { - "description": "Slot for button/toggle content.", - "name": "button" } ], "members": [ { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Flyout open state.", - "attribute": "open" - }, - { - "kind": "field", - "name": "anchorLeft", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", - "attribute": "anchorLeft" - }, - { - "kind": "field", - "name": "hideArrow", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the arrow.", - "attribute": "hideArrow" - }, - { - "kind": "field", - "name": "label", + "name": "value", "type": { "text": "string" }, "default": "''", - "description": "Menu & button label.", - "attribute": "label" + "description": "Checkbox value.", + "attribute": "value" }, { "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": "Checkbox disabled state, inherited from the parent group.", + "attribute": "disabled" }, { "kind": "field", - "name": "hideButtonLabel", + "name": "visiblyHidden", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the label in the mobile button.", - "attribute": "hideButtonLabel" - }, - { - "kind": "field", - "name": "assistiveText", - "type": { - "text": "string" - }, - "default": "''", - "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", - "attribute": "assistiveText" - }, - { - "kind": "field", - "name": "href", - "type": { - "text": "string" - }, - "default": "''", - "description": "Turns the button into a link.", - "attribute": "href" + "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", + "attribute": "visiblyHidden" }, { "kind": "field", - "name": "backText", + "name": "indeterminate", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" - }, - { - "kind": "method", - "name": "_handleBack", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleClick", - "privacy": "private" + "default": "false", + "description": "Determines whether the checkbox is in an indeterminate state.", + "attribute": "indeterminate" }, { "kind": "method", - "name": "handleClickOut", + "name": "handleChange", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] - }, + } + ], + "events": [ { - "kind": "method", - "name": "_handleOverlayClick", - "privacy": "private" + "description": "Captures the change event and emits the selected value and original event details.", + "name": "on-checkbox-change" } ], "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": "value", "type": { "text": "string" }, "default": "''", - "description": "Menu & button label.", - "fieldName": "label" + "description": "Checkbox value.", + "fieldName": "value" }, { - "name": "hideMenuLabel", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the label at the top of the flyout menu.", - "fieldName": "hideMenuLabel" + "description": "Checkbox disabled state, inherited from the parent group.", + "fieldName": "disabled" }, { - "name": "hideButtonLabel", + "name": "visiblyHidden", "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" - }, - { - "name": "href", - "type": { - "text": "string" - }, - "default": "''", - "description": "Turns the button into a link.", - "fieldName": "href" + "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", + "fieldName": "visiblyHidden" }, { - "name": "backText", + "name": "indeterminate", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" + "default": "false", + "description": "Determines whether the checkbox is in an indeterminate state.", + "fieldName": "indeterminate" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-flyout", + "tagName": "kyn-checkbox", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderFlyout", + "name": "Checkbox", "declaration": { - "name": "HeaderFlyout", - "module": "src/components/global/header/headerFlyout.ts" + "name": "Checkbox", + "module": "src/components/reusable/checkbox/checkbox.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-flyout", + "name": "kyn-checkbox", "declaration": { - "name": "HeaderFlyout", - "module": "src/components/global/header/headerFlyout.ts" + "name": "Checkbox", + "module": "src/components/reusable/checkbox/checkbox.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerFlyouts.ts", + "path": "src/components/reusable/checkbox/checkboxGroup.ts", "declarations": [ { "kind": "class", - "description": "Container for header-flyout components.", - "name": "HeaderFlyouts", + "description": "Checkbox group container.", + "name": "CheckboxGroup", "slots": [ { - "description": "Slot for header-flyout components.", + "description": "Slot for individual checkboxes.", "name": "unnamed" + }, + { + "description": "Slot for tooltip.", + "name": "tooltip" + }, + { + "description": "Slot for description text.", + "name": "description" } ], "members": [ { "kind": "field", - "name": "open", + "name": "value", "type": { - "text": "boolean" + "text": "Array" }, - "default": "false", - "attribute": "open" - }, - { - "kind": "method", - "name": "_toggleOpen", - "privacy": "private" + "default": "[]", + "description": "Checkbox group selected values.", + "attribute": "value" }, { - "kind": "method", - "name": "_handleClickOut", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - } - ], - "attributes": [ - { - "name": "open", + "kind": "field", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "fieldName": "open" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-header-flyouts", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "HeaderFlyouts", - "declaration": { - "name": "HeaderFlyouts", - "module": "src/components/global/header/headerFlyouts.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-header-flyouts", - "declaration": { - "name": "HeaderFlyouts", - "module": "src/components/global/header/headerFlyouts.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/header/headerLink.ts", - "declarations": [ - { - "kind": "class", - "description": "Component for navigation links within the Header.", - "name": "HeaderLink", - "slots": [ - { - "description": "Slot for link text/content.", - "name": "unnamed" + "description": "Makes a single selection required.", + "attribute": "required" }, - { - "description": "Slot for sublinks (up to two levels).", - "name": "links" - } - ], - "members": [ { "kind": "field", - "name": "open", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Link open state.", - "attribute": "open" + "description": "Checkbox group disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "href", + "name": "horizontal", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Link url.", - "attribute": "href" + "default": "false", + "description": "Checkbox group horizontal style.", + "attribute": "horizontal" }, { "kind": "field", - "name": "target", - "default": "'_self'", + "name": "selectAll", "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": "Adds a \"Select All\" checkbox to the top of the group.", + "attribute": "selectAll" }, { "kind": "field", - "name": "rel", + "name": "hideLegend", "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": "Hide the group legend/label visually.", + "attribute": "hideLegend" }, { "kind": "field", - "name": "isActive", + "name": "filterable", "type": { "text": "boolean" }, "default": "false", - "description": "Link active state, for example when URL path matches link href.", - "attribute": "isActive" + "description": "Adds a search input to enable filtering of checkboxes.", + "attribute": "filterable" }, { "kind": "field", - "name": "divider", + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "attribute": "label" + }, + { + "kind": "field", + "name": "limitCheckboxes", "type": { "text": "boolean" }, "default": "false", - "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", - "attribute": "divider" + "description": "Limits visible checkboxes behind a \"Show all\" button.", + "attribute": "limitCheckboxes" }, { "kind": "field", - "name": "searchLabel", + "name": "textStrings", + "default": "{\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n search: 'Search',\n required: 'Required',\n error: 'Error',\n}", + "description": "Text string customization.", + "attribute": "textStrings", "type": { - "text": "string" - }, - "default": "'Search'", - "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", - "attribute": "searchLabel" + "text": "object" + } }, { "kind": "field", - "name": "backText", + "name": "checkboxes", "type": { - "text": "string" + "text": "Array" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" + "default": "[]" }, { "kind": "field", - "name": "_searchTerm", + "name": "filteredCheckboxes", "type": { - "text": "string" + "text": "Array" }, - "default": "''", - "description": "Text for mobile \"Back\" button." + "default": "[]" }, { "kind": "method", - "name": "_handleSearch", + "name": "_validate", "privacy": "private", "parameters": [ { - "name": "e", + "name": "interacted", "type": { - "text": "any" + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" } } ] }, { "kind": "method", - "name": "_searchFilter", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleBack", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleLinksSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "handlePointerEnter", + "name": "_handleCheckboxChange", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "PointerEvent" + "text": "any" } } ] }, { "kind": "method", - "name": "handlePointerLeave", + "name": "_emitChangeEvent", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleFilter", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "PointerEvent" + "text": "any" } } ] }, { "kind": "method", - "name": "handleClick", + "name": "_toggleRevealed", "privacy": "private", "parameters": [ { - "name": "e", + "name": "revealed", "type": { - "text": "Event" + "text": "boolean" } } ] }, { "kind": "method", - "name": "handleClickOut", + "name": "_handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleSubgroupChange", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "any" } } ] + } + ], + "events": [ + { + "description": "Captures the change event and emits the selected values.", + "name": "on-checkbox-group-change" }, { - "kind": "method", - "name": "determineLevel", - "privacy": "private" + "description": "Captures the search input event and emits the search term.", + "name": "on-search" }, { - "kind": "method", - "name": "_positionMenu", - "privacy": "private" - } - ], - "events": [ - { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" + "description": "Captures the show more/less click and emits the expanded state.", + "name": "on-limit-toggle" } ], "attributes": [ { - "name": "open", + "name": "value", + "type": { + "text": "Array" + }, + "default": "[]", + "description": "Checkbox group selected values.", + "fieldName": "value" + }, + { + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Link open state.", - "fieldName": "open" + "description": "Makes a single selection required.", + "fieldName": "required" }, { - "name": "href", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Link url.", - "fieldName": "href" + "default": "false", + "description": "Checkbox group disabled state.", + "fieldName": "disabled" }, { - "name": "target", - "default": "'_self'", + "name": "horizontal", "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": "Checkbox group horizontal style.", + "fieldName": "horizontal" }, { - "name": "rel", + "name": "selectAll", "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", - "fieldName": "rel" + "default": "false", + "description": "Adds a \"Select All\" checkbox to the top of the group.", + "fieldName": "selectAll" }, { - "name": "isActive", + "name": "hideLegend", "type": { "text": "boolean" }, "default": "false", - "description": "Link active state, for example when URL path matches link href.", - "fieldName": "isActive" + "description": "Hide the group legend/label visually.", + "fieldName": "hideLegend" }, { - "name": "divider", + "name": "filterable", "type": { "text": "boolean" }, "default": "false", - "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", - "fieldName": "divider" + "description": "Adds a search input to enable filtering of checkboxes.", + "fieldName": "filterable" }, { - "name": "searchLabel", + "name": "label", "type": { "text": "string" }, - "default": "'Search'", - "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", - "fieldName": "searchLabel" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "backText", + "name": "limitCheckboxes", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" + "default": "false", + "description": "Limits visible checkboxes behind a \"Show all\" button.", + "fieldName": "limitCheckboxes" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-link", + "tagName": "kyn-checkbox-group", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderLink", + "name": "CheckboxGroup", "declaration": { - "name": "HeaderLink", - "module": "src/components/global/header/headerLink.ts" + "name": "CheckboxGroup", + "module": "src/components/reusable/checkbox/checkboxGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-link", + "name": "kyn-checkbox-group", "declaration": { - "name": "HeaderLink", - "module": "src/components/global/header/headerLink.ts" + "name": "CheckboxGroup", + "module": "src/components/reusable/checkbox/checkboxGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerNav.ts", + "path": "src/components/reusable/checkbox/checkboxSubgroup.ts", "declarations": [ { "kind": "class", - "description": "Container for header navigation links.", - "name": "HeaderNav", + "description": "Checkbox subgroup", + "name": "CheckboxSubgroup", "slots": [ { - "description": "This element has a slot.", + "description": "Slot for child kyn-checkboxes.", "name": "unnamed" + }, + { + "description": "Slot for parent kyn-checkbox.", + "name": "parent" } ], "members": [ - { - "kind": "field", - "name": "slot", - "type": { - "text": "string" - }, - "default": "'left'", - "description": "Force correct slot", - "attribute": "slot", - "reflects": true - }, { "kind": "method", - "name": "_toggleMenuOpen", + "name": "_handleSlotchange", "privacy": "private" }, { "kind": "method", - "name": "_handleClickOut", + "name": "_syncParent", "privacy": "private", "parameters": [ { - "name": "e", + "name": "count", "type": { - "text": "Event" + "text": "number" } } ] }, { "kind": "method", - "name": "_handleOverlayClick", - "privacy": "private" - } - ], - "attributes": [ - { - "name": "slot", - "type": { - "text": "string" - }, - "default": "'left'", - "description": "Force correct slot", - "fieldName": "slot" + "name": "_handleCheckboxChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-nav", + "tagName": "kyn-checkbox-subgroup", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderNav", + "name": "CheckboxSubgroup", "declaration": { - "name": "HeaderNav", - "module": "src/components/global/header/headerNav.ts" + "name": "CheckboxSubgroup", + "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-nav", + "name": "kyn-checkbox-subgroup", "declaration": { - "name": "HeaderNav", - "module": "src/components/global/header/headerNav.ts" + "name": "CheckboxSubgroup", + "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerNotificationPanel.ts", + "path": "src/components/reusable/checkbox/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Checkbox", + "declaration": { + "name": "Checkbox", + "module": "./checkbox" + } + }, + { + "kind": "js", + "name": "CheckboxGroup", + "declaration": { + "name": "CheckboxGroup", + "module": "./checkboxGroup" + } + }, + { + "kind": "js", + "name": "CheckboxSubgroup", + "declaration": { + "name": "CheckboxSubgroup", + "module": "./checkboxSubgroup" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/card/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "VitalCardSkeleton", + "declaration": { + "name": "VitalCardSkeleton", + "module": "./vitalCard.skeleton" + } + }, + { + "kind": "js", + "name": "InformationalCardSkeleton", + "declaration": { + "name": "InformationalCardSkeleton", + "module": "./informationalCard.skeleton" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/card/informationalCard.skeleton.ts", "declarations": [ { "kind": "class", - "description": "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" - } - ], + "description": "`kyn-info-card-skeleton` Web Component.\nA skeleton loading state for the informational card component that mirrors its structure.", + "name": "InformationalCardSkeleton", "members": [ { "kind": "field", - "name": "panelTitle", + "name": "lines", "type": { - "text": "string" - }, - "default": "''", - "description": "Notification panel Title.", - "attribute": "panelTitle" - }, - { - "kind": "field", - "name": "panelFooterBtnText", - "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Notification panel footer button text.", - "attribute": "panelFooterBtnText" + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "attribute": "lines" }, { "kind": "field", - "name": "hidePanelFooter", + "name": "thumbnailVisible", "type": { - "text": "boolean" + "text": "boolean | undefined" }, "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" + "description": "Sets show or hide thumbnail element.", + "attribute": "thumbnailVisible" } ], "attributes": [ { - "name": "panelTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Notification panel Title.", - "fieldName": "panelTitle" - }, - { - "name": "panelFooterBtnText", + "name": "lines", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Notification panel footer button text.", - "fieldName": "panelFooterBtnText" + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "fieldName": "lines" }, { - "name": "hidePanelFooter", + "name": "thumbnailVisible", "type": { - "text": "boolean" + "text": "boolean | undefined" }, "default": "false", - "description": "Hide notification panel footer", - "fieldName": "hidePanelFooter" + "description": "Sets show or hide thumbnail element.", + "fieldName": "thumbnailVisible" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-notification-panel", + "tagName": "kyn-info-card-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderNotificationPanel", + "name": "InformationalCardSkeleton", "declaration": { - "name": "HeaderNotificationPanel", - "module": "src/components/global/header/headerNotificationPanel.ts" + "name": "InformationalCardSkeleton", + "module": "src/components/reusable/card/informationalCard.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-notification-panel", + "name": "kyn-info-card-skeleton", "declaration": { - "name": "HeaderNotificationPanel", - "module": "src/components/global/header/headerNotificationPanel.ts" + "name": "InformationalCardSkeleton", + "module": "src/components/reusable/card/informationalCard.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerPanelLink.ts", + "path": "src/components/reusable/card/vitalCard.skeleton.ts", "declarations": [ { "kind": "class", - "description": "Header fly-out panel link.", - "name": "HeaderPanelLink", - "slots": [ - { - "description": "Slot for link text/content.", - "name": "unnamed" - } - ], + "description": "`kyn-vital-card-skeleton` Web Component.\nA skeleton loading state for the vital card component that mirrors its structure.", + "name": "VitalCardSkeleton", "members": [ { "kind": "field", - "name": "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", + "name": "lines", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "attribute": "rel" - }, - { - "kind": "method", - "name": "handleClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "attribute": "lines" } ], "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", + "name": "lines", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", - "fieldName": "rel" + "default": "0", + "description": "Sets the number of body/description lines to show in the skeleton pattern example.", + "fieldName": "lines" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-header-panel-link", + "tagName": "kyn-vital-card-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "HeaderPanelLink", + "name": "VitalCardSkeleton", "declaration": { - "name": "HeaderPanelLink", - "module": "src/components/global/header/headerPanelLink.ts" + "name": "VitalCardSkeleton", + "module": "src/components/reusable/card/vitalCard.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-panel-link", + "name": "kyn-vital-card-skeleton", "declaration": { - "name": "HeaderPanelLink", - "module": "src/components/global/header/headerPanelLink.ts" + "name": "VitalCardSkeleton", + "module": "src/components/reusable/card/vitalCard.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/header/headerUserProfile.ts", + "path": "src/components/reusable/datePicker/datepicker.ts", "declarations": [ { "kind": "class", - "description": "Header user profile.", - "name": "HeaderUserProfile", + "description": "Datepicker: uses Flatpickr's datetime picker library -- `https://flatpickr.js.org`", + "name": "DatePicker", "slots": [ { - "description": "Slot for the profile picture img.", - "name": "unnamed" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "name", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "The user's name.", - "attribute": "name" + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "subtitle", + "name": "locale", "type": { - "text": "string" + "text": "SupportedLocale" }, - "default": "''", - "description": "The user's job title, or subtext.", - "attribute": "subtitle" + "default": "'en'", + "attribute": "locale" }, { "kind": "field", - "name": "email", + "name": "dateFormat", "type": { "text": "string" }, - "default": "''", - "description": "The user's email address.", - "attribute": "email" + "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": "profileLink", + "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": "View profile link URL.", - "attribute": "profileLink" + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { "kind": "field", - "name": "profileLinkText", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets datepicker form input value to required/required.", + "attribute": "required" + }, + { + "kind": "field", + "name": "size", "type": { "text": "string" }, - "default": "'View Profile'", - "description": "View Profile link text.", - "attribute": "profileLinkText" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { - "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": [ + "kind": "field", + "name": "value", + "type": { + "text": "Date | Date[] | null" + }, + "default": "null", + "description": "Sets pre-selected date/time value.", + "attribute": "value" + }, { - "name": "name", + "kind": "field", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "The user's name.", - "fieldName": "name" + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { - "name": "subtitle", + "kind": "field", + "name": "disable", "type": { - "text": "string" + "text": "(string | number | Date)[]" }, - "default": "''", - "description": "The user's job title, or subtext.", - "fieldName": "subtitle" + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "attribute": "disable" }, { - "name": "email", + "kind": "field", + "name": "enable", "type": { - "text": "string" + "text": "(string | number | Date)[]" }, - "default": "''", - "description": "The user's email address.", - "fieldName": "email" + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "attribute": "enable" }, { - "name": "profileLink", + "kind": "field", + "name": "mode", "type": { - "text": "string" + "text": "'single' | 'multiple'" }, - "default": "''", - "description": "View profile link URL.", - "fieldName": "profileLink" + "default": "'single'", + "description": "Sets flatpickr mode to select single (default), multiple dates.", + "attribute": "mode" }, { - "name": "profileLinkText", + "kind": "field", + "name": "caption", "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/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": [ - { - "kind": "class", - "description": "The global Side Navigation component.", - "name": "LocalNav", - "slots": [ - { - "description": "The default slot, for local nav links.", - "name": "unnamed" + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, - { - "description": "Slot for a search input", - "name": "search" - } - ], - "members": [ { "kind": "field", - "name": "pinned", + "name": "datePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Local nav pinned state.", - "attribute": "pinned" + "description": "Sets entire datepicker form element to enabled/disabled.", + "attribute": "datePickerDisabled" }, { "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", + "name": "twentyFourHourFormat", "type": { - "text": "object" - } - }, + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" + }, + { + "kind": "field", + "name": "minDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "attribute": "minDate" + }, + { + "kind": "field", + "name": "maxDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "attribute": "maxDate" + }, + { + "kind": "field", + "name": "errorAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" + }, + { + "kind": "field", + "name": "errorTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" + }, + { + "kind": "field", + "name": "warningAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" + }, + { + "kind": "field", + "name": "warningTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, { "kind": "method", - "name": "_handleNavToggle", + "name": "renderValidationMessage", "privacy": "private", "parameters": [ { - "name": "e", + "name": "errorId", "type": { - "text": "Event" + "text": "string" + } + }, + { + "name": "warningId", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "_handleMobileNavToggle", + "name": "getDatepickerClasses" + }, + { + "kind": "method", + "name": "reinitializeFlatpickr", "privacy": "private" }, { "kind": "method", - "name": "handlePointerEnter", + "name": "setupAnchor", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleClear", "privacy": "private", "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "PointerEvent" + "text": "Event" } } ] }, { "kind": "method", - "name": "handlePointerLeave", - "privacy": "private", + "name": "initializeFlatpickr", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "updateFlatpickrOptions", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "setInitialDates", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" + } + } + }, + { + "kind": "method", + "name": "handleOpen", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "handleClose", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "handleDateChange", + "return": { + "type": { + "text": "Promise" + } + }, "parameters": [ { - "name": "e", + "name": "selectedDates", "type": { - "text": "PointerEvent" + "text": "Date[]" + } + }, + { + "name": "dateStr", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "_updateChildren", - "privacy": "private" + "name": "setShouldFlatpickrOpen", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "boolean" + } + } + ] }, { "kind": "method", - "name": "handleSlotChange", - "privacy": "private" + "name": "closeFlatpickr", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + } }, { "kind": "method", - "name": "_handleLinkActive", + "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", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "handleInputFocusEvent", + "privacy": "private", + "return": { + "type": { + "text": "void" + } + } + }, + { + "kind": "method", + "name": "_validate", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "interacted", "type": { - "text": "Event" + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" } } ] - } - ], - "events": [ + }, { - "description": "Captures the click event and emits the pinned state and original event details.", - "name": "on-toggle" - } - ], - "attributes": [ - { - "name": "pinned", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Local nav pinned state.", - "fieldName": "pinned" + "kind": "method", + "name": "_onChange", + "privacy": "private" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" + "kind": "method", + "name": "_handleFormReset", + "privacy": "private" } ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-local-nav", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "LocalNav", - "declaration": { - "name": "LocalNav", - "module": "src/components/global/localNav/localNav.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-local-nav", - "declaration": { - "name": "LocalNav", - "module": "src/components/global/localNav/localNav.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/global/localNav/localNavDivider.ts", - "declarations": [ - { - "kind": "class", - "description": "Local Nav divider", - "name": "LocalNavDivider", - "members": [ + "events": [ { - "kind": "field", - "name": "heading", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional heading text.", - "attribute": "heading" + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-change" } ], "attributes": [ { - "name": "heading", + "name": "label", "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": "Label text.", + "fieldName": "label" }, { - "description": "Slot for an icon. Use 16px size.", - "name": "icon" + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "fieldName": "locale" }, { - "description": "Slot for the next level of links, supports three levels.", - "name": "links" - } - ], - "members": [ - { - "kind": "field", - "name": "href", + "name": "dateFormat", "type": { "text": "string" }, - "default": "''", - "description": "Link url.", - "attribute": "href" + "default": "'Y-m-d'", + "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", + "fieldName": "dateFormat" }, { - "kind": "field", - "name": "expanded", + "name": "defaultDate", "type": { - "text": "boolean" + "text": "Date | null" }, - "default": "false", - "description": "Expanded state.", - "attribute": "expanded" + "default": "null", + "description": "Sets the initial selected date(s)", + "fieldName": "defaultDate" }, { - "kind": "field", - "name": "active", + "name": "defaultErrorMessage", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Active state.", - "attribute": "active", - "reflects": true + "default": "''", + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "kind": "field", - "name": "disabled", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "attribute": "disabled" + "description": "Sets datepicker form input value to required/required.", + "fieldName": "required" }, { - "kind": "field", - "name": "backText", + "name": "size", "type": { "text": "string" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "attribute": "backText" - }, - { - "kind": "method", - "name": "_handleTextSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_getSlotText", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleLinksSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "updateChildren", - "privacy": "private" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "kind": "method", - "name": "_handleBack", - "privacy": "private" + "name": "value", + "type": { + "text": "Date | Date[] | null" + }, + "default": "null", + "description": "Sets pre-selected date/time value.", + "fieldName": "value" }, { - "kind": "method", - "name": "handleClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the click event and emits the original event, level, and if default was prevented.", - "name": "on-click" - } - ], - "attributes": [ - { - "name": "href", + "name": "warnText", "type": { "text": "string" }, "default": "''", - "description": "Link url.", - "fieldName": "href" + "description": "Sets validation warning messaging.", + "fieldName": "warnText" }, { - "name": "expanded", + "name": "disable", "type": { - "text": "boolean" + "text": "(string | number | Date)[]" }, - "default": "false", - "description": "Expanded state.", - "fieldName": "expanded" + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "fieldName": "disable" }, { - "name": "active", + "name": "enable", "type": { - "text": "boolean" + "text": "(string | number | Date)[]" }, - "default": "false", - "description": "Active state.", - "fieldName": "active" + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "fieldName": "enable" }, { - "name": "disabled", + "name": "mode", + "type": { + "text": "'single' | 'multiple'" + }, + "default": "'single'", + "description": "Sets flatpickr mode to select single (default), multiple dates.", + "fieldName": "mode" + }, + { + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" + }, + { + "name": "datePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "fieldName": "disabled" + "description": "Sets entire datepicker form element to enabled/disabled.", + "fieldName": "datePickerDisabled" }, { - "name": "backText", + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" + }, + { + "name": "minDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "fieldName": "minDate" + }, + { + "name": "maxDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "fieldName": "maxDate" + }, + { + "name": "errorAriaLabel", "type": { "text": "string" }, - "default": "'Back'", - "description": "Text for mobile \"Back\" button.", - "fieldName": "backText" + "default": "''", + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" + }, + { + "name": "errorTitle", + "type": { + "text": "string" + }, + "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": "warningTitle", + "type": { + "text": "string" + }, + "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-local-nav-link", + "tagName": "kyn-date-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "LocalNavLink", + "name": "DatePicker", "declaration": { - "name": "LocalNavLink", - "module": "src/components/global/localNav/localNavLink.ts" + "name": "DatePicker", + "module": "src/components/reusable/datePicker/datepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-local-nav-link", + "name": "kyn-date-picker", "declaration": { - "name": "LocalNavLink", - "module": "src/components/global/localNav/localNavLink.ts" + "name": "DatePicker", + "module": "src/components/reusable/datePicker/datepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/uiShell/index.ts", + "path": "src/components/reusable/datePicker/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "UiShell", + "name": "DatePicker", "declaration": { - "name": "UiShell", - "module": "./uiShell" + "name": "DatePicker", + "module": "./datepicker" } } ] }, { "kind": "javascript-module", - "path": "src/components/global/uiShell/uiShell.ts", + "path": "src/components/reusable/daterangepicker/daterangepicker.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", + "description": "Date Range Picker: uses Flatpickr library, range picker implementation -- `https://flatpickr.js.org/examples/#range-calendar`", + "name": "DateRangePicker", "slots": [ { - "description": "Slot for global elements.", - "name": "unnamed" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "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/blockCodeView/blockCodeView.ts", - "declarations": [ - { - "kind": "class", - "description": "`` component to display `` snippets as standalone single-/multi-line block elements.", - "name": "BlockCodeView", - "members": [ + "kind": "field", + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "attribute": "label" + }, { "kind": "field", - "name": "darkTheme", + "name": "locale", "type": { - "text": "'light' | 'dark'" + "text": "SupportedLocale" }, - "default": "'dark'", - "description": "Sets background and text theming.", - "attribute": "darkTheme" + "default": "'en'", + "description": "Sets and dynamically imports specific l10n calendar localization.", + "attribute": "locale" }, { "kind": "field", - "name": "language", + "name": "dateFormat", "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" + "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": "maxHeight", + "name": "defaultDate", "type": { - "text": "number | null" + "text": "Date | null" }, "default": "null", - "description": "Customizable max-height setting for code snippet container.", - "attribute": "maxHeight" + "description": "Sets the initial selected date(s)", + "attribute": "defaultDate" }, { "kind": "field", - "name": "codeViewLabel", + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Optionally displayed label above code snippet container.", - "attribute": "codeViewLabel" + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { "kind": "field", - "name": "copyOptionVisible", + "name": "value", "type": { - "text": "boolean" + "text": "[Date | null, Date | null]" }, - "default": "false", - "description": "Optionally display button to copy code snippet.", - "attribute": "copyOptionVisible" + "default": "[null, null]", + "description": "Sets date/time range value.", + "attribute": "value" }, { "kind": "field", - "name": "codeViewExpandable", + "name": "warnText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Optionally display button to expand code snippet container.", - "attribute": "codeViewExpandable" + "default": "''", + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { "kind": "field", - "name": "copyButtonText", + "name": "disable", "type": { - "text": "string" + "text": "(string | number | Date)[]" }, - "default": "''", - "description": "Sets copy code button text (optional).", - "attribute": "copyButtonText" + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "attribute": "disable" }, { "kind": "field", - "name": "copyButtonDescriptionAttr", + "name": "enable", "type": { - "text": "string" + "text": "(string | number | Date)[]" }, - "default": "''", - "description": "Sets copy button description attr value.", - "attribute": "copyButtonDescriptionAttr" + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "attribute": "enable" }, { "kind": "field", - "name": "codeSnippet", + "name": "caption", "type": { "text": "string" }, "default": "''", - "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", - "attribute": "codeSnippet" - }, + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" + }, { "kind": "field", - "name": "textStrings", - "default": "{\n collapsed: 'Collapsed',\n expanded: 'Expanded',\n}", - "description": "Text string customization.", - "attribute": "textStrings", + "name": "required", "type": { - "text": "object" - } + "text": "boolean" + }, + "default": "false", + "description": "Sets date range picker form input value to required/required.", + "attribute": "required" }, { - "kind": "method", - "name": "getContainerClasses", - "privacy": "private" + "kind": "field", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { - "kind": "method", - "name": "renderCopyButton", - "privacy": "private" + "kind": "field", + "name": "dateRangePickerDisabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets entire date range picker form element to enabled/disabled.", + "attribute": "dateRangePickerDisabled" }, { - "kind": "method", - "name": "renderExpandButton", - "privacy": "private" + "kind": "field", + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" }, { - "kind": "method", - "name": "highlightCode", - "privacy": "private" + "kind": "field", + "name": "minDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of date range picker date selection.", + "attribute": "minDate" }, { - "kind": "method", - "name": "detectLanguage", - "privacy": "private", - "return": { - "type": { - "text": "string" - } + "kind": "field", + "name": "maxDate", + "type": { + "text": "string | number | Date" }, - "parameters": [ - { - "name": "code", - "type": { - "text": "string" - } - } - ] + "default": "''", + "description": "Sets upper boundary of date range picker date selection.", + "attribute": "maxDate" + }, + { + "kind": "field", + "name": "errorAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" + }, + { + "kind": "field", + "name": "errorTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" + }, + { + "kind": "field", + "name": "warningAriaLabel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" + }, + { + "kind": "field", + "name": "warningTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "calculateRelevance", + "name": "renderValidationMessage", "privacy": "private", - "return": { - "type": { - "text": "number" - } - }, "parameters": [ { - "name": "tokens", + "name": "errorId", "type": { - "text": "(string | Prism.Token)[]" + "text": "string" } }, { - "name": "language", + "name": "warningId", "type": { "text": "string" } @@ -2259,675 +2237,526 @@ }, { "kind": "method", - "name": "getTokenRelevance", + "name": "_handleClear", "privacy": "private", - "return": { - "type": { - "text": "number" - } - }, "parameters": [ { - "name": "token", - "type": { - "text": "Prism.Token" - } - }, - { - "name": "language", + "name": "event", "type": { - "text": "string" + "text": "Event" } } ] }, { "kind": "method", - "name": "isLanguageSpecificToken", - "privacy": "private", + "name": "getDateRangePickerClasses" + }, + { + "kind": "method", + "name": "reinitializeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "setupAnchor", + "privacy": "private" + }, + { + "kind": "method", + "name": "initializeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "getComponentFlatpickrOptions", "return": { "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "token", - "type": { - "text": "Prism.Token" - } - }, - { - "name": "language", - "type": { - "text": "string" - } + "text": "Promise>" } - ] + } }, { "kind": "method", - "name": "determineMarkupLanguage", - "privacy": "private", + "name": "updateFlatpickrOptions" + }, + { + "kind": "method", + "name": "setInitialDates", "return": { "type": { - "text": "string" - } - }, - "parameters": [ - { - "name": "code", - "type": { - "text": "string" - } + "text": "void" } - ] + } }, { "kind": "method", - "name": "checkOverflow", - "privacy": "private" + "name": "handleOpen", + "return": { + "type": { + "text": "void" + } + } }, { "kind": "method", - "name": "removeLeadingWhitespace", - "privacy": "private", + "name": "handleDateChange", "return": { "type": { - "text": "string" + "text": "Promise" } }, "parameters": [ { - "name": "code", + "name": "selectedDates", "type": { - "text": "string" + "text": "Date[]" } } ] }, { "kind": "method", - "name": "formatExampleCode", - "privacy": "private", + "name": "handleClose" + }, + { + "kind": "method", + "name": "updateSelectedDateRangeAria", "parameters": [ { - "name": "code", + "name": "selectedDates", "type": { - "text": "string" + "text": "Date[]" } } ] }, { "kind": "method", - "name": "copyCode", + "name": "setShouldFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "e", + "name": "value", "type": { - "text": "Event" + "text": "boolean" } } ] }, { "kind": "method", - "name": "getContainerStyle", - "privacy": "private", - "return": { - "type": { - "text": "string" + "name": "closeFlatpickr", + "privacy": "private" + }, + { + "kind": "method", + "name": "preventFlatpickrOpen", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } } - } + ] }, { "kind": "method", - "name": "expandCodeView", + "name": "handleInputClickEvent", "privacy": "private" }, { "kind": "method", - "name": "handleKeypress", + "name": "handleInputFocusEvent", + "privacy": "private" + }, + { + "kind": "method", + "name": "_validate", "privacy": "private", + "return": { + "type": { + "text": "void" + } + }, "parameters": [ { - "name": "e", + "name": "interacted", "type": { - "text": "KeyboardEvent" + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" } } ] + }, + { + "kind": "method", + "name": "_onChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleFormReset", + "privacy": "private" } ], "events": [ { - "name": "on-copy", - "type": { - "text": "CustomEvent" - }, - "description": "Emits when the copy button is clicked." + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-change" } ], "attributes": [ { - "name": "darkTheme", + "name": "label", "type": { - "text": "'light' | 'dark'" + "text": "string" }, - "default": "'dark'", - "description": "Sets background and text theming.", - "fieldName": "darkTheme" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "language", + "name": "locale", + "type": { + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets and dynamically imports specific l10n calendar localization.", + "fieldName": "locale" + }, + { + "name": "dateFormat", "type": { "text": "string" }, - "default": "''", - "description": "If empty string, attempt language syntax auto-detection. Setting a value will override auto-detection and manually configure desired language.", - "fieldName": "language" + "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": "maxHeight", + "name": "defaultDate", "type": { - "text": "number | null" + "text": "Date | null" }, "default": "null", - "description": "Customizable max-height setting for code snippet container.", - "fieldName": "maxHeight" + "description": "Sets the initial selected date(s)", + "fieldName": "defaultDate" }, { - "name": "codeViewLabel", + "name": "defaultErrorMessage", "type": { "text": "string" }, "default": "''", - "description": "Optionally displayed label above code snippet container.", - "fieldName": "codeViewLabel" + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "name": "copyOptionVisible", + "name": "value", + "type": { + "text": "[Date | null, Date | null]" + }, + "default": "[null, null]", + "description": "Sets date/time range value.", + "fieldName": "value" + }, + { + "name": "warnText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets validation warning messaging.", + "fieldName": "warnText" + }, + { + "name": "disable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to disable specific dates.", + "fieldName": "disable" + }, + { + "name": "enable", + "type": { + "text": "(string | number | Date)[]" + }, + "default": "[]", + "description": "Sets flatpickr options setting to enable specific dates.", + "fieldName": "enable" + }, + { + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" + }, + { + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Optionally display button to copy code snippet.", - "fieldName": "copyOptionVisible" + "description": "Sets date range picker form input value to required/required.", + "fieldName": "required" }, { - "name": "codeViewExpandable", + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" + }, + { + "name": "dateRangePickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Optionally display button to expand code snippet container.", - "fieldName": "codeViewExpandable" + "description": "Sets entire date range picker form element to enabled/disabled.", + "fieldName": "dateRangePickerDisabled" }, { - "name": "copyButtonText", + "name": "twentyFourHourFormat", + "type": { + "text": "boolean | null" + }, + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" + }, + { + "name": "minDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets lower boundary of date range picker date selection.", + "fieldName": "minDate" + }, + { + "name": "maxDate", + "type": { + "text": "string | number | Date" + }, + "default": "''", + "description": "Sets upper boundary of date range picker date selection.", + "fieldName": "maxDate" + }, + { + "name": "errorAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "Sets copy code button text (optional).", - "fieldName": "copyButtonText" + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "name": "copyButtonDescriptionAttr", + "name": "errorTitle", "type": { "text": "string" }, "default": "''", - "description": "Sets copy button description attr value.", - "fieldName": "copyButtonDescriptionAttr" + "description": "Sets title attribute for error message.", + "fieldName": "errorTitle" }, { - "name": "codeSnippet", + "name": "warningAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "Sets code snippet for display -- NOTE: original formatting is preserved.", - "fieldName": "codeSnippet" + "description": "Sets aria label attribute for warning message.", + "fieldName": "warningAriaLabel" + }, + { + "name": "warningTitle", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets title attribute for warning message.", + "fieldName": "warningTitle" }, { "name": "textStrings", "default": "_defaultTextStrings", - "description": "Text string customization.", + "description": "Customizable text strings.", "fieldName": "textStrings" } ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" + } + ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-block-code-view", + "tagName": "kyn-date-range-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "BlockCodeView", + "name": "DateRangePicker", "declaration": { - "name": "BlockCodeView", - "module": "src/components/reusable/blockCodeView/blockCodeView.ts" + "name": "DateRangePicker", + "module": "src/components/reusable/daterangepicker/daterangepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-block-code-view", + "name": "kyn-date-range-picker", "declaration": { - "name": "BlockCodeView", - "module": "src/components/reusable/blockCodeView/blockCodeView.ts" + "name": "DateRangePicker", + "module": "src/components/reusable/daterangepicker/daterangepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/blockCodeView/index.ts", + "path": "src/components/reusable/daterangepicker/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "BlockCodeView", + "name": "DateRangePicker", "declaration": { - "name": "BlockCodeView", - "module": "./blockCodeView" + "name": "DateRangePicker", + "module": "./daterangepicker" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/breadcrumbs/breadcrumbs.ts", + "path": "src/components/reusable/dropdown/dropdown.ts", "declarations": [ { "kind": "class", - "description": "Breadcrumbs Component.", - "name": "Breadcrumbs", + "description": "Dropdown, single select.", + "name": "Dropdown", "slots": [ { - "description": "Slot for inserting links.", + "description": "Slot for dropdown options.", "name": "unnamed" + }, + { + "description": "Slot for tooltip.", + "name": "tooltip" } ], - "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", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "VitalCardSkeleton", - "declaration": { - "name": "VitalCardSkeleton", - "module": "./vitalCard.skeleton" - } - }, - { - "kind": "js", - "name": "InformationalCardSkeleton", - "declaration": { - "name": "InformationalCardSkeleton", - "module": "./informationalCard.skeleton" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/card/informationalCard.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-info-card-skeleton` Web Component.\nA skeleton loading state for the informational card component that mirrors its structure.", - "name": "InformationalCardSkeleton", "members": [ { "kind": "field", - "name": "lines", + "name": "label", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "attribute": "lines" + "default": "''", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "thumbnailVisible", - "type": { - "text": "boolean | undefined" - }, - "default": "false", - "description": "Sets show or hide thumbnail element.", - "attribute": "thumbnailVisible" - } - ], - "attributes": [ - { - "name": "lines", + "name": "size", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "fieldName": "lines" + "default": "'md'", + "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { - "name": "thumbnailVisible", + "kind": "field", + "name": "inline", "type": { - "text": "boolean | undefined" + "text": "boolean" }, "default": "false", - "description": "Sets show or hide thumbnail element.", - "fieldName": "thumbnailVisible" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-info-card-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "InformationalCardSkeleton", - "declaration": { - "name": "InformationalCardSkeleton", - "module": "src/components/reusable/card/informationalCard.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-info-card-skeleton", - "declaration": { - "name": "InformationalCardSkeleton", - "module": "src/components/reusable/card/informationalCard.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/card/vitalCard.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-vital-card-skeleton` Web Component.\nA skeleton loading state for the vital card component that mirrors its structure.", - "name": "VitalCardSkeleton", - "members": [ + "description": "Dropdown inline style type.", + "attribute": "inline" + }, { "kind": "field", - "name": "lines", - "type": { - "text": "number" - }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "attribute": "lines" - } - ], - "attributes": [ - { - "name": "lines", + "name": "caption", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Sets the number of body/description lines to show in the skeleton pattern example.", - "fieldName": "lines" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-vital-card-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "VitalCardSkeleton", - "declaration": { - "name": "VitalCardSkeleton", - "module": "src/components/reusable/card/vitalCard.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-vital-card-skeleton", - "declaration": { - "name": "VitalCardSkeleton", - "module": "src/components/reusable/card/vitalCard.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/checkbox/checkbox.ts", - "declarations": [ - { - "kind": "class", - "description": "Checkbox.", - "name": "Checkbox", - "slots": [ - { - "description": "Slot for label text.", - "name": "unnamed" - } - ], - "members": [ + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" + }, { "kind": "field", - "name": "value", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "Checkbox value.", - "attribute": "value" + "description": "Dropdown placeholder.", + "attribute": "placeholder" }, { "kind": "field", - "name": "disabled", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Checkbox disabled state, inherited from the parent group.", - "attribute": "disabled" + "description": "Listbox/drawer open state.", + "attribute": "open" }, { "kind": "field", - "name": "visiblyHidden", + "name": "searchable", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", - "attribute": "visiblyHidden" + "description": "Makes the dropdown searchable.", + "attribute": "searchable" }, { "kind": "field", - "name": "indeterminate", + "name": "filterSearch", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "attribute": "indeterminate" + "description": "Searchable variant filters results.", + "attribute": "filterSearch" }, { - "kind": "method", - "name": "handleChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-checkbox-change" - } - ], - "attributes": [ - { - "name": "value", - "type": { - "text": "string" - }, - "default": "''", - "description": "Checkbox value.", - "fieldName": "value" - }, - { - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox disabled state, inherited from the parent group.", - "fieldName": "disabled" - }, - { - "name": "visiblyHidden", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the label should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes.", - "fieldName": "visiblyHidden" - }, - { - "name": "indeterminate", + "kind": "field", + "name": "multiple", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "fieldName": "indeterminate" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-checkbox", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "Checkbox", - "declaration": { - "name": "Checkbox", - "module": "src/components/reusable/checkbox/checkbox.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-checkbox", - "declaration": { - "name": "Checkbox", - "module": "src/components/reusable/checkbox/checkbox.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/checkbox/checkboxGroup.ts", - "declarations": [ - { - "kind": "class", - "description": "Checkbox group container.", - "name": "CheckboxGroup", - "slots": [ - { - "description": "Slot for individual checkboxes.", - "name": "unnamed" - }, - { - "description": "Slot for tooltip.", - "name": "tooltip" - }, - { - "description": "Slot for description text.", - "name": "description" - } - ], - "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "Array" - }, - "default": "[]", - "description": "Checkbox group selected values.", - "attribute": "value" + "description": "Enabled multi-select functionality.", + "attribute": "multiple" }, { "kind": "field", @@ -2936,7 +2765,7 @@ "text": "boolean" }, "default": "false", - "description": "Makes a single selection required.", + "description": "Makes the dropdown required.", "attribute": "required" }, { @@ -2946,18 +2775,18 @@ "text": "boolean" }, "default": "false", - "description": "Checkbox group disabled state.", + "description": "Dropdown disabled state.", "attribute": "disabled" }, { "kind": "field", - "name": "horizontal", + "name": "hideTags", "type": { "text": "boolean" }, "default": "false", - "description": "Checkbox group horizontal style.", - "attribute": "horizontal" + "description": "Hide the tags below multi-select.", + "attribute": "hideTags" }, { "kind": "field", @@ -2966,53 +2795,33 @@ "text": "boolean" }, "default": "false", - "description": "Adds a \"Select All\" checkbox to the top of the group.", + "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", "attribute": "selectAll" }, { "kind": "field", - "name": "hideLegend", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hide the group legend/label visually.", - "attribute": "hideLegend" - }, - { - "kind": "field", - "name": "filterable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Adds a search input to enable filtering of checkboxes.", - "attribute": "filterable" - }, - { - "kind": "field", - "name": "label", + "name": "selectAllText", "type": { "text": "string" }, - "default": "''", - "description": "Label text.", - "attribute": "label" + "default": "'Select all'", + "description": "\"Select all\" text customization.", + "attribute": "selectAllText" }, { "kind": "field", - "name": "limitCheckboxes", + "name": "menuMinWidth", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Limits visible checkboxes behind a \"Show all\" button.", - "attribute": "limitCheckboxes" + "default": "'initial'", + "description": "Menu CSS min-width value.", + "attribute": "menuMinWidth" }, { "kind": "field", "name": "textStrings", - "default": "{\n selectAll: 'Select all',\n showMore: 'Show more',\n showLess: 'Show less',\n search: 'Search',\n required: 'Required',\n error: 'Error',\n}", + "default": "{\n selectedOptions: 'List of selected options',\n required: 'Required',\n error: 'Error',\n}", "description": "Text string customization.", "attribute": "textStrings", "type": { @@ -3021,42 +2830,45 @@ }, { "kind": "field", - "name": "checkboxes", + "name": "searchText", "type": { - "text": "Array" + "text": "string" }, - "default": "[]" + "default": "''", + "description": "Search input value.", + "attribute": "searchText" }, { - "kind": "field", - "name": "filteredCheckboxes", - "type": { - "text": "Array" - }, - "default": "[]" + "kind": "method", + "name": "handleSlotChange", + "privacy": "private" }, { "kind": "method", - "name": "_validate", + "name": "handleClick", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleLabelClick", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleButtonKeydown", "privacy": "private", "parameters": [ { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", + "name": "e", "type": { - "text": "Boolean" + "text": "any" } } ] }, { "kind": "method", - "name": "_handleCheckboxChange", + "name": "handleListKeydown", "privacy": "private", "parameters": [ { @@ -3069,12 +2881,7 @@ }, { "kind": "method", - "name": "_emitChangeEvent", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleFilter", + "name": "handleListBlur", "privacy": "private", "parameters": [ { @@ -3087,30 +2894,58 @@ }, { "kind": "method", - "name": "_toggleRevealed", + "name": "handleKeyboard", "privacy": "private", "parameters": [ { - "name": "revealed", + "name": "e", "type": { - "text": "boolean" + "text": "any" + } + }, + { + "name": "keyCode", + "type": { + "text": "number" + } + }, + { + "name": "target", + "type": { + "text": "string" } } ] }, { "kind": "method", - "name": "_handleSlotChange", - "privacy": "private" + "name": "handleClearMultiple", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { "kind": "method", - "name": "_updateChildren", - "privacy": "private" + "name": "handleTagClear", + "privacy": "private", + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + } + } + ] }, { "kind": "method", - "name": "_handleSubgroupChange", + "name": "handleClear", "privacy": "private", "parameters": [ { @@ -3120,109 +2955,337 @@ } } ] - } - ], - "events": [ + }, { - "description": "Captures the change event and emits the selected values.", - "name": "on-checkbox-group-change" + "kind": "method", + "name": "handleSearchClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { - "description": "Captures the search input event and emits the search term.", + "kind": "method", + "name": "handleButtonBlur", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "handleSearchBlur", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "handleSearchKeydown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "handleSearchInput", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_updateSelectedOptions", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_handleBlur", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "updateValue", + "privacy": "private", + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + } + }, + { + "name": "selected", + "default": "false" + } + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] + }, + { + "kind": "method", + "name": "emitValue", + "privacy": "private" + }, + { + "kind": "method", + "name": "_emitSearch", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateTags", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateOptions", + "privacy": "private" + } + ], + "events": [ + { + "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 show more/less click and emits the expanded state.", - "name": "on-limit-toggle" + "description": "Captures the the multi-select clear all button click event and emits the value.", + "name": "on-clear-all" } ], "attributes": [ { - "name": "value", + "name": "label", "type": { - "text": "Array" + "text": "string" }, - "default": "[]", - "description": "Checkbox group selected values.", - "fieldName": "value" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "required", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Makes a single selection required.", - "fieldName": "required" + "default": "'md'", + "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "name": "disabled", + "name": "inline", "type": { "text": "boolean" }, "default": "false", - "description": "Checkbox group disabled state.", - "fieldName": "disabled" + "description": "Dropdown inline style type.", + "fieldName": "inline" }, { - "name": "horizontal", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Checkbox group horizontal style.", - "fieldName": "horizontal" + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "selectAll", + "name": "placeholder", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Adds a \"Select All\" checkbox to the top of the group.", - "fieldName": "selectAll" + "default": "''", + "description": "Dropdown placeholder.", + "fieldName": "placeholder" }, { - "name": "hideLegend", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the group legend/label visually.", - "fieldName": "hideLegend" + "description": "Listbox/drawer open state.", + "fieldName": "open" }, { - "name": "filterable", + "name": "searchable", "type": { "text": "boolean" }, "default": "false", - "description": "Adds a search input to enable filtering of checkboxes.", - "fieldName": "filterable" + "description": "Makes the dropdown searchable.", + "fieldName": "searchable" }, { - "name": "label", + "name": "filterSearch", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text.", - "fieldName": "label" + "default": "false", + "description": "Searchable variant filters results.", + "fieldName": "filterSearch" }, { - "name": "limitCheckboxes", + "name": "multiple", "type": { "text": "boolean" }, "default": "false", - "description": "Limits visible checkboxes behind a \"Show all\" button.", - "fieldName": "limitCheckboxes" + "description": "Enabled multi-select functionality.", + "fieldName": "multiple" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" + "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" + }, + { + "name": "selectAll", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", + "fieldName": "selectAll" + }, + { + "name": "selectAllText", + "type": { + "text": "string" + }, + "default": "'Select all'", + "description": "\"Select all\" text customization.", + "fieldName": "selectAllText" + }, + { + "name": "menuMinWidth", + "type": { + "text": "string" + }, + "default": "'initial'", + "description": "Menu CSS min-width value.", + "fieldName": "menuMinWidth" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" + }, + { + "name": "searchText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Search input value.", + "fieldName": "searchText" } ], "mixins": [ @@ -3235,69 +3298,146 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-checkbox-group", + "tagName": "kyn-dropdown", "customElement": true } ], "exports": [ { "kind": "js", - "name": "CheckboxGroup", + "name": "Dropdown", "declaration": { - "name": "CheckboxGroup", - "module": "src/components/reusable/checkbox/checkboxGroup.ts" + "name": "Dropdown", + "module": "src/components/reusable/dropdown/dropdown.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-checkbox-group", + "name": "kyn-dropdown", "declaration": { - "name": "CheckboxGroup", - "module": "src/components/reusable/checkbox/checkboxGroup.ts" + "name": "Dropdown", + "module": "src/components/reusable/dropdown/dropdown.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/checkbox/checkboxSubgroup.ts", + "path": "src/components/reusable/dropdown/dropdownCategory.ts", "declarations": [ { "kind": "class", - "description": "Checkbox subgroup", - "name": "CheckboxSubgroup", + "description": "Dropdown category.", + "name": "DropdownCategory", "slots": [ { - "description": "Slot for child kyn-checkboxes.", + "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 parent kyn-checkbox.", - "name": "parent" + "description": "Slot for option text.", + "name": "unnamed" } ], "members": [ + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "''", + "description": "Option value.", + "attribute": "value" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option disabled state.", + "attribute": "disabled" + }, + { + "kind": "field", + "name": "indeterminate", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the checkbox is in an indeterminate state.", + "attribute": "indeterminate", + "reflects": true + }, { "kind": "method", - "name": "_handleSlotchange", - "privacy": "private" + "name": "handleSlotChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { "kind": "method", - "name": "_syncParent", + "name": "handleClick", "privacy": "private", "parameters": [ { - "name": "count", + "name": "e", "type": { - "text": "number" + "text": "Event" } } ] }, { "kind": "method", - "name": "_handleCheckboxChange", + "name": "handleBlur", "privacy": "private", "parameters": [ { @@ -3309,1192 +3449,1753 @@ ] } ], + "events": [ + { + "description": "Emits the option details to the parent dropdown.", + "name": "on-click" + } + ], + "attributes": [ + { + "name": "value", + "type": { + "text": "string" + }, + "default": "''", + "description": "Option value.", + "fieldName": "value" + }, + { + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option disabled state.", + "fieldName": "disabled" + }, + { + "name": "indeterminate", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the checkbox is in an indeterminate state.", + "fieldName": "indeterminate" + } + ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-checkbox-subgroup", + "tagName": "kyn-dropdown-option", "customElement": true } ], "exports": [ { "kind": "js", - "name": "CheckboxSubgroup", + "name": "DropdownOption", "declaration": { - "name": "CheckboxSubgroup", - "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" + "name": "DropdownOption", + "module": "src/components/reusable/dropdown/dropdownOption.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-checkbox-subgroup", + "name": "kyn-dropdown-option", "declaration": { - "name": "CheckboxSubgroup", - "module": "src/components/reusable/checkbox/checkboxSubgroup.ts" + "name": "DropdownOption", + "module": "src/components/reusable/dropdown/dropdownOption.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/checkbox/index.ts", + "path": "src/components/reusable/dropdown/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Checkbox", + "name": "Dropdown", "declaration": { - "name": "Checkbox", - "module": "./checkbox" + "name": "Dropdown", + "module": "./dropdown" } }, { "kind": "js", - "name": "CheckboxGroup", + "name": "DropdownOption", "declaration": { - "name": "CheckboxGroup", - "module": "./checkboxGroup" + "name": "DropdownOption", + "module": "./dropdownOption" } }, { "kind": "js", - "name": "CheckboxSubgroup", + "name": "DropdownCategory", "declaration": { - "name": "CheckboxSubgroup", - "module": "./checkboxSubgroup" + "name": "DropdownCategory", + "module": "./dropdownCategory" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/datePicker/datepicker.ts", + "path": "src/components/reusable/errorBlock/errorBlock.ts", "declarations": [ { "kind": "class", - "description": "Datepicker: uses Flatpickr's datetime picker library -- `https://flatpickr.js.org`", - "name": "DatePicker", + "description": "Error block.", + "name": "ErrorBlock", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for the error description.", + "name": "unnamed" + }, + { + "description": "Slot for the error image.", + "name": "image" + }, + { + "description": "Slot for the action buttons.", + "name": "actions" } ], "members": [ { "kind": "field", - "name": "label", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "attribute": "locale" - }, + "description": "Title text", + "attribute": "titleText" + } + ], + "attributes": [ { - "kind": "field", - "name": "dateFormat", + "name": "titleText", "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" - }, + "default": "''", + "description": "Title text", + "fieldName": "titleText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-error-block", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "ErrorBlock", + "declaration": { + "name": "ErrorBlock", + "module": "src/components/reusable/errorBlock/errorBlock.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-error-block", + "declaration": { + "name": "ErrorBlock", + "module": "src/components/reusable/errorBlock/errorBlock.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/errorBlock/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "ErrorBlock", + "declaration": { + "name": "ErrorBlock", + "module": "./errorBlock" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/globalFilter/globalFilter.ts", + "declarations": [ + { + "kind": "class", + "description": "Global Filter bar.", + "name": "GlobalFilter", + "slots": [ { - "kind": "field", - "name": "defaultDate", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets the initial selected date(s)", - "attribute": "defaultDate" + "description": "Left slot, intended for search input and modal.", + "name": "unnamed" }, { - "kind": "field", - "name": "defaultErrorMessage", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" + "description": "Right slot, intended for action buttons and overflow menu.", + "name": "actions" }, { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets datepicker form input value to required/required.", - "attribute": "required" - }, + "description": "Slot below the filter bar, for tag group.", + "name": "tags" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-global-filter", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "GlobalFilter", + "declaration": { + "name": "GlobalFilter", + "module": "src/components/reusable/globalFilter/globalFilter.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-global-filter", + "declaration": { + "name": "GlobalFilter", + "module": "src/components/reusable/globalFilter/globalFilter.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/globalFilter/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "GlobalFilter", + "declaration": { + "name": "GlobalFilter", + "module": "./globalFilter" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/inlineCodeView/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "InlineCodeView", + "declaration": { + "name": "InlineCodeView", + "module": "./inlineCodeView" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/inlineCodeView/inlineCodeView.ts", + "declarations": [ + { + "kind": "class", + "description": "`` component to display code snippets inline within HTML content.", + "name": "InlineCodeView", + "slots": [ { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, + "description": "inline code snippet slot.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "value", + "name": "darkTheme", "type": { - "text": "Date | Date[] | null" + "text": "'light' | 'dark'" }, - "default": "null", - "description": "Sets pre-selected date/time value.", - "attribute": "value" + "default": "'dark'", + "description": "Sets background and text theming.", + "attribute": "darkTheme" }, { "kind": "field", - "name": "warnText", + "name": "snippetFontSize", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" - }, + "default": "14", + "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", + "attribute": "snippetFontSize" + } + ], + "attributes": [ { - "kind": "field", - "name": "disable", + "name": "darkTheme", "type": { - "text": "(string | number | Date)[]" + "text": "'light' | 'dark'" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "attribute": "disable" + "default": "'dark'", + "description": "Sets background and text theming.", + "fieldName": "darkTheme" }, { - "kind": "field", - "name": "enable", + "name": "snippetFontSize", "type": { - "text": "(string | number | Date)[]" + "text": "number" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "attribute": "enable" - }, - { - "kind": "field", - "name": "mode", - "type": { - "text": "'single' | 'multiple'" - }, - "default": "'single'", - "description": "Sets flatpickr mode to select single (default), multiple dates.", - "attribute": "mode" - }, + "default": "14", + "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", + "fieldName": "snippetFontSize" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-inline-code-view", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "InlineCodeView", + "declaration": { + "name": "InlineCodeView", + "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-inline-code-view", + "declaration": { + "name": "InlineCodeView", + "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Loader", + "declaration": { + "name": "Loader", + "module": "./loader" + } + }, + { + "kind": "js", + "name": "LoaderInline", + "declaration": { + "name": "LoaderInline", + "module": "./inline" + } + }, + { + "kind": "js", + "name": "Skeleton", + "declaration": { + "name": "Skeleton", + "module": "./skeleton" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/inline.ts", + "declarations": [ + { + "kind": "class", + "description": "Inline Loader.", + "name": "LoaderInline", + "slots": [ + { + "description": "Slot for text/description.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "caption", + "name": "status", "type": { "text": "string" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "default": "'active'", + "description": "Status. Can be `active`, `inactive`, `success`, `error`.", + "attribute": "status" }, { - "kind": "field", - "name": "datePickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "attribute": "datePickerDisabled" + "kind": "method", + "name": "_emitStart", + "privacy": "private" }, { - "kind": "field", - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "attribute": "twentyFourHourFormat" + "kind": "method", + "name": "_emitStop", + "privacy": "private" + } + ], + "events": [ + { + "description": "Emits when the loader been started.", + "name": "on-start" }, { - "kind": "field", - "name": "minDate", + "description": "Emits when the loader has been stopped and all animations have completed.", + "name": "on-stop" + } + ], + "attributes": [ + { + "name": "status", "type": { - "text": "string | number | Date" + "text": "string" }, - "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "attribute": "minDate" - }, + "default": "'active'", + "description": "Status. Can be `active`, `inactive`, `success`, `error`.", + "fieldName": "status" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-loader-inline", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "LoaderInline", + "declaration": { + "name": "LoaderInline", + "module": "src/components/reusable/loaders/inline.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-loader-inline", + "declaration": { + "name": "LoaderInline", + "module": "src/components/reusable/loaders/inline.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/loader.ts", + "declarations": [ + { + "kind": "class", + "description": "Loader.", + "name": "Loader", + "members": [ { "kind": "field", - "name": "maxDate", + "name": "stopped", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "attribute": "maxDate" + "default": "false", + "description": "Animation stopped state", + "attribute": "stopped" }, { "kind": "field", - "name": "errorAriaLabel", + "name": "overlay", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "default": "false", + "description": "Display the loader as an overlay", + "attribute": "overlay" }, { - "kind": "field", - "name": "errorTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "kind": "method", + "name": "_emitStart", + "privacy": "private" }, { - "kind": "field", - "name": "warningAriaLabel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "kind": "method", + "name": "_emitStop", + "privacy": "private" + } + ], + "events": [ + { + "description": "Emits when the loader been started.", + "name": "on-start" }, { - "kind": "field", - "name": "warningTitle", + "description": "Emits when the loader has been stopped and all animations have completed.", + "name": "on-stop" + } + ], + "attributes": [ + { + "name": "stopped", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" + "default": "false", + "description": "Animation stopped state", + "fieldName": "stopped" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", + "name": "overlay", "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "renderValidationMessage", - "privacy": "private", - "parameters": [ - { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", - "type": { - "text": "string" - } - } - ] - }, + "text": "boolean" + }, + "default": "false", + "description": "Display the loader as an overlay", + "fieldName": "overlay" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-loader", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Loader", + "declaration": { + "name": "Loader", + "module": "src/components/reusable/loaders/loader.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-loader", + "declaration": { + "name": "Loader", + "module": "src/components/reusable/loaders/loader.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/loaders/skeleton.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "Skeleton", + "members": [ { - "kind": "method", - "name": "getDatepickerClasses" + "kind": "field", + "name": "shape", + "type": { + "text": "'rectangle' | 'circle'" + }, + "default": "'rectangle'", + "description": "Defines the shape of the skeleton element.", + "attribute": "shape", + "reflects": true }, { - "kind": "method", - "name": "reinitializeFlatpickr", - "privacy": "private" + "kind": "field", + "name": "size", + "type": { + "text": "'small' | 'medium' | 'large' | undefined" + }, + "description": "Optional: Predefined size (small, medium, large).", + "attribute": "size" }, { - "kind": "method", - "name": "setupAnchor", - "privacy": "private" + "kind": "field", + "name": "width", + "type": { + "text": "string | undefined" + }, + "description": "Optional: Custom width (overrides size if provided).", + "attribute": "width" }, { - "kind": "method", - "name": "_handleClear", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] + "kind": "field", + "name": "height", + "type": { + "text": "string | undefined" + }, + "description": "Optional: Custom height (overrides size if provided).", + "attribute": "height" }, { - "kind": "method", - "name": "initializeFlatpickr", - "return": { - "type": { - "text": "Promise" - } - } + "kind": "field", + "name": "lines", + "type": { + "text": "number" + }, + "default": "1", + "description": "Sets the number of skeleton lines to display.", + "attribute": "lines" }, { - "kind": "method", - "name": "updateFlatpickrOptions", - "return": { - "type": { - "text": "Promise" - } - } + "kind": "field", + "name": "inline", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets whether to display inline or block.", + "attribute": "inline" }, { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - } + "kind": "field", + "name": "shade", + "type": { + "text": "'light' | 'dark' | string" + }, + "default": "'light'", + "description": "Defines the shade of the skeleton.", + "attribute": "shade" + } + ], + "attributes": [ + { + "name": "shape", + "type": { + "text": "'rectangle' | 'circle'" + }, + "default": "'rectangle'", + "description": "Defines the shape of the skeleton element.", + "fieldName": "shape" }, { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } + "name": "size", + "type": { + "text": "'small' | 'medium' | 'large' | undefined" + }, + "description": "Optional: Predefined size (small, medium, large).", + "fieldName": "size" }, { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } + "name": "width", + "type": { + "text": "string | undefined" + }, + "description": "Optional: Custom width (overrides size if provided).", + "fieldName": "width" }, { - "kind": "method", - "name": "handleClose", - "return": { - "type": { - "text": "Promise" - } - } + "name": "height", + "type": { + "text": "string | undefined" + }, + "description": "Optional: Custom height (overrides size if provided).", + "fieldName": "height" }, { - "kind": "method", - "name": "handleDateChange", - "return": { - "type": { - "text": "Promise" - } + "name": "lines", + "type": { + "text": "number" }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - }, - { - "name": "dateStr", - "type": { - "text": "string" - } - } - ] + "default": "1", + "description": "Sets the number of skeleton lines to display.", + "fieldName": "lines" }, { - "kind": "method", - "name": "setShouldFlatpickrOpen", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "name": "inline", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "boolean" - } - } - ] + "default": "false", + "description": "Sets whether to display inline or block.", + "fieldName": "inline" }, { - "kind": "method", - "name": "closeFlatpickr", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - } - }, - { - "kind": "method", - "name": "preventFlatpickrOpen", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "name": "shade", + "type": { + "text": "'light' | 'dark' | string" }, - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] - }, + "default": "'light'", + "description": "Defines the shade of the skeleton.", + "fieldName": "shade" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-skeleton", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Skeleton", + "declaration": { + "name": "Skeleton", + "module": "src/components/reusable/loaders/skeleton.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-skeleton", + "declaration": { + "name": "Skeleton", + "module": "src/components/reusable/loaders/skeleton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/modal/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Modal", + "declaration": { + "name": "Modal", + "module": "./modal" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/modal/modal.ts", + "declarations": [ + { + "kind": "class", + "description": "Modal.", + "name": "Modal", + "slots": [ { - "kind": "method", - "name": "handleInputClickEvent", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - } + "description": "Slot for modal body content.", + "name": "unnamed" }, { - "kind": "method", - "name": "handleInputFocusEvent", - "privacy": "private", - "return": { - "type": { - "text": "void" - } - } - }, + "description": "Slot for the anchor button content.", + "name": "anchor" + } + ], + "members": [ { - "kind": "method", - "name": "_validate", - "privacy": "private", - "return": { - "type": { - "text": "void" - } + "kind": "field", + "name": "open", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "interacted", - "type": { - "text": "boolean" - } - }, - { - "name": "report", - "type": { - "text": "boolean" - } - } - ] + "default": "false", + "description": "Modal open state.", + "attribute": "open" }, { - "kind": "method", - "name": "_onChange", - "privacy": "private" + "kind": "field", + "name": "size", + "type": { + "text": "string" + }, + "default": "'auto'", + "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", + "attribute": "size" }, { - "kind": "method", - "name": "_handleFormReset", - "privacy": "private" - } - ], - "events": [ - { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" - } - ], - "attributes": [ - { - "name": "label", + "kind": "field", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "fieldName": "label" + "description": "Title/heading text, required.", + "attribute": "titleText" }, { - "name": "locale", + "kind": "field", + "name": "labelText", "type": { - "text": "SupportedLocale" + "text": "string" }, - "default": "'en'", - "fieldName": "locale" + "default": "''", + "description": "Label text, optional.", + "attribute": "labelText" }, { - "name": "dateFormat", + "kind": "field", + "name": "okText", "type": { "text": "string" }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "fieldName": "dateFormat" + "default": "'OK'", + "description": "OK button text.", + "attribute": "okText" }, { - "name": "defaultDate", + "kind": "field", + "name": "cancelText", "type": { - "text": "Date | null" + "text": "string" }, - "default": "null", - "description": "Sets the initial selected date(s)", - "fieldName": "defaultDate" + "default": "'Cancel'", + "description": "Cancel button text.", + "attribute": "cancelText" }, { - "name": "defaultErrorMessage", + "kind": "field", + "name": "destructive", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "attribute": "destructive" }, { - "name": "required", + "kind": "field", + "name": "okDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", - "fieldName": "required" + "description": "Disables the primary button.", + "attribute": "okDisabled" }, { - "name": "size", + "kind": "field", + "name": "secondaryDisabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "default": "false", + "description": "Disables the secondary button.", + "attribute": "secondaryDisabled" }, { - "name": "value", + "kind": "field", + "name": "hideFooter", "type": { - "text": "Date | Date[] | null" + "text": "boolean" }, - "default": "null", - "description": "Sets pre-selected date/time value.", - "fieldName": "value" + "default": "false", + "description": "Hides the footer/action buttons to create a passive modal.", + "attribute": "hideFooter" }, { - "name": "warnText", + "kind": "field", + "name": "secondaryButtonText", "type": { "text": "string" }, - "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" + "default": "'Secondary'", + "description": "Secondary button text.", + "attribute": "secondaryButtonText" }, { - "name": "disable", + "kind": "field", + "name": "showSecondaryButton", "type": { - "text": "(string | number | Date)[]" + "text": "boolean" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "fieldName": "disable" + "default": "false", + "description": "Hides the secondary button.", + "attribute": "showSecondaryButton" }, { - "name": "enable", + "kind": "field", + "name": "hideCancelButton", "type": { - "text": "(string | number | Date)[]" + "text": "boolean" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "fieldName": "enable" + "default": "false", + "description": "Hides the cancel button.", + "attribute": "hideCancelButton" }, { - "name": "mode", + "kind": "field", + "name": "beforeClose", "type": { - "text": "'single' | 'multiple'" + "text": "Function" }, - "default": "'single'", - "description": "Sets flatpickr mode to select single (default), multiple dates.", - "fieldName": "mode" + "description": "Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." }, { - "name": "caption", + "kind": "field", + "name": "closeText", "type": { "text": "string" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "default": "'Close'", + "description": "Close button text.", + "attribute": "closeText" }, { - "name": "datePickerDisabled", + "kind": "method", + "name": "_openModal", + "privacy": "private" + }, + { + "kind": "method", + "name": "_closeModal", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + }, + { + "name": "returnValue", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "_emitCloseEvent", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "events": [ + { + "description": "Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).", + "name": "on-close" + } + ], + "attributes": [ + { + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "fieldName": "datePickerDisabled" + "description": "Modal open state.", + "fieldName": "open" }, { - "name": "twentyFourHourFormat", + "name": "size", "type": { - "text": "boolean | null" + "text": "string" }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "fieldName": "twentyFourHourFormat" + "default": "'auto'", + "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", + "fieldName": "size" }, { - "name": "minDate", + "name": "titleText", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "fieldName": "minDate" + "description": "Title/heading text, required.", + "fieldName": "titleText" }, { - "name": "maxDate", + "name": "labelText", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "fieldName": "maxDate" + "description": "Label text, optional.", + "fieldName": "labelText" }, { - "name": "errorAriaLabel", + "name": "okText", "type": { "text": "string" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" + "default": "'OK'", + "description": "OK button text.", + "fieldName": "okText" }, { - "name": "errorTitle", + "name": "cancelText", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "default": "'Cancel'", + "description": "Cancel button text.", + "fieldName": "cancelText" }, { - "name": "warningAriaLabel", + "name": "destructive", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "fieldName": "destructive" }, { - "name": "warningTitle", + "name": "okDisabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disables the primary button.", + "fieldName": "okDisabled" + }, + { + "name": "secondaryDisabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disables the secondary button.", + "fieldName": "secondaryDisabled" + }, + { + "name": "hideFooter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the footer/action buttons to create a passive modal.", + "fieldName": "hideFooter" + }, + { + "name": "secondaryButtonText", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" + "default": "'Secondary'", + "description": "Secondary button text.", + "fieldName": "secondaryButtonText" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ + "name": "showSecondaryButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the secondary button.", + "fieldName": "showSecondaryButton" + }, { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "name": "hideCancelButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the cancel button.", + "fieldName": "hideCancelButton" + }, + { + "name": "closeText", + "type": { + "text": "string" + }, + "default": "'Close'", + "description": "Close button text.", + "fieldName": "closeText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-date-picker", + "tagName": "kyn-modal", "customElement": true } ], "exports": [ { "kind": "js", - "name": "DatePicker", + "name": "Modal", "declaration": { - "name": "DatePicker", - "module": "src/components/reusable/datePicker/datepicker.ts" + "name": "Modal", + "module": "src/components/reusable/modal/modal.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-date-picker", + "name": "kyn-modal", "declaration": { - "name": "DatePicker", - "module": "src/components/reusable/datePicker/datepicker.ts" + "name": "Modal", + "module": "src/components/reusable/modal/modal.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/datePicker/index.ts", + "path": "src/components/reusable/notification/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "DatePicker", + "name": "Notification", "declaration": { - "name": "DatePicker", - "module": "./datepicker" + "name": "Notification", + "module": "./notification" + } + }, + { + "kind": "js", + "name": "NotificationContainer", + "declaration": { + "name": "NotificationContainer", + "module": "./notificationContainer" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/daterangepicker/daterangepicker.ts", + "path": "src/components/reusable/notification/notification.ts", "declarations": [ { "kind": "class", - "description": "Date Range Picker: uses Flatpickr library, range picker implementation -- `https://flatpickr.js.org/examples/#range-calendar`", - "name": "DateRangePicker", + "description": "Notification component.", + "name": "Notification", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for notification message body.", + "name": "unnamed" + }, + { + "description": "Slot for menu.", + "name": "actions" } ], "members": [ { "kind": "field", - "name": "label", + "name": "notificationTitle", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "attribute": "label" + "description": "Notification Title (Required).", + "attribute": "notificationTitle" }, { "kind": "field", - "name": "locale", + "name": "notificationSubtitle", "type": { - "text": "SupportedLocale" + "text": "string" }, - "default": "'en'", - "description": "Sets and dynamically imports specific l10n calendar localization.", - "attribute": "locale" + "default": "''", + "description": "Notification subtitle.(optional)", + "attribute": "notificationSubtitle" }, { "kind": "field", - "name": "dateFormat", + "name": "timeStamp", "type": { "text": "string" }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "attribute": "dateFormat" - }, - { - "kind": "field", - "name": "defaultDate", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets the initial selected date(s)", - "attribute": "defaultDate" + "default": "''", + "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", + "attribute": "timeStamp" }, { "kind": "field", - "name": "defaultErrorMessage", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" + "description": "Card href link", + "attribute": "href" }, { "kind": "field", - "name": "value", + "name": "tagStatus", "type": { - "text": "[Date | null, Date | null]" + "text": "string" }, - "default": "[null, null]", - "description": "Sets date/time range value.", - "attribute": "value" + "default": "'default'", + "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", + "attribute": "tagStatus" }, { "kind": "field", - "name": "warnText", + "name": "type", "type": { "text": "string" }, - "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" + "default": "'normal'", + "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", + "attribute": "type" }, { "kind": "field", - "name": "disable", + "name": "textStrings", "type": { - "text": "(string | number | Date)[]" + "text": "any" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "attribute": "disable" + "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", + "description": "Customizable text strings.", + "attribute": "textStrings" }, { "kind": "field", - "name": "enable", + "name": "closeBtnDescription", "type": { - "text": "(string | number | Date)[]" + "text": "string" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "attribute": "enable" + "default": "'Close'", + "description": "Close button description (Required to support accessibility).", + "attribute": "closeBtnDescription" }, { "kind": "field", - "name": "caption", + "name": "assistiveNotificationTypeText", "type": { "text": "string" }, "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", + "attribute": "assistiveNotificationTypeText" }, { "kind": "field", - "name": "required", + "name": "notificationRole", "type": { - "text": "boolean" + "text": "'alert' | 'log' | 'status' | undefined" }, - "default": "false", - "description": "Sets date range picker form input value to required/required.", - "attribute": "required" + "description": "Notification role (Required to support accessibility).", + "attribute": "notificationRole" }, { "kind": "field", - "name": "size", + "name": "statusLabel", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" + "default": "'Status'", + "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", + "attribute": "statusLabel" }, { "kind": "field", - "name": "dateRangePickerDisabled", + "name": "unRead", "type": { "text": "boolean" }, "default": "false", - "description": "Sets entire date range picker form element to enabled/disabled.", - "attribute": "dateRangePickerDisabled" + "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", + "attribute": "unRead", + "reflects": true }, { "kind": "field", - "name": "twentyFourHourFormat", + "name": "hideCloseButton", "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": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", + "attribute": "hideCloseButton" }, { "kind": "field", - "name": "minDate", + "name": "timeout", "type": { - "text": "string | number | Date" + "text": "number" }, - "default": "''", - "description": "Sets lower boundary of date range picker date selection.", - "attribute": "minDate" + "default": "8", + "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", + "attribute": "timeout" }, { - "kind": "field", - "name": "maxDate", + "kind": "method", + "name": "renderInnerUI", + "privacy": "private" + }, + { + "kind": "method", + "name": "_close", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleClose", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleCardClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Emit event for clickable notification.", + "name": "on-notification-click" + }, + { + "description": "Emits when an inline/toast notification closes.", + "name": "on-close" + } + ], + "attributes": [ + { + "name": "notificationTitle", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets upper boundary of date range picker date selection.", - "attribute": "maxDate" + "description": "Notification Title (Required).", + "fieldName": "notificationTitle" }, { - "kind": "field", - "name": "errorAriaLabel", + "name": "notificationSubtitle", "type": { "text": "string" }, "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "description": "Notification subtitle.(optional)", + "fieldName": "notificationSubtitle" }, { - "kind": "field", - "name": "errorTitle", + "name": "timeStamp", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", + "fieldName": "timeStamp" }, { - "kind": "field", - "name": "warningAriaLabel", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "description": "Card href link", + "fieldName": "href" }, { - "kind": "field", - "name": "warningTitle", + "name": "tagStatus", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" + "default": "'default'", + "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", + "fieldName": "tagStatus" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", + "name": "type", "type": { - "text": "object" - } + "text": "string" + }, + "default": "'normal'", + "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", + "fieldName": "type" }, { - "kind": "method", - "name": "renderValidationMessage", - "privacy": "private", - "parameters": [ - { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", - "type": { - "text": "string" - } - } - ] + "name": "textStrings", + "type": { + "text": "any" + }, + "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", + "description": "Customizable text strings.", + "fieldName": "textStrings" }, { - "kind": "method", - "name": "_handleClear", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] + "name": "closeBtnDescription", + "type": { + "text": "string" + }, + "default": "'Close'", + "description": "Close button description (Required to support accessibility).", + "fieldName": "closeBtnDescription" }, { - "kind": "method", - "name": "getDateRangePickerClasses" + "name": "assistiveNotificationTypeText", + "type": { + "text": "string" + }, + "default": "''", + "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", + "fieldName": "assistiveNotificationTypeText" }, { - "kind": "method", - "name": "reinitializeFlatpickr", - "privacy": "private" + "name": "notificationRole", + "type": { + "text": "'alert' | 'log' | 'status' | undefined" + }, + "description": "Notification role (Required to support accessibility).", + "fieldName": "notificationRole" }, { - "kind": "method", - "name": "setupAnchor", - "privacy": "private" + "name": "statusLabel", + "type": { + "text": "string" + }, + "default": "'Status'", + "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", + "fieldName": "statusLabel" }, { - "kind": "method", - "name": "initializeFlatpickr", - "privacy": "private" + "name": "unRead", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", + "fieldName": "unRead" }, { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } + "name": "hideCloseButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", + "fieldName": "hideCloseButton" }, { - "kind": "method", - "name": "updateFlatpickrOptions" - }, + "name": "timeout", + "type": { + "text": "number" + }, + "default": "8", + "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", + "fieldName": "timeout" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-notification", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Notification", + "declaration": { + "name": "Notification", + "module": "src/components/reusable/notification/notification.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-notification", + "declaration": { + "name": "Notification", + "module": "src/components/reusable/notification/notification.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/notification/notificationContainer.ts", + "declarations": [ + { + "kind": "class", + "description": "Notification container component for Toast notification.\nUsage is limited for ..", + "name": "NotificationContainer", + "slots": [ { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - } - }, + "description": "Slot for component.", + "name": "unnamed" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-notification-container", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "NotificationContainer", + "declaration": { + "name": "NotificationContainer", + "module": "src/components/reusable/notification/notificationContainer.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-notification-container", + "declaration": { + "name": "NotificationContainer", + "module": "src/components/reusable/notification/notificationContainer.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/numberInput/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "NumberInput", + "declaration": { + "name": "NumberInput", + "module": "./numberInput" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/numberInput/numberInput.ts", + "declarations": [ + { + "kind": "class", + "description": "Number input.", + "name": "NumberInput", + "slots": [ { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } + "description": "Slot for tooltip.", + "name": "tooltip" + } + ], + "members": [ + { + "kind": "field", + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "attribute": "label" }, { - "kind": "method", - "name": "handleDateChange", - "return": { - "type": { - "text": "Promise" - } + "kind": "field", + "name": "size", + "type": { + "text": "string" }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - } - ] + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { - "kind": "method", - "name": "handleClose" + "kind": "field", + "name": "value", + "type": { + "text": "number" + }, + "default": "0", + "description": "Input value.", + "attribute": "value" }, { - "kind": "method", - "name": "updateSelectedDateRangeAria", - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - } - ] + "kind": "field", + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "attribute": "placeholder" }, { - "kind": "method", - "name": "setShouldFlatpickrOpen", - "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "boolean" - } - } - ] + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Makes the input required.", + "attribute": "required" }, { - "kind": "method", - "name": "closeFlatpickr", - "privacy": "private" + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Input disabled state.", + "attribute": "disabled" }, { - "kind": "method", - "name": "preventFlatpickrOpen", + "kind": "field", + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" + }, + { + "kind": "field", + "name": "max", + "type": { + "text": "number" + }, + "description": "Maximum value.", + "attribute": "max" + }, + { + "kind": "field", + "name": "min", + "type": { + "text": "number" + }, + "description": "Minimum value.", + "attribute": "min" + }, + { + "kind": "field", + "name": "step", + "type": { + "text": "number" + }, + "default": "1", + "description": "Step value.", + "attribute": "step" + }, + { + "kind": "field", + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Visually hide the label.", + "attribute": "hideLabel" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n subtract: 'Subtract',\n add: 'Add',\n error: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, + { + "kind": "method", + "name": "_sizeMap", "privacy": "private", + "return": { + "type": { + "text": "'small' | 'medium' | 'large'" + } + }, "parameters": [ { - "name": "event", + "name": "size", "type": { - "text": "Event" + "text": "string" } } ] }, { "kind": "method", - "name": "handleInputClickEvent", + "name": "_handleSubtract", "privacy": "private" }, { "kind": "method", - "name": "handleInputFocusEvent", + "name": "_handleAdd", "privacy": "private" }, { "kind": "method", - "name": "_validate", + "name": "_handleInput", "privacy": "private", - "return": { - "type": { - "text": "void" + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } } - }, + ] + }, + { + "kind": "method", + "name": "_emitValue", + "privacy": "private", + "parameters": [ + { + "name": "e", + "optional": true, + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", "parameters": [ { "name": "interacted", "type": { - "text": "boolean" + "text": "Boolean" } }, { "name": "report", "type": { - "text": "boolean" + "text": "Boolean" } } ] - }, - { - "kind": "method", - "name": "_onChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleFormReset", - "privacy": "private" } ], "events": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" + "description": "Captures the input event and emits the value and original event details.", + "name": "on-input" } ], "attributes": [ @@ -4508,76 +5209,49 @@ "fieldName": "label" }, { - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets and dynamically imports specific l10n calendar localization.", - "fieldName": "locale" - }, - { - "name": "dateFormat", - "type": { - "text": "string" - }, - "default": "'Y-m-d'", - "description": "Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`).", - "fieldName": "dateFormat" - }, - { - "name": "defaultDate", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets the initial selected date(s)", - "fieldName": "defaultDate" - }, - { - "name": "defaultErrorMessage", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { "name": "value", "type": { - "text": "[Date | null, Date | null]" + "text": "number" }, - "default": "[null, null]", - "description": "Sets date/time range value.", + "default": "0", + "description": "Input value.", "fieldName": "value" }, { - "name": "warnText", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" + "description": "Input placeholder.", + "fieldName": "placeholder" }, { - "name": "disable", + "name": "required", "type": { - "text": "(string | number | Date)[]" + "text": "boolean" }, - "default": "[]", - "description": "Sets flatpickr options setting to disable specific dates.", - "fieldName": "disable" + "default": "false", + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "enable", + "name": "disabled", "type": { - "text": "(string | number | Date)[]" + "text": "boolean" }, - "default": "[]", - "description": "Sets flatpickr options setting to enable specific dates.", - "fieldName": "enable" + "default": "false", + "description": "Input disabled state.", + "fieldName": "disabled" }, { "name": "caption", @@ -4585,107 +5259,51 @@ "text": "string" }, "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", + "description": "Optional text beneath the input.", "fieldName": "caption" }, { - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets date range picker form input value to required/required.", - "fieldName": "required" - }, - { - "name": "size", + "name": "max", "type": { - "text": "string" + "text": "number" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" + "description": "Maximum value.", + "fieldName": "max" }, { - "name": "dateRangePickerDisabled", + "name": "min", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Sets entire date range picker form element to enabled/disabled.", - "fieldName": "dateRangePickerDisabled" + "description": "Minimum value.", + "fieldName": "min" }, { - "name": "twentyFourHourFormat", + "name": "step", "type": { - "text": "boolean | null" + "text": "number" }, - "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": "1", + "description": "Step value.", + "fieldName": "step" }, { - "name": "minDate", + "name": "hideLabel", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets lower boundary of date range picker date selection.", - "fieldName": "minDate" + "default": "false", + "description": "Visually hide the label.", + "fieldName": "hideLabel" }, { - "name": "maxDate", - "type": { - "text": "string | number | Date" - }, - "default": "''", - "description": "Sets upper boundary of date range picker date selection.", - "fieldName": "maxDate" - }, - { - "name": "errorAriaLabel", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" - }, - { - "name": "errorTitle", - "type": { - "text": "string" - }, - "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": "warningTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ { "name": "FormMixin", "module": "/src/common/mixins/form-input" @@ -4695,113 +5313,67 @@ "name": "LitElement", "package": "lit" }, - "tagName": "kyn-date-range-picker", + "tagName": "kyn-number-input", "customElement": true } ], "exports": [ { "kind": "js", - "name": "DateRangePicker", + "name": "NumberInput", "declaration": { - "name": "DateRangePicker", - "module": "src/components/reusable/daterangepicker/daterangepicker.ts" + "name": "NumberInput", + "module": "src/components/reusable/numberInput/numberInput.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-date-range-picker", + "name": "kyn-number-input", "declaration": { - "name": "DateRangePicker", - "module": "src/components/reusable/daterangepicker/daterangepicker.ts" + "name": "NumberInput", + "module": "src/components/reusable/numberInput/numberInput.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/daterangepicker/index.ts", + "path": "src/components/reusable/overflowMenu/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "DateRangePicker", + "name": "OverflowMenu", "declaration": { - "name": "DateRangePicker", - "module": "./daterangepicker" + "name": "OverflowMenu", + "module": "./overflowMenu" + } + }, + { + "kind": "js", + "name": "OverflowMenuItem", + "declaration": { + "name": "OverflowMenuItem", + "module": "./overflowMenuItem" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/dropdown/dropdown.ts", + "path": "src/components/reusable/overflowMenu/overflowMenu.ts", "declarations": [ { "kind": "class", - "description": "Dropdown, single select.", - "name": "Dropdown", + "description": "Overflow Menu.", + "name": "OverflowMenu", "slots": [ { - "description": "Slot for dropdown options.", + "description": "Slot for overflow menu items.", "name": "unnamed" - }, - { - "description": "Slot for tooltip.", - "name": "tooltip" } ], "members": [ - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, - { - "kind": "field", - "name": "inline", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Dropdown inline style type.", - "attribute": "inline" - }, - { - "kind": "field", - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" - }, - { - "kind": "field", - "name": "placeholder", - "type": { - "text": "string" - }, - "default": "''", - "description": "Dropdown placeholder.", - "attribute": "placeholder" - }, { "kind": "field", "name": "open", @@ -4809,150 +5381,80 @@ "text": "boolean" }, "default": "false", - "description": "Listbox/drawer open state.", + "description": "Menu open state.", "attribute": "open" }, { "kind": "field", - "name": "searchable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the dropdown searchable.", - "attribute": "searchable" - }, - { - "kind": "field", - "name": "filterSearch", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Searchable variant filters results.", - "attribute": "filterSearch" - }, - { - "kind": "field", - "name": "multiple", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enabled multi-select functionality.", - "attribute": "multiple" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the dropdown required.", - "attribute": "required" - }, - { - "kind": "field", - "name": "disabled", + "name": "anchorRight", "type": { "text": "boolean" }, "default": "false", - "description": "Dropdown disabled state.", - "attribute": "disabled" + "description": "Anchors the menu to the right of the button.", + "attribute": "anchorRight" }, { "kind": "field", - "name": "hideTags", + "name": "verticalDots", "type": { "text": "boolean" }, "default": "false", - "description": "Hide the tags below multi-select.", - "attribute": "hideTags" + "description": "3 dots vertical orientation.", + "attribute": "verticalDots" }, { "kind": "field", - "name": "selectAll", + "name": "fixed", "type": { "text": "boolean" }, "default": "false", - "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", - "attribute": "selectAll" - }, - { - "kind": "field", - "name": "selectAllText", - "type": { - "text": "string" - }, - "default": "'Select all'", - "description": "\"Select all\" text customization.", - "attribute": "selectAllText" - }, - { - "kind": "field", - "name": "menuMinWidth", - "type": { - "text": "string" - }, - "default": "'initial'", - "description": "Menu CSS min-width value.", - "attribute": "menuMinWidth" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n selectedOptions: 'List of selected options',\n required: 'Required',\n error: 'Error',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", + "attribute": "fixed" }, { "kind": "field", - "name": "searchText", + "name": "assistiveText", "type": { "text": "string" }, - "default": "''", - "description": "Search input value.", - "attribute": "searchText" + "default": "'Toggle Menu'", + "description": "Button assistive text..", + "attribute": "assistiveText" }, { "kind": "method", - "name": "handleSlotChange", + "name": "_emitToggleEvent", "privacy": "private" }, { "kind": "method", - "name": "handleClick", + "name": "toggleMenu", "privacy": "private" }, { "kind": "method", - "name": "_handleLabelClick", + "name": "_positionMenu", "privacy": "private" }, { "kind": "method", - "name": "handleButtonKeydown", + "name": "handleClickOut", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" + "text": "Event" } } ] }, { "kind": "method", - "name": "handleListKeydown", + "name": "handleEscapePress", "privacy": "private", "parameters": [ { @@ -4965,7 +5467,7 @@ }, { "kind": "method", - "name": "handleListBlur", + "name": "handleKeyDown", "privacy": "private", "parameters": [ { @@ -4978,154 +5480,164 @@ }, { "kind": "method", - "name": "handleKeyboard", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - }, - { - "name": "keyCode", - "type": { - "text": "number" - } - }, - { - "name": "target", - "type": { - "text": "string" - } - } - ] + "name": "getMenuItems" }, { "kind": "method", - "name": "handleClearMultiple", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, + "name": "getMenu" + } + ], + "events": [ { - "kind": "method", - "name": "handleTagClear", - "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - } - } - ] + "description": "Capture the open/close event and emits the new state.", + "name": "on-toggle" + } + ], + "attributes": [ + { + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Menu open state.", + "fieldName": "open" }, { - "kind": "method", - "name": "handleClear", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "anchorRight", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Anchors the menu to the right of the button.", + "fieldName": "anchorRight" }, { - "kind": "method", - "name": "handleSearchClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "verticalDots", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "3 dots vertical orientation.", + "fieldName": "verticalDots" }, { - "kind": "method", - "name": "handleButtonBlur", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "fixed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", + "fieldName": "fixed" }, { - "kind": "method", - "name": "handleSearchBlur", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "assistiveText", + "type": { + "text": "string" + }, + "default": "'Toggle Menu'", + "description": "Button assistive text..", + "fieldName": "assistiveText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-overflow-menu", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "OverflowMenu", + "declaration": { + "name": "OverflowMenu", + "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-overflow-menu", + "declaration": { + "name": "OverflowMenu", + "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/overflowMenu/overflowMenuItem.ts", + "declarations": [ + { + "kind": "class", + "description": "Overflow Menu.", + "name": "OverflowMenuItem", + "slots": [ + { + "description": "Slot for item text.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "href", + "type": { + "text": "string" + }, + "default": "''", + "description": "Makes the item a link.", + "attribute": "href" }, { - "kind": "method", - "name": "handleSearchKeydown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "kind": "field", + "name": "destructive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Adds destructive styles.", + "attribute": "destructive" }, { - "kind": "method", - "name": "handleSearchInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Item disabled state.", + "attribute": "disabled" }, { - "kind": "method", - "name": "_updateSelectedOptions", - "privacy": "private" + "kind": "field", + "name": "description", + "type": { + "text": "string" + }, + "default": "''", + "description": "Item description text for screen reader's", + "attribute": "description" }, { "kind": "method", - "name": "_handleClick", + "name": "handleClick", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" + "text": "Event" } } ] }, { "kind": "method", - "name": "_handleBlur", + "name": "handleKeyDown", "privacy": "private", "parameters": [ { @@ -5138,178 +5650,34 @@ }, { "kind": "method", - "name": "_handleClickOut", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] - }, + "name": "checkOverflow", + "privacy": "private" + } + ], + "events": [ { - "kind": "method", - "name": "updateValue", - "privacy": "private", - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - } - }, - { - "name": "selected", - "default": "false" - } - ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" - } - } - ] - }, - { - "kind": "method", - "name": "emitValue", - "privacy": "private" - }, - { - "kind": "method", - "name": "_emitSearch", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateTags", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateOptions", - "privacy": "private" - } - ], - "events": [ - { - "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" + "description": "Captures the click event and emits the original event details.", + "name": "on-click" } ], "attributes": [ { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Dropdown size/height. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, - { - "name": "inline", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Dropdown inline style type.", - "fieldName": "inline" - }, - { - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" - }, - { - "name": "placeholder", + "name": "href", "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" + "description": "Makes the item a link.", + "fieldName": "href" }, { - "name": "required", + "name": "destructive", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the dropdown required.", - "fieldName": "required" + "description": "Adds destructive styles.", + "fieldName": "destructive" }, { "name": "disabled", @@ -5317,1144 +5685,1746 @@ "text": "boolean" }, "default": "false", - "description": "Dropdown disabled state.", + "description": "Item disabled state.", "fieldName": "disabled" }, { - "name": "hideTags", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hide the tags below multi-select.", - "fieldName": "hideTags" - }, - { - "name": "selectAll", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Adds a \"Select all\" option to the top of a multi-select dropdown.", - "fieldName": "selectAll" - }, - { - "name": "selectAllText", - "type": { - "text": "string" - }, - "default": "'Select all'", - "description": "\"Select all\" text customization.", - "fieldName": "selectAllText" - }, - { - "name": "menuMinWidth", - "type": { - "text": "string" - }, - "default": "'initial'", - "description": "Menu CSS min-width value.", - "fieldName": "menuMinWidth" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" - }, - { - "name": "searchText", + "name": "description", "type": { "text": "string" }, "default": "''", - "description": "Search input value.", - "fieldName": "searchText" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "description": "Item description text for screen reader's", + "fieldName": "description" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-dropdown", + "tagName": "kyn-overflow-menu-item", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Dropdown", + "name": "OverflowMenuItem", "declaration": { - "name": "Dropdown", - "module": "src/components/reusable/dropdown/dropdown.ts" + "name": "OverflowMenuItem", + "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-dropdown", + "name": "kyn-overflow-menu-item", "declaration": { - "name": "Dropdown", - "module": "src/components/reusable/dropdown/dropdown.ts" + "name": "OverflowMenuItem", + "module": "src/components/reusable/overflowMenu/overflowMenuItem.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 - } - ], + "path": "src/components/reusable/pagetitle/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "DropdownCategory", - "declaration": { - "name": "DropdownCategory", - "module": "src/components/reusable/dropdown/dropdownCategory.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-dropdown-category", + "name": "PageTitle", "declaration": { - "name": "DropdownCategory", - "module": "src/components/reusable/dropdown/dropdownCategory.ts" + "name": "PageTitle", + "module": "./pageTitle" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/dropdown/dropdownOption.ts", + "path": "src/components/reusable/pagetitle/pageTitle.ts", "declarations": [ { "kind": "class", - "description": "Dropdown option.", - "name": "DropdownOption", + "description": "Page Title", + "name": "PageTitle", "slots": [ { - "description": "Slot for option text.", - "name": "unnamed" + "description": "Slot for icon. Use size 56 * 56 as per UX guidelines.", + "name": "icon" } ], "members": [ { "kind": "field", - "name": "value", + "name": "headLine", "type": { "text": "string" }, "default": "''", - "description": "Option value.", - "attribute": "value" + "description": "Headline text.", + "attribute": "headLine" }, { "kind": "field", - "name": "disabled", + "name": "pageTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option disabled state.", - "attribute": "disabled" + "default": "''", + "description": "Page title text (required).", + "attribute": "pageTitle" }, { "kind": "field", - "name": "indeterminate", + "name": "subTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "attribute": "indeterminate", - "reflects": true - }, - { - "kind": "method", - "name": "handleSlotChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "handleClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] + "default": "''", + "description": "Page subtitle text.", + "attribute": "subTitle" }, { - "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" + "kind": "field", + "name": "type", + "type": { + "text": "string" + }, + "default": "'primary'", + "description": "Type of page title `'primary'` & `'secondary'`.", + "attribute": "type" } ], "attributes": [ { - "name": "value", + "name": "headLine", "type": { "text": "string" }, "default": "''", - "description": "Option value.", - "fieldName": "value" + "description": "Headline text.", + "fieldName": "headLine" }, { - "name": "disabled", + "name": "pageTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "Page title text (required).", + "fieldName": "pageTitle" }, { - "name": "indeterminate", + "name": "subTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Determines whether the checkbox is in an indeterminate state.", - "fieldName": "indeterminate" + "default": "''", + "description": "Page subtitle text.", + "fieldName": "subTitle" + }, + { + "name": "type", + "type": { + "text": "string" + }, + "default": "'primary'", + "description": "Type of page title `'primary'` & `'secondary'`.", + "fieldName": "type" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-dropdown-option", + "tagName": "kyn-page-title", "customElement": true } ], "exports": [ { "kind": "js", - "name": "DropdownOption", + "name": "PageTitle", "declaration": { - "name": "DropdownOption", - "module": "src/components/reusable/dropdown/dropdownOption.ts" + "name": "PageTitle", + "module": "src/components/reusable/pagetitle/pageTitle.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-dropdown-option", - "declaration": { - "name": "DropdownOption", - "module": "src/components/reusable/dropdown/dropdownOption.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/dropdown/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": "kyn-page-title", "declaration": { - "name": "DropdownCategory", - "module": "./dropdownCategory" + "name": "PageTitle", + "module": "src/components/reusable/pagetitle/pageTitle.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/errorBlock/errorBlock.ts", + "path": "src/components/reusable/pagination/Pagination.ts", "declarations": [ { "kind": "class", - "description": "Error block.", - "name": "ErrorBlock", - "slots": [ + "description": "`kyn-pagination` Web Component.\n\nA component that provides pagination functionality, enabling the user to\nnavigate through large datasets by splitting them into discrete chunks.\nIntegrates with other utility components like items range display, page size dropdown,\nand navigation buttons.", + "name": "Pagination", + "members": [ { - "description": "Slot for the error description.", - "name": "unnamed" + "kind": "field", + "name": "count", + "type": { + "text": "number" + }, + "default": "0", + "description": "Total number of items that need pagination.", + "attribute": "count", + "reflects": true }, { - "description": "Slot for the error image.", - "name": "image" + "kind": "field", + "name": "pageNumber", + "type": { + "text": "number" + }, + "default": "1", + "description": "Current active page number.", + "attribute": "pageNumber", + "reflects": true }, { - "description": "Slot for the action buttons.", - "name": "actions" - } - ], - "members": [ + "kind": "field", + "name": "pageSize", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of items displayed per page.", + "attribute": "pageSize", + "reflects": true + }, { "kind": "field", - "name": "titleText", + "name": "pageSizeOptions", "type": { - "text": "string" + "text": "number[]" }, - "default": "''", - "description": "Title text", - "attribute": "titleText" - } - ], - "attributes": [ + "default": "[5, 10, 20, 30, 40, 50, 100]", + "description": "Available options for the page size.", + "attribute": "pageSizeOptions" + }, { - "name": "titleText", + "kind": "field", + "name": "_numberOfPages", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Title text", - "fieldName": "titleText" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-error-block", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "ErrorBlock", - "declaration": { - "name": "ErrorBlock", - "module": "src/components/reusable/errorBlock/errorBlock.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-error-block", - "declaration": { - "name": "ErrorBlock", - "module": "src/components/reusable/errorBlock/errorBlock.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/errorBlock/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "ErrorBlock", - "declaration": { - "name": "ErrorBlock", - "module": "./errorBlock" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/globalFilter/globalFilter.ts", - "declarations": [ - { - "kind": "class", - "description": "Global Filter bar.", - "name": "GlobalFilter", - "slots": [ + "default": "1", + "description": "Number of pages." + }, { - "description": "Left slot, intended for search input and modal.", - "name": "unnamed" + "kind": "field", + "name": "pageSizeDropdownLabel", + "default": "PAGE_SIZE_LABEL", + "description": "Label for the page size dropdown. Required for accessibility.", + "attribute": "pageSizeDropdownLabel" }, { - "description": "Right slot, intended for action buttons and overflow menu.", - "name": "actions" + "kind": "field", + "name": "hideItemsRange", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the items range display.", + "attribute": "hideItemsRange" }, { - "description": "Slot below the filter bar, for tag group.", - "name": "tags" + "kind": "field", + "name": "hidePageSizeDropdown", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the page size dropdown.", + "attribute": "hidePageSizeDropdown" + }, + { + "kind": "field", + "name": "hideNavigationButtons", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the navigation buttons.", + "attribute": "hideNavigationButtons" + }, + { + "kind": "field", + "name": "textStrings", + "type": { + "text": "object" + }, + "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", + "description": "Customizable text strings", + "attribute": "textStrings" + }, + { + "kind": "method", + "name": "handlePageSizeChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "CustomEvent" + }, + "description": "The emitted custom event with the selected page size." + } + ], + "description": "Handler for the event when the page size is changed by the user.\nUpdates the `pageSize` and resets the `pageNumber` to 1." + }, + { + "kind": "method", + "name": "handlePageNumberChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "CustomEvent" + }, + "description": "The emitted custom event with the selected page number." + } + ], + "description": "Handler for the event when the page number is changed by the user.\nUpdates the `pageNumber`." + } + ], + "events": [ + { + "description": "Dispatched when the page size changes.", + "name": "on-page-size-change" + }, + { + "description": "Dispatched when the currently active page changes.", + "name": "on-page-number-change" + } + ], + "attributes": [ + { + "name": "count", + "type": { + "text": "number" + }, + "default": "0", + "description": "Total number of items that need pagination.", + "fieldName": "count" + }, + { + "name": "pageNumber", + "type": { + "text": "number" + }, + "default": "1", + "description": "Current active page number.", + "fieldName": "pageNumber" + }, + { + "name": "pageSize", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of items displayed per page.", + "fieldName": "pageSize" + }, + { + "name": "pageSizeOptions", + "type": { + "text": "number[]" + }, + "default": "[5, 10, 20, 30, 40, 50, 100]", + "description": "Available options for the page size.", + "fieldName": "pageSizeOptions" + }, + { + "name": "pageSizeDropdownLabel", + "default": "PAGE_SIZE_LABEL", + "description": "Label for the page size dropdown. Required for accessibility.", + "fieldName": "pageSizeDropdownLabel" + }, + { + "name": "hideItemsRange", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the items range display.", + "fieldName": "hideItemsRange" + }, + { + "name": "hidePageSizeDropdown", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the page size dropdown.", + "fieldName": "hidePageSizeDropdown" + }, + { + "name": "hideNavigationButtons", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the navigation buttons.", + "fieldName": "hideNavigationButtons" + }, + { + "name": "textStrings", + "type": { + "text": "object" + }, + "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", + "description": "Customizable text strings", + "fieldName": "textStrings" } ], - "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-global-filter", + "tagName": "kyn-pagination", "customElement": true } ], "exports": [ { "kind": "js", - "name": "GlobalFilter", + "name": "Pagination", "declaration": { - "name": "GlobalFilter", - "module": "src/components/reusable/globalFilter/globalFilter.ts" + "name": "Pagination", + "module": "src/components/reusable/pagination/Pagination.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-global-filter", + "name": "kyn-pagination", "declaration": { - "name": "GlobalFilter", - "module": "src/components/reusable/globalFilter/globalFilter.ts" + "name": "Pagination", + "module": "src/components/reusable/pagination/Pagination.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/globalFilter/index.ts", + "path": "src/components/reusable/pagination/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "GlobalFilter", + "name": "Pagination", "declaration": { - "name": "GlobalFilter", - "module": "./globalFilter" + "name": "Pagination", + "module": "./Pagination" } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/inlineCodeView/index.ts", - "declarations": [], - "exports": [ + }, { "kind": "js", - "name": "InlineCodeView", + "name": "PaginationItemsRange", "declaration": { - "name": "InlineCodeView", - "module": "./inlineCodeView" + "name": "PaginationItemsRange", + "module": "./pagination-items-range" } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/inlineCodeView/inlineCodeView.ts", - "declarations": [ + }, { - "kind": "class", - "description": "`` component to display code snippets inline within HTML content.", - "name": "InlineCodeView", - "slots": [ - { - "description": "inline code snippet slot.", - "name": "unnamed" - } - ], - "members": [ + "kind": "js", + "name": "PaginationPageSizeDropdown", + "declaration": { + "name": "PaginationPageSizeDropdown", + "module": "./pagination-page-size-dropdown" + } + }, + { + "kind": "js", + "name": "PaginationNavigationButtons", + "declaration": { + "name": "PaginationNavigationButtons", + "module": "./pagination-navigation-buttons" + } + }, + { + "kind": "js", + "name": "PaginationSkeleton", + "declaration": { + "name": "PaginationSkeleton", + "module": "./pagination.skeleton" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/pagination/pagination-items-range.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-pagination-items-range` Web Component.\n\nThis component is responsible for displaying the range of items being displayed\nin the context of pagination. It shows which items (by number) are currently visible\nand the total number of items.", + "name": "PaginationItemsRange", + "members": [ + { + "kind": "field", + "name": "count", + "type": { + "text": "number" + }, + "default": "0", + "description": "Total number of items.", + "attribute": "count", + "reflects": true + }, + { + "kind": "field", + "name": "pageNumber", + "type": { + "text": "number" + }, + "default": "1", + "description": "Current page number being displayed.", + "attribute": "pageNumber", + "reflects": true + }, + { + "kind": "field", + "name": "pageSize", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of items displayed per page.", + "attribute": "pageSize", + "reflects": true + }, + { + "kind": "method", + "name": "itemsRangeText", + "privacy": "private", + "return": { + "type": { + "text": "string" + } + }, + "parameters": [ + { + "name": "isMobile", + "type": { + "text": "Boolean" + } + } + ] + } + ], + "attributes": [ + { + "name": "count", + "type": { + "text": "number" + }, + "default": "0", + "description": "Total number of items.", + "fieldName": "count" + }, + { + "name": "pageNumber", + "type": { + "text": "number" + }, + "default": "1", + "description": "Current page number being displayed.", + "fieldName": "pageNumber" + }, + { + "name": "pageSize", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of items displayed per page.", + "fieldName": "pageSize" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-pagination-items-range", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "PaginationItemsRange", + "declaration": { + "name": "PaginationItemsRange", + "module": "src/components/reusable/pagination/pagination-items-range.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-pagination-items-range", + "declaration": { + "name": "PaginationItemsRange", + "module": "src/components/reusable/pagination/pagination-items-range.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/pagination/pagination-navigation-buttons.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-pagination-navigation-buttons` Web Component.\n\nThis component provides navigational controls for pagination.\nIt includes back and next buttons, along with displaying the current page and total pages.", + "name": "PaginationNavigationButtons", + "members": [ + { + "kind": "field", + "name": "pageNumber", + "type": { + "text": "number" + }, + "default": "1", + "attribute": "pageNumber", + "reflects": true + }, + { + "kind": "field", + "name": "numberOfPages", + "type": { + "text": "number" + }, + "default": "1", + "attribute": "numberOfPages", + "reflects": true + }, + { + "kind": "field", + "name": "SMALLEST_PAGE_NUMBER", + "type": { + "text": "number" + }, + "privacy": "private", + "readonly": true, + "default": "1" + }, + { + "kind": "method", + "name": "handleButtonClick", + "privacy": "private", + "parameters": [ + { + "name": "next", + "type": { + "text": "boolean" + }, + "description": "If true, will move to the next page, otherwise to the previous page" + } + ], + "description": "Handles the button click event, either moving to the next page or previous page" + } + ], + "events": [ + { + "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" + }, + { + "kind": "field", + "name": "hideNavigationButtons", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the navigation buttons.", + "attribute": "hideNavigationButtons" + } + ], + "attributes": [ + { + "name": "hideItemsRange", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the items range display.", + "fieldName": "hideItemsRange" + }, + { + "name": "hidePageSizeDropdown", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the page size dropdown.", + "fieldName": "hidePageSizeDropdown" + }, + { + "name": "hideNavigationButtons", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to hide the navigation buttons.", + "fieldName": "hideNavigationButtons" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-pagination-skeleton", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "PaginationSkeleton", + "declaration": { + "name": "PaginationSkeleton", + "module": "src/components/reusable/pagination/pagination.skeleton.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-pagination-skeleton", + "declaration": { + "name": "PaginationSkeleton", + "module": "src/components/reusable/pagination/pagination.skeleton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/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": "`` -- progress bar status indicator component.", + "name": "ProgressBar", + "slots": [ + { + "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" + }, + { + "kind": "field", + "name": "max", + "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" + }, + { + "kind": "field", + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Visually hide the label.", + "attribute": "hideLabel" + }, + { + "kind": "method", + "name": "renderProgressBar", + "privacy": "private", + "parameters": [ + { + "name": "currentStatus", + "type": { + "text": "ProgressStatus" + } + }, + { + "name": "currentValue", + "type": { + "text": "number | null" + } + } + ] + }, + { + "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" + }, + { + "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" + }, { - "kind": "field", - "name": "darkTheme", + "name": "max", "type": { - "text": "'light' | 'dark'" + "text": "number" }, - "default": "'dark'", - "description": "Sets background and text theming.", - "attribute": "darkTheme" + "default": "100", + "description": "Sets manual max value (default = 100).", + "fieldName": "max" }, { - "kind": "field", - "name": "snippetFontSize", + "name": "label", "type": { - "text": "number" + "text": "string" }, - "default": "14", - "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", - "attribute": "snippetFontSize" - } - ], - "attributes": [ + "default": "''", + "description": "Sets optional progress bar label.", + "fieldName": "label" + }, { - "name": "darkTheme", + "name": "helperText", "type": { - "text": "'light' | 'dark'" + "text": "string" }, - "default": "'dark'", - "description": "Sets background and text theming.", - "fieldName": "darkTheme" + "default": "''", + "description": "Sets optional helper text that appears underneath progress bar element.", + "fieldName": "helperText" }, { - "name": "snippetFontSize", + "name": "unit", "type": { - "text": "number" + "text": "string" }, - "default": "14", - "description": "Font size value (px) to match code snippet font-size of surrounding text (min, default 14px).", - "fieldName": "snippetFontSize" + "default": "''", + "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", + "fieldName": "unit" + }, + { + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Visually hide the label.", + "fieldName": "hideLabel" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-inline-code-view", + "tagName": "kyn-progress-bar", "customElement": true } ], "exports": [ { "kind": "js", - "name": "InlineCodeView", + "name": "ProgressBar", "declaration": { - "name": "InlineCodeView", - "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + "name": "ProgressBar", + "module": "src/components/reusable/progressBar/progressBar.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-inline-code-view", + "name": "kyn-progress-bar", "declaration": { - "name": "InlineCodeView", - "module": "src/components/reusable/inlineCodeView/inlineCodeView.ts" + "name": "ProgressBar", + "module": "src/components/reusable/progressBar/progressBar.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/loaders/index.ts", + "path": "src/components/reusable/radioButton/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Loader", - "declaration": { - "name": "Loader", - "module": "./loader" - } - }, - { - "kind": "js", - "name": "LoaderInline", + "name": "RadioButton", "declaration": { - "name": "LoaderInline", - "module": "./inline" + "name": "RadioButton", + "module": "./radioButton" } }, { "kind": "js", - "name": "Skeleton", + "name": "RadioButtonGroup", "declaration": { - "name": "Skeleton", - "module": "./skeleton" + "name": "RadioButtonGroup", + "module": "./radioButtonGroup" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/loaders/inline.ts", + "path": "src/components/reusable/radioButton/radioButton.ts", "declarations": [ { "kind": "class", - "description": "Inline Loader.", - "name": "LoaderInline", + "description": "Radio button.", + "name": "RadioButton", "slots": [ { - "description": "Slot for text/description.", + "description": "Slot for label text.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "status", - "type": { - "text": "string" - }, - "default": "'active'", - "description": "Status. Can be `active`, `inactive`, `success`, `error`.", - "attribute": "status" - }, - { - "kind": "method", - "name": "_emitStart", - "privacy": "private" - }, - { - "kind": "method", - "name": "_emitStop", - "privacy": "private" - } - ], - "events": [ - { - "description": "Emits when the loader been started.", - "name": "on-start" - }, - { - "description": "Emits when the loader has been stopped and all animations have completed.", - "name": "on-stop" - } - ], - "attributes": [ - { - "name": "status", + "name": "value", "type": { "text": "string" }, - "default": "'active'", - "description": "Status. Can be `active`, `inactive`, `success`, `error`.", - "fieldName": "status" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-loader-inline", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "LoaderInline", - "declaration": { - "name": "LoaderInline", - "module": "src/components/reusable/loaders/inline.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-loader-inline", - "declaration": { - "name": "LoaderInline", - "module": "src/components/reusable/loaders/inline.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/loaders/loader.ts", - "declarations": [ - { - "kind": "class", - "description": "Loader.", - "name": "Loader", - "members": [ - { - "kind": "field", - "name": "stopped", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Animation stopped state", - "attribute": "stopped" + "default": "''", + "description": "Radio button value.", + "attribute": "value" }, { "kind": "field", - "name": "overlay", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Display the loader as an overlay", - "attribute": "overlay" - }, - { - "kind": "method", - "name": "_emitStart", - "privacy": "private" + "description": "Radio button disabled state, inherited from the parent group.", + "attribute": "disabled" }, { "kind": "method", - "name": "_emitStop", - "privacy": "private" + "name": "handleChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] } ], "events": [ { - "description": "Emits when the loader been started.", - "name": "on-start" - }, - { - "description": "Emits when the loader has been stopped and all animations have completed.", - "name": "on-stop" + "description": "Captures the change event and emits the selected value and original event details.", + "name": "on-radio-change" } ], "attributes": [ { - "name": "stopped", + "name": "value", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Animation stopped state", - "fieldName": "stopped" + "default": "''", + "description": "Radio button value.", + "fieldName": "value" }, { - "name": "overlay", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Display the loader as an overlay", - "fieldName": "overlay" + "description": "Radio button disabled state, inherited from the parent group.", + "fieldName": "disabled" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-loader", + "tagName": "kyn-radio-button", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Loader", + "name": "RadioButton", "declaration": { - "name": "Loader", - "module": "src/components/reusable/loaders/loader.ts" + "name": "RadioButton", + "module": "src/components/reusable/radioButton/radioButton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-loader", + "name": "kyn-radio-button", "declaration": { - "name": "Loader", - "module": "src/components/reusable/loaders/loader.ts" + "name": "RadioButton", + "module": "src/components/reusable/radioButton/radioButton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/loaders/skeleton.ts", + "path": "src/components/reusable/radioButton/radioButtonGroup.ts", "declarations": [ - { - "kind": "class", - "description": "", - "name": "Skeleton", - "members": [ + { + "kind": "class", + "description": "Radio button group container.", + "name": "RadioButtonGroup", + "slots": [ { - "kind": "field", - "name": "shape", - "type": { - "text": "'rectangle' | 'circle'" - }, - "default": "'rectangle'", - "description": "Defines the shape of the skeleton element.", - "attribute": "shape", - "reflects": true + "description": "Slot for individual radio buttons.", + "name": "unnamed" }, { - "kind": "field", - "name": "size", - "type": { - "text": "'small' | 'medium' | 'large' | undefined" - }, - "description": "Optional: Predefined size (small, medium, large).", - "attribute": "size" + "description": "Slot for description text.", + "name": "description" }, + { + "description": "Slot for tooltip.", + "name": "tooltip" + } + ], + "members": [ { "kind": "field", - "name": "width", + "name": "label", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Optional: Custom width (overrides size if provided).", - "attribute": "width" + "default": "''", + "description": "Label text", + "attribute": "label" }, { "kind": "field", - "name": "height", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Optional: Custom height (overrides size if provided).", - "attribute": "height" + "default": "false", + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "lines", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Sets the number of skeleton lines to display.", - "attribute": "lines" + "default": "false", + "description": "Radio button group disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "inline", + "name": "horizontal", "type": { "text": "boolean" }, "default": "false", - "description": "Sets whether to display inline or block.", - "attribute": "inline" + "description": "Radio button group horizontal layout.", + "attribute": "horizontal" }, { "kind": "field", - "name": "shade", + "name": "textStrings", + "default": "{\n required: 'Required',\n error: 'Error',\n}", + "description": "Text string customization.", + "attribute": "textStrings", "type": { - "text": "'light' | 'dark' | string" - }, - "default": "'light'", - "description": "Defines the shade of the skeleton.", - "attribute": "shade" - } - ], - "attributes": [ + "text": "object" + } + }, { - "name": "shape", - "type": { - "text": "'rectangle' | 'circle'" - }, - "default": "'rectangle'", - "description": "Defines the shape of the skeleton element.", - "fieldName": "shape" + "kind": "method", + "name": "_handleSlotChange", + "privacy": "private" }, { - "name": "size", - "type": { - "text": "'small' | 'medium' | 'large' | undefined" - }, - "description": "Optional: Predefined size (small, medium, large).", - "fieldName": "size" + "kind": "method", + "name": "_updateChildren", + "privacy": "private" }, { - "name": "width", - "type": { - "text": "string | undefined" - }, - "description": "Optional: Custom width (overrides size if provided).", - "fieldName": "width" + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] }, { - "name": "height", + "kind": "method", + "name": "_handleRadioChange", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the change event and emits the selected value.", + "name": "on-radio-group-change" + } + ], + "attributes": [ + { + "name": "label", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Optional: Custom height (overrides size if provided).", - "fieldName": "height" + "default": "''", + "description": "Label text", + "fieldName": "label" }, { - "name": "lines", + "name": "required", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Sets the number of skeleton lines to display.", - "fieldName": "lines" + "default": "false", + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "inline", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Sets whether to display inline or block.", - "fieldName": "inline" + "description": "Radio button group disabled state.", + "fieldName": "disabled" }, { - "name": "shade", + "name": "horizontal", "type": { - "text": "'light' | 'dark' | string" + "text": "boolean" }, - "default": "'light'", - "description": "Defines the shade of the skeleton.", - "fieldName": "shade" + "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-skeleton", + "tagName": "kyn-radio-button-group", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Skeleton", + "name": "RadioButtonGroup", "declaration": { - "name": "Skeleton", - "module": "src/components/reusable/loaders/skeleton.ts" + "name": "RadioButtonGroup", + "module": "src/components/reusable/radioButton/radioButtonGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-skeleton", + "name": "kyn-radio-button-group", "declaration": { - "name": "Skeleton", - "module": "src/components/reusable/loaders/skeleton.ts" + "name": "RadioButtonGroup", + "module": "src/components/reusable/radioButton/radioButtonGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/modal/index.ts", + "path": "src/components/reusable/search/index.ts", "declarations": [], "exports": [ - { - "kind": "js", - "name": "Modal", - "declaration": { - "name": "Modal", - "module": "./modal" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/modal/modal.ts", - "declarations": [ - { - "kind": "class", - "description": "Modal.", - "name": "Modal", - "slots": [ - { - "description": "Slot for modal body content.", - "name": "unnamed" - }, - { - "description": "Slot for the anchor button content.", - "name": "anchor" - } - ], - "members": [ - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Modal open state.", - "attribute": "open" - }, - { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'auto'", - "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", - "attribute": "size" - }, + { + "kind": "js", + "name": "Search", + "declaration": { + "name": "Search", + "module": "./search" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/search/search.ts", + "declarations": [ + { + "kind": "class", + "description": "Search", + "name": "Search", + "members": [ { "kind": "field", - "name": "titleText", + "name": "name", "type": { "text": "string" }, "default": "''", - "description": "Title/heading text, required.", - "attribute": "titleText" + "description": "Input name.", + "attribute": "name" }, { "kind": "field", - "name": "labelText", + "name": "label", "type": { "text": "string" }, - "default": "''", - "description": "Label text, optional.", - "attribute": "labelText" + "default": "'Search'", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "okText", + "name": "expandable", "type": { - "text": "string" + "text": "boolean" }, - "default": "'OK'", - "description": "OK button text.", - "attribute": "okText" + "default": "false", + "description": "Expandable style search.", + "attribute": "expandable" }, { "kind": "field", - "name": "cancelText", + "name": "value", "type": { "text": "string" }, - "default": "'Cancel'", - "description": "Cancel button text.", - "attribute": "cancelText" - }, - { - "kind": "field", - "name": "destructive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "attribute": "destructive" + "default": "''", + "description": "Input value.", + "attribute": "value" }, { "kind": "field", - "name": "okDisabled", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Disables the primary button.", - "attribute": "okDisabled" + "default": "'md'", + "description": "Input & button size.", + "attribute": "size" }, { "kind": "field", - "name": "secondaryDisabled", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the secondary button.", - "attribute": "secondaryDisabled" + "description": "Disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "hideFooter", + "name": "suggestions", "type": { - "text": "boolean" + "text": "Array" }, - "default": "false", - "description": "Hides the footer/action buttons to create a passive modal.", - "attribute": "hideFooter" + "default": "[]", + "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", + "attribute": "suggestions" }, { "kind": "field", - "name": "secondaryButtonText", + "name": "expandableSearchBtnDescription", "type": { "text": "string" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "attribute": "secondaryButtonText" + "default": "''", + "description": "Expandable style search button description (Required to support accessibility).", + "attribute": "expandableSearchBtnDescription" }, { "kind": "field", - "name": "showSecondaryButton", + "name": "assistiveTextStrings", + "default": "{\n searchSuggestions: 'Search suggestions.',\n noMatches: 'No matches found for',\n selected: 'Selected',\n found: 'Found',\n}", + "description": "Assistive text strings.", + "attribute": "assistiveTextStrings", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the secondary button.", - "attribute": "showSecondaryButton" + "text": "object" + } }, { - "kind": "field", - "name": "hideCancelButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the cancel button.", - "attribute": "hideCancelButton" + "kind": "method", + "name": "_buttonSizeMap", + "privacy": "private" }, { - "kind": "field", - "name": "beforeClose", - "type": { - "text": "Function" - }, - "description": "Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." + "kind": "method", + "name": "_handleFocus", + "privacy": "private" }, { - "kind": "field", - "name": "closeText", - "type": { - "text": "string" - }, - "default": "'Close'", - "description": "Close button text.", - "attribute": "closeText" + "kind": "method", + "name": "_handleBlur", + "privacy": "private" }, { "kind": "method", - "name": "_openModal", + "name": "_handleButtonClick", "privacy": "private" }, { "kind": "method", - "name": "_closeModal", + "name": "_handleInput", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "Event" + "text": "CustomEvent" + } + } + ] + }, + { + "kind": "method", + "name": "_handleSuggestionClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" } }, { - "name": "returnValue", + "name": "suggestion", "type": { "text": "string" } @@ -6463,385 +7433,389 @@ }, { "kind": "method", - "name": "_emitCloseEvent", + "name": "_handleSuggestionWithMouseUp", "privacy": "private", "parameters": [ { - "name": "e", + "name": "suggestion", "type": { - "text": "Event" + "text": "string" } } ] - } - ], - "events": [ + }, { - "description": "Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).", - "name": "on-close" - } - ], - "attributes": [ + "kind": "method", + "name": "_handleSuggestionWithMouseDown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, { - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Modal open state.", - "fieldName": "open" + "kind": "method", + "name": "handleSearchKeydown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { - "name": "size", - "type": { - "text": "string" - }, - "default": "'auto'", - "description": "Modal size. `'auto'`, `'md'`, or `'lg'`.", - "fieldName": "size" + "kind": "method", + "name": "handleListKeydown", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { - "name": "titleText", - "type": { - "text": "string" - }, - "default": "''", - "description": "Title/heading text, required.", - "fieldName": "titleText" + "kind": "method", + "name": "handleKeyboard", + "privacy": "private", + "parameters": [ + { + "name": "keyCode", + "type": { + "text": "number" + } + }, + { + "name": "target", + "type": { + "text": "string" + } + } + ] }, { - "name": "labelText", + "kind": "method", + "name": "_checkForMatchingSuggestions", + "privacy": "private" + } + ], + "events": [ + { + "description": "Emits the value on text input/clear.", + "name": "on-input" + } + ], + "attributes": [ + { + "name": "name", "type": { "text": "string" }, "default": "''", - "description": "Label text, optional.", - "fieldName": "labelText" - }, - { - "name": "okText", - "type": { - "text": "string" - }, - "default": "'OK'", - "description": "OK button text.", - "fieldName": "okText" + "description": "Input name.", + "fieldName": "name" }, { - "name": "cancelText", + "name": "label", "type": { "text": "string" }, - "default": "'Cancel'", - "description": "Cancel button text.", - "fieldName": "cancelText" - }, - { - "name": "destructive", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "fieldName": "destructive" - }, - { - "name": "okDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Disables the primary button.", - "fieldName": "okDisabled" + "default": "'Search'", + "description": "Label text.", + "fieldName": "label" }, { - "name": "secondaryDisabled", + "name": "expandable", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the secondary button.", - "fieldName": "secondaryDisabled" + "description": "Expandable style search.", + "fieldName": "expandable" }, { - "name": "hideFooter", + "name": "value", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hides the footer/action buttons to create a passive modal.", - "fieldName": "hideFooter" + "default": "''", + "description": "Input value.", + "fieldName": "value" }, { - "name": "secondaryButtonText", + "name": "size", "type": { "text": "string" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "fieldName": "secondaryButtonText" + "default": "'md'", + "description": "Input & button size.", + "fieldName": "size" }, { - "name": "showSecondaryButton", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the secondary button.", - "fieldName": "showSecondaryButton" + "description": "Disabled state.", + "fieldName": "disabled" }, { - "name": "hideCancelButton", + "name": "suggestions", "type": { - "text": "boolean" + "text": "Array" }, - "default": "false", - "description": "Hides the cancel button.", - "fieldName": "hideCancelButton" + "default": "[]", + "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", + "fieldName": "suggestions" }, { - "name": "closeText", + "name": "expandableSearchBtnDescription", "type": { "text": "string" }, - "default": "'Close'", - "description": "Close button text.", - "fieldName": "closeText" + "default": "''", + "description": "Expandable style search button description (Required to support accessibility).", + "fieldName": "expandableSearchBtnDescription" + }, + { + "name": "assistiveTextStrings", + "default": "_defaultTextStrings", + "description": "Assistive text strings.", + "fieldName": "assistiveTextStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-modal", + "tagName": "kyn-search", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Modal", + "name": "Search", "declaration": { - "name": "Modal", - "module": "src/components/reusable/modal/modal.ts" + "name": "Search", + "module": "src/components/reusable/search/search.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-modal", + "name": "kyn-search", "declaration": { - "name": "Modal", - "module": "src/components/reusable/modal/modal.ts" + "name": "Search", + "module": "src/components/reusable/search/search.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/notification/index.ts", + "path": "src/components/reusable/sideDrawer/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Notification", - "declaration": { - "name": "Notification", - "module": "./notification" - } - }, - { - "kind": "js", - "name": "NotificationContainer", + "name": "SideDrawer", "declaration": { - "name": "NotificationContainer", - "module": "./notificationContainer" + "name": "SideDrawer", + "module": "./sideDrawer" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/notification/notification.ts", + "path": "src/components/reusable/sideDrawer/sideDrawer.ts", "declarations": [ { "kind": "class", - "description": "Notification component.", - "name": "Notification", + "description": "Side Drawer.", + "name": "SideDrawer", "slots": [ { - "description": "Slot for notification message body.", + "description": "Slot for drawer body content.", "name": "unnamed" }, { - "description": "Slot for menu.", - "name": "actions" + "description": "Slot for the anchor button content.", + "name": "anchor" } ], "members": [ { "kind": "field", - "name": "notificationTitle", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Notification Title (Required).", - "attribute": "notificationTitle" + "default": "false", + "description": "Drawer open state.", + "attribute": "open" }, { "kind": "field", - "name": "notificationSubtitle", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "Notification subtitle.(optional)", - "attribute": "notificationSubtitle" + "default": "'md'", + "description": "Drawer size. `'md'`, or `'sm'`.", + "attribute": "size" }, { "kind": "field", - "name": "timeStamp", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", - "attribute": "timeStamp" + "description": "Title / Heading text, required.", + "attribute": "titleText" }, { "kind": "field", - "name": "href", + "name": "labelText", "type": { "text": "string" }, "default": "''", - "description": "Card href link", - "attribute": "href" + "description": "Label text, optional.", + "attribute": "labelText" }, { "kind": "field", - "name": "tagStatus", + "name": "submitBtnText", "type": { "text": "string" }, - "default": "'default'", - "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", - "attribute": "tagStatus" + "default": "'Ok'", + "description": "Submit button text.", + "attribute": "submitBtnText" }, { "kind": "field", - "name": "type", + "name": "cancelBtnText", "type": { "text": "string" }, - "default": "'normal'", - "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", - "attribute": "type" - }, - { - "kind": "field", - "name": "textStrings", - "type": { - "text": "any" - }, - "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", - "description": "Customizable text strings.", - "attribute": "textStrings" + "default": "'Cancel'", + "description": "Cancel button text.", + "attribute": "cancelBtnText" }, { "kind": "field", - "name": "closeBtnDescription", + "name": "submitBtnDisabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Close'", - "description": "Close button description (Required to support accessibility).", - "attribute": "closeBtnDescription" + "default": "false", + "description": "Disables the primary button.", + "attribute": "submitBtnDisabled" }, { "kind": "field", - "name": "assistiveNotificationTypeText", + "name": "hideFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", - "attribute": "assistiveNotificationTypeText" + "default": "false", + "description": "Determine whether needs footer", + "attribute": "hideFooter" }, { "kind": "field", - "name": "notificationRole", + "name": "destructive", "type": { - "text": "'alert' | 'log' | 'status' | undefined" + "text": "boolean" }, - "description": "Notification role (Required to support accessibility).", - "attribute": "notificationRole" + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "attribute": "destructive" }, { "kind": "field", - "name": "statusLabel", + "name": "secondaryButtonText", "type": { "text": "string" }, - "default": "'Status'", - "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", - "attribute": "statusLabel" + "default": "'Secondary'", + "description": "Secondary button text.", + "attribute": "secondaryButtonText" }, { "kind": "field", - "name": "unRead", + "name": "showSecondaryButton", "type": { "text": "boolean" }, "default": "false", - "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", - "attribute": "unRead", - "reflects": true + "description": "Hides the secondary button.", + "attribute": "showSecondaryButton" }, { "kind": "field", - "name": "hideCloseButton", + "name": "hideCancelButton", "type": { "text": "boolean" }, "default": "false", - "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", - "attribute": "hideCloseButton" - }, - { - "kind": "field", - "name": "timeout", - "type": { - "text": "number" - }, - "default": "8", - "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", - "attribute": "timeout" + "description": "Hides the cancel button.", + "attribute": "hideCancelButton" }, { - "kind": "method", - "name": "renderInnerUI", - "privacy": "private" + "kind": "field", + "name": "beforeClose", + "type": { + "text": "Function" + }, + "description": "Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." }, { "kind": "method", - "name": "_close", + "name": "_openDrawer", "privacy": "private" }, { "kind": "method", - "name": "_handleClose", - "privacy": "private" + "name": "_closeDrawer", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + }, + { + "name": "returnValue", + "type": { + "text": "string" + } + } + ] }, { "kind": "method", - "name": "_handleCardClick", + "name": "_emitCloseEvent", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" + "text": "Event" } } ] @@ -6849,696 +7823,444 @@ ], "events": [ { - "description": "Emit event for clickable notification.", - "name": "on-notification-click" - }, - { - "description": "Emits when an inline/toast notification closes.", + "description": "Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).", "name": "on-close" } ], "attributes": [ { - "name": "notificationTitle", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Notification Title (Required).", - "fieldName": "notificationTitle" + "default": "false", + "description": "Drawer open state.", + "fieldName": "open" }, { - "name": "notificationSubtitle", + "name": "size", "type": { "text": "string" }, - "default": "''", - "description": "Notification subtitle.(optional)", - "fieldName": "notificationSubtitle" + "default": "'md'", + "description": "Drawer size. `'md'`, or `'sm'`.", + "fieldName": "size" }, { - "name": "timeStamp", + "name": "titleText", "type": { "text": "string" }, "default": "''", - "description": "Timestamp of notification.\nIt is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.", - "fieldName": "timeStamp" + "description": "Title / Heading text, required.", + "fieldName": "titleText" }, { - "name": "href", + "name": "labelText", "type": { "text": "string" }, "default": "''", - "description": "Card href link", - "fieldName": "href" + "description": "Label text, optional.", + "fieldName": "labelText" }, { - "name": "tagStatus", + "name": "submitBtnText", "type": { "text": "string" }, - "default": "'default'", - "description": "Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`.", - "fieldName": "tagStatus" + "default": "'Ok'", + "description": "Submit button text.", + "fieldName": "submitBtnText" }, { - "name": "type", + "name": "cancelBtnText", "type": { "text": "string" }, - "default": "'normal'", - "description": "Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel", - "fieldName": "type" - }, - { - "name": "textStrings", - "type": { - "text": "any" - }, - "default": "{\n success: 'Success',\n warning: 'Warning',\n info: 'Info',\n error: 'Error',\n }", - "description": "Customizable text strings.", - "fieldName": "textStrings" + "default": "'Cancel'", + "description": "Cancel button text.", + "fieldName": "cancelBtnText" }, { - "name": "closeBtnDescription", + "name": "submitBtnDisabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Close'", - "description": "Close button description (Required to support accessibility).", - "fieldName": "closeBtnDescription" + "default": "false", + "description": "Disables the primary button.", + "fieldName": "submitBtnDisabled" }, { - "name": "assistiveNotificationTypeText", + "name": "hideFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Assistive text for notification type.\nRequired for `'clickable'`, `'inline'` and `'toast'` notification types.", - "fieldName": "assistiveNotificationTypeText" + "default": "false", + "description": "Determine whether needs footer", + "fieldName": "hideFooter" }, { - "name": "notificationRole", + "name": "destructive", "type": { - "text": "'alert' | 'log' | 'status' | undefined" + "text": "boolean" }, - "description": "Notification role (Required to support accessibility).", - "fieldName": "notificationRole" + "default": "false", + "description": "Changes the primary button styles to indicate the action is destructive.", + "fieldName": "destructive" }, { - "name": "statusLabel", + "name": "secondaryButtonText", "type": { "text": "string" }, - "default": "'Status'", - "description": "Status label (Required to support accessibility).\nAssign the localized string value for the word **Status**.", - "fieldName": "statusLabel" + "default": "'Secondary'", + "description": "Secondary button text.", + "fieldName": "secondaryButtonText" }, { - "name": "unRead", + "name": "showSecondaryButton", "type": { "text": "boolean" }, "default": "false", - "description": "Set notification mark read prop. Required ony for `type: 'clickable'`.", - "fieldName": "unRead" + "description": "Hides the secondary button.", + "fieldName": "showSecondaryButton" }, { - "name": "hideCloseButton", + "name": "hideCancelButton", "type": { "text": "boolean" }, "default": "false", - "description": "Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true.", - "fieldName": "hideCloseButton" - }, - { - "name": "timeout", - "type": { - "text": "number" - }, - "default": "8", - "description": "Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'`", - "fieldName": "timeout" + "description": "Hides the cancel button.", + "fieldName": "hideCancelButton" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-notification", + "tagName": "kyn-side-drawer", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Notification", + "name": "SideDrawer", "declaration": { - "name": "Notification", - "module": "src/components/reusable/notification/notification.ts" + "name": "SideDrawer", + "module": "src/components/reusable/sideDrawer/sideDrawer.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-notification", + "name": "kyn-side-drawer", "declaration": { - "name": "Notification", - "module": "src/components/reusable/notification/notification.ts" + "name": "SideDrawer", + "module": "src/components/reusable/sideDrawer/sideDrawer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/notification/notificationContainer.ts", - "declarations": [ - { - "kind": "class", - "description": "Notification container component for Toast notification.\nUsage is limited for ..", - "name": "NotificationContainer", - "slots": [ - { - "description": "Slot for component.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-notification-container", - "customElement": true - } - ], + "path": "src/components/reusable/stepper/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "NotificationContainer", + "name": "Stepper", "declaration": { - "name": "NotificationContainer", - "module": "src/components/reusable/notification/notificationContainer.ts" + "name": "Stepper", + "module": "./stepper" } }, { - "kind": "custom-element-definition", - "name": "kyn-notification-container", + "kind": "js", + "name": "StepperItem", "declaration": { - "name": "NotificationContainer", - "module": "src/components/reusable/notification/notificationContainer.ts" + "name": "StepperItem", + "module": "./stepperItem" } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/numberInput/index.ts", - "declarations": [], - "exports": [ + }, { "kind": "js", - "name": "NumberInput", + "name": "StepperItemChild", "declaration": { - "name": "NumberInput", - "module": "./numberInput" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/numberInput/numberInput.ts", - "declarations": [ - { - "kind": "class", - "description": "Number input.", - "name": "NumberInput", - "slots": [ - { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], - "members": [ - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, + "name": "StepperItemChild", + "module": "./stepperItemChild" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/stepper/stepper.ts", + "declarations": [ + { + "kind": "class", + "description": "Stepper", + "name": "Stepper", + "slots": [ { - "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "Input value.", - "attribute": "value" - }, + "description": "Slot for step items.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "placeholder", + "name": "stepperType", "type": { "text": "string" }, - "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "default": "'procedure'", + "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", + "attribute": "stepperType" }, { "kind": "field", - "name": "disabled", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "description": "Wheter the stepper is in vertical type.", + "attribute": "vertical" }, { "kind": "field", - "name": "caption", + "name": "stepperSize", "type": { "text": "string" }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" - }, - { - "kind": "field", - "name": "max", - "type": { - "text": "number" - }, - "description": "Maximum value.", - "attribute": "max" - }, - { - "kind": "field", - "name": "min", - "type": { - "text": "number" - }, - "description": "Minimum value.", - "attribute": "min" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "attribute": "stepperSize" }, { "kind": "field", - "name": "step", + "name": "currentIndex", "type": { "text": "number" }, - "default": "1", - "description": "Step value.", - "attribute": "step" - }, - { - "kind": "field", - "name": "hideLabel", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n subtract: 'Subtract',\n add: 'Add',\n error: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "_sizeMap", - "privacy": "private", - "return": { - "type": { - "text": "'small' | 'medium' | 'large'" - } - }, - "parameters": [ - { - "name": "size", - "type": { - "text": "string" - } - } - ] + "default": "0", + "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", + "attribute": "currentIndex" }, { "kind": "method", - "name": "_handleSubtract", + "name": "_handleSlotChange", "privacy": "private" }, { "kind": "method", - "name": "_handleAdd", + "name": "_updateChildren", "privacy": "private" }, { "kind": "method", - "name": "_handleInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "_determineFirstLastSteps", + "privacy": "private" }, { "kind": "method", - "name": "_emitValue", + "name": "_handleStepClick", "privacy": "private", "parameters": [ { "name": "e", - "optional": true, "type": { "text": "any" } } ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" - } - } - ] } ], "events": [ { - "description": "Captures the input event and emits the value and original event details.", - "name": "on-input" + "description": "Captures the event and emits the active step and original event details when click on any step title. This is only for procedure type stepper. Status stepper doesn't emit this event.", + "name": "on-click" } ], "attributes": [ { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, - { - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "Input value.", - "fieldName": "value" - }, - { - "name": "placeholder", + "name": "stepperType", "type": { "text": "string" }, - "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" - }, - { - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "default": "'procedure'", + "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", + "fieldName": "stepperType" }, { - "name": "disabled", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" + "description": "Wheter the stepper is in vertical type.", + "fieldName": "vertical" }, { - "name": "caption", + "name": "stepperSize", "type": { "text": "string" }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" - }, - { - "name": "max", - "type": { - "text": "number" - }, - "description": "Maximum value.", - "fieldName": "max" - }, - { - "name": "min", - "type": { - "text": "number" - }, - "description": "Minimum value.", - "fieldName": "min" - }, - { - "name": "step", - "type": { - "text": "number" - }, - "default": "1", - "description": "Step value.", - "fieldName": "step" - }, - { - "name": "hideLabel", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "fieldName": "stepperSize" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "name": "currentIndex", + "type": { + "text": "number" + }, + "default": "0", + "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", + "fieldName": "currentIndex" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-number-input", + "tagName": "kyn-stepper", "customElement": true } ], "exports": [ { "kind": "js", - "name": "NumberInput", + "name": "Stepper", "declaration": { - "name": "NumberInput", - "module": "src/components/reusable/numberInput/numberInput.ts" + "name": "Stepper", + "module": "src/components/reusable/stepper/stepper.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-number-input", - "declaration": { - "name": "NumberInput", - "module": "src/components/reusable/numberInput/numberInput.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/overflowMenu/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "OverflowMenu", - "declaration": { - "name": "OverflowMenu", - "module": "./overflowMenu" - } - }, - { - "kind": "js", - "name": "OverflowMenuItem", + "name": "kyn-stepper", "declaration": { - "name": "OverflowMenuItem", - "module": "./overflowMenuItem" + "name": "Stepper", + "module": "src/components/reusable/stepper/stepper.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/overflowMenu/overflowMenu.ts", + "path": "src/components/reusable/stepper/stepperItem.ts", "declarations": [ { "kind": "class", - "description": "Overflow Menu.", - "name": "OverflowMenu", + "description": "Stepper Item.", + "name": "StepperItem", "slots": [ { - "description": "Slot for overflow menu items.", + "description": "Slot for tooltip.", + "name": "tooltip" + }, + { + "description": "Children slot. Used for nested children in vertical stepper. Visible only when step state is active. Do not use inside stepperType `'status'`.", + "name": "child" + }, + { + "description": "Optional slot for content in vertical stepper. Visible only when step state is active.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "open", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Menu open state.", - "attribute": "open" + "description": "Whether the stepper is in vertical type.", + "attribute": "vertical" }, { "kind": "field", - "name": "anchorRight", + "name": "stepSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Anchors the menu to the right of the button.", - "attribute": "anchorRight" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "attribute": "stepSize" }, { "kind": "field", - "name": "verticalDots", + "name": "stepName", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "3 dots vertical orientation.", - "attribute": "verticalDots" + "default": "''", + "description": "Step name.", + "attribute": "stepName" }, { "kind": "field", - "name": "fixed", + "name": "stepTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", - "attribute": "fixed" + "default": "''", + "description": "Step title.", + "attribute": "stepTitle" }, { "kind": "field", - "name": "assistiveText", + "name": "stepLink", "type": { "text": "string" }, - "default": "'Toggle Menu'", - "description": "Button assistive text..", - "attribute": "assistiveText" + "default": "''", + "description": "Step link.", + "attribute": "stepLink" }, { - "kind": "method", - "name": "_emitToggleEvent", - "privacy": "private" + "kind": "field", + "name": "stepState", + "type": { + "text": "string" + }, + "default": "'pending'", + "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", + "attribute": "stepState" }, { - "kind": "method", - "name": "toggleMenu", - "privacy": "private" + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disable step.", + "attribute": "disabled" }, { - "kind": "method", - "name": "_positionMenu", - "privacy": "private" + "kind": "field", + "name": "showCounter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", + "attribute": "showCounter" }, { "kind": "method", - "name": "handleClickOut", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "Event" - } - } - ] + "name": "_handleChildToggle", + "privacy": "private" }, { "kind": "method", - "name": "handleEscapePress", + "name": "_handleStepClick", "privacy": "private", "parameters": [ { @@ -7551,164 +8273,190 @@ }, { "kind": "method", - "name": "handleKeyDown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "_handleChildSlotChange", + "privacy": "private" }, { "kind": "method", - "name": "getMenuItems" + "name": "_updateChildren", + "privacy": "private" }, { "kind": "method", - "name": "getMenu" + "name": "getProgressValue", + "privacy": "private", + "return": { + "type": { + "text": "number" + } + } } ], "events": [ { - "description": "Capture the open/close event and emits the new state.", - "name": "on-toggle" + "description": "Emits the step details to the parent stepper component when click on step title.", + "name": "on-step-click" } ], "attributes": [ { - "name": "open", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "Menu open state.", - "fieldName": "open" + "description": "Whether the stepper is in vertical type.", + "fieldName": "vertical" }, { - "name": "anchorRight", + "name": "stepSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Anchors the menu to the right of the button.", - "fieldName": "anchorRight" + "default": "'large'", + "description": "Stepper size `'large'` & `'small'`.", + "fieldName": "stepSize" }, { - "name": "verticalDots", + "name": "stepName", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "3 dots vertical orientation.", - "fieldName": "verticalDots" + "default": "''", + "description": "Step name.", + "fieldName": "stepName" }, { - "name": "fixed", + "name": "stepTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Use fixed instead of absolute position. Useful when placed within elements with overflow scroll.", - "fieldName": "fixed" + "default": "''", + "description": "Step title.", + "fieldName": "stepTitle" }, { - "name": "assistiveText", + "name": "stepLink", "type": { "text": "string" }, - "default": "'Toggle Menu'", - "description": "Button assistive text..", - "fieldName": "assistiveText" + "default": "''", + "description": "Step link.", + "fieldName": "stepLink" + }, + { + "name": "stepState", + "type": { + "text": "string" + }, + "default": "'pending'", + "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", + "fieldName": "stepState" + }, + { + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disable step.", + "fieldName": "disabled" + }, + { + "name": "showCounter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", + "fieldName": "showCounter" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-overflow-menu", + "tagName": "kyn-stepper-item", "customElement": true } ], "exports": [ { "kind": "js", - "name": "OverflowMenu", + "name": "StepperItem", "declaration": { - "name": "OverflowMenu", - "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + "name": "StepperItem", + "module": "src/components/reusable/stepper/stepperItem.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-overflow-menu", + "name": "kyn-stepper-item", "declaration": { - "name": "OverflowMenu", - "module": "src/components/reusable/overflowMenu/overflowMenu.ts" + "name": "StepperItem", + "module": "src/components/reusable/stepper/stepperItem.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/overflowMenu/overflowMenuItem.ts", + "path": "src/components/reusable/stepper/stepperItemChild.ts", "declarations": [ { "kind": "class", - "description": "Overflow Menu.", - "name": "OverflowMenuItem", + "description": "Stepper Item child.", + "name": "StepperItemChild", "slots": [ { - "description": "Slot for item text.", + "description": "Slot for other elements.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "href", + "name": "childTitle", "type": { "text": "string" }, "default": "''", - "description": "Makes the item a link.", - "attribute": "href" + "description": "Child Title. Required for nested child inside step.", + "attribute": "childTitle" }, { "kind": "field", - "name": "destructive", + "name": "childLink", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Adds destructive styles.", - "attribute": "destructive" + "default": "''", + "description": "Child link.", + "attribute": "childLink" }, { "kind": "field", - "name": "disabled", + "name": "childSubTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Item disabled state.", - "attribute": "disabled" + "default": "''", + "description": "Optional Child Subtitle.", + "attribute": "childSubTitle" }, { "kind": "field", - "name": "description", + "name": "childState", "type": { "text": "string" }, - "default": "''", - "description": "Item description text for screen reader's", - "attribute": "description" + "default": "'pending'", + "description": "Child State. `'pending'`, `'active'` & `'completed'`.", + "attribute": "childState" }, { "kind": "method", - "name": "handleClick", + "name": "_handleChildStepClick", "privacy": "private", "parameters": [ { @@ -7721,5520 +8469,4924 @@ }, { "kind": "method", - "name": "handleKeyDown", + "name": "getProgressValue", "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } + "return": { + "type": { + "text": "number" } - ] - }, - { - "kind": "method", - "name": "checkOverflow", - "privacy": "private" + } } ], "events": [ { - "description": "Captures the click event and emits the original event details.", - "name": "on-click" + "description": "Emits event on child click. Only for vertical mode.", + "name": "on-child-click" } ], "attributes": [ { - "name": "href", + "name": "childTitle", "type": { "text": "string" }, "default": "''", - "description": "Makes the item a link.", - "fieldName": "href" + "description": "Child Title. Required for nested child inside step.", + "fieldName": "childTitle" }, { - "name": "destructive", + "name": "childLink", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Adds destructive styles.", - "fieldName": "destructive" + "default": "''", + "description": "Child link.", + "fieldName": "childLink" }, { - "name": "disabled", + "name": "childSubTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Item disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "Optional Child Subtitle.", + "fieldName": "childSubTitle" }, { - "name": "description", + "name": "childState", "type": { "text": "string" }, - "default": "''", - "description": "Item description text for screen reader's", - "fieldName": "description" + "default": "'pending'", + "description": "Child State. `'pending'`, `'active'` & `'completed'`.", + "fieldName": "childState" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-overflow-menu-item", + "tagName": "kyn-stepper-item-child", "customElement": true } ], "exports": [ { "kind": "js", - "name": "OverflowMenuItem", + "name": "StepperItemChild", "declaration": { - "name": "OverflowMenuItem", - "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" + "name": "StepperItemChild", + "module": "src/components/reusable/stepper/stepperItemChild.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-overflow-menu-item", + "name": "kyn-stepper-item-child", "declaration": { - "name": "OverflowMenuItem", - "module": "src/components/reusable/overflowMenu/overflowMenuItem.ts" + "name": "StepperItemChild", + "module": "src/components/reusable/stepper/stepperItemChild.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagetitle/index.ts", + "path": "src/components/reusable/table/defs.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "PageTitle", + "name": "Table", "declaration": { - "name": "PageTitle", - "module": "./pageTitle" + "name": "Table", + "module": "./table" + } + }, + { + "kind": "js", + "name": "TableCell", + "declaration": { + "name": "TableCell", + "module": "./table-cell" + } + }, + { + "kind": "js", + "name": "TableRow", + "declaration": { + "name": "TableRow", + "module": "./table-row" + } + }, + { + "kind": "js", + "name": "TableBody", + "declaration": { + "name": "TableBody", + "module": "./table-body" + } + }, + { + "kind": "js", + "name": "TableHead", + "declaration": { + "name": "TableHead", + "module": "./table-head" + } + }, + { + "kind": "js", + "name": "TableHeader", + "declaration": { + "name": "TableHeader", + "module": "./table-header" + } + }, + { + "kind": "js", + "name": "TableFoot", + "declaration": { + "name": "TableFoot", + "module": "./table-foot" + } + }, + { + "kind": "js", + "name": "TableFooter", + "declaration": { + "name": "TableFooter", + "module": "./table-footer" + } + }, + { + "kind": "js", + "name": "TableLegend", + "declaration": { + "name": "TableLegend", + "module": "./table-legend" + } + }, + { + "kind": "js", + "name": "TableLegendItem", + "declaration": { + "name": "TableLegendItem", + "module": "./table-legend-item" + } + }, + { + "kind": "js", + "name": "TableToolbar", + "declaration": { + "name": "TableToolbar", + "module": "./table-toolbar" + } + }, + { + "kind": "js", + "name": "TableContainer", + "declaration": { + "name": "TableContainer", + "module": "./table-container" + } + }, + { + "kind": "js", + "name": "TableHeaderRow", + "declaration": { + "name": "TableHeaderRow", + "module": "./table-header-row" + } + }, + { + "kind": "js", + "name": "TableExpandedRow", + "declaration": { + "name": "TableExpandedRow", + "module": "./table-expanded-row" + } + }, + { + "kind": "js", + "name": "TableSkeleton", + "declaration": { + "name": "TableSkeleton", + "module": "./table.skeleton" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagetitle/pageTitle.ts", + "path": "src/components/reusable/table/table-body.ts", "declarations": [ { "kind": "class", - "description": "Page Title", - "name": "PageTitle", + "description": "`kyn-tbody` Web Component.\n\nRepresents the body section of Shidoka's design system tables. Designed to provide\na consistent look and feel, and can offer striped rows for enhanced readability.", + "name": "TableBody", "slots": [ { - "description": "Slot for icon. Use size 56 * 56 as per UX guidelines.", - "name": "icon" + "description": "The content slot for adding rows (``) within the table body.", + "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "headLine", - "type": { - "text": "string" - }, - "default": "''", - "description": "Headline text.", - "attribute": "headLine" - }, - { - "kind": "field", - "name": "pageTitle", + "name": "striped", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Page title text (required).", - "attribute": "pageTitle" + "default": "false", + "description": "Determines if the rows in the table body should be striped.", + "attribute": "striped", + "reflects": true }, { "kind": "field", - "name": "subTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Page subtitle text.", - "attribute": "subTitle" - }, + "name": "handleContextChange", + "description": "Updates the row's striped property when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ] + } + ], + "events": [ { - "kind": "field", - "name": "type", + "name": "on-rows-change", "type": { - "text": "string" + "text": "CustomEvent" }, - "default": "'primary'", - "description": "Type of page title `'primary'` & `'secondary'`.", - "attribute": "type" + "description": "Dispatched when the rows in the table body change." } ], "attributes": [ { - "name": "headLine", - "type": { - "text": "string" - }, - "default": "''", - "description": "Headline text.", - "fieldName": "headLine" - }, - { - "name": "pageTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Page title text (required).", - "fieldName": "pageTitle" - }, - { - "name": "subTitle", - "type": { - "text": "string" - }, - "default": "''", - "description": "Page subtitle text.", - "fieldName": "subTitle" - }, - { - "name": "type", + "name": "striped", "type": { - "text": "string" + "text": "boolean" }, - "default": "'primary'", - "description": "Type of page title `'primary'` & `'secondary'`.", - "fieldName": "type" + "default": "false", + "description": "Determines if the rows in the table body should be striped.", + "fieldName": "striped" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-page-title", + "tagName": "kyn-tbody", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PageTitle", + "name": "TableBody", "declaration": { - "name": "PageTitle", - "module": "src/components/reusable/pagetitle/pageTitle.ts" + "name": "TableBody", + "module": "src/components/reusable/table/table-body.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-page-title", + "name": "kyn-tbody", "declaration": { - "name": "PageTitle", - "module": "src/components/reusable/pagetitle/pageTitle.ts" + "name": "TableBody", + "module": "src/components/reusable/table/table-body.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/Pagination.ts", + "path": "src/components/reusable/table/table-cell.ts", "declarations": [ { "kind": "class", - "description": "`kyn-pagination` Web Component.\n\nA component that provides pagination functionality, enabling the user to\nnavigate through large datasets by splitting them into discrete chunks.\nIntegrates with other utility components like items range display, page size dropdown,\nand navigation buttons.", - "name": "Pagination", + "description": "`kyn-td` Web Component.\n\nRepresents a table cell (data cell) within Shidoka's design system tables.\nAllows customization of alignment and can reflect the sort direction when\nused within sortable columns.", + "name": "TableCell", + "slots": [ + { + "description": "The content slot for adding table data inside the cell.", + "name": "unnamed" + } + ], "members": [ { "kind": "field", - "name": "count", + "name": "dense", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Total number of items that need pagination.", - "attribute": "count", + "default": "false", + "attribute": "dense", "reflects": true }, { "kind": "field", - "name": "pageNumber", + "name": "align", "type": { - "text": "number" + "text": "TABLE_CELL_ALIGN" }, - "default": "1", - "description": "Current active page number.", - "attribute": "pageNumber", + "description": "Determines the text alignment of the table cell's content.", + "attribute": "align", "reflects": true }, { "kind": "field", - "name": "pageSize", + "name": "width", "type": { - "text": "number" + "text": "string" }, - "default": "5", - "description": "Number of items displayed per page.", - "attribute": "pageSize", + "default": "''", + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "width", "reflects": true }, { "kind": "field", - "name": "pageSizeOptions", - "type": { - "text": "number[]" - }, - "default": "[5, 10, 20, 30, 40, 50, 100]", - "description": "Available options for the page size.", - "attribute": "pageSizeOptions" - }, - { - "kind": "field", - "name": "_numberOfPages", + "name": "maxWidth", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "description": "Number of pages." - }, - { - "kind": "field", - "name": "pageSizeDropdownLabel", - "default": "PAGE_SIZE_LABEL", - "description": "Label for the page size dropdown. Required for accessibility.", - "attribute": "pageSizeDropdownLabel" + "default": "''", + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "maxWidth", + "reflects": true }, { "kind": "field", - "name": "hideItemsRange", + "name": "minWidth", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the items range display.", - "attribute": "hideItemsRange" + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "minWidth", + "reflects": true }, { "kind": "field", - "name": "hidePageSizeDropdown", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the page size dropdown.", - "attribute": "hidePageSizeDropdown" + "description": "Disables the cell.", + "attribute": "disabled", + "reflects": true }, { "kind": "field", - "name": "hideNavigationButtons", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the navigation buttons.", - "attribute": "hideNavigationButtons" + "description": "Dim the cell.", + "attribute": "dimmed", + "reflects": true }, { "kind": "field", - "name": "textStrings", - "type": { - "text": "object" - }, - "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", - "description": "Customizable text strings", - "attribute": "textStrings" - }, - { - "kind": "method", - "name": "handlePageSizeChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "CustomEvent" - }, - "description": "The emitted custom event with the selected page size." - } - ], - "description": "Handler for the event when the page size is changed by the user.\nUpdates the `pageSize` and resets the `pageNumber` to 1." - }, - { - "kind": "method", - "name": "handlePageNumberChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "CustomEvent" - }, - "description": "The emitted custom event with the selected page number." - } - ], - "description": "Handler for the event when the page number is changed by the user.\nUpdates the `pageNumber`." - } - ], - "events": [ - { - "description": "Dispatched when the page size changes.", - "name": "on-page-size-change" - }, - { - "description": "Dispatched when the currently active page changes.", - "name": "on-page-number-change" + "name": "handleContextChange", + "description": "Updates the cell's dense properties when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ] } ], "attributes": [ { - "name": "count", + "name": "dense", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Total number of items that need pagination.", - "fieldName": "count" + "default": "false", + "fieldName": "dense" }, { - "name": "pageNumber", + "name": "align", "type": { - "text": "number" + "text": "TABLE_CELL_ALIGN" }, - "default": "1", - "description": "Current active page number.", - "fieldName": "pageNumber" + "description": "Determines the text alignment of the table cell's content.", + "fieldName": "align" }, { - "name": "pageSize", + "name": "width", "type": { - "text": "number" + "text": "string" }, - "default": "5", - "description": "Number of items displayed per page.", - "fieldName": "pageSize" + "default": "''", + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "width" }, { - "name": "pageSizeOptions", + "name": "maxWidth", "type": { - "text": "number[]" + "text": "string" }, - "default": "[5, 10, 20, 30, 40, 50, 100]", - "description": "Available options for the page size.", - "fieldName": "pageSizeOptions" - }, - { - "name": "pageSizeDropdownLabel", - "default": "PAGE_SIZE_LABEL", - "description": "Label for the page size dropdown. Required for accessibility.", - "fieldName": "pageSizeDropdownLabel" + "default": "''", + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "maxWidth" }, { - "name": "hideItemsRange", + "name": "minWidth", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to hide the items range display.", - "fieldName": "hideItemsRange" + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "minWidth" }, { - "name": "hidePageSizeDropdown", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the page size dropdown.", - "fieldName": "hidePageSizeDropdown" + "description": "Disables the cell.", + "fieldName": "disabled" }, { - "name": "hideNavigationButtons", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Option to hide the navigation buttons.", - "fieldName": "hideNavigationButtons" - }, - { - "name": "textStrings", - "type": { - "text": "object" - }, - "default": "{\n showing: 'Showing',\n of: 'of',\n items: 'items',\n pages: 'pages',\n itemsPerPage: 'Items per page:',\n previousPage: 'Previous page',\n nextPage: 'Next page',\n }", - "description": "Customizable text strings", - "fieldName": "textStrings" + "description": "Dim the cell.", + "fieldName": "dimmed" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination", + "tagName": "kyn-td", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Pagination", + "name": "TableCell", "declaration": { - "name": "Pagination", - "module": "src/components/reusable/pagination/Pagination.ts" + "name": "TableCell", + "module": "src/components/reusable/table/table-cell.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-pagination", - "declaration": { - "name": "Pagination", - "module": "src/components/reusable/pagination/Pagination.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/pagination/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Pagination", - "declaration": { - "name": "Pagination", - "module": "./Pagination" - } - }, - { - "kind": "js", - "name": "PaginationItemsRange", - "declaration": { - "name": "PaginationItemsRange", - "module": "./pagination-items-range" - } - }, - { - "kind": "js", - "name": "PaginationPageSizeDropdown", - "declaration": { - "name": "PaginationPageSizeDropdown", - "module": "./pagination-page-size-dropdown" - } - }, - { - "kind": "js", - "name": "PaginationNavigationButtons", - "declaration": { - "name": "PaginationNavigationButtons", - "module": "./pagination-navigation-buttons" - } - }, - { - "kind": "js", - "name": "PaginationSkeleton", + "name": "kyn-td", "declaration": { - "name": "PaginationSkeleton", - "module": "./pagination.skeleton" + "name": "TableCell", + "module": "src/components/reusable/table/table-cell.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination-items-range.ts", + "path": "src/components/reusable/table/table-container.ts", "declarations": [ { "kind": "class", - "description": "`kyn-pagination-items-range` Web Component.\n\nThis component is responsible for displaying the range of items being displayed\nin the context of pagination. It shows which items (by number) are currently visible\nand the total number of items.", - "name": "PaginationItemsRange", + "description": "`kyn-table-container` Web Component.\n\nProvides a container for Shidoka's design system tables. It's designed to encapsulate\nand apply styles uniformly across the table elements.", + "name": "TableContainer", + "slots": [ + { + "description": "The content slot for adding table and related elements.", + "name": "unnamed" + } + ], "members": [ { "kind": "field", - "name": "count", + "name": "tabIndex", "type": { "text": "number" }, "default": "0", - "description": "Total number of items.", - "attribute": "count", - "reflects": true - }, - { - "kind": "field", - "name": "pageNumber", - "type": { - "text": "number" - }, - "default": "1", - "description": "Current page number being displayed.", - "attribute": "pageNumber", - "reflects": true - }, - { - "kind": "field", - "name": "pageSize", - "type": { - "text": "number" - }, - "default": "5", - "description": "Number of items displayed per page.", - "attribute": "pageSize", + "attribute": "tabIndex", "reflects": true - }, - { - "kind": "method", - "name": "itemsRangeText", - "privacy": "private", - "return": { - "type": { - "text": "string" - } - }, - "parameters": [ - { - "name": "isMobile", - "type": { - "text": "Boolean" - } - } - ] } ], "attributes": [ { - "name": "count", + "name": "tabIndex", "type": { "text": "number" }, "default": "0", - "description": "Total number of items.", - "fieldName": "count" - }, - { - "name": "pageNumber", - "type": { - "text": "number" - }, - "default": "1", - "description": "Current page number being displayed.", - "fieldName": "pageNumber" - }, - { - "name": "pageSize", - "type": { - "text": "number" - }, - "default": "5", - "description": "Number of items displayed per page.", - "fieldName": "pageSize" + "fieldName": "tabIndex" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination-items-range", + "tagName": "kyn-table-container", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PaginationItemsRange", - "declaration": { - "name": "PaginationItemsRange", - "module": "src/components/reusable/pagination/pagination-items-range.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-pagination-items-range", + "name": "TableContainer", + "declaration": { + "name": "TableContainer", + "module": "src/components/reusable/table/table-container.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-table-container", + "declaration": { + "name": "TableContainer", + "module": "src/components/reusable/table/table-container.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-context.ts", + "declarations": [ + { + "kind": "variable", + "name": "tableContext" + } + ], + "exports": [ + { + "kind": "js", + "name": "tableContext", "declaration": { - "name": "PaginationItemsRange", - "module": "src/components/reusable/pagination/pagination-items-range.ts" + "name": "tableContext", + "module": "src/components/reusable/table/table-context.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination-navigation-buttons.ts", + "path": "src/components/reusable/table/table-expanded-row.ts", "declarations": [ { "kind": "class", - "description": "`kyn-pagination-navigation-buttons` Web Component.\n\nThis component provides navigational controls for pagination.\nIt includes back and next buttons, along with displaying the current page and total pages.", - "name": "PaginationNavigationButtons", + "description": "\n`kyn-expanded-tr` Web Component.\n\nDesigned to display additional details for a row in a table.\nThe row is expandable and can be expanded/collapsed by toggling the plus/minus icons.", + "name": "TableExpandedRow", + "slots": [ + { + "description": "The slot for adding content to the expandable details section.", + "name": "unnamed" + } + ], "members": [ { "kind": "field", - "name": "pageNumber", + "name": "colSpan", "type": { "text": "number" }, "default": "1", - "attribute": "pageNumber", - "reflects": true + "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", + "attribute": "colspan" }, { "kind": "field", - "name": "numberOfPages", + "name": "expanded", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "attribute": "numberOfPages", + "default": "false", + "description": "`true` if the table row should be expanded.", + "attribute": "expanded", "reflects": true - }, - { - "kind": "field", - "name": "SMALLEST_PAGE_NUMBER", - "type": { - "text": "number" - }, - "privacy": "private", - "readonly": true, - "default": "1" - }, - { - "kind": "method", - "name": "handleButtonClick", - "privacy": "private", - "parameters": [ - { - "name": "next", - "type": { - "text": "boolean" - }, - "description": "If true, will move to the next page, otherwise to the previous page" - } - ], - "description": "Handles the button click event, either moving to the next page or previous page" - } - ], - "events": [ - { - "name": "on-page-number-change", - "type": { - "text": "CustomEvent" - }, - "description": "Dispatched when the page number is changed." } ], "attributes": [ { - "name": "pageNumber", + "name": "colspan", "type": { "text": "number" }, "default": "1", - "fieldName": "pageNumber" + "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", + "fieldName": "colSpan" }, { - "name": "numberOfPages", + "name": "expanded", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "fieldName": "numberOfPages" + "default": "false", + "description": "`true` if the table row should be expanded.", + "fieldName": "expanded" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination-navigation-buttons", + "tagName": "kyn-expanded-tr", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PaginationNavigationButtons", + "name": "TableExpandedRow", "declaration": { - "name": "PaginationNavigationButtons", - "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" + "name": "TableExpandedRow", + "module": "src/components/reusable/table/table-expanded-row.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-pagination-navigation-buttons", + "name": "kyn-expanded-tr", "declaration": { - "name": "PaginationNavigationButtons", - "module": "src/components/reusable/pagination/pagination-navigation-buttons.ts" + "name": "TableExpandedRow", + "module": "src/components/reusable/table/table-expanded-row.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination-page-size-dropdown.ts", + "path": "src/components/reusable/table/table-foot.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" - }, + "description": "`kyn-tfoot` Web Component.\n\nRepresents a custom table foot (``) for Shidoka's design system tables.\nDesigned to contain and style table footer rows (``) and footer cells (``).", + "name": "TableFoot", + "slots": [ { - "name": "pageSizeOptions", - "type": { - "text": "Array" - }, - "default": "[5, 10, 20, 30, 40, 50]", - "description": "Available options for the page size.", - "fieldName": "pageSizeOptions" + "description": "The content slot for adding table foot rows.", + "name": "unnamed" } ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination-page-size-dropdown", + "tagName": "kyn-tfoot", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PaginationPageSizeDropdown", + "name": "TableFoot", "declaration": { - "name": "PaginationPageSizeDropdown", - "module": "src/components/reusable/pagination/pagination-page-size-dropdown.ts" + "name": "TableFoot", + "module": "src/components/reusable/table/table-foot.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-pagination-page-size-dropdown", + "name": "kyn-tfoot", "declaration": { - "name": "PaginationPageSizeDropdown", - "module": "src/components/reusable/pagination/pagination-page-size-dropdown.ts" + "name": "TableFoot", + "module": "src/components/reusable/table/table-foot.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/pagination/pagination.skeleton.ts", + "path": "src/components/reusable/table/table-footer.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" - }, - { - "kind": "field", - "name": "hideNavigationButtons", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the navigation buttons.", - "attribute": "hideNavigationButtons" - } - ], - "attributes": [ - { - "name": "hideItemsRange", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the items range display.", - "fieldName": "hideItemsRange" - }, - { - "name": "hidePageSizeDropdown", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the page size dropdown.", - "fieldName": "hidePageSizeDropdown" - }, + "description": "Table Footer\n\nIntended to contain Legend and Pagination.", + "name": "TableFooter", + "slots": [ { - "name": "hideNavigationButtons", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to hide the navigation buttons.", - "fieldName": "hideNavigationButtons" + "description": "Default slot.", + "name": "unnamed" } ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-pagination-skeleton", + "tagName": "kyn-table-footer", "customElement": true } ], "exports": [ { "kind": "js", - "name": "PaginationSkeleton", + "name": "TableFooter", "declaration": { - "name": "PaginationSkeleton", - "module": "src/components/reusable/pagination/pagination.skeleton.ts" + "name": "TableFooter", + "module": "src/components/reusable/table/table-footer.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-table-footer", "declaration": { - "name": "ProgressBar", - "module": "./progressBar" + "name": "TableFooter", + "module": "src/components/reusable/table/table-footer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/progressBar/progressBar.ts", + "path": "src/components/reusable/table/table-head.ts", "declarations": [ { "kind": "class", - "description": "`` -- progress bar status indicator component.", - "name": "ProgressBar", + "description": "`kyn-thead` Web Component.\n\nRepresents a custom table head (``) for Shidoka's design system tables.\nDesigned to contain and style table header rows (``) and header cells (``).", + "name": "TableHead", "slots": [ { - "description": "Slot for tooltip text content.", + "description": "The content slot for adding table header rows (``).", "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", + "name": "stickyHeader", "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", - "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" + "attribute": "stickyHeader", + "reflects": true }, { "kind": "field", - "name": "hideLabel", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" - }, - { - "kind": "method", - "name": "renderProgressBar", - "privacy": "private", + "name": "handleContextChange", + "description": "Update the stickyHeader property when the context changes.", "parameters": [ { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", + "description": "The updated context.", + "name": "context", "type": { - "text": "number | null" + "text": "TableContextType" } } ] }, { "kind": "method", - "name": "renderProgressBarLabel", + "name": "handleChildSort", "privacy": "private", "parameters": [ { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", + "name": "e", "type": { - "text": "number | null" + "text": "CustomEvent" } } ] - }, + } + ], + "attributes": [ { - "kind": "method", - "name": "renderStatusIconOrLoader", - "privacy": "private", - "parameters": [ - { - "name": "currentStatus", - "type": { - "text": "ProgressStatus" - } - }, - { - "name": "currentValue", - "type": { - "text": "number | null" - } - } - ] - }, + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "fieldName": "stickyHeader" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-thead", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TableHead", + "declaration": { + "name": "TableHead", + "module": "src/components/reusable/table/table-head.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-thead", + "declaration": { + "name": "TableHead", + "module": "src/components/reusable/table/table-head.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-header-row.ts", + "declarations": [ + { + "kind": "class", + "description": "`kyn-header-tr` Web Component.\n\nThe `` component is designed to function as the\nheader row within a table that's part of Shidoka's design system.", + "name": "TableHeaderRow", + "members": [ { - "kind": "method", - "name": "getProgressBarClasses", - "privacy": "private", - "parameters": [ - { - "name": "status", - "type": { - "text": "ProgressStatus" - } - } - ] + "kind": "field", + "name": "expandableColumnWidth", + "type": { + "text": "string" + }, + "default": "'64px'", + "description": "expandableColumnWidth: The width of the expandable column.", + "attribute": "expandableColumnWidth" }, { - "kind": "method", - "name": "getHelperText", - "privacy": "private" + "kind": "field", + "name": "multiSelectColumnWidth", + "type": { + "text": "string" + }, + "default": "'64px'", + "description": "multiSelectColumnWidth: The width of the multi-select column.", + "attribute": "multiSelectColumnWidth" }, { "kind": "method", - "name": "getCurrentStatus", - "privacy": "private", - "return": { - "type": { - "text": "ProgressStatus" - } - }, + "name": "handleToggleSelectionAll", "parameters": [ { - "name": "currentValue", + "name": "event", "type": { - "text": "number | null" + "text": "CustomEvent" } } - ] + ], + "description": "Toggles the selection state of all rows in the table." }, { "kind": "method", - "name": "startProgress", - "privacy": "private" + "name": "updateHeaderCheckboxState", + "parameters": [ + { + "name": "indeterminate", + "type": { + "text": "boolean" + } + }, + { + "name": "checked", + "type": { + "text": "boolean" + } + } + ], + "description": "Updates the state of the header checkbox based on the number of\nselected rows." }, { - "kind": "method", - "name": "cancelAnimation", - "privacy": "private" - } - ], - "attributes": [ - { - "name": "showInlineLoadStatus", + "kind": "field", + "name": "rowId", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Sets visibility of optional inline load status spinner.", - "fieldName": "showInlineLoadStatus" + "default": "''", + "description": "rowId: String - Unique identifier for the row.", + "attribute": "rowId", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "showActiveHelperText", + "kind": "field", + "name": "selected", "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" + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "attribute": "selected", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "status", + "kind": "field", + "name": "checkboxSelection", "type": { - "text": "'active' | 'success' | 'error'" + "text": "boolean" }, - "default": "'active'", - "description": "Sets progress bar status mode.", - "fieldName": "status" + "default": "false", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "attribute": "checkboxSelection", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "value", + "kind": "field", + "name": "dense", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial progress bar value (optionally hard-coded).", - "fieldName": "value" + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "attribute": "dense", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "max", + "kind": "field", + "name": "unread", "type": { - "text": "number" + "text": "boolean" }, - "default": "100", - "description": "Sets manual max value (default = 100).", - "fieldName": "max" + "default": "false", + "description": "Unread row state.", + "attribute": "unread", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "label", + "kind": "field", + "name": "locked", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets optional progress bar label.", - "fieldName": "label" + "default": "false", + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "locked", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "helperText", + "kind": "field", + "name": "expandable", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets optional helper text that appears underneath progress bar element.", - "fieldName": "helperText" + "default": "false", + "description": "expandable: Boolean indicating whether the row is expandable.", + "attribute": "expandable", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "unit", + "kind": "field", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets the unit for progress measurement (ex: 'MB', 'GB', '%')", - "fieldName": "unit" + "default": "false", + "description": "expanded: Boolean indicating whether the row is expanded.", + "attribute": "expanded", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "hideLabel", + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-progress-bar", - "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" - } - }, - { - "kind": "js", - "name": "RadioButtonGroup", - "declaration": { - "name": "RadioButtonGroup", - "module": "./radioButtonGroup" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/radioButton/radioButton.ts", - "declarations": [ - { - "kind": "class", - "description": "Radio button.", - "name": "RadioButton", - "slots": [ - { - "description": "Slot for label text.", - "name": "unnamed" - } - ], - "members": [ + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "disabled", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, { "kind": "field", - "name": "value", + "name": "preventHighlight", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Radio button value.", - "attribute": "value" + "default": "false", + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "attribute": "preventHighlight", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { "kind": "field", - "name": "disabled", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button disabled state, inherited from the parent group.", - "attribute": "disabled" + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "attribute": "dimmed", + "reflects": true, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", + "description": "Text string customization.", + "attribute": "textStrings", + "type": { + "text": "object" + }, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "kind": "field", + "name": "handleContextChange", + "description": "Updates the cell's dense and ellipsis properties when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ], + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { "kind": "method", - "name": "handleChange", - "privacy": "private", + "name": "handleRowSelectionChange", "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "Event" + "text": "CustomEvent" } } - ] + ], + "description": "Handles the change of selection state for a specific row.", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "kind": "method", + "name": "_handleUserInitiatedToggleExpando", + "parameters": [ + { + "name": "expanded", + "default": "!this.expanded" + } + ], + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "kind": "method", + "name": "_handleExpanding", + "privacy": "private", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } } ], "events": [ { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-radio-change" + "name": "on-header-checkbox-toggle", + "type": { + "text": "CustomEvent" + } + }, + { + "name": "on-row-select", + "type": { + "text": "CustomEvent" + }, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "name": "table-row-expando-beingtoggled", + "type": { + "text": "CustomEvent" + }, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + }, + { + "name": "table-row-expando-toggled", + "type": { + "text": "CustomEvent" + }, + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } } ], "attributes": [ { - "name": "value", + "name": "expandableColumnWidth", + "type": { + "text": "string" + }, + "default": "'64px'", + "description": "expandableColumnWidth: The width of the expandable column.", + "fieldName": "expandableColumnWidth" + }, + { + "name": "multiSelectColumnWidth", + "type": { + "text": "string" + }, + "default": "'64px'", + "description": "multiSelectColumnWidth: The width of the multi-select column.", + "fieldName": "multiSelectColumnWidth" + }, + { + "name": "rowId", "type": { "text": "string" }, "default": "''", - "description": "Radio button value.", - "fieldName": "value" + "description": "rowId: String - Unique identifier for the row.", + "fieldName": "rowId", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "disabled", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button disabled state, inherited from the parent group.", - "fieldName": "disabled" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-radio-button", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "RadioButton", - "declaration": { - "name": "RadioButton", - "module": "src/components/reusable/radioButton/radioButton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-radio-button", - "declaration": { - "name": "RadioButton", - "module": "src/components/reusable/radioButton/radioButton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/radioButton/radioButtonGroup.ts", - "declarations": [ - { - "kind": "class", - "description": "Radio button group container.", - "name": "RadioButtonGroup", - "slots": [ - { - "description": "Slot for individual radio buttons.", - "name": "unnamed" + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "fieldName": "selected", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "description": "Slot for description text.", - "name": "description" + "name": "checkboxSelection", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "fieldName": "checkboxSelection", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], - "members": [ - { - "kind": "field", - "name": "label", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text", - "attribute": "label" + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "fieldName": "dense", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "field", - "name": "required", + "name": "unread", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "description": "Unread row state.", + "fieldName": "unread", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, - { - "kind": "field", - "name": "disabled", + { + "name": "locked", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button group disabled state.", - "attribute": "disabled" + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "locked", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "kind": "field", - "name": "horizontal", + "name": "expandable", "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": "expandable: Boolean indicating whether the row is expandable.", + "fieldName": "expandable", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" } }, { - "kind": "method", - "name": "_handleSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateChildren", - "privacy": "private" - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" - } - } - ] - }, - { - "kind": "method", - "name": "_handleRadioChange", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the change event and emits the selected value.", - "name": "on-radio-group-change" - } - ], - "attributes": [ - { - "name": "label", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text", - "fieldName": "label" + "default": "false", + "description": "expanded: Boolean indicating whether the row is expanded.", + "fieldName": "expanded", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "required", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "disabled", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "disabled", + "name": "preventHighlight", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button group disabled state.", - "fieldName": "disabled" + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "fieldName": "preventHighlight", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { - "name": "horizontal", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Radio button group horizontal layout.", - "fieldName": "horizontal" + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "fieldName": "dimmed", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } }, { "name": "textStrings", "default": "_defaultTextStrings", "description": "Text string customization.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "fieldName": "textStrings", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } } ], "superclass": { - "name": "LitElement", - "package": "lit" + "name": "TableRow", + "module": "/src/components/reusable/table/table-row" }, - "tagName": "kyn-radio-button-group", - "customElement": true + "tagName": "kyn-header-tr", + "customElement": true, + "slots": [ + { + "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", + "name": "unnamed", + "inheritedFrom": { + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" + } + } + ] } ], "exports": [ { "kind": "js", - "name": "RadioButtonGroup", + "name": "TableHeaderRow", "declaration": { - "name": "RadioButtonGroup", - "module": "src/components/reusable/radioButton/radioButtonGroup.ts" + "name": "TableHeaderRow", + "module": "src/components/reusable/table/table-header-row.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-radio-button-group", - "declaration": { - "name": "RadioButtonGroup", - "module": "src/components/reusable/radioButton/radioButtonGroup.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/search/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Search", + "name": "kyn-header-tr", "declaration": { - "name": "Search", - "module": "./search" + "name": "TableHeaderRow", + "module": "src/components/reusable/table/table-header-row.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/search/search.ts", + "path": "src/components/reusable/table/table-header.ts", "declarations": [ { "kind": "class", - "description": "Search", - "name": "Search", + "description": "`kyn-th` Web Component.\n\nRepresents a custom table header cell (``) for Shidoka's design system tables.\nProvides sorting functionality when enabled and allows alignment customization.", + "name": "TableHeader", + "slots": [ + { + "description": "The content slot for adding header text or content.", + "name": "unnamed" + } + ], "members": [ { "kind": "field", - "name": "name", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Input name.", - "attribute": "name" + "default": "false", + "description": "Determines if the cell should have a denser layout.", + "attribute": "dense", + "reflects": true }, { "kind": "field", - "name": "label", + "name": "handleContextChange", + "description": "Updates the cell's dense properties when the context changes.", + "parameters": [ + { + "description": "The updated context.", + "name": "context", + "type": { + "text": "TableContextType" + } + } + ] + }, + { + "kind": "field", + "name": "align", "type": { - "text": "string" + "text": "TABLE_CELL_ALIGN" }, - "default": "'Search'", - "description": "Label text.", - "attribute": "label" + "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", + "attribute": "align", + "reflects": true }, { "kind": "field", - "name": "expandable", + "name": "sortable", "type": { "text": "boolean" }, "default": "false", - "description": "Expandable style search.", - "attribute": "expandable" + "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", + "attribute": "sortable", + "reflects": true }, { "kind": "field", - "name": "value", + "name": "sortDirection", + "type": { + "text": "SORT_DIRECTION" + }, + "description": "Specifies the direction of sorting applied to the column.", + "attribute": "sortDirection", + "reflects": true + }, + { + "kind": "field", + "name": "headerLabel", "type": { "text": "string" }, "default": "''", - "description": "Input value.", - "attribute": "value" + "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", + "attribute": "headerLabel" }, { "kind": "field", - "name": "size", + "name": "sortKey", "type": { "text": "string" - }, - "default": "'md'", - "description": "Input & button size.", - "attribute": "size" + }, + "default": "''", + "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", + "attribute": "sortKey" }, { "kind": "field", - "name": "disabled", + "name": "visiblyHidden", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "attribute": "disabled" + "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", + "attribute": "visiblyHidden" }, { "kind": "field", - "name": "suggestions", + "name": "width", "type": { - "text": "Array" + "text": "string" }, - "default": "[]", - "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", - "attribute": "suggestions" + "default": "''", + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "width", + "reflects": true }, { "kind": "field", - "name": "expandableSearchBtnDescription", + "name": "maxWidth", "type": { "text": "string" }, "default": "''", - "description": "Expandable style search button description (Required to support accessibility).", - "attribute": "expandableSearchBtnDescription" + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "maxWidth", + "reflects": true }, { "kind": "field", - "name": "assistiveTextStrings", - "default": "{\n searchSuggestions: 'Search suggestions.',\n noMatches: 'No matches found for',\n selected: 'Selected',\n found: 'Found',\n}", - "description": "Assistive text strings.", - "attribute": "assistiveTextStrings", + "name": "minWidth", "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "_buttonSizeMap", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleFocus", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleBlur", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleButtonClick", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "CustomEvent" - } - } - ] - }, - { - "kind": "method", - "name": "_handleSuggestionClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - }, - { - "name": "suggestion", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_handleSuggestionWithMouseUp", - "privacy": "private", - "parameters": [ - { - "name": "suggestion", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "_handleSuggestionWithMouseDown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "handleSearchKeydown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "text": "string" + }, + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "attribute": "minWidth", + "reflects": true }, { "kind": "method", - "name": "handleListKeydown", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "resetSort", + "description": "Resets the sorting direction of the component to its default state.\nUseful for initializing or clearing any applied sorting on the element." }, { "kind": "method", - "name": "handleKeyboard", + "name": "toggleSortDirection", "privacy": "private", - "parameters": [ - { - "name": "keyCode", - "type": { - "text": "number" - } - }, - { - "name": "target", - "type": { - "text": "string" - } - } - ] + "description": "Toggles the sort direction between ascending, descending, and default states.\nIt also dispatches an event to notify parent components of the sorting change." }, { "kind": "method", - "name": "_checkForMatchingSuggestions", - "privacy": "private" + "name": "getTextContent" } ], "events": [ { - "description": "Emits the value on text input/clear.", - "name": "on-input" + "name": "on-sort-changed", + "type": { + "text": "CustomEvent" + }, + "description": "Dispatched when the sort direction is changed." } ], "attributes": [ { - "name": "name", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Input name.", - "fieldName": "name" + "default": "false", + "description": "Determines if the cell should have a denser layout.", + "fieldName": "dense" }, { - "name": "label", + "name": "align", "type": { - "text": "string" + "text": "TABLE_CELL_ALIGN" }, - "default": "'Search'", - "description": "Label text.", - "fieldName": "label" + "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", + "fieldName": "align" }, { - "name": "expandable", + "name": "sortable", "type": { "text": "boolean" }, "default": "false", - "description": "Expandable style search.", - "fieldName": "expandable" + "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", + "fieldName": "sortable" }, { - "name": "value", + "name": "sortDirection", + "type": { + "text": "SORT_DIRECTION" + }, + "description": "Specifies the direction of sorting applied to the column.", + "fieldName": "sortDirection" + }, + { + "name": "headerLabel", "type": { "text": "string" }, "default": "''", - "description": "Input value.", - "fieldName": "value" + "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", + "fieldName": "headerLabel" }, { - "name": "size", + "name": "sortKey", "type": { "text": "string" }, - "default": "'md'", - "description": "Input & button size.", - "fieldName": "size" + "default": "''", + "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", + "fieldName": "sortKey" }, { - "name": "disabled", + "name": "visiblyHidden", "type": { "text": "boolean" }, "default": "false", - "description": "Disabled state.", - "fieldName": "disabled" + "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", + "fieldName": "visiblyHidden" }, { - "name": "suggestions", + "name": "width", "type": { - "text": "Array" + "text": "string" }, - "default": "[]", - "description": "Auto-suggest array of strings that should match the current value. Update this array externally after on-input.", - "fieldName": "suggestions" + "default": "''", + "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "width" }, { - "name": "expandableSearchBtnDescription", + "name": "maxWidth", "type": { "text": "string" }, "default": "''", - "description": "Expandable style search button description (Required to support accessibility).", - "fieldName": "expandableSearchBtnDescription" + "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "maxWidth" }, { - "name": "assistiveTextStrings", - "default": "_defaultTextStrings", - "description": "Assistive text strings.", - "fieldName": "assistiveTextStrings" + "name": "minWidth", + "type": { + "text": "string" + }, + "default": "''", + "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", + "fieldName": "minWidth" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-th", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TableHeader", + "declaration": { + "name": "TableHeader", + "module": "src/components/reusable/table/table-header.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-th", + "declaration": { + "name": "TableHeader", + "module": "src/components/reusable/table/table-header.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/table/table-legend-item.ts", + "declarations": [ + { + "kind": "class", + "description": "Table Legend Item", + "name": "TableLegendItem", + "slots": [ + { + "description": "Default slot for icon and text.", + "name": "unnamed" } ], + "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-search", + "tagName": "kyn-table-legend-item", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Search", + "name": "TableLegendItem", "declaration": { - "name": "Search", - "module": "src/components/reusable/search/search.ts" + "name": "TableLegendItem", + "module": "src/components/reusable/table/table-legend-item.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-search", + "name": "kyn-table-legend-item", "declaration": { - "name": "Search", - "module": "src/components/reusable/search/search.ts" + "name": "TableLegendItem", + "module": "src/components/reusable/table/table-legend-item.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/sideDrawer/index.ts", - "declarations": [], + "path": "src/components/reusable/table/table-legend.ts", + "declarations": [ + { + "kind": "class", + "description": "Table Legend", + "name": "TableLegend", + "slots": [ + { + "description": "Default slot for Legend Items.", + "name": "unnamed" + } + ], + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-table-legend", + "customElement": true + } + ], "exports": [ { "kind": "js", - "name": "SideDrawer", + "name": "TableLegend", "declaration": { - "name": "SideDrawer", - "module": "./sideDrawer" + "name": "TableLegend", + "module": "src/components/reusable/table/table-legend.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-table-legend", + "declaration": { + "name": "TableLegend", + "module": "src/components/reusable/table/table-legend.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/sideDrawer/sideDrawer.ts", + "path": "src/components/reusable/table/table-row.ts", "declarations": [ { "kind": "class", - "description": "Side Drawer.", - "name": "SideDrawer", + "description": "`kyn-tr` Web Component.\n\nRepresents a table row (``) equivalent for custom tables created with Shidoka's design system.\nIt primarily acts as a container for individual table cells and behaves similarly to a native `` element.", + "name": "TableRow", "slots": [ { - "description": "Slot for drawer body content.", + "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", "name": "unnamed" - }, - { - "description": "Slot for the anchor button content.", - "name": "anchor" } ], "members": [ { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Drawer open state.", - "attribute": "open" - }, - { - "kind": "field", - "name": "size", + "name": "rowId", "type": { "text": "string" }, - "default": "'md'", - "description": "Drawer size. `'md'`, or `'sm'`.", - "attribute": "size" + "default": "''", + "description": "rowId: String - Unique identifier for the row.", + "attribute": "rowId", + "reflects": true }, { "kind": "field", - "name": "titleText", + "name": "selected", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Title / Heading text, required.", - "attribute": "titleText" + "default": "false", + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "attribute": "selected", + "reflects": true }, { "kind": "field", - "name": "labelText", + "name": "checkboxSelection", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text, optional.", - "attribute": "labelText" + "default": "false", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "attribute": "checkboxSelection", + "reflects": true }, { "kind": "field", - "name": "submitBtnText", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Ok'", - "description": "Submit button text.", - "attribute": "submitBtnText" + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "attribute": "dense" }, { "kind": "field", - "name": "cancelBtnText", + "name": "unread", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Cancel'", - "description": "Cancel button text.", - "attribute": "cancelBtnText" + "default": "false", + "description": "Unread row state.", + "attribute": "unread" }, { "kind": "field", - "name": "submitBtnDisabled", + "name": "locked", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the primary button.", - "attribute": "submitBtnDisabled" + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "locked", + "reflects": true }, { "kind": "field", - "name": "hideFooter", + "name": "expandable", "type": { "text": "boolean" }, "default": "false", - "description": "Determine whether needs footer", - "attribute": "hideFooter" + "description": "expandable: Boolean indicating whether the row is expandable.", + "attribute": "expandable", + "reflects": true }, { "kind": "field", - "name": "destructive", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "attribute": "destructive" + "description": "expanded: Boolean indicating whether the row is expanded.", + "attribute": "expanded", + "reflects": true }, { "kind": "field", - "name": "secondaryButtonText", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "attribute": "secondaryButtonText" + "default": "false", + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "attribute": "disabled", + "reflects": true }, { "kind": "field", - "name": "showSecondaryButton", + "name": "preventHighlight", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the secondary button.", - "attribute": "showSecondaryButton" + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "attribute": "preventHighlight", + "reflects": true }, { "kind": "field", - "name": "hideCancelButton", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the cancel button.", - "attribute": "hideCancelButton" + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "attribute": "dimmed", + "reflects": true }, { "kind": "field", - "name": "beforeClose", + "name": "textStrings", + "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", + "description": "Text string customization.", + "attribute": "textStrings", "type": { - "text": "Function" - }, - "description": "Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`." - }, - { - "kind": "method", - "name": "_openDrawer", - "privacy": "private" + "text": "object" + } }, { - "kind": "method", - "name": "_closeDrawer", - "privacy": "private", + "kind": "field", + "name": "handleContextChange", + "description": "Updates the cell's dense and ellipsis properties when the context changes.", "parameters": [ { - "name": "e", - "type": { - "text": "Event" - } - }, - { - "name": "returnValue", + "description": "The updated context.", + "name": "context", "type": { - "text": "string" + "text": "TableContextType" } } ] }, { "kind": "method", - "name": "_emitCloseEvent", - "privacy": "private", + "name": "handleRowSelectionChange", "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "Event" + "text": "CustomEvent" } } + ], + "description": "Handles the change of selection state for a specific row." + }, + { + "kind": "method", + "name": "_handleUserInitiatedToggleExpando", + "parameters": [ + { + "name": "expanded", + "default": "!this.expanded" + } ] + }, + { + "kind": "method", + "name": "_handleExpanding", + "privacy": "private" } ], "events": [ { - "description": "Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).", - "name": "on-close" - } - ], - "attributes": [ + "name": "on-row-select", + "type": { + "text": "CustomEvent" + } + }, { - "name": "open", + "name": "table-row-expando-beingtoggled", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Drawer open state.", - "fieldName": "open" + "text": "CustomEvent" + } }, { - "name": "size", + "name": "table-row-expando-toggled", + "type": { + "text": "CustomEvent" + } + } + ], + "attributes": [ + { + "name": "rowId", "type": { "text": "string" }, - "default": "'md'", - "description": "Drawer size. `'md'`, or `'sm'`.", - "fieldName": "size" + "default": "''", + "description": "rowId: String - Unique identifier for the row.", + "fieldName": "rowId" }, { - "name": "titleText", + "name": "selected", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Title / Heading text, required.", - "fieldName": "titleText" + "default": "false", + "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", + "fieldName": "selected" }, { - "name": "labelText", + "name": "checkboxSelection", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text, optional.", - "fieldName": "labelText" + "default": "false", + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "fieldName": "checkboxSelection" }, { - "name": "submitBtnText", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Ok'", - "description": "Submit button text.", - "fieldName": "submitBtnText" + "default": "false", + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "fieldName": "dense" }, { - "name": "cancelBtnText", + "name": "unread", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Cancel'", - "description": "Cancel button text.", - "fieldName": "cancelBtnText" + "default": "false", + "description": "Unread row state.", + "fieldName": "unread" }, { - "name": "submitBtnDisabled", + "name": "locked", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the primary button.", - "fieldName": "submitBtnDisabled" + "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "locked" }, { - "name": "hideFooter", + "name": "expandable", "type": { "text": "boolean" }, "default": "false", - "description": "Determine whether needs footer", - "fieldName": "hideFooter" + "description": "expandable: Boolean indicating whether the row is expandable.", + "fieldName": "expandable" }, { - "name": "destructive", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Changes the primary button styles to indicate the action is destructive.", - "fieldName": "destructive" + "description": "expanded: Boolean indicating whether the row is expanded.", + "fieldName": "expanded" }, { - "name": "secondaryButtonText", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Secondary'", - "description": "Secondary button text.", - "fieldName": "secondaryButtonText" + "default": "false", + "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", + "fieldName": "disabled" }, { - "name": "showSecondaryButton", + "name": "preventHighlight", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the secondary button.", - "fieldName": "showSecondaryButton" + "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", + "fieldName": "preventHighlight" }, { - "name": "hideCancelButton", + "name": "dimmed", "type": { "text": "boolean" }, "default": "false", - "description": "Hides the cancel button.", - "fieldName": "hideCancelButton" + "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", + "fieldName": "dimmed" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-side-drawer", + "tagName": "kyn-tr", "customElement": true } ], "exports": [ { "kind": "js", - "name": "SideDrawer", + "name": "TableRow", "declaration": { - "name": "SideDrawer", - "module": "src/components/reusable/sideDrawer/sideDrawer.ts" + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-side-drawer", - "declaration": { - "name": "SideDrawer", - "module": "src/components/reusable/sideDrawer/sideDrawer.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/stepper/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Stepper", - "declaration": { - "name": "Stepper", - "module": "./stepper" - } - }, - { - "kind": "js", - "name": "StepperItem", - "declaration": { - "name": "StepperItem", - "module": "./stepperItem" - } - }, - { - "kind": "js", - "name": "StepperItemChild", + "name": "kyn-tr", "declaration": { - "name": "StepperItemChild", - "module": "./stepperItemChild" + "name": "TableRow", + "module": "src/components/reusable/table/table-row.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/stepper/stepper.ts", + "path": "src/components/reusable/table/table-toolbar.ts", "declarations": [ { "kind": "class", - "description": "Stepper", - "name": "Stepper", + "description": "`kyn-table-toolbar` Web Component.\n\nThis component provides a toolbar for tables, primarily featuring a title and additional content.\nThe title is rendered prominently, while the slot can be used for controls, buttons, or other interactive elements.", + "name": "TableToolbar", "slots": [ { - "description": "Slot for step items.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "stepperType", - "type": { - "text": "string" - }, - "default": "'procedure'", - "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", - "attribute": "stepperType" - }, - { - "kind": "field", - "name": "vertical", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Wheter the stepper is in vertical type.", - "attribute": "vertical" - }, - { - "kind": "field", - "name": "stepperSize", - "type": { - "text": "string" - }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "attribute": "stepperSize" - }, - { - "kind": "field", - "name": "currentIndex", - "type": { - "text": "number" - }, - "default": "0", - "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", - "attribute": "currentIndex" - }, - { - "kind": "method", - "name": "_handleSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateChildren", - "privacy": "private" - }, - { - "kind": "method", - "name": "_determineFirstLastSteps", - "privacy": "private" - }, - { - "kind": "method", - "name": "_handleStepClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the event and emits the active step and original event details when click on any step title. This is only for procedure type stepper. Status stepper doesn't emit this event.", - "name": "on-click" + "description": "The primary content slot for controls, buttons, or other toolbar content.", + "name": "unnamed" } ], - "attributes": [ + "members": [ { - "name": "stepperType", + "kind": "field", + "name": "tableTitle", "type": { "text": "string" }, - "default": "'procedure'", - "description": "Stepper type `'procedure'` & `'status'`.\n\nprocedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n\nstatus: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n\nNote: Read the stepper guidelines for more info.", - "fieldName": "stepperType" + "default": "''", + "description": "The title for the toolbar", + "attribute": "tableTitle" }, { - "name": "vertical", + "kind": "field", + "name": "tableSubtitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Wheter the stepper is in vertical type.", - "fieldName": "vertical" - }, + "default": "''", + "description": "The subtitle for the toolbar", + "attribute": "tableSubtitle" + } + ], + "attributes": [ { - "name": "stepperSize", + "name": "tableTitle", "type": { "text": "string" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "fieldName": "stepperSize" + "default": "''", + "description": "The title for the toolbar", + "fieldName": "tableTitle" }, { - "name": "currentIndex", + "name": "tableSubtitle", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "description": "Curent index of stepper. Usefull for navigation logic like next, prev etc.", - "fieldName": "currentIndex" + "default": "''", + "description": "The subtitle for the toolbar", + "fieldName": "tableSubtitle" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-stepper", + "tagName": "kyn-table-toolbar", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Stepper", + "name": "TableToolbar", "declaration": { - "name": "Stepper", - "module": "src/components/reusable/stepper/stepper.ts" + "name": "TableToolbar", + "module": "src/components/reusable/table/table-toolbar.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-stepper", + "name": "kyn-table-toolbar", "declaration": { - "name": "Stepper", - "module": "src/components/reusable/stepper/stepper.ts" + "name": "TableToolbar", + "module": "src/components/reusable/table/table-toolbar.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/stepper/stepperItem.ts", + "path": "src/components/reusable/table/table.skeleton.ts", "declarations": [ { "kind": "class", - "description": "Stepper Item.", - "name": "StepperItem", - "slots": [ - { - "description": "Slot for tooltip.", - "name": "tooltip" - }, + "description": "`kyn-table-skeleton` Web Component.\nA skeleton loading state for the table component that mirrors its structure.", + "name": "TableSkeleton", + "members": [ { - "description": "Children slot. Used for nested children in vertical stepper. Visible only when step state is active. Do not use inside stepperType `'status'`.", - "name": "child" + "kind": "field", + "name": "rows", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of skeleton rows to display.", + "attribute": "rows" }, - { - "description": "Optional slot for content in vertical stepper. Visible only when step state is active.", - "name": "unnamed" - } - ], - "members": [ { "kind": "field", - "name": "vertical", + "name": "showPagination", "type": { "text": "boolean" }, "default": "false", - "description": "Whether the stepper is in vertical type.", - "attribute": "vertical" + "description": "Shows/hides pagination skeleton.", + "attribute": "showPagination" }, { "kind": "field", - "name": "stepSize", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "attribute": "stepSize" + "default": "false", + "description": "Sets dense mode value.", + "attribute": "dense" }, { "kind": "field", - "name": "stepName", + "name": "striped", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step name.", - "attribute": "stepName" + "default": "false", + "description": "Sets striped rows value.", + "attribute": "striped" }, { "kind": "field", - "name": "stepTitle", + "name": "hideTableTitles", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step title.", - "attribute": "stepTitle" + "default": "false", + "description": "Show/hide table header.", + "attribute": "hideTableTitles" }, { "kind": "field", - "name": "stepLink", + "name": "fixedLayout", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step link.", - "attribute": "stepLink" + "default": "false", + "description": "Fixed layout boolean.", + "attribute": "fixedLayout" }, { "kind": "field", - "name": "stepState", + "name": "tableTitle", "type": { "text": "string" }, - "default": "'pending'", - "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", - "attribute": "stepState" + "default": "''", + "description": "Sets title to display in the table toolbar.", + "attribute": "tableTitle" }, { "kind": "field", - "name": "disabled", + "name": "tableSubtitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Disable step.", - "attribute": "disabled" + "default": "''", + "description": "Sets subtitle to display in the table toolbar.", + "attribute": "tableSubtitle" }, { "kind": "field", - "name": "showCounter", + "name": "showGlobalFilter", "type": { "text": "boolean" }, "default": "false", - "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", - "attribute": "showCounter" - }, - { - "kind": "method", - "name": "_handleChildToggle", - "privacy": "private" + "description": "Shows/hides golbal filter skeleton.", + "attribute": "showGlobalFilter" }, { "kind": "method", - "name": "_handleStepClick", + "name": "renderSkeletonCell", "privacy": "private", "parameters": [ { - "name": "e", + "name": "type", "type": { - "text": "any" + "text": "'thead' | 'tbody'" } } ] - }, - { - "kind": "method", - "name": "_handleChildSlotChange", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateChildren", - "privacy": "private" - }, - { - "kind": "method", - "name": "getProgressValue", - "privacy": "private", - "return": { - "type": { - "text": "number" - } - } - } - ], - "events": [ - { - "description": "Emits the step details to the parent stepper component when click on step title.", - "name": "on-step-click" } ], "attributes": [ { - "name": "vertical", + "name": "rows", + "type": { + "text": "number" + }, + "default": "5", + "description": "Number of skeleton rows to display.", + "fieldName": "rows" + }, + { + "name": "showPagination", "type": { "text": "boolean" }, "default": "false", - "description": "Whether the stepper is in vertical type.", - "fieldName": "vertical" + "description": "Shows/hides pagination skeleton.", + "fieldName": "showPagination" }, { - "name": "stepSize", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "'large'", - "description": "Stepper size `'large'` & `'small'`.", - "fieldName": "stepSize" + "default": "false", + "description": "Sets dense mode value.", + "fieldName": "dense" }, { - "name": "stepName", + "name": "striped", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step name.", - "fieldName": "stepName" + "default": "false", + "description": "Sets striped rows value.", + "fieldName": "striped" }, { - "name": "stepTitle", + "name": "hideTableTitles", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step title.", - "fieldName": "stepTitle" + "default": "false", + "description": "Show/hide table header.", + "fieldName": "hideTableTitles" }, { - "name": "stepLink", + "name": "fixedLayout", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Step link.", - "fieldName": "stepLink" + "default": "false", + "description": "Fixed layout boolean.", + "fieldName": "fixedLayout" }, { - "name": "stepState", + "name": "tableTitle", "type": { "text": "string" - }, - "default": "'pending'", - "description": "Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.\n\n`'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.", - "fieldName": "stepState" + }, + "default": "''", + "description": "Sets title to display in the table toolbar.", + "fieldName": "tableTitle" }, { - "name": "disabled", + "name": "tableSubtitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Disable step.", - "fieldName": "disabled" + "default": "''", + "description": "Sets subtitle to display in the table toolbar.", + "fieldName": "tableSubtitle" }, { - "name": "showCounter", + "name": "showGlobalFilter", "type": { "text": "boolean" }, "default": "false", - "description": "Optional. Show counter for vertical stepper when stepState is `'pending'`.", - "fieldName": "showCounter" + "description": "Shows/hides golbal filter skeleton.", + "fieldName": "showGlobalFilter" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-stepper-item", + "tagName": "kyn-table-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "StepperItem", + "name": "TableSkeleton", "declaration": { - "name": "StepperItem", - "module": "src/components/reusable/stepper/stepperItem.ts" + "name": "TableSkeleton", + "module": "src/components/reusable/table/table.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-stepper-item", + "name": "kyn-table-skeleton", "declaration": { - "name": "StepperItem", - "module": "src/components/reusable/stepper/stepperItem.ts" + "name": "TableSkeleton", + "module": "src/components/reusable/table/table.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/stepper/stepperItemChild.ts", + "path": "src/components/reusable/table/table.ts", "declarations": [ { "kind": "class", - "description": "Stepper Item child.", - "name": "StepperItemChild", - "slots": [ - { - "description": "Slot for other elements.", - "name": "unnamed" - } - ], + "description": "`kyn-table` Web Component.\nThis component provides a table with sorting, pagination, and selection capabilities.\nIt is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.", + "name": "Table", "members": [ { "kind": "field", - "name": "childTitle", + "name": "checkboxSelection", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Child Title. Required for nested child inside step.", - "attribute": "childTitle" + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "default": "false", + "attribute": "checkboxSelection" }, { "kind": "field", - "name": "childLink", + "name": "striped", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Child link.", - "attribute": "childLink" + "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", + "default": "false", + "attribute": "striped" }, { "kind": "field", - "name": "childSubTitle", + "name": "stickyHeader", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Optional Child Subtitle.", - "attribute": "childSubTitle" + "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", + "default": "false", + "attribute": "stickyHeader" }, { "kind": "field", - "name": "childState", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "'pending'", - "description": "Child State. `'pending'`, `'active'` & `'completed'`.", - "attribute": "childState" + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "default": "false", + "attribute": "dense" + }, + { + "kind": "field", + "name": "fixedLayout", + "type": { + "text": "boolean" + }, + "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", + "default": "false", + "attribute": "fixedLayout" }, { "kind": "method", - "name": "_handleChildStepClick", + "name": "_updateHeaderCheckbox", + "privacy": "private", + "description": "Updates the state of the header checkbox based on the number of\nselected rows." + }, + { + "kind": "method", + "name": "_handleRowSelectionChange", "privacy": "private", "parameters": [ { - "name": "e", + "name": "event", "type": { - "text": "Event" + "text": "CustomEvent" } } - ] + ], + "description": "Handles the change of selection state for a specific row." }, { "kind": "method", - "name": "getProgressValue", + "name": "_toggleSelectionAll", "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "CustomEvent" + } + } + ], + "description": "Toggles the selection state of all rows in the table." + }, + { + "kind": "method", + "name": "updateAfterExternalChanges", + "privacy": "public", + "description": "Resets the selection state of all rows in the table.\nThis method is called when the table is reset or cleared.", "return": { "type": { - "text": "number" + "text": "" + } + } + }, + { + "kind": "method", + "name": "getSelectedRows", + "privacy": "public", + "description": "Returns the selected rows in the table.", + "return": { + "type": { + "text": "" } } + }, + { + "kind": "method", + "name": "_handleRowsChange", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "CustomEvent" + }, + "description": "The custom event containing the updated rows." + } + ], + "description": "Handles the change of rows in the table body." + }, + { + "kind": "method", + "name": "_updateSelectionStates", + "privacy": "private" } ], "events": [ { - "description": "Emits event on child click. Only for vertical mode.", - "name": "on-child-click" + "name": "on-row-selection-change", + "type": { + "text": "CustomEvent" + }, + "description": "Dispatched when the selection state of a row is toggled." + }, + { + "name": "on-all-rows-selection-change", + "type": { + "text": "CustomEvent" + }, + "description": "Dispatched when the selection state of all rows is toggled." } ], "attributes": [ { - "name": "childTitle", + "name": "checkboxSelection", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Child Title. Required for nested child inside step.", - "fieldName": "childTitle" + "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", + "default": "false", + "fieldName": "checkboxSelection" }, { - "name": "childLink", + "name": "striped", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Child link.", - "fieldName": "childLink" + "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", + "default": "false", + "fieldName": "striped" }, { - "name": "childSubTitle", + "name": "stickyHeader", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Optional Child Subtitle.", - "fieldName": "childSubTitle" + "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", + "default": "false", + "fieldName": "stickyHeader" }, { - "name": "childState", + "name": "dense", "type": { - "text": "string" + "text": "boolean" }, - "default": "'pending'", - "description": "Child State. `'pending'`, `'active'` & `'completed'`.", - "fieldName": "childState" + "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", + "default": "false", + "fieldName": "dense" + }, + { + "name": "fixedLayout", + "type": { + "text": "boolean" + }, + "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", + "default": "false", + "fieldName": "fixedLayout" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-stepper-item-child", + "tagName": "kyn-table", "customElement": true } - ], - "exports": [ - { - "kind": "js", - "name": "StepperItemChild", - "declaration": { - "name": "StepperItemChild", - "module": "src/components/reusable/stepper/stepperItemChild.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-stepper-item-child", - "declaration": { - "name": "StepperItemChild", - "module": "src/components/reusable/stepper/stepperItemChild.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/defs.ts", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/index.ts", - "declarations": [], + ], "exports": [ { "kind": "js", "name": "Table", "declaration": { "name": "Table", - "module": "./table" - } - }, - { - "kind": "js", - "name": "TableCell", - "declaration": { - "name": "TableCell", - "module": "./table-cell" - } - }, - { - "kind": "js", - "name": "TableRow", - "declaration": { - "name": "TableRow", - "module": "./table-row" - } - }, - { - "kind": "js", - "name": "TableBody", - "declaration": { - "name": "TableBody", - "module": "./table-body" - } - }, - { - "kind": "js", - "name": "TableHead", - "declaration": { - "name": "TableHead", - "module": "./table-head" - } - }, - { - "kind": "js", - "name": "TableHeader", - "declaration": { - "name": "TableHeader", - "module": "./table-header" - } - }, - { - "kind": "js", - "name": "TableFoot", - "declaration": { - "name": "TableFoot", - "module": "./table-foot" - } - }, - { - "kind": "js", - "name": "TableFooter", - "declaration": { - "name": "TableFooter", - "module": "./table-footer" - } - }, - { - "kind": "js", - "name": "TableLegend", - "declaration": { - "name": "TableLegend", - "module": "./table-legend" - } - }, - { - "kind": "js", - "name": "TableLegendItem", - "declaration": { - "name": "TableLegendItem", - "module": "./table-legend-item" - } - }, - { - "kind": "js", - "name": "TableToolbar", - "declaration": { - "name": "TableToolbar", - "module": "./table-toolbar" + "module": "src/components/reusable/table/table.ts" } }, { - "kind": "js", - "name": "TableContainer", + "kind": "custom-element-definition", + "name": "kyn-table", "declaration": { - "name": "TableContainer", - "module": "./table-container" + "name": "Table", + "module": "src/components/reusable/table/table.ts" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tabs/index.ts", + "declarations": [], + "exports": [ { "kind": "js", - "name": "TableHeaderRow", + "name": "Tabs", "declaration": { - "name": "TableHeaderRow", - "module": "./table-header-row" + "name": "Tabs", + "module": "./tabs" } }, { "kind": "js", - "name": "TableExpandedRow", + "name": "Tab", "declaration": { - "name": "TableExpandedRow", - "module": "./table-expanded-row" + "name": "Tab", + "module": "./tab" } }, { "kind": "js", - "name": "TableSkeleton", + "name": "TabPanel", "declaration": { - "name": "TableSkeleton", - "module": "./table.skeleton" + "name": "TabPanel", + "module": "./tabPanel" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-body.ts", + "path": "src/components/reusable/tabs/tab.ts", "declarations": [ { "kind": "class", - "description": "`kyn-tbody` Web Component.\n\nRepresents the body section of Shidoka's design system tables. Designed to provide\na consistent look and feel, and can offer striped rows for enhanced readability.", - "name": "TableBody", + "description": "Tabs.", + "name": "Tab", "slots": [ { - "description": "The content slot for adding rows (``) within the table body.", + "description": "Slot for tab button text.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "striped", + "name": "id", + "type": { + "text": "string" + }, + "default": "''", + "description": "Tab ID, required.", + "attribute": "id", + "reflects": true + }, + { + "kind": "field", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Determines if the rows in the table body should be striped.", - "attribute": "striped", + "description": "Tab selected state. Must match Tab Panel visible state.", + "attribute": "selected", "reflects": true }, { "kind": "field", - "name": "handleContextChange", - "description": "Updates the row's striped property when the context changes.", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Tab disabled state.", + "attribute": "disabled" + }, + { + "kind": "method", + "name": "_handleClick", + "privacy": "private", "parameters": [ { - "description": "The updated context.", - "name": "context", + "name": "e", "type": { - "text": "TableContextType" - } + "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." } ], - "events": [ + "attributes": [ { - "name": "on-rows-change", + "name": "id", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Dispatched when the rows in the table body change." - } - ], - "attributes": [ + "default": "''", + "description": "Tab ID, required.", + "fieldName": "id" + }, { - "name": "striped", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Determines if the rows in the table body should be striped.", - "fieldName": "striped" + "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-tbody", + "tagName": "kyn-tab", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableBody", + "name": "Tab", "declaration": { - "name": "TableBody", - "module": "src/components/reusable/table/table-body.ts" + "name": "Tab", + "module": "src/components/reusable/tabs/tab.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tbody", + "name": "kyn-tab", "declaration": { - "name": "TableBody", - "module": "src/components/reusable/table/table-body.ts" + "name": "Tab", + "module": "src/components/reusable/tabs/tab.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-cell.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-td` Web Component.\n\nRepresents a table cell (data cell) within Shidoka's design system tables.\nAllows customization of alignment and can reflect the sort direction when\nused within sortable columns.", - "name": "TableCell", - "slots": [ - { - "description": "The content slot for adding table data inside the cell.", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "attribute": "dense", - "reflects": true - }, - { - "kind": "field", - "name": "align", - "type": { - "text": "TABLE_CELL_ALIGN" - }, - "description": "Determines the text alignment of the table cell's content.", - "attribute": "align", - "reflects": true - }, - { - "kind": "field", - "name": "width", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "width", - "reflects": true - }, + "path": "src/components/reusable/tabs/tabPanel.ts", + "declarations": [ + { + "kind": "class", + "description": "Tabs.", + "name": "TabPanel", + "slots": [ { - "kind": "field", - "name": "maxWidth", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "maxWidth", - "reflects": true - }, + "description": "Slot for tab content.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "minWidth", + "name": "tabId", "type": { "text": "string" }, "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "minWidth", - "reflects": true + "description": "Matching Tab ID, required.", + "attribute": "tabId" }, { "kind": "field", - "name": "disabled", + "name": "visible", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the cell.", - "attribute": "disabled", + "description": "Tab Panel visible state. Must match Tab selected state.", + "attribute": "visible", "reflects": true }, { "kind": "field", - "name": "dimmed", + "name": "noPadding", "type": { "text": "boolean" }, "default": "false", - "description": "Dim the cell.", - "attribute": "dimmed", - "reflects": true - }, - { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense properties when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] + "description": "Remove side padding (left/right) on tab panel.", + "attribute": "noPadding" } ], "attributes": [ { - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "fieldName": "dense" - }, - { - "name": "align", - "type": { - "text": "TABLE_CELL_ALIGN" - }, - "description": "Determines the text alignment of the table cell's content.", - "fieldName": "align" - }, - { - "name": "width", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "width" - }, - { - "name": "maxWidth", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "maxWidth" - }, - { - "name": "minWidth", + "name": "tabId", "type": { "text": "string" }, "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "minWidth" + "description": "Matching Tab ID, required.", + "fieldName": "tabId" }, { - "name": "disabled", + "name": "visible", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the cell.", - "fieldName": "disabled" + "description": "Tab Panel visible state. Must match Tab selected state.", + "fieldName": "visible" }, { - "name": "dimmed", + "name": "noPadding", "type": { "text": "boolean" }, "default": "false", - "description": "Dim the cell.", - "fieldName": "dimmed" + "description": "Remove side padding (left/right) on tab panel.", + "fieldName": "noPadding" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-td", + "tagName": "kyn-tab-panel", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableCell", + "name": "TabPanel", "declaration": { - "name": "TableCell", - "module": "src/components/reusable/table/table-cell.ts" + "name": "TabPanel", + "module": "src/components/reusable/tabs/tabPanel.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-td", + "name": "kyn-tab-panel", "declaration": { - "name": "TableCell", - "module": "src/components/reusable/table/table-cell.ts" + "name": "TabPanel", + "module": "src/components/reusable/tabs/tabPanel.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-container.ts", + "path": "src/components/reusable/tabs/tabs.ts", "declarations": [ { "kind": "class", - "description": "`kyn-table-container` Web Component.\n\nProvides a container for Shidoka's design system tables. It's designed to encapsulate\nand apply styles uniformly across the table elements.", - "name": "TableContainer", + "description": "Tabs.", + "name": "Tabs", "slots": [ { - "description": "The content slot for adding table and related elements.", + "description": "Slot for kyn-tab-panel components.", "name": "unnamed" + }, + { + "description": "Slot for kyn-tab components.", + "name": "tabs" + } + ], + "members": [ + { + "kind": "field", + "name": "tabStyle", + "type": { + "text": "string" + }, + "default": "'contained'", + "description": "Tab style. `'contained'` or `'line'`.", + "attribute": "tabStyle" + }, + { + "kind": "field", + "name": "tabSize", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", + "attribute": "tabSize" + }, + { + "kind": "field", + "name": "vertical", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Vertical orientation.", + "attribute": "vertical" + }, + { + "kind": "field", + "name": "disableAutoFocusUpdate", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", + "attribute": "disableAutoFocusUpdate" + }, + { + "kind": "method", + "name": "_handleSlotChangeTabs", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + }, + { + "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": "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": "method", + "name": "_emitChangeEvent", + "privacy": "private", + "parameters": [ + { + "name": "origEvent", + "type": { + "text": "any" + }, + "description": "The origEvent parameter is the original event object that triggered the\nchange event. It could be any type of event object, such as a click event or a keydown event." + }, + { + "name": "selectedTabId", + "type": { + "text": "string" + }, + "description": "The selectedTabId parameter is a string that represents the ID of\nthe selected tab." + } + ], + "description": "Creates and dispatches a custom event called 'on-change' with the provided original event and\nselected tab ID as details." + }, + { + "kind": "method", + "name": "_handleKeyboard", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + }, + "description": "The parameter `e` is an event object that represents the keyboard event. It\ncontains information about the keyboard event, such as the key code of the pressed key." + } + ], + "description": "Handles keyboard events for navigating between tabs.", + "return": { + "type": { + "text": "" + } + } } ], - "members": [ + "events": [ { - "kind": "field", - "name": "tabIndex", - "type": { - "text": "number" - }, - "default": "0", - "attribute": "tabIndex", - "reflects": true + "description": "Emits the new selected Tab ID when switching tabs.", + "name": "on-change" } ], "attributes": [ { - "name": "tabIndex", + "name": "tabStyle", "type": { - "text": "number" + "text": "string" }, - "default": "0", - "fieldName": "tabIndex" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-container", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableContainer", - "declaration": { - "name": "TableContainer", - "module": "src/components/reusable/table/table-container.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-table-container", - "declaration": { - "name": "TableContainer", - "module": "src/components/reusable/table/table-container.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-context.ts", - "declarations": [ - { - "kind": "variable", - "name": "tableContext" - } - ], - "exports": [ - { - "kind": "js", - "name": "tableContext", - "declaration": { - "name": "tableContext", - "module": "src/components/reusable/table/table-context.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-expanded-row.ts", - "declarations": [ - { - "kind": "class", - "description": "\n`kyn-expanded-tr` Web Component.\n\nDesigned to display additional details for a row in a table.\nThe row is expandable and can be expanded/collapsed by toggling the plus/minus icons.", - "name": "TableExpandedRow", - "slots": [ - { - "description": "The slot for adding content to the expandable details section.", - "name": "unnamed" - } - ], - "members": [ + "default": "'contained'", + "description": "Tab style. `'contained'` or `'line'`.", + "fieldName": "tabStyle" + }, { - "kind": "field", - "name": "colSpan", + "name": "tabSize", "type": { - "text": "number" + "text": "string" }, - "default": "1", - "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", - "attribute": "colspan" + "default": "'md'", + "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", + "fieldName": "tabSize" }, { - "kind": "field", - "name": "expanded", + "name": "vertical", "type": { "text": "boolean" }, "default": "false", - "description": "`true` if the table row should be expanded.", - "attribute": "expanded", - "reflects": true - } - ], - "attributes": [ - { - "name": "colspan", - "type": { - "text": "number" - }, - "default": "1", - "description": "The number of columns that the expanded row should span.\nReflects the `colspan` attribute.", - "fieldName": "colSpan" + "description": "Vertical orientation.", + "fieldName": "vertical" }, { - "name": "expanded", + "name": "disableAutoFocusUpdate", "type": { "text": "boolean" }, "default": "false", - "description": "`true` if the table row should be expanded.", - "fieldName": "expanded" + "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", + "fieldName": "disableAutoFocusUpdate" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-expanded-tr", + "tagName": "kyn-tabs", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableExpandedRow", + "name": "Tabs", "declaration": { - "name": "TableExpandedRow", - "module": "src/components/reusable/table/table-expanded-row.ts" + "name": "Tabs", + "module": "src/components/reusable/tabs/tabs.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-expanded-tr", + "name": "kyn-tabs", "declaration": { - "name": "TableExpandedRow", - "module": "src/components/reusable/table/table-expanded-row.ts" + "name": "Tabs", + "module": "src/components/reusable/tabs/tabs.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-foot.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-tfoot` Web Component.\n\nRepresents a custom table foot (``) for Shidoka's design system tables.\nDesigned to contain and style table footer rows (``) and footer cells (``).", - "name": "TableFoot", - "slots": [ - { - "description": "The content slot for adding table foot rows.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-tfoot", - "customElement": true - } - ], + "path": "src/components/reusable/tag/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "TableFoot", + "name": "Tag", "declaration": { - "name": "TableFoot", - "module": "src/components/reusable/table/table-foot.ts" + "name": "Tag", + "module": "./tag" } }, - { - "kind": "custom-element-definition", - "name": "kyn-tfoot", - "declaration": { - "name": "TableFoot", - "module": "src/components/reusable/table/table-foot.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-footer.ts", - "declarations": [ - { - "kind": "class", - "description": "Table Footer\n\nIntended to contain Legend and Pagination.", - "name": "TableFooter", - "slots": [ - { - "description": "Default slot.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-footer", - "customElement": true - } - ], - "exports": [ { "kind": "js", - "name": "TableFooter", + "name": "TagGroup", "declaration": { - "name": "TableFooter", - "module": "src/components/reusable/table/table-footer.ts" + "name": "TagGroup", + "module": "./tagGroup" } }, { - "kind": "custom-element-definition", - "name": "kyn-table-footer", + "kind": "js", + "name": "TagSkeleton", "declaration": { - "name": "TableFooter", - "module": "src/components/reusable/table/table-footer.ts" + "name": "TagSkeleton", + "module": "./tag.skeleton" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-head.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-thead` Web Component.\n\nRepresents a custom table head (``) for Shidoka's design system tables.\nDesigned to contain and style table header rows (``) and header cells (``).", - "name": "TableHead", - "slots": [ - { - "description": "The content slot for adding table header rows (``).", - "name": "unnamed" - } - ], - "members": [ - { - "kind": "field", - "name": "stickyHeader", - "type": { - "text": "boolean" - }, - "default": "false", - "attribute": "stickyHeader", - "reflects": true - }, - { - "kind": "field", - "name": "handleContextChange", - "description": "Update the stickyHeader property when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] - }, + "path": "src/components/reusable/tag/tag.skeleton.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "TagSkeleton", + "members": [ { - "kind": "method", - "name": "handleChildSort", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "CustomEvent" - } - } - ] + "kind": "field", + "name": "tagSize", + "type": { + "text": "string" + }, + "default": "'sm'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "attribute": "tagSize" } ], "attributes": [ { - "name": "stickyHeader", + "name": "tagSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "fieldName": "stickyHeader" + "default": "'sm'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "fieldName": "tagSize" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-thead", + "tagName": "kyn-tag-skeleton", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableHead", + "name": "TagSkeleton", "declaration": { - "name": "TableHead", - "module": "src/components/reusable/table/table-head.ts" + "name": "TagSkeleton", + "module": "src/components/reusable/tag/tag.skeleton.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-thead", + "name": "kyn-tag-skeleton", "declaration": { - "name": "TableHead", - "module": "src/components/reusable/table/table-head.ts" + "name": "TagSkeleton", + "module": "src/components/reusable/tag/tag.skeleton.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-header-row.ts", + "path": "src/components/reusable/tag/tag.ts", "declarations": [ { "kind": "class", - "description": "`kyn-header-tr` Web Component.\n\nThe `` component is designed to function as the\nheader row within a table that's part of Shidoka's design system.", - "name": "TableHeaderRow", + "description": "Tag.", + "name": "Tag", "members": [ { "kind": "field", - "name": "expandableColumnWidth", - "type": { - "text": "string" - }, - "default": "'64px'", - "description": "expandableColumnWidth: The width of the expandable column.", - "attribute": "expandableColumnWidth" - }, - { - "kind": "field", - "name": "multiSelectColumnWidth", - "type": { - "text": "string" - }, - "default": "'64px'", - "description": "multiSelectColumnWidth: The width of the multi-select column.", - "attribute": "multiSelectColumnWidth" - }, - { - "kind": "method", - "name": "handleToggleSelectionAll", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - } - } - ], - "description": "Toggles the selection state of all rows in the table." - }, - { - "kind": "method", - "name": "updateHeaderCheckboxState", - "parameters": [ - { - "name": "indeterminate", - "type": { - "text": "boolean" - } - }, - { - "name": "checked", - "type": { - "text": "boolean" - } - } - ], - "description": "Updates the state of the header checkbox based on the number of\nselected rows." - }, - { - "kind": "field", - "name": "rowId", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "attribute": "rowId", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "attribute": "selected", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "field", - "name": "checkboxSelection", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "attribute": "checkboxSelection", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "field", - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "attribute": "dense", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "field", - "name": "unread", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Unread row state.", - "attribute": "unread", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tag name (Required).", + "attribute": "label" }, { "kind": "field", - "name": "locked", + "name": "tagSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "locked", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "attribute": "tagSize" }, { "kind": "field", - "name": "expandable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "attribute": "expandable", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Specify if the Tag is disabled.", + "attribute": "disabled" }, { "kind": "field", - "name": "expanded", + "name": "filter", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "attribute": "expanded", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Determine if Tag state is filter.", + "attribute": "filter" }, { "kind": "field", - "name": "disabled", + "name": "noTruncation", "type": { "text": "boolean" }, "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "disabled", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Removes label text truncation.", + "attribute": "noTruncation" }, { "kind": "field", - "name": "preventHighlight", + "name": "clickable", "type": { "text": "boolean" }, "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "attribute": "preventHighlight", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Determine if Tag is clickable.", + "attribute": "clickable" }, { "kind": "field", - "name": "dimmed", + "name": "tagColor", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "attribute": "dimmed", - "reflects": true, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", - "description": "Text string customization.", - "attribute": "textStrings", + "default": "'spruce'", + "description": "Color variants. Default spruce", + "attribute": "tagColor" + }, + { + "kind": "field", + "name": "clearTagText", "type": { - "text": "object" + "text": "string" }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "'Clear Tag'", + "description": "Clear Tag Text to improve accessibility", + "attribute": "clearTagText" }, { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense and ellipsis properties when the context changes.", + "kind": "method", + "name": "handleTagClear", + "privacy": "private", "parameters": [ { - "description": "The updated context.", - "name": "context", + "name": "e", "type": { - "text": "TableContextType" + "text": "any" } - } - ], - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "method", - "name": "handleRowSelectionChange", - "parameters": [ + }, { - "name": "event", + "name": "value", "type": { - "text": "CustomEvent" + "text": "string" } } - ], - "description": "Handles the change of selection state for a specific row.", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + ] }, { "kind": "method", - "name": "_handleUserInitiatedToggleExpando", + "name": "handleTagClick", + "privacy": "private", "parameters": [ { - "name": "expanded", - "default": "!this.expanded" + "name": "e", + "type": { + "text": "any" + } + }, + { + "name": "value", + "type": { + "text": "string" + } } - ], - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "method", - "name": "_handleExpanding", - "privacy": "private", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + ] } ], "events": [ { - "name": "on-header-checkbox-toggle", - "type": { - "text": "CustomEvent" - } - }, - { - "name": "on-row-select", - "type": { - "text": "CustomEvent" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "name": "table-row-expando-beingtoggled", - "type": { - "text": "CustomEvent" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "name": "table-row-expando-toggled", - "type": { - "text": "CustomEvent" - }, - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Captures the close event and emits the Tag value. Works with filterable tags.", + "name": "on-close" } ], "attributes": [ { - "name": "expandableColumnWidth", + "name": "label", "type": { "text": "string" }, - "default": "'64px'", - "description": "expandableColumnWidth: The width of the expandable column.", - "fieldName": "expandableColumnWidth" + "default": "''", + "description": "Tag name (Required).", + "fieldName": "label" }, { - "name": "multiSelectColumnWidth", + "name": "tagSize", "type": { "text": "string" }, - "default": "'64px'", - "description": "multiSelectColumnWidth: The width of the multi-select column.", - "fieldName": "multiSelectColumnWidth" + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "fieldName": "tagSize" }, { - "name": "rowId", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "fieldName": "rowId", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "false", + "description": "Specify if the Tag is disabled.", + "fieldName": "disabled" }, { - "name": "selected", + "name": "filter", "type": { "text": "boolean" }, "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "fieldName": "selected", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Determine if Tag state is filter.", + "fieldName": "filter" }, { - "name": "checkboxSelection", + "name": "noTruncation", "type": { "text": "boolean" }, "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "fieldName": "checkboxSelection", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Removes label text truncation.", + "fieldName": "noTruncation" }, { - "name": "dense", + "name": "clickable", "type": { "text": "boolean" }, "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "fieldName": "dense", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Determine if Tag is clickable.", + "fieldName": "clickable" }, { - "name": "unread", + "name": "tagColor", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Unread row state.", - "fieldName": "unread", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "'spruce'", + "description": "Color variants. Default spruce", + "fieldName": "tagColor" }, { - "name": "locked", + "name": "clearTagText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "locked", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "'Clear Tag'", + "description": "Clear Tag Text to improve accessibility", + "fieldName": "clearTagText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tag", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Tag", + "declaration": { + "name": "Tag", + "module": "src/components/reusable/tag/tag.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-tag", + "declaration": { + "name": "Tag", + "module": "src/components/reusable/tag/tag.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tag/tagGroup.ts", + "declarations": [ + { + "kind": "class", + "description": "Tag & Tag Group", + "name": "TagGroup", + "slots": [ + { + "description": "Slot for individual tags and tagsskeleton.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "textStrings", + "type": { + "text": "object" + }, + "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", + "description": "Text string customization.", + "attribute": "textStrings" }, { - "name": "expandable", + "kind": "field", + "name": "limitTags", "type": { "text": "boolean" }, "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "fieldName": "expandable", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", + "attribute": "limitTags" }, { - "name": "expanded", + "kind": "field", + "name": "filter", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "fieldName": "expanded", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tag group filter", + "attribute": "filter" }, { - "name": "disabled", + "kind": "field", + "name": "tagSize", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "disabled", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "attribute": "tagSize" }, { - "name": "preventHighlight", + "kind": "method", + "name": "_handleSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_toggleRevealed", + "privacy": "private", + "parameters": [ + { + "name": "revealed", + "type": { + "text": "boolean" + } + } + ] + } + ], + "attributes": [ + { + "name": "textStrings", + "type": { + "text": "object" + }, + "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", + "description": "Text string customization.", + "fieldName": "textStrings" + }, + { + "name": "limitTags", "type": { "text": "boolean" }, "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "fieldName": "preventHighlight", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", + "fieldName": "limitTags" }, { - "name": "dimmed", + "name": "filter", "type": { "text": "boolean" }, "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "fieldName": "dimmed", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "description": "Tag group filter", + "fieldName": "filter" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } + "name": "tagSize", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", + "fieldName": "tagSize" } ], "superclass": { - "name": "TableRow", - "module": "/src/components/reusable/table/table-row" + "name": "LitElement", + "package": "lit" }, - "tagName": "kyn-header-tr", - "customElement": true, - "slots": [ - { - "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", - "name": "unnamed", - "inheritedFrom": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - } - ] + "tagName": "kyn-tag-group", + "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableHeaderRow", + "name": "TagGroup", "declaration": { - "name": "TableHeaderRow", - "module": "src/components/reusable/table/table-header-row.ts" + "name": "TagGroup", + "module": "src/components/reusable/tag/tagGroup.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-header-tr", + "name": "kyn-tag-group", "declaration": { - "name": "TableHeaderRow", - "module": "src/components/reusable/table/table-header-row.ts" + "name": "TagGroup", + "module": "src/components/reusable/tag/tagGroup.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-header.ts", + "path": "src/components/reusable/textArea/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "TextArea", + "declaration": { + "name": "TextArea", + "module": "./textArea" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/textArea/textArea.ts", "declarations": [ { "kind": "class", - "description": "`kyn-th` Web Component.\n\nRepresents a custom table header cell (``) for Shidoka's design system tables.\nProvides sorting functionality when enabled and allows alignment customization.", - "name": "TableHeader", + "description": "Text area.", + "name": "TextArea", "slots": [ { - "description": "The content slot for adding header text or content.", - "name": "unnamed" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the cell should have a denser layout.", - "attribute": "dense", - "reflects": true - }, - { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense properties when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] - }, - { - "kind": "field", - "name": "align", - "type": { - "text": "TABLE_CELL_ALIGN" - }, - "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", - "attribute": "align", - "reflects": true - }, - { - "kind": "field", - "name": "sortable", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", - "attribute": "sortable", - "reflects": true + "default": "''", + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "sortDirection", + "name": "caption", "type": { - "text": "SORT_DIRECTION" + "text": "string" }, - "description": "Specifies the direction of sorting applied to the column.", - "attribute": "sortDirection", - "reflects": true + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" }, { "kind": "field", - "name": "headerLabel", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", - "attribute": "headerLabel" + "description": "Input placeholder.", + "attribute": "placeholder" }, { "kind": "field", - "name": "sortKey", + "name": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", - "attribute": "sortKey" + "default": "false", + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "visiblyHidden", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", - "attribute": "visiblyHidden" + "description": "Input disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "width", + "name": "maxLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "width", - "reflects": true + "description": "Maximum number of characters.", + "attribute": "maxLength" }, { "kind": "field", - "name": "maxWidth", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "maxWidth", - "reflects": true + "name": "minLength", + "type": { + "text": "number" + }, + "description": "Minimum number of characters.", + "attribute": "minLength" }, { "kind": "field", - "name": "minWidth", + "name": "rows", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "attribute": "minWidth", - "reflects": true + "description": "textarea rows attribute. The number of visible text lines.", + "attribute": "rows" }, { - "kind": "method", - "name": "resetSort", - "description": "Resets the sorting direction of the component to its default state.\nUseful for initializing or clearing any applied sorting on the element." + "kind": "field", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n errorText: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "toggleSortDirection", + "name": "handleInput", "privacy": "private", - "description": "Toggles the sort direction between ascending, descending, and default states.\nIt also dispatches an event to notify parent components of the sorting change." + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] }, { "kind": "method", - "name": "getTextContent" + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] } ], "events": [ { - "name": "on-sort-changed", - "type": { - "text": "CustomEvent" - }, - "description": "Dispatched when the sort direction is changed." + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-input" } ], "attributes": [ { - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the cell should have a denser layout.", - "fieldName": "dense" - }, - { - "name": "align", - "type": { - "text": "TABLE_CELL_ALIGN" - }, - "description": "Specifies the alignment of the content within the table header.\nOptions: 'left', 'center', 'right'", - "fieldName": "align" - }, - { - "name": "sortable", + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Specifies if the column is sortable.\nIf set to true, an arrow icon will be displayed unpon hover,\nallowing the user to toggle sort directions.", - "fieldName": "sortable" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "sortDirection", + "name": "caption", "type": { - "text": "SORT_DIRECTION" + "text": "string" }, - "description": "Specifies the direction of sorting applied to the column.", - "fieldName": "sortDirection" + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" }, { - "name": "headerLabel", + "name": "placeholder", "type": { "text": "string" }, "default": "''", - "description": "The textual content associated with this component.\nRepresents the primary content or label that will be displayed.", - "fieldName": "headerLabel" + "description": "Input placeholder.", + "fieldName": "placeholder" }, { - "name": "sortKey", + "name": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "The unique identifier representing this column header.\nUsed to distinguish between different sortable columns and\nto ensure that only one column is sorted at a time.", - "fieldName": "sortKey" + "default": "false", + "description": "Makes the input required.", + "fieldName": "required" }, { - "name": "visiblyHidden", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the content should be hidden from visual view but remain accessible\nto screen readers for accessibility purposes. When set to `true`, the content\nwill not be visibly shown, but its content can still be read by screen readers.\nThis is especially useful for providing additional context or information to\nassistive technologies without cluttering the visual UI.", - "fieldName": "visiblyHidden" + "description": "Input disabled state.", + "fieldName": "disabled" }, { - "name": "width", + "name": "maxLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets a fixed width for the cell.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "width" + "description": "Maximum number of characters.", + "fieldName": "maxLength" }, { - "name": "maxWidth", + "name": "minLength", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets a maximum width for the cell; contents exceeding this limit will be truncated with ellipsis.\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "maxWidth" + "description": "Minimum number of characters.", + "fieldName": "minLength" }, { - "name": "minWidth", + "name": "rows", "type": { - "text": "string" + "text": "number" }, - "default": "''", - "description": "Sets a minimum width for the cell;\nAccepts standard CSS width values (e.g., '150px', '50%').", - "fieldName": "minWidth" + "description": "textarea rows attribute. The number of visible text lines.", + "fieldName": "rows" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" } ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-th", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableHeader", - "declaration": { - "name": "TableHeader", - "module": "src/components/reusable/table/table-header.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-th", - "declaration": { - "name": "TableHeader", - "module": "src/components/reusable/table/table-header.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-legend-item.ts", - "declarations": [ - { - "kind": "class", - "description": "Table Legend Item", - "name": "TableLegendItem", - "slots": [ + "mixins": [ { - "description": "Default slot for icon and text.", - "name": "unnamed" + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], - "members": [], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-table-legend-item", + "tagName": "kyn-text-area", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TableLegendItem", + "name": "TextArea", "declaration": { - "name": "TableLegendItem", - "module": "src/components/reusable/table/table-legend-item.ts" + "name": "TextArea", + "module": "src/components/reusable/textArea/textArea.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table-legend-item", + "name": "kyn-text-area", "declaration": { - "name": "TableLegendItem", - "module": "src/components/reusable/table/table-legend-item.ts" + "name": "TextArea", + "module": "src/components/reusable/textArea/textArea.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-legend.ts", - "declarations": [ - { - "kind": "class", - "description": "Table Legend", - "name": "TableLegend", - "slots": [ - { - "description": "Default slot for Legend Items.", - "name": "unnamed" - } - ], - "members": [], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-legend", - "customElement": true - } - ], + "path": "src/components/reusable/textInput/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "TableLegend", - "declaration": { - "name": "TableLegend", - "module": "src/components/reusable/table/table-legend.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-table-legend", + "name": "TextInput", "declaration": { - "name": "TableLegend", - "module": "src/components/reusable/table/table-legend.ts" + "name": "TextInput", + "module": "./textInput" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/table/table-row.ts", + "path": "src/components/reusable/textInput/textInput.ts", "declarations": [ { "kind": "class", - "description": "`kyn-tr` Web Component.\n\nRepresents a table row (``) equivalent for custom tables created with Shidoka's design system.\nIt primarily acts as a container for individual table cells and behaves similarly to a native `` element.", - "name": "TableRow", + "description": "Text input.", + "name": "TextInput", "slots": [ { - "description": "The content slot for adding table cells (`kyn-td` or other relevant cells).", - "name": "unnamed" + "description": "Slot for contextual icon.", + "name": "icon" + }, + { + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "rowId", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "attribute": "rowId", - "reflects": true + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "selected", + "name": "type", "type": { - "text": "boolean" + "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" }, - "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "attribute": "selected", - "reflects": true + "default": "'text'", + "description": "Input type, limited to options that are \"text like\".", + "attribute": "type" }, { "kind": "field", - "name": "checkboxSelection", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "attribute": "checkboxSelection", - "reflects": true + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { "kind": "field", - "name": "dense", + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional text beneath the input.", + "attribute": "caption" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "attribute": "placeholder" + }, + { + "kind": "field", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "attribute": "dense" + "description": "Makes the input required.", + "attribute": "required" }, { "kind": "field", - "name": "unread", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Unread row state.", - "attribute": "unread" + "description": "Input disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "locked", + "name": "pattern", + "type": { + "text": "string" + }, + "description": "RegEx pattern to validate.", + "attribute": "pattern" + }, + { + "kind": "field", + "name": "maxLength", + "type": { + "text": "number" + }, + "description": "Maximum number of characters.", + "attribute": "maxLength" + }, + { + "kind": "field", + "name": "minLength", + "type": { + "text": "number" + }, + "description": "Minimum number of characters.", + "attribute": "minLength" + }, + { + "kind": "field", + "name": "iconRight", "type": { "text": "boolean" }, "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "locked", - "reflects": true + "description": "Place icon on the right.", + "attribute": "iconRight" }, { "kind": "field", - "name": "expandable", + "name": "hideLabel", "type": { "text": "boolean" }, "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "attribute": "expandable", - "reflects": true + "description": "Visually hide the label.", + "attribute": "hideLabel" }, { "kind": "field", - "name": "expanded", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", + "type": { + "text": "object" + } + }, + { + "kind": "method", + "name": "_handleInput", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_handleClear", + "privacy": "private" + }, + { + "kind": "method", + "name": "_emitValue", + "privacy": "private", + "parameters": [ + { + "name": "e", + "optional": true, + "type": { + "text": "any" + } + } + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] + }, + { + "kind": "method", + "name": "determineIfSlotted", + "privacy": "private" + } + ], + "events": [ + { + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-input" + } + ], + "attributes": [ + { + "name": "label", + "type": { + "text": "string" + }, + "default": "''", + "description": "Label text.", + "fieldName": "label" + }, + { + "name": "type", + "type": { + "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" + }, + "default": "'text'", + "description": "Input type, limited to options that are \"text like\".", + "fieldName": "type" + }, + { + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" + }, + { + "name": "caption", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional text beneath the input.", + "fieldName": "caption" + }, + { + "name": "placeholder", + "type": { + "text": "string" + }, + "default": "''", + "description": "Input placeholder.", + "fieldName": "placeholder" + }, + { + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "attribute": "expanded", - "reflects": true + "description": "Makes the input required.", + "fieldName": "required" }, { - "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "attribute": "disabled", - "reflects": true + "description": "Input disabled state.", + "fieldName": "disabled" + }, + { + "name": "pattern", + "type": { + "text": "string" + }, + "description": "RegEx pattern to validate.", + "fieldName": "pattern" + }, + { + "name": "maxLength", + "type": { + "text": "number" + }, + "description": "Maximum number of characters.", + "fieldName": "maxLength" + }, + { + "name": "minLength", + "type": { + "text": "number" + }, + "description": "Minimum number of characters.", + "fieldName": "minLength" }, { - "kind": "field", - "name": "preventHighlight", + "name": "iconRight", "type": { "text": "boolean" }, "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "attribute": "preventHighlight", - "reflects": true + "description": "Place icon on the right.", + "fieldName": "iconRight" }, { - "kind": "field", - "name": "dimmed", + "name": "hideLabel", "type": { "text": "boolean" }, "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "attribute": "dimmed", - "reflects": true + "description": "Visually hide the label.", + "fieldName": "hideLabel" }, { - "kind": "field", "name": "textStrings", - "default": "{\n expanded: 'Expanded',\n collapsed: 'Collapsed',\n}", - "description": "Text string customization.", - "attribute": "textStrings", - "type": { - "text": "object" - } - }, - { - "kind": "field", - "name": "handleContextChange", - "description": "Updates the cell's dense and ellipsis properties when the context changes.", - "parameters": [ - { - "description": "The updated context.", - "name": "context", - "type": { - "text": "TableContextType" - } - } - ] - }, - { - "kind": "method", - "name": "handleRowSelectionChange", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - } - } - ], - "description": "Handles the change of selection state for a specific row." - }, + "default": "_defaultTextStrings", + "description": "Customizable text strings.", + "fieldName": "textStrings" + } + ], + "mixins": [ { - "kind": "method", - "name": "_handleUserInitiatedToggleExpando", - "parameters": [ - { - "name": "expanded", - "default": "!this.expanded" - } - ] - }, + "name": "FormMixin", + "module": "/src/common/mixins/form-input" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-text-input", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "TextInput", + "declaration": { + "name": "TextInput", + "module": "src/components/reusable/textInput/textInput.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-text-input", + "declaration": { + "name": "TextInput", + "module": "src/components/reusable/textInput/textInput.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/timepicker/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "TimePicker", + "declaration": { + "name": "TimePicker", + "module": "./timepicker" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/timepicker/timepicker.ts", + "declarations": [ + { + "kind": "class", + "description": "Timepicker: uses Flatpickr library,time picker implementation -- `https://flatpickr.js.org/examples/#time-picker`", + "name": "TimePicker", + "slots": [ { - "kind": "method", - "name": "_handleExpanding", - "privacy": "private" + "description": "Slot for tooltip.", + "name": "tooltip" } ], - "events": [ + "members": [ { - "name": "on-row-select", + "kind": "field", + "name": "label", "type": { - "text": "CustomEvent" - } + "text": "string" + }, + "default": "''", + "description": "Label text.", + "attribute": "label" }, { - "name": "table-row-expando-beingtoggled", + "kind": "field", + "name": "locale", "type": { - "text": "CustomEvent" - } + "text": "SupportedLocale" + }, + "default": "'en'", + "description": "Sets desired locale and, if supported, dynamically loads language lib", + "attribute": "locale" }, { - "name": "table-row-expando-toggled", - "type": { - "text": "CustomEvent" - } - } - ], - "attributes": [ - { - "name": "rowId", + "kind": "field", + "name": "value", "type": { - "text": "string" + "text": "Date | null" }, - "default": "''", - "description": "rowId: String - Unique identifier for the row.", - "fieldName": "rowId" + "default": "null", + "description": "Sets date/time value.", + "attribute": "value" }, { - "name": "selected", + "kind": "field", + "name": "defaultDate", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "selected: Boolean indicating whether the row is selected.\nReflects the `selected` attribute.", - "fieldName": "selected" + "default": "''", + "description": "Sets default time value.", + "attribute": "defaultDate" }, { - "name": "checkboxSelection", + "kind": "field", + "name": "defaultHour", "type": { - "text": "boolean" + "text": "number | null" }, - "default": "false", - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "fieldName": "checkboxSelection" + "default": "null", + "description": "Sets initial value of the hour element.", + "attribute": "defaultHour" }, { - "name": "dense", + "kind": "field", + "name": "defaultMinute", "type": { - "text": "boolean" + "text": "number | null" }, - "default": "false", - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "fieldName": "dense" + "default": "null", + "description": "Sets initial value of the minute element.", + "attribute": "defaultMinute" }, { - "name": "unread", + "kind": "field", + "name": "defaultErrorMessage", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Unread row state.", - "fieldName": "unread" + "default": "''", + "description": "Sets default error message.", + "attribute": "defaultErrorMessage" }, { - "name": "locked", + "kind": "field", + "name": "warnText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "locked: Boolean indicating whether the row is locked.\nIf a row is selected before it is locked, it remains selected even after being locked.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "locked" + "default": "''", + "description": "Sets validation warning messaging.", + "attribute": "warnText" }, { - "name": "expandable", + "kind": "field", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "expandable: Boolean indicating whether the row is expandable.", - "fieldName": "expandable" + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "attribute": "caption" }, { - "name": "expanded", + "kind": "field", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "expanded: Boolean indicating whether the row is expanded.", - "fieldName": "expanded" + "description": "Sets datepicker form input value to required/required.", + "attribute": "required" }, { - "name": "disabled", + "kind": "field", + "name": "size", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "disabled: Boolean indicating whether the row is disabled.\nA disabled row is not allowed to have any user interactions.\nA row can be selected and disabled/locked simultaneously.", - "fieldName": "disabled" + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "attribute": "size" }, { - "name": "preventHighlight", + "kind": "field", + "name": "timepickerDisabled", "type": { "text": "boolean" }, "default": "false", - "description": "preventHighlight: Boolean indicating whether the row should not be highlighted.", - "fieldName": "preventHighlight" + "description": "Sets entire datepicker form element to enabled/disabled.", + "attribute": "timepickerDisabled" }, { - "name": "dimmed", + "kind": "field", + "name": "twentyFourHourFormat", "type": { - "text": "boolean" + "text": "boolean | null" }, - "default": "false", - "description": "dimmed: Boolean indicating whether the row is dimmed.\nA row should not be selected and dimmed simultaneously.", - "fieldName": "dimmed" + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "attribute": "twentyFourHourFormat" }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Text string customization.", - "fieldName": "textStrings" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-tr", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableRow", - "declaration": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-tr", - "declaration": { - "name": "TableRow", - "module": "src/components/reusable/table/table-row.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table-toolbar.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-table-toolbar` Web Component.\n\nThis component provides a toolbar for tables, primarily featuring a title and additional content.\nThe title is rendered prominently, while the slot can be used for controls, buttons, or other interactive elements.", - "name": "TableToolbar", - "slots": [ - { - "description": "The primary content slot for controls, buttons, or other toolbar content.", - "name": "unnamed" - } - ], - "members": [ { "kind": "field", - "name": "tableTitle", + "name": "minTime", "type": { - "text": "string" + "text": "string | number | Date" }, "default": "''", - "description": "The title for the toolbar", - "attribute": "tableTitle" + "description": "Sets lower boundary of datepicker date selection.", + "attribute": "minTime" }, { "kind": "field", - "name": "tableSubtitle", + "name": "maxTime", "type": { - "text": "string" + "text": "string | number | Date" }, "default": "''", - "description": "The subtitle for the toolbar", - "attribute": "tableSubtitle" - } - ], - "attributes": [ + "description": "Sets upper boundary of datepicker date selection.", + "attribute": "maxTime" + }, { - "name": "tableTitle", + "kind": "field", + "name": "errorAriaLabel", "type": { "text": "string" }, "default": "''", - "description": "The title for the toolbar", - "fieldName": "tableTitle" + "description": "Sets aria label attribute for error message.", + "attribute": "errorAriaLabel" }, { - "name": "tableSubtitle", + "kind": "field", + "name": "errorTitle", "type": { "text": "string" }, "default": "''", - "description": "The subtitle for the toolbar", - "fieldName": "tableSubtitle" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-toolbar", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableToolbar", - "declaration": { - "name": "TableToolbar", - "module": "src/components/reusable/table/table-toolbar.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-table-toolbar", - "declaration": { - "name": "TableToolbar", - "module": "src/components/reusable/table/table-toolbar.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table.skeleton.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-table-skeleton` Web Component.\nA skeleton loading state for the table component that mirrors its structure.", - "name": "TableSkeleton", - "members": [ + "description": "Sets title attribute for error message.", + "attribute": "errorTitle" + }, { "kind": "field", - "name": "rows", + "name": "warningAriaLabel", "type": { - "text": "number" + "text": "string" }, - "default": "5", - "description": "Number of skeleton rows to display.", - "attribute": "rows" + "default": "''", + "description": "Sets aria label attribute for warning message.", + "attribute": "warningAriaLabel" }, { "kind": "field", - "name": "showPagination", + "name": "warningTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Shows/hides pagination skeleton.", - "attribute": "showPagination" + "default": "''", + "description": "Sets title attribute for warning message.", + "attribute": "warningTitle" }, { "kind": "field", - "name": "dense", + "name": "textStrings", + "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", + "description": "Customizable text strings.", + "attribute": "textStrings", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets dense mode value.", - "attribute": "dense" + "text": "object" + } }, { - "kind": "field", - "name": "striped", - "type": { - "text": "boolean" + "kind": "method", + "name": "renderValidationMessage", + "privacy": "private", + "parameters": [ + { + "name": "errorId", + "type": { + "text": "string" + } + }, + { + "name": "warningId", + "type": { + "text": "string" + } + } + ] + }, + { + "kind": "method", + "name": "getTimepickerClasses" + }, + { + "kind": "method", + "name": "_handleClear", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "setupAnchor", + "privacy": "private" + }, + { + "kind": "method", + "name": "initializeFlatpickr", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "updateFlatpickrOptions", + "return": { + "type": { + "text": "Promise" + } + } + }, + { + "kind": "method", + "name": "getComponentFlatpickrOptions", + "return": { + "type": { + "text": "Promise>" + } + } + }, + { + "kind": "method", + "name": "setInitialDates", + "return": { + "type": { + "text": "void" + } }, - "default": "false", - "description": "Sets striped rows value.", - "attribute": "striped" + "parameters": [ + { + "name": "instance", + "type": { + "text": "flatpickr.Instance" + } + } + ] }, { - "kind": "field", - "name": "hideTableTitles", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Show/hide table header.", - "attribute": "hideTableTitles" + "kind": "method", + "name": "handleOpen", + "return": { + "type": { + "text": "void" + } + } }, { - "kind": "field", - "name": "fixedLayout", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Fixed layout boolean.", - "attribute": "fixedLayout" + "kind": "method", + "name": "handleClose", + "return": { + "type": { + "text": "Promise" + } + } }, { - "kind": "field", - "name": "tableTitle", - "type": { - "text": "string" + "kind": "method", + "name": "handleTimeChange", + "return": { + "type": { + "text": "Promise" + } }, - "default": "''", - "description": "Sets title to display in the table toolbar.", - "attribute": "tableTitle" + "parameters": [ + { + "name": "selectedDates", + "type": { + "text": "Date[]" + } + }, + { + "name": "dateStr", + "type": { + "text": "string" + } + } + ] }, { - "kind": "field", - "name": "tableSubtitle", - "type": { - "text": "string" + "kind": "method", + "name": "_validate", + "privacy": "private", + "return": { + "type": { + "text": "void" + } }, - "default": "''", - "description": "Sets subtitle to display in the table toolbar.", - "attribute": "tableSubtitle" + "parameters": [ + { + "name": "interacted", + "type": { + "text": "boolean" + } + }, + { + "name": "report", + "type": { + "text": "boolean" + } + } + ] }, { - "kind": "field", - "name": "showGlobalFilter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Shows/hides golbal filter skeleton.", - "attribute": "showGlobalFilter" + "kind": "method", + "name": "_onChange", + "privacy": "private" }, { "kind": "method", - "name": "renderSkeletonCell", + "name": "_handleFormReset", + "privacy": "private" + }, + { + "kind": "method", + "name": "setShouldFlatpickrOpen", "privacy": "private", "parameters": [ { - "name": "type", + "name": "value", "type": { - "text": "'thead' | 'tbody'" + "text": "boolean" } } ] - } - ], - "attributes": [ - { - "name": "rows", - "type": { - "text": "number" - }, - "default": "5", - "description": "Number of skeleton rows to display.", - "fieldName": "rows" }, { - "name": "showPagination", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Shows/hides pagination skeleton.", - "fieldName": "showPagination" + "kind": "method", + "name": "closeFlatpickr", + "privacy": "private" }, { - "name": "dense", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets dense mode value.", - "fieldName": "dense" + "kind": "method", + "name": "preventFlatpickrOpen", + "privacy": "private", + "parameters": [ + { + "name": "event", + "type": { + "text": "Event" + } + } + ] }, { - "name": "striped", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets striped rows value.", - "fieldName": "striped" + "kind": "method", + "name": "handleInputClickEvent", + "privacy": "private" }, { - "name": "hideTableTitles", + "kind": "method", + "name": "handleInputFocusEvent", + "privacy": "private" + } + ], + "events": [ + { + "description": "Captures the input event and emits the selected value and original event details.", + "name": "on-change" + } + ], + "attributes": [ + { + "name": "label", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Show/hide table header.", - "fieldName": "hideTableTitles" + "default": "''", + "description": "Label text.", + "fieldName": "label" }, { - "name": "fixedLayout", + "name": "locale", "type": { - "text": "boolean" + "text": "SupportedLocale" }, - "default": "false", - "description": "Fixed layout boolean.", - "fieldName": "fixedLayout" + "default": "'en'", + "description": "Sets desired locale and, if supported, dynamically loads language lib", + "fieldName": "locale" }, { - "name": "tableTitle", + "name": "value", "type": { - "text": "string" + "text": "Date | null" }, - "default": "''", - "description": "Sets title to display in the table toolbar.", - "fieldName": "tableTitle" + "default": "null", + "description": "Sets date/time value.", + "fieldName": "value" }, { - "name": "tableSubtitle", + "name": "defaultDate", "type": { "text": "string" }, "default": "''", - "description": "Sets subtitle to display in the table toolbar.", - "fieldName": "tableSubtitle" + "description": "Sets default time value.", + "fieldName": "defaultDate" }, { - "name": "showGlobalFilter", + "name": "defaultHour", "type": { - "text": "boolean" + "text": "number | null" }, - "default": "false", - "description": "Shows/hides golbal filter skeleton.", - "fieldName": "showGlobalFilter" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-table-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TableSkeleton", - "declaration": { - "name": "TableSkeleton", - "module": "src/components/reusable/table/table.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-table-skeleton", - "declaration": { - "name": "TableSkeleton", - "module": "src/components/reusable/table/table.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/table/table.ts", - "declarations": [ - { - "kind": "class", - "description": "`kyn-table` Web Component.\nThis component provides a table with sorting, pagination, and selection capabilities.\nIt is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.", - "name": "Table", - "members": [ + "default": "null", + "description": "Sets initial value of the hour element.", + "fieldName": "defaultHour" + }, { - "kind": "field", - "name": "checkboxSelection", + "name": "defaultMinute", "type": { - "text": "boolean" + "text": "number | null" }, - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "default": "false", - "attribute": "checkboxSelection" + "default": "null", + "description": "Sets initial value of the minute element.", + "fieldName": "defaultMinute" }, { - "kind": "field", - "name": "striped", + "name": "defaultErrorMessage", "type": { - "text": "boolean" + "text": "string" }, - "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", - "default": "false", - "attribute": "striped" + "default": "''", + "description": "Sets default error message.", + "fieldName": "defaultErrorMessage" }, { - "kind": "field", - "name": "stickyHeader", + "name": "warnText", "type": { - "text": "boolean" + "text": "string" }, - "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", - "default": "false", - "attribute": "stickyHeader" + "default": "''", + "description": "Sets validation warning messaging.", + "fieldName": "warnText" }, { - "kind": "field", - "name": "dense", + "name": "caption", "type": { - "text": "boolean" + "text": "string" }, - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "default": "false", - "attribute": "dense" + "default": "''", + "description": "Sets caption to be displayed under primary date picker elements.", + "fieldName": "caption" }, { - "kind": "field", - "name": "fixedLayout", + "name": "required", "type": { "text": "boolean" }, - "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", "default": "false", - "attribute": "fixedLayout" - }, - { - "kind": "method", - "name": "_updateHeaderCheckbox", - "privacy": "private", - "description": "Updates the state of the header checkbox based on the number of\nselected rows." - }, - { - "kind": "method", - "name": "_handleRowSelectionChange", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - } - } - ], - "description": "Handles the change of selection state for a specific row." - }, - { - "kind": "method", - "name": "_toggleSelectionAll", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - } - } - ], - "description": "Toggles the selection state of all rows in the table." - }, - { - "kind": "method", - "name": "updateAfterExternalChanges", - "privacy": "public", - "description": "Resets the selection state of all rows in the table.\nThis method is called when the table is reset or cleared.", - "return": { - "type": { - "text": "" - } - } + "description": "Sets datepicker form input value to required/required.", + "fieldName": "required" }, { - "kind": "method", - "name": "getSelectedRows", - "privacy": "public", - "description": "Returns the selected rows in the table.", - "return": { - "type": { - "text": "" - } - } + "name": "size", + "type": { + "text": "string" + }, + "default": "'md'", + "description": "Input size. \"sm\", \"md\", or \"lg\".", + "fieldName": "size" }, { - "kind": "method", - "name": "_handleRowsChange", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "CustomEvent" - }, - "description": "The custom event containing the updated rows." - } - ], - "description": "Handles the change of rows in the table body." + "name": "timepickerDisabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Sets entire datepicker form element to enabled/disabled.", + "fieldName": "timepickerDisabled" }, { - "kind": "method", - "name": "_updateSelectionStates", - "privacy": "private" - } - ], - "events": [ - { - "name": "on-row-selection-change", + "name": "twentyFourHourFormat", "type": { - "text": "CustomEvent" + "text": "boolean | null" }, - "description": "Dispatched when the selection state of a row is toggled." + "default": "null", + "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", + "fieldName": "twentyFourHourFormat" }, { - "name": "on-all-rows-selection-change", + "name": "minTime", "type": { - "text": "CustomEvent" + "text": "string | number | Date" }, - "description": "Dispatched when the selection state of all rows is toggled." - } - ], - "attributes": [ + "default": "''", + "description": "Sets lower boundary of datepicker date selection.", + "fieldName": "minTime" + }, { - "name": "checkboxSelection", + "name": "maxTime", "type": { - "text": "boolean" + "text": "string | number | Date" }, - "description": "checkboxSelection: Boolean indicating whether rows should be\nselectable using checkboxes.", - "default": "false", - "fieldName": "checkboxSelection" + "default": "''", + "description": "Sets upper boundary of datepicker date selection.", + "fieldName": "maxTime" }, { - "name": "striped", + "name": "errorAriaLabel", "type": { - "text": "boolean" + "text": "string" }, - "description": "striped: Boolean indicating whether rows should have alternate\ncoloring.", - "default": "false", - "fieldName": "striped" + "default": "''", + "description": "Sets aria label attribute for error message.", + "fieldName": "errorAriaLabel" }, { - "name": "stickyHeader", + "name": "errorTitle", "type": { - "text": "boolean" + "text": "string" }, - "description": "stickyHeader: Boolean indicating whether the table header\nshould be sticky.", - "default": "false", - "fieldName": "stickyHeader" + "default": "''", + "description": "Sets title attribute for error message.", + "fieldName": "errorTitle" }, { - "name": "dense", + "name": "warningAriaLabel", "type": { - "text": "boolean" + "text": "string" }, - "description": "dense: Boolean indicating whether the table should be displayed\nin dense mode.", - "default": "false", - "fieldName": "dense" + "default": "''", + "description": "Sets aria label attribute for warning message.", + "fieldName": "warningAriaLabel" }, { - "name": "fixedLayout", + "name": "warningTitle", "type": { - "text": "boolean" + "text": "string" }, - "description": "fixedLayout: Boolean indicating whether the table should have a fixed layout.\nThis will set the table's layout to fixed, which means the table and column widths\nwill be determined by the width of the columns and not by the content of the cells.\nThis can be useful when you want to have a consistent column width across multiple tables.", - "default": "false", - "fieldName": "fixedLayout" + "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-table", + "tagName": "kyn-time-picker", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Table", + "name": "TimePicker", "declaration": { - "name": "Table", - "module": "src/components/reusable/table/table.ts" + "name": "TimePicker", + "module": "src/components/reusable/timepicker/timepicker.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-table", + "name": "kyn-time-picker", "declaration": { - "name": "Table", - "module": "src/components/reusable/table/table.ts" + "name": "TimePicker", + "module": "src/components/reusable/timepicker/timepicker.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/index.ts", + "path": "src/components/reusable/toggleButton/index.ts", "declarations": [], - "exports": [ - { - "kind": "js", - "name": "Tabs", - "declaration": { - "name": "Tabs", - "module": "./tabs" - } - }, - { - "kind": "js", - "name": "Tab", - "declaration": { - "name": "Tab", - "module": "./tab" - } - }, + "exports": [ { "kind": "js", - "name": "TabPanel", + "name": "ToggleButton", "declaration": { - "name": "TabPanel", - "module": "./tabPanel" + "name": "ToggleButton", + "module": "./toggleButton" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/tab.ts", + "path": "src/components/reusable/toggleButton/toggleButton.ts", "declarations": [ { "kind": "class", - "description": "Tabs.", - "name": "Tab", + "description": "Toggle Button.", + "name": "ToggleButton", "slots": [ { - "description": "Slot for tab button text.", - "name": "unnamed" + "description": "Slot for tooltip.", + "name": "tooltip" } ], "members": [ { "kind": "field", - "name": "id", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Tab ID, required.", - "attribute": "id", - "reflects": true + "description": "Label text.", + "attribute": "label" }, { "kind": "field", - "name": "selected", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Tab selected state. Must match Tab Panel visible state.", - "attribute": "selected", - "reflects": true + "description": "Checkbox checked state.", + "attribute": "checked" + }, + { + "kind": "field", + "name": "checkedText", + "type": { + "text": "string" + }, + "default": "'On'", + "description": "Checked state text.", + "attribute": "checkedText" + }, + { + "kind": "field", + "name": "uncheckedText", + "type": { + "text": "string" + }, + "default": "'Off'", + "description": "Unchecked state text.", + "attribute": "uncheckedText" + }, + { + "kind": "field", + "name": "small", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Option to use small size.", + "attribute": "small" }, { "kind": "field", @@ -13243,1033 +13395,853 @@ "text": "boolean" }, "default": "false", - "description": "Tab disabled state.", + "description": "Checkbox disabled state.", "attribute": "disabled" }, + { + "kind": "field", + "name": "reverse", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Reverse UI element order, label on the left.", + "attribute": "reverse" + }, + { + "kind": "field", + "name": "hideLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the label visually.", + "attribute": "hideLabel" + }, { "kind": "method", - "name": "_handleClick", + "name": "handleChange", "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." + ] + }, + { + "kind": "method", + "name": "_validate", + "privacy": "private", + "parameters": [ + { + "name": "interacted", + "type": { + "text": "Boolean" + } + }, + { + "name": "report", + "type": { + "text": "Boolean" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the change event and emits the selected value and original event details.", + "name": "on-change" } ], "attributes": [ { - "name": "id", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Tab ID, required.", - "fieldName": "id" + "description": "Label text.", + "fieldName": "label" }, { - "name": "selected", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Tab selected state. Must match Tab Panel visible state.", - "fieldName": "selected" + "description": "Checkbox checked state.", + "fieldName": "checked" }, { - "name": "disabled", + "name": "checkedText", "type": { - "text": "boolean" + "text": "string" }, - "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": [ + "default": "'On'", + "description": "Checked state text.", + "fieldName": "checkedText" + }, { - "kind": "field", - "name": "tabId", + "name": "uncheckedText", "type": { "text": "string" }, - "default": "''", - "description": "Matching Tab ID, required.", - "attribute": "tabId" + "default": "'Off'", + "description": "Unchecked state text.", + "fieldName": "uncheckedText" }, { - "kind": "field", - "name": "visible", + "name": "small", "type": { "text": "boolean" }, "default": "false", - "description": "Tab Panel visible state. Must match Tab selected state.", - "attribute": "visible", - "reflects": true + "description": "Option to use small size.", + "fieldName": "small" }, { - "kind": "field", - "name": "noPadding", + "name": "disabled", "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" + "description": "Checkbox disabled state.", + "fieldName": "disabled" }, { - "name": "visible", + "name": "reverse", "type": { "text": "boolean" }, "default": "false", - "description": "Tab Panel visible state. Must match Tab selected state.", - "fieldName": "visible" + "description": "Reverse UI element order, label on the left.", + "fieldName": "reverse" }, { - "name": "noPadding", + "name": "hideLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Remove side padding (left/right) on tab panel.", - "fieldName": "noPadding" + "description": "Hides the label visually.", + "fieldName": "hideLabel" + } + ], + "mixins": [ + { + "name": "FormMixin", + "module": "/src/common/mixins/form-input" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tab-panel", + "tagName": "kyn-toggle-button", "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", + "name": "ToggleButton", + "declaration": { + "name": "ToggleButton", + "module": "src/components/reusable/toggleButton/toggleButton.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-toggle-button", + "declaration": { + "name": "ToggleButton", + "module": "src/components/reusable/toggleButton/toggleButton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/tooltip/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Tooltip", "declaration": { - "name": "TabPanel", - "module": "src/components/reusable/tabs/tabPanel.ts" + "name": "Tooltip", + "module": "./tooltip" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tabs/tabs.ts", + "path": "src/components/reusable/tooltip/tooltip.ts", "declarations": [ { "kind": "class", - "description": "Tabs.", - "name": "Tabs", + "description": "Tooltip.", + "name": "Tooltip", "slots": [ { - "description": "Slot for kyn-tab-panel components.", + "description": "Slot for tooltip content.", "name": "unnamed" }, { - "description": "Slot for kyn-tab components.", - "name": "tabs" + "description": "Slot for custom anchor button content.", + "name": "anchor" } ], "members": [ { "kind": "field", - "name": "tabStyle", - "type": { - "text": "string" - }, - "default": "'contained'", - "description": "Tab style. `'contained'` or `'line'`.", - "attribute": "tabStyle" - }, - { - "kind": "field", - "name": "tabSize", + "name": "assistiveText", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", - "attribute": "tabSize" - }, - { - "kind": "field", - "name": "vertical", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Vertical orientation.", - "attribute": "vertical" - }, - { - "kind": "field", - "name": "disableAutoFocusUpdate", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", - "attribute": "disableAutoFocusUpdate" + "default": "'Tooltip'", + "description": "Assistive text for anchor button.", + "attribute": "assistiveText" }, { "kind": "method", - "name": "_handleSlotChangeTabs", + "name": "_positionTooltip", "privacy": "private" }, { "kind": "method", - "name": "_updateChildren", + "name": "_handleOpen", "privacy": "private" }, { "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." + "name": "_handleClose", + "privacy": "private" }, { "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." + "name": "_handleMouseLeave", + "privacy": "private" }, { "kind": "method", - "name": "_emitChangeEvent", + "name": "_handleEsc", "privacy": "private", "parameters": [ { - "name": "origEvent", - "type": { - "text": "any" - }, - "description": "The origEvent parameter is the original event object that triggered the\nchange event. It could be any type of event object, such as a click event or a keydown event." - }, - { - "name": "selectedTabId", + "name": "e", "type": { - "text": "string" - }, - "description": "The selectedTabId parameter is a string that represents the ID of\nthe selected tab." + "text": "KeyboardEvent" + } } - ], - "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": "" - } - } + "name": "_emitToggle", + "privacy": "private" } ], "events": [ { - "description": "Emits the new selected Tab ID when switching tabs.", - "name": "on-change" + "description": "Emits the open state of the tooltip on open/close.", + "name": "on-tooltip-toggle" } ], "attributes": [ { - "name": "tabStyle", + "name": "assistiveText", "type": { "text": "string" }, - "default": "'contained'", - "description": "Tab style. `'contained'` or `'line'`.", - "fieldName": "tabStyle" + "default": "'Tooltip'", + "description": "Assistive text for anchor button.", + "fieldName": "assistiveText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-tooltip", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Tooltip", + "declaration": { + "name": "Tooltip", + "module": "src/components/reusable/tooltip/tooltip.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-tooltip", + "declaration": { + "name": "Tooltip", + "module": "src/components/reusable/tooltip/tooltip.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/footer/footer.ts", + "declarations": [ + { + "kind": "class", + "description": "The global Footer component.", + "name": "Footer", + "slots": [ + { + "description": "Default slot, for links.", + "name": "unnamed" }, { - "name": "tabSize", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px.", - "fieldName": "tabSize" + "description": "Slot for the logo, will overwrite the default logo.", + "name": "logo" }, { - "name": "vertical", + "description": "Slot for the copyright text.", + "name": "copyright" + } + ], + "members": [ + { + "kind": "field", + "name": "rootUrl", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Vertical orientation.", - "fieldName": "vertical" + "default": "'/'", + "description": "URL for the footer logo link. Should target the application home page.", + "attribute": "rootUrl" }, { - "name": "disableAutoFocusUpdate", + "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": "boolean" + "text": "string" }, - "default": "false", - "description": "Enables tab content change on focus with keyboard navigation/assistive technologies.", - "fieldName": "disableAutoFocusUpdate" + "default": "'/'", + "description": "URL for the footer logo link. Should target the application home page.", + "fieldName": "rootUrl" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tabs", + "tagName": "kyn-footer", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tabs", + "name": "Footer", "declaration": { - "name": "Tabs", - "module": "src/components/reusable/tabs/tabs.ts" + "name": "Footer", + "module": "src/components/global/footer/footer.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tabs", + "name": "kyn-footer", "declaration": { - "name": "Tabs", - "module": "src/components/reusable/tabs/tabs.ts" + "name": "Footer", + "module": "src/components/global/footer/footer.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tag/index.ts", + "path": "src/components/global/footer/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Tag", + "name": "Footer", "declaration": { - "name": "Tag", - "module": "./tag" + "name": "Footer", + "module": "./footer" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/widget/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Widget", + "declaration": { + "name": "Widget", + "module": "./widget" } }, { "kind": "js", - "name": "TagGroup", + "name": "WidgetDragHandle", "declaration": { - "name": "TagGroup", - "module": "./tagGroup" + "name": "WidgetDragHandle", + "module": "./widgetDragHandle" } }, { "kind": "js", - "name": "TagSkeleton", + "name": "WidgetGridstack", "declaration": { - "name": "TagSkeleton", - "module": "./tag.skeleton" + "name": "WidgetGridstack", + "module": "./widgetGridstack" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tag/tag.skeleton.ts", + "path": "src/components/reusable/widget/widget.ts", "declarations": [ { "kind": "class", - "description": "", - "name": "TagSkeleton", - "members": [ + "description": "Widget.", + "name": "Widget", + "slots": [ { - "kind": "field", - "name": "tagSize", - "type": { - "text": "string" - }, - "default": "'sm'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "attribute": "tagSize" + "description": "Slot for widget content.", + "name": "unnamed" }, { - "kind": "field", - "name": "shade", - "type": { - "text": "string" - }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag.", - "attribute": "shade" - } - ], - "attributes": [ + "description": "Slot for action buttons.", + "name": "action" + }, { - "name": "tagSize", - "type": { - "text": "string" - }, - "default": "'sm'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "fieldName": "tagSize" + "description": "Slot for tooltip in header.", + "name": "tooltip" }, { - "name": "shade", - "type": { - "text": "string" - }, - "default": "'light'", - "description": "Shade `'light'` (default) and `'dark'` for tag.", - "fieldName": "shade" + "description": "Slot for drag handle.", + "name": "draghandle" } ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-tag-skeleton", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "TagSkeleton", - "declaration": { - "name": "TagSkeleton", - "module": "src/components/reusable/tag/tag.skeleton.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-tag-skeleton", - "declaration": { - "name": "TagSkeleton", - "module": "src/components/reusable/tag/tag.skeleton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/tag/tag.ts", - "declarations": [ - { - "kind": "class", - "description": "Tag.", - "name": "Tag", "members": [ { "kind": "field", - "name": "label", + "name": "widgetTitle", "type": { "text": "string" }, "default": "''", - "description": "Tag name (Required).", - "attribute": "label" + "description": "Widget title.", + "attribute": "widgetTitle" }, { "kind": "field", - "name": "tagSize", + "name": "subTitle", "type": { "text": "string" }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "attribute": "tagSize" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Specify if the Tag is disabled.", - "attribute": "disabled" - }, - { - "kind": "field", - "name": "filter", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determine if Tag state is filter.", - "attribute": "filter" + "default": "''", + "description": "Widget sub-title.", + "attribute": "subTitle" }, { "kind": "field", - "name": "noTruncation", + "name": "dragActive", "type": { "text": "boolean" }, "default": "false", - "description": "Removes label text truncation.", - "attribute": "noTruncation" + "description": "Widget drag active state.", + "attribute": "dragActive" }, { "kind": "field", - "name": "clickable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determine if Tag is clickable.", - "attribute": "clickable" - }, - { - "kind": "field", - "name": "tagColor", - "type": { - "text": "string" - }, - "default": "'spruce'", - "description": "Color variants. Default spruce", - "attribute": "tagColor" - }, - { - "kind": "field", - "name": "clearTagText", - "type": { - "text": "string" - }, - "default": "'Clear Tag'", - "description": "Clear Tag Text to improve accessibility", - "attribute": "clearTagText" - }, - { - "kind": "method", - "name": "handleTagClear", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - }, - { - "name": "value", - "type": { - "text": "string" - } - } - ] + "description": "Widget disabled state.", + "attribute": "disabled" }, { "kind": "method", - "name": "handleTagClick", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - }, - { - "name": "value", - "type": { - "text": "string" - } - } - ] - } - ], - "events": [ - { - "description": "Captures the close event and emits the Tag value. Works with filterable tags.", - "name": "on-close" - } - ], - "attributes": [ - { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Tag name (Required).", - "fieldName": "label" - }, - { - "name": "tagSize", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "fieldName": "tagSize" + "name": "_handleSlotChange", + "privacy": "private" }, { - "name": "disabled", + "kind": "method", + "name": "_updateChildren", + "privacy": "private" + } + ], + "attributes": [ + { + "name": "widgetTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Specify if the Tag is disabled.", - "fieldName": "disabled" + "default": "''", + "description": "Widget title.", + "fieldName": "widgetTitle" }, { - "name": "filter", + "name": "subTitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Determine if Tag state is filter.", - "fieldName": "filter" + "default": "''", + "description": "Widget sub-title.", + "fieldName": "subTitle" }, { - "name": "noTruncation", + "name": "dragActive", "type": { "text": "boolean" }, "default": "false", - "description": "Removes label text truncation.", - "fieldName": "noTruncation" + "description": "Widget drag active state.", + "fieldName": "dragActive" }, { - "name": "clickable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determine if Tag is clickable.", - "fieldName": "clickable" - }, + "description": "Widget disabled state.", + "fieldName": "disabled" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-widget", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Widget", + "declaration": { + "name": "Widget", + "module": "src/components/reusable/widget/widget.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-widget", + "declaration": { + "name": "Widget", + "module": "src/components/reusable/widget/widget.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/reusable/widget/widgetDragHandle.ts", + "declarations": [ + { + "kind": "class", + "description": "Widget drag handle.", + "name": "WidgetDragHandle", + "members": [ { - "name": "tagColor", + "kind": "field", + "name": "slot", "type": { "text": "string" }, - "default": "'spruce'", - "description": "Color variants. Default spruce", - "fieldName": "tagColor" - }, + "default": "'draghandle'", + "description": "Force widget slot", + "attribute": "slot", + "reflects": true + } + ], + "attributes": [ { - "name": "clearTagText", + "name": "slot", "type": { "text": "string" }, - "default": "'Clear Tag'", - "description": "Clear Tag Text to improve accessibility", - "fieldName": "clearTagText" + "default": "'draghandle'", + "description": "Force widget slot", + "fieldName": "slot" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tag", + "tagName": "kyn-widget-drag-handle", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tag", + "name": "WidgetDragHandle", "declaration": { - "name": "Tag", - "module": "src/components/reusable/tag/tag.ts" + "name": "WidgetDragHandle", + "module": "src/components/reusable/widget/widgetDragHandle.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tag", + "name": "kyn-widget-drag-handle", "declaration": { - "name": "Tag", - "module": "src/components/reusable/tag/tag.ts" + "name": "WidgetDragHandle", + "module": "src/components/reusable/widget/widgetDragHandle.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tag/tagGroup.ts", + "path": "src/components/reusable/widget/widgetGridstack.ts", "declarations": [ { "kind": "class", - "description": "Tag & Tag Group", - "name": "TagGroup", + "description": "GridStack wrapper that includes Shidoka default config and styles.", + "name": "WidgetGridstack", "slots": [ { - "description": "Slot for individual tags and tagsskeleton.", + "description": "Slot for .grid-stack container element.", "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "textStrings", + "name": "layout", "type": { - "text": "object" + "text": "any" }, - "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", - "description": "Text string customization.", - "attribute": "textStrings" + "default": "{}", + "description": "GridStack layout/widget size/position definitions for each breakpoint.", + "attribute": "layout" }, { "kind": "field", - "name": "limitTags", + "name": "gridstackConfig", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", - "attribute": "limitTags" + "default": "Config", + "description": "GridStack config.", + "attribute": "gridstackConfig" }, { "kind": "field", - "name": "filter", + "name": "gridStack", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Tag group filter", - "attribute": "filter" + "default": "GridStack", + "description": "GridStack instance." }, { "kind": "field", - "name": "tagSize", + "name": "grid", "type": { - "text": "string" + "text": "any" }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "attribute": "tagSize" + "description": "GridStack grid instance." }, { "kind": "method", - "name": "_handleSlotChange", + "name": "_saveLayout", "privacy": "private" }, { "kind": "method", - "name": "_updateChildren", + "name": "_updateLayout", "privacy": "private" }, { "kind": "method", - "name": "_toggleRevealed", - "privacy": "private", - "parameters": [ - { - "name": "revealed", - "type": { - "text": "boolean" - } - } - ] + "name": "_setBreakpoint", + "privacy": "private" } ], - "attributes": [ + "events": [ { - "name": "textStrings", - "type": { - "text": "object" - }, - "default": "{\n showAll: 'Show all',\n showLess: 'Show less',\n }", - "description": "Text string customization.", - "fieldName": "textStrings" + "description": "Emits after GridStack initializes.", + "name": "on-grid-init" }, { - "name": "limitTags", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.", - "fieldName": "limitTags" - }, + "description": "Emits the GridStack save() method results (new layout) on dragstop and resizestop.", + "name": "on-grid-save" + } + ], + "attributes": [ { - "name": "filter", + "name": "layout", "type": { - "text": "boolean" + "text": "any" }, - "default": "false", - "description": "Tag group filter", - "fieldName": "filter" + "default": "{}", + "description": "GridStack layout/widget size/position definitions for each breakpoint.", + "fieldName": "layout" }, { - "name": "tagSize", + "name": "gridstackConfig", "type": { - "text": "string" + "text": "any" }, - "default": "'md'", - "description": "Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.", - "fieldName": "tagSize" + "default": "Config", + "description": "GridStack config.", + "fieldName": "gridstackConfig" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tag-group", + "tagName": "kyn-widget-gridstack", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TagGroup", + "name": "WidgetGridstack", "declaration": { - "name": "TagGroup", - "module": "src/components/reusable/tag/tagGroup.ts" + "name": "WidgetGridstack", + "module": "src/components/reusable/widget/widgetGridstack.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tag-group", - "declaration": { - "name": "TagGroup", - "module": "src/components/reusable/tag/tagGroup.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/textArea/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "TextArea", + "name": "kyn-widget-gridstack", "declaration": { - "name": "TextArea", - "module": "./textArea" + "name": "WidgetGridstack", + "module": "src/components/reusable/widget/widgetGridstack.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textArea/textArea.ts", + "path": "src/components/global/header/header.ts", "declarations": [ { "kind": "class", - "description": "Text area.", - "name": "TextArea", + "description": "The global Header component.", + "name": "Header", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" - } - ], - "members": [ - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" - }, - { - "kind": "field", - "name": "placeholder", - "type": { - "text": "string" - }, - "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "description": "The default slot for all empty space right of the logo/title.", + "name": "unnamed" }, { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "description": "Slot for the logo, will overwrite the default logo.", + "name": "logo" }, { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "description": "Slot left of the logo, intended for the header nav.", + "name": "left" }, { - "kind": "field", - "name": "maxLength", - "type": { - "text": "number" - }, - "description": "Maximum number of characters.", - "attribute": "maxLength" - }, + "description": "Slot between logo/title and right flyouts.", + "name": "center" + } + ], + "members": [ { "kind": "field", - "name": "minLength", + "name": "rootUrl", "type": { - "text": "number" + "text": "string" }, - "description": "Minimum number of characters.", - "attribute": "minLength" + "default": "'/'", + "description": "URL for the header logo link. Should target the application home page.", + "attribute": "rootUrl" }, { "kind": "field", - "name": "rows", + "name": "appTitle", "type": { - "text": "number" + "text": "string" }, - "description": "textarea rows attribute. The number of visible text lines.", - "attribute": "rows" + "default": "''", + "description": "App title text next to logo. Hidden on smaller screens.", + "attribute": "appTitle" }, { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n errorText: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "kind": "method", + "name": "handleSlotChange", + "privacy": "private" }, { "kind": "method", - "name": "handleInput", + "name": "handleRootLinkClick", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "any" + "text": "Event" } } ] }, { "kind": "method", - "name": "_validate", + "name": "_handleNavToggle", "privacy": "private", "parameters": [ { - "name": "interacted", + "name": "e", "type": { - "text": "Boolean" + "text": "any" } - }, + } + ] + }, + { + "kind": "method", + "name": "_handleFlyoutsToggle", + "privacy": "private", + "parameters": [ { - "name": "report", + "name": "e", "type": { - "text": "Boolean" + "text": "any" } } ] @@ -14277,905 +14249,658 @@ ], "events": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-input" + "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": "label", + "name": "rootUrl", "type": { "text": "string" }, - "default": "''", - "description": "Label text.", - "fieldName": "label" + "default": "'/'", + "description": "URL for the header logo link. Should target the application home page.", + "fieldName": "rootUrl" }, { - "name": "caption", + "name": "appTitle", "type": { "text": "string" }, "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" - }, + "description": "App title text next to logo. Hidden on smaller screens.", + "fieldName": "appTitle" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Header", + "declaration": { + "name": "Header", + "module": "src/components/global/header/header.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header", + "declaration": { + "name": "Header", + "module": "src/components/global/header/header.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerCategory.ts", + "declarations": [ + { + "kind": "class", + "description": "Header link category", + "name": "HeaderCategory", + "slots": [ { - "name": "placeholder", + "description": "Slot for links.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "heading", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" - }, - { - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the input required.", - "fieldName": "required" - }, - { - "name": "disabled", - "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" + "description": "Link url.", + "attribute": "heading" } ], - "mixins": [ + "attributes": [ { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "name": "heading", + "type": { + "text": "string" + }, + "default": "''", + "description": "Link url.", + "fieldName": "heading" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-text-area", + "tagName": "kyn-header-category", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TextArea", + "name": "HeaderCategory", "declaration": { - "name": "TextArea", - "module": "src/components/reusable/textArea/textArea.ts" + "name": "HeaderCategory", + "module": "src/components/global/header/headerCategory.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-text-area", + "name": "kyn-header-category", "declaration": { - "name": "TextArea", - "module": "src/components/reusable/textArea/textArea.ts" + "name": "HeaderCategory", + "module": "src/components/global/header/headerCategory.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textInput/index.ts", - "declarations": [], + "path": "src/components/global/header/headerDivider.ts", + "declarations": [ + { + "kind": "class", + "description": "Header divider", + "name": "HeaderDivider", + "members": [], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-divider", + "customElement": true + } + ], "exports": [ { "kind": "js", - "name": "TextInput", + "name": "HeaderDivider", "declaration": { - "name": "TextInput", - "module": "./textInput" + "name": "HeaderDivider", + "module": "src/components/global/header/headerDivider.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-divider", + "declaration": { + "name": "HeaderDivider", + "module": "src/components/global/header/headerDivider.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/textInput/textInput.ts", + "path": "src/components/global/header/headerFlyout.ts", "declarations": [ { "kind": "class", - "description": "Text input.", - "name": "TextInput", + "description": "Component for header flyout items.", + "name": "HeaderFlyout", "slots": [ { - "description": "Slot for contextual icon.", - "name": "icon" + "description": "Slot for flyout menu content.", + "name": "unnamed" }, { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for button/toggle content.", + "name": "button" } ], "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "type", + "name": "open", "type": { - "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" + "text": "boolean" }, - "default": "'text'", - "description": "Input type, limited to options that are \"text like\".", - "attribute": "type" + "default": "false", + "description": "Flyout open state.", + "attribute": "open" }, { "kind": "field", - "name": "size", + "name": "anchorLeft", "type": { - "text": "string" + "text": "boolean" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" + "default": "false", + "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", + "attribute": "anchorLeft" }, { "kind": "field", - "name": "caption", + "name": "hideArrow", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Optional text beneath the input.", - "attribute": "caption" + "default": "false", + "description": "Hides the arrow.", + "attribute": "hideArrow" }, { "kind": "field", - "name": "placeholder", + "name": "label", "type": { "text": "string" }, "default": "''", - "description": "Input placeholder.", - "attribute": "placeholder" + "description": "Menu & button label.", + "attribute": "label" }, { "kind": "field", - "name": "required", + "name": "hideMenuLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "attribute": "required" + "description": "Hide the label at the top of the flyout menu.", + "attribute": "hideMenuLabel" }, { "kind": "field", - "name": "disabled", + "name": "hideButtonLabel", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "attribute": "disabled" + "description": "Hide the label in the mobile button.", + "attribute": "hideButtonLabel" }, { "kind": "field", - "name": "pattern", + "name": "assistiveText", "type": { "text": "string" }, - "description": "RegEx pattern to validate.", - "attribute": "pattern" - }, - { - "kind": "field", - "name": "maxLength", - "type": { - "text": "number" - }, - "description": "Maximum number of characters.", - "attribute": "maxLength" - }, - { - "kind": "field", - "name": "minLength", - "type": { - "text": "number" - }, - "description": "Minimum number of characters.", - "attribute": "minLength" + "default": "''", + "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", + "attribute": "assistiveText" }, { "kind": "field", - "name": "iconRight", + "name": "href", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Place icon on the right.", - "attribute": "iconRight" + "default": "''", + "description": "Turns the button into a link.", + "attribute": "href" }, { "kind": "field", - "name": "hideLabel", + "name": "backText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Visually hide the label.", - "attribute": "hideLabel" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { "kind": "method", - "name": "_handleInput", - "privacy": "private", - "parameters": [ - { - "name": "e", - "type": { - "text": "any" - } - } - ] + "name": "_handleBack", + "privacy": "private" }, { "kind": "method", - "name": "_handleClear", + "name": "handleClick", "privacy": "private" }, { "kind": "method", - "name": "_emitValue", + "name": "handleClickOut", "privacy": "private", "parameters": [ { "name": "e", - "optional": true, - "type": { - "text": "any" - } - } - ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" + "text": "Event" } } ] }, { - "kind": "method", - "name": "determineIfSlotted", - "privacy": "private" - } - ], - "events": [ - { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-input" - } - ], - "attributes": [ - { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "type", - "type": { - "text": "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'" - }, - "default": "'text'", - "description": "Input type, limited to options that are \"text like\".", - "fieldName": "type" - }, - { - "name": "size", - "type": { - "text": "string" - }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, - { - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Optional text beneath the input.", - "fieldName": "caption" - }, + "kind": "method", + "name": "_handleOverlayClick", + "privacy": "private" + } + ], + "attributes": [ { - "name": "placeholder", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Input placeholder.", - "fieldName": "placeholder" + "default": "false", + "description": "Flyout open state.", + "fieldName": "open" }, { - "name": "required", + "name": "anchorLeft", "type": { "text": "boolean" }, "default": "false", - "description": "Makes the input required.", - "fieldName": "required" + "description": "Anchor flyout menu to the left edge of the button instead of the right edge.", + "fieldName": "anchorLeft" }, { - "name": "disabled", + "name": "hideArrow", "type": { "text": "boolean" }, "default": "false", - "description": "Input disabled state.", - "fieldName": "disabled" + "description": "Hides the arrow.", + "fieldName": "hideArrow" }, { - "name": "pattern", + "name": "label", "type": { "text": "string" }, - "description": "RegEx pattern to validate.", - "fieldName": "pattern" + "default": "''", + "description": "Menu & button label.", + "fieldName": "label" }, { - "name": "maxLength", + "name": "hideMenuLabel", "type": { - "text": "number" + "text": "boolean" }, - "description": "Maximum number of characters.", - "fieldName": "maxLength" + "default": "false", + "description": "Hide the label at the top of the flyout menu.", + "fieldName": "hideMenuLabel" }, { - "name": "minLength", + "name": "hideButtonLabel", "type": { - "text": "number" + "text": "boolean" }, - "description": "Minimum number of characters.", - "fieldName": "minLength" + "default": "false", + "description": "Hide the label in the mobile button.", + "fieldName": "hideButtonLabel" }, { - "name": "iconRight", + "name": "assistiveText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Place icon on the right.", - "fieldName": "iconRight" + "default": "''", + "description": "DEPRECATED. Use `label` instead.\nButton assistive text, title + aria-label.", + "fieldName": "assistiveText" }, { - "name": "hideLabel", + "name": "href", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Visually hide the label.", - "fieldName": "hideLabel" + "default": "''", + "description": "Turns the button into a link.", + "fieldName": "href" }, { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "name": "backText", + "type": { + "text": "string" + }, + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-text-input", + "tagName": "kyn-header-flyout", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TextInput", + "name": "HeaderFlyout", "declaration": { - "name": "TextInput", - "module": "src/components/reusable/textInput/textInput.ts" + "name": "HeaderFlyout", + "module": "src/components/global/header/headerFlyout.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-text-input", - "declaration": { - "name": "TextInput", - "module": "src/components/reusable/textInput/textInput.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/timepicker/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "TimePicker", + "name": "kyn-header-flyout", "declaration": { - "name": "TimePicker", - "module": "./timepicker" + "name": "HeaderFlyout", + "module": "src/components/global/header/headerFlyout.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/timepicker/timepicker.ts", + "path": "src/components/global/header/headerFlyouts.ts", "declarations": [ { "kind": "class", - "description": "Timepicker: uses Flatpickr library,time picker implementation -- `https://flatpickr.js.org/examples/#time-picker`", - "name": "TimePicker", + "description": "Container for header-flyout components.", + "name": "HeaderFlyouts", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for header-flyout components.", + "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "Label text.", - "attribute": "label" - }, - { - "kind": "field", - "name": "locale", - "type": { - "text": "SupportedLocale" - }, - "default": "'en'", - "description": "Sets desired locale and, if supported, dynamically loads language lib", - "attribute": "locale" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "Date | null" - }, - "default": "null", - "description": "Sets date/time value.", - "attribute": "value" - }, - { - "kind": "field", - "name": "defaultDate", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default time value.", - "attribute": "defaultDate" - }, - { - "kind": "field", - "name": "defaultHour", + "name": "open", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial value of the hour element.", - "attribute": "defaultHour" + "default": "false", + "attribute": "open" }, { - "kind": "field", - "name": "defaultMinute", - "type": { - "text": "number | null" - }, - "default": "null", - "description": "Sets initial value of the minute element.", - "attribute": "defaultMinute" + "kind": "method", + "name": "_toggleOpen", + "privacy": "private" }, { - "kind": "field", - "name": "defaultErrorMessage", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets default error message.", - "attribute": "defaultErrorMessage" - }, + "kind": "method", + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "attributes": [ { - "kind": "field", - "name": "warnText", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets validation warning messaging.", - "attribute": "warnText" - }, + "default": "false", + "fieldName": "open" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-flyouts", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderFlyouts", + "declaration": { + "name": "HeaderFlyouts", + "module": "src/components/global/header/headerFlyouts.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-flyouts", + "declaration": { + "name": "HeaderFlyouts", + "module": "src/components/global/header/headerFlyouts.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerLink.ts", + "declarations": [ + { + "kind": "class", + "description": "Component for navigation links within the Header.", + "name": "HeaderLink", + "slots": [ { - "kind": "field", - "name": "caption", - "type": { - "text": "string" - }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "attribute": "caption" + "description": "Slot for link text/content.", + "name": "unnamed" }, + { + "description": "Slot for sublinks (up to two levels).", + "name": "links" + } + ], + "members": [ { "kind": "field", - "name": "required", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Sets datepicker form input value to required/required.", - "attribute": "required" + "description": "Link open state.", + "attribute": "open" }, { "kind": "field", - "name": "size", + "name": "href", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "attribute": "size" - }, - { - "kind": "field", - "name": "timepickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "attribute": "timepickerDisabled" + "default": "''", + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "twentyFourHourFormat", + "name": "target", + "default": "'_self'", "type": { - "text": "boolean | null" + "text": "'_self'" }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "attribute": "twentyFourHourFormat" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "attribute": "target" }, { "kind": "field", - "name": "minTime", + "name": "rel", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "attribute": "minTime" + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "attribute": "rel" }, { "kind": "field", - "name": "maxTime", + "name": "isActive", "type": { - "text": "string | number | Date" + "text": "boolean" }, - "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "attribute": "maxTime" + "default": "false", + "description": "Link active state, for example when URL path matches link href.", + "attribute": "isActive" }, { "kind": "field", - "name": "errorAriaLabel", + "name": "divider", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "attribute": "errorAriaLabel" + "default": "false", + "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", + "attribute": "divider" }, { "kind": "field", - "name": "errorTitle", + "name": "searchLabel", "type": { "text": "string" }, - "default": "''", - "description": "Sets title attribute for error message.", - "attribute": "errorTitle" + "default": "'Search'", + "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", + "attribute": "searchLabel" }, { "kind": "field", - "name": "warningAriaLabel", + "name": "backText", "type": { "text": "string" }, - "default": "''", - "description": "Sets aria label attribute for warning message.", - "attribute": "warningAriaLabel" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { "kind": "field", - "name": "warningTitle", + "name": "_searchTerm", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for warning message.", - "attribute": "warningTitle" - }, - { - "kind": "field", - "name": "textStrings", - "default": "{\n requiredText: 'Required',\n clearAll: 'Clear',\n}", - "description": "Customizable text strings.", - "attribute": "textStrings", - "type": { - "text": "object" - } - }, - { - "kind": "method", - "name": "renderValidationMessage", - "privacy": "private", - "parameters": [ - { - "name": "errorId", - "type": { - "text": "string" - } - }, - { - "name": "warningId", - "type": { - "text": "string" - } - } - ] - }, - { - "kind": "method", - "name": "getTimepickerClasses" - }, - { - "kind": "method", - "name": "_handleClear", - "privacy": "private", - "parameters": [ - { - "name": "event", - "type": { - "text": "Event" - } - } - ] - }, - { - "kind": "method", - "name": "setupAnchor", - "privacy": "private" - }, - { - "kind": "method", - "name": "initializeFlatpickr", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "updateFlatpickrOptions", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "getComponentFlatpickrOptions", - "return": { - "type": { - "text": "Promise>" - } - } - }, - { - "kind": "method", - "name": "setInitialDates", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "instance", - "type": { - "text": "flatpickr.Instance" - } - } - ] - }, - { - "kind": "method", - "name": "handleOpen", - "return": { - "type": { - "text": "void" - } - } - }, - { - "kind": "method", - "name": "handleClose", - "return": { - "type": { - "text": "Promise" - } - } - }, - { - "kind": "method", - "name": "handleTimeChange", - "return": { - "type": { - "text": "Promise" - } - }, - "parameters": [ - { - "name": "selectedDates", - "type": { - "text": "Date[]" - } - }, - { - "name": "dateStr", - "type": { - "text": "string" - } - } - ] + "description": "Text for mobile \"Back\" button." }, { "kind": "method", - "name": "_validate", + "name": "_handleSearch", "privacy": "private", - "return": { - "type": { - "text": "void" - } - }, "parameters": [ { - "name": "interacted", - "type": { - "text": "boolean" - } - }, - { - "name": "report", + "name": "e", "type": { - "text": "boolean" + "text": "any" } } ] }, { "kind": "method", - "name": "_onChange", + "name": "_searchFilter", "privacy": "private" }, { "kind": "method", - "name": "_handleFormReset", + "name": "_handleBack", "privacy": "private" }, { "kind": "method", - "name": "setShouldFlatpickrOpen", + "name": "_handleLinksSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "handlePointerEnter", "privacy": "private", "parameters": [ { - "name": "value", + "name": "e", "type": { - "text": "boolean" + "text": "PointerEvent" } } ] }, { "kind": "method", - "name": "closeFlatpickr", - "privacy": "private" + "name": "handlePointerLeave", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] }, { "kind": "method", - "name": "preventFlatpickrOpen", + "name": "handleClick", "privacy": "private", "parameters": [ { - "name": "event", + "name": "e", "type": { "text": "Event" } @@ -15184,346 +14909,537 @@ }, { "kind": "method", - "name": "handleInputClickEvent", + "name": "handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "determineLevel", "privacy": "private" }, { "kind": "method", - "name": "handleInputFocusEvent", + "name": "_positionMenu", "privacy": "private" } ], "events": [ { - "description": "Captures the input event and emits the selected value and original event details.", - "name": "on-change" + "description": "Captures the click event and emits the original event details.", + "name": "on-click" } ], "attributes": [ { - "name": "label", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Label text.", - "fieldName": "label" + "default": "false", + "description": "Link open state.", + "fieldName": "open" }, { - "name": "locale", + "name": "href", "type": { - "text": "SupportedLocale" + "text": "string" }, - "default": "'en'", - "description": "Sets desired locale and, if supported, dynamically loads language lib", - "fieldName": "locale" + "default": "''", + "description": "Link url.", + "fieldName": "href" }, { - "name": "value", + "name": "target", + "default": "'_self'", "type": { - "text": "Date | null" + "text": "'_self'" }, - "default": "null", - "description": "Sets date/time value.", - "fieldName": "value" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "fieldName": "target" }, { - "name": "defaultDate", + "name": "rel", "type": { "text": "string" }, "default": "''", - "description": "Sets default time value.", - "fieldName": "defaultDate" + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "fieldName": "rel" }, { - "name": "defaultHour", + "name": "isActive", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial value of the hour element.", - "fieldName": "defaultHour" + "default": "false", + "description": "Link active state, for example when URL path matches link href.", + "fieldName": "isActive" }, { - "name": "defaultMinute", + "name": "divider", "type": { - "text": "number | null" + "text": "boolean" }, - "default": "null", - "description": "Sets initial value of the minute element.", - "fieldName": "defaultMinute" + "default": "false", + "description": "DEPRECATED. Adds a 1px shadow to the bottom of the link.", + "fieldName": "divider" }, { - "name": "defaultErrorMessage", + "name": "searchLabel", "type": { "text": "string" }, - "default": "''", - "description": "Sets default error message.", - "fieldName": "defaultErrorMessage" + "default": "'Search'", + "description": "Label for sub-menu link search input, which is visible with > 5 sub-links.", + "fieldName": "searchLabel" }, { - "name": "warnText", + "name": "backText", "type": { "text": "string" }, - "default": "''", - "description": "Sets validation warning messaging.", - "fieldName": "warnText" - }, + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-link", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderLink", + "declaration": { + "name": "HeaderLink", + "module": "src/components/global/header/headerLink.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-link", + "declaration": { + "name": "HeaderLink", + "module": "src/components/global/header/headerLink.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerNav.ts", + "declarations": [ + { + "kind": "class", + "description": "Container for header navigation links.", + "name": "HeaderNav", + "slots": [ { - "name": "caption", + "description": "This element has a slot.", + "name": "unnamed" + } + ], + "members": [ + { + "kind": "field", + "name": "slot", "type": { "text": "string" }, - "default": "''", - "description": "Sets caption to be displayed under primary date picker elements.", - "fieldName": "caption" + "default": "'left'", + "description": "Force correct slot", + "attribute": "slot", + "reflects": true }, { - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets datepicker form input value to required/required.", - "fieldName": "required" + "kind": "method", + "name": "_toggleMenuOpen", + "privacy": "private" }, { - "name": "size", + "kind": "method", + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + }, + { + "kind": "method", + "name": "_handleOverlayClick", + "privacy": "private" + } + ], + "attributes": [ + { + "name": "slot", "type": { "text": "string" }, - "default": "'md'", - "description": "Input size. \"sm\", \"md\", or \"lg\".", - "fieldName": "size" - }, + "default": "'left'", + "description": "Force correct slot", + "fieldName": "slot" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-nav", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderNav", + "declaration": { + "name": "HeaderNav", + "module": "src/components/global/header/headerNav.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-nav", + "declaration": { + "name": "HeaderNav", + "module": "src/components/global/header/headerNav.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerNotificationPanel.ts", + "declarations": [ + { + "kind": "class", + "description": "Component for notification panel within the Header.", + "name": "HeaderNotificationPanel", + "slots": [ { - "name": "timepickerDisabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Sets entire datepicker form element to enabled/disabled.", - "fieldName": "timepickerDisabled" + "description": "Slot for panel menu", + "name": "menu-slot" }, { - "name": "twentyFourHourFormat", - "type": { - "text": "boolean | null" - }, - "default": "null", - "description": "Sets 24 hour formatting true/false.\nDefaults to 12H for all `en-*` locales and 24H for all other locales.", - "fieldName": "twentyFourHourFormat" - }, + "description": "Slot for notification content.", + "name": "unnamed" + } + ], + "members": [ { - "name": "minTime", + "kind": "field", + "name": "panelTitle", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets lower boundary of datepicker date selection.", - "fieldName": "minTime" + "description": "Notification panel Title.", + "attribute": "panelTitle" }, { - "name": "maxTime", + "kind": "field", + "name": "panelFooterBtnText", "type": { - "text": "string | number | Date" + "text": "string" }, "default": "''", - "description": "Sets upper boundary of datepicker date selection.", - "fieldName": "maxTime" + "description": "Notification panel footer button text.", + "attribute": "panelFooterBtnText" }, { - "name": "errorAriaLabel", + "kind": "field", + "name": "hidePanelFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets aria label attribute for error message.", - "fieldName": "errorAriaLabel" + "default": "false", + "description": "Hide notification panel footer", + "attribute": "hidePanelFooter" }, { - "name": "errorTitle", + "kind": "method", + "name": "_handlefooterBtnEvent", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "any" + } + } + ] + } + ], + "events": [ + { + "description": "Emits the panel footer button event.", + "name": "on-footer-btn-click" + } + ], + "attributes": [ + { + "name": "panelTitle", "type": { "text": "string" }, "default": "''", - "description": "Sets title attribute for error message.", - "fieldName": "errorTitle" + "description": "Notification panel Title.", + "fieldName": "panelTitle" }, { - "name": "warningAriaLabel", + "name": "panelFooterBtnText", "type": { "text": "string" }, "default": "''", - "description": "Sets aria label attribute for warning message.", - "fieldName": "warningAriaLabel" + "description": "Notification panel footer button text.", + "fieldName": "panelFooterBtnText" }, { - "name": "warningTitle", + "name": "hidePanelFooter", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Sets title attribute for warning message.", - "fieldName": "warningTitle" - }, - { - "name": "textStrings", - "default": "_defaultTextStrings", - "description": "Customizable text strings.", - "fieldName": "textStrings" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "default": "false", + "description": "Hide notification panel footer", + "fieldName": "hidePanelFooter" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-time-picker", + "tagName": "kyn-header-notification-panel", "customElement": true } ], "exports": [ { "kind": "js", - "name": "TimePicker", + "name": "HeaderNotificationPanel", "declaration": { - "name": "TimePicker", - "module": "src/components/reusable/timepicker/timepicker.ts" + "name": "HeaderNotificationPanel", + "module": "src/components/global/header/headerNotificationPanel.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-time-picker", - "declaration": { - "name": "TimePicker", - "module": "src/components/reusable/timepicker/timepicker.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/components/reusable/toggleButton/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "ToggleButton", + "name": "kyn-header-notification-panel", "declaration": { - "name": "ToggleButton", - "module": "./toggleButton" + "name": "HeaderNotificationPanel", + "module": "src/components/global/header/headerNotificationPanel.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/toggleButton/toggleButton.ts", + "path": "src/components/global/header/headerPanelLink.ts", "declarations": [ { "kind": "class", - "description": "Toggle Button.", - "name": "ToggleButton", + "description": "Header fly-out panel link.", + "name": "HeaderPanelLink", "slots": [ { - "description": "Slot for tooltip.", - "name": "tooltip" + "description": "Slot for link text/content.", + "name": "unnamed" } ], "members": [ { "kind": "field", - "name": "label", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "attribute": "label" + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "checked", + "name": "target", + "default": "'_self'", "type": { - "text": "boolean" + "text": "'_self'" }, - "default": "false", - "description": "Checkbox checked state.", - "attribute": "checked" + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "attribute": "target" }, { "kind": "field", - "name": "checkedText", + "name": "rel", "type": { "text": "string" }, - "default": "'On'", - "description": "Checked state text.", - "attribute": "checkedText" + "default": "''", + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "attribute": "rel" + }, + { + "kind": "method", + "name": "handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the click event and emits the original event details.", + "name": "on-click" + } + ], + "attributes": [ + { + "name": "href", + "type": { + "text": "string" + }, + "default": "''", + "description": "Link url.", + "fieldName": "href" + }, + { + "name": "target", + "default": "'_self'", + "type": { + "text": "'_self'" + }, + "description": "Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\"", + "fieldName": "target" }, + { + "name": "rel", + "type": { + "text": "string" + }, + "default": "''", + "description": "Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship", + "fieldName": "rel" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-header-panel-link", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "HeaderPanelLink", + "declaration": { + "name": "HeaderPanelLink", + "module": "src/components/global/header/headerPanelLink.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "kyn-header-panel-link", + "declaration": { + "name": "HeaderPanelLink", + "module": "src/components/global/header/headerPanelLink.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/header/headerUserProfile.ts", + "declarations": [ + { + "kind": "class", + "description": "Header user profile.", + "name": "HeaderUserProfile", + "slots": [ + { + "description": "Slot for the profile picture img.", + "name": "unnamed" + } + ], + "members": [ { "kind": "field", - "name": "uncheckedText", + "name": "name", "type": { "text": "string" }, - "default": "'Off'", - "description": "Unchecked state text.", - "attribute": "uncheckedText" + "default": "''", + "description": "The user's name.", + "attribute": "name" }, { "kind": "field", - "name": "small", + "name": "subtitle", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Option to use small size.", - "attribute": "small" + "default": "''", + "description": "The user's job title, or subtext.", + "attribute": "subtitle" }, { "kind": "field", - "name": "disabled", + "name": "email", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Checkbox disabled state.", - "attribute": "disabled" + "default": "''", + "description": "The user's email address.", + "attribute": "email" }, { "kind": "field", - "name": "reverse", + "name": "profileLink", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Reverse UI element order, label on the left.", - "attribute": "reverse" + "default": "''", + "description": "View profile link URL.", + "attribute": "profileLink" }, { "kind": "field", - "name": "hideLabel", + "name": "profileLinkText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hides the label visually.", - "attribute": "hideLabel" + "default": "'View Profile'", + "description": "View Profile link text.", + "attribute": "profileLinkText" }, { "kind": "method", - "name": "handleChange", + "name": "_handleProfileClick", "privacy": "private", "parameters": [ { @@ -15533,403 +15449,580 @@ } } ] - }, - { - "kind": "method", - "name": "_validate", - "privacy": "private", - "parameters": [ - { - "name": "interacted", - "type": { - "text": "Boolean" - } - }, - { - "name": "report", - "type": { - "text": "Boolean" - } - } - ] } ], "events": [ { - "description": "Captures the change event and emits the selected value and original event details.", - "name": "on-change" + "description": "Captures the view profile link click event and emits the original event details.", + "name": "on-profile-link-click" } ], "attributes": [ { - "name": "label", + "name": "name", "type": { "text": "string" }, "default": "''", - "description": "Label text.", - "fieldName": "label" - }, - { - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox checked state.", - "fieldName": "checked" + "description": "The user's name.", + "fieldName": "name" }, { - "name": "checkedText", + "name": "subtitle", "type": { "text": "string" }, - "default": "'On'", - "description": "Checked state text.", - "fieldName": "checkedText" + "default": "''", + "description": "The user's job title, or subtext.", + "fieldName": "subtitle" }, { - "name": "uncheckedText", + "name": "email", "type": { "text": "string" }, - "default": "'Off'", - "description": "Unchecked state text.", - "fieldName": "uncheckedText" - }, - { - "name": "small", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Option to use small size.", - "fieldName": "small" - }, - { - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Checkbox disabled state.", - "fieldName": "disabled" + "default": "''", + "description": "The user's email address.", + "fieldName": "email" }, { - "name": "reverse", + "name": "profileLink", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Reverse UI element order, label on the left.", - "fieldName": "reverse" + "default": "''", + "description": "View profile link URL.", + "fieldName": "profileLink" }, { - "name": "hideLabel", + "name": "profileLinkText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Hides the label visually.", - "fieldName": "hideLabel" - } - ], - "mixins": [ - { - "name": "FormMixin", - "module": "/src/common/mixins/form-input" + "default": "'View Profile'", + "description": "View Profile link text.", + "fieldName": "profileLinkText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-toggle-button", + "tagName": "kyn-header-user-profile", "customElement": true } ], "exports": [ { "kind": "js", - "name": "ToggleButton", + "name": "HeaderUserProfile", "declaration": { - "name": "ToggleButton", - "module": "src/components/reusable/toggleButton/toggleButton.ts" + "name": "HeaderUserProfile", + "module": "src/components/global/header/headerUserProfile.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-toggle-button", + "name": "kyn-header-user-profile", "declaration": { - "name": "ToggleButton", - "module": "src/components/reusable/toggleButton/toggleButton.ts" + "name": "HeaderUserProfile", + "module": "src/components/global/header/headerUserProfile.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tooltip/index.ts", + "path": "src/components/global/header/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "Header", + "declaration": { + "name": "Header", + "module": "./header" + } + }, + { + "kind": "js", + "name": "HeaderNav", + "declaration": { + "name": "HeaderNav", + "module": "./headerNav" + } + }, + { + "kind": "js", + "name": "HeaderLink", + "declaration": { + "name": "HeaderLink", + "module": "./headerLink" + } + }, + { + "kind": "js", + "name": "HeaderCategory", + "declaration": { + "name": "HeaderCategory", + "module": "./headerCategory" + } + }, + { + "kind": "js", + "name": "HeaderDivider", + "declaration": { + "name": "HeaderDivider", + "module": "./headerDivider" + } + }, + { + "kind": "js", + "name": "HeaderFlyouts", + "declaration": { + "name": "HeaderFlyouts", + "module": "./headerFlyouts" + } + }, + { + "kind": "js", + "name": "HeaderFlyout", + "declaration": { + "name": "HeaderFlyout", + "module": "./headerFlyout" + } + }, + { + "kind": "js", + "name": "HeaderUserProfile", + "declaration": { + "name": "HeaderUserProfile", + "module": "./headerUserProfile" + } + }, + { + "kind": "js", + "name": "HeaderPanelLink", + "declaration": { + "name": "HeaderPanelLink", + "module": "./headerPanelLink" + } + }, + { + "kind": "js", + "name": "HeaderNotificationPanel", + "declaration": { + "name": "HeaderNotificationPanel", + "module": "./headerNotificationPanel" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/components/global/localNav/index.ts", "declarations": [], "exports": [ { "kind": "js", - "name": "Tooltip", + "name": "LocalNav", "declaration": { - "name": "Tooltip", - "module": "./tooltip" + "name": "LocalNav", + "module": "./localNav" + } + }, + { + "kind": "js", + "name": "LocalNavLink", + "declaration": { + "name": "LocalNavLink", + "module": "./localNavLink" + } + }, + { + "kind": "js", + "name": "LocalNavDivider", + "declaration": { + "name": "LocalNavDivider", + "module": "./localNavDivider" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/tooltip/tooltip.ts", + "path": "src/components/global/localNav/localNav.ts", "declarations": [ { "kind": "class", - "description": "Tooltip.", - "name": "Tooltip", + "description": "The global Side Navigation component.", + "name": "LocalNav", "slots": [ { - "description": "Slot for tooltip content.", + "description": "The default slot, for local nav links.", "name": "unnamed" }, { - "description": "Slot for custom anchor button content.", - "name": "anchor" + "description": "Slot for a search input", + "name": "search" } ], "members": [ { "kind": "field", - "name": "assistiveText", + "name": "pinned", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Tooltip'", - "description": "Assistive text for anchor button.", - "attribute": "assistiveText" + "default": "false", + "description": "Local nav pinned state.", + "attribute": "pinned" + }, + { + "kind": "field", + "name": "textStrings", + "default": "{\n pin: 'Pin',\n unpin: 'Unpin',\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n}", + "description": "Text string customization.", + "attribute": "textStrings", + "type": { + "text": "object" + } }, { "kind": "method", - "name": "_positionTooltip", - "privacy": "private" + "name": "_handleNavToggle", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] }, { "kind": "method", - "name": "_handleOpen", + "name": "_handleMobileNavToggle", "privacy": "private" }, { "kind": "method", - "name": "_handleClose", + "name": "handlePointerEnter", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] + }, + { + "kind": "method", + "name": "handlePointerLeave", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "PointerEvent" + } + } + ] + }, + { + "kind": "method", + "name": "_updateChildren", "privacy": "private" }, { "kind": "method", - "name": "_handleMouseLeave", + "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", - "name": "_handleEsc", + "name": "_handleLinkActive", "privacy": "private", "parameters": [ { "name": "e", "type": { - "text": "KeyboardEvent" + "text": "any" } } ] }, { "kind": "method", - "name": "_emitToggle", - "privacy": "private" + "name": "_handleClickOut", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] } ], "events": [ { - "description": "Emits the open state of the tooltip on open/close.", - "name": "on-tooltip-toggle" + "description": "Captures the click event and emits the pinned state and original event details.", + "name": "on-toggle" } ], "attributes": [ { - "name": "assistiveText", + "name": "pinned", "type": { - "text": "string" + "text": "boolean" }, - "default": "'Tooltip'", - "description": "Assistive text for anchor button.", - "fieldName": "assistiveText" + "default": "false", + "description": "Local nav pinned state.", + "fieldName": "pinned" + }, + { + "name": "textStrings", + "default": "_defaultTextStrings", + "description": "Text string customization.", + "fieldName": "textStrings" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-tooltip", + "tagName": "kyn-local-nav", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Tooltip", + "name": "LocalNav", "declaration": { - "name": "Tooltip", - "module": "src/components/reusable/tooltip/tooltip.ts" + "name": "LocalNav", + "module": "src/components/global/localNav/localNav.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-tooltip", + "name": "kyn-local-nav", "declaration": { - "name": "Tooltip", - "module": "src/components/reusable/tooltip/tooltip.ts" + "name": "LocalNav", + "module": "src/components/global/localNav/localNav.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/index.ts", - "declarations": [], - "exports": [ + "path": "src/components/global/localNav/localNavDivider.ts", + "declarations": [ { - "kind": "js", - "name": "Widget", - "declaration": { - "name": "Widget", - "module": "./widget" - } - }, + "kind": "class", + "description": "Local Nav divider", + "name": "LocalNavDivider", + "members": [ + { + "kind": "field", + "name": "heading", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional heading text.", + "attribute": "heading" + } + ], + "attributes": [ + { + "name": "heading", + "type": { + "text": "string" + }, + "default": "''", + "description": "Optional heading text.", + "fieldName": "heading" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "kyn-local-nav-divider", + "customElement": true + } + ], + "exports": [ { "kind": "js", - "name": "WidgetDragHandle", + "name": "LocalNavDivider", "declaration": { - "name": "WidgetDragHandle", - "module": "./widgetDragHandle" + "name": "LocalNavDivider", + "module": "src/components/global/localNav/localNavDivider.ts" } }, { - "kind": "js", - "name": "WidgetGridstack", + "kind": "custom-element-definition", + "name": "kyn-local-nav-divider", "declaration": { - "name": "WidgetGridstack", - "module": "./widgetGridstack" + "name": "LocalNavDivider", + "module": "src/components/global/localNav/localNavDivider.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/widget.ts", + "path": "src/components/global/localNav/localNavLink.ts", "declarations": [ { "kind": "class", - "description": "Widget.", - "name": "Widget", + "description": "Link component for use in the global Side Navigation component.", + "name": "LocalNavLink", "slots": [ { - "description": "Slot for widget content.", + "description": "The default slot, for the link text.", "name": "unnamed" }, { - "description": "Slot for action buttons.", - "name": "action" - }, - { - "description": "Slot for tooltip in header.", - "name": "tooltip" + "description": "Slot for an icon. Use 16px size.", + "name": "icon" }, { - "description": "Slot for drag handle.", - "name": "draghandle" + "description": "Slot for the next level of links, supports three levels.", + "name": "links" } ], "members": [ { "kind": "field", - "name": "widgetTitle", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Widget title.", - "attribute": "widgetTitle" + "description": "Link url.", + "attribute": "href" }, { "kind": "field", - "name": "subTitle", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Widget sub-title.", - "attribute": "subTitle" + "default": "false", + "description": "Expanded state.", + "attribute": "expanded" + }, + { + "kind": "field", + "name": "active", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Active state.", + "attribute": "active", + "reflects": true }, { "kind": "field", - "name": "dragActive", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Widget drag active state.", - "attribute": "dragActive" + "description": "Disabled state.", + "attribute": "disabled" }, { "kind": "field", - "name": "disabled", + "name": "backText", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Widget disabled state.", - "attribute": "disabled" + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "attribute": "backText" }, { "kind": "method", - "name": "_handleSlotChange", + "name": "_handleTextSlotChange", "privacy": "private" }, { "kind": "method", - "name": "_updateChildren", + "name": "_getSlotText", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleLinksSlotChange", + "privacy": "private" + }, + { + "kind": "method", + "name": "updateChildren", + "privacy": "private" + }, + { + "kind": "method", + "name": "_handleBack", "privacy": "private" + }, + { + "kind": "method", + "name": "handleClick", + "privacy": "private", + "parameters": [ + { + "name": "e", + "type": { + "text": "Event" + } + } + ] + } + ], + "events": [ + { + "description": "Captures the click event and emits the original event, level, and if default was prevented.", + "name": "on-click" } ], "attributes": [ { - "name": "widgetTitle", + "name": "href", "type": { "text": "string" }, "default": "''", - "description": "Widget title.", - "fieldName": "widgetTitle" + "description": "Link url.", + "fieldName": "href" }, { - "name": "subTitle", + "name": "expanded", "type": { - "text": "string" + "text": "boolean" }, - "default": "''", - "description": "Widget sub-title.", - "fieldName": "subTitle" + "default": "false", + "description": "Expanded state.", + "fieldName": "expanded" }, { - "name": "dragActive", + "name": "active", "type": { "text": "boolean" }, "default": "false", - "description": "Widget drag active state.", - "fieldName": "dragActive" + "description": "Active state.", + "fieldName": "active" }, { "name": "disabled", @@ -15937,217 +16030,105 @@ "text": "boolean" }, "default": "false", - "description": "Widget disabled state.", + "description": "Disabled state.", "fieldName": "disabled" + }, + { + "name": "backText", + "type": { + "text": "string" + }, + "default": "'Back'", + "description": "Text for mobile \"Back\" button.", + "fieldName": "backText" } ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-widget", + "tagName": "kyn-local-nav-link", "customElement": true } ], "exports": [ { "kind": "js", - "name": "Widget", + "name": "LocalNavLink", "declaration": { - "name": "Widget", - "module": "src/components/reusable/widget/widget.ts" + "name": "LocalNavLink", + "module": "src/components/global/localNav/localNavLink.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-widget", + "name": "kyn-local-nav-link", "declaration": { - "name": "Widget", - "module": "src/components/reusable/widget/widget.ts" + "name": "LocalNavLink", + "module": "src/components/global/localNav/localNavLink.ts" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/widgetDragHandle.ts", - "declarations": [ - { - "kind": "class", - "description": "Widget drag handle.", - "name": "WidgetDragHandle", - "members": [ - { - "kind": "field", - "name": "slot", - "type": { - "text": "string" - }, - "default": "'draghandle'", - "description": "Force widget slot", - "attribute": "slot", - "reflects": true - } - ], - "attributes": [ - { - "name": "slot", - "type": { - "text": "string" - }, - "default": "'draghandle'", - "description": "Force widget slot", - "fieldName": "slot" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "kyn-widget-drag-handle", - "customElement": true - } - ], + "path": "src/components/global/uiShell/index.ts", + "declarations": [], "exports": [ { "kind": "js", - "name": "WidgetDragHandle", - "declaration": { - "name": "WidgetDragHandle", - "module": "src/components/reusable/widget/widgetDragHandle.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "kyn-widget-drag-handle", + "name": "UiShell", "declaration": { - "name": "WidgetDragHandle", - "module": "src/components/reusable/widget/widgetDragHandle.ts" + "name": "UiShell", + "module": "./uiShell" } } ] }, { "kind": "javascript-module", - "path": "src/components/reusable/widget/widgetGridstack.ts", + "path": "src/components/global/uiShell/uiShell.ts", "declarations": [ { "kind": "class", - "description": "GridStack wrapper that includes Shidoka default config and styles.", - "name": "WidgetGridstack", + "description": "Container to help with positioning and padding of the global elements such as: adds padding for the fixed Header and Local Nav, adds main content gutters, and makes Footer sticky. This takes the onus off of the consuming app to configure these values.", + "name": "UiShell", "slots": [ { - "description": "Slot for .grid-stack container element.", + "description": "Slot for global elements.", "name": "unnamed" } ], "members": [ - { - "kind": "field", - "name": "layout", - "type": { - "text": "any" - }, - "default": "{}", - "description": "GridStack layout/widget size/position definitions for each breakpoint.", - "attribute": "layout" - }, - { - "kind": "field", - "name": "gridstackConfig", - "type": { - "text": "any" - }, - "default": "Config", - "description": "GridStack config.", - "attribute": "gridstackConfig" - }, - { - "kind": "field", - "name": "gridStack", - "type": { - "text": "any" - }, - "default": "GridStack", - "description": "GridStack instance." - }, - { - "kind": "field", - "name": "grid", - "type": { - "text": "any" - }, - "description": "GridStack grid instance." - }, - { - "kind": "method", - "name": "_saveLayout", - "privacy": "private" - }, - { - "kind": "method", - "name": "_updateLayout", - "privacy": "private" - }, { "kind": "method", - "name": "_setBreakpoint", + "name": "handleSlotChange", "privacy": "private" } ], - "events": [ - { - "description": "Emits after GridStack initializes.", - "name": "on-grid-init" - }, - { - "description": "Emits the GridStack save() method results (new layout) on dragstop and resizestop.", - "name": "on-grid-save" - } - ], - "attributes": [ - { - "name": "layout", - "type": { - "text": "any" - }, - "default": "{}", - "description": "GridStack layout/widget size/position definitions for each breakpoint.", - "fieldName": "layout" - }, - { - "name": "gridstackConfig", - "type": { - "text": "any" - }, - "default": "Config", - "description": "GridStack config.", - "fieldName": "gridstackConfig" - } - ], "superclass": { "name": "LitElement", "package": "lit" }, - "tagName": "kyn-widget-gridstack", + "tagName": "kyn-ui-shell", "customElement": true } ], "exports": [ { "kind": "js", - "name": "WidgetGridstack", + "name": "UiShell", "declaration": { - "name": "WidgetGridstack", - "module": "src/components/reusable/widget/widgetGridstack.ts" + "name": "UiShell", + "module": "src/components/global/uiShell/uiShell.ts" } }, { "kind": "custom-element-definition", - "name": "kyn-widget-gridstack", + "name": "kyn-ui-shell", "declaration": { - "name": "WidgetGridstack", - "module": "src/components/reusable/widget/widgetGridstack.ts" + "name": "UiShell", + "module": "src/components/global/uiShell/uiShell.ts" } } ] diff --git a/src/components/reusable/tag/tag.skeleton.ts b/src/components/reusable/tag/tag.skeleton.ts index f42956b9..c5a02acc 100644 --- a/src/components/reusable/tag/tag.skeleton.ts +++ b/src/components/reusable/tag/tag.skeleton.ts @@ -34,24 +34,16 @@ export class TagSkeleton extends LitElement { @property({ type: String }) tagSize = 'sm'; - /** - * Shade `'light'` (default) and `'dark'` for tag. - */ - @property({ type: String }) - shade = 'light'; - override render() { - const shadeClass = this.shade === 'dark' ? '-dark' : ''; const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small'; const tagClasses = { tags: true, - [`${shadeClass}`]: true, [`${sizeClass}`]: true, }; return html` -
+
{ return html` @@ -85,7 +65,6 @@ export const Skeleton = { showLess: 'Show less', }, tagSkeletonLength: 10, - shade: 'light', }, render: (args) => { return html` @@ -97,7 +76,7 @@ export const Skeleton = { > ${Array.from( { length: args.tagSkeletonLength }, - () => html`` + () => html`` )} `; From b8ee4ec4a932a43e3c373d9a3c18b1d76f1aba31 Mon Sep 17 00:00:00 2001 From: Jaideep M V <107jaideep@gmail.com> Date: Tue, 7 Jan 2025 17:15:51 +0530 Subject: [PATCH 10/12] fix: keyboard controls for tag --- src/components/reusable/tag/tag.ts | 33 +++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/components/reusable/tag/tag.ts b/src/components/reusable/tag/tag.ts index eabd8761..6c450cfc 100644 --- a/src/components/reusable/tag/tag.ts +++ b/src/components/reusable/tag/tag.ts @@ -101,6 +101,7 @@ export class Tag extends LitElement { title="${this.label}" tabindex="${this.clickable ? '0' : '-1'}" @click=${(e: any) => this.handleTagClick(e, this.label)} + @keydown=${(e: any) => this.handleTagPress(e, this.label)} > ${this.label} ${this.filter @@ -113,6 +114,7 @@ export class Tag extends LitElement { aria-label="${this.clearTagText} ${this.label}" @click=${(e: any) => this.handleTagClear(e, this.label)} + @keydown=${(e: any) => this.handleTagClearPress(e, this.label)} > ${unsafeSVG(clearIcon16)} @@ -124,7 +126,20 @@ export class Tag extends LitElement { private handleTagClear(e: any, value: string) { e.stopPropagation(); - if (!this.disabled) { + if (e.pointerType && !this.disabled) { + const event = new CustomEvent('on-close', { + detail: { + value, + origEvent: e, + }, + }); + this.dispatchEvent(event); + } + } + + private handleTagClearPress(e: any, value: string) { + e.stopPropagation(); + if ((e.keyCode === 32 || e.keyCode === 13) && !this.disabled) { const event = new CustomEvent('on-close', { detail: { value, @@ -146,6 +161,22 @@ export class Tag extends LitElement { this.dispatchEvent(event); } } + + private handleTagPress(e: any, value: string) { + if ( + (e.keyCode === 32 || e.keyCode === 13) && + !this.disabled && + this.clickable + ) { + const event = new CustomEvent('on-click', { + detail: { + value, + origEvent: e, + }, + }); + this.dispatchEvent(event); + } + } } declare global { From 62491095bce14247978765b7698a4624908e4fde Mon Sep 17 00:00:00 2001 From: Jaideep M V <107jaideep@gmail.com> Date: Tue, 7 Jan 2025 21:27:33 +0530 Subject: [PATCH 11/12] chore: comments and migration guide notes --- src/components/reusable/tag/tag.ts | 2 ++ src/stories/migration.mdx | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/src/components/reusable/tag/tag.ts b/src/components/reusable/tag/tag.ts index 6c450cfc..5583df2a 100644 --- a/src/components/reusable/tag/tag.ts +++ b/src/components/reusable/tag/tag.ts @@ -139,6 +139,7 @@ export class Tag extends LitElement { private handleTagClearPress(e: any, value: string) { e.stopPropagation(); + // Keyboard key codes: 32 = SPACE | 13 = ENTER if ((e.keyCode === 32 || e.keyCode === 13) && !this.disabled) { const event = new CustomEvent('on-close', { detail: { @@ -163,6 +164,7 @@ export class Tag extends LitElement { } private handleTagPress(e: any, value: string) { + // Keyboard key codes: 32 = SPACE | 13 = ENTER if ( (e.keyCode === 32 || e.keyCode === 13) && !this.disabled && diff --git a/src/stories/migration.mdx b/src/stories/migration.mdx index 3271b39f..d11bf1bf 100644 --- a/src/stories/migration.mdx +++ b/src/stories/migration.mdx @@ -31,6 +31,10 @@ _No migration effort required._ - Dropdown options - `selected` prop has been removed. Use the `value` prop from Dropdown to control the selection. +#### Tag & Tag skeleton + +- `shade` prop is removed. + #### Form Input Components - Radio Button Group , Number Input, Text Input , Text Area, Checkbox Group, Checkbox Subgroups, Dropdown From bf2a57c3448d065e53dbcc28f4f09627170d540f Mon Sep 17 00:00:00 2001 From: Jaideep M V <107jaideep@gmail.com> Date: Thu, 9 Jan 2025 16:22:17 +0530 Subject: [PATCH 12/12] fix: outline-width value change --- src/components/reusable/tag/tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/reusable/tag/tag.scss b/src/components/reusable/tag/tag.scss index 9f9bea69..f2489cb4 100644 --- a/src/components/reusable/tag/tag.scss +++ b/src/components/reusable/tag/tag.scss @@ -76,7 +76,7 @@ &:focus, &:active { - outline-width: 2px; + outline-width: 1px; outline-style: solid; }