@claromentis/design-system
Version:
Claromentis Design System Component Library
3,207 lines • 105 kB
JSON
{
"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": {}
}
]
}