@claromentis/design-system

{ "timestamp": "2025-05-20T10:19:27", "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": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/cla-banner/cla-banner.tsx", "encapsulation": "shadow", "tag": "cla-banner", "readme": "# cla-banner\n\nBase banner component.\n\n## Usage\n\n```html\n<cla-banner> </cla-banner>\n```\n", "docs": "Base banner component.", "docsTags": [ { "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\n<cla-button>Default</cla-button>\n\n\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\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\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\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\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": [], "dependencies": [], "dependencyGraph": {} }, { "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://uxwing.com/wp-content/themes/uxwing/download/sport-and-awards/trophy-icon.png\"></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\"></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/8348/8348232.png\"></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\" alt=\"trophy\" source=\"https://cdn-icons-png.flaticon.com/512/8348/8348232.png\"></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-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>" }, "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-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": "window", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "Allows menu items to be added to the dropdown menu." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/cla-nav/cla-nav.tsx", "encapsulation": "shadow", "tag": "cla-nav", "readme": "# cla-nav\n\nNavigation wrapper\n\n## Usage\n\n```html\n<cla-nav>\n\n</cla-nav>\n```\n", "docs": "Navigation wrapper", "docsTags": [ { "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