{
  "timestamp": "2026-07-06T09:40:33",
  "compiler": {
    "name": "@stencil/core",
    "version": "2.22.3",
    "typescriptVersion": "4.9.4"
  },
  "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",
      "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": [
        {
          "name": "slot",
          "text": "- Allows badge content to be added"
        }
      ],
      "usage": {
        "example": "<cla-badge slot=\"status\" styleclass=\"badge badge-pill badge-gold\"><ion-icon size=\"large\" class=\"mr-1\" name=\"trophy-outline\"></ion-icon>Congratulations</cla-badge>"
      },
      "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": [
        "cla-likes-modal"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "cla-likes-modal": [
          "cla-badge"
        ]
      }
    },
    {
      "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": [
        {
          "name": "slot",
          "text": "- Content of the banner"
        }
      ],
      "usage": {
        "example": "<cla-banner position=\"top\" ><div class=\"p-3\">This is an example banner</div></cla-banner>"
      },
      "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": "# cla-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": [
        {
          "name": "slot",
          "text": "- Content placed inside the button."
        }
      ],
      "usage": {
        "example": "<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"
      },
      "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": [
        "cla-likes-modal"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "cla-likes-modal": [
          "cla-button"
        ]
      }
    },
    {
      "filePath": "./src/components/cla-card/cla-card.tsx",
      "encapsulation": "shadow",
      "tag": "cla-card",
      "readme": "# cla-card\n\nCard component which is designed to work with a range of custom components.\n\nStandard HTML elements can be nested as well and will appear in the card body.\n\nYou can truncate the text in the title or text using the `.truncate-title` and/or `.truncate-text` style classes.\n\n## Usage\n\n```html\n  <cla-card href=\"/cardlink?1\"></cla-card>\n```\n",
      "docs": "Card component which is designed to work with a range of custom components.\n\nStandard HTML elements can be nested as well and will appear in the card body.\n\nYou can truncate the text in the title or text using the `.truncate-title` and/or `.truncate-text` style classes.",
      "docsTags": [
        {
          "name": "slot",
          "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."
        }
      ],
      "usage": {
        "example": "<cla-card href=\"https://design.claromentis.net\" statusborder=\"var(--green-500)\">\n  <h1>A Card Title</h1>\n  <p>Generic card text</p>\n</cla-card>\n"
      },
      "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\nThis component slots inside the [`cla-card-media`](../cla-card-media/readme.md) component and allows an svg or icon to be displayed centrally inside.\n\n## Usage\n\n```html\n<cla-card-figure>content goes in here</cla-card-figure>\n```\n",
      "docs": "This component slots inside the [`cla-card-media`](../cla-card-media/readme.md) component and allows an svg or icon to be displayed centrally inside.",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Holds the cla-insignia in place."
        }
      ],
      "usage": {
        "example": "<cla-card>\n  <cla-card-media slot=\"card-top\">\n    <cla-card-figure>\n      <cla-insignia colour=\"#c82333\" size=\"x-small\" width=\"110\" shape=\"hexagon\" type=\"outline\">\n        <cla-insignia-image size=\"x-small\" source=\"https://cdn-icons-png.flaticon.com/512/2784/2784439.png\" alt=\"trophy illustration\"></cla-insignia-image>\n      </cla-insignia>\n    </cla-card-figure>\n  </cla-card-media>\n  <div>Generic card text</div>\n</cla-card>"
      },
      "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 - DEPRECATED\n\nThis component is deprecated.\n\n",
      "docs": "This component is deprecated.",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Card footer content goes in here."
        }
      ],
      "usage": {
        "example": "<cla-card>\n  <h1>A Card Title</h1>\n  <p>Generic card text</p>\n  <cla-footer slot=\"footer\">\n    <p>Footer content</p>\n  </cla-footer>\n</cla-card>"
      },
      "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 [`cla-card`](../cla-card/readme.md) component and displays a grey header\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 [`cla-card`](../cla-card/readme.md) component and displays a grey header",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Card header content goes in here."
        }
      ],
      "usage": {
        "example": "<cla-card>\n  <cla-card-header slot=\"card-top\">\n    <h1>A Card Title</h1>\n  </cla-card-header>\n  <div>Generic card text</div>\n</cla-card>"
      },
      "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 [`cla-card-media`](../cla-card-media/readme.md) 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 [`cla-card-media`](../cla-card-media/readme.md) component and displays an image or placeholder icon.",
      "docsTags": [],
      "usage": {
        "example": "<cla-card>\n  <cla-card-media slot=\"card-top\">\n    <cla-card-image img=\"https://images.unsplash.com/photo-1730825447957-028c9e2efeba?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" alt=\"sky with a dark, wispy cloud\"></cla-card-image>\n  </cla-card-media>\n  <div>Generic card text</div>\n</cla-card>"
      },
      "props": [
        {
          "name": "alt",
          "type": "string",
          "mutable": false,
          "attr": "alt",
          "reflectToAttr": false,
          "docs": "The image alternative text.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "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  component or the  component as well as a slot for text or a status badge in the top left.\n\nThis component is designed to slot into the top section of a card. It can hold either the [`cla-card-image`](../cla-card-image/readme.md) component or the [`cla-card-figure`](../cla-card-figure/readme.md) component. \nAdditionally, it includes a dedicated slot for placing text or a [`cla-badge`](../cla-badge/readme.md) in the top-left corner.\n\nYou can remove the media underline using the `.no-border` styleclass.\n\n## Usage\n\n```html\n<cla-card-media slot=\"media\">\ncontent goes in here\n</cla-card-media>\n```\n",
      "docs": "Card media - slot into the top of the card and holds the  component or the  component as well as a slot for text or a status badge in the top left.\n\nThis component is designed to slot into the top section of a card. It can hold either the [`cla-card-image`](../cla-card-image/readme.md) component or the [`cla-card-figure`](../cla-card-figure/readme.md) component. \nAdditionally, it includes a dedicated slot for placing text or a [`cla-badge`](../cla-badge/readme.md) in the top-left corner.\n\nYou can remove the media underline using the `.no-border` styleclass.",
      "docsTags": [
        {
          "name": "slot",
          "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"
        }
      ],
      "usage": {
        "example": "<cla-card>\n  <cla-card-media bgcolor=\"var(--indigo-800)\" iconcolor=\"var(--gray-100)\" placeholder=\"invert-mode-outline\" slot=\"card-top\">\n    <cla-badge slot=\"status\" styleclass=\"badge badge-pill badge-gold\"><ion-icon class=\"mr-1\" name=\"trophy-outline\"></ion-icon>Congratulations</cla-badge>  \n  </cla-card-media>\n  <div>Generic card text</div>\n</cla-card>"
      },
      "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": [
        {
          "name": "slot",
          "text": "- Allows label content"
        }
      ],
      "usage": {
        "example": "<cla-checkbox name=\"default-block\" block=\"\" large=\"true\" value=\"1\" name=\"one\">Default block checkbox</cla-checkbox>"
      },
      "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\nDEPRECATED - Glyphicon 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": "DEPRECATED - 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\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\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",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Holds the cla-insignia-image"
        }
      ],
      "usage": {
        "example": "<div class=\"w-50\">\n  <cla-insignia colour=\"#c82333\" size=\"x-small\" shape=\"hexagon\" type=\"outline\">\n        <cla-insignia-image size=\"x-small\" source=\"https://cdn-icons-png.flaticon.com/512/2784/2784439.png\" alt=\"trophy illustration\"></cla-insignia-image>\n  </cla-insignia>\n</div>"
      },
      "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\nIn order to use with an image please use the `cla-insignia-image` component\n",
      "docs": "In order to use with an image please use the `cla-insignia-image` component",
      "docsTags": [],
      "usage": {
        "example": "<div class=\"w-50\">\n  <cla-insignia colour=\"#c82333\" size=\"x-small\" shape=\"hexagon\" type=\"outline\">\n        <cla-insignia-image size=\"x-small\" source=\"https://cdn-icons-png.flaticon.com/512/2784/2784439.png\" alt=\"trophy illustration\"></cla-insignia-image>\n  </cla-insignia>\n</div>"
      },
      "props": [
        {
          "name": "alt",
          "type": "string",
          "mutable": false,
          "attr": "alt",
          "reflectToAttr": false,
          "docs": "The image alternative text.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "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",
      "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.",
      "docsTags": [],
      "usage": {
        "example": "<cla-picker-group multiselectable=\"false\">\n  <cla-item>\n    <cla-label hidden=\"true\">Calendar</cla-label>\n    <cla-picker name=\"calendar\" value=\"0\" checked=\"true\">\n      <ion-icon size=\"large\" name=\"calendar-outline\"></ion-icon>\n    </cla-picker>\n  </cla-item>\n</cla-picker-group>"
      },
      "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\nAn element that can be used with [`cla-picker`](../cla-picker/readme.md), [`cla-checkbox`](../cla-checkbox/readme.md), and other form elements.\n\nIn order for the label and inputs to be labelled together correctly both elements should be wrapped in a [`cla-label`](../cla-label/readme.md) component.\n",
      "docs": "An element that can be used with [`cla-picker`](../cla-picker/readme.md), [`cla-checkbox`](../cla-checkbox/readme.md), and other form elements.\n\nIn order for the label and inputs to be labelled together correctly both elements should be wrapped in a [`cla-label`](../cla-label/readme.md) component.",
      "docsTags": [],
      "usage": {
        "example": "<cla-item> \n  <cla-label hidden=\"true\">Calendar</cla-label> \n  <cla-picker name=\"calendar\" value=\"0\" checked=\"true\"></cla-picker>\n</cla-item>"
      },
      "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-likes-modal/cla-likes-modal.tsx",
      "encapsulation": "none",
      "tag": "cla-likes-modal",
      "readme": "# cla-likes-modal\n\nThe Likes Modal is an element used to display the \"likes\" for a particular object. The component presents the likes in a paginated format.\n\n```html\n<cla-likes-modal object-id=\"1\" object-type=\"1\" total=\"0\"></cla-likes-modal>\n```\n",
      "docs": "Likes Modal\n\nUsed to retrieve the likes for an object and display the likes using pagination",
      "docsTags": [],
      "usage": {
        "example": "<cla-likes-modal object_type=\"1\" object_id=\"1\"></cla-likes-modal>\n"
      },
      "props": [
        {
          "name": "objectId",
          "type": "string",
          "mutable": false,
          "attr": "object-id",
          "reflectToAttr": false,
          "docs": "The ID of the object that the component should retrieve likes for.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "objectType",
          "type": "string",
          "mutable": false,
          "attr": "object-type",
          "reflectToAttr": false,
          "docs": "The type of object that the component should retrieve likes for.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "total",
          "type": "number",
          "mutable": false,
          "attr": "total",
          "reflectToAttr": false,
          "docs": "This is used to update the `totalLikes` state.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "cla-badge",
        "cla-button",
        "ion-icon"
      ],
      "dependencyGraph": {
        "cla-likes-modal": [
          "cla-badge",
          "cla-button",
          "ion-icon"
        ]
      }
    },
    {
      "filePath": "./src/components/cla-menu/cla-menu.tsx",
      "encapsulation": "shadow",
      "tag": "cla-menu",
      "readme": "# cla-menu\n\nDropdown menu element. Adds a dropdown menu anywhere you'd like on the page. Links can be slotted inside this component: you can add this to the a card using the `menu` slot.\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 element. Adds a dropdown menu anywhere you'd like on the page. Links can be slotted inside this component: you can add this to the a card using the `menu` slot.",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Allows menu items to be added to the dropdown menu."
        }
      ],
      "usage": {
        "example": "<cla-card styleclass=\"rounded-corners\">\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  <h5 class=\"card-title truncate-text\">Lorem ipsum dolo Integer quam nunc, consequat nec</h5>\n</cla-card>"
      },
      "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": "document",
          "capture": false,
          "passive": false
        }
      ],
      "styles": [],
      "slots": [
        {
          "name": "",
          "docs": "Allows menu items to be added to the dropdown menu."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "ion-icon"
      ],
      "dependencyGraph": {
        "cla-menu": [
          "ion-icon"
        ]
      }
    },
    {
      "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": [
        {
          "name": "slot",
          "text": "- Wrapper for nav items"
        }
      ],
      "usage": {
        "example": "<cla-nav inline=\"true\">\n  <cla-nav-item size=\"small\">item 1</cla-nav-item>\n  <cla-nav-item size=\"small\">item 2</cla-nav-item>\n  <cla-nav-item size=\"small\" active>item 3</cla-nav-item>\n</cla-nav>"
      },
      "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<cla-nav-item><a href=\"#0\">Nav Item</a></cla-nav-item>\n```\n",
      "docs": "Navigation item",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Link or title content"
        }
      ],
      "usage": {
        "example": "<cla-nav-item><a href=\"#0\">Nav Item</a></cla-nav-item>"
      },
      "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": "# cla-picker\n\nThe Picker component.\n\nBuilt using the [Ionic Framework Radio / Radio Group](https://ionicframework.com/docs/api/) for reference.\n\nThe `cla-picker` and `cla-picker-group` components must be used with each other, with the buttons being\nnested in the group.\n",
      "docs": "The Picker component.\n\nBuilt using the [Ionic Framework Radio / Radio Group](https://ionicframework.com/docs/api/) for reference.\n\nThe `cla-picker` and `cla-picker-group` components must be used with each other, with the buttons being\nnested in the group.",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Slot for icon if not using the `<cla-icon>`"
        }
      ],
      "usage": {
        "example": "<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\">\n      <ion-icon size=\"large\" name=\"eye-off-outline\"></ion-icon>\n    </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        <ion-icon size=\"large\" name=\"eye-outline\"></ion-icon>\n    </cla-picker>\n  </cla-item>\n</cla-picker-group>"
      },
      "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": "# cla-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\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.",
      "docsTags": [],
      "usage": {
        "example": "<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 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>"
      },
      "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 element. Adds a popover to any item. Simply add the item you'd like to attach the popover to inside the `<cla-popover>` tag.\n\nYou can also add additional content to the popover using the `footer` slot.\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 element. Adds a popover to any item. Simply add the item you'd like to attach the popover to inside the `<cla-popover>` tag.\n\nYou can also add additional content to the popover using the `footer` slot.",
      "docsTags": [
        {
          "name": "slot",
          "text": "- This is where the item the popover wraps goes"
        },
        {
          "name": "slot",
          "text": "content - Allows content to be added to the popover."
        }
      ],
      "usage": {
        "example": "<cla-popover> \n  <cla-button color=\"primary\">Open Popover</cla-button>\n  <div slot=\"content\"> \n    <h3>Lorem Ipsum Dolor Sit</h3> \n    <p>Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit Sed</p>\n  </div>\n</cla-popover>"
      },
      "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": {
        "example": "<cla-progress current=\"30\" maximum=\"100\" showprogresstext=\"\"></cla-progress>"
      },
      "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": "\"hsl(211.2, 58.9%, 42.9%)\"",
          "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": {
        "example": "<cla-progress-circle primarycolor=\"red\" size=\"100px\" percentage=\"25\"></cla-progress-circle>"
      },
      "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": [
        {
          "name": "slot",
          "text": "- Allows label content"
        }
      ],
      "usage": {
        "example": "<cla-radio name=\"small\" value=\"1\">Radio 1</cla-radio>\n<cla-radio name=\"small\" large=\"true\" value=\"2\">Radio 2</cla-radio>\n<cla-radio name=\"small\" disabled=\"true\" value=\"3\">Radio 3</cla-radio>"
      },
      "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": {
        "example": "<cla-status-indicator color=\"blue\" statusletter=\"B\"></cla-status-indicator>"
      },
      "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\nNOT WORKING - Sortable List Item\n\n## Usage\n\n```html\n<cla-sortable-list></cla-sortable-list>\n```\n\n\n",
      "docs": "NOT WORKING - Sortable List Item",
      "docsTags": [
        {
          "name": "slot",
          "text": "- Allows structured list main content"
        }
      ],
      "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": [
        {
          "name": "slot",
          "text": "- Allows label content"
        }
      ],
      "usage": {
        "example": "<cla-toggle-switch>Toggle switch</cla-toggle-switch>\n<cla-toggle-switch large ontext=\"On\" offtext=\"Off\" name=\"large\">Large toggle switch with text inside</cla-toggle-switch>"
      },
      "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": [
        {
          "name": "slot",
          "text": "- Allows you to add cla-user-list-items."
        }
      ],
      "usage": {
        "example": "<cla-user-list plusnumber=\"8\" href=\"link.to\">\n  <cla-user-list-item href=\"link.to/person\" img=\"https://pixel.nymag.com/imgs/daily/vulture/2018/11/02/02-avatar-2.w700.h700.jpg\"></cla-user-list-item>\n  <cla-user-list-item href=\"link.to/anotherperson\" img=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7-Kj66ORNPzrqjXFAm0wL1d06XE6jdFd6FdtTchtkU7CWoCij\"></cla-user-list-item>\n  <cla-user-list-item img=\"https://i.pravatar.cc/500\"></cla-user-list-item>\n</cla-user-list>"
      },
      "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": {
        "example": "<cla-user-list plusnumber=\"8\" href=\"link.to\">\n  <cla-user-list-item href=\"link.to/person\" img=\"https://pixel.nymag.com/imgs/daily/vulture/2018/11/02/02-avatar-2.w700.h700.jpg\"></cla-user-list-item>\n  <cla-user-list-item href=\"link.to/anotherperson\" img=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7-Kj66ORNPzrqjXFAm0wL1d06XE6jdFd6FdtTchtkU7CWoCij\"></cla-user-list-item>\n  <cla-user-list-item img=\"https://i.pravatar.cc/500\"></cla-user-list-item>\n</cla-user-list>"
      },
      "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": {
        "example": "<cla-card>\n  <cla-wrapped-buttons \n    primarybuttonclass=\"btn-success\" \n    primarybuttonhref=\"/\" \n    primarybuttontext=\"Success\"\n    secondarybuttonclass=\"btn-info\" \n    secondarybuttonhref=\"/\" \n    secondarybuttontext=\"Info\">\n  </cla-wrapped-buttons>\n</cla-card>"
      },
      "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": {}
    }
  ]
}