{ "timestamp": "2020-09-23T20:00:26", "compiler": { "name": "@stencil/core", "version": "1.12.3", "typescriptVersion": "3.8.3" }, "components": [ { "filePath": "./src/components/backdrop/backdrop.tsx", "encapsulation": "shadow", "tag": "lu-backdrop", "readme": "# lu-backdrop\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "stopPropagation", "type": "boolean", "mutable": false, "attr": "stop-propagation", "reflectToAttr": false, "docs": "If `true`, the backdrop will stop propagation on tap.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "tappable", "type": "boolean", "mutable": false, "attr": "tappable", "reflectToAttr": false, "docs": "If `true`, the backdrop will can be clicked and will emit the `luBackdropTap` event.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "visible", "type": "boolean", "mutable": false, "attr": "visible", "reflectToAttr": false, "docs": "If `true`, the backdrop will be visible.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luBackdropTap", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the backdrop is tapped.", "docsTags": [] } ], "listeners": [ { "event": "touchstart", "capture": true, "passive": false }, { "event": "click", "capture": true, "passive": false }, { "event": "mousedown", "capture": true, "passive": false } ], "styles": [], "slots": [], "dependents": [ "lu-modal" ], "dependencies": [], "dependencyGraph": { "lu-modal": [ "lu-backdrop" ] } }, { "filePath": "./src/components/breakpoints/breakpoints.tsx", "encapsulation": "shadow", "tag": "lu-breakpoints", "readme": "# mylu-breakpoints\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n\r\n" }, "props": [ { "name": "lg", "type": "number", "mutable": false, "attr": "lg", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "BREAKPOINT_CONFIG.lg", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "md", "type": "number", "mutable": false, "attr": "md", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "BREAKPOINT_CONFIG.md", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "sm", "type": "number", "mutable": false, "attr": "sm", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "BREAKPOINT_CONFIG.sm", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "xl", "type": "number", "mutable": false, "attr": "xl", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "BREAKPOINT_CONFIG.xl", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luBreakpointDataUpdated", "detail": "ScreenSizeUpdatedType", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true } ], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/button/button.tsx", "encapsulation": "shadow", "tag": "lu-button", "readme": "# lu-button\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
\r\n \r\n \r\n Mustard\r\n \r\n
\r\n
\r\n \r\n Primary Light\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Fill Outline\r\n \r\n
\r\n
\r\n \r\n \r\n Fill Outline Small Size\r\n \r\n
\r\n" }, "props": [ { "name": "buttonType", "type": "string", "mutable": true, "attr": "button-type", "reflectToAttr": false, "docs": "The type of button.", "docsTags": [], "default": "\"button\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "If `true`, the user cannot interact with the button.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "expand", "type": "\"block\" | \"full\"", "mutable": false, "attr": "expand", "reflectToAttr": true, "docs": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\r\nwithout left and right borders.", "docsTags": [], "values": [ { "value": "block", "type": "string" }, { "value": "full", "type": "string" } ], "optional": true, "required": false }, { "name": "fill", "type": "\"clear\" | \"default\" | \"outline\" | \"solid\"", "mutable": true, "attr": "fill", "reflectToAttr": true, "docs": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\r\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\r\na toolbar, where the default is `\"clear\"`.", "docsTags": [], "values": [ { "value": "clear", "type": "string" }, { "value": "default", "type": "string" }, { "value": "outline", "type": "string" }, { "value": "solid", "type": "string" } ], "optional": true, "required": false }, { "name": "href", "type": "string", "mutable": false, "attr": "href", "reflectToAttr": false, "docs": "Contains a URL or a URL fragment that the hyperlink points to.\r\nIf this property is set, an anchor tag will be rendered.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "Sets the aria label on the button or link for screen reader purposes.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "rel", "type": "string", "mutable": false, "attr": "rel", "reflectToAttr": false, "docs": "Specifies relationship of current document to linked document.\r\nOnly used when href prop is set.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "shape", "type": "\"round\"", "mutable": false, "attr": "shape", "reflectToAttr": true, "docs": "The button shape.", "docsTags": [], "values": [ { "value": "round", "type": "string" } ], "optional": true, "required": false }, { "name": "size", "type": "\"default\" | \"large\" | \"small\"", "mutable": false, "attr": "size", "reflectToAttr": true, "docs": "The button size.", "docsTags": [], "default": "\"default\"", "values": [ { "value": "default", "type": "string" }, { "value": "large", "type": "string" }, { "value": "small", "type": "string" } ], "optional": true, "required": false }, { "name": "strong", "type": "boolean", "mutable": false, "attr": "strong", "reflectToAttr": false, "docs": "If `true`, activates a button with a heavier font weight.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "target", "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"", "mutable": false, "attr": "target", "reflectToAttr": false, "docs": "Specifies how to display link.\r\nOnly used when href prop is set.", "docsTags": [], "values": [ { "value": "_blank", "type": "string" }, { "value": "_parent", "type": "string" }, { "value": "_self", "type": "string" }, { "value": "_top", "type": "string" } ], "optional": true, "required": false }, { "name": "type", "type": "\"button\" | \"reset\" | \"submit\"", "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "The type of the button.", "docsTags": [], "default": "\"button\"", "values": [ { "value": "button", "type": "string" }, { "value": "reset", "type": "string" }, { "value": "submit", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the button loses focus.", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the button has focus.", "docsTags": [] } ], "listeners": [], "styles": [ { "name": "--background", "annotation": "prop", "docs": "Background of the button" }, { "name": "--background-activated", "annotation": "prop", "docs": "Background of the button when activated" }, { "name": "--background-focused", "annotation": "prop", "docs": "Background of the button when focused" }, { "name": "--background-hover", "annotation": "prop", "docs": "Background of the button when hovered" }, { "name": "--background-hover-clear", "annotation": "prop", "docs": "Background of the clear button when hovered" }, { "name": "--background-hover-outline", "annotation": "prop", "docs": "Background of the outline button when hovered" }, { "name": "--border-color", "annotation": "prop", "docs": "Border color of the button" }, { "name": "--border-focus-color", "annotation": "prop", "docs": "Border color when focused" }, { "name": "--border-radius", "annotation": "prop", "docs": "Border radius of the button" }, { "name": "--border-style", "annotation": "prop", "docs": "Border style of the button" }, { "name": "--border-width", "annotation": "prop", "docs": "Border width of the button" }, { "name": "--box-shadow", "annotation": "prop", "docs": "Box shadow of the button" }, { "name": "--button-height", "annotation": "prop", "docs": "Button Height" }, { "name": "--button-padding-bottom", "annotation": "prop", "docs": "Padding bottom of the button" }, { "name": "--button-padding-end", "annotation": "prop", "docs": "Padding end of the button" }, { "name": "--button-padding-start", "annotation": "prop", "docs": "Padding start of the button" }, { "name": "--button-padding-top", "annotation": "prop", "docs": "Padding top of the button" }, { "name": "--button-text-transformation", "annotation": "prop", "docs": "How to transform the text" }, { "name": "--color", "annotation": "prop", "docs": "Text color of the button" }, { "name": "--color-activated", "annotation": "prop", "docs": "Text color of the button when activated" }, { "name": "--color-focused", "annotation": "prop", "docs": "Text color of the button when focused" }, { "name": "--color-hover-outline", "annotation": "prop", "docs": "Text color of the outline button when hovered" }, { "name": "--opacity", "annotation": "prop", "docs": "Opacity of the button" }, { "name": "--transition", "annotation": "prop", "docs": "Transition of the button" } ], "slots": [], "dependents": [ "lu-combo-box-selection" ], "dependencies": [], "dependencyGraph": { "lu-combo-box-selection": [ "lu-button" ] } }, { "filePath": "./src/components/card/card.tsx", "encapsulation": "shadow", "tag": "lu-card", "readme": "# lu-card\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
\r\n \r\n \r\n \r\n Howdy\r\n \r\n \r\n

The card of the future

\r\n \r\n \r\n \r\n \r\n \r\n Back\r\n \r\n \r\n \r\n \r\n Forward\r\n \r\n \r\n \r\n \r\n \r\n
" }, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--background", "annotation": "prop", "docs": "Background of the card" }, { "name": "--color", "annotation": "prop", "docs": "Color of the card" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/card-buttons/card-buttons.tsx", "encapsulation": "shadow", "tag": "lu-card-buttons", "readme": "# lu-card-buttons\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/card-content/card-content.tsx", "encapsulation": "none", "tag": "lu-card-content", "readme": "# lu-card-content\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/card-footer/card-footer.tsx", "encapsulation": "shadow", "tag": "lu-card-footer", "readme": "# lu-card-footer\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "translucent", "type": "boolean", "mutable": false, "attr": "translucent", "reflectToAttr": false, "docs": "If `true`, the card footer will be translucent.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--min-height", "annotation": "prop", "docs": "Minimum height of the footer" }, { "name": "--padding-bottom", "annotation": "prop", "docs": "Bottom padding of the footer" }, { "name": "--padding-end", "annotation": "prop", "docs": "End padding of the footer" }, { "name": "--padding-start", "annotation": "prop", "docs": "Start padding of the footer" }, { "name": "--padding-top", "annotation": "prop", "docs": "Top padding of the footer" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/card-header/card-header.tsx", "encapsulation": "shadow", "tag": "lu-card-header", "readme": "# lu-card-header\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "translucent", "type": "boolean", "mutable": false, "attr": "translucent", "reflectToAttr": false, "docs": "If `true`, the card header will be translucent.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/card-image/card-image.tsx", "encapsulation": "shadow", "tag": "lu-card-image", "readme": "# lu-card-image\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "altText", "type": "string", "mutable": false, "attr": "alt-text", "reflectToAttr": false, "docs": "If image is not an icon this is used as the alternate text", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "iconColor", "type": "string", "mutable": false, "attr": "icon-color", "reflectToAttr": false, "docs": "If image is an icon this is used for the icon color", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "iconName", "type": "string", "mutable": false, "attr": "icon-name", "reflectToAttr": false, "docs": "If image is an icon and their is not a src prop provided this will be used to set the icon", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "iconSize", "type": "string", "mutable": false, "attr": "icon-size", "reflectToAttr": false, "docs": "if image is an icon then this will be used to set icon size. Please see lu-icon for details on the different sizes available", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "isIcon", "type": "boolean", "mutable": false, "attr": "is-icon", "reflectToAttr": false, "docs": "If set to true this component will attempt to display as an icon", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "src", "type": "string", "mutable": false, "attr": "src", "reflectToAttr": false, "docs": "src for image or icon", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [ "lu-icon" ], "dependencyGraph": { "lu-card-image": [ "lu-icon" ] } }, { "filePath": "./src/components/card-title/card-title.tsx", "encapsulation": "shadow", "tag": "lu-card-title", "readme": "# lu-card-title\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--color", "annotation": "prop", "docs": "Color of the card title" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/checkbox/checkbox.tsx", "encapsulation": "shadow", "tag": "lu-checkbox", "readme": "# lu-checkbox\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "
\r\n Content Click\r\n Disabled Click!\r\n \r\n Student\r\n Doctor\r\n Freelancer\r\n \r\n
" }, "props": [ { "name": "checked", "type": "boolean", "mutable": true, "attr": "checked", "reflectToAttr": false, "docs": "If `true`, the checkbox is selected.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from your application's color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.\r\nFor more information on colors, see [theming](/docs/theming/basics).", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "If `true`, the user cannot interact with the checkbox.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "isExternallyManaged", "type": "boolean", "mutable": false, "attr": "is-externally-managed", "reflectToAttr": false, "docs": "prevents default events and exposes new checked event", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "labeledById", "type": "string", "mutable": false, "attr": "labeled-by-id", "reflectToAttr": false, "docs": "passed dynamically from parent to give proper labeled by aria", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "The value of the toggle does not mean if it's checked or not, use the `checked`\r\nproperty for that.\r\n\r\nIt's good to note here this is not a real input checkbox. The value is just an associated value you want with the checkbox", "docsTags": [], "default": "\"on\"", "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luCheckboxBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the toggle loses focus.", "docsTags": [] }, { "event": "luCheckboxChange", "detail": "CheckboxValueType", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the checked property has changed.", "docsTags": [] }, { "event": "luCheckboxClicked", "detail": "CheckboxValueType", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the toggle has focus.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/checkbox-group/checkbox-group.tsx", "encapsulation": "none", "tag": "lu-checkbox-group", "readme": "# lu-checkbox-group\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "ariaLabeledByAddition", "type": "string", "mutable": false, "attr": "aria-labeled-by-addition", "reflectToAttr": false, "docs": "Added to the arial labelled on the native input", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "direction", "type": "\"across\" | \"down\"", "mutable": false, "attr": "direction", "reflectToAttr": false, "docs": "Direction of elements", "docsTags": [], "default": "'down'", "values": [ { "value": "across", "type": "string" }, { "value": "down", "type": "string" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Used to add is-invalid attribute signifying invalidity", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control, which is submitted with the form data.", "docsTags": [], "default": "this.inputId", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "Tells if a at least one checkbox is required to be checked", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "id set dynamically", "docsTags": [], "default": "this.inputId + '-wrapper'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "valid", "type": "boolean", "mutable": false, "attr": "valid", "reflectToAttr": false, "docs": "Used to add is-valid attribute signifying validity", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "CheckboxValueType[]", "mutable": true, "reflectToAttr": false, "docs": "Value of contained checkboxes", "docsTags": [], "values": [ { "type": "CheckboxValueType[]" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "this gives us a handle to set focus on the element", "docsTags": [] }, { "name": "updateValue", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValue(update: { name: string; checked: boolean; }[]) => Promise", "parameters": [], "docs": "this is used by the form validation/ form group to reset Value without initiating a validity check", "docsTags": [ { "name": "param", "text": "update" } ] } ], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "emitted when all radio group is \"blurred\"", "docsTags": [] }, { "event": "luChange", "detail": "LUFormCheckboxGroupValue", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the value has changed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/col/col.tsx", "encapsulation": "shadow", "tag": "lu-col", "readme": "# lu-col\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "offset", "type": "string", "mutable": false, "attr": "offset", "reflectToAttr": false, "docs": "The amount to offset the column, in terms of how many columns it should shift to the right\r\nof the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "offsetLg", "type": "string", "mutable": false, "attr": "offset-lg", "reflectToAttr": false, "docs": "The amount to offset the column for lg screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "offsetMd", "type": "string", "mutable": false, "attr": "offset-md", "reflectToAttr": false, "docs": "The amount to offset the column for md screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "offsetSm", "type": "string", "mutable": false, "attr": "offset-sm", "reflectToAttr": false, "docs": "The amount to offset the column for sm screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "offsetXl", "type": "string", "mutable": false, "attr": "offset-xl", "reflectToAttr": false, "docs": "The amount to offset the column for xl screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "offsetXs", "type": "string", "mutable": false, "attr": "offset-xs", "reflectToAttr": false, "docs": "The amount to offset the column for xs screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pull", "type": "string", "mutable": false, "attr": "pull", "reflectToAttr": false, "docs": "The amount to pull the column, in terms of how many columns it should shift to the left of\r\nthe total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pullLg", "type": "string", "mutable": false, "attr": "pull-lg", "reflectToAttr": false, "docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\r\nto the left of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pullMd", "type": "string", "mutable": false, "attr": "pull-md", "reflectToAttr": false, "docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\r\nto the left of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pullSm", "type": "string", "mutable": false, "attr": "pull-sm", "reflectToAttr": false, "docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\r\nto the left of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pullXl", "type": "string", "mutable": false, "attr": "pull-xl", "reflectToAttr": false, "docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\r\nto the left of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pullXs", "type": "string", "mutable": false, "attr": "pull-xs", "reflectToAttr": false, "docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\r\nto the left of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "push", "type": "string", "mutable": false, "attr": "push", "reflectToAttr": false, "docs": "The amount to push the column, in terms of how many columns it should shift to the right\r\nof the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pushLg", "type": "string", "mutable": false, "attr": "push-lg", "reflectToAttr": false, "docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pushMd", "type": "string", "mutable": false, "attr": "push-md", "reflectToAttr": false, "docs": "The amount to push the column for md screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pushSm", "type": "string", "mutable": false, "attr": "push-sm", "reflectToAttr": false, "docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pushXl", "type": "string", "mutable": false, "attr": "push-xl", "reflectToAttr": false, "docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "pushXs", "type": "string", "mutable": false, "attr": "push-xs", "reflectToAttr": false, "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\r\nto the right of the total available.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "size", "type": "string", "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "The size of the column, in terms of how many columns it should take up out of the total\r\navailable. If `\"auto\"` is passed, the column will be the size of its content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "sizeLg", "type": "string", "mutable": false, "attr": "size-lg", "reflectToAttr": false, "docs": "The size of the column for lg screens, in terms of how many columns it should take up out\r\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "sizeMd", "type": "string", "mutable": false, "attr": "size-md", "reflectToAttr": false, "docs": "The size of the column for md screens, in terms of how many columns it should take up out\r\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "sizeSm", "type": "string", "mutable": false, "attr": "size-sm", "reflectToAttr": false, "docs": "The size of the column for sm screens, in terms of how many columns it should take up out\r\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "sizeXl", "type": "string", "mutable": false, "attr": "size-xl", "reflectToAttr": false, "docs": "The size of the column for xl screens, in terms of how many columns it should take up out\r\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "sizeXs", "type": "string", "mutable": false, "attr": "size-xs", "reflectToAttr": false, "docs": "The size of the column for xs screens, in terms of how many columns it should take up out\r\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true } ], "styles": [ { "name": "--lu-grid-column-padding", "annotation": "prop", "docs": "Padding for the Column" }, { "name": "--lu-grid-column-padding-lg", "annotation": "prop", "docs": "Padding for the Column on lg screens and up" }, { "name": "--lu-grid-column-padding-md", "annotation": "prop", "docs": "Padding for the Column on md screens and up" }, { "name": "--lu-grid-column-padding-sm", "annotation": "prop", "docs": "Padding for the Column on sm screens and up" }, { "name": "--lu-grid-column-padding-xl", "annotation": "prop", "docs": "Padding for the Column on xl screens and up" }, { "name": "--lu-grid-column-padding-xs", "annotation": "prop", "docs": "Padding for the Column on xs screens and up" }, { "name": "--lu-grid-columns", "annotation": "prop", "docs": "The number of total Columns in the Grid" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/combo-box/combo-box.tsx", "encapsulation": "shadow", "tag": "lu-combo-box", "readme": "# lu-combo-box\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n " }, "props": [ { "name": "apiErrorCount", "type": "number", "mutable": false, "attr": "api-error-count", "reflectToAttr": false, "docs": "Gives a hook to reset data/loading state when we receive an error", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "ariaLabeledByAddition", "type": "string", "mutable": false, "attr": "aria-labeled-by-addition", "reflectToAttr": false, "docs": "Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autoSuggestEnabled", "type": "boolean", "mutable": false, "attr": "auto-suggest-enabled", "reflectToAttr": false, "docs": "Search functionality enabled", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from your application's color palette.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "If `true`, the user cannot interact with the textarea.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "forEmail", "type": "boolean", "mutable": false, "attr": "for-email", "reflectToAttr": false, "docs": "This specifies the combo box is for email.\r\nIt helps the display of the selected box by allowing it to only show the before @ symbol part.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Declares input as invalid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "multipleSelections", "type": "boolean", "mutable": false, "attr": "multiple-selections", "reflectToAttr": false, "docs": "Allows for multiple entries or selections - THIS COMPONENT ONLY SUPPORTS THIS RIGHT NOW. WE NEED A DESIGN FOR SINGLE SELECTION.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control, which is submitted with the form data.", "docsTags": [], "default": "this.comboBoxId", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "purpose", "type": "string", "mutable": false, "attr": "purpose", "reflectToAttr": false, "docs": "Declares the purpose of the comboBox - needed if you plan on using the lu-combo-box-connector. The connector should have the same purpose.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "Notes that element is required", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "searchResults", "type": "ComboBoxValueType[]", "mutable": true, "reflectToAttr": false, "docs": "Provided search results from requested input", "docsTags": [], "default": "[]", "values": [ { "type": "ComboBoxValueType[]" } ], "optional": false, "required": false }, { "name": "type", "type": "\"email\" | \"text\"", "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "type defines how to validate the values as well as sets the type on the contained input\r\ntext | email", "docsTags": [], "default": "'text'", "values": [ { "value": "email", "type": "string" }, { "value": "text", "type": "string" } ], "optional": false, "required": false }, { "name": "valid", "type": "boolean", "mutable": false, "attr": "valid", "reflectToAttr": false, "docs": "Declares input as validated", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "ComboBoxValueType[]", "mutable": true, "reflectToAttr": false, "docs": "Keeps track of selected options", "docsTags": [], "default": "[]", "values": [ { "type": "ComboBoxValueType[]" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "this gives us a handle to set focus on the element", "docsTags": [] }, { "name": "updateValue", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValue(update: ComboBoxValueType[]) => Promise", "parameters": [], "docs": "this is used by the form validation/ form group to reset Value without initiating a validity check", "docsTags": [ { "name": "param", "text": "update" } ] } ], "events": [ { "event": "luBlur", "detail": "ComboBoxValueType[]", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits when combo box is blured", "docsTags": [] }, { "event": "luChange", "detail": "LuChangeEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits when combo box is changed", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits when combo box has focus", "docsTags": [] }, { "event": "luNewSearchResultRequested", "detail": "ComboBoxSearchRequest", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emit request for new search results", "docsTags": [] } ], "listeners": [ { "event": "luUpdatedComboBoxSearchResults", "target": "window", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "dependents": [], "dependencies": [ "lu-combo-box-selection", "lu-input", "lu-skeleton-text" ], "dependencyGraph": { "lu-combo-box": [ "lu-combo-box-selection", "lu-input", "lu-skeleton-text" ], "lu-combo-box-selection": [ "lu-button", "lu-icon" ], "lu-input": [ "lu-icon" ] } }, { "filePath": "./src/components/combo-box-connector/combo-box-connector.tsx", "encapsulation": "shadow", "tag": "lu-combo-box-connector", "readme": "# lu-combo-box-connector\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n \r\n " }, "props": [ { "name": "purpose", "type": "string", "mutable": false, "attr": "purpose", "reflectToAttr": false, "docs": "This identifies the purpose of this connector", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "searchResults", "type": "ComboBoxSearchResults[]", "mutable": false, "reflectToAttr": false, "docs": "Provided search results", "docsTags": [], "default": "[]", "values": [ { "type": "ComboBoxSearchResults[]" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luNewComboBoxConnectorSearchRequest", "detail": "{ searchText: string; comboBoxId: string; }", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "luUpdatedComboBoxSearchResults", "detail": "ComboBoxSearchResults[]", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "luNewSearchResultRequested", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/combo-box-selection/combo-box-selection.tsx", "encapsulation": "shadow", "tag": "lu-combo-box-selection", "readme": "# lu-combo-box-selection\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
\r\n \r\n
\r\n " }, "props": [ { "name": "isEditing", "type": "boolean", "mutable": false, "attr": "is-editing", "reflectToAttr": false, "docs": "Sets the input as editable or displays the closable box", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selection", "type": "ComboBoxValueType", "mutable": false, "reflectToAttr": false, "docs": "Passed to bring significance to the component - name and value", "docsTags": [], "values": [ { "type": "ComboBoxValueType" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luComboBoxDeleteSelectionRequest", "detail": "string", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits request to remove selection", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [ "lu-combo-box" ], "dependencies": [ "lu-button", "lu-icon" ], "dependencyGraph": { "lu-combo-box-selection": [ "lu-button", "lu-icon" ], "lu-combo-box": [ "lu-combo-box-selection" ] } }, { "filePath": "./src/components/dropdown-listbox/dropdown-listbox.tsx", "encapsulation": "shadow", "tag": "lu-dropdown-listbox", "readme": "# canvas-dropdown-listbox\r\n\r\nThis component was built from the [W3 Collapsible Dropdown Listbox Example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html). Each child `
  • ` must have `role=\"option\"`.\r\n\r", "docs": "This component was built from the [W3 Collapsible Dropdown Listbox Example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html). Each child `
  • ` must have `role=\"option\"`.", "docsTags": [], "usage": {}, "props": [ { "name": "isExpanded", "type": "boolean", "mutable": true, "attr": "is-expanded", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "\"Select an Option\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "labelRef", "type": "string", "mutable": false, "attr": "label-ref", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "\"\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "this.parseValueFromOption(\r\n this.activeDescendant\r\n )", "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "dropdownClosed", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "dropdownListboxValueChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "slotHasChanged", "detail": "any", "bubbles": false, "cancelable": false, "composed": false, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "slotHasChanged", "capture": true, "passive": true }, { "event": "click", "target": "window", "capture": true, "passive": true } ], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/fab/fab.tsx", "encapsulation": "shadow", "tag": "lu-fab", "readme": "# lu-fab\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n\r\n \r\n \r\n \r\n" }, "props": [ { "name": "activated", "type": "boolean", "mutable": true, "attr": "activated", "reflectToAttr": false, "docs": "If `true`, both the `lu-fab-button` and all `lu-fab-list` inside `lu-fab` will become active.\r\nThat means `lu-fab-button` will become a `close` icon and `lu-fab-list` will become visible.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "edge", "type": "boolean", "mutable": false, "attr": "edge", "reflectToAttr": false, "docs": "If `true`, the fab will display on the edge of the header if\r\n`vertical` is `\"top\"`, and on the edge of the footer if\r\nit is `\"bottom\"`. Should be used with a `fixed` slot.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "horizontal", "type": "\"center\" | \"end\" | \"start\"", "mutable": false, "attr": "horizontal", "reflectToAttr": false, "docs": "Where to align the fab horizontally in the viewport.", "docsTags": [], "values": [ { "value": "center", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "vertical", "type": "\"bottom\" | \"center\" | \"top\"", "mutable": false, "attr": "vertical", "reflectToAttr": false, "docs": "Where to align the fab vertically in the viewport.", "docsTags": [], "values": [ { "value": "bottom", "type": "string" }, { "value": "center", "type": "string" }, { "value": "top", "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "" }, "signature": "close() => Promise", "parameters": [], "docs": "Close an active FAB list container", "docsTags": [] } ], "events": [], "listeners": [ { "event": "click", "capture": false, "passive": false } ], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/fab-button/fab-button.tsx", "encapsulation": "shadow", "tag": "lu-fab-button", "readme": "# lu-fab-button\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\nPrimary" }, "props": [ { "name": "activated", "type": "boolean", "mutable": false, "attr": "activated", "reflectToAttr": false, "docs": "If `true`, the fab button will show a close icon.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "If `true`, the user cannot interact with the fab button.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "href", "type": "string", "mutable": false, "attr": "href", "reflectToAttr": false, "docs": "Contains a URL or a URL fragment that the hyperlink points to.\r\nIf this property is set, an anchor tag will be rendered.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "isExternallyManaged", "type": "boolean", "mutable": false, "attr": "is-externally-managed", "reflectToAttr": false, "docs": "doesn't toggle on click", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": true, "attr": "selected", "reflectToAttr": false, "docs": "If `true`, the fab button will show selected state.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "show", "type": "boolean", "mutable": true, "attr": "show", "reflectToAttr": false, "docs": "If `true`, the fab button will show when in a fab-list.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "size", "type": "\"small\"", "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "The size of the button. Set this to `small` in order to have a mini fab.", "docsTags": [], "values": [ { "value": "small", "type": "string" } ], "optional": true, "required": false }, { "name": "toggleButton", "type": "boolean", "mutable": false, "attr": "toggle-button", "reflectToAttr": false, "docs": "If true it will function as the main toggle button for the component.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "translucent", "type": "boolean", "mutable": false, "attr": "translucent", "reflectToAttr": false, "docs": "If `true`, the fab button will be translucent.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "type", "type": "\"button\" | \"reset\" | \"submit\"", "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "The type of the button.", "docsTags": [], "default": "'button'", "values": [ { "value": "button", "type": "string" }, { "value": "reset", "type": "string" }, { "value": "submit", "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "Allows you to attach a value to the element", "docsTags": [], "values": [ { "type": "any" } ], "optional": true, "required": false } ], "methods": [], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the button loses focus.", "docsTags": [] }, { "event": "luClicked", "detail": "{ selectedStatus: boolean; value?: any; }", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the button is clicked.", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the button has focus.", "docsTags": [] } ], "listeners": [], "styles": [ { "name": "--background", "annotation": "prop", "docs": "Background of the button" }, { "name": "--background-activated", "annotation": "prop", "docs": "Background of the button when activated" }, { "name": "--background-focused", "annotation": "prop", "docs": "Background of the button when focused" }, { "name": "--border-color", "annotation": "prop", "docs": "Border color of the button" }, { "name": "--border-radius", "annotation": "prop", "docs": "Border radius of the button" }, { "name": "--border-style", "annotation": "prop", "docs": "Border style of the button" }, { "name": "--border-width", "annotation": "prop", "docs": "Border width of the button" }, { "name": "--box-shadow", "annotation": "prop", "docs": "Box shadow of the button" }, { "name": "--box-shadow-focused", "annotation": "prop", "docs": "Box shadow of the button when focused" }, { "name": "--box-shadow-selected", "annotation": "prop", "docs": "Box shadow of the button when activated" }, { "name": "--color", "annotation": "prop", "docs": "Text color of the button" }, { "name": "--color-activated", "annotation": "prop", "docs": "Text color of the button when activated" }, { "name": "--color-focused", "annotation": "prop", "docs": "Text color of the button when focused" }, { "name": "--padding-bottom", "annotation": "prop", "docs": "Padding bottom of the button" }, { "name": "--padding-end", "annotation": "prop", "docs": "Padding end of the button" }, { "name": "--padding-start", "annotation": "prop", "docs": "Padding start of the button" }, { "name": "--padding-top", "annotation": "prop", "docs": "Padding top of the button" }, { "name": "--ripple-color", "annotation": "prop", "docs": "Color of the button ripple effect" }, { "name": "--transition", "annotation": "prop", "docs": "Transition of the button" } ], "slots": [], "dependents": [], "dependencies": [ "lu-icon" ], "dependencyGraph": { "lu-fab-button": [ "lu-icon" ] } }, { "filePath": "./src/components/fab-list/fab-list.tsx", "encapsulation": "shadow", "tag": "lu-fab-list", "readme": "# lu-fab-list\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n \r\n\r\n \r\n Facebook\r\n Twitter\r\n Youtube\r\n \r\n\r\n \r\n Vimeo\r\n \r\n\r\n" }, "props": [ { "name": "activated", "type": "boolean", "mutable": false, "attr": "activated", "reflectToAttr": false, "docs": "If `true`, the fab list will be show all fab buttons in the list.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "side", "type": "\"bottom\" | \"end\" | \"start\" | \"top\"", "mutable": false, "attr": "side", "reflectToAttr": false, "docs": "The side the fab list will show on relative to the main fab button.", "docsTags": [], "default": "'bottom'", "values": [ { "value": "bottom", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" }, { "value": "top", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/form-group/form-group.tsx", "encapsulation": "shadow", "tag": "lu-form-group", "readme": "# lu-form-group\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n

    Required

    \r\n\r\n \r\n\r\n

    Pattern

    \r\n\r\n \r\n\r\n

    Pattern

    \r\n\r\n \r\n\r\n" }, "props": [ { "name": "clearErrorStateOnClearInput", "type": "boolean", "mutable": false, "attr": "clear-error-state-on-clear-input", "reflectToAttr": false, "docs": "Clears error and error message when clear input is clicked", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "clearInput", "type": "boolean", "mutable": false, "attr": "clear-input", "reflectToAttr": false, "docs": "Only used for advanced components where the input, select, etc is not slotted. If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "clearOnEdit", "type": "boolean", "mutable": true, "attr": "clear-on-edit", "reflectToAttr": false, "docs": "Only used for advanced components where the input, select, etc is not slotted. If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "cssClass", "type": "string | string[]", "mutable": false, "attr": "css-class", "reflectToAttr": false, "docs": "Additional classes to apply for custom CSS. If multiple classes are\r\nprovided they should be separated by spaces.", "docsTags": [], "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false }, { "name": "errorMessage", "type": "string", "mutable": true, "attr": "error-message", "reflectToAttr": false, "docs": "Externally set error message", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "externallyDeemedInvalid", "type": "boolean", "mutable": true, "attr": "externally-deemed-invalid", "reflectToAttr": false, "docs": "if external validation is being used this property is used to override isValid state", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "externallyDeemedValid", "type": "boolean", "mutable": true, "attr": "externally-deemed-valid", "reflectToAttr": false, "docs": "if external validation is being used this property is used to override isValid state", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "forId", "type": "string", "mutable": true, "attr": "for-id", "reflectToAttr": false, "docs": "This sets the htmlFor property for the internal lu-label component", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "helperText", "type": "string", "mutable": false, "attr": "helper-text", "reflectToAttr": false, "docs": "sets helper text of lu-form-group", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "isExternallyValidated", "type": "boolean", "mutable": false, "attr": "is-externally-validated", "reflectToAttr": false, "docs": "tells component to stop its own validation and validate externally", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "isValidatedOnSubmission", "type": "boolean", "mutable": false, "attr": "is-validated-on-submission", "reflectToAttr": false, "docs": "tells if validation is made on submission", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "labelText", "type": "string", "mutable": false, "attr": "label-text", "reflectToAttr": false, "docs": "sets the text of the label", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "updateTrigger", "type": "\"blur\" | \"change\"", "mutable": false, "attr": "update-trigger", "reflectToAttr": false, "docs": "sets the update trigger - options", "docsTags": [], "default": "'blur'", "values": [ { "value": "blur", "type": "string" }, { "value": "change", "type": "string" } ], "optional": false, "required": false }, { "name": "useAsteriskAsRequiredIndicator", "type": "boolean", "mutable": false, "attr": "use-asterisk-as-required-indicator", "reflectToAttr": false, "docs": "Provides option to use asterisk as required indicator", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "every element can have an id... but this one is set by the element it holds. When there are multiple selects or\r\ninputs each is named by itself so that it can have a corresponding for attribute on the label", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "getValidationValues", "returns": { "type": "Promise", "docs": "" }, "signature": "getValidationValues() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "updateValue", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValue(newValue: any) => Promise", "parameters": [], "docs": "update value while reseting error state", "docsTags": [] }, { "name": "validate", "returns": { "type": "Promise", "docs": "" }, "signature": "validate() => Promise", "parameters": [], "docs": "starting validation method.", "docsTags": [] } ], "events": [ { "event": "luFormGroupDidUpdate", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Component did validate", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [ "lu-label" ], "dependencyGraph": { "lu-form-group": [ "lu-label" ] } }, { "filePath": "./src/components/form-validation/form-validation.tsx", "encapsulation": "none", "tag": "lu-form-validation", "readme": "# lu-form-validation\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Male\r\n Female\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Ninja\r\n Checkers\r\n Horse\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n" }, "props": [ { "name": "isInvalid", "type": "boolean", "mutable": true, "attr": "is-invalid", "reflectToAttr": true, "docs": "Shows form is invalid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "isValid", "type": "boolean", "mutable": true, "attr": "is-valid", "reflectToAttr": true, "docs": "Shows form is valid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "primaryCompoundId", "type": "string", "mutable": false, "attr": "primary-compound-id", "reflectToAttr": false, "docs": "", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": false, "attr": "use-id", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "this.formValidationId", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "LUFormGroupValidationState[]", "mutable": true, "reflectToAttr": false, "docs": "values of form", "docsTags": [], "default": "[]", "values": [ { "type": "LUFormGroupValidationState[]" } ], "optional": false, "required": false }, { "name": "wrappingValidation", "type": "WrappingFormValidationType[]", "mutable": false, "reflectToAttr": false, "docs": "You can pass an error message with a custom wrapping validation function that receives a validation state array", "docsTags": [], "default": "[]", "values": [ { "type": "WrappingFormValidationType[]" } ], "optional": false, "required": false } ], "methods": [ { "name": "forceValidation", "returns": { "type": "Promise", "docs": "" }, "signature": "forceValidation() => Promise", "parameters": [], "docs": "forces validation on all components and return the validation object", "docsTags": [] }, { "name": "updateValues", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValues(updates: UpdateDataRequestType[]) => Promise", "parameters": [], "docs": "This provides a way to update values of the form while preventing immediate re-validation\r\nDon't forget that you need the name and value for checkbox [{name: string, checked: boolean}]\r\nFor selects pass the name for the option", "docsTags": [ { "name": "param", "text": "updates" } ] } ], "events": [ { "event": "luFormValidationDidLoad", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "luFormValidationDidUnload", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [ { "name": "Deprecated" } ] }, { "event": "luFormValidationValueChange", "detail": "FormValidationValueType", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/gdpr-consent/gdpr-consent.tsx", "encapsulation": "shadow", "tag": "lu-gdpr-consent", "readme": "# lu-gdpr-consent\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n \r\n " }, "props": [], "methods": [ { "name": "grantConsentCookie", "returns": { "type": "Promise", "docs": "" }, "signature": "grantConsentCookie() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "resetConsentCookie", "returns": { "type": "Promise", "docs": "" }, "signature": "resetConsentCookie() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "revokeConsentCookie", "returns": { "type": "Promise", "docs": "" }, "signature": "revokeConsentCookie() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "gdpr-consent", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "gdpr-consent-revoke", "target": "document", "capture": false, "passive": false }, { "event": "gdpr-consent-reset", "target": "document", "capture": false, "passive": false } ], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/grid/grid.tsx", "encapsulation": "shadow", "tag": "lu-grid", "readme": "# lu-grid\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n \r\n \r\n
    \r\n \r\n \r\n \r\n \r\n
    \r\n     \r\n \r\n
    \r\n \r\n \r\n \r\n \r\n
    \r\n     \r\n \r\n
    \r\n \r\n \r\n \r\n \r\n
    \r\n     \r\n     \r\n    \r\n" }, "props": [ { "name": "fixed", "type": "boolean", "mutable": false, "attr": "fixed", "reflectToAttr": false, "docs": "If `true`, the grid will have a fixed width based on the screen size.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--lu-grid-padding", "annotation": "prop", "docs": "Padding for the Grid" }, { "name": "--lu-grid-padding-lg", "annotation": "prop", "docs": "Padding for the Grid on lg screens" }, { "name": "--lu-grid-padding-md", "annotation": "prop", "docs": "Padding for the Grid on md screens" }, { "name": "--lu-grid-padding-sm", "annotation": "prop", "docs": "Padding for the Grid on sm screens" }, { "name": "--lu-grid-padding-xl", "annotation": "prop", "docs": "Padding for the Grid on xl screens" }, { "name": "--lu-grid-padding-xs", "annotation": "prop", "docs": "Padding for the Grid on xs screens" }, { "name": "--lu-grid-width", "annotation": "prop", "docs": "Width of the fixed Grid" }, { "name": "--lu-grid-width-lg", "annotation": "prop", "docs": "Width of the fixed Grid on lg screens" }, { "name": "--lu-grid-width-md", "annotation": "prop", "docs": "Width of the fixed Grid on md screens" }, { "name": "--lu-grid-width-sm", "annotation": "prop", "docs": "Width of the fixed Grid on sm screens" }, { "name": "--lu-grid-width-xl", "annotation": "prop", "docs": "Width of the fixed Grid on xl screens" }, { "name": "--lu-grid-width-xs", "annotation": "prop", "docs": "Width of the fixed Grid on xs screens" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/header/header.tsx", "encapsulation": "shadow", "tag": "lu-header", "readme": "# lu-header\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n \r\n
    \r\n
    \r\n \r\n
    \r\n
    \r\n
    \r\n \r\n
    \r\n
    \r\n
    \r\n Help is Coming\r\n
    \r\n     \r\n
    \r\n
    \r\n \r\n
    \r\n Go Back\r\n
    \r\n
    \r\n

    Fall 2017

    \r\n
    \r\n
    \r\n Help is Coming\r\n
    \r\n     \r\n
    \r\n" }, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "preHeader", "type": "boolean", "mutable": false, "attr": "pre-header", "reflectToAttr": false, "docs": "If true shows the preheader", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--header-height", "annotation": "prop", "docs": "Height of the header" }, { "name": "--header-light-background-color", "annotation": "prop", "docs": "Background color for the light header" }, { "name": "--header-light-text-color", "annotation": "prop", "docs": "Text color of the light header" }, { "name": "--header-tall-background-color", "annotation": "prop", "docs": "The header tall background color" }, { "name": "--header-tall-height", "annotation": "prop", "docs": "Height of the tall header" }, { "name": "--header-z-index", "annotation": "prop", "docs": "z-index of header. default is 8" }, { "name": "--pre-header-background-color", "annotation": "prop", "docs": "Background color of the pre-header" }, { "name": "--pre-header-color", "annotation": "prop", "docs": "color of the pre-header text" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/icon/icon.tsx", "encapsulation": "shadow", "tag": "lu-icon", "readme": "# lu-icon\r\n\r\nIcon system had a dev and production url - set a the setupConfig function exported from the package to set the iconEnv property of the config to production for the production URL.\r\n\r", "docs": "Icon system had a dev and production url - set a the setupConfig function exported from the package to set the iconEnv property of the config to production for the production URL.", "docsTags": [], "usage": { "general": "
    " }, "props": [ { "name": "ariaLabel", "type": "string", "mutable": true, "attr": "aria-label", "reflectToAttr": true, "docs": "Specifies the label to use for accessibility. Defaults to the icon name.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "buttonRole", "type": "boolean", "mutable": false, "attr": "button-role", "reflectToAttr": false, "docs": "", "docsTags": [ { "text": "Allows button role for the icon. Input is the only thing using this... until there is time to refactor lu-input please don't include anywhere else", "name": "Deprecated" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use for the background of the item.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "flipRtl", "type": "boolean", "mutable": false, "attr": "flip-rtl", "reflectToAttr": false, "docs": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "hexColor", "type": "string", "mutable": false, "attr": "hex-color", "reflectToAttr": false, "docs": "The hex color of the icon.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "icon", "type": "string", "mutable": false, "attr": "icon", "reflectToAttr": false, "docs": "A combination of both `name` and `src`. If a `src` url is detected\r\nit will set the `src` property. Otherwise it assumes it's a built-in named\r\nSVG and set the `name` property.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "ios", "type": "string", "mutable": false, "attr": "ios", "reflectToAttr": false, "docs": "Specifies which icon to use on `ios` mode.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "md", "type": "string", "mutable": false, "attr": "md", "reflectToAttr": false, "docs": "Specifies which icon to use on `md` mode.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "mode", "type": "\"ios\" | \"md\"", "mutable": false, "attr": "mode", "reflectToAttr": false, "docs": "The mode determines which platform styles to use.\r\nPossible values are: `\"ios\"` or `\"md\"`.", "docsTags": [], "values": [ { "value": "ios", "type": "string" }, { "value": "md", "type": "string" } ], "optional": true, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "Specifies which icon to use from the built-in set of icons.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "size", "type": "string", "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "The size of the icon.\r\nAvailable options are: `\"small\"` and `\"large\"`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "src", "type": "string", "mutable": false, "attr": "src", "reflectToAttr": false, "docs": "Specifies the exact `src` of an SVG file to use.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [ "lu-card-image", "lu-combo-box-selection", "lu-fab-button", "lu-icon-finder", "lu-input", "lu-side-menu", "lu-toggle" ], "dependencies": [], "dependencyGraph": { "lu-card-image": [ "lu-icon" ], "lu-combo-box-selection": [ "lu-icon" ], "lu-fab-button": [ "lu-icon" ], "lu-icon-finder": [ "lu-icon" ], "lu-input": [ "lu-icon" ], "lu-side-menu": [ "lu-icon" ], "lu-toggle": [ "lu-icon" ] } }, { "filePath": "./src/components/icon-finder/icon-finder.tsx", "encapsulation": "shadow", "tag": "lu-icon-finder", "readme": "# lu-icon-finder\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n \r\n " }, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [ "lu-icon" ], "dependencyGraph": { "lu-icon-finder": [ "lu-icon" ] } }, { "filePath": "./src/components/img/img.tsx", "encapsulation": "shadow", "tag": "lu-img", "readme": "# lu-img\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n
    \r\n \r\n
    " }, "props": [ { "name": "alt", "type": "string", "mutable": false, "attr": "alt", "reflectToAttr": false, "docs": "This attribute defines the alternative text describing the image.\r\nUsers will see this text displayed if the image URL is wrong,\r\nthe image is not in one of the supported formats, or if the image is not yet downloaded.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "src", "type": "string", "mutable": false, "attr": "src", "reflectToAttr": false, "docs": "The image URL. This attribute is mandatory for the element.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [ { "event": "luImgDidLoad", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the img src is loaded", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/input/input.tsx", "encapsulation": "shadow", "tag": "lu-input", "readme": "# lu-input\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n \r\n
    \r\n\r\n\r\n
    \r\n \r\n
    \r\n\r\n\r\n
    \r\n \r\n
    \r\n\r\n\r\n
    \r\n \r\n
    " }, "props": [ { "name": "accept", "type": "string", "mutable": false, "attr": "accept", "reflectToAttr": false, "docs": "If the value of the type attribute is file, this attribute indicates the types of files that the server accepts.\r\notherwise it's ignored. The value must be comma-separated unique “content type specifiers”:\r\nA case-insensitive file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).\r\nA valid MIME type with no extensions.\r\naudio/* representing sound files.\r\nvideo/* representing video files.\r\nimage/* representing image files.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "ariaActiveDescendant", "type": "string", "mutable": false, "attr": "aria-active-descendant", "reflectToAttr": false, "docs": "used for combo box accessibility - defines the active option", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "ariaAutoComplete", "type": "\"both\" | \"list\"", "mutable": false, "attr": "aria-auto-complete", "reflectToAttr": false, "docs": "used for autocomplete accessibility", "docsTags": [], "values": [ { "value": "both", "type": "string" }, { "value": "list", "type": "string" } ], "optional": false, "required": false }, { "name": "ariaControls", "type": "string", "mutable": false, "attr": "aria-controls", "reflectToAttr": false, "docs": "used for combo box accessibility - defines the listbox if there is one", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "ariaLabeledByAddition", "type": "string", "mutable": false, "attr": "aria-labeled-by-addition", "reflectToAttr": false, "docs": "Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autocapitalize", "type": "string", "mutable": false, "attr": "autocapitalize", "reflectToAttr": false, "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `\"none\"`.", "docsTags": [], "default": "'none'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autocomplete", "type": "string", "mutable": false, "attr": "autocomplete", "reflectToAttr": false, "docs": "This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered.\r\nThere are a lot of options... refer to docs. Defaults to \"off\"", "docsTags": [], "default": "'off'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autocorrect", "type": "string", "mutable": false, "attr": "autocorrect", "reflectToAttr": false, "docs": "Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `\"off\"`.", "docsTags": [], "default": "'off'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autofocus", "type": "boolean", "mutable": false, "attr": "autofocus", "reflectToAttr": false, "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "capture", "type": "string", "mutable": false, "attr": "capture", "reflectToAttr": false, "docs": "If the value of the type attribute is file, this Boolean attribute indicates that capture of media directly from the device's sensors using a media capture mechanism is preferred, such as a webcam or microphone.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "checked", "type": "boolean", "mutable": false, "attr": "checked", "reflectToAttr": false, "docs": "If the value of the type attribute is radio or checkbox, this Boolean attribute pre-checks the control before the user interacts with it.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "clearInput", "type": "boolean", "mutable": false, "attr": "clear-input", "reflectToAttr": false, "docs": "If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "clearOnEdit", "type": "boolean", "mutable": true, "attr": "clear-on-edit", "reflectToAttr": false, "docs": "If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "debounce", "type": "number", "mutable": false, "attr": "debounce", "reflectToAttr": false, "docs": "Set the amount of time, in milliseconds, to wait to trigger the `luChange` event after each keystroke. Default `0`.", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "This Boolean attribute prevents the user from interacting with the input. In particular, the click event is not dispatched on disabled controls, and disabled controls aren't submitted with their form.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "form", "type": "string", "mutable": false, "attr": "form", "reflectToAttr": false, "docs": "The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a
    element in the same document. If this attribute isn't used, the element is associated with its nearest ancestor element, if any. This attribute lets you to place elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "inputmode", "type": "string", "mutable": false, "attr": "inputmode", "reflectToAttr": false, "docs": "A hint to browsers for which virtual keyboard to display. This attribute applies when the the type attribute is text, password, email, or url. Possible values:\r\nnone: No virtual keyboard should be displayed.\r\ntext: Text input in the user's locale.\r\ndecimal: Fractional numeric input.\r\nnumeric: Numeric input.\r\ntel: Telephone input, including asterisk and pound key. Prefer .\r\nsearch: A virtual keyboard optimized for search input.\r\nemail: Email input. Prefer .\r\nurl: URL input. Prefer .", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Declares input as invalid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "list", "type": "string", "mutable": false, "attr": "list", "reflectToAttr": false, "docs": "Points to a of predefined options to suggest to the user. The value must be the id of a element in the same document. Browsers display only valid options for the input. This attribute is ignored when the type attribute is hidden, checkbox, radio, file, or a button type.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "max", "type": "number | string", "mutable": false, "attr": "max", "reflectToAttr": false, "docs": "The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value.", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": false, "required": false }, { "name": "maxLength", "type": "number", "mutable": false, "attr": "max-length", "reflectToAttr": false, "docs": "If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "min", "type": "number | string", "mutable": false, "attr": "min", "reflectToAttr": false, "docs": "The minimum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value.", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": false, "required": false }, { "name": "minLength", "type": "number", "mutable": false, "attr": "min-length", "reflectToAttr": false, "docs": "If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "multiple", "type": "boolean", "mutable": false, "attr": "multiple", "reflectToAttr": false, "docs": "This Boolean attribute indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control, which is submitted with the form data.", "docsTags": [], "default": "this.inputId", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "noBorder", "type": "boolean", "mutable": false, "attr": "no-border", "reflectToAttr": false, "docs": "removes the border", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "pattern", "type": "string", "mutable": false, "attr": "pattern", "reflectToAttr": false, "docs": "A regular expression that the control's value is checked against. The pattern must match the entire value. Use the title attribute to describe the pattern to help the user. This attribute only applies when the value of the type attribute is text, search, tel, url, email, or password. The regular expression language is the same as the JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "placeholder", "type": "string", "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "A hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text must not contain carriage returns or line-feeds.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "prefixIcon", "type": "string", "mutable": false, "attr": "prefix-icon", "reflectToAttr": false, "docs": "Prefix Icon. Select from Lu Icons list", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "prefixIconClickable", "type": "boolean", "mutable": false, "attr": "prefix-icon-clickable", "reflectToAttr": false, "docs": "Adds hover state that reflects a clickable prefix icon if true. Doesn't do anything if there is not an icon string passed", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "readOnly", "type": "boolean", "mutable": false, "attr": "read-only", "reflectToAttr": false, "docs": "This Boolean attribute prevents the user from modifying the value of the input. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "size", "type": "number", "mutable": false, "attr": "size", "reflectToAttr": false, "docs": "The initial size of the control. Starting in HTML5, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. The size must be an integer greater than zero. The default value is 20.", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "spellcheck", "type": "boolean", "mutable": false, "attr": "spellcheck", "reflectToAttr": false, "docs": "Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "step", "type": "number | string", "mutable": false, "attr": "step", "reflectToAttr": false, "docs": "Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.", "docsTags": [], "values": [ { "type": "number" }, { "type": "string" } ], "optional": false, "required": false }, { "name": "suffixIcon", "type": "string", "mutable": true, "attr": "suffix-icon", "reflectToAttr": false, "docs": "Suffix Icon. Select from Lu Icons List. Does not show up if clearInput is set to true.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "suffixIconClickable", "type": "boolean", "mutable": true, "attr": "suffix-icon-clickable", "reflectToAttr": false, "docs": "Adds hover state that reflects a clickable prefix icon if true. Doesn't do anything if there is not an icon string passed", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "tabIndexWanted", "type": "number", "mutable": false, "attr": "tab-index-wanted", "reflectToAttr": false, "docs": "The position of the element in the tabbing navigation order for the current document.", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "type", "type": "\"email\" | \"password\" | \"text\"", "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "This specifies what type of input it is.\r\nbutton | checkbox | color | date | datetime-local | email | file | hidden | image | month | number | password\r\nradio | range | reset | search | submit | tel | text | time | url | week", "docsTags": [], "default": "'text'", "values": [ { "value": "email", "type": "string" }, { "value": "password", "type": "string" }, { "value": "text", "type": "string" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "id set dynamically", "docsTags": [], "default": "this.inputId + '-wrapper'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "valid", "type": "boolean", "mutable": false, "attr": "valid", "reflectToAttr": false, "docs": "Declares input as validated", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "string", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "The value of the input.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "this gives us a handle to set focus on the element", "docsTags": [] }, { "name": "updateValue", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValue(update: any) => Promise", "parameters": [], "docs": "this is used by the form validation/ form group to reset Value without initiating a validity check", "docsTags": [ { "name": "param", "text": "update" } ] } ], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the input loses focus.", "docsTags": [] }, { "event": "luChange", "detail": "TextInputChangeEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the value has changed.", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the input has focus.", "docsTags": [] }, { "event": "luInput", "detail": "KeyboardEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when a keyboard input ocurred.", "docsTags": [] }, { "event": "luInputDidLoad", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the input has been created.", "docsTags": [] }, { "event": "luInputDidUnload", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the input has been removed.", "docsTags": [] }, { "event": "luPrefixClickedOrTapped", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Prefix icon clicked or tapped", "docsTags": [] }, { "event": "luStyle", "detail": "StyleEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the styles change.", "docsTags": [] }, { "event": "luSuffixClickedOrTapped", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Suffix icon clicked or tapped", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [ "lu-combo-box" ], "dependencies": [ "lu-icon" ], "dependencyGraph": { "lu-input": [ "lu-icon" ], "lu-combo-box": [ "lu-input" ] } }, { "filePath": "./src/components/label/label.tsx", "encapsulation": "shadow", "tag": "lu-label", "readme": "# lu-label\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n \r\n \r\n \r\n
    \r\n\r\n\r\n
    \r\n \r\n \r\n \r\n \r\n
    \r\n\r\n\r\n
    \r\n \r\n \r\n \r\n
    " }, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "errorMessage", "type": "string", "mutable": false, "attr": "error-message", "reflectToAttr": false, "docs": "Specifies error message if the property in invalid", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "forId", "type": "string", "mutable": false, "attr": "for-id", "reflectToAttr": true, "docs": "used as the for property on the label... connecting the label with the input", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "helperText", "type": "string", "mutable": false, "attr": "helper-text", "reflectToAttr": false, "docs": "Specifies the helper text to display in the upper right corner (over-rides the required and optional text)", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Tells us that the input is invalid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "labelText", "type": "string", "mutable": false, "attr": "label-text", "reflectToAttr": false, "docs": "Label text", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "optional", "type": "boolean", "mutable": false, "attr": "optional", "reflectToAttr": false, "docs": "Specifies that the input is optional in the right top corner", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "Specifies if input is required or not in the right corner", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useAsteriskAsRequiredIndicator", "type": "boolean", "mutable": false, "attr": "use-asterisk-as-required-indicator", "reflectToAttr": false, "docs": "Provides option to use asterisk as required indicator", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "ID of component. Dynamically set.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [ "lu-form-group" ], "dependencies": [], "dependencyGraph": { "lu-form-group": [ "lu-label" ] } }, { "filePath": "./src/components/listbox-option/listbox-option.tsx", "encapsulation": "shadow", "tag": "lu-listbox-option", "readme": "# canvas-card\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "role", "type": "string", "mutable": false, "attr": "role", "reflectToAttr": true, "docs": "", "docsTags": [], "default": "\"option\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/modal/modal.tsx", "encapsulation": "scoped", "tag": "lu-modal", "readme": "# lu-modal\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n \r\n
    Good bue
    \r\n \r\n" }, "props": [ { "name": "activator", "type": "HTMLElement", "mutable": false, "reflectToAttr": false, "docs": "Reference to the element which activated the modal", "docsTags": [], "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false }, { "name": "animated", "type": "boolean", "mutable": false, "attr": "animated", "reflectToAttr": false, "docs": "If `true`, the modal will animate.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "backdropDismiss", "type": "boolean", "mutable": false, "attr": "backdrop-dismiss", "reflectToAttr": false, "docs": "If `true`, the modal will be dismissed when the backdrop is clicked.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "component", "type": "Function | HTMLElement | string", "mutable": false, "attr": "component", "reflectToAttr": false, "docs": "The component to display inside of the modal.", "docsTags": [], "values": [ { "type": "Function" }, { "type": "HTMLElement" }, { "type": "string" } ], "optional": false, "required": true }, { "name": "componentProps", "type": "{ [key: string]: any; }", "mutable": false, "reflectToAttr": false, "docs": "The data to pass to the modal component.", "docsTags": [], "values": [ { "type": "{ [key: string]: any; }" } ], "optional": true, "required": false }, { "name": "cssClass", "type": "string | string[]", "mutable": false, "attr": "css-class", "reflectToAttr": false, "docs": "Additional classes to apply for custom CSS. If multiple classes are\r\nprovided they should be separated by spaces.", "docsTags": [], "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": true, "required": false }, { "name": "delegate", "type": "FrameworkDelegate", "mutable": false, "reflectToAttr": false, "docs": "leaving this in so we can use it if we need to integrate with angular controllers", "docsTags": [], "values": [ { "type": "FrameworkDelegate" } ], "optional": true, "required": false }, { "name": "enterAnimation", "type": "(Animation: Animation, baseEl: any, opts?: any) => Promise", "mutable": false, "reflectToAttr": false, "docs": "Animation to use when the modal is presented.", "docsTags": [], "values": [ { "type": "(Animation: Animation, baseEl: any, opts?: any) => Promise" } ], "optional": true, "required": false }, { "name": "firstFocusableElement", "type": "HTMLElement", "mutable": false, "reflectToAttr": false, "docs": "If this is set, focus this element first.", "docsTags": [], "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false }, { "name": "keyboardClose", "type": "boolean", "mutable": false, "attr": "keyboard-close", "reflectToAttr": false, "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "leaveAnimation", "type": "(Animation: Animation, baseEl: any, opts?: any) => Promise", "mutable": false, "reflectToAttr": false, "docs": "Animation to use when the modal is dismissed.", "docsTags": [], "values": [ { "type": "(Animation: Animation, baseEl: any, opts?: any) => Promise" } ], "optional": true, "required": false }, { "name": "modalLabel", "type": "string", "mutable": false, "attr": "modal-label", "reflectToAttr": false, "docs": "If set, gives a label to identify the modal for accessibility purposes.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "overlayIndex", "type": "number", "mutable": false, "attr": "overlay-index", "reflectToAttr": false, "docs": "yep... overlay index", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": true }, { "name": "showBackdrop", "type": "boolean", "mutable": false, "attr": "show-backdrop", "reflectToAttr": false, "docs": "If `true`, a backdrop will be displayed behind the modal.", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [ { "name": "dismiss", "returns": { "type": "Promise", "docs": "" }, "signature": "dismiss(data?: any, role?: string) => Promise", "parameters": [], "docs": "Dismiss the modal overlay after it has been presented.", "docsTags": [ { "name": "param", "text": "data Any data to emit in the dismiss events." }, { "name": "param", "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'." } ] }, { "name": "onDidDismiss", "returns": { "type": "Promise>", "docs": "" }, "signature": "onDidDismiss() => Promise>", "parameters": [], "docs": "Returns a promise that resolves when the modal did dismiss.", "docsTags": [] }, { "name": "onWillDismiss", "returns": { "type": "Promise>", "docs": "" }, "signature": "onWillDismiss() => Promise>", "parameters": [], "docs": "Returns a promise that resolves when the modal will dismiss.", "docsTags": [] }, { "name": "present", "returns": { "type": "Promise", "docs": "" }, "signature": "present() => Promise", "parameters": [], "docs": "Present the modal overlay after it has been created.", "docsTags": [] } ], "events": [ { "event": "luModalDidDismiss", "detail": "OverlayEventDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted after the modal has dismissed.", "docsTags": [] }, { "event": "luModalDidPresent", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted after the modal has presented.", "docsTags": [] }, { "event": "luModalWillDismiss", "detail": "OverlayEventDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted before the modal has dismissed.", "docsTags": [] }, { "event": "luModalWillPresent", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted before the modal has presented.", "docsTags": [] } ], "listeners": [ { "event": "focus", "capture": true, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [ { "name": "--background", "annotation": "prop", "docs": "Background of the modal content" }, { "name": "--border-color", "annotation": "prop", "docs": "Border color of the modal content" }, { "name": "--border-radius", "annotation": "prop", "docs": "Border radius of the modal content" }, { "name": "--border-style", "annotation": "prop", "docs": "Border style of the modal content" }, { "name": "--border-width", "annotation": "prop", "docs": "Border width of the modal content" }, { "name": "--height", "annotation": "prop", "docs": "Height of the modal" }, { "name": "--max-height", "annotation": "prop", "docs": "Maximum height of the modal" }, { "name": "--max-width", "annotation": "prop", "docs": "Maximum width of the modal" }, { "name": "--min-height", "annotation": "prop", "docs": "Minimum height of the modal" }, { "name": "--min-width", "annotation": "prop", "docs": "Minimum width of the modal" }, { "name": "--width", "annotation": "prop", "docs": "Width of the modal" } ], "slots": [], "dependents": [], "dependencies": [ "lu-backdrop" ], "dependencyGraph": { "lu-modal": [ "lu-backdrop" ] } }, { "filePath": "./src/components/radio/radio.tsx", "encapsulation": "shadow", "tag": "lu-radio", "readme": "# lu-radio\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n

    Radio Button

    \r\n    \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n

    Stacked Radio Button

    \r\n    \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n

    Disabled Radio Button

    \r\n    \r\n\r\n \r\n \r\n \r\n \r\n \r\n" }, "props": [ { "name": "canDeselect", "type": "boolean", "mutable": false, "attr": "can-deselect", "reflectToAttr": false, "docs": "Used by parent to prevent deselection", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "checked", "type": "boolean", "mutable": true, "attr": "checked", "reflectToAttr": false, "docs": "If `true`, the radio is selected.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "If `true`, the user cannot interact with the radio.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "labeledById", "type": "string", "mutable": false, "attr": "labeled-by-id", "reflectToAttr": false, "docs": "passed dynamically from parent to give proper labeled by aria", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control, which is submitted with the form data.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "the value of the radio.", "docsTags": [], "values": [ { "type": "any" } ], "optional": true, "required": false } ], "methods": [], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the radio button loses focus.", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the radio button has focus.", "docsTags": [] }, { "event": "luSelect", "detail": "RadioChangeEventDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the radio button is selected.", "docsTags": [] } ], "listeners": [ { "event": "click", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [ { "name": "--color", "annotation": "prop", "docs": "Color of the radio" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/radio-group/radio-group.tsx", "encapsulation": "none", "tag": "lu-radio-group", "readme": "# lu-radio-group\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n

    Radio Button Group

    \r\n\r\n
    \r\n \r\n Chicken\r\n
    \r\n
    \r\n \r\n Steak\r\n
    \r\n
    \r\n \r\n Fish\r\n
    \r\n    \r\n

    Radio Button Group 2

    \r\n\r\n Bob\r\n Don\r\n Max\r\n\r\n
    " }, "props": [ { "name": "allowEmptySelection", "type": "boolean", "mutable": false, "attr": "allow-empty-selection", "reflectToAttr": false, "docs": "If `true`, the radios can be deselected.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "ariaLabeledByAddition", "type": "string", "mutable": false, "attr": "aria-labeled-by-addition", "reflectToAttr": false, "docs": "Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "direction", "type": "\"across\" | \"down\"", "mutable": false, "attr": "direction", "reflectToAttr": false, "docs": "Direction of elements", "docsTags": [], "default": "'down'", "values": [ { "value": "across", "type": "string" }, { "value": "down", "type": "string" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Used to add is-invalid attribute signifying invalidity", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control, which is submitted with the form data.", "docsTags": [], "default": "this.inputId", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "Tells if a value is required from the radio group", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "id set dynamically", "docsTags": [], "default": "this.inputId + '-wrapper'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "valid", "type": "boolean", "mutable": false, "attr": "valid", "reflectToAttr": false, "docs": "Used to add is-valid attribute signifying validity", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "the value of the radio group.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "this gives us a handle to set focus on the element", "docsTags": [] }, { "name": "updateValue", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValue(update: any) => Promise", "parameters": [], "docs": "this is used by the form validation/ form group to reset Value without initiating a validity check", "docsTags": [ { "name": "param", "text": "update" } ] } ], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "emitted when all radio group is \"blurred\"", "docsTags": [] }, { "event": "luChange", "detail": "LuChangeEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the value has changed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/row/row.tsx", "encapsulation": "shadow", "tag": "lu-row", "readme": "# lu-row\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/select/select.tsx", "encapsulation": "shadow", "tag": "lu-select", "readme": "# lu-select\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n
    \r\n
    \r\n\r\n\r\n" }, "props": [ { "name": "ariaLabel", "type": "string", "mutable": false, "attr": "aria-label", "reflectToAttr": false, "docs": "", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "ariaLabeledByAddition", "type": "string", "mutable": false, "attr": "aria-labeled-by-addition", "reflectToAttr": false, "docs": "Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "helpText", "type": "string", "mutable": false, "attr": "help-text", "reflectToAttr": false, "docs": "", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Declares input as invalid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "options", "type": "SelectOptionType[]", "mutable": true, "reflectToAttr": false, "docs": "", "docsTags": [], "values": [ { "type": "SelectOptionType[]" } ], "optional": false, "required": false }, { "name": "placeholder", "type": "string", "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "\"Select an option\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "A value from field will be required when used in a lu-form-group", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selectedValueName", "type": "any", "mutable": true, "attr": "selected-value-name", "reflectToAttr": false, "docs": "value of the select", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false }, { "name": "showPlaceholderOption", "type": "boolean", "mutable": false, "attr": "show-placeholder-option", "reflectToAttr": false, "docs": "Do you need a placeholder option", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "id set dynamically", "docsTags": [], "default": "this.selectId + \"-wrapper\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "valid", "type": "boolean", "mutable": false, "attr": "valid", "reflectToAttr": false, "docs": "Declares input as validated", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "this gives us a handle to set focus on the element", "docsTags": [] }, { "name": "updateValue", "returns": { "type": "Promise", "docs": "" }, "signature": "updateValue(update: any) => Promise", "parameters": [], "docs": "this is used by the form validation/ form group to reset Value without initiating a validity check", "docsTags": [ { "name": "param", "text": "update" } ] } ], "events": [ { "event": "luBlur", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the input loses focus.", "docsTags": [] }, { "event": "luChange", "detail": "TextInputChangeEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the value has changed.", "docsTags": [] }, { "event": "luComponentError", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "not a real thing yet... not sure it will be", "docsTags": [] }, { "event": "luFocus", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the input has focus.", "docsTags": [] }, { "event": "luInput", "detail": "KeyboardEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when a keyboard input ocurred.", "docsTags": [] }, { "event": "luStyle", "detail": "StyleEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the styles change.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/side-menu/side-menu.tsx", "encapsulation": "shadow", "tag": "lu-side-menu", "readme": "# lu-side-menu\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n \r\n

    Hello

    \r\n
    L22762741
    \r\n \r\n
    This is not a content
    \r\n     \r\n
    " }, "props": [ { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "externallyManaged", "type": "boolean", "mutable": false, "attr": "externally-managed", "reflectToAttr": false, "docs": "Externally manage state", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "hasBoxShadow", "type": "boolean", "mutable": false, "attr": "has-box-shadow", "reflectToAttr": false, "docs": "gives some box shadow", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "isCollapsed", "type": "boolean", "mutable": true, "attr": "is-collapsed", "reflectToAttr": true, "docs": "Tells if the side menu has been toggled closed", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "isCollapsible", "type": "boolean", "mutable": true, "attr": "is-collapsible", "reflectToAttr": true, "docs": "The attribute for making sure the sidebar is collapsible or not. Defaults to `\"false\"`. Toggle button doesn't show up if this isn't true", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "isVisible", "type": "boolean", "mutable": true, "attr": "is-visible", "reflectToAttr": false, "docs": "The attribute for making sure the sidebar is dataIsVisible or not. Defaults to `\"false\"`", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [ { "name": "collapsedHandler", "returns": { "type": "Promise", "docs": "" }, "signature": "collapsedHandler() => Promise", "parameters": [], "docs": "This method allows to collapse and open the sidebar. Note: This is different from hiding the sidebar completely.", "docsTags": [] }, { "name": "isHidden", "returns": { "type": "Promise", "docs": "" }, "signature": "isHidden() => Promise", "parameters": [], "docs": "This method allows to set the sidebar to hidden.", "docsTags": [] }, { "name": "makeVisible", "returns": { "type": "Promise", "docs": "" }, "signature": "makeVisible() => Promise", "parameters": [], "docs": "This method allows to set the sidebar to dataIsVisible.", "docsTags": [] } ], "events": [ { "event": "luSideMenuCollapsedEvent", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Event emitted if the collapsed handler fires", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false } ], "styles": [ { "name": "--lu-side-menu-desktop-width", "annotation": "prop", "docs": "width of side menu on desktop" }, { "name": "--lu-side-menu-mobile-width", "annotation": "prop", "docs": "width of side menu on mobile" }, { "name": "--side-menu-button-border-color", "annotation": "prop", "docs": "color of side menu button border" }, { "name": "--side-menu-button-color", "annotation": "prop", "docs": "color of side menu button" }, { "name": "--side-menu-button-font-size", "annotation": "prop", "docs": "controls size of icon" }, { "name": "--side-menu-button-padding-bottom", "annotation": "prop", "docs": "collapse button padding" }, { "name": "--side-menu-button-padding-end", "annotation": "prop", "docs": "collapse button padding" }, { "name": "--side-menu-button-padding-start", "annotation": "prop", "docs": "collapse button padding" }, { "name": "--side-menu-button-padding-top", "annotation": "prop", "docs": "collapse button padding" }, { "name": "--side-menu-button-top", "annotation": "prop", "docs": "how far down does the collapse button go" } ], "slots": [], "dependents": [], "dependencies": [ "lu-icon" ], "dependencyGraph": { "lu-side-menu": [ "lu-icon" ] } }, { "filePath": "./src/components/skeleton-text/skeleton-text.tsx", "encapsulation": "shadow", "tag": "lu-skeleton-text", "readme": "# lu-skeleton-text\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n \r\n \r\n \r\n \r\n
    \r\n" }, "props": [ { "name": "shouldAnimate", "type": "boolean", "mutable": false, "attr": "should-animate", "reflectToAttr": false, "docs": "animate", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "width", "type": "string", "mutable": false, "attr": "width", "reflectToAttr": false, "docs": "Width for the element to render at.", "docsTags": [], "default": "'100%'", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--background", "annotation": "prop", "docs": "Background of the skeleton text" } ], "slots": [], "dependents": [ "lu-combo-box" ], "dependencies": [], "dependencyGraph": { "lu-combo-box": [ "lu-skeleton-text" ] } }, { "filePath": "./src/components/spinner/spinner.tsx", "encapsulation": "shadow", "tag": "lu-spinner", "readme": "# lu-spinner\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n
    \r\n \r\n \r\n \r\n \r\n
    " }, "props": [ { "name": "dataColor", "type": "string", "mutable": false, "attr": "data-color", "reflectToAttr": false, "docs": "The color to use from the Liberty color palette.\r\nDefault options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "dataDuration", "type": "number", "mutable": false, "attr": "data-duration", "reflectToAttr": false, "docs": "Duration of the spinner animation in milliseconds.", "docsTags": [], "default": "1000", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "dataHidden", "type": "boolean", "mutable": false, "attr": "data-hidden", "reflectToAttr": false, "docs": "If `true`, the spinner will be visibly hidden but still within the DOM.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "dataMessage", "type": "string", "mutable": false, "attr": "data-message", "reflectToAttr": false, "docs": "Set an a11y message for screen readers when the loader appears. Defaults to 'Please wait while the next step loads.'", "docsTags": [], "default": "'Please wait while the next step loads.'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "dataPaused", "type": "boolean", "mutable": false, "attr": "data-paused", "reflectToAttr": false, "docs": "If `true`, the spinner's animation will be paused.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "dataScale", "type": "number", "mutable": false, "attr": "data-scale", "reflectToAttr": false, "docs": "Size of the spinner as a multiple of its own dimensions (32px x 32px).", "docsTags": [], "default": "1", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/tab/tab.tsx", "encapsulation": "shadow", "tag": "lu-tab", "readme": "# lu-tab\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n Hi\r\n Ho\r\n Dario\r\n" }, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "sets active state", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "any", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "sets name value used in tabs component to show active tab (does that through the value property)", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false }, { "name": "noSlide", "type": "any", "mutable": false, "attr": "no-slide", "reflectToAttr": false, "docs": "This property is internally used show underline correctly. If false it uses this components css to show highlighted tab", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "luTabSelect", "detail": "TabChangeEvent", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the tab button is selected.", "docsTags": [] }, { "event": "tabBlur", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the tab button loses focus.", "docsTags": [] }, { "event": "tabFocus", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the tab button is focused.", "docsTags": [] } ], "listeners": [ { "event": "click", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false }, { "event": "luTabFocused", "target": "parent", "capture": true, "passive": false }, { "event": "luTabBlurred", "target": "parent", "capture": true, "passive": false } ], "styles": [ { "name": "--lu-tab-active-border-color", "annotation": "prop", "docs": "color of active border" }, { "name": "--lu-tab-active-color", "annotation": "prop", "docs": "color of active text" }, { "name": "--lu-tab-button-padding-bottom", "annotation": "prop", "docs": "bottom padding of tab" }, { "name": "--lu-tab-button-padding-left", "annotation": "prop", "docs": "left padding of tab" }, { "name": "--lu-tab-button-padding-right", "annotation": "prop", "docs": "right padding of tab" }, { "name": "--lu-tab-button-padding-top", "annotation": "prop", "docs": "top padding of tab" }, { "name": "--lu-tab-focused-border-color", "annotation": "prop", "docs": "color of bottom border when focused" }, { "name": "--lu-tab-font-size", "annotation": "prop", "docs": "font size of tab" }, { "name": "--lu-tab-inactive-color", "annotation": "prop", "docs": "color of inactive text" }, { "name": "--lu-tab-outline", "annotation": "prop", "docs": "outline of tab when focused" }, { "name": "--lu-tab-padding-bottom", "annotation": "prop", "docs": "bottom padding of tab" }, { "name": "--lu-tab-padding-left", "annotation": "prop", "docs": "left padding of tab" }, { "name": "--lu-tab-padding-right", "annotation": "prop", "docs": "right padding of tab" }, { "name": "--lu-tab-padding-top", "annotation": "prop", "docs": "top padding of tab" }, { "name": "--lu-tabs-selection-bar-color", "annotation": "prop", "docs": "color of active border" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/tabs/tabs.tsx", "encapsulation": "shadow", "tag": "lu-tabs", "readme": "# lu-tabs\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n\r\n Hi\r\n Ho\r\n Dario\r\n" }, "props": [ { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "sets the aria label", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "noSlide", "type": "boolean", "mutable": false, "attr": "no-slide", "reflectToAttr": false, "docs": "dont do cool animation, if set to false the component needs to know when it's size has changed through the elementResized method", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "string", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "value of the selected tab", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "elementResized", "returns": { "type": "Promise", "docs": "" }, "signature": "elementResized() => Promise", "parameters": [], "docs": "If fancyAnimation is true then the component needs to know when t", "docsTags": [] } ], "events": [ { "event": "luTabBlurred", "detail": "any", "bubbles": false, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "luTabFocused", "detail": "any", "bubbles": false, "cancelable": true, "composed": true, "docs": "", "docsTags": [] }, { "event": "luTabsUpdated", "detail": "{ value: string; }", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [ { "event": "luTabDidLoad", "capture": false, "passive": false }, { "event": "luTabDidDisconnect", "capture": false, "passive": false }, { "event": "luTabSelect", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false }, { "event": "tabFocus", "capture": false, "passive": false }, { "event": "tabBlur", "capture": false, "passive": false } ], "styles": [ { "name": "--lu-tabs-max-inner-width", "annotation": "prop", "docs": "Width of inner tabs container" }, { "name": "--lu-tabs-selection-bar-color", "annotation": "prop", "docs": "color of active border" } ], "slots": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/text-area/text-area.tsx", "encapsulation": "shadow", "tag": "lu-text-area", "readme": "# lu-text-area\r\n\r\n\r\n\r", "docs": "", "docsTags": [], "usage": { "general": "\r\n \r\n " }, "props": [ { "name": "ariaLabeledByAddition", "type": "string", "mutable": false, "attr": "aria-labeled-by-addition", "reflectToAttr": false, "docs": "Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autoGrow", "type": "boolean", "mutable": false, "attr": "auto-grow", "reflectToAttr": false, "docs": "If `true`, the element height will increase based on the value.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "autocapitalize", "type": "string", "mutable": false, "attr": "autocapitalize", "reflectToAttr": false, "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.", "docsTags": [], "default": "'none'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "autofocus", "type": "boolean", "mutable": false, "attr": "autofocus", "reflectToAttr": false, "docs": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "clearOnEdit", "type": "boolean", "mutable": true, "attr": "clear-on-edit", "reflectToAttr": false, "docs": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "string", "mutable": false, "attr": "color", "reflectToAttr": false, "docs": "The color to use from your application's color palette.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "cols", "type": "number", "mutable": false, "attr": "cols", "reflectToAttr": false, "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "debounce", "type": "number", "mutable": false, "attr": "debounce", "reflectToAttr": false, "docs": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "If `true`, the user cannot interact with the textarea.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "invalid", "type": "boolean", "mutable": false, "attr": "invalid", "reflectToAttr": false, "docs": "Declares input as invalid", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "maxlength", "type": "number", "mutable": false, "attr": "maxlength", "reflectToAttr": false, "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "minlength", "type": "number", "mutable": false, "attr": "minlength", "reflectToAttr": false, "docs": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the control, which is submitted with the form data.", "docsTags": [], "default": "this.textAreaId", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "placeholder", "type": "string", "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "Instructional text that shows before the input has a value.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "readonly", "type": "boolean", "mutable": false, "attr": "readonly", "reflectToAttr": false, "docs": "If `true`, the user cannot modify the value.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "If `true`, the user must fill in a value before submitting a form.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "rows", "type": "number", "mutable": false, "attr": "rows", "reflectToAttr": false, "docs": "The number of visible text lines for the control.", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "spellcheck", "type": "boolean", "mutable": false, "attr": "spellcheck", "reflectToAttr": false, "docs": "If `true`, the element will have its spelling and grammar checked.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "useId", "type": "string", "mutable": true, "attr": "use-id", "reflectToAttr": false, "docs": "id set dynamically", "docsTags": [], "default": "this.textAreaId + '-wrapper'", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "valid", "type": "boolean", "mutable": false, "attr": "valid", "reflectToAttr": false, "docs": "Declares input as validated", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "string", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "The value of the textarea.", "docsTags": [], "default": "''", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "wrap", "type": "\"hard\" | \"off\" | \"soft\"", "mutable": false, "attr": "wrap", "reflectToAttr": false, "docs": "Indicates how the control wraps text.", "docsTags": [], "values": [ { "value": "hard", "type": "string" }, { "value": "off", "type": "string" }, { "value": "soft", "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "getInputElement", "returns": { "type": "Promise", "docs": "" }, "signature": "getInputElement() => Promise", "parameters": [], "docs": "Returns the native `