{
  "timestamp": "2022-01-27T15:52:53",
  "compiler": {
    "name": "@stencil/core",
    "version": "2.5.2",
    "typescriptVersion": "4.2.3"
  },
  "components": [
    {
      "filePath": "./src/components/cla-badge/cla-badge.tsx",
      "encapsulation": "shadow",
      "tag": "cla-badge",
      "readme": "# cla-badge\n\nBadge - Can be slotted in anywhere and will display a bootstrap styled badge (if used along side the cla-card-media you must use the slot name of \"status\").\n\nIf a colour attribute is added it will override the colour set in the `styleclass` attribute.\n\n## Usage\n\n```html\n<cla-badge slot=\"status\" styleclass=\"badge badge-pill badge-gold\">Won it mate</cla-badge>\n```\n\n\n",
      "docs": "Badge - Can be slotted in anywhere and will display a bootstrap styled badge (if used along side the cla-card-media you must use the slot name of \"status\").\n\nIf a colour attribute is added it will override the colour set in the `styleclass` attribute.",
      "docsTags": [
        {
          "text": "- Allows badge content to be added",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "colour",
          "type": "string",
          "mutable": false,
          "attr": "colour",
          "reflectToAttr": false,
          "docs": "The background colour of the badge (optional)",
          "docsTags": [],
          "default": "null",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "styleclass",
          "type": "string",
          "mutable": false,
          "attr": "styleclass",
          "reflectToAttr": false,
          "docs": "The bootstrap styling of the badge i.e. badge badge-primary badge-pill etc",
          "docsTags": [],
          "default": "\"badge badge-primary\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows badge content to be added"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-banner/cla-banner.tsx",
      "encapsulation": "shadow",
      "tag": "cla-banner",
      "readme": "# cla-banner\n\nBase banner component.\n\n## Usage\n\n```html\n<cla-banner> </cla-banner>\n```\n",
      "docs": "Base banner component.",
      "docsTags": [
        {
          "text": "- Content of the banner",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "position",
          "type": "\"bottom\" | \"top\"",
          "mutable": false,
          "attr": "position",
          "reflectToAttr": false,
          "docs": "The banner position i.e top or bottom",
          "docsTags": [],
          "default": "'bottom'",
          "values": [
            {
              "value": "bottom",
              "type": "string"
            },
            {
              "value": "top",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Content of the banner"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-button/cla-button.tsx",
      "encapsulation": "shadow",
      "tag": "cla-button",
      "readme": "# Button\n\nThe Button component.\n\n[Bootstrap buttons](https://getbootstrap.com/docs/4.3/components/buttons/) as a web component.\n\n## Usage\n\n```html\n<!-- Default -->\n<cla-button>Default</cla-button>\n\n<!-- Colors -->\n<cla-button color=\"primary\">Primary</cla-button>\n<cla-button color=\"secondary\">Secondary</cla-button>\n<cla-button color=\"success\">Success</cla-button>\n<cla-button color=\"danger\">Danger</cla-button>\n<cla-button color=\"warning\">Warning</cla-button>\n<cla-button color=\"info\">Info</cla-button>\n<cla-button color=\"light\">Light</cla-button>\n<cla-button color=\"dark\">Dark</cla-button>\n<cla-button color=\"link\">Link</cla-button>\n\n<!-- Disabled -->\n<cla-button color=\"primary\" disabled>Primary</cla-button>\n<cla-button color=\"secondary\" disabled>Secondary</cla-button>\n<cla-button color=\"success\" disabled>Success</cla-button>\n<cla-button color=\"danger\" disabled>Danger</cla-button>\n<cla-button color=\"warning\" disabled>Warning</cla-button>\n<cla-button color=\"info\" disabled>Info</cla-button>\n<cla-button color=\"light\" disabled>Light</cla-button>\n<cla-button color=\"dark\" disabled>Dark</cla-button>\n<cla-button color=\"link\" disabled>Link</cla-button>\n\n<!-- Outline -->\n<cla-button color=\"primary\" outline>Primary</cla-button>\n<cla-button color=\"secondary\" outline>Secondary</cla-button>\n<cla-button color=\"success\" outline>Success</cla-button>\n<cla-button color=\"danger\" outline>Danger</cla-button>\n<cla-button color=\"warning\" outline>Warning</cla-button>\n<cla-button color=\"info\" outline>Info</cla-button>\n<cla-button color=\"light\" outline>Light</cla-button>\n<cla-button color=\"dark\" outline>Dark</cla-button>\n<cla-button color=\"link\" outline>Link</cla-button>\n\n<!-- Sizes -->\n<cla-button color=\"primary\" size=\"small\">Primary Small</cla-button>\n<cla-button color=\"secondary\" size=\"small\">Secondary Small</cla-button>\n<cla-button color=\"success\" size=\"large\">Success Large</cla-button>\n<cla-button color=\"danger\" size=\"large\">Danger Large</cla-button>\n\n<cla-button color=\"secondary\" size=\"small\" block>Secondary Small Block</cla-button>\n<cla-button color=\"success\" block>Success Block</cla-button>\n<cla-button color=\"danger\" block>Danger Large Block</cla-button>\n\n<!-- Forms -->\n<form action=\"#\" method=\"get\">\n  <input type=\"text\" name=\"text\"/>\n  <cla-button type=\"submit\" color=\"primary\" name=\"submit\" value=\"submit\">Submit</cla-button>\n  <cla-button type=\"reset\" color=\"secondary\">Reset</cla-button>\n</form>\n```\n",
      "docs": "The Button component.",
      "docsTags": [
        {
          "text": "- Content placed inside the button.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "block",
          "type": "boolean",
          "mutable": false,
          "attr": "block",
          "reflectToAttr": false,
          "docs": "Whether to use the block style variant of the button.\n\nThis makes the button full width within its container.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "\"danger\" | \"dark\" | \"info\" | \"light\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The button color.",
          "docsTags": [],
          "values": [
            {
              "value": "danger",
              "type": "string"
            },
            {
              "value": "dark",
              "type": "string"
            },
            {
              "value": "info",
              "type": "string"
            },
            {
              "value": "light",
              "type": "string"
            },
            {
              "value": "link",
              "type": "string"
            },
            {
              "value": "primary",
              "type": "string"
            },
            {
              "value": "secondary",
              "type": "string"
            },
            {
              "value": "success",
              "type": "string"
            },
            {
              "value": "warning",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": true,
          "docs": "Whether the button is disabled.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The button name.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "outline",
          "type": "boolean",
          "mutable": false,
          "attr": "outline",
          "reflectToAttr": false,
          "docs": "Whether to use the outline style variant of the button.\n\nThis removes the background from the button when it's not hovered.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"default\" | \"large\" | \"small\" | \"xsmall\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The button size.",
          "docsTags": [],
          "default": "'default'",
          "values": [
            {
              "value": "default",
              "type": "string"
            },
            {
              "value": "large",
              "type": "string"
            },
            {
              "value": "small",
              "type": "string"
            },
            {
              "value": "xsmall",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "type",
          "type": "\"button\" | \"reset\" | \"submit\"",
          "mutable": true,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The button type.",
          "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": "The button value.",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "click",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Content placed inside the button."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-card/cla-card.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card",
      "readme": "# cla-card\n\nBase card component.\n\n## Usage\n\n```html\n  <cla-card href=\"/cardlink?1\" cardtitle=\"Lorem ipsum\" cardsub=\"sub text (this can be left out if you don't need it)\"></cla-card>\n```\n\nYou can truncate the text in the title or text using the following style classes:\n.truncate-title\n.truncate-text\n",
      "docs": "Base card component.",
      "docsTags": [
        {
          "text": "cardtop - Allows for content at the top of the card including figures, images and headers.",
          "name": "slot"
        },
        {
          "text": "menu - Allows a menu to be added.",
          "name": "slot"
        },
        {
          "text": "none - This is the main content of the card",
          "name": "slot"
        },
        {
          "text": "footer - Allows a footer to be added to the card.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "href",
          "type": "string",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "Card link - attached to card title and media slot",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "statusborder",
          "type": "string",
          "mutable": false,
          "attr": "statusborder",
          "reflectToAttr": false,
          "docs": "Status border - if the card has a status border you can set the colour here e.g. \"#000\";",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "styleclass",
          "type": "string",
          "mutable": false,
          "attr": "styleclass",
          "reflectToAttr": false,
          "docs": "Style Class - adds class to the card for styling and rounded corners",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "cardtop",
          "docs": "Allows for content at the top of the card including figures, images and headers."
        },
        {
          "name": "footer",
          "docs": "Allows a footer to be added to the card."
        },
        {
          "name": "menu",
          "docs": "Allows a menu to be added."
        },
        {
          "name": "none",
          "docs": "This is the main content of the card"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-card-figure/cla-card-figure.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card-figure",
      "readme": "# cla-card-figure\n\nCard figure - slots inside the card-media component and allows an svg or icon to display centrally inside.\n\n## Usage\n\n```html\n<cla-card-figure>content goes in here</cla-card-figure>\n```\n",
      "docs": "Card figure - slots inside the card-media component and allows an svg or icon to display centrally inside.",
      "docsTags": [
        {
          "text": "- Holds the cla-insignia in place.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Holds the cla-insignia in place."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-card-footer/cla-card-footer.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card-footer",
      "readme": "# cla-card-footer\n\n\n",
      "docs": "",
      "docsTags": [
        {
          "text": "- Card footer content goes in here.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Card footer content goes in here."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-card-header/cla-card-header.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card-header",
      "readme": "# cla-card-header\n\nCard header - slots inside the card component and displays a grey headbar\n\n## Usage\n\n```html\n  <cla-card-header slot=\"card-top\">Title</cla-card-header>\n```\n\n",
      "docs": "Card header - slots inside the card component and displays a grey headbar",
      "docsTags": [
        {
          "text": "- Card header content goes in here.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Card header content goes in here."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-card-image/cla-card-image.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card-image",
      "readme": "# cla-card-image\n\nCard image - slot inside the card-media component and displays an image or placeholder icon.\n\n## Usage\n\n```html\n<cla-card-image img=\"images/image.jpg\"></cla-card-image>\n```\n",
      "docs": "Card image - slot inside the card-media component and displays an image or placeholder icon.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "img",
          "type": "string",
          "mutable": false,
          "attr": "img",
          "reflectToAttr": false,
          "docs": "Image URL",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "claImgDidLoad",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when nav item loads.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-card-media/cla-card-media.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card-media",
      "readme": "# cla-card-media\n\nCard media - slot into the top of the card and holds the card-image component or the card-figure component as well as a slot for text or a status badge in the top left.\n\n## Usage\n\n```html\n<cla-card-media slot=\"media\">\ncontent goes in here\n</cla-card-media>\n```\n\nYou can remove the media underline using the following styleclass:\n.no-border\n",
      "docs": "Card media - slot into the top of the card and holds the card-image component or the card-figure component as well as a slot for text or a status badge in the top left.",
      "docsTags": [
        {
          "text": "status - holds text or cla-badge component to show the status of a card",
          "name": "slot"
        },
        {
          "text": "- Holds a cla-card-figure or cla-card-image",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "bgcolor",
          "type": "string",
          "mutable": false,
          "attr": "bgcolor",
          "reflectToAttr": false,
          "docs": "The placeholder background colour\nThe default uses Claromentis' product theme primary colour variable in the first instance\nIf the component is used in a project without this variable it will default to white.",
          "docsTags": [],
          "default": "'var(--theme-primary-color, var(--white))'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "height",
          "type": "string",
          "mutable": false,
          "attr": "height",
          "reflectToAttr": false,
          "docs": "Height of card-media panel i.e. 100px/10vh/5rem etc - if no height is applied the standard height is 165px, set to auto when using the preserveaspect attribute on cla-card-image",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "iconcolor",
          "type": "string",
          "mutable": false,
          "attr": "iconcolor",
          "reflectToAttr": false,
          "docs": "The placeholder icon colour\nThe default uses Claromentis' product theme primary colour contrast variable in the first instance\nIf the component is used in a project without this variable it will default to 'var(--gray-900)'.",
          "docsTags": [],
          "default": "'var(--theme-primary-color-contrast, var(--gray-900))'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "placeholder",
          "type": "string",
          "mutable": false,
          "attr": "placeholder",
          "reflectToAttr": false,
          "docs": "Placeholder icon - this can be either a Glyphicon or an Ionicon\n In the case of glyphicons us the 'glyphicons-...' class\n In the case of the Ionicon use the name attribut of the icon e.g 'hourglass-outline'\n This prop is not compatible with preserveaspect",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "preserveaspect",
          "type": "boolean",
          "mutable": false,
          "attr": "preserveaspect",
          "reflectToAttr": false,
          "docs": "Set as 'true' to preserve the aspect ratio of the uploaded image",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "styleclass",
          "type": "string",
          "mutable": false,
          "attr": "styleclass",
          "reflectToAttr": false,
          "docs": "Additional styling classes if needed;",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Holds a cla-card-figure or cla-card-image"
        },
        {
          "name": "status",
          "docs": "holds text or cla-badge component to show the status of a card"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "ion-icon"
      ],
      "dependencyGraph": {
        "cla-card-media": [
          "ion-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/cla-checkbox/cla-checkbox.tsx",
      "encapsulation": "none",
      "tag": "cla-checkbox",
      "readme": "# cla-checkbox\n\nCheckbox component.\n\n## Usage\n\n```html\n  <cla-checkbox name=\"\">\n    Content of label goes here\n  </cla-checkbox>\n```\n",
      "docs": "Checkbox component.",
      "docsTags": [
        {
          "text": "- Allows label content",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "block",
          "type": "boolean",
          "mutable": false,
          "attr": "block",
          "reflectToAttr": false,
          "docs": "Whether to use the block style variant of the checkbox.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "checked",
          "type": "boolean",
          "mutable": true,
          "attr": "checked",
          "reflectToAttr": false,
          "docs": "Is it Checked ?",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": true,
          "docs": "Whether the checkbox is disabled.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inverted",
          "type": "boolean",
          "mutable": false,
          "attr": "inverted",
          "reflectToAttr": false,
          "docs": "Whether to use the inverted variant of the checkbox.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "large",
          "type": "boolean",
          "mutable": false,
          "attr": "large",
          "reflectToAttr": false,
          "docs": "Whether to use the large variant of the checkbox.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The checkbox ID & name",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "0",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The checkbox value",
          "docsTags": [],
          "values": [
            {
              "value": "0",
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "selected",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checkbox is selected.",
          "docsTags": []
        },
        {
          "event": "unselected",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the checkbox is unselected.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows label content"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-icon/cla-icon.tsx",
      "encapsulation": "shadow",
      "tag": "cla-icon",
      "readme": "# cla-icon\n\nGlyphicon Icon - Can be slotted in anywhere an will display any Glyphicon in your chosen colour.\n\n## Usage\n\n```html\n<cla-icon fill=\"red\" iconid=\"glyphicons-basic-75-cup\"></cla-icon>\n```\n\n\n",
      "docs": "Glyphicon Icon - Can be slotted in anywhere an will display any Glyphicon in your chosen colour.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "fill",
          "type": "string",
          "mutable": true,
          "attr": "fill",
          "reflectToAttr": false,
          "docs": "The color of the icon, this will inherit the current text color if not chosen.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "iconid",
          "type": "string",
          "mutable": false,
          "attr": "iconid",
          "reflectToAttr": false,
          "docs": "The computed Id of the icon you're adding i.e glyphicons-basic-75-cup",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "status",
          "type": "string",
          "mutable": true,
          "attr": "status",
          "reflectToAttr": false,
          "docs": "",
          "docsTags": [],
          "default": "\"\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [
        "cla-picker"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "cla-picker": [
          "cla-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/cla-insignia/cla-insignia.tsx",
      "encapsulation": "shadow",
      "tag": "cla-insignia",
      "readme": "# cla-insignia\n\n\nThe Claromentis insignia component.\nNamed 'insignia' to avoid confusion with Bootstrap 'badge' namespace.\n\nThe component `insignias-svg.json` the SVG code from there. See below for instructions on how to add new shapes to the file.\n\nIn order to use with an image please use the `cla-insignia-image component`\n\ne.g.\n ```html \n <cla-insignia colour=\"#c82333\" size=\"x-small\" shape=\"hexagon\" type=\"outline\">\n      <cla-insignia-image size=\"x-small\" source=\"/assets/icons/insignias/044-trophy-3@2x.svg\"></cla-insignia-image>\n</cla-insignia>\n```\n\n## insignia `.json` guide\n\nJSON object structure:\n\n```json\n{\n    \"shape\": {\n      \"fill\": \"\",\n      \"outline\" : \"\",\n      \"empty\": \"\"\n    }\n}\n```\nshape e.g. `hexagon`\n\nWhen adding a new shape make sure you have input the code for each `\"fill\", \"outline\" and \"empty\"`\nYou may need to use a JSON escape tool to ensure the SVG code is formatting correctly e.g. https://www.freeformatter.com/json-escape.html\n\nFor fill and outline shapes classes need to be added to the paths in order for the SVG to pick up the correct insignia colour.\n\nFill  \n- The inside path needs the class `inner`\n- The outside path needs the class `outer`\n\nOutline\n\n- The path needs the class `outer`\n\nSee existing shapes for guidance\n\n",
      "docs": "The Claromentis insignia component.\nNamed 'insignia' to avoid confusion with Bootstrap 'badge' namespace.\n\nThe component `insignias-svg.json` the SVG code from there. See below for instructions on how to add new shapes to the file.\n\nIn order to use with an image please use the `cla-insignia-image component`\n\ne.g.\n ```html \n <cla-insignia colour=\"#c82333\" size=\"x-small\" shape=\"hexagon\" type=\"outline\">\n      <cla-insignia-image size=\"x-small\" source=\"/assets/icons/insignias/044-trophy-3@2x.svg\"></cla-insignia-image>\n</cla-insignia>\n```",
      "docsTags": [
        {
          "text": "- Holds the cla-insignia-image",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "colour",
          "type": "string",
          "mutable": false,
          "attr": "colour",
          "reflectToAttr": false,
          "docs": "The insignia colour.",
          "docsTags": [],
          "default": "\"#76cef9\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "shape",
          "type": "\"hexagon\"",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": false,
          "docs": "The insignia shape: 'hexagon', '' or ''.\nDefault: 'hexagon'",
          "docsTags": [],
          "default": "\"hexagon\"",
          "values": [
            {
              "value": "hexagon",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "type",
          "type": "\"empty\" | \"fill\" | \"outline\"",
          "mutable": false,
          "attr": "type",
          "reflectToAttr": false,
          "docs": "The insignia fill option: 'fill', 'outline' or 'empty'.\nDefault: 'hexagon'",
          "docsTags": [],
          "default": "\"fill\"",
          "values": [
            {
              "value": "empty",
              "type": "string"
            },
            {
              "value": "fill",
              "type": "string"
            },
            {
              "value": "outline",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "width",
          "type": "string",
          "mutable": false,
          "attr": "width",
          "reflectToAttr": false,
          "docs": "The insignia width.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Holds the cla-insignia-image"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-insignia-image/cla-insignia-image.tsx",
      "encapsulation": "shadow",
      "tag": "cla-insignia-image",
      "readme": "# cla-insignia-image\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "alttext",
          "type": "string",
          "mutable": false,
          "attr": "alttext",
          "reflectToAttr": false,
          "docs": "The image alternative text.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "source",
          "type": "string",
          "mutable": false,
          "attr": "source",
          "reflectToAttr": false,
          "docs": "The image source.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-item/cla-item.tsx",
      "encapsulation": "shadow",
      "tag": "cla-item",
      "readme": "# cla-item\n\nItem is an element which currently contains a label/input pair e.g.`cla-label` & `cla-picker`. Wrapping the pairof elements in this component helps provide a way to label them correctly.\n\nThis component can be extended in the future to contain text, icons, avatars, images, inputs, and any other native or custom elements.\n\ne.g:\n\n```html\n<cla-item>\n  <cla-label hidden=\"true\">Calendar</cla-label>\n  <cla-picker name=\"calendar\" value=\"0\" checked=\"true\" iconid=\"glyphicons-basic-46-calendar\"></cla-picker>\n</cla-item>\n",
      "docs": "Item is an element which currently contains a label/input pair e.g.`cla-label` & `cla-picker`. Wrapping the pairof elements in this component helps provide a way to label them correctly.\n\nThis component can be extended in the future to contain text, icons, avatars, images, inputs, and any other native or custom elements.\n\ne.g:\n\n```html\n<cla-item>\n  <cla-label hidden=\"true\">Calendar</cla-label>\n  <cla-picker name=\"calendar\" value=\"0\" checked=\"true\" iconid=\"glyphicons-basic-46-calendar\"></cla-picker>\n</cla-item>",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "orientate",
          "type": "\"horizontal\" | \"vertical\"",
          "mutable": false,
          "attr": "orientate",
          "reflectToAttr": false,
          "docs": "",
          "docsTags": [],
          "default": "'horizontal'",
          "values": [
            {
              "value": "horizontal",
              "type": "string"
            },
            {
              "value": "vertical",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-label/cla-label.tsx",
      "encapsulation": "shadow",
      "tag": "cla-label",
      "readme": "# cla-label\n\nLabel is an element which can be used with `cla-picker` and `cla-checkbox` etc. In order for the label and inputs to be labelled together correctly both elements should be wrapped in a `cla-item` component.\n\ne.g:\n\n```html\n<cla-item>\n  <cla-label hidden=\"true\">Calendar</cla-label>\n  <cla-picker name=\"calendar\" value=\"0\" checked=\"true\" iconid=\"glyphicons-basic-46-calendar\"></cla-picker>\n</cla-item>\n```\n",
      "docs": "Label is an element which can be used with `cla-picker` and `cla-checkbox` etc. In order for the label and inputs to be labelled together correctly both elements should be wrapped in a `cla-item` component.\n\ne.g:\n\n```html\n<cla-item>\n  <cla-label hidden=\"true\">Calendar</cla-label>\n  <cla-picker name=\"calendar\" value=\"0\" checked=\"true\" iconid=\"glyphicons-basic-46-calendar\"></cla-picker>\n</cla-item>\n```",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "hidden",
          "type": "boolean",
          "mutable": false,
          "attr": "hidden",
          "reflectToAttr": false,
          "docs": "If 'true', the label is hidden",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-menu/cla-menu.tsx",
      "encapsulation": "shadow",
      "tag": "cla-menu",
      "readme": "# cla-menu\n\nDropdown Menu - adds a dropdown menu anywhere you'd like on the page, links can be slotted inside the <cla-menu> tag (you can add this to the a card using the slot name \"menu\").\n\n## Usage\n\n```html\n<cla-menu slot=\"menu\">\n  <a href=\"/test\">James</a>\n  <a href=\"/test\">Simon</a>\n  <a href=\"/test\">Ivan</a>\n  <a href=\"/test\">Gili</a>\n  <a href=\"/test\">Chris</a>\n</cla-menu>\n```\n",
      "docs": "Dropdown Menu - adds a dropdown menu anywhere you'd like on the page, links can be slotted inside the <cla-menu> tag (you can add this to the a card using the slot name \"menu\").",
      "docsTags": [
        {
          "text": "- Allows menu items to be added to the dropdown menu.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "closeOnSelect",
          "type": "boolean",
          "mutable": false,
          "attr": "close-on-select",
          "reflectToAttr": false,
          "docs": "If 'true' the menu will close when an item is selected",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "toggleEvent",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the menu is toggled.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "mousedown",
          "target": "window",
          "capture": false,
          "passive": true
        },
        {
          "event": "resize",
          "target": "window",
          "capture": false,
          "passive": true
        },
        {
          "event": "keydown",
          "target": "window",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows menu items to be added to the dropdown menu."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-nav/cla-nav.tsx",
      "encapsulation": "shadow",
      "tag": "cla-nav",
      "readme": "#cla-nav\n\nNavigation wrapper\n\n## Usage\n\n```html\n<cla-nav>\n\n</cla-nav>\n```\n",
      "docs": "Navigation wrapper",
      "docsTags": [
        {
          "text": "- Wrapper for nav items",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "inline",
          "type": "boolean",
          "mutable": false,
          "attr": "inline",
          "reflectToAttr": false,
          "docs": "Whether to display nav items vertically or horizontally.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Wrapper for nav items"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-nav-item/cla-nav-item.tsx",
      "encapsulation": "shadow",
      "tag": "cla-nav-item",
      "readme": "#cla-nav-item\n\nNavigation item\n\n## Usage\n\n```html\n<ul>\n<cla-nav-item><a href=\"#0\">Nav Item</a></cla-nav-item>\n```\n",
      "docs": "Navigation item",
      "docsTags": [
        {
          "text": "- Link or title content",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "active",
          "type": "boolean",
          "mutable": false,
          "attr": "active",
          "reflectToAttr": false,
          "docs": "Whether nav tabs is active.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "href",
          "type": "any",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "nav tab href link .",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "any",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "nav tab name & id - fills the 'data-name' and 'id' attributes of the <li>",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "navtitle",
          "type": "boolean",
          "mutable": false,
          "attr": "navtitle",
          "reflectToAttr": false,
          "docs": "Whether to display nav items as link or titles in block mode (this attribute will not work in the list is in inline mode)",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"default\" | \"large\" | \"small\" | \"xsmall\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The nav tab size.",
          "docsTags": [],
          "default": "'default'",
          "values": [
            {
              "value": "default",
              "type": "string"
            },
            {
              "value": "large",
              "type": "string"
            },
            {
              "value": "small",
              "type": "string"
            },
            {
              "value": "xsmall",
              "type": "string"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "claNavItemDidLoad",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when nav item loads.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Link or title content"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-picker/cla-picker.tsx",
      "encapsulation": "none",
      "tag": "cla-picker",
      "readme": "# Picker\n\nThe Picker component.\n\nBuilt using the [Ionic Framework Radio / Radio Group](https://ionicframework.com/docs/api/) for reference.\n\nCurrently `cla-picker` and `cla-picker-group` components must be used with each other, with the buttons being\nnested in the group.\n\nFor icons - either include an icon id to user the picker with the `cla-icon` component or nest the icon image within the component.\n\n```html\n<cla-picker-group multiselectable=\"false\">\n  <cla-item>\n    <cla-label hidden=\"true\">Hide</cla-label>\n    <cla-picker pickername=\"card_shadow\" id=\"no-card-shadow\" value=\"0\" iconid=\"glyphicons-basic-44-user-group\"></cla-picker>\n  </cla-item>\n  <cla-item>\n    <cla-label hidden=\"true\">Show</cla-label>\n    <cla-picker pickername=\"card_shadow\" id=\"card-shadow\" value=\"1\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"35\"><g id=\"border\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M6.8 29l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zM44 26.63l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zm0-3.96l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zM6 32.15L7.85 34 6 32.15zM47.1 6L49 7.9 47.1 6z\"></path><path stroke-width=\"2\" d=\"M1 1h43v28H1z\"></path><path stroke-width=\"2\" d=\"M6 29v5h43.13V6H44\"></path></g></svg>\n    </cla-picker>\n  </cla-item>\n</cla-picker-group>\n```\n",
      "docs": "The Picker component.\n\nBuilt using the [Ionic Framework Radio / Radio Group](https://ionicframework.com/docs/api/) for reference.\n\nCurrently `cla-picker` and `cla-picker-group` components must be used with each other, with the buttons being\nnested in the group.\n\nFor icons - either include an icon id to user the picker with the `cla-icon` component or nest the icon image within the component.\n\n```html\n<cla-picker-group multiselectable=\"false\">\n  <cla-item>\n    <cla-label hidden=\"true\">Hide</cla-label>\n    <cla-picker pickername=\"card_shadow\" id=\"no-card-shadow\" value=\"0\" iconid=\"glyphicons-basic-44-user-group\"></cla-picker>\n  </cla-item>\n  <cla-item>\n    <cla-label hidden=\"true\">Show</cla-label>\n    <cla-picker pickername=\"card_shadow\" id=\"card-shadow\" value=\"1\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"35\"><g id=\"border\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M6.8 29l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zM44 26.63l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zm0-3.96l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zM6 32.15L7.85 34 6 32.15zM47.1 6L49 7.9 47.1 6z\"></path><path stroke-width=\"2\" d=\"M1 1h43v28H1z\"></path><path stroke-width=\"2\" d=\"M6 29v5h43.13V6H44\"></path></g></svg>\n    </cla-picker>\n  </cla-item>\n</cla-picker-group>\n```",
      "docsTags": [
        {
          "text": "- Slot for icon if not using the <cla-icon>",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "block",
          "type": "boolean",
          "mutable": false,
          "attr": "block",
          "reflectToAttr": false,
          "docs": "if 'block=\"true\"', 'block' or 'block=\"block\"' (i.e. true) the picker will display as a block (<cla-item> orientate property must be set to 'vertical')",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "checked",
          "type": "boolean",
          "mutable": true,
          "attr": "checked",
          "reflectToAttr": false,
          "docs": "If `true`, the picker is selected.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "If `true`, the user cannot interact with the picker.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "displayinput",
          "type": "boolean",
          "mutable": false,
          "attr": "displayinput",
          "reflectToAttr": false,
          "docs": "If 'true', the picker will show the input (checkbox if multiselectable, radio if not)",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "iconid",
          "type": "string",
          "mutable": false,
          "attr": "iconid",
          "reflectToAttr": false,
          "docs": "cla-icon id e.g. glyphicons-basic-158-thumbnails-small",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "image",
          "type": "string",
          "mutable": false,
          "attr": "image",
          "reflectToAttr": false,
          "docs": "SVG image code",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": true,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The element name submitted to the form",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pickerLabelText",
          "type": "string",
          "mutable": true,
          "attr": "picker-label-text",
          "reflectToAttr": false,
          "docs": "The picker item text.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "showlabeltext",
          "type": "boolean",
          "mutable": true,
          "attr": "showlabeltext",
          "reflectToAttr": false,
          "docs": "If 'true', the picker label text will be shown",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": true,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "Select input value",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "claPickerBlur",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the picker loses focus.",
          "docsTags": []
        },
        {
          "event": "claPickerDeselect",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the selected picker is clicked.",
          "docsTags": []
        },
        {
          "event": "claPickerDidLoad",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the picker loads.",
          "docsTags": []
        },
        {
          "event": "claPickerFocus",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the picker has focus.",
          "docsTags": []
        },
        {
          "event": "claPickerSelect",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the picker is clicked.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "click",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Slot for icon if not using the <cla-icon>"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "cla-icon"
      ],
      "dependencyGraph": {
        "cla-picker": [
          "cla-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/cla-picker-group/cla-picker-group.tsx",
      "encapsulation": "shadow",
      "tag": "cla-picker-group",
      "readme": "# Picker Group\n\nThe Picker Group component.\n\nBuilt using the [Ionic Framework Radio / Radio Group](https://ionicframework.com/docs/api/) for reference.\n\nCurrently [`cla-picker`](../cla-picker/readme.md) and `cla-picker-group` components must be used with each other, with the pickers being\nnested in the group.\n\nWhen the `multiselectable` attribute is set to true a more than one `cla-picker` can be selected. Otherwise only a single option can be selected.\n\nSingle select `cla-picker-group`:\n```html\n<cla-picker-group multiselectable=\"false\">\n  <cla-item orientate=\"horizontal\">\n    <cla-label hidden=\"true\">Hide</cla-label>\n    <cla-picker id=\"no-card-shadow\" value=\"0\" pickername=\"card_shadow\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"35\"><g id=\"border\" fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"2\"><path d=\"M1 1h43v28H1z\"></path></g></svg>\n    </cla-picker>\n  </cla-item>\n  <cla-item orientate=\"horizontal\">\n    <cla-label hidden=\"true\">Show</cla-label>\n    <cla-picker disabled=\"true\" id=\"no-card-shadow\" value=\"1\" pickername=\"card_shadow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"35\"><g id=\"border\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M6.8 29l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zM44 26.63l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zm0-3.96l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zM6 32.15L7.85 34 6 32.15zM47.1 6L49 7.9 47.1 6z\"></path><path stroke-width=\"2\" d=\"M1 1h43v28H1z\"></path><path stroke-width=\"2\" d=\"M6 29v5h43.13V6H44\"></path></g></svg>\n    </cla-picker>\n  </cla-item>\n</cla-picker-group>\n```\n",
      "docs": "The Picker Group component.\n\nBuilt using the [Ionic Framework Radio / Radio Group](https://ionicframework.com/docs/api/) for reference.\n\nCurrently [`cla-picker`](../cla-picker/readme.md) and `cla-picker-group` components must be used with each other, with the pickers being\nnested in the group.\n\nWhen the `multiselectable` attribute is set to true a more than one `cla-picker` can be selected. Otherwise only a single option can be selected.\n\nSingle select `cla-picker-group`:\n```html\n<cla-picker-group multiselectable=\"false\">\n  <cla-item orientate=\"horizontal\">\n    <cla-label hidden=\"true\">Hide</cla-label>\n    <cla-picker id=\"no-card-shadow\" value=\"0\" pickername=\"card_shadow\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"35\"><g id=\"border\" fill=\"none\" fill-rule=\"evenodd\" stroke-width=\"2\"><path d=\"M1 1h43v28H1z\"></path></g></svg>\n    </cla-picker>\n  </cla-item>\n  <cla-item orientate=\"horizontal\">\n    <cla-label hidden=\"true\">Show</cla-label>\n    <cla-picker disabled=\"true\" id=\"no-card-shadow\" value=\"1\" pickername=\"card_shadow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"35\"><g id=\"border\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M6.8 29l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zm3.96 0l5 5-5-5zm3.96 0l5 5-5-5zm3.95 0l5 5-5-5zM44 26.63l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zm0-3.96l5 5-5-5zm0-3.95l5 5-5-5zm0-3.96l5 5-5-5zM6 32.15L7.85 34 6 32.15zM47.1 6L49 7.9 47.1 6z\"></path><path stroke-width=\"2\" d=\"M1 1h43v28H1z\"></path><path stroke-width=\"2\" d=\"M6 29v5h43.13V6H44\"></path></g></svg>\n    </cla-picker>\n  </cla-item>\n</cla-picker-group>\n```",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "multiselectable",
          "type": "boolean",
          "mutable": false,
          "attr": "multiselectable",
          "reflectToAttr": false,
          "docs": "Can more than one picker option be selected?",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [
        {
          "event": "claPickerSelect",
          "capture": false,
          "passive": false
        },
        {
          "event": "claPickerDeselect",
          "capture": false,
          "passive": false
        },
        {
          "event": "claPickerDidLoad",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-popover/cla-popover.tsx",
      "encapsulation": "shadow",
      "tag": "cla-popover",
      "readme": "# cla-popover\n\nPopover - adds a popover with a header, sub header and additonal text to any item, simply add the item you'd like to attach the popover to inside the <cla-popover> tag, (You can also add additional content to the popover using the slot name of \"footer\").\n\n## Usage\n\n```html\n<cla-popover (optional) href=\"http://link.to\" header=\"Header\" subheader=\"Sub Header\" smalltext=\"content\">\nItem attached to popover goes in here\n\n(optional) <cla-progress slot=\"footer\" progressbar=\"30\"></cla-progress>\n</cla-popover>\n```",
      "docs": "Popover - adds a popover with a header, sub header and additonal text to any item, simply add the item you'd like to attach the popover to inside the <cla-popover> tag, (You can also add additional content to the popover using the slot name of \"footer\").",
      "docsTags": [
        {
          "text": "- This is where the item the popover wraps goes",
          "name": "slot"
        },
        {
          "text": "content - Allows content to be added to the popover.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [
        {
          "event": "toggleEvent",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the menu is toggled.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "mousedown",
          "target": "window",
          "capture": false,
          "passive": true
        }
      ],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "This is where the item the popover wraps goes"
        },
        {
          "name": "content",
          "docs": "Allows content to be added to the popover."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-progress/cla-progress.tsx",
      "encapsulation": "shadow",
      "tag": "cla-progress",
      "readme": "# cla-card-progress\n\nProgress bar - Adds a progress bar anywhere to the page, simply add the progression percentage to the progressbar attribute and it will the percentage on the bar.\n\n## Usage\n\n```html\n  <cla-progress progressbar=\"30\"></cla-progress>\n```\n",
      "docs": "Progress bar - Adds a progress bar anywhere to the page, simply add the progression percentage to the progressbar attribute and it will the percentage on the bar.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "barcolour",
          "type": "string",
          "mutable": false,
          "attr": "barcolour",
          "reflectToAttr": false,
          "docs": "The colour of the progress bar - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed",
          "docsTags": [],
          "default": "\"#367fbf\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "current",
          "type": "number",
          "mutable": false,
          "attr": "current",
          "reflectToAttr": false,
          "docs": "The current value. if no minium and maximum are specified\nthe value is out of 100",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "height",
          "type": "string",
          "mutable": false,
          "attr": "height",
          "reflectToAttr": false,
          "docs": "The progress bar height",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "hideremainingprogress",
          "type": "boolean",
          "mutable": false,
          "attr": "hideremainingprogress",
          "reflectToAttr": false,
          "docs": "If 'true' the remaining progress bar is shown",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "maximum",
          "type": "number",
          "mutable": false,
          "attr": "maximum",
          "reflectToAttr": false,
          "docs": "The maximum value",
          "docsTags": [],
          "default": "100",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "minimum",
          "type": "number",
          "mutable": false,
          "attr": "minimum",
          "reflectToAttr": false,
          "docs": "The minimum value.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "percentageComplete",
          "type": "number",
          "mutable": true,
          "attr": "percentage-complete",
          "reflectToAttr": false,
          "docs": "percentage of Progress completed",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "percentageRemaining",
          "type": "number",
          "mutable": true,
          "attr": "percentage-remaining",
          "reflectToAttr": false,
          "docs": "percentage of Progress remaining",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "showprogresstext",
          "type": "boolean",
          "mutable": false,
          "attr": "showprogresstext",
          "reflectToAttr": false,
          "docs": "If 'true' the progress text is shown",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "showremainingtext",
          "type": "boolean",
          "mutable": false,
          "attr": "showremainingtext",
          "reflectToAttr": false,
          "docs": "If 'true' the remaining progress text is shown",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "showunit",
          "type": "boolean",
          "mutable": false,
          "attr": "showunit",
          "reflectToAttr": false,
          "docs": "If 'true' the progress unit is shown",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "showvalueas",
          "type": "\"percentage\" | \"unit\"",
          "mutable": false,
          "attr": "showvalueas",
          "reflectToAttr": false,
          "docs": "Show value as percentage or unit",
          "docsTags": [],
          "default": "'percentage'",
          "values": [
            {
              "value": "percentage",
              "type": "string"
            },
            {
              "value": "unit",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "unit",
          "type": "string",
          "mutable": false,
          "attr": "unit",
          "reflectToAttr": false,
          "docs": "The progress unit",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "width",
          "type": "string",
          "mutable": false,
          "attr": "width",
          "reflectToAttr": false,
          "docs": "The progress bar width (in px)",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-progress-circle/cla-progress-circle.tsx",
      "encapsulation": "shadow",
      "tag": "cla-progress-circle",
      "readme": "# cla-progress-circle\n\nProgress Circle - Displays a percentage circle with a progress bar around the outside.\n\n## Usage\n\n```html\n<cla-progress-circle primarycolor=\"#00c6b6\" size=\"small\" percentage=\"25\"></cla-progress-circle>\n```\n\n\n",
      "docs": "Progress Circle - Displays a percentage circle with a progress bar around the outside.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "customtext",
          "type": "string",
          "mutable": false,
          "attr": "customtext",
          "reflectToAttr": false,
          "docs": "Using the customtext attribute you can add text in place of the percentage number",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inverted",
          "type": "boolean",
          "mutable": false,
          "attr": "inverted",
          "reflectToAttr": false,
          "docs": "Whether to use the inverted variant of the progress circle.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "percentage",
          "type": "number",
          "mutable": false,
          "attr": "percentage",
          "reflectToAttr": false,
          "docs": "The percentage of completion of the progress circle - this automatically created from the percentage number",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "primarycolor",
          "type": "string",
          "mutable": false,
          "attr": "primarycolor",
          "reflectToAttr": false,
          "docs": "The primary color which affects the percentage bar color and the percentage text color",
          "docsTags": [],
          "default": "\"#000\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "string",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The size of the progress circle - defaults to 90px but can set to any size in px, em, rems.",
          "docsTags": [],
          "default": "\"90px\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-radio/cla-radio.tsx",
      "encapsulation": "none",
      "tag": "cla-radio",
      "readme": "# cla-radio\n\nRadio component.\n\n## Usage\n\n```html\n  <cla-radio name=\"\">\n    Content of label goes here\n  </cla-radio>\n```\n",
      "docs": "Radio component.",
      "docsTags": [
        {
          "text": "- Allows label content",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "block",
          "type": "boolean",
          "mutable": false,
          "attr": "block",
          "reflectToAttr": false,
          "docs": "Whether to use the block style variant of the radio.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "checked",
          "type": "boolean",
          "mutable": true,
          "attr": "checked",
          "reflectToAttr": false,
          "docs": "Is it Checked ?",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": true,
          "docs": "Whether the radio is disabled.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inverted",
          "type": "boolean",
          "mutable": false,
          "attr": "inverted",
          "reflectToAttr": false,
          "docs": "Whether to use the inverted variant of the radio.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "large",
          "type": "boolean",
          "mutable": false,
          "attr": "large",
          "reflectToAttr": false,
          "docs": "Whether to use the large variant of the radio.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The radio ID & name",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "any",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The radio value",
          "docsTags": [],
          "values": [
            {
              "type": "any"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "selected",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the radio is selected.",
          "docsTags": []
        },
        {
          "event": "unselected",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the radio is unselected.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows label content"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-status-indicator/cla-status-indicator.tsx",
      "encapsulation": "shadow",
      "tag": "cla-status-indicator",
      "readme": "# cla-status-indicator\n\nStatus Indicator - status indicator to display colour status or category \n\n## Usage\n\n```html\n<cla-status-indicator color=\"#00c6b6\" ></cla-status-indicator>\n```\n\n\n",
      "docs": "Status Indicator - status indicator to display colour status or category",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "badgestyle",
          "type": "boolean",
          "mutable": false,
          "attr": "badgestyle",
          "reflectToAttr": false,
          "docs": "Whether to use the badgestyle variant of the indicator - puts padding and a border around the indicator.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "color",
          "type": "string",
          "mutable": false,
          "attr": "color",
          "reflectToAttr": false,
          "docs": "The color of the status indicator - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed",
          "docsTags": [],
          "default": "\"#000\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inverted",
          "type": "boolean",
          "mutable": false,
          "attr": "inverted",
          "reflectToAttr": false,
          "docs": "Whether to use the inverted variant of the status indicator.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rtl",
          "type": "boolean",
          "mutable": false,
          "attr": "rtl",
          "reflectToAttr": false,
          "docs": "Whether to use the left to right or right to left mode in text status indicators",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "shape",
          "type": "string",
          "mutable": false,
          "attr": "shape",
          "reflectToAttr": false,
          "docs": "The shape of the status indicator - can be square or circle",
          "docsTags": [],
          "default": "\"circle\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "string",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": false,
          "docs": "The size of the status indicator - can be x-small, small, defaut or large",
          "docsTags": [],
          "default": "\"default\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "statusletter",
          "type": "string",
          "mutable": false,
          "attr": "statusletter",
          "reflectToAttr": false,
          "docs": "This allows a singlur letter to be put inside the status indicator",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-structured-list/cla-structured-list.tsx",
      "encapsulation": "shadow",
      "tag": "cla-structured-list",
      "readme": "# cla-sortable-list\n\nSortable List Item\n\n## Usage\n\n```html\n<cla-sortable-list></cla-sortable-list>\n```\n\n\n",
      "docs": "Sortable List Item",
      "docsTags": [
        {
          "text": "- Allows structured list main content",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "inverted",
          "type": "boolean",
          "mutable": false,
          "attr": "inverted",
          "reflectToAttr": false,
          "docs": "Whether to use the inverted variant of the structured list.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "rtl",
          "type": "boolean",
          "mutable": false,
          "attr": "rtl",
          "reflectToAttr": false,
          "docs": "Whether to use the left to right or right to left mode in text structured list",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "sortable",
          "type": "boolean",
          "mutable": false,
          "attr": "sortable",
          "reflectToAttr": false,
          "docs": "Whether to use the sortable variant of the structured list - adds a dragging icon on the side.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows structured list main content"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-toggle-switch/cla-toggle-switch.tsx",
      "encapsulation": "none",
      "tag": "cla-toggle-switch",
      "readme": "# cla-toggle-switch\n\nToggle switch component.\n\n## Usage\n\n```html\n<cla-toggle-switch ontext=\"On\" offtext=\"Off\" name=\"\">\n  Content of label goes here\n</cla-toggle-switch>\n```\n",
      "docs": "Toggle switch component.",
      "docsTags": [
        {
          "text": "- Allows label content",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "block",
          "type": "boolean",
          "mutable": false,
          "attr": "block",
          "reflectToAttr": false,
          "docs": "Whether to use the block style variant of the toggle.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "checked",
          "type": "boolean",
          "mutable": true,
          "attr": "checked",
          "reflectToAttr": false,
          "docs": "Is it Checked ?",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": true,
          "docs": "Whether the toggle is disabled.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inverted",
          "type": "boolean",
          "mutable": false,
          "attr": "inverted",
          "reflectToAttr": false,
          "docs": "Whether to use the inverted variant of the toggle.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "large",
          "type": "boolean",
          "mutable": false,
          "attr": "large",
          "reflectToAttr": false,
          "docs": "Whether to use the large variant of the toggle.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "The toggle ID & name",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "offtext",
          "type": "string",
          "mutable": false,
          "attr": "offtext",
          "reflectToAttr": false,
          "docs": "Off/disabled text for inside toggle switch - must be the same length or shorter than the on/enable text",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "ontext",
          "type": "string",
          "mutable": false,
          "attr": "ontext",
          "reflectToAttr": false,
          "docs": "On/Enabled text for inside toggle switch",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "value",
          "type": "0",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The toggle value",
          "docsTags": [],
          "values": [
            {
              "value": "0",
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "selected",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the toggle is selected.",
          "docsTags": []
        },
        {
          "event": "unselected",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Emitted when the toggle is unselected.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows label content"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-user-list/cla-user-list.tsx",
      "encapsulation": "shadow",
      "tag": "cla-user-list",
      "readme": "# cla-user-list\n\nUser list wrapper - adds a user list wrapper which allows for user list icons to be added inside, you can set the number of extra users if applicable as well as set a title and additional styling classes based on Bootstrap.\n\n## Usage\n\n```html\n<cla-user-list title=\"User list title\" plusnumber=\"8\" class=\"card-body pt-0\">\ncontent goes in here\n</cla-user-list>\n```\n",
      "docs": "User list wrapper - adds a user list wrapper which allows for user list icons to be added inside, you can set the number of extra users if applicable as well as set a title and additional styling classes based on Bootstrap.",
      "docsTags": [
        {
          "text": "- Allows you to add cla-user-list-items.",
          "name": "slot"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "href",
          "type": "string",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "the link for the + number button, this can be configured to take you to a list of users",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "plusnumber",
          "type": "number",
          "mutable": false,
          "attr": "plusnumber",
          "reflectToAttr": false,
          "docs": "the number of additional users not displayed in the list",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "styleclass",
          "type": "string",
          "mutable": false,
          "attr": "styleclass",
          "reflectToAttr": false,
          "docs": "Allows styling to be applied to the user-list",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "title",
          "type": "string",
          "mutable": false,
          "attr": "title",
          "reflectToAttr": false,
          "docs": "The text title of the user list (this displays at the top)",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows you to add cla-user-list-items."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-user-list-item/cla-user-list-item.tsx",
      "encapsulation": "shadow",
      "tag": "cla-user-list-item",
      "readme": "# cla-user-list-item\n\nUser list item - adds a circular profile photo list item inside the user list wrapper.\n\n## Usage\n\n```html\n  <cla-user-list-item img=\"profile-image.jpg\"></cla-user>\n```\n\n\n",
      "docs": "User list item - adds a circular profile photo list item inside the user list wrapper.",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "href",
          "type": "string",
          "mutable": false,
          "attr": "href",
          "reflectToAttr": false,
          "docs": "",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "img",
          "type": "string",
          "mutable": false,
          "attr": "img",
          "reflectToAttr": false,
          "docs": "",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/cla-wrapped-buttons/cla-card-buttons.tsx",
      "encapsulation": "shadow",
      "tag": "cla-wrapped-buttons",
      "readme": "# cla-wrapped-buttons\n\nWrapped button - slot into the bottom of a card or popover and displays two configurable buttons\n\n## Usage\n\n```html\n<cla-wrapped-buttons primarybuttontext=\"Primary Button\" secondarybuttonclass=\"btn-primary\" primarybuttonhref=\"/link\" secondarybuttontext=\"Secondary Button\" secondarybuttonclass=\"btn-link\" secondarybuttonhref=\"/link\"></cla-wrapped-buttons>\n```\n\nYou can add the appropriate styling for use with cards and popovers using the following classes in the styleclass attribute:\n.card-padding\n.popover-padding\n\n",
      "docs": "Wrapped button - slot into the bottom of a card or popover and displays two configurable buttons",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "primarybuttonclass",
          "type": "string",
          "mutable": false,
          "attr": "primarybuttonclass",
          "reflectToAttr": false,
          "docs": "Left/Primary button styling class - use bootstrap btn classes to style the button",
          "docsTags": [],
          "default": "'btn-primary'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "primarybuttonhref",
          "type": "string",
          "mutable": false,
          "attr": "primarybuttonhref",
          "reflectToAttr": false,
          "docs": "Left/Primary button href - links to page",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "primarybuttontext",
          "type": "string",
          "mutable": false,
          "attr": "primarybuttontext",
          "reflectToAttr": false,
          "docs": "Left/Primary button text",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "secondarybuttonclass",
          "type": "string",
          "mutable": false,
          "attr": "secondarybuttonclass",
          "reflectToAttr": false,
          "docs": "Right/Secondary button styling class - use bootstrap btn classes to style the button",
          "docsTags": [],
          "default": "\"btn-secondary\"",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "secondarybuttonhref",
          "type": "string",
          "mutable": false,
          "attr": "secondarybuttonhref",
          "reflectToAttr": false,
          "docs": "Right/Secondary button href - links to page",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "secondarybuttontext",
          "type": "string",
          "mutable": false,
          "attr": "secondarybuttontext",
          "reflectToAttr": false,
          "docs": "Right/Secondary button text",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "styleclass",
          "type": "string",
          "mutable": false,
          "attr": "styleclass",
          "reflectToAttr": false,
          "docs": "Button wrapper styling",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    }
  ]
}