Optional URL for external links (href attribute)
\n", "line": 25, "rawdescription": "\n\nOptional URL for external links (href attribute)\n" }, { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "Display text for the breadcrumb item
\n", "line": 20, "rawdescription": "\n\nDisplay text for the breadcrumb item\n" }, { "name": "routerLink", "deprecated": false, "deprecationMessage": "", "type": "string | any[]", "indexKey": "", "optional": true, "description": "Optional URL for internal navigation (routerLink)
\n", "line": 35, "rawdescription": "\n\nOptional URL for internal navigation (routerLink)\n" }, { "name": "target", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "Optional target attribute for external links
\n", "line": 30, "rawdescription": "\n\nOptional target attribute for external links\n" } ], "indexSignatures": [], "kind": 171, "description": "Interface for a breadcrumb item
\n", "rawdescription": "\n\nInterface for a breadcrumb item\n", "methods": [], "extends": [] }, { "name": "CircleAttributes", "id": "interface-CircleAttributes-111257142ba906a37eff43d87b39b1bf122c8a2ebfff3688afcd58c3fb7ef99a40b26aac0370abfdf12b3342a507f739d20bc133b8dcbea55976f21c4238e9f5", "file": "src/lib/components/feedback/circular-progress/utils/get-circle-attributes.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "radius", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 6 }, { "name": "size", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 4 }, { "name": "strokeWidth", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 5 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "Coords", "id": "interface-Coords-0fdbe28f910f72f7fa3c3eacb532345f4eb9a8d6ca5fd895c03109a809f133fd1f0d6346641042298058f8e31a936e7a3a0d8ca5845cb9b9daf1da679228e1d8", "file": "src/lib/components/overlays/popper/components/floating-arrow/floating-arrow.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "x", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "", "line": 17 }, { "name": "y", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "", "line": 18 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "CustomTouchEvent", "id": "interface-CustomTouchEvent-33992f53964ea88709f6396f8b608ff79aa20eb7b9dbfc6b2df81df3bd664ea0b8e9d22ff63f139f8539800fb01cc205afbf8f0c4f5f4b64bb319392e85284e5", "file": "src/lib/components/utils/touch/touch.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "changedTouches", "deprecated": false, "deprecationMessage": "", "type": "TouchList", "indexKey": "", "optional": true, "description": "", "line": 47 }, { "name": "touches", "deprecated": false, "deprecationMessage": "", "type": "TouchList", "indexKey": "", "optional": true, "description": "", "line": 46 } ], "indexSignatures": [], "kind": 171, "description": "Custom touch event type combining MouseEvent and TouchEvent properties
\n", "rawdescription": "\n\nCustom touch event type combining MouseEvent and TouchEvent properties\n", "methods": [], "extends": [ "MouseEvent" ] }, { "name": "Gesture", "id": "interface-Gesture-33992f53964ea88709f6396f8b608ff79aa20eb7b9dbfc6b2df81df3bd664ea0b8e9d22ff63f139f8539800fb01cc205afbf8f0c4f5f4b64bb319392e85284e5", "file": "src/lib/components/utils/touch/touch.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "clientX", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 34 }, { "name": "clientY", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 35 }, { "name": "duration", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 27 }, { "name": "isPressed", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 28 }, { "name": "isSlide", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 33 }, { "name": "isSlideX", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 31 }, { "name": "isSlideY", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 32 }, { "name": "isX", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 30 }, { "name": "isY", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 29 }, { "name": "shiftX", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 36 }, { "name": "shiftXAbs", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 38 }, { "name": "shiftY", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 37 }, { "name": "shiftYAbs", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 39 }, { "name": "startT", "deprecated": false, "deprecationMessage": "", "type": "Date", "indexKey": "", "optional": false, "description": "", "line": 26 }, { "name": "startX", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 24 }, { "name": "startY", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 25 } ], "indexSignatures": [], "kind": 171, "description": "Interface for a touch/gesture event
\n", "rawdescription": "\n\nInterface for a touch/gesture event\n", "methods": [], "extends": [] }, { "name": "ModalSnapPoint", "id": "interface-ModalSnapPoint-ce17a43d68f88f4b6afb5e858a419775e8e7bc6f272b6e329db8b32a547f998334d91f423eb83cd726ec84962594bd155e51e283a500a55d067a564377082ee9", "file": "src/lib/components/overlays/modal/modal.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "headerHeight", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "", "line": 31 }, { "name": "height", "deprecated": false, "deprecationMessage": "", "type": "number | string", "indexKey": "", "optional": false, "description": "", "line": 30 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "PaginationItem", "id": "interface-PaginationItem-ef71835b3ce837124bec37f1c2b74d68b5918ed82da271fa323d4a7664e0ea9f526c75aa1941a4d1f1e3bf3454574276c8f0a0991c7f6bd7499d09954a133a8d", "file": "src/lib/components/navigation/pagination/hooks/pagination.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "aria-current", "deprecated": false, "deprecationMessage": "", "type": "\"true\" | undefined", "indexKey": "", "optional": true, "description": "ARIA current attribute
\n", "line": 40, "rawdescription": "\nARIA current attribute" }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "Whether this item is disabled
\n", "line": 38, "rawdescription": "\nWhether this item is disabled" }, { "name": "onClick", "deprecated": false, "deprecationMessage": "", "type": "function", "indexKey": "", "optional": false, "description": "Handler for when the item is clicked
\n", "line": 30, "rawdescription": "\nHandler for when the item is clicked" }, { "name": "page", "deprecated": false, "deprecationMessage": "", "type": "number | null", "indexKey": "", "optional": false, "description": "Page number, or null for special items like ellipsis
\n", "line": 34, "rawdescription": "\nPage number, or null for special items like ellipsis" }, { "name": "selected", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "Whether this item is currently selected
\n", "line": 36, "rawdescription": "\nWhether this item is currently selected" }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "PaginationType", "indexKey": "", "optional": false, "description": "Type of pagination item
\n", "line": 32, "rawdescription": "\nType of pagination item" } ], "indexSignatures": [], "kind": 171, "description": "Represents a single item in the pagination control
\n", "rawdescription": "\n\nRepresents a single item in the pagination control\n", "methods": [], "extends": [] }, { "name": "PaginationProps", "id": "interface-PaginationProps-ef71835b3ce837124bec37f1c2b74d68b5918ed82da271fa323d4a7664e0ea9f526c75aa1941a4d1f1e3bf3454574276c8f0a0991c7f6bd7499d09954a133a8d", "file": "src/lib/components/navigation/pagination/hooks/pagination.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "boundaryCount", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "Number of always visible pages at the beginning and end.
\n", "line": 8, "rawdescription": "\nNumber of always visible pages at the beginning and end." }, { "name": "count", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "The total number of pages.
\n", "line": 10, "rawdescription": "\nThe total number of pages." }, { "name": "defaultPage", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "The page selected by default when the component is uncontrolled
\n", "line": 12, "rawdescription": "\nThe page selected by default when the component is uncontrolled" }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": true, "description": "Controls whether the Pagination component is interactive.
\n", "line": 22, "rawdescription": "\nControls whether the Pagination component is interactive." }, { "name": "hideNextButton", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": true, "description": "If true, hide the next-page button.
If true, hide the previous-page button.
The current page.
\n", "line": 18, "rawdescription": "\nThe current page." }, { "name": "siblingCount", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "Number of always visible pages before and after the current page.
\n", "line": 20, "rawdescription": "\nNumber of always visible pages before and after the current page." } ], "indexSignatures": [], "kind": 171, "description": "Properties for the pagination component
\n", "rawdescription": "\n\nProperties for the pagination component\n", "methods": [], "extends": [] }, { "name": "PopperProps", "id": "interface-PopperProps-b5140ef5f1427c61deeabde31aaa7b539b9a388b9455919efc9d9a8ee6342eb49678bc457c2f96573e78df4fbf1faa34667cbbbbe81558d5aa495b6a1ff32859", "file": "src/lib/components/overlays/popper/popper.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "arrowProps", "deprecated": false, "deprecationMessage": "", "type": "literal type", "indexKey": "", "optional": true, "description": "Configuration and customization options for the floating arrow component.
\n", "line": 36, "rawdescription": "\nConfiguration and customization options for the floating arrow component." }, { "name": "autoUpdateOnTargetResize", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": true, "description": "Opt-in feature to automatically update Popper's position when the target element resizes.
\n", "line": 47, "rawdescription": "\nOpt-in feature to automatically update Popper's position when the target element resizes." }, { "name": "targetRef", "deprecated": false, "deprecationMessage": "", "type": "HTMLElement | VirtualElement | null", "indexKey": "", "optional": false, "description": "Reference to the target element or virtual element for precise positioning.
\n", "line": 34, "rawdescription": "\nReference to the target element or virtual element for precise positioning." } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [ "Omit" ] }, { "name": "RatingProps", "id": "interface-RatingProps-617bb3e86d6feaf4b05b9cdfacf0975a71a59d21f82643b2f938810cf8bcdbc0993297f78083d353bc08e822230279aebf1325fde4a6dd072180029d8a0b1d46", "file": "src/lib/components/form/rating/rating.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "max", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "The maximum rating value, representing the number of icons displayed.
\n", "line": 22, "rawdescription": "\nThe maximum rating value, representing the number of icons displayed." }, { "name": "onChange", "deprecated": false, "deprecationMessage": "", "type": "function", "indexKey": "", "optional": true, "description": "Callback function invoked when the rating value changes.
\n", "line": 26, "rawdescription": "\nCallback function invoked when the rating value changes." }, { "name": "precision", "deprecated": false, "deprecationMessage": "", "type": "\"0.1\" | \"0.2\" | \"0.25\" | \"0.5\" | \"1\"", "indexKey": "", "optional": true, "description": "The precision of the rating, determining the fraction of the star that can be selected.
\n", "line": 20, "rawdescription": "\nThe precision of the rating, determining the fraction of the star that can be selected." }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "The current value of the rating.
\n", "line": 24, "rawdescription": "\nThe current value of the rating." } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "RippleDemoProps", "id": "interface-RippleDemoProps-92a37df8e9c14fbd34d7617e18aa28ec429b2ff5fd9ce0905dbe7761878559db8ea99f96bcc791325dd38de96e7e6c7960891e650604082cb23d4640bf71d41a", "file": "src/lib/components/utils/tappable/components/ripple/story/ripple.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "addRipple", "deprecated": false, "deprecationMessage": "", "type": "function", "indexKey": "", "optional": false, "description": "", "line": 23 }, { "name": "waves", "deprecated": false, "deprecationMessage": "", "type": "RippleWave[]", "indexKey": "", "optional": false, "description": "", "line": 22 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "RippleWave", "id": "interface-RippleWave-072eb3a2b70426697635905fda5669fcb5b80ac3632a0c2319dffe16e438669bd01437fa0dd0bbf8c6e6c918b25cae86d804420e44a203cbef67021e0500c12d", "file": "src/lib/services/ripple.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "date", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 6 }, { "name": "pointerId", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 7 }, { "name": "x", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 4 }, { "name": "y", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 5 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "SegmentedOption", "id": "interface-SegmentedOption-17e70d589c24ec9d632c1d7c89bb8b57e3358aa3825a2582592127a53345f5d1d22745d098384541ede0467e05c6e59ab792a1ec0283f55096eb6e2ab972c8b7", "file": "src/lib/components/navigation/segmented-control/story/segmented-control.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 7 }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 8 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "SnackbarOptions", "id": "interface-SnackbarOptions-2a20d978267bb289c6220003d77ae8df36d68322181135054276cd98e1f24604f2efde0533787e0a575d4903ddfd22dde46b0fc335344403a5a8cb3bcfa619db", "file": "src/lib/components/feedback/snackbar/snackbar.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "afterTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRefAria label for accessibility
\n", "line": 20, "rawdescription": "\n\nAria label for accessibility\n" }, { "name": "autoFocus", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": true, "description": "Whether the element should get focus on load
\n", "line": 65, "rawdescription": "\n\nWhether the element should get focus on load\n" }, { "name": "class", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "CSS class to apply to the icon
\n", "line": 10, "rawdescription": "\n\nCSS class to apply to the icon\n" }, { "name": "fill", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "Fill color of the icon
\n", "line": 35, "rawdescription": "\n\nFill color of the icon\n" }, { "name": "height", "deprecated": false, "deprecationMessage": "", "type": "string | number", "indexKey": "", "optional": true, "description": "Height of the icon (can be CSS units or number)
\n", "line": 50, "rawdescription": "\n\nHeight of the icon (can be CSS units or number)\n" }, { "name": "id", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "ID of the element
\n", "line": 30, "rawdescription": "\n\nID of the element\n" }, { "name": "onBlur", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterBlur event handler
\n", "line": 80, "rawdescription": "\n\nBlur event handler\n" }, { "name": "onClick", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterClick event handler
\n", "line": 70, "rawdescription": "\n\nClick event handler\n" }, { "name": "onFocus", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterFocus event handler
\n", "line": 75, "rawdescription": "\n\nFocus event handler\n" }, { "name": "onKeyDown", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterKey down event handler
\n", "line": 95, "rawdescription": "\n\nKey down event handler\n" }, { "name": "onMouseEnter", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterMouse enter event handler
\n", "line": 85, "rawdescription": "\n\nMouse enter event handler\n" }, { "name": "onMouseLeave", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterMouse leave event handler
\n", "line": 90, "rawdescription": "\n\nMouse leave event handler\n" }, { "name": "onPointerDown", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterPointer down event handler
\n", "line": 100, "rawdescription": "\n\nPointer down event handler\n" }, { "name": "onPointerUp", "deprecated": false, "deprecationMessage": "", "type": "EventEmitterPointer up event handler
\n", "line": 105, "rawdescription": "\n\nPointer up event handler\n" }, { "name": "role", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "Role attribute for accessibility
\n", "line": 55, "rawdescription": "\n\nRole attribute for accessibility\n" }, { "name": "stroke", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "Stroke color of the icon
\n", "line": 40, "rawdescription": "\n\nStroke color of the icon\n" }, { "name": "style", "deprecated": false, "deprecationMessage": "", "type": "literal type", "indexKey": "", "optional": true, "description": "Additional styles to apply to the icon
\n", "line": 15, "rawdescription": "\n\nAdditional styles to apply to the icon\n" }, { "name": "tabIndex", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "Tab index for keyboard navigation
\n", "line": 60, "rawdescription": "\n\nTab index for keyboard navigation\n" }, { "name": "title", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "Title for the icon
\n", "line": 25, "rawdescription": "\n\nTitle for the icon\n" }, { "name": "width", "deprecated": false, "deprecationMessage": "", "type": "string | number", "indexKey": "", "optional": true, "description": "Width of the icon (can be CSS units or number)
\n", "line": 45, "rawdescription": "\n\nWidth of the icon (can be CSS units or number)\n" } ], "indexSignatures": [], "kind": 171, "description": "Base interface for icon components, compatible with React version
\n", "rawdescription": "\n\nBase interface for icon components, compatible with React version\n", "methods": [], "extends": [] }, { "name": "ThemeParams", "id": "interface-ThemeParams-4a35d0b3e5bdba44255514b6efd6f4e4a95f51133949220fc5f70e5296eea4d62c0aaa822cd2417d8f6c6dc7090fab75ad4e7d830593cb78313261b2ac774be4", "file": "src/lib/services/telegram.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "accent_text_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 14 }, { "name": "bg_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 6 }, { "name": "button_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 10 }, { "name": "button_text_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 11 }, { "name": "destructive_text_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 18 }, { "name": "header_bg_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 13 }, { "name": "hint_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 8 }, { "name": "link_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 9 }, { "name": "secondary_bg_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 12 }, { "name": "section_bg_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 15 }, { "name": "section_header_text_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 16 }, { "name": "subtitle_text_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 17 }, { "name": "text_color", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": true, "description": "", "line": 7 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "TouchEvent", "id": "interface-TouchEvent-33992f53964ea88709f6396f8b608ff79aa20eb7b9dbfc6b2df81df3bd664ea0b8e9d22ff63f139f8539800fb01cc205afbf8f0c4f5f4b64bb319392e85284e5", "file": "src/lib/components/utils/touch/touch.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "originalEvent", "deprecated": false, "deprecationMessage": "", "type": "CustomTouchEvent", "indexKey": "", "optional": false, "description": "", "line": 59 } ], "indexSignatures": [], "kind": 171, "description": "Touch event with gesture information
\n", "rawdescription": "\n\nTouch event with gesture information\n", "methods": [], "extends": [ "Gesture" ] }, { "name": "UseFloatingMiddlewaresOptions", "id": "interface-UseFloatingMiddlewaresOptions-26fa8712efb086afc5ef68dd02471d32ff4761a80812cad42d41295686f00201ba42ad7d493371f3066c32e7802b44dfbe38c0101cc3157d3028a8f2f7c3f3fa", "file": "src/lib/components/overlays/popper/hooks/use-floating-middlewares.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "arrowHeight", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "The height of the arrow. This is added to mainAxis to prevent the arrow from overlapping the anchor element.
A safe zone around the arrow to prevent it from exceeding the content bounds.
\n", "line": 32, "rawdescription": "\nA safe zone around the arrow to prevent it from exceeding the content bounds." }, { "name": "arrowRef", "deprecated": false, "deprecationMessage": "", "type": "HTMLElement | null", "indexKey": "", "optional": true, "description": "Ref for arrow element
\n", "line": 26, "rawdescription": "\nRef for arrow element" }, { "name": "customMiddlewares", "deprecated": false, "deprecationMessage": "", "type": "Middleware[]", "indexKey": "", "optional": true, "description": "An array of custom modifiers for Popper.
\n", "line": 36, "rawdescription": "\nAn array of custom modifiers for Popper." }, { "name": "offsetByCrossAxis", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "Offset along the cross axis.
\n", "line": 24, "rawdescription": "\nOffset along the cross axis." }, { "name": "offsetByMainAxis", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": true, "description": "Offset along the main axis.
\n", "line": 22, "rawdescription": "\nOffset along the main axis." }, { "name": "placement", "deprecated": false, "deprecationMessage": "", "type": "PlacementWithAuto", "indexKey": "", "optional": true, "description": "By default, the component will automatically choose the best placement
\n", "line": 20, "rawdescription": "\nBy default, the component will automatically choose the best placement" }, { "name": "sameWidth", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": true, "description": "Sets the width to match the target element.
\n", "line": 34, "rawdescription": "\nSets the width to match the target element." }, { "name": "withArrow", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": true, "description": "Whether to display an arrow pointing to the anchor element.
\n", "line": 28, "rawdescription": "\nWhether to display an arrow pointing to the anchor element." } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "UsePinInputParams", "id": "interface-UsePinInputParams-57f9cc85858fedd48886d82267d10ccf8e17aba2e61159c071fa764630b267af3a35902583c58964bff718243583c60084b23ae494aae3ff757355d09892b10c", "file": "src/lib/components/form/pin-input/hooks/use-pin-input.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "onChange", "deprecated": false, "deprecationMessage": "", "type": "function", "indexKey": "", "optional": true, "description": "", "line": 7 }, { "name": "pinCount", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 5 }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "number[]", "indexKey": "", "optional": true, "description": "", "line": 6 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "WebApp", "id": "interface-WebApp-4a35d0b3e5bdba44255514b6efd6f4e4a95f51133949220fc5f70e5296eea4d62c0aaa822cd2417d8f6c6dc7090fab75ad4e7d830593cb78313261b2ac774be4", "file": "src/lib/services/telegram.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "colorScheme", "deprecated": false, "deprecationMessage": "", "type": "\"light\" | \"dark\"", "indexKey": "", "optional": false, "description": "", "line": 22 }, { "name": "themeParams", "deprecated": false, "deprecationMessage": "", "type": "ThemeParams", "indexKey": "", "optional": false, "description": "", "line": 23 } ], "indexSignatures": [], "kind": 173, "methods": [ { "name": "offEvent", "args": [ { "name": "eventName", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "eventHandler", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [] } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 25, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "eventName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventHandler", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [], "tagName": { "text": "param" } } ] }, { "name": "onEvent", "args": [ { "name": "eventName", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "eventHandler", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [] } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 24, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "eventName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventHandler", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [], "tagName": { "text": "param" } } ] } ], "extends": [] }, { "name": "Window", "id": "interface-Window-4a35d0b3e5bdba44255514b6efd6f4e4a95f51133949220fc5f70e5296eea4d62c0aaa822cd2417d8f6c6dc7090fab75ad4e7d830593cb78313261b2ac774be4", "file": "src/lib/services/telegram.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "properties": [ { "name": "Telegram", "deprecated": false, "deprecationMessage": "", "type": "literal type", "indexKey": "", "optional": true, "description": "", "line": 30 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] } ], "injectables": [ { "name": "FloatingMiddlewaresService", "id": "injectable-FloatingMiddlewaresService-26fa8712efb086afc5ef68dd02471d32ff4761a80812cad42d41295686f00201ba42ad7d493371f3066c32e7802b44dfbe38c0101cc3157d3028a8f2f7c3f3fa", "file": "src/lib/components/overlays/popper/hooks/use-floating-middlewares.ts", "properties": [], "methods": [ { "name": "getMiddlewares", "args": [ { "name": "options", "type": "UseFloatingMiddlewaresOptions", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "{ middlewares: {}; strictPlacement: any; }", "typeParameters": [], "line": 41, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "options", "type": "UseFloatingMiddlewaresOptions", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "extends": [], "type": "injectable" }, { "name": "PinInputService", "id": "injectable-PinInputService-57f9cc85858fedd48886d82267d10ccf8e17aba2e61159c071fa764630b267af3a35902583c58964bff718243583c60084b23ae494aae3ff757355d09892b10c", "file": "src/lib/components/form/pin-input/hooks/use-pin-input.ts", "properties": [], "methods": [ { "name": "create", "args": [ { "name": "params", "type": "UsePinInputParams", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "{ value: any; setInputRefByIndex: (index: number, ref: any) => void; handleClickValue: (enteredValue: number) => void; handleClickBackspace: () => void; handleButton: (index: number, button: string) => void; }", "typeParameters": [], "line": 37, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates a PIN input controller with the specified parameters\n", "description": "Creates a PIN input controller with the specified parameters
\n", "jsdoctags": [ { "name": { "pos": 806, "end": 812, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "params" }, "type": "UsePinInputParams", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 800, "end": 805, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "The parameters for the PIN input
\n" }, { "tagName": { "pos": 852, "end": 859, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "returns" }, "comment": "An object with methods and signals for controlling the PIN input
\n" } ] } ], "deprecated": false, "deprecationMessage": "", "description": "Service that provides functionality for PIN input component\nSimilar to the React usePinInput hook
\n", "rawdescription": "\n\nService that provides functionality for PIN input component\nSimilar to the React usePinInput hook\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 28 }, "extends": [], "type": "injectable" }, { "name": "PlatformService", "id": "injectable-PlatformService-da35e3f5d70773bebd38cfc6f0d2ff2568f4571fb10142b336d812ca0fbf66328ad848099bd4ccf896c4231162bded0a2e3640101a6ca1b19659ce440ebb8ca5", "file": "src/lib/services/platform.service.ts", "properties": [ { "name": "platform", "defaultValue": "signalChecks if current platform is iOS\nUses DOM class to determine platform, caches result for better performance
\n", "modifierKind": [ 125 ] }, { "name": "setPlatform", "args": [ { "name": "platform", "type": "PlatformType", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 26, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet platform manually\n", "description": "Set platform manually
\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "platform", "type": "PlatformType", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 17 }, "extends": [], "type": "injectable" }, { "name": "PortalService", "id": "injectable-PortalService-8fece340023811fd532f9e283dd9aabe9f4a30f311083c08a175b1ec40a6a4d635359fd25c8032b053ebf36bac4bdee008b8e91cb5aed5ab062a2f9873233108", "file": "src/lib/services/portal.service.ts", "properties": [ { "name": "hasPortalContainer", "defaultValue": "computed(() => !!this.portalContainer())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 18, "modifierKind": [ 125, 148 ] }, { "name": "portalContainer", "defaultValue": "this.portalContainerRef.asReadonly()", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 15, "modifierKind": [ 125, 148 ] } ], "methods": [ { "name": "clearPortalContainer", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 42, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClear the portal container reference\nThis should be called when the container is destroyed\n", "description": "Clear the portal container reference\nThis should be called when the container is destroyed
\n", "modifierKind": [ 125 ] }, { "name": "getPortalContainerElement", "args": [], "optional": false, "returnType": "HTMLElement | null", "typeParameters": [], "line": 51, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGet the current portal container element\nReturns the native DOM element or null if not set\n", "description": "Get the current portal container element\nReturns the native DOM element or null if not set
\n", "modifierKind": [ 125 ] }, { "name": "isPortalReady", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 62, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCheck if portal container is ready for use\n", "description": "Check if portal container is ready for use
\n", "modifierKind": [ 125 ] }, { "name": "setPortalContainer", "args": [ { "name": "elementRef", "type": "ElementRefSet the portal container reference\nThis is typically called by the TGUIRootComponent
\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "elementRef", "type": "ElementRefService for managing portal container references\nProvides functionality for components to render content outside of their DOM hierarchy
\n", "rawdescription": "\n\nService for managing portal container references\nProvides functionality for components to render content outside of their DOM hierarchy\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 18 }, "extends": [], "type": "injectable" }, { "name": "RippleService", "id": "injectable-RippleService-072eb3a2b70426697635905fda5669fcb5b80ac3632a0c2319dffe16e438669bd01437fa0dd0bbf8c6e6c918b25cae86d804420e44a203cbef67021e0500c12d", "file": "src/lib/services/ripple.service.ts", "properties": [], "methods": [ { "name": "addWave", "args": [ { "name": "x", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "y", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "pointerId", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "currentWaves", "type": "RippleWave[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "RippleWave[]", "typeParameters": [], "line": 25, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdd a new ripple wave effect at the specified coordinates\n", "description": "Add a new ripple wave effect at the specified coordinates
\n", "jsdoctags": [ { "name": "x", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "y", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "pointerId", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "currentWaves", "type": "RippleWave[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handlePointerCancel", "args": [ { "name": "pointerId", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandle pointer cancel/up event\n", "description": "Handle pointer cancel/up event
\n", "jsdoctags": [ { "name": "pointerId", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handlePointerDown", "args": [ { "name": "event", "type": "PointerEvent", "deprecated": false, "deprecationMessage": "" }, { "name": "wavesSignal", "type": "ReturnType<Handle pointer down event
\n", "jsdoctags": [ { "name": { "pos": 1082, "end": 1087, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "event" }, "type": "PointerEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1076, "end": 1081, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "Pointer event
\n" }, { "name": { "pos": 1114, "end": 1125, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "wavesSignal" }, "type": "ReturnType<Signal for managing waves
\n" } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "extends": [], "type": "injectable" }, { "name": "SnackbarService", "id": "injectable-SnackbarService-2a20d978267bb289c6220003d77ae8df36d68322181135054276cd98e1f24604f2efde0533787e0a575d4903ddfd22dde46b0fc335344403a5a8cb3bcfa619db", "file": "src/lib/components/feedback/snackbar/snackbar.service.ts", "properties": [], "methods": [ { "name": "closeAll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 187, "deprecated": false, "deprecationMessage": "" }, { "name": "show", "args": [ { "name": "message", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "options", "type": "SnackbarOptions", "deprecated": false, "deprecationMessage": "", "defaultValue": "{}" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 41, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "message", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "options", "type": "SnackbarOptions", "deprecated": false, "deprecationMessage": "", "defaultValue": "{}", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "extends": [], "type": "injectable" }, { "name": "SystemThemeService", "id": "injectable-SystemThemeService-069e3c2a14fa247a966ab3fa70a514a1786ba1b8f3fb809dc9de25408f5035ab5beaa35e6e47b5d19b4bd58c16667cc64aa1937ed125ce8efe73d3bf3b2b7530", "file": "src/lib/utils/theme-helper.ts", "properties": [ { "name": "theme", "defaultValue": "this.themeSignal.asReadonly()", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 63, "modifierKind": [ 125, 148 ] } ], "methods": [ { "name": "disableSystemTheme", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 84, "deprecated": false, "deprecationMessage": "" }, { "name": "enableSystemTheme", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 78, "deprecated": false, "deprecationMessage": "" }, { "name": "setTheme", "args": [ { "name": "theme", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 72, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "theme", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "Angular service for using system themes\nUses signals to track theme changes
\n", "rawdescription": "\n\nAngular service for using system themes\nUses signals to track theme changes\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 65 }, "extends": [], "type": "injectable" }, { "name": "TelegramService", "id": "injectable-TelegramService-4a35d0b3e5bdba44255514b6efd6f4e4a95f51133949220fc5f70e5296eea4d62c0aaa822cd2417d8f6c6dc7090fab75ad4e7d830593cb78313261b2ac774be4", "file": "src/lib/services/telegram.service.ts", "properties": [], "methods": [ { "name": "getTelegramData", "args": [], "optional": false, "returnType": "WebApp | undefined", "typeParameters": [], "line": 53, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] }, { "name": "hexToRGB", "args": [ { "name": "hex", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "", "typeParameters": [], "line": 98, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "hex", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 41 }, "accessors": { "isReady$": { "name": "isReady$", "getSignature": { "name": "isReady$", "type": "", "returnType": "ObservableDetect and apply system theme
\n", "modifierKind": [ 125 ] }, { "name": "loadGlobalStyles", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 98, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLoad global CSS variables to make them available for all components\n", "description": "Load global CSS variables to make them available for all components
\n", "modifierKind": [ 125 ] }, { "name": "setTheme", "args": [ { "name": "theme", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "" }, { "name": "followSystem", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "false" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 47, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nChange the theme manually\n", "description": "Change the theme manually
\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 1453, "end": 1458, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "theme" }, "type": "AppearanceType", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1447, "end": 1452, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "The theme to set
\n" }, { "name": { "pos": 1488, "end": 1500, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "followSystem" }, "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "false", "tagName": { "pos": 1482, "end": 1487, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "If true, will follow system theme changes after setting. Default false.
\n" } ] }, { "name": "setupTheme", "args": [ { "name": "appearance", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "", "optional": true }, { "name": "followSystem", "type": "boolean", "deprecated": false, "deprecationMessage": "", "defaultValue": "false" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 66, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSetup theme based on inputs and system preferences\n", "description": "Setup theme based on inputs and system preferences
\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 2047, "end": 2057, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "appearance" }, "type": "AppearanceType", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 2041, "end": 2046, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "Appearance to use
\n" }, { "name": { "pos": 2088, "end": 2100, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "followSystem" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "defaultValue": "false", "tagName": { "pos": 2082, "end": 2087, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "Whether to follow system theme
\n" } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "rendererFactory", "type": "RendererFactory2", "deprecated": false, "deprecationMessage": "" } ], "line": 21, "jsdoctags": [ { "name": "rendererFactory", "type": "RendererFactory2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "TypographyCellService", "id": "injectable-TypographyCellService-572d02634ea5d77023661b3a8d999a8d9e46b3641a8d231bac3e41d96eebdb62ddb4933c194ed34bf2124d6a052ad1336680b56ee5ca6cd2459bd8b0f1dc6fa2", "file": "src/lib/components/blocks/cell/services/typography-cell.service.ts", "properties": [], "methods": [ { "name": "getDescriptionComponent", "args": [], "optional": false, "returnType": "TypeReturns the appropriate component type for the description based on platform\niOS: CaptionComponent\nAndroid/Web: SubheadlineComponent with level 2
\n" }, { "name": "getDescriptionLevel", "args": [], "optional": false, "returnType": "string", "typeParameters": [], "line": 45, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the level to use for description component if it's a SubheadlineComponent\n", "description": "Returns the level to use for description component if it's a SubheadlineComponent
\n" }, { "name": "getTitleComponent", "args": [], "optional": false, "returnType": "TypeReturns the appropriate component type for the title based on platform\niOS: TextComponent\nAndroid/Web: SubheadlineComponent with level 1
\n" }, { "name": "getTitleLevel", "args": [], "optional": false, "returnType": "string", "typeParameters": [], "line": 38, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the level to use for title component if it's a SubheadlineComponent\n", "description": "Returns the level to use for title component if it's a SubheadlineComponent
\n" } ], "deprecated": false, "deprecationMessage": "", "description": "Service that provides platform-specific typography components for Cell\nSimilar to the React useTypographyCellComponents hook
\n", "rawdescription": "\n\nService that provides platform-specific typography components for Cell\nSimilar to the React useTypographyCellComponents hook\n", "extends": [], "type": "injectable" } ], "guards": [], "interceptors": [], "classes": [], "directives": [ { "name": "HorizontalScrollDirective", "id": "directive-HorizontalScrollDirective-fbd0d49811b316576ef143797af666f9de8cc0b522023c6c73671e81a1e2a4a33b32335cc18cfd4e16af7a01369cfd8160f3d7e799646c63a776b65cbb4f4343", "file": "src/lib/directives/horizontal-scroll.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "selector": "[tguiHorizontalScroll]", "providers": [], "hostDirectives": [], "standalone": true, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.tgui-hide-scrollbar", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 13, "type": "boolean", "decorators": [] }, { "name": "style.-ms-overflow-style", "defaultValue": "'none'", "deprecated": false, "deprecationMessage": "", "line": 12, "type": "string", "decorators": [] }, { "name": "style.-webkit-overflow-scrolling", "defaultValue": "'touch'", "deprecated": false, "deprecationMessage": "", "line": 10, "type": "string", "decorators": [] }, { "name": "style.display", "defaultValue": "'flex'", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "string", "decorators": [] }, { "name": "style.overflow-x", "defaultValue": "'scroll'", "deprecated": false, "deprecationMessage": "", "line": 9, "type": "string", "decorators": [] }, { "name": "style.scrollbar-width", "defaultValue": "'none'", "deprecated": false, "deprecationMessage": "", "line": 11, "type": "string", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "display", "defaultValue": "'flex'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 8, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.display'" } ], "modifierKind": [ 170 ] }, { "name": "hideScrollbar", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 13, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.tgui-hide-scrollbar'" } ], "modifierKind": [ 170 ] }, { "name": "msOverflowStyle", "defaultValue": "'none'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 12, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.-ms-overflow-style'" } ], "modifierKind": [ 170 ] }, { "name": "overflowX", "defaultValue": "'scroll'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 9, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.overflow-x'" } ], "modifierKind": [ 170 ] }, { "name": "scrollbarWidth", "defaultValue": "'none'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 11, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.scrollbar-width'" } ], "modifierKind": [ 170 ] }, { "name": "webkitOverflowScrolling", "defaultValue": "'touch'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 10, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.-webkit-overflow-scrolling'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "PortalOutletDirective", "id": "directive-PortalOutletDirective-1b7d5bb8ee72d63c9225c3384efd0da72f8571ae6b04a79fbcb7fd1043fab76a26639211726e3342dd2b9b82fa2be5978a6c4950b33ea5f02f2de02448efe692", "file": "src/lib/directives/portal-outlet.directive.ts", "type": "directive", "description": "Directive that renders content into a portal container\nUse it to project content outside of its normal DOM hierarchy
\n", "rawdescription": "\n\nDirective that renders content into a portal container\nUse it to project content outside of its normal DOM hierarchy\n", "selector": "[tguiPortalOutlet]", "providers": [], "hostDirectives": [], "standalone": true, "inputsClass": [ { "name": "tguiPortalOutlet", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 14, "type": "TemplateRefDirective for automatic passing of icon properties to SVG element\nAllows using an approach similar to {...props} in React
\n", "rawdescription": "\n\nDirective for automatic passing of icon properties to SVG element\nAllows using an approach similar to {...props} in React\n", "selector": "[tguiSvgProps]", "providers": [], "hostDirectives": [], "standalone": true, "inputsClass": [ { "name": "props", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 13, "required": false } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [ { "name": "props", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 13, "required": false } ], "methodsClass": [], "extends": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "el", "type": "ElementRefDirective that automatically loads the TGUI styles\nThis should be applied once on a root element (typically body or app-root)
\n", "rawdescription": "\n\nDirective that automatically loads the TGUI styles\nThis should be applied once on a root element (typically body or app-root)\n", "selector": "[tguiTheme]", "providers": [], "hostDirectives": [], "standalone": true, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [], "implements": [ "OnInit" ] }, { "name": "VisuallyHiddenDirective", "id": "directive-VisuallyHiddenDirective-4a3f9cb80fb675d7d28723a74abd73b17e4dfe4debe645b0008a5668bebc4c3bdcab4a9dc129a683902fbfb545677137b973c62f498ece7427f1535d919d89ac", "file": "src/lib/directives/visually-hidden.directive.ts", "type": "directive", "description": "Directive that visually hides an element while keeping it accessible for screen readers.\nUsed for improving accessibility by providing context for screen reader users\nwithout affecting the visual presentation.
\n", "rawdescription": "\n\nDirective that visually hides an element while keeping it accessible for screen readers.\nUsed for improving accessibility by providing context for screen reader users\nwithout affecting the visual presentation.\n", "selector": "[tguiVisuallyHidden]", "providers": [], "hostDirectives": [], "standalone": true, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [], "implements": [ "OnInit" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "el", "type": "ElementRefModel value for expanded state with two-way binding support
\n", "line": 144, "rawdescription": "\n\nModel value for expanded state with two-way binding support\n", "modifierKind": [ 148 ], "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "_expanded", "defaultValue": "signal(false)", "deprecated": true, "deprecationMessage": "Use expanded() instead\nInternal signal for expansion state, kept for backward compatibility", "type": "", "indexKey": "", "optional": false, "description": "Internal signal for expansion state, kept for backward compatibility
\n", "line": 150, "rawdescription": "\n\nInternal signal for expansion state, kept for backward compatibility\n", "modifierKind": [ 148 ], "jsdoctags": [ { "pos": 3556, "end": 3668, "kind": 331, "id": 0, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "tagName": { "pos": 3557, "end": 3567, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "deprecated" }, "comment": "Use expanded() instead\nInternal signal for expansion state, kept for backward compatibility
\n" } ] }, { "name": "afterTemplate", "defaultValue": "inputTemplate displayed on the right side of the summary (replaces the default chevron)
\n", "line": 139, "rawdescription": "\n\nTemplate displayed on the right side of the summary (replaces the default chevron)\n", "modifierKind": [ 148 ] }, { "name": "contentId", "defaultValue": "computed(() => `${this.id()}-content`)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed ID for the content element
\n", "line": 168, "rawdescription": "\nComputed ID for the content element", "modifierKind": [ 148 ] }, { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Model value for expanded state with two-way binding support
\n", "line": 144, "rawdescription": "\n\nModel value for expanded state with two-way binding support\n", "modifierKind": [ 148 ], "required": false }, { "name": "id", "defaultValue": "inputOptional ID for the accordion element
\n", "line": 129, "rawdescription": "\n\nOptional ID for the accordion element\n", "modifierKind": [ 148 ] }, { "name": "labelId", "defaultValue": "computed(() => `${this.id()}-label`)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed ID for the label element
\n", "line": 165, "rawdescription": "\nComputed ID for the label element", "modifierKind": [ 148 ] }, { "name": "summary", "defaultValue": "input.requiredSummary content - can be either a string or a template
\n", "line": 134, "rawdescription": "\n\nSummary content - can be either a string or a template\n", "modifierKind": [ 148 ] } ], "methodsClass": [ { "name": "getAfterTemplate", "args": [], "optional": false, "returnType": "TemplateRef | null", "typeParameters": [], "line": 196, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nGet the template to display in the after slot", "description": "Get the template to display in the after slot
\n" }, { "name": "getSummaryTemplate", "args": [], "optional": false, "returnType": "TemplateRefGet appropriate template based on summary type
\n" }, { "name": "toggleExpanded", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 203, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nToggle the expanded state of the accordion\n", "description": "Toggle the expanded state of the accordion
\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "CellComponent", "type": "component" }, { "name": "TguiIcon24ChevronDown" } ], "description": "This component serves as an accordion container with built-in summary and content sections.\nIt uses a signal-based approach to manage its state.
\n<!-- With string summary -->\n<tgui-accordion\n summary="Simple string title"\n [(expanded)]="isExpanded">\n Accordion content here\n</tgui-accordion>\n\n<!-- With template summary -->\n<tgui-accordion\n [summary]="summaryTemplate"\n [afterTemplate]="afterTemplate"\n [(expanded)]="isExpanded">\n Accordion content here\n</tgui-accordion>Renders the content part of an accordion, leveraging signals to control visibility and animation.\nUtilizes element measurements for smooth height transitions during expand/collapse actions.
\n", "rawdescription": "\n\nRenders the content part of an accordion, leveraging signals to control visibility and animation.\nUtilizes element measurements for smooth height transitions during expand/collapse actions.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 69 }, "extends": [], "implements": [ "AfterViewInit", "OnDestroy" ], "accessors": { "contentId": { "name": "contentId", "getSignature": { "name": "contentId", "type": "", "returnType": "", "line": 59 } }, "labelId": { "name": "labelId", "getSignature": { "name": "labelId", "type": "", "returnType": "", "line": 61 } }, "ariaHidden": { "name": "ariaHidden", "getSignature": { "name": "ariaHidden", "type": "", "returnType": "", "line": 62 } } } }, { "name": "AccordionSummaryComponent", "id": "component-AccordionSummaryComponent-065b1315fd5f66763c46040c7eaea4dd51edcb040c74bfdb23aa1aee8e4501a197f89cb1ae8743f524cd85d67d23587206f475378882a80f82c8ee2c1b15ef19", "file": "src/lib/components/blocks/accordion/components/accordion-summary/accordion-summary.component.ts", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-accordion-summary", "styleUrls": [], "styles": [ "\n .chevron {\n transition: transform .15s ease-out;\n color: var(--tgui--link_color);\n }\n \n .chevron--expanded {\n transform: rotate(180deg);\n }\n " ], "template": "Template displayed on the right side of the cell (replaces the default chevron)
\n", "line": 82, "rawdescription": "\nTemplate displayed on the right side of the cell (replaces the default chevron)" }, { "name": "defaultChevronTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRefGet the template to display in the after slot
\n" }, { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 101, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click'" } ], "modifierKind": [ 170 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "click", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 101 } ], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "CellComponent", "type": "component" }, { "name": "TguiIcon24ChevronDown" } ], "description": "AccordionSummary serves as the clickable header for an accordion section, toggling the visibility of the content.\nIt incorporates an expand/collapse icon to visually indicate state. This component extends Cell to provide\na consistent UI and accessibility features.
<!-- Using default chevron icon -->\n<tgui-accordion-summary>\n Accordion title\n</tgui-accordion-summary>\n\n<!-- Using custom after template -->\n<tgui-accordion-summary [afterTemplate]="customAfterTemplate">\n Accordion title\n</tgui-accordion-summary>\n\n<ng-template #customAfterTemplate>\n <tgui-badge type="number">5</tgui-badge>\n</ng-template>The component accepts the following template inputs:
\nafterTemplate: Optional template displayed on the right side of the cell (replaces the default chevron)Text from which initials will be formed
\n", "line": 73, "rawdescription": "\n\nText from which initials will be formed\n" }, { "name": "size", "defaultValue": "inputAvatar size that determines the size of displayed initials
\n", "line": 68, "rawdescription": "\n\nAvatar size that determines the size of displayed initials\n" } ], "methodsClass": [ { "name": "formatInitials", "args": [], "optional": false, "returnType": "string", "typeParameters": [], "line": 78, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFormats the passed text into initials, extracting the first letters of each word (up to 2 letters)\n", "description": "Formats the passed text into initials, extracting the first letters of each word (up to 2 letters)
\n" }, { "name": "getCaptionLevel", "args": [], "optional": false, "returnType": "\"1\" | \"2\"", "typeParameters": [], "line": 111, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDetermines Caption level based on avatar size\n", "description": "Determines Caption level based on avatar size
\n" }, { "name": "getTypographyComponent", "args": [], "optional": false, "returnType": "\"caption\" | \"headline\" | \"title\" | \"large-title\"", "typeParameters": [], "line": 92, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDetermines which typography component to use based on avatar size\n", "description": "Determines which typography component to use based on avatar size
\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "CaptionComponent", "type": "component" }, { "name": "HeadlineComponent", "type": "component" }, { "name": "TitleComponent", "type": "component" }, { "name": "LargeTitleComponent", "type": "component" } ], "description": "The AvatarAcronym component displays initials for an avatar,\nautomatically selecting the appropriate font size and typography component.
\n", "rawdescription": "\n\nThe AvatarAcronym component displays initials for an avatar,\nautomatically selecting the appropriate font size and typography component.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "AvatarBadgeComponent", "id": "component-AvatarBadgeComponent-223f364c39514962294c85b6a7a16673547b51fe4fe3c650fb89f960bfaaebd35f5b3b60fdbc5b243af8ffe7153f9f3ab4ec1ca7d6e19cdccab98db092baa949", "file": "src/lib/components/blocks/avatar/components/avatar-badge/avatar-badge.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-avatar-badge", "styleUrls": [], "styles": [ "\n :host {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 10;\n pointer-events: none;\n }\n \n .avatar-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: 10px;\n background-color: var(--tgui--destructive_text_color);\n color: white;\n font-size: 11px;\n font-weight: var(--tgui--font_weight--accent1);\n box-sizing: border-box;\n transform: translate(50%, -50%);\n box-shadow: 0 0 0 2px var(--tgui--bg_color);\n pointer-events: auto;\n }\n \n .badge-content {\n display: flex;\n line-height: 1;\n }\n \n /* Special styles for large and small badges */\n :host-context(.size-xs) .avatar-badge,\n :host-context(.size-s) .avatar-badge {\n min-width: 14px;\n height: 14px;\n font-size: 10px;\n padding: 0 4px;\n }\n \n :host-context(.size-l) .avatar-badge,\n :host-context(.size-xl) .avatar-badge {\n min-width: 20px;\n height: 20px;\n font-size: 12px;\n padding: 0 6px;\n }\n " ], "template": "Numeric value to display in the badge
\n", "line": 72, "rawdescription": "\n\nNumeric value to display in the badge\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "count", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Numeric value to display in the badge
\n", "line": 72, "rawdescription": "\n\nNumeric value to display in the badge\n", "required": false } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "The AvatarBadge component displays a numeric badge on the avatar,\nallowing to show the number of unread messages, notifications, etc.
\n", "rawdescription": "\n\nThe AvatarBadge component displays a numeric badge on the avatar,\nallowing to show the number of unread messages, notifications, etc.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "AvatarComponent", "id": "component-AvatarComponent-deea22923e1ab46629877b4040bdcc88ba459b0ea03aadce050912de3f3432ce5fc2829564d13bf619098a331204fdb837e965945bc3258425b1ac8cbf7d00de", "file": "src/lib/components/blocks/avatar/avatar.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-avatar", "styleUrls": [], "styles": [ "\n :host {\n display: inline-flex;\n position: relative;\n }\n \n .avatar-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background-color: var(--tgui--secondary_fill);\n position: relative;\n border-radius: inherit;\n z-index: 1;\n }\n \n .avatar-content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 2;\n }\n \n .avatar-content ::ng-deep > * {\n pointer-events: auto;\n }\n \n .avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n \n .avatar-online-badge {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n background-color: var(--tgui--green);\n border: 2px solid var(--tgui--bg_color);\n border-radius: 50%;\n box-sizing: border-box;\n transform: translate(0, 0);\n z-index: 3;\n }\n \n /* Size Variants */\n :host.size-xxs {\n width: 20px;\n height: 20px;\n }\n \n :host.size-xs {\n width: 24px;\n height: 24px;\n }\n \n :host.size-s {\n width: 28px;\n height: 28px;\n }\n \n :host.size-m {\n width: 40px;\n height: 40px;\n }\n \n :host.size-l {\n width: 48px;\n height: 48px;\n }\n \n :host.size-xl {\n width: 96px;\n height: 96px;\n }\n \n /* Shape Variants */\n :host.shape-circle {\n border-radius: 50%;\n }\n \n :host.shape-rounded {\n border-radius: 8px;\n }\n \n :host.shape-square {\n border-radius: 0;\n }\n \n /* Platform Specific */\n :host-context(.tgui-platform-ios) :host.shape-rounded {\n border-radius: 10px;\n }\n \n /* Badge size adjustments */\n :host.size-xxs .avatar-online-badge {\n min-width: 6px;\n min-height: 6px;\n border-width: 1px;\n }\n \n :host.size-xs .avatar-online-badge {\n min-width: 6px;\n min-height: 6px;\n border-width: 1px;\n }\n \n :host.size-s .avatar-online-badge {\n min-width: 8px;\n min-height: 8px;\n border-width: 1.5px;\n }\n \n :host.size-l .avatar-online-badge {\n min-width: 10px;\n min-height: 10px;\n border-width: 2px;\n }\n \n :host.size-xl .avatar-online-badge {\n min-width: 16px;\n min-height: 16px;\n border-width: 3px;\n }\n " ], "template": "Online status indicator
\n", "line": 225, "rawdescription": "\n\nOnline status indicator\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "alt", "defaultValue": "inputAlternative text for the image
\n", "line": 215, "rawdescription": "\n\nAlternative text for the image\n" }, { "name": "altText", "defaultValue": "computed(() => this.alt() || 'Avatar')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed alt text that always returns a string
\n", "line": 230, "rawdescription": "\n\nComputed alt text that always returns a string\n" }, { "name": "color", "defaultValue": "inputBackground color for avatar with initials
\n", "line": 220, "rawdescription": "\n\nBackground color for avatar with initials\n" }, { "name": "hasInitials", "defaultValue": "computed(() => !!this.initials())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed flag indicating if initials are present
\n", "line": 245, "rawdescription": "\n\nComputed flag indicating if initials are present\n" }, { "name": "hasSrc", "defaultValue": "computed(() => !!this.src())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed flag indicating if source URL is present
\n", "line": 240, "rawdescription": "\n\nComputed flag indicating if source URL is present\n" }, { "name": "initials", "defaultValue": "inputText for initials if image is absent
\n", "line": 200, "rawdescription": "\n\nText for initials if image is absent\n" }, { "name": "initialsText", "defaultValue": "computed(() => this.initials() || '')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed initials text that always returns a string
\n", "line": 250, "rawdescription": "\n\nComputed initials text that always returns a string\n" }, { "name": "online", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Online status indicator
\n", "line": 225, "rawdescription": "\n\nOnline status indicator\n", "required": false }, { "name": "shape", "defaultValue": "inputAvatar shape ('circle', 'rounded', 'square')
\n", "line": 210, "rawdescription": "\n\nAvatar shape ('circle', 'rounded', 'square')\n" }, { "name": "size", "defaultValue": "inputAvatar size ('xxs', 'xs', 's', 'm', 'l', 'xl')
\n", "line": 205, "rawdescription": "\n\nAvatar size ('xxs', 'xs', 's', 'm', 'l', 'xl')\n" }, { "name": "src", "defaultValue": "inputAvatar image URL
\n", "line": 195, "rawdescription": "\n\nAvatar image URL\n" }, { "name": "srcUrl", "defaultValue": "computed(() => this.src() || '')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed source URL that always returns a string
\n", "line": 235, "rawdescription": "\n\nComputed source URL that always returns a string\n" } ], "methodsClass": [ { "name": "getBackgroundColor", "args": [], "optional": false, "returnType": "string", "typeParameters": [], "line": 267, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns background color for avatar with initials\n", "description": "Returns background color for avatar with initials
\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.shape-circle", "deprecated": false, "deprecationMessage": "", "line": 260, "type": "boolean", "decorators": [] }, { "name": "class.shape-rounded", "deprecated": false, "deprecationMessage": "", "line": 261, "type": "boolean", "decorators": [] }, { "name": "class.shape-square", "deprecated": false, "deprecationMessage": "", "line": 262, "type": "boolean", "decorators": [] }, { "name": "class.size-l", "deprecated": false, "deprecationMessage": "", "line": 257, "type": "boolean", "decorators": [] }, { "name": "class.size-m", "deprecated": false, "deprecationMessage": "", "line": 256, "type": "boolean", "decorators": [] }, { "name": "class.size-s", "deprecated": false, "deprecationMessage": "", "line": 255, "type": "boolean", "decorators": [] }, { "name": "class.size-xl", "deprecated": false, "deprecationMessage": "", "line": 258, "type": "boolean", "decorators": [] }, { "name": "class.size-xs", "deprecated": false, "deprecationMessage": "", "line": 254, "type": "boolean", "decorators": [] }, { "name": "class.size-xxs", "deprecated": false, "deprecationMessage": "", "line": 253, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgStyle" }, { "name": "AvatarAcronymComponent", "type": "component" } ], "description": "The Avatar component displays an avatar with optional initials or image.\nThe component supports various sizes and shapes, as well as an online status indicator.
\n", "rawdescription": "\n\nThe Avatar component displays an avatar with optional initials or image.\nThe component supports various sizes and shapes, as well as an online status indicator.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isSizeXXS": { "name": "isSizeXXS", "getSignature": { "name": "isSizeXXS", "type": "", "returnType": "", "line": 253 } }, "isSizeXS": { "name": "isSizeXS", "getSignature": { "name": "isSizeXS", "type": "", "returnType": "", "line": 254 } }, "isSizeS": { "name": "isSizeS", "getSignature": { "name": "isSizeS", "type": "", "returnType": "", "line": 255 } }, "isSizeM": { "name": "isSizeM", "getSignature": { "name": "isSizeM", "type": "", "returnType": "", "line": 256 } }, "isSizeL": { "name": "isSizeL", "getSignature": { "name": "isSizeL", "type": "", "returnType": "", "line": 257 } }, "isSizeXL": { "name": "isSizeXL", "getSignature": { "name": "isSizeXL", "type": "", "returnType": "", "line": 258 } }, "isShapeCircle": { "name": "isShapeCircle", "getSignature": { "name": "isShapeCircle", "type": "", "returnType": "", "line": 260 } }, "isShapeRounded": { "name": "isShapeRounded", "getSignature": { "name": "isShapeRounded", "type": "", "returnType": "", "line": 261 } }, "isShapeSquare": { "name": "isShapeSquare", "getSignature": { "name": "isShapeSquare", "type": "", "returnType": "", "line": 262 } } } }, { "name": "AvatarStackComponent", "id": "component-AvatarStackComponent-970f09b0753d759557c593aa37e492bb993dc2d2b7515d2ebb1af4abd3320ef4f7c08cc011781bae968eac6f88878af05c72717fe654e9b71eef25999b6159a1", "file": "src/lib/components/blocks/avatar-stack/avatar-stack.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-avatar-stack", "styleUrls": [], "styles": [ "\n :host {\n display: inline-flex;\n }\n \n .avatar-stack-container {\n display: flex;\n --tgui-avatar-stack-offset: -12px;\n }\n \n .avatar-stack-container > ::ng-deep tgui-avatar:not(:first-child) {\n margin-left: var(--tgui-avatar-stack-offset);\n }\n \n .avatar-stack-container > ::ng-deep tgui-avatar {\n box-shadow: 0 0 0 3px var(--tgui--bg_color);\n }\n \n /* Platform Specific */\n :host-context(.tgui-platform-ios) :host .avatar-stack-container > ::ng-deep tgui-avatar {\n box-shadow: 0 0 0 2px var(--tgui--bg_color);\n }\n " ], "template": "Offset between avatars in pixels (default -12px).\nNegative value determines the degree of overlap between avatars.\nThe smaller the value (e.g., -18px), the greater the overlap between avatars.\nThe larger the value (e.g., -6px), the less the overlap between avatars.
\n", "line": 69, "rawdescription": "\n\nOffset between avatars in pixels (default -12px).\nNegative value determines the degree of overlap between avatars.\nThe smaller the value (e.g., -18px), the greater the overlap between avatars.\nThe larger the value (e.g., -6px), the less the overlap between avatars.\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "avatars", "deprecated": false, "deprecationMessage": "", "type": "QueryListList of avatars inside the stack
\n", "line": 74, "rawdescription": "\n\nList of avatars inside the stack\n", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "AvatarComponent" } ], "modifierKind": [ 170 ] }, { "name": "offset", "defaultValue": "-12", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Offset between avatars in pixels (default -12px).\nNegative value determines the degree of overlap between avatars.\nThe smaller the value (e.g., -18px), the greater the overlap between avatars.\nThe larger the value (e.g., -6px), the less the overlap between avatars.
\n", "line": 69, "rawdescription": "\n\nOffset between avatars in pixels (default -12px).\nNegative value determines the degree of overlap between avatars.\nThe smaller the value (e.g., -18px), the greater the overlap between avatars.\nThe larger the value (e.g., -6px), the less the overlap between avatars.\n", "required": false } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "The AvatarStack component displays a container for avatars in a stack format.\nIt allows to visually group avatars, often used to represent\nmultiple users or participants.
\nAvatars are displayed with overlap, which is adjusted through the offset property.
\n", "rawdescription": "\n\nThe AvatarStack component displays a container for avatars in a stack format.\nIt allows to visually group avatars, often used to represent\nmultiple users or participants.\n\nAvatars are displayed with overlap, which is adjusted through the offset property.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "BadgeComponent", "id": "component-BadgeComponent-f7b4fca684b1f1b8a706f5d2d4bd50e7518386abe24f38a3ab4caf1b1d277b62d9cff8deff7a34a04e38f9cd80e043ab30cf5cbfa15d44797407af9c20786640", "file": "src/lib/components/blocks/badge/badge.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-badge", "styleUrls": [], "styles": [ "\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border-radius: 20px;\n overflow: hidden;\n }\n\n /* Number type styles */\n :host.type-number {\n height: 20px;\n min-width: 20px;\n margin: 0 6px;\n padding: 0 5px;\n }\n\n /* Large number badge */\n :host.type-number.large {\n height: 24px;\n padding: 0 6px;\n /* don't increase min-width, keep 20px as in React */\n }\n\n /* Dot type styles */\n :host.type-dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n margin: 7px;\n border-radius: 50%;\n }\n\n /* Color modes */\n :host.mode-primary {\n color: var(--tgui--button_text_color);\n background: var(--tgui--button_color);\n }\n\n :host.mode-critical {\n color: var(--tgui--button_text_color);\n background: var(--tgui--destructive_text_color);\n }\n\n :host.mode-secondary {\n color: var(--tgui--link_color);\n background: var(--tgui--secondary_fill);\n }\n\n :host.mode-gray {\n color: var(--tgui--plain_foreground);\n background: var(--tgui--plain_background);\n }\n\n :host.mode-white {\n color: var(--tgui--link_color);\n background: var(--tgui--white);\n }\n " ], "template": "Increases the badge size. Applied only when type='number'.
\n", "line": 110, "rawdescription": "\nIncreases the badge size. Applied only when type='number'.", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "large", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Increases the badge size. Applied only when type='number'.
\n", "line": 110, "rawdescription": "\nIncreases the badge size. Applied only when type='number'.", "required": false }, { "name": "mode", "defaultValue": "inputColor scheme of the badge, affecting its background and text color.
\n", "line": 107, "rawdescription": "\nColor scheme of the badge, affecting its background and text color." }, { "name": "type", "defaultValue": "inputVisual style of the badge: 'number' displays content, 'dot' shows a simple dot.
\n", "line": 104, "rawdescription": "\nVisual style of the badge: 'number' displays content, 'dot' shows a simple dot." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.large", "deprecated": false, "deprecationMessage": "", "line": 124, "type": "boolean", "decorators": [] }, { "name": "class.mode-critical", "deprecated": false, "deprecationMessage": "", "line": 118, "type": "boolean", "decorators": [] }, { "name": "class.mode-gray", "deprecated": false, "deprecationMessage": "", "line": 120, "type": "boolean", "decorators": [] }, { "name": "class.mode-primary", "deprecated": false, "deprecationMessage": "", "line": 117, "type": "boolean", "decorators": [] }, { "name": "class.mode-secondary", "deprecated": false, "deprecationMessage": "", "line": 119, "type": "boolean", "decorators": [] }, { "name": "class.mode-white", "deprecated": false, "deprecationMessage": "", "line": 121, "type": "boolean", "decorators": [] }, { "name": "class.type-dot", "deprecated": false, "deprecationMessage": "", "line": 114, "type": "boolean", "decorators": [] }, { "name": "class.type-number", "deprecated": false, "deprecationMessage": "", "line": 113, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "CaptionComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" } ], "description": "Badge component displays a small numeric or dot indicator,\ntypically used for notifications, statuses, or counters.\nSupports multiple visual modes for different contexts (e.g., critical, primary),\nand can be regular or large size.
\n", "rawdescription": "\n\nBadge component displays a small numeric or dot indicator,\ntypically used for notifications, statuses, or counters.\nSupports multiple visual modes for different contexts (e.g., critical, primary),\nand can be regular or large size.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isNumber": { "name": "isNumber", "getSignature": { "name": "isNumber", "type": "", "returnType": "", "line": 113 } }, "isDot": { "name": "isDot", "getSignature": { "name": "isDot", "type": "", "returnType": "", "line": 114 } }, "isPrimary": { "name": "isPrimary", "getSignature": { "name": "isPrimary", "type": "", "returnType": "", "line": 117 } }, "isCritical": { "name": "isCritical", "getSignature": { "name": "isCritical", "type": "", "returnType": "", "line": 118 } }, "isSecondary": { "name": "isSecondary", "getSignature": { "name": "isSecondary", "type": "", "returnType": "", "line": 119 } }, "isGray": { "name": "isGray", "getSignature": { "name": "isGray", "type": "", "returnType": "", "line": 120 } }, "isWhite": { "name": "isWhite", "getSignature": { "name": "isWhite", "type": "", "returnType": "", "line": 121 } }, "isLarge": { "name": "isLarge", "getSignature": { "name": "isLarge", "type": "", "returnType": "", "line": 124 } } } }, { "name": "BannerComponent", "id": "component-BannerComponent-f8d81b0a99c39fa11e8b37efa058388b14f013711cb98b5f597523bb252e8e1fc2205642a56e3f5cbda96afb3a8f1a860d751692c793bd45c3a92e6c9de8e1ce", "file": "src/lib/components/blocks/banner/banner.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-banner", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n\n .wrapper {\n overflow: hidden;\n position: relative;\n display: flex;\n gap: 20px;\n padding: 16px 20px;\n background: var(--tgui--bg_color);\n }\n\n .wrapper--base:not(.wrapper--withBackground) {\n box-shadow: var(--tgui--base--section--box_shadow);\n }\n\n .wrapper--ios {\n border-radius: 16px;\n }\n\n .wrapper--withBackground {\n padding: 20px;\n }\n\n .wrapper--withBackground .title {\n color: var(--tgui--white);\n }\n\n .wrapper--withBackground .subheader {\n opacity: .8;\n color: var(--tgui--white);\n }\n\n .wrapper--inline {\n background: var(--tgui--bg_color);\n }\n\n .wrapper--base.wrapper--inline {\n margin: 8px 20px;\n border-radius: 16px;\n border: 1px solid var(--tgui--outline);\n box-shadow: none;\n }\n\n .wrapper--ios.wrapper--inline {\n margin: 8px 16px;\n background: var(--tgui--quartenary_bg_color);\n }\n\n .background {\n position: absolute;\n inset: 0;\n }\n\n .middle {\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n z-index: var(--tgui--z-index--simple);\n }\n\n .subheader {\n color: var(--tgui--subtitle_text_color);\n }\n\n .description {\n color: var(--tgui--hint_color);\n }\n\n .buttons {\n display: flex;\n gap: 4px;\n margin-top: 10px;\n }\n\n .close {\n height: 28px;\n border-radius: 50%;\n }\n " ], "template": "Template for background content
\n", "line": 256, "rawdescription": "\nTemplate for background content", "modifierKind": [ 125 ] }, { "name": "beforeTemplate", "defaultValue": "inputTemplate displayed at the start of the banner, useful for icons
\n", "line": 241, "rawdescription": "\nTemplate displayed at the start of the banner, useful for icons", "modifierKind": [ 125 ] }, { "name": "buttonsTemplate", "defaultValue": "inputTemplate for action buttons
\n", "line": 259, "rawdescription": "\nTemplate for action buttons", "modifierKind": [ 125 ] }, { "name": "calloutTemplate", "defaultValue": "inputTemplate for callout text displayed above the header
\n", "line": 244, "rawdescription": "\nTemplate for callout text displayed above the header", "modifierKind": [ 125 ] }, { "name": "closeIcon", "defaultValue": "inputThe close icon to use. Can be overridden by input
\n", "line": 238, "rawdescription": "\nThe close icon to use. Can be overridden by input", "modifierKind": [ 125 ] }, { "name": "descriptionTemplate", "defaultValue": "inputTemplate for descriptive text
\n", "line": 253, "rawdescription": "\nTemplate for descriptive text", "modifierKind": [ 125 ] }, { "name": "headerTemplate", "defaultValue": "inputTemplate for main header/title of the banner
\n", "line": 247, "rawdescription": "\nTemplate for main header/title of the banner", "modifierKind": [ 125 ] }, { "name": "isIOS", "defaultValue": "this.platformService.isIOS()", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 261, "modifierKind": [ 125 ] }, { "name": "subheaderTemplate", "defaultValue": "inputTemplate for text displayed below the header
\n", "line": 250, "rawdescription": "\nTemplate for text displayed below the header", "modifierKind": [ 125 ] }, { "name": "type", "defaultValue": "input<'section' | 'inline'>('section')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Specifies the banner's layout style, which can affect its positioning and styling.
\n", "line": 235, "rawdescription": "\nSpecifies the banner's layout style, which can affect its positioning and styling.", "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "getCloseIconName", "args": [], "optional": false, "returnType": "string", "typeParameters": [], "line": 266, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDetermines which close icon to use based on platform and background\n", "description": "Determines which close icon to use based on platform and background
\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "TappableComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "TextComponent", "type": "component" }, { "name": "CaptionComponent", "type": "component" }, { "name": "TguiDynamicIconComponent", "type": "component" } ], "description": "The Banner component renders a prominent graphical element, typically displayed at the top of a page or section,\ndesigned to grab the user's attention and convey important information.\nIt is a versatile tool used for various purposes such as branding, promotion, announcements, or navigation.
<tgui-banner\n type="inline"\n (onCloseIcon)="onCloseIcon($event)"\n [beforeTemplate]="beforeTemplate"\n [calloutTemplate]="calloutTemplate"\n [headerTemplate]="headerTemplate"\n [descriptionTemplate]="descriptionTemplate"\n [buttonsTemplate]="buttonsTemplate"\n [backgroundTemplate]="backgroundTemplate">\n</tgui-banner>\n\n<ng-template #beforeTemplate>\n <tgui-icon24-qr></tgui-icon24-qr>\n</ng-template>\n\n<ng-template #calloutTemplate>\n Urgent notification\n</ng-template>\n\n<ng-template #headerTemplate>\n Introducing TON Space\n</ng-template>\n\n<ng-template #descriptionTemplate>\n Start exploring TON in a new, better way\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <tgui-button size="s">Try it out</tgui-button>\n <tgui-button size="s" mode="plain">Maybe later</tgui-button>\n</ng-template>The component accepts the following template inputs:
\nbeforeTemplate: Optional template displayed at the start of the banner, useful for iconscalloutTemplate: Optional template for callout text displayed above the headerheaderTemplate: Template for main header/title of the bannersubheaderTemplate: Optional template for text displayed below the headerdescriptionTemplate: Optional template for descriptive textbackgroundTemplate: Optional template for background contentbuttonsTemplate: Optional template for action buttonsThe icon to display in the top right corner. Default is "quote".
\n", "line": 77, "rawdescription": "\nThe icon to display in the top right corner. Default is \"quote\"." }, { "name": "text", "defaultValue": "inputOptional text to display as a headline above the content.
\n", "line": 80, "rawdescription": "\nOptional text to display as a headline above the content." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "IconContainerComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "TguiDynamicIconComponent", "type": "component" } ], "description": "Renders a stylized blockquote element, typically used for quotations or special text.\nThe component can display a text in the subheadline and content below it.\nThe component can include a customizable icon in the top right corner.
\n<tgui-blockquote icon="quote" text="Optional headline text">\n Content of the blockquote\n</tgui-blockquote>icon: Optional input to specify which icon to display in the top-right corner.\nDefault is "quote" icon. Uses the dynamic icon component.
text: Optional text to be displayed as a headline above the content.\nIf provided, it will be wrapped in the subheadline component.
Type of divider to use between breadcrumb items.
\n", "line": 125, "rawdescription": "\n\nType of divider to use between breadcrumb items.\n" }, { "name": "items", "defaultValue": "inputArray of breadcrumb items to display
\n", "line": 120, "rawdescription": "\n\nArray of breadcrumb items to display\n" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "BreadcrumbsItemComponent", "type": "component" }, { "name": "BreadcrumbsDotIconComponent", "type": "component" }, { "name": "BreadcrumbsSlashIconComponent", "type": "component" }, { "name": "TguiIcon16Chevron" } ], "description": "The Breadcrumbs component displays a navigation trail for users to follow back to the starting or entry point.\nIt supports customizable dividers to fit different design needs.
\nUsage:
\nExample :<tgui-breadcrumbs\n [items]="[\n { label: 'Home', url: '/' },\n { label: 'Catalog', url: '/catalog' },\n { label: 'Product' }\n ]"\n divider="slash"\n></tgui-breadcrumbs>Dot icon used in breadcrumb navigation as a separator
\n", "rawdescription": "\n\nDot icon used in breadcrumb navigation as a separator\n", "type": "component", "assetsDirs": [], "extends": [ "TguiIconBase" ] }, { "name": "BreadcrumbsItemComponent", "id": "component-BreadcrumbsItemComponent-3c4d243078d7833e3609b6367a5b62981d6499ba1f5b948ab83dabd6a1c09d268a3753f65e069d58a712af164953d57ed1f32162cd65f8c69f647809d0086913", "file": "src/lib/components/navigation/breadcrumbs/breadcrumbs-item.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-breadcrumbs-item", "styleUrls": [], "styles": [ "\n :host {\n cursor: pointer;\n padding: 8px 10px;\n border-radius: 8px;\n display: block;\n text-decoration: none;\n transition: opacity .15s ease-out;\n color: var(--tgui--hint_color);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n display: block;\n }\n\n :host:active {\n opacity: .5;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :host:hover {\n background: var(--tgui--tertiary_bg_color);\n }\n }\n " ], "template": "\nExternal URL for the breadcrumb item (href attribute)
\n", "line": 88, "rawdescription": "\n\nExternal URL for the breadcrumb item (href attribute)\n" }, { "name": "isExternalLink", "defaultValue": "computed(() => {\n return !!this.href() && !this.routerLink();\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Check if this item is an external link (has href)
\n", "line": 110, "rawdescription": "\n\nCheck if this item is an external link (has href)\n" }, { "name": "isInternalLink", "defaultValue": "computed(() => {\n return !!this.routerLink() || (!!this.url() && !this.href());\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Check if this item is an internal link (has routerLink)
\n", "line": 117, "rawdescription": "\n\nCheck if this item is an internal link (has routerLink)\n" }, { "name": "isLink", "defaultValue": "computed(() => {\n return this.isExternalLink() || this.isInternalLink() || !!this.url();\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed property to determine if the item is a link (either external or internal)
\n", "line": 103, "rawdescription": "\n\nComputed property to determine if the item is a link (either external or internal)\n" }, { "name": "routerLink", "defaultValue": "inputURL for internal navigation (routerLink)
\n", "line": 98, "rawdescription": "\n\nURL for internal navigation (routerLink)\n" }, { "name": "target", "defaultValue": "inputTarget attribute for external links
\n", "line": 93, "rawdescription": "\n\nTarget attribute for external links\n" }, { "name": "templateRef", "deprecated": false, "deprecationMessage": "", "type": "TemplateRefReference to the element template
\n", "line": 124, "rawdescription": "\n\nReference to the element template\n", "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TemplateRef" } ], "modifierKind": [ 170 ] }, { "name": "url", "defaultValue": "inputURL for the breadcrumb item
\n", "line": 83, "rawdescription": "\n\nURL for the breadcrumb item\n", "jsdoctags": [ { "pos": 2075, "end": 2121, "kind": 331, "id": 0, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "tagName": { "pos": 2076, "end": 2086, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "deprecated" }, "comment": "Use href or routerLink instead
\n" } ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAllows the host element to be an HTML anchor tag for navigation purposes\n", "description": "Allows the host element to be an HTML anchor tag for navigation purposes
\n", "line": 132, "type": "string | null", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "RouterModule", "type": "module" }, { "name": "SubheadlineComponent", "type": "component" } ], "description": "A component that represents a single item within a breadcrumb navigation.\nIt can be used standalone or as part of a BreadCrumbs collection.
\n", "rawdescription": "\n\nA component that represents a single item within a breadcrumb navigation.\nIt can be used standalone or as part of a BreadCrumbs collection.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "role": { "name": "role", "getSignature": { "name": "role", "type": "", "returnType": "string | null", "line": 132, "rawdescription": "\n\nAllows the host element to be an HTML anchor tag for navigation purposes\n", "description": "Allows the host element to be an HTML anchor tag for navigation purposes
\n" } } } }, { "name": "BreadcrumbsSlashIconComponent", "id": "component-BreadcrumbsSlashIconComponent-f4d33086ba43a7f39859c03e231d8565c59d30fba150c649f65a32ced8ae2052396f8dc063f9dda692c0bd0bc8b051baf1a82a86294a1a30958510079a5b0131", "file": "src/lib/components/navigation/breadcrumbs/icons/slash-icon.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-breadcrumbs-slash-icon", "styleUrls": [], "styles": [ "\n :host {\n display: flex;\n align-items: center;\n line-height: 0;\n }\n " ], "template": "Slash icon used in breadcrumb navigation as a separator
\n", "rawdescription": "\n\nSlash icon used in breadcrumb navigation as a separator\n", "type": "component", "assetsDirs": [], "extends": [ "TguiIconBase" ] }, { "name": "ButtonCellComponent", "id": "component-ButtonCellComponent-697ea520b0de46bbf8a3d1ab04bae2028559d4c1ce1aa71b97f138e947613f1b18d2511bc97110c2930a878c0735d93dbc28fac55bf7bcf6afe3886f80017516", "file": "src/lib/components/blocks/cell/components/button-cell/button-cell.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-button-cell", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host.button-cell-destructive {\n color: var(--tgui--destructive_text_color);\n }\n\n :host-context(.tgui-platform-ios) {\n --tgui--ripple-color: rgba(0, 0, 0, 0.2);\n }\n\n .wrapper {\n width: 100%;\n display: flex;\n align-items: center;\n \n\n gap: 24px;\n height: 48px;\n padding: 10px 24px;\n box-sizing: border-box;\n\n color: var(--tgui--link_color);\n border: none;\n background: transparent;\n }\n\n :host-context(.tgui-platform-ios) .wrapper {\n gap: 18px;\n height: 44px;\n padding: 8px 18px;\n }\n\n .before, .after {\n display: flex;\n align-items: center;\n }\n " ], "template": "Disables button interaction
\n", "line": 115, "rawdescription": "\nDisables button interaction", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "afterTemplate", "defaultValue": "inputTemplate displayed after the main content
\n", "line": 121, "rawdescription": "\nTemplate displayed after the main content" }, { "name": "beforeTemplate", "defaultValue": "inputTemplate displayed before the main content
\n", "line": 118, "rawdescription": "\nTemplate displayed before the main content" }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Disables button interaction
\n", "line": 115, "rawdescription": "\nDisables button interaction", "required": false }, { "name": "mode", "defaultValue": "input<'default' | 'destructive'>('default')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Determines the button cell's visual theme, influencing color and style.
\n", "line": 112, "rawdescription": "\nDetermines the button cell's visual theme, influencing color and style." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.button-cell-destructive", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nApply destructive mode class", "description": "Apply destructive mode class
\n", "line": 128, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "TappableComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "TextComponent", "type": "component" } ], "description": "Renders an interactive cell component with optional leading and trailing elements.\nDesigned to be flexible, supporting various content structures and interaction models within UI designs.
\n", "rawdescription": "\n\nRenders an interactive cell component with optional leading and trailing elements.\nDesigned to be flexible, supporting various content structures and interaction models within UI designs.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isDestructive": { "name": "isDestructive", "getSignature": { "name": "isDestructive", "type": "boolean", "returnType": "boolean", "line": 128, "rawdescription": "\nApply destructive mode class", "description": "Apply destructive mode class
\n" } } } }, { "name": "ButtonComponent", "id": "component-ButtonComponent-05f85e6de30b01f8d0cd4471971dc8744fda8437205fd3f3f8b04af9c7a97fe20b764e13b4977c01892d1b4c9a290f8e751745dd75b1d62f95641f563b8fb4d7", "file": "src/lib/components/blocks/button/button.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-button", "styleUrls": [], "styles": [ "\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 8px;\n text-decoration: none;\n box-sizing: border-box;\n max-inline-size: 100%;\n min-inline-size: 80px;\n position: relative;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n touch-action: manipulation; /* Optimization for mobile devices */\n }\n \n :host.stretched {\n inline-size: 100%;\n flex-grow: 1;\n }\n \n :host::after {\n content: '';\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity .15s ease-out;\n background: var(--tgui--bg_color);\n border-radius: inherit;\n pointer-events: none;\n\n }\n \n .button-tappable {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n }\n \n /* Wrapper for all button content */\n .button-content-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--tgui--button--gap);\n position: relative;\n z-index: 1;\n width: 100%;\n height: 100%;\n padding: var(--tgui--button--padding, 0);\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n }\n \n .before,\n .after {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n user-select: none;\n -webkit-user-select: none;\n }\n \n .content {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n z-index: var(--tgui--z-index--simple);\n position: relative; /* To be above ripple */\n user-select: none;\n -webkit-user-select: none;\n -webkit-touch-callout: none; /* Prevents context menu on iOS with long press */\n }\n \n .spinner {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: auto;\n background: inherit;\n border-radius: inherit;\n color: var(--tgui--button--spinner-color);\n z-index: 2; /* Raised above content */\n --tgui--spinner-color: var(--tgui--button--spinner-color);\n }\n \n /* Size Variants */\n :host.size-s {\n height: 36px;\n min-width: 34px;\n border-radius: 20px;\n --tgui--button--padding: 8px 12px;\n --tgui--button--gap: 6px;\n }\n \n :host.size-m {\n height: 42px;\n min-width: 42px;\n border-radius: 8px;\n --tgui--button--padding: 8px 14px;\n --tgui--button--gap: 8px;\n }\n \n :host.size-l {\n height: 50px;\n --tgui--button--padding: 10px 20px;\n --tgui--button--gap: 10px;\n }\n \n /* Mode Variants */\n :host.mode-filled {\n --tgui--button--hovered-opacity: .15;\n --tgui--button--spinner-color: var(--tgui--button_text_color);\n --tgui--ripple-color: rgba(255, 255, 255, 0.5);\n color: var(--tgui--button_text_color);\n background: var(--tgui--button_color);\n }\n \n :host.mode-bezeled {\n --tgui--button--hovered-opacity: .07;\n --tgui--button--spinner-color: var(--tgui--link_color);\n --tgui--ripple-color: rgba(0, 120, 255, 0.5);\n color: var(--tgui--link_color);\n background: var(--tgui--secondary_fill);\n }\n \n :host.mode-plain {\n --tgui--button--hovered-opacity: .03;\n --tgui--button--spinner-color: var(--tgui--plain_foreground);\n --tgui--ripple-color: rgba(0, 120, 255, 0.5);\n color: var(--tgui--link_color);\n background: transparent;\n }\n \n :host.mode-gray {\n --tgui--button--hovered-opacity: .5;\n --tgui--button--spinner-color: var(--tgui--plain_foreground);\n --tgui--ripple-color: rgba(0, 0, 0, 0.4);\n color: var(--tgui--plain_foreground);\n background: var(--tgui--plain_background);\n }\n \n :host.mode-outline {\n --tgui--button--hovered-opacity: .5;\n --tgui--button--spinner-color: var(--tgui--plain_foreground);\n --tgui--ripple-color: rgba(0, 0, 0, 0.3);\n color: var(--tgui--plain_foreground);\n background: inherit;\n box-shadow: 0 0 0 1px var(--tgui--outline);\n }\n \n :host.mode-white {\n --tgui--button--hovered-opacity: .5;\n --tgui--button--spinner-color: var(--tgui--surface_dark);\n --tgui--ripple-color: rgba(0, 0, 0, 0.3);\n background: var(--tgui--white);\n color: var(--tgui--black);\n }\n \n /* Platform Specific */\n :host-context(.tgui-platform-ios) :host.size-m {\n border-radius: 12px;\n }\n \n :host-context(.tgui-platform-ios) :host::after {\n content: unset;\n }\n \n /* Loading State */\n :host.loading .before,\n :host.loading .after,\n :host.loading .content {\n opacity: 0;\n }\n \n /* Disabled State */\n :host.disabled {\n opacity: 0.6;\n cursor: default;\n pointer-events: none;\n }\n \n /* Hover Effects */\n @media (hover: hover) and (pointer: fine) {\n :host:hover::after {\n opacity: var(--tgui--button--hovered-opacity);\n }\n }\n \n /* Button Typography Sizing */\n :host.size-l .content {\n font-size: var(--tgui--text--font_size);\n line-height: var(--tgui--text--line_height);\n font-weight: var(--tgui--font_weight--accent2);\n }\n \n :host.size-m .content,\n :host.size-s .content {\n font-size: var(--tgui--subheadline2--font_size);\n line-height: var(--tgui--subheadline2--line_height);\n font-weight: var(--tgui--font_weight--accent2);\n }\n " ], "template": "If true, the button will be disabled
\n", "line": 329, "rawdescription": "\n\nIf true, the button will be disabled\n", "required": false }, { "name": "loading", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, shows a loading indicator instead of button content
\n", "line": 324, "rawdescription": "\n\nIf true, shows a loading indicator instead of button content\n", "required": false }, { "name": "stretched", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, the button will stretch to the width of its container
\n", "line": 319, "rawdescription": "\n\nIf true, the button will stretch to the width of its container\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "afterTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRefTemplate for content after the main button text
\n", "line": 354, "rawdescription": "\n\nTemplate for content after the main button text\n", "decorators": [ { "name": "ContentChild", "stringifiedArguments": "'afterContent'" } ], "modifierKind": [ 170 ] }, { "name": "beforeTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRefTemplate for content before the main button text
\n", "line": 349, "rawdescription": "\n\nTemplate for content before the main button text\n", "decorators": [ { "name": "ContentChild", "stringifiedArguments": "'beforeContent'" } ], "modifierKind": [ 170 ] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, the button will be disabled
\n", "line": 329, "rawdescription": "\n\nIf true, the button will be disabled\n", "required": false }, { "name": "icon", "defaultValue": "inputIcon name to be displayed before the content
\n", "line": 344, "rawdescription": "\n\nIcon name to be displayed before the content\n" }, { "name": "interactiveAnimation", "defaultValue": "input<'opacity' | 'background'>('background')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Type of interactive animation ('opacity' | 'background')
\n", "line": 339, "rawdescription": "\n\nType of interactive animation ('opacity' | 'background')\n" }, { "name": "loading", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, shows a loading indicator instead of button content
\n", "line": 324, "rawdescription": "\n\nIf true, shows a loading indicator instead of button content\n", "required": false }, { "name": "mode", "defaultValue": "input<'filled' | 'bezeled' | 'plain' | 'gray' | 'outline' | 'white'>('filled')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Visual style of the button
\n", "line": 314, "rawdescription": "\n\nVisual style of the button\n" }, { "name": "size", "defaultValue": "input<'s' | 'm' | 'l'>('m')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Button size ('s', 'm', 'l')
\n", "line": 309, "rawdescription": "\n\nButton size ('s', 'm', 'l')\n" }, { "name": "stretched", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, the button will stretch to the width of its container
\n", "line": 319, "rawdescription": "\n\nIf true, the button will stretch to the width of its container\n", "required": false }, { "name": "type", "defaultValue": "input<'button' | 'submit' | 'reset'>('button')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Button type (for HTML type attribute)
\n", "line": 334, "rawdescription": "\n\nButton type (for HTML type attribute)\n" } ], "methodsClass": [ { "name": "onSelectStart", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 378, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'selectstart', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.disabled", "deprecated": false, "deprecationMessage": "", "line": 372, "type": "boolean", "decorators": [] }, { "name": "attr.type", "deprecated": false, "deprecationMessage": "", "line": 371, "type": "any", "decorators": [] }, { "name": "class.disabled", "deprecated": false, "deprecationMessage": "", "line": 369, "type": "any", "decorators": [] }, { "name": "class.loading", "deprecated": false, "deprecationMessage": "", "line": 368, "type": "any", "decorators": [] }, { "name": "class.mode-bezeled", "deprecated": false, "deprecationMessage": "", "line": 361, "type": "boolean", "decorators": [] }, { "name": "class.mode-filled", "deprecated": false, "deprecationMessage": "", "line": 360, "type": "boolean", "decorators": [] }, { "name": "class.mode-gray", "deprecated": false, "deprecationMessage": "", "line": 363, "type": "boolean", "decorators": [] }, { "name": "class.mode-outline", "deprecated": false, "deprecationMessage": "", "line": 364, "type": "boolean", "decorators": [] }, { "name": "class.mode-plain", "deprecated": false, "deprecationMessage": "", "line": 362, "type": "boolean", "decorators": [] }, { "name": "class.mode-white", "deprecated": false, "deprecationMessage": "", "line": 365, "type": "boolean", "decorators": [] }, { "name": "class.size-l", "deprecated": false, "deprecationMessage": "", "line": 358, "type": "boolean", "decorators": [] }, { "name": "class.size-m", "deprecated": false, "deprecationMessage": "", "line": 357, "type": "boolean", "decorators": [] }, { "name": "class.size-s", "deprecated": false, "deprecationMessage": "", "line": 356, "type": "boolean", "decorators": [] }, { "name": "class.stretched", "deprecated": false, "deprecationMessage": "", "line": 367, "type": "any", "decorators": [] } ], "hostListeners": [ { "name": "selectstart", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 378 } ], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "SpinnerComponent", "type": "component" }, { "name": "TappableComponent", "type": "component" }, { "name": "TguiDynamicIconComponent", "type": "component" }, { "name": "TextComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" } ], "description": "The Button component provides a customizable button with various styles and states.\nSupports different sizes, display modes, loading state, etc.
\n", "rawdescription": "\n\nThe Button component provides a customizable button with various styles and states.\nSupports different sizes, display modes, loading state, etc.\n", "type": "component", "assetsDirs": [], "extends": [], "implements": [ "OnInit" ], "accessors": { "isSizeS": { "name": "isSizeS", "getSignature": { "name": "isSizeS", "type": "", "returnType": "", "line": 356 } }, "isSizeM": { "name": "isSizeM", "getSignature": { "name": "isSizeM", "type": "", "returnType": "", "line": 357 } }, "isSizeL": { "name": "isSizeL", "getSignature": { "name": "isSizeL", "type": "", "returnType": "", "line": 358 } }, "isModeFilled": { "name": "isModeFilled", "getSignature": { "name": "isModeFilled", "type": "", "returnType": "", "line": 360 } }, "isModeBezeled": { "name": "isModeBezeled", "getSignature": { "name": "isModeBezeled", "type": "", "returnType": "", "line": 361 } }, "isModePlain": { "name": "isModePlain", "getSignature": { "name": "isModePlain", "type": "", "returnType": "", "line": 362 } }, "isModeGray": { "name": "isModeGray", "getSignature": { "name": "isModeGray", "type": "", "returnType": "", "line": 363 } }, "isModeOutline": { "name": "isModeOutline", "getSignature": { "name": "isModeOutline", "type": "", "returnType": "", "line": 364 } }, "isModeWhite": { "name": "isModeWhite", "getSignature": { "name": "isModeWhite", "type": "", "returnType": "", "line": 365 } }, "isStretched": { "name": "isStretched", "getSignature": { "name": "isStretched", "type": "", "returnType": "", "line": 367 } }, "isLoading": { "name": "isLoading", "getSignature": { "name": "isLoading", "type": "", "returnType": "", "line": 368 } }, "isDisabled": { "name": "isDisabled", "getSignature": { "name": "isDisabled", "type": "", "returnType": "", "line": 369 } }, "buttonType": { "name": "buttonType", "getSignature": { "name": "buttonType", "type": "", "returnType": "", "line": 371 } }, "buttonDisabled": { "name": "buttonDisabled", "getSignature": { "name": "buttonDisabled", "type": "", "returnType": "", "line": 372 } } } }, { "name": "CaptionComponent", "id": "component-CaptionComponent-e22dd2bd7f3d63ade06f471bf7c80d93109884d649a99f440403e0b550ac4f672e0320cf25d686277d0cddbe540da37ed2d4225f4afbaad88940e4ab2aa8378b", "file": "src/lib/components/typography/caption/caption.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-caption", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n \n :host.level-1 {\n font-size: var(--tgui--caption1--font_size);\n line-height: var(--tgui--caption1--line_height);\n }\n \n :host.level-2 {\n font-size: var(--tgui--caption2--font_size);\n line-height: var(--tgui--caption2--line_height);\n }\n \n :host.weight-1 {\n font-weight: var(--tgui--font_weight--accent1);\n }\n\n :host.weight-2 {\n font-weight: var(--tgui--font_weight--accent2);\n }\n\n :host.weight-3 {\n font-weight: var(--tgui--font_weight--accent3);\n }\n\n :host.caps {\n text-transform: uppercase;\n }\n " ], "template": "The size level of the caption, influencing its styling and typography size.
\n", "line": 53, "rawdescription": "\n\nThe size level of the caption, influencing its styling and typography size.\n" }, { "name": "tag", "defaultValue": "inputThe Caption component is a text wrapper that applies specific typographic styles,\nbased on the provided level prop. It's built on top of the Typography component,\nensuring consistent text styling across the application. It primarily serves for text\nthat acts as a small, descriptive label or annotation.
Optional header text for the cell
\n", "line": 24, "type": "string", "decorators": [] }, { "name": "isImage", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWhether the cell contains image content\n", "description": "Whether the cell contains image content
\n", "line": 19, "type": "boolean", "decorators": [] }, { "name": "subtitle", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional subtitle text for the cell\n", "description": "Optional subtitle text for the cell
\n", "line": 29, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nApply appropriate class based on the cell type", "description": "Apply appropriate class based on the cell type
\n", "line": 32, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "CardCell component that represents a content section within a Card.
\n", "rawdescription": "\n\nCardCell component that represents a content section within a Card.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "className": { "name": "className", "getSignature": { "name": "className", "type": "string", "returnType": "string", "line": 32, "rawdescription": "\nApply appropriate class based on the cell type", "description": "Apply appropriate class based on the cell type
\n" } } } }, { "name": "CardChipComponent", "id": "component-CardChipComponent-7be9b7fb7cdb6181d0463210d3fef17ac35ac08f2a03f01aa2b3014e82a88b255e8ae8402616a02314fcb3c2c9141915ae9c021bd590a98af470175c739d6817", "file": "src/lib/components/blocks/card/components/card-chip/card-chip.component.ts", "encapsulation": [], "entryComponents": [], "exportAs": "tguiCardChip", "inputs": [], "outputs": [], "providers": [], "selector": "tgui-card-chip", "styleUrls": [], "styles": [ "\n .tgui-card-chip__container {\n position: absolute;\n right: 16px;\n top: 16px;\n z-index: 1;\n }\n " ], "template": "Content to be placed after the main text
\n", "line": 38, "rawdescription": "\nContent to be placed after the main text", "required": false }, { "name": "before", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content to be placed before the main text
\n", "line": 35, "rawdescription": "\nContent to be placed before the main text", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "after", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content to be placed after the main text
\n", "line": 38, "rawdescription": "\nContent to be placed after the main text", "required": false }, { "name": "before", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content to be placed before the main text
\n", "line": 35, "rawdescription": "\nContent to be placed before the main text", "required": false }, { "name": "chipClassName", "defaultValue": "inputCustom class name for the chip component
\n", "line": 41, "rawdescription": "\nCustom class name for the chip component" }, { "name": "className", "defaultValue": "'tgui-card-chip'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "Apply base class
\n", "line": 44, "rawdescription": "\nApply base class", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class'" } ], "modifierKind": [ 170 ] }, { "name": "mode", "defaultValue": "input<'elevated' | 'mono' | 'outline'>('elevated')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Defines the visual style of the chip, inherits from the ChipComponent
\n", "line": 32, "rawdescription": "\nDefines the visual style of the chip, inherits from the ChipComponent" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class", "defaultValue": "'tgui-card-chip'", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nApply base class", "description": "Apply base class
\n", "line": 44, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "ChipComponent", "type": "component" } ], "description": "CardChip component that displays a small actionable or informational element on the Card\nLeverages the ChipComponent with fixed positioning for use within cards
\n", "rawdescription": "\n\nCardChip component that displays a small actionable or informational element on the Card\nLeverages the ChipComponent with fixed positioning for use within cards\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "CardComponent", "id": "component-CardComponent-0bb787d671b106b440b2d6196de001d439bfc9e9b8e10d8cb5c1748b204fd5aff4bf2979e2e9dd6891ac5811670d4a228a538198090b1a464baf176134a82759", "file": "src/lib/components/blocks/card/card.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "exportAs": "tguiCard", "inputs": [], "outputs": [], "providers": [], "selector": "tgui-card", "styleUrls": [ "./card.component.css" ], "styles": [], "templateUrl": [ "./card.component.html" ], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "image", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "URL of the image to display at the top of the card
\n", "line": 39, "rawdescription": "\n\nURL of the image to display at the top of the card\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "borderRadius", "defaultValue": "inputDefines the border radius of the card. Default is 24px.
\n", "line": 34, "rawdescription": "\n\nDefines the border radius of the card. Default is 24px.\n" }, { "name": "cardCells", "deprecated": false, "deprecationMessage": "", "type": "QueryListGet all child cells
\n", "line": 52, "rawdescription": "\nGet all child cells", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "CardCellComponent" } ], "modifierKind": [ 170 ] }, { "name": "customStyle", "defaultValue": "computed(() => ({\n 'border-radius': this.borderRadius()\n }))", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Custom style for card wrapper
\n", "line": 59, "rawdescription": "\n\nCustom style for card wrapper\n" }, { "name": "hasImage", "defaultValue": "computed(() => !!this.image())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Checks if the card has an image
\n", "line": 83, "rawdescription": "\n\nChecks if the card has an image\n" }, { "name": "image", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "URL of the image to display at the top of the card
\n", "line": 39, "rawdescription": "\n\nURL of the image to display at the top of the card\n", "required": false }, { "name": "imageAlt", "defaultValue": "inputAlt text for the image
\n", "line": 44, "rawdescription": "\n\nAlt text for the image\n" }, { "name": "imageHeight", "defaultValue": "inputHeight of the image block
\n", "line": 49, "rawdescription": "\n\nHeight of the image block\n" }, { "name": "imageStyle", "defaultValue": "computed(() => {\n if (!this.image()) return {};\n \n return {\n 'height': this.imageHeight(),\n 'background-image': `url(${this.image()})`,\n 'background-size': 'cover',\n 'background-position': 'center',\n 'border-top-left-radius': this.borderRadius(),\n 'border-top-right-radius': this.borderRadius(),\n 'overflow': 'hidden'\n };\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Styles for the image block
\n", "line": 66, "rawdescription": "\n\nStyles for the image block\n" }, { "name": "type", "defaultValue": "inputDefines the visual style of the card, influencing background, shadow, and border.
\n", "line": 29, "rawdescription": "\n\nDefines the visual style of the card, influencing background, shadow, and border.\n" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nApply appropriate class based on the type", "description": "Apply appropriate class based on the type
\n", "line": 97, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Serves as a container for card-styled UI elements, providing context for its child components.\nIt supports different visual styles and can encapsulate various content types.
\n", "rawdescription": "\n\nServes as a container for card-styled UI elements, providing context for its child components.\nIt supports different visual styles and can encapsulate various content types.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 83 }, "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "className": { "name": "className", "getSignature": { "name": "className", "type": "string", "returnType": "string", "line": 97, "rawdescription": "\nApply appropriate class based on the type", "description": "Apply appropriate class based on the type
\n" } } } }, { "name": "CellComponent", "id": "component-CellComponent-ccf84a84975d5033f8c7c37b4b1ad907585e21aa65970f407044040cb64be751359faeeddf0c4700bb54128575b8ac19c44d017f2b0f1ff7347c26a3ced1240b", "file": "src/lib/components/blocks/cell/cell.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-cell", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n position: relative;\n }\n\n .wrapper {\n --tgui--cell--middle--padding: 16px 0;\n\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 0 24px;\n }\n\n .wrapper--ios {\n --tgui--cell--middle--padding: 12px 0;\n gap: 16px;\n padding: 0 16px;\n }\n\n .wrapper--hovered {\n background: var(--tgui--tertiary_bg_color);\n }\n\n /* Label container styles */\n .label-container {\n display: block;\n cursor: pointer;\n }\n\n .before, .after {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .middle {\n display: flex;\n flex-direction: column;\n gap: 2px;\n \n flex-grow: 1;\n max-inline-size: 100%;\n min-inline-size: 0;\n \n padding: var(--tgui--cell--middle--padding);\n }\n\n .middle > *,\n .title {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .wrapper:not(.wrapper--multiline) .middle > *,\n .wrapper:not(.wrapper--multiline) .title {\n white-space: nowrap;\n }\n\n .subhead {\n color: var(--tgui--subtitle_text_color);\n }\n\n .head {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n }\n\n .hint {\n color: var(--tgui--hint_color);\n }\n\n .subtitle {\n color: var(--tgui--hint_color);\n }\n\n .description {\n color: var(--tgui--hint_color);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .wrapper:hover {\n background: var(--tgui--tertiary_bg_color);\n }\n }\n " ], "template": "\nDisabled state
\n", "line": 310, "rawdescription": "\nDisabled state", "required": false }, { "name": "hovered", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Controls the hover state of the component externally, useful for keyboard navigation
\n", "line": 298, "rawdescription": "\nControls the hover state of the component externally, useful for keyboard navigation", "required": false }, { "name": "multiline", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Allows for multiline content without truncation
\n", "line": 301, "rawdescription": "\nAllows for multiline content without truncation", "required": false }, { "name": "propagateEvents", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "When true, wraps content in semantic label for form control interaction
\n", "line": 313, "rawdescription": "\nWhen true, wraps content in semantic label for form control interaction", "required": false }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Readonly state
\n", "line": 307, "rawdescription": "\nReadonly state", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "afterTemplate", "defaultValue": "inputTemplate displayed on the right side of the cell
\n", "line": 337, "rawdescription": "\nTemplate displayed on the right side of the cell" }, { "name": "beforeTemplate", "defaultValue": "inputTemplate displayed on the left side of the cell
\n", "line": 334, "rawdescription": "\nTemplate displayed on the left side of the cell" }, { "name": "description", "defaultValue": "inputAdditional description displayed below the subtitle
\n", "line": 328, "rawdescription": "\nAdditional description displayed below the subtitle" }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Disabled state
\n", "line": 310, "rawdescription": "\nDisabled state", "required": false }, { "name": "hint", "defaultValue": "inputContent displayed alongside the header as a hint
\n", "line": 322, "rawdescription": "\nContent displayed alongside the header as a hint" }, { "name": "hovered", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Controls the hover state of the component externally, useful for keyboard navigation
\n", "line": 298, "rawdescription": "\nControls the hover state of the component externally, useful for keyboard navigation", "required": false }, { "name": "interactiveAnimation", "defaultValue": "input<'opacity' | 'background'>('background')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Interactive animation type
\n", "line": 304, "rawdescription": "\nInteractive animation type" }, { "name": "multiline", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Allows for multiline content without truncation
\n", "line": 301, "rawdescription": "\nAllows for multiline content without truncation", "required": false }, { "name": "propagateEvents", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "When true, wraps content in semantic label for form control interaction
\n", "line": 313, "rawdescription": "\nWhen true, wraps content in semantic label for form control interaction", "required": false }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Readonly state
\n", "line": 307, "rawdescription": "\nReadonly state", "required": false }, { "name": "subhead", "defaultValue": "inputContent displayed above the main content as a subheading
\n", "line": 316, "rawdescription": "\nContent displayed above the main content as a subheading" }, { "name": "subtitle", "defaultValue": "inputContent displayed below the header as a subtitle
\n", "line": 325, "rawdescription": "\nContent displayed below the header as a subtitle" }, { "name": "title", "defaultValue": "inputMain content displayed as a header
\n", "line": 319, "rawdescription": "\nMain content displayed as a header" }, { "name": "titleBadge", "defaultValue": "inputBadge component to be displayed next to the title
\n", "line": 331, "rawdescription": "\nBadge component to be displayed next to the title" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.ios", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nAdd iOS specific class", "description": "Add iOS specific class
\n", "line": 352, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "TappableComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "TitleComponent", "type": "component" }, { "name": "TextComponent", "type": "component" }, { "name": "CaptionComponent", "type": "component" } ], "description": "Cell component acts as a flexible and interactive container for various types of content,\nenabling the creation of complex list items, form fields, and more. It leverages the Tappable\ncomponent for interaction and is designed to be flexible and extensible.
<!-- Using input properties and template references -->\n<tgui-cell\n subhead="Subhead text"\n title="Title text"\n hint="Hint text"\n subtitle="Subtitle text"\n description="Description text"\n [titleBadge]="badgeTemplate"\n [beforeTemplate]="beforeTemplate"\n [afterTemplate]="afterTemplate">\n Main content\n</tgui-cell>\n\n<!-- Using with event propagation for form controls (combines semantic label with tappable effects) -->\n<tgui-cell\n [propagateEvents]="true"\n description="Click anywhere to toggle - includes ripple effects!"\n [afterTemplate]="switchTemplate">\n Toggle option\n</tgui-cell>\n\n<ng-template #beforeTemplate>\n <tgui-avatar size="l"></tgui-avatar>\n</ng-template>\n\n<ng-template #afterTemplate>\n <tgui-badge type="number">99</tgui-badge>\n</ng-template>\n\n<ng-template #switchTemplate>\n <tgui-switch [checked]="true"></tgui-switch>\n</ng-template>\n\n<ng-template #badgeTemplate>\n <tgui-badge type="dot"></tgui-badge>\n</ng-template>The component accepts the following template inputs:
\nbeforeTemplate: Optional template displayed on the left side of the cellafterTemplate: Optional template displayed on the right side of the celltitleBadge: Badge template displayed next to the titleAll other content should be provided via input properties:
\nsubhead: Optional content displayed above the main titletitle: Main title/header contenthint: Optional content displayed next to the titlesubtitle: Optional content displayed below the titledescription: Optional descriptive text below the subtitlepropagateEvents: When true, wraps content in semantic label for form control interactionIs the platform iOS
\n" } }, "isiOS": { "name": "isiOS", "getSignature": { "name": "isiOS", "type": "boolean", "returnType": "boolean", "line": 352, "rawdescription": "\nAdd iOS specific class", "description": "Add iOS specific class
\n" } } } }, { "name": "CheckboxComponent", "id": "component-CheckboxComponent-f186fa1a458d07fcd605e0866358376d0ef56c0bd350b54652fa1b54f87a2c0cd5172da6243a8d2fa1da7eafbc0d83814c6709e441efa08ebff0db60fd9e4e84", "file": "src/lib/components/form/checkbox/checkbox.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-checkbox", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n\n .wrapper {\n cursor: pointer;\n position: relative;\n }\n\n .wrapper--disabled {\n cursor: default;\n opacity: .3;\n }\n\n .icon {\n display: block;\n color: var(--tgui--outline);\n }\n\n .checkedIcon {\n position: absolute;\n top: 0;\n opacity: 0;\n color: var(--tgui--link_color);\n transition: opacity .15s ease-out;\n }\n\n .input:checked ~ .checkedIcon {\n opacity: 1;\n }\n " ], "template": "Set checked state
\n", "line": 108, "rawdescription": "\nSet checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set disabled state
\n", "line": 111, "rawdescription": "\nSet disabled state", "required": false }, { "name": "indeterminate", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set indeterminate state
\n", "line": 114, "rawdescription": "\nSet indeterminate state", "required": false } ], "outputsClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event when state changes
\n", "line": 118, "rawdescription": "\nEvent when state changes", "required": false } ], "propertiesClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event when state changes
\n", "line": 118, "rawdescription": "\nEvent when state changes", "required": false }, { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set checked state
\n", "line": 108, "rawdescription": "\nSet checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set disabled state
\n", "line": 111, "rawdescription": "\nSet disabled state", "required": false }, { "name": "indeterminate", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set indeterminate state
\n", "line": 114, "rawdescription": "\nSet indeterminate state", "required": false }, { "name": "name", "defaultValue": "inputValue of the name attribute for input
\n", "line": 102, "rawdescription": "\nValue of the name attribute for input" }, { "name": "value", "defaultValue": "inputValue of the value attribute for input
\n", "line": 105, "rawdescription": "\nValue of the value attribute for input" } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 122, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nChange event handler", "description": "Change event handler
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" }, { "name": "IconCheckboxComponent", "type": "component" }, { "name": "IconCheckboxCheckedComponent", "type": "component" }, { "name": "IconCheckboxIndeterminateComponent", "type": "component" } ], "description": "Renders a checkbox input with custom styling and optional indeterminate state.\nThe component visually hides the actual input element for accessibility\nwhile providing a custom styled appearance.
\n", "rawdescription": "\n\nRenders a checkbox input with custom styling and optional indeterminate state.\nThe component visually hides the actual input element for accessibility\nwhile providing a custom styled appearance.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "ChipComponent", "id": "component-ChipComponent-bd7bcd9e62403993de080bb738b84289eee5cc2c10ac412ee5c84f3597515571baadf3e5fec44b2534bbc8adf09a96ae51e32321e227fd7281ed5339b2ca3391", "file": "src/lib/components/form/chip/chip.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-chip", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n\n .tgui-chip {\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n box-sizing: border-box;\n padding: 8px 12px;\n border-radius: 12px;\n }\n\n .tgui-chip--elevated {\n background: var(--tgui--surface_primary);\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .05);\n }\n\n .tgui-chip--mono {\n background: var(--tgui--plain_background);\n }\n\n .tgui-chip--outline {\n border-radius: 12px;\n box-shadow: 0 0 0 1px var(--tgui--outline);\n }\n\n .tgui-chip__text {\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1 1 0;\n color: var(--tgui--plain_foreground);\n }\n\n .tgui-chip__before {\n margin-right: 2px;\n }\n\n .tgui-chip__after {\n display: flex;\n align-items: center;\n margin-top: 1.5px;\n color: var(--tgui--secondary_hint_color);\n }\n " ], "template": "Content or component to be placed after the main text, such as an icon indicating an action.
\n", "line": 95, "rawdescription": "\nContent or component to be placed after the main text, such as an icon indicating an action.", "required": false }, { "name": "before", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content or component to be placed before the main text, typically an icon or avatar.
\n", "line": 92, "rawdescription": "\nContent or component to be placed before the main text, typically an icon or avatar.", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "after", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content or component to be placed after the main text, such as an icon indicating an action.
\n", "line": 95, "rawdescription": "\nContent or component to be placed after the main text, such as an icon indicating an action.", "required": false }, { "name": "before", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content or component to be placed before the main text, typically an icon or avatar.
\n", "line": 92, "rawdescription": "\nContent or component to be placed before the main text, typically an icon or avatar.", "required": false }, { "name": "className", "defaultValue": "inputCustom class name
\n", "line": 98, "rawdescription": "\nCustom class name" }, { "name": "mode", "defaultValue": "input<'elevated' | 'mono' | 'outline'>('elevated')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Defines the visual style of the chip, affecting its background, border, and shadow.
\n", "line": 89, "rawdescription": "\nDefines the visual style of the chip, affecting its background, border, and shadow." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TappableComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" } ], "description": "Renders a compact element representing an input, attribute, or action.\nChips can include icons, text, or both, and are used to trigger actions,\ninput information, or represent a complex piece of information in a compact form.
\n", "rawdescription": "\n\nRenders a compact element representing an input, attribute, or action.\nChips can include icons, text, or both, and are used to trigger actions,\ninput information, or represent a complex piece of information in a compact form.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "CircularProgressComponent", "id": "component-CircularProgressComponent-d4702da2c88fcfad9362ca95d89df99ed6c03eec2201c66bf72b4fe4d2a3b8d8ca1407ce2a31c06c2be1792278923fe78ab76dab2c90b6d16210ffce9036db2a", "file": "src/lib/components/feedback/circular-progress/circular-progress.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-circular-progress", "styleUrls": [], "styles": [ "\n .wrapper {\n stroke: var(--tgui--link_color);\n transform: rotate(-90deg);\n }\n " ], "template": "Current progress of the circular indicator, expressed as a percentage from 0 to 100.
\n", "line": 73, "rawdescription": "\n\nCurrent progress of the circular indicator, expressed as a percentage from 0 to 100.\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "circleAttrs", "defaultValue": "computedComputed circle attributes based on size
\n", "line": 78, "rawdescription": "\n\nComputed circle attributes based on size\n" }, { "name": "circleSize", "defaultValue": "computedComputed circle center position (half of circle size)
\n", "line": 85, "rawdescription": "\n\nComputed circle center position (half of circle size)\n" }, { "name": "circumference", "defaultValue": "computedComputed circumference of the circle
\n", "line": 92, "rawdescription": "\n\nComputed circumference of the circle\n" }, { "name": "dashOffset", "defaultValue": "computedComputed dash offset based on progress
\n", "line": 100, "rawdescription": "\n\nComputed dash offset based on progress\n" }, { "name": "progress", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Current progress of the circular indicator, expressed as a percentage from 0 to 100.
\n", "line": 73, "rawdescription": "\n\nCurrent progress of the circular indicator, expressed as a percentage from 0 to 100.\n", "required": false }, { "name": "size", "defaultValue": "inputSpecifies the size of the circular progress indicator.\nCan be 'small', 'medium', or 'large'.
\n", "line": 68, "rawdescription": "\n\nSpecifies the size of the circular progress indicator.\nCan be 'small', 'medium', or 'large'.\n" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Renders a circular progress indicator, useful for displaying loading states or progress metrics.\nThe component dynamically adjusts its size and stroke based on the provided size input and visually represents\nthe progress input as a percentage of the circle's circumference.
Content to be displayed before the color input
\n", "line": 143, "rawdescription": "\nContent to be displayed before the color input", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the input is disabled
\n", "line": 155, "rawdescription": "\nWhether the input is disabled", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "before", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Content to be displayed before the color input
\n", "line": 143, "rawdescription": "\nContent to be displayed before the color input", "required": false }, { "name": "class", "defaultValue": "inputCSS class to apply to the component
\n", "line": 158, "rawdescription": "\nCSS class to apply to the component" }, { "name": "defaultValue", "defaultValue": "inputThe default color value
\n", "line": 152, "rawdescription": "\nThe default color value" }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the input is disabled
\n", "line": 155, "rawdescription": "\nWhether the input is disabled", "required": false }, { "name": "header", "defaultValue": "inputThe header label for the color input
\n", "line": 140, "rawdescription": "\nThe header label for the color input" }, { "name": "onChange", "defaultValue": "input<((event: Event) => void) | undefined>(undefined)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event handler for color change
\n", "line": 161, "rawdescription": "\nEvent handler for color change" }, { "name": "status", "defaultValue": "input<'error' | 'default' | 'focused'>('default')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The status of the input - error, default or focused
\n", "line": 146, "rawdescription": "\nThe status of the input - error, default or focused" }, { "name": "value", "defaultValue": "inputThe current color value
\n", "line": 149, "rawdescription": "\nThe current color value" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "FormInputComponent", "type": "component" }, { "name": "TextComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "Renders a color picker input within a form structure, displaying the selected color value.\nIt adapts the text style based on the platform and supports additional properties like header and status.
\n", "rawdescription": "\n\nRenders a color picker input within a form structure, displaying the selected color value.\nIt adapts the text style based on the platform and supports additional properties like header and status.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 166 }, "extends": [] }, { "name": "CompactPaginationComponent", "id": "component-CompactPaginationComponent-a901f159f018409955df11b1c3432a744833a1dedcbe5e7892312bdc53b6b1f61aa339ff62caba8e2e3fc30ec1ce03a28989083831a514273172ce4c2ea67d8f", "file": "src/lib/components/navigation/compact-pagination/compact-pagination.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-compact-pagination", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n \n .pagination-container {\n --tgui--compact-pagination--dot--opacity--selected: .1;\n --tgui--compact-pagination--dot--background--selected: var(--tgui--link_color);\n \n display: inline-flex;\n gap: 8px;\n padding: 4px;\n }\n \n :host.ambient .pagination-container {\n --tgui--compact-pagination--dot--opacity--selected: .25;\n --tgui--compact-pagination--dot--background--selected: var(--tgui--white);\n \n padding: 8px 9px;\n gap: 6px;\n border-radius: 28px;\n background: rgba(0, 0, 0, .25);\n backdrop-filter: blur(22px);\n -webkit-backdrop-filter: blur(22px);\n }\n \n :host.white .pagination-container {\n --tgui--compact-pagination--dot--opacity--selected: .25;\n --tgui--compact-pagination--dot--background--selected: var(--tgui--white);\n \n gap: 6px;\n padding: 0;\n }\n " ], "template": "Selected index
\n", "line": 81, "rawdescription": "\nSelected index", "required": false } ], "outputsClass": [ { "name": "selectedIndexChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Selected index change event
\n", "line": 84, "rawdescription": "\nSelected index change event", "required": false } ], "propertiesClass": [ { "name": "mode", "defaultValue": "input<'default' | 'ambient' | 'white'>('default')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Mode of the pagination
\n", "line": 78, "rawdescription": "\nMode of the pagination" }, { "name": "paginationItems", "deprecated": false, "deprecationMessage": "", "type": "QueryListGet all pagination item components
\n", "line": 94, "rawdescription": "\nGet all pagination item components", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "CompactPaginationItemComponent" } ], "modifierKind": [ 170 ] }, { "name": "selectedIndex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Selected index
\n", "line": 81, "rawdescription": "\nSelected index", "required": false }, { "name": "selectedIndexChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Selected index change event
\n", "line": 84, "rawdescription": "\nSelected index change event", "required": false } ], "methodsClass": [ { "name": "selectItem", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 131, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSelect item by index", "description": "Select item by index
\n", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.ambient", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHost bindings for different modes", "description": "Host bindings for different modes
\n", "line": 108, "type": "boolean", "decorators": [] }, { "name": "class.white", "deprecated": false, "deprecationMessage": "", "line": 113, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "CompactPagination component displays a set of dots for pagination.\nIt's typically used in carousels, sliders, or any component requiring compact pagination controls.
\nThe component supports different visual modes and manages the state of its pagination items.
\n", "rawdescription": "\n\nCompactPagination component displays a set of dots for pagination.\nIt's typically used in carousels, sliders, or any component requiring compact pagination controls.\n\nThe component supports different visual modes and manages the state of its pagination items.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 97 }, "extends": [], "implements": [ "AfterContentInit", "OnDestroy" ], "accessors": { "isAmbient": { "name": "isAmbient", "getSignature": { "name": "isAmbient", "type": "boolean", "returnType": "boolean", "line": 108, "rawdescription": "\nHost bindings for different modes", "description": "Host bindings for different modes
\n" } }, "isWhite": { "name": "isWhite", "getSignature": { "name": "isWhite", "type": "boolean", "returnType": "boolean", "line": 113 } } } }, { "name": "CompactPaginationItemComponent", "id": "component-CompactPaginationItemComponent-762adf9dde64e6711e0263ff4c95b40c4990f8bc35f18031b0087a718cd412d943c2e4f9bd3d281708d11b7dee7709a0b71279b11fec3886c17ef03551cd5323", "file": "src/lib/components/navigation/compact-pagination/compact-pagination-item.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-compact-pagination-item", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n \n button {\n cursor: pointer;\n display: block;\n \n width: 8px;\n height: 8px;\n \n padding: 0;\n border: none;\n border-radius: 50%;\n \n transition: opacity .15s ease-in-out;\n opacity: var(--tgui--compact-pagination--dot--opacity--selected, .25);\n background: var(--tgui--compact-pagination--dot--background--selected, var(--tgui--link_color));\n }\n \n :host.selected button {\n opacity: 1;\n }\n " ], "template": "External selected state
\n", "line": 69, "rawdescription": "\nExternal selected state", "required": false } ], "outputsClass": [ { "name": "select", "defaultValue": "new EventEmitterSelect event
\n", "line": 84, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "hasContent", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Flag to determine if content exists
\n", "line": 81, "rawdescription": "\nFlag to determine if content exists" }, { "name": "isSelectedValue", "defaultValue": "computed(() => this._isSelected() || this.selected())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed selected value
\n", "line": 75, "rawdescription": "\nComputed selected value" }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "External selected state
\n", "line": 69, "rawdescription": "\nExternal selected state", "required": false } ], "methodsClass": [ { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 105, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nClick handler", "description": "Click handler
\n" }, { "name": "setSelected", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 112, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPublic method to set selected state from parent component\n", "description": "Public method to set selected state from parent component
\n", "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.selected", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHost binding for selected class", "description": "Host binding for selected class
\n", "line": 100, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "CompactPaginationItem component represents an individual dot in a compact pagination.\nIt visually indicates whether it is selected and provides accessibility features.
\n", "rawdescription": "\n\nCompactPaginationItem component represents an individual dot in a compact pagination.\nIt visually indicates whether it is selected and provides accessibility features.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 84 }, "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "isSelected": { "name": "isSelected", "getSignature": { "name": "isSelected", "type": "boolean", "returnType": "boolean", "line": 100, "rawdescription": "\nHost binding for selected class", "description": "Host binding for selected class
\n" } } } }, { "name": "CustomAfterTemplateStoryComponent", "id": "component-CustomAfterTemplateStoryComponent-97eb77a7efb211f050b4dd8f22d4a3703be73e56cd1d33dc5a7d1ce50994787759bf94e6b79cfa4060988d1be6d737c8a50360de16ab33b850d7f3b14424f23f", "file": "src/lib/components/blocks/accordion/stories/accordion.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-custom-after-template-story", "styleUrls": [], "styles": [], "template": "This accordion uses a custom after template instead of the default chevron.
\nYou can put any template content in the after slot, like badges, buttons, or other components.
\nThis is a default accordion with the standard chevron icon.
\n\n This content adapts to the current theme and platform.\n The background, text colors, and other CSS variables change automatically.\n
\nRepresents a horizontal line used to separate content within a layout or component.\nThe component allows customization through custom CSS classes.
\n", "rawdescription": "\n\nRepresents a horizontal line used to separate content within a layout or component.\nThe component allows customization through custom CSS classes.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "FileInputComponent", "id": "component-FileInputComponent-a394be86370df40696e3b6a9d3164d203b569a4f1fadbcbfa01164e167f3d135dd1d85a1b105895112e08cb08cfa072c46308752586c22dec72ea2b93ffc9952", "file": "src/lib/components/form/file-input/file-input.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-file-input", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n \n .wrapper {\n display: flex;\n flex-direction: column;\n }\n \n .file-label {\n display: flex;\n align-items: center;\n width: 100%;\n cursor: pointer;\n }\n " ], "template": "Whether the input is disabled
\n", "line": 81, "rawdescription": "\nWhether the input is disabled", "required": false }, { "name": "multiple", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether multiple files can be selected
\n", "line": 78, "rawdescription": "\nWhether multiple files can be selected", "required": false } ], "outputsClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Emitted when files are selected
\n", "line": 87, "rawdescription": "\nEmitted when files are selected", "required": false } ], "propertiesClass": [ { "name": "accept", "defaultValue": "inputFile types that the input should accept
\n", "line": 75, "rawdescription": "\nFile types that the input should accept" }, { "name": "beforeTemplate", "defaultValue": "inputTemplate displayed before the main content
\n", "line": 84, "rawdescription": "\nTemplate displayed before the main content" }, { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Emitted when files are selected
\n", "line": 87, "rawdescription": "\nEmitted when files are selected", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the input is disabled
\n", "line": 81, "rawdescription": "\nWhether the input is disabled", "required": false }, { "name": "label", "defaultValue": "inputText label for the file input, used as the button label
\n", "line": 72, "rawdescription": "\nText label for the file input, used as the button label" }, { "name": "multiple", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether multiple files can be selected
\n", "line": 78, "rawdescription": "\nWhether multiple files can be selected", "required": false } ], "methodsClass": [ { "name": "handleChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 92, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles the change event when files are selected\n", "description": "Handles the change event when files are selected
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "ButtonCellComponent", "type": "component" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "Renders a file input disguised as a button, enhancing the user interface and improving usability.\nIt leverages the ButtonCell component for consistent styling across the application.
This component provides a flexible way to create a layout that is fixed to either the top or bottom of its parent container.\nIt's useful for creating headers, footers, or any element that should remain in view regardless of the scrolling content.
\n", "rawdescription": "\n\nThis component provides a flexible way to create a layout that is fixed to either the top or bottom of its parent container.\nIt's useful for creating headers, footers, or any element that should remain in view regardless of the scrolling content.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isTopPosition": { "name": "isTopPosition", "getSignature": { "name": "isTopPosition", "type": "boolean", "returnType": "boolean", "line": 55 } }, "isBottomPosition": { "name": "isBottomPosition", "getSignature": { "name": "isBottomPosition", "type": "boolean", "returnType": "boolean", "line": 60 } } } }, { "name": "FloatingArrowComponent", "id": "component-FloatingArrowComponent-0fdbe28f910f72f7fa3c3eacb532345f4eb9a8d6ca5fd895c03109a809f133fd1f0d6346641042298058f8e31a936e7a3a0d8ca5845cb9b9daf1da679228e1d8", "file": "src/lib/components/overlays/popper/components/floating-arrow/floating-arrow.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-floating-arrow", "styleUrls": [], "styles": [ "\n :host {\n position: absolute;\n color: inherit;\n pointer-events: none;\n z-index: 0;\n }\n\n :host.placement-right {\n transform: rotate(90deg) translate(50%, -50%);\n transform-origin: right;\n }\n\n :host.placement-bottom {\n transform: rotate(180deg);\n }\n\n :host.placement-left {\n transform: rotate(-90deg) translate(-50%, -50%);\n transform-origin: left;\n }\n\n .icon {\n display: block;\n transform: translateY(1px);\n }\n " ], "template": "FloatingArrow dynamically positions an arrow indicator relative to a floating element,\nsuch as a tooltip to signify its association with a target element.\nSupports custom arrow icons and positioning adjustments.
\n", "rawdescription": "\n\nFloatingArrow dynamically positions an arrow indicator relative to a floating element,\nsuch as a tooltip to signify its association with a target element.\nSupports custom arrow icons and positioning adjustments.\n", "type": "component", "assetsDirs": [], "extends": [], "implements": [ "OnInit", "AfterViewInit", "OnChanges" ] }, { "name": "FormInputComponent", "id": "component-FormInputComponent-339033ba79b2d5dba5221569e9b472ac1736b93bd6be029a9db2a6f6b30876da3659abff29b823cc4538bb7251b35e28cca30d684b6d4b237a8023afe3d729d7", "file": "src/lib/components/form/form-input/form-input.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-form-input", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n\n .wrapper {\n position: relative;\n width: 100%;\n }\n\n .wrapper.platform-base {\n padding: 20px 22px 16px 22px;\n background: var(--tgui--bg_color);\n }\n\n .wrapper.platform-base .title {\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n top: 6px;\n left: 32px;\n max-width: calc(100% - 32px * 2 - 22px);\n border-radius: 5px;\n padding: 0 6px;\n color: var(--tgui--secondary_hint_color);\n background: var(--tgui--bg_color);\n }\n\n .wrapper.disabled {\n pointer-events: none;\n }\n\n .wrapper.platform-ios.disabled {\n opacity: .35;\n }\n\n .wrapper.platform-base.disabled::after {\n content: '';\n position: absolute;\n inset: 0;\n opacity: .5;\n background: var(--tgui--bg_color);\n }\n\n .body {\n padding: 12px 16px;\n gap: 12px;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n }\n\n .before,\n .after {\n display: flex;\n }\n\n .wrapper.platform-base .body {\n border-radius: 14px;\n box-shadow: 0 0 0 2px var(--tgui--outline);\n }\n\n .wrapper.platform-base.status-error .title {\n color: var(--tgui--destructive_text_color);\n }\n\n .wrapper.platform-base.status-error .body {\n box-shadow: 0 0 0 2px var(--tgui--destructive_text_color);\n }\n\n .wrapper.platform-base.status-focused .title {\n color: var(--tgui--link_color);\n }\n\n .wrapper.platform-base.status-focused .body {\n box-shadow: 0 0 0 2px var(--tgui--link_color);\n }\n\n .wrapper.platform-ios .body {\n border-radius: 12px;\n min-height: 48px;\n background: var(--tgui--bg_color);\n }\n\n .wrapper.platform-ios.status-error .body {\n box-shadow: 0 0 0 1.5px var(--tgui--destructive_text_color);\n }\n " ], "template": "Indicates if there's content to be displayed after the form input (legacy support)
\n", "line": 206, "rawdescription": "\nIndicates if there's content to be displayed after the form input (legacy support)", "required": false }, { "name": "before", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Indicates if there's content to be displayed before the form input (legacy support)
\n", "line": 203, "rawdescription": "\nIndicates if there's content to be displayed before the form input (legacy support)", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Indicates if the form input is disabled
\n", "line": 209, "rawdescription": "\nIndicates if the form input is disabled", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "after", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Indicates if there's content to be displayed after the form input (legacy support)
\n", "line": 206, "rawdescription": "\nIndicates if there's content to be displayed after the form input (legacy support)", "required": false }, { "name": "afterTemplate", "defaultValue": "computed(() => {\n const content = this.inputAfter();\n return content instanceof TemplateRef ? content : null;\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Returns the after content as a TemplateRef if it is one
\n", "line": 245, "rawdescription": "\nReturns the after content as a TemplateRef if it is one" }, { "name": "before", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Indicates if there's content to be displayed before the form input (legacy support)
\n", "line": 203, "rawdescription": "\nIndicates if there's content to be displayed before the form input (legacy support)", "required": false }, { "name": "beforeTemplate", "defaultValue": "computed(() => {\n const content = this.inputBefore();\n return content instanceof TemplateRef ? content : null;\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Returns the before content as a TemplateRef if it is one
\n", "line": 239, "rawdescription": "\nReturns the before content as a TemplateRef if it is one" }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Indicates if the form input is disabled
\n", "line": 209, "rawdescription": "\nIndicates if the form input is disabled", "required": false }, { "name": "effectiveStatus", "defaultValue": "computed(() => {\n // If status is explicitly set, use it\n if (this.status() !== 'default') {\n return this.status();\n }\n \n // Otherwise derive from focus state\n return this.isFocused() ? 'focused' : 'default';\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Combines explicitly set status with internal focus state
\n", "line": 216, "rawdescription": "\nCombines explicitly set status with internal focus state" }, { "name": "hasAfter", "defaultValue": "computed(() => this.after() || this.inputAfter() !== null)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Checks if there's content to display after the input
\n", "line": 230, "rawdescription": "\nChecks if there's content to display after the input" }, { "name": "hasBefore", "defaultValue": "computed(() => this.before() || this.inputBefore() !== null)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Checks if there's content to display before the input
\n", "line": 227, "rawdescription": "\nChecks if there's content to display before the input" }, { "name": "header", "defaultValue": "inputOptional header content, displayed above the form input on base platform
\n", "line": 194, "rawdescription": "\nOptional header content, displayed above the form input on base platform" }, { "name": "inputAfter", "defaultValue": "inputContent to be displayed after the form input (can be string or TemplateRef)
\n", "line": 200, "rawdescription": "\nContent to be displayed after the form input (can be string or TemplateRef)" }, { "name": "inputBefore", "defaultValue": "inputContent to be displayed before the form input (can be string or TemplateRef)
\n", "line": 197, "rawdescription": "\nContent to be displayed before the form input (can be string or TemplateRef)" }, { "name": "isAfterString", "defaultValue": "computed(() => typeof this.inputAfter() === 'string')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Checks if the after content is a string
\n", "line": 236, "rawdescription": "\nChecks if the after content is a string" }, { "name": "isBeforeString", "defaultValue": "computed(() => typeof this.inputBefore() === 'string')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Checks if the before content is a string
\n", "line": 233, "rawdescription": "\nChecks if the before content is a string" }, { "name": "status", "defaultValue": "input<'default' | 'error' | 'focused'>('default')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Defines the visual state of the form input
\n", "line": 191, "rawdescription": "\nDefines the visual state of the form input" } ], "methodsClass": [ { "name": "onFocusIn", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 252, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusin'" } ], "modifierKind": [ 170 ] }, { "name": "onFocusOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 259, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout'" } ], "modifierKind": [ 170 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "focusin", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 252 }, { "name": "focusout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 259 } ], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "FormInputTitleComponent", "type": "component" } ], "description": "FormInput is a base wrapper component for form elements.\nIt provides common styling, layout, and behavior for form inputs.
\nFeatures:
\nFormInputTitle component that displays appropriate typography based on platform\nUsed internally by FormInput to display the header
\n", "rawdescription": "\n\nFormInputTitle component that displays appropriate typography based on platform\nUsed internally by FormInput to display the header\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "HeadlineComponent", "id": "component-HeadlineComponent-8d6296af87f4f7754137e2a42928fc42c711b0f5bfadf81dd7042b2a9a842794d4f0a7c960bfdf4ea8e149cca41a6bd2c7072ebc8f49de5460f4b4c8c1317b3b", "file": "src/lib/components/typography/headline/headline.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-headline", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n \n :host.level-1 {\n font-size: var(--tgui--headline--font_size);\n line-height: var(--tgui--headline--line_height);\n }\n \n :host.level-2 {\n font-size: calc(var(--tgui--headline--font_size) * 0.95);\n line-height: var(--tgui--headline--line_height);\n }\n \n :host.weight-1 {\n font-weight: var(--tgui--font_weight--accent1);\n }\n\n :host.weight-2 {\n font-weight: var(--tgui--font_weight--accent2);\n }\n\n :host.weight-3 {\n font-weight: var(--tgui--font_weight--accent3);\n }\n\n :host.caps {\n text-transform: uppercase;\n }\n " ], "template": "The size level of the headline, influencing its styling.
\n", "line": 54, "rawdescription": "\n\nThe size level of the headline, influencing its styling.\n" }, { "name": "tag", "defaultValue": "inputThe Headline component serves as a wrapper for text that is intended to be displayed prominently,\ntypically used for section headings or important titles within the application. It leverages the Typography\ncomponent for consistent typographic styling, offering a range of customization options through its props.\nThe component defaults to an <h5> HTML tag, providing semantic meaning and ensuring good SEO practices,\nbut can be customized as needed.
Disables the button
\n", "line": 42, "rawdescription": "\nDisables the button", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Disables the button
\n", "line": 42, "rawdescription": "\nDisables the button", "required": false }, { "name": "interactiveAnimation", "defaultValue": "input<'opacity' | 'background'>('background')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Type of interactive animation
\n", "line": 45, "rawdescription": "\nType of interactive animation" }, { "name": "mode", "defaultValue": "input<'filled' | 'bezeled' | 'plain' | 'gray' | 'outline' | 'white'>('bezeled')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Defines the button's visual style, affecting its color and background.
\n", "line": 39, "rawdescription": "\nDefines the button's visual style, affecting its color and background." }, { "name": "size", "defaultValue": "input<'s' | 'm' | 'l'>('m')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Specifies the button size, affecting icon scaling. Recommended icon sizes are 20px for 's', 24px for 'm', and 28px for 'l'.
\n", "line": 36, "rawdescription": "\nSpecifies the button size, affecting icon scaling. Recommended icon sizes are 20px for 's', 24px for 'm', and 28px for 'l'." }, { "name": "type", "defaultValue": "input<'button' | 'submit' | 'reset'>('button')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Type of button
\n", "line": 48, "rawdescription": "\nType of button" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.disabled", "deprecated": false, "deprecationMessage": "", "line": 68, "type": "boolean", "decorators": [] }, { "name": "attr.type", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "any", "decorators": [] }, { "name": "class.disabled", "deprecated": false, "deprecationMessage": "", "line": 66, "type": "any", "decorators": [] }, { "name": "class.mode-bezeled", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "boolean", "decorators": [] }, { "name": "class.mode-filled", "deprecated": false, "deprecationMessage": "", "line": 58, "type": "boolean", "decorators": [] }, { "name": "class.mode-gray", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "boolean", "decorators": [] }, { "name": "class.mode-outline", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] }, { "name": "class.mode-plain", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "boolean", "decorators": [] }, { "name": "class.mode-white", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "boolean", "decorators": [] }, { "name": "class.size-l", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "boolean", "decorators": [] }, { "name": "class.size-m", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "boolean", "decorators": [] }, { "name": "class.size-s", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TappableComponent", "type": "component" } ], "description": "Renders an icon button with customizable size and mode. It utilizes the Tappable component for enhanced\ntouch interaction, allowing it to serve various UI actions efficiently.
Icon component for checkbox in checked state
\n", "rawdescription": "\n\nIcon component for checkbox in checked state\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconCheckboxComponent", "id": "component-IconCheckboxComponent-63d99ab6ac5ea053f9978856b0031010a7bfb77b9d86d64bbeaee59b9f8c9965b2da0e4e5d7d54b598754bb0dd37852f30c98a6d108e4c00f794ed5f34a1258a", "file": "src/lib/components/form/checkbox/icons/checkbox.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icon-checkbox", "styleUrls": [], "styles": [], "template": "\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "className", "defaultValue": "inputIcon component for checkbox in unchecked state
\n", "rawdescription": "\n\nIcon component for checkbox in unchecked state\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconCheckboxIndeterminateComponent", "id": "component-IconCheckboxIndeterminateComponent-cc03266fc8f80bcc9117109f4ffc9d281eb09bf3f86e2407d1ba5d159fbebe388dc413aa9a238fa705c1a5bae1f57c3c953900f60337e1268bed8a206c8bd354", "file": "src/lib/components/form/checkbox/icons/checkbox-indeterminate.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icon-checkbox-indeterminate", "styleUrls": [], "styles": [], "template": "\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "className", "defaultValue": "inputIcon component for checkbox in indeterminate state
\n", "rawdescription": "\n\nIcon component for checkbox in indeterminate state\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconContainerComponent", "id": "component-IconContainerComponent-ec8dd292badc8343eefcd514aea5dbe48262f73661fbff511a0c33729ce7cc08aae44cc59e71037806fca8e44d37fe0b6c624263050a5553bb503c6de6aed340", "file": "src/lib/components/blocks/icon-container/icon-container.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icon-container", "styleUrls": [], "styles": [ "\n :host {\n display: inline-flex;\n color: var(--tgui--link_color);\n }\n " ], "template": "Icon container component provides a wrapper for icons with proper styling
\n", "rawdescription": "\n\nIcon container component provides a wrapper for icons with proper styling\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconHeartComponent", "id": "component-IconHeartComponent-5542d47a3b7cfec9cf3003386d8bd50f811fffd69324b991cc8f781f109eb15398528cfe95b0edc90cac48134bf80b841ae031e8d29d41bb3b823505006760e6", "file": "src/lib/components/form/rating/story/custom-icon.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icon-heart", "styleUrls": [], "styles": [], "template": "This is a placeholder component for demonstrating custom icons in the Rating component.\nIn the future, you could replace the star icon with this or any other SVG icon.
\n", "rawdescription": "\n\nThis is a placeholder component for demonstrating custom icons in the Rating component.\nIn the future, you could replace the star icon with this or any other SVG icon.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconRadioCheckedComponent", "id": "component-IconRadioCheckedComponent-ceef2e20efce4d287f2beb851159e9c6914d350fbbd8e9658d361f8a3a8fa0d30b2edaea438b7ddfe04d342ffc68cced9f7c09ad951e226fa2a262737cedd505", "file": "src/lib/components/form/radio/icons/radio-checked.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icon-radio-checked", "styleUrls": [], "styles": [], "template": "\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "className", "defaultValue": "inputIcon component for radio button in checked state
\n", "rawdescription": "\n\nIcon component for radio button in checked state\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconRadioComponent", "id": "component-IconRadioComponent-73f5c9f9f4011ffc2201a0ac4e8be646dd99d679c65c1b3d5b2954c65dd15f81fe80b6d5e6f32c9fe5cc427810d67ca931107ec56ae0451c26fbb78778e2eb12", "file": "src/lib/components/form/radio/icons/radio.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icon-radio", "styleUrls": [], "styles": [], "template": "\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "className", "defaultValue": "inputIcon component for radio button in unchecked state
\n", "rawdescription": "\n\nIcon component for radio button in unchecked state\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IconsShowcaseComponent", "id": "component-IconsShowcaseComponent-1e456cf6e75df3bc88b746ef94c4fe0b4899f75dbf2e5518816396eb6fd9e2a086bd8bae474936528689650748dd54afe56919ae2bf844248e65c62141f1ab4e", "file": "src/lib/icons/story/icons.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-icons-showcase", "styleUrls": [], "styles": [ "\n :host {\n /* Temporary define variable for demo purposes */\n --tgui-link_color: #2196f3;\n }\n\n .icon-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px;\n }\n " ], "template": "Badge count number
\n", "line": 44, "type": "number", "decorators": [] }, { "name": "maxCount", "defaultValue": "99", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nMaximum count to display before showing \"maxCount+\"", "description": "Maximum count to display before showing "maxCount+"
\n", "line": 47, "type": "number", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "BadgeComponent", "type": "component" } ], "description": "Badge component specifically designed to be used with Image component.\nOnly supports number type badges.
\n", "rawdescription": "\n\nBadge component specifically designed to be used with Image component.\nOnly supports number type badges.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 47 }, "extends": [], "accessors": { "displayValue": { "name": "displayValue", "getSignature": { "name": "displayValue", "type": "string", "returnType": "string", "line": 54, "rawdescription": "\nCompute display value with limit applied", "description": "Compute display value with limit applied
\n" } } } }, { "name": "ImageComponent", "id": "component-ImageComponent-fc20648a55129f4e1580f8bbffdd09d11d6998d372d88448724371e5f1c5dfe50ccf98d23291360c941cdd09e6dc5f38fbac3f15934815f3e218a96ac5ce52da", "file": "src/lib/components/blocks/image/image.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-image", "styleUrls": [], "styles": [ "\n :host {\n position: relative;\n display: inline-flex;\n background-color: var(--tgui--tertiary_bg_color);\n box-shadow: 0 0 0 1px var(--tgui--outline);\n }\n\n .image-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: inherit;\n }\n\n .image {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.5;\n transition: opacity 0.2s ease-in-out;\n border-radius: inherit;\n }\n\n .image.loaded {\n opacity: 1;\n }\n\n .fallback {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n " ], "template": "Specifies the size of the image, with a default of 40. Sizes are defined in pixels.
\n", "line": 103, "rawdescription": "\nSpecifies the size of the image, with a default of 40. Sizes are defined in pixels.", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "alt", "defaultValue": "inputAlternative text for the image
\n", "line": 112, "rawdescription": "\nAlternative text for the image" }, { "name": "altText", "defaultValue": "computed(() => this.alt() || '')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed alt text that always returns a string
\n", "line": 145, "rawdescription": "\nComputed alt text that always returns a string" }, { "name": "borderRadius", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 180, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.borderRadius.px'" } ], "modifierKind": [ 170 ] }, { "name": "crossOrigin", "defaultValue": "inputCross-origin setting
\n", "line": 115, "rawdescription": "\nCross-origin setting" }, { "name": "decoding", "defaultValue": "input<'sync' | 'async' | 'auto' | undefined>(undefined)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Image decoding hint
\n", "line": 118, "rawdescription": "\nImage decoding hint" }, { "name": "failed", "defaultValue": "signal(false)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "State to track if image failed to load
\n", "line": 139, "rawdescription": "\nState to track if image failed to load" }, { "name": "fallbackIconTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRefAn element (often an icon) displayed when the image fails to load or the src attribute is not provided.
Check if source is provided
\n", "line": 148, "rawdescription": "\nCheck if source is provided" }, { "name": "height", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 179, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.height.px'" } ], "modifierKind": [ 170 ] }, { "name": "loaded", "defaultValue": "signal(false)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "State to track if image has loaded
\n", "line": 136, "rawdescription": "\nState to track if image has loaded" }, { "name": "loading", "defaultValue": "input<'eager' | 'lazy' | undefined>(undefined)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Loading strategy
\n", "line": 121, "rawdescription": "\nLoading strategy" }, { "name": "minWidth", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 178, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.minWidth.px'" } ], "modifierKind": [ 170 ] }, { "name": "referrerPolicy", "defaultValue": "inputReferrer policy
\n", "line": 124, "rawdescription": "\nReferrer policy" }, { "name": "shouldShowFallbackIcon", "defaultValue": "computed(() => (this.failed() || !this.hasSrc()) && !!this.fallbackIconTemplate)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Determine if fallback icon should be shown
\n", "line": 151, "rawdescription": "\nDetermine if fallback icon should be shown" }, { "name": "size", "defaultValue": "40", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Specifies the size of the image, with a default of 40. Sizes are defined in pixels.
\n", "line": 103, "rawdescription": "\nSpecifies the size of the image, with a default of 40. Sizes are defined in pixels.", "required": false }, { "name": "sizes", "defaultValue": "inputSizes attribute
\n", "line": 127, "rawdescription": "\nSizes attribute" }, { "name": "src", "defaultValue": "inputImage source URL
\n", "line": 109, "rawdescription": "\nImage source URL" }, { "name": "srcSet", "defaultValue": "inputSource set attribute
\n", "line": 130, "rawdescription": "\nSource set attribute" }, { "name": "srcUrl", "defaultValue": "computed(() => this.src() || '')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed source URL that always returns a string
\n", "line": 142, "rawdescription": "\nComputed source URL that always returns a string" }, { "name": "useMap", "defaultValue": "inputImage map reference
\n", "line": 133, "rawdescription": "\nImage map reference" }, { "name": "width", "deprecated": false, "deprecationMessage": "", "type": "number", "indexKey": "", "optional": false, "description": "", "line": 177, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.width.px'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "getBorderRadius", "args": [ { "name": "size", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 183, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nCalculate border radius based on image size", "description": "Calculate border radius based on image size
\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "size", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleImageError", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 164, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHandle image error event", "description": "Handle image error event
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleImageLoad", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 154, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHandle image load event", "description": "Handle image load event
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "style.borderRadius.px", "deprecated": false, "deprecationMessage": "", "line": 180, "type": "number", "decorators": [] }, { "name": "style.height.px", "deprecated": false, "deprecationMessage": "", "line": 179, "type": "number", "decorators": [] }, { "name": "style.minWidth.px", "deprecated": false, "deprecationMessage": "", "line": 178, "type": "number", "decorators": [] }, { "name": "style.width.px", "deprecated": false, "deprecationMessage": "", "line": 177, "type": "number", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Renders an image with optional fallback content. It supports custom sizing and will automatically\nhandle loading states and errors by optionally displaying a fallback icon. This component can also\ninclude additional content, such as badges or overlays, as children.
\n", "rawdescription": "\n\nRenders an image with optional fallback content. It supports custom sizing and will automatically\nhandle loading states and errors by optionally displaying a fallback icon. This component can also\ninclude additional content, such as badges or overlays, as children.\n", "type": "component", "assetsDirs": [], "extends": [], "implements": [ "OnInit" ] }, { "name": "InlineButtonsComponent", "id": "component-InlineButtonsComponent-c03663e278d85b548bbc04b7fd0f85484b8b9face556c7c26a14e6a7beddf3e698c60d06683a005b5d98d644756db7d71b92fbe2c62d7d2046e74863c81fcea1", "file": "src/lib/components/blocks/inline-buttons/inline-buttons.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-inline-buttons", "styleUrls": [], "styles": [ "\n :host {\n display: flex;\n gap: 12px;\n }\n\n :host-context(.tgui-platform-ios) {\n gap: 8px;\n }\n " ], "template": "Dictates the styling mode for the inline buttons, affecting color and background.
\n", "line": 39, "rawdescription": "\nDictates the styling mode for the inline buttons, affecting color and background." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.mode-bezeled", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "boolean", "decorators": [] }, { "name": "class.mode-gray", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "boolean", "decorators": [] }, { "name": "class.mode-plain", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "InlineButtons acts as a container for InlineButtonsItem components.\nThis component provides a unified context for styling and interaction,\nleveraging the mode to apply consistent styling across all child components.\nIt ensures visual consistency across different platforms and supports custom styling modes.
Disables the button
\n", "line": 90, "rawdescription": "\nDisables the button", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Disables the button
\n", "line": 90, "rawdescription": "\nDisables the button", "required": false }, { "name": "interactiveAnimation", "defaultValue": "input<'opacity' | 'background'>('background')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Type of interactive animation
\n", "line": 93, "rawdescription": "\nType of interactive animation" }, { "name": "mode", "defaultValue": "input<'bezeled' | 'plain' | 'gray'>('plain')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Optional mode for styling the button, with 'plain' as the default.
\n", "line": 87, "rawdescription": "\nOptional mode for styling the button, with 'plain' as the default." }, { "name": "text", "defaultValue": "inputText displayed inside the button.
\n", "line": 84, "rawdescription": "\nText displayed inside the button." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.mode-bezeled", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "class.mode-gray", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "boolean", "decorators": [] }, { "name": "class.mode-plain", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TappableComponent", "type": "component" }, { "name": "CaptionComponent", "type": "component" } ], "description": "InlineButtonsItem is designed for use within an InlineButtons container but can also serve\nas a standalone button if used by itself. It supports displaying optional text and can inherit\na styling mode from its parent InlineButtons context or utilize a locally defined mode.
Whether the input is disabled
\n", "line": 111, "rawdescription": "\nWhether the input is disabled", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "after", "defaultValue": "inputContent to be displayed after the form input (can be string or TemplateRef)
\n", "line": 105, "rawdescription": "\nContent to be displayed after the form input (can be string or TemplateRef)" }, { "name": "before", "defaultValue": "inputContent to be displayed before the form input (can be string or TemplateRef)
\n", "line": 102, "rawdescription": "\nContent to be displayed before the form input (can be string or TemplateRef)" }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the input is disabled
\n", "line": 111, "rawdescription": "\nWhether the input is disabled", "required": false }, { "name": "header", "defaultValue": "inputHeader text displayed above the input
\n", "line": 99, "rawdescription": "\nHeader text displayed above the input" }, { "name": "placeholder", "defaultValue": "inputPlaceholder text
\n", "line": 114, "rawdescription": "\nPlaceholder text" }, { "name": "status", "defaultValue": "input<'default' | 'error' | 'focused'>('default')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Visual status of the input
\n", "line": 108, "rawdescription": "\nVisual status of the input" }, { "name": "type", "defaultValue": "inputInput type (text, password, email, etc.)
\n", "line": 96, "rawdescription": "\nInput type (text, password, email, etc.)" }, { "name": "value", "defaultValue": "inputInput value
\n", "line": 117, "rawdescription": "\nInput value" }, { "name": "wrapperClasses", "defaultValue": "computed(() => {\n return {\n 'wrapper': true,\n 'wrapper--ios': this.platformService.isIOS(),\n }\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Combines wrapper classes based on platform
\n", "line": 121, "rawdescription": "\nCombines wrapper classes based on platform" } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 137, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHandles change events", "description": "Handles change events
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onInput", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 130, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHandles input events", "description": "Handles input events
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "FormInputComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "TextComponent", "type": "component" } ], "description": "Renders a text input field with enhanced styling and integration into a form structure.\nIt automatically adapts typography and layout based on the platform, ensuring a consistent user experience across devices.
\n", "rawdescription": "\n\nRenders a text input field with enhanced styling and integration into a form structure.\nIt automatically adapts typography and layout based on the platform, ensuring a consistent user experience across devices.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "IOSSpinnerComponent", "id": "component-IOSSpinnerComponent-e417f0901f63a69be3d785b6c532a29565530ca680ac07dc0e01b1b1fafefcd1838e2621b8d72cf9ae933d64ed5c9a65a7d3fd9cf88188fefc1377328be0cf42", "file": "src/lib/components/feedback/spinner/components/ios-spinner/ios-spinner.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-ios-spinner", "styleUrls": [], "styles": [], "template": "The size level of the large title, influencing its styling.
\n", "line": 54, "rawdescription": "\n\nThe size level of the large title, influencing its styling.\n" }, { "name": "tag", "defaultValue": "inputThe LargeTitle component is designed for prominent display text, typically used for major headings\nor titles within an application. It encapsulates the Typography component's features, offering\nextensive styling and semantic customization options while defaulting to an <h1> HTML element.\nThis choice of default component underscores the importance and hierarchy of the text it encapsulates,\nmaking it suitable for primary page titles or significant headings.
Accessible label for the link
\n", "line": 57, "rawdescription": "\nAccessible label for the link" }, { "name": "href", "defaultValue": "inputURL that the hyperlink points to
\n", "line": 45, "rawdescription": "\nURL that the hyperlink points to" }, { "name": "rel", "defaultValue": "inputSpecifies the relationship between the current document and the linked document
\n", "line": 51, "rawdescription": "\nSpecifies the relationship between the current document and the linked document" }, { "name": "target", "defaultValue": "inputSpecifies where to open the linked document
\n", "line": 48, "rawdescription": "\nSpecifies where to open the linked document" }, { "name": "title", "defaultValue": "inputSpecifies extra information about an element
\n", "line": 54, "rawdescription": "\nSpecifies extra information about an element" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Link component provides a customizable anchor element.\nUsed for navigation with proper styling following the Telegram UI guidelines.
\n", "rawdescription": "\n\nLink component provides a customizable anchor element.\nUsed for navigation with proper styling following the Telegram UI guidelines.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "ListComponent", "id": "component-ListComponent-53fadec6d2c0131ab9e7506b65d77e97503bd6af4358c1e52a92e439fc5922eed224fd68d462b878d88506629677a2981e672c4627cb8f7502fbd9ea32db1b13", "file": "src/lib/components/blocks/list/list.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-list", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n \n :host ::ng-deep > :not(:last-child) {\n margin-bottom: 12px;\n }\n \n :host-context(.tgui-platform-ios) {\n padding: 10px 18px;\n box-sizing: border-box;\n }\n " ], "template": "Renders a container for list items, applying platform-specific styles for consistency\nacross different operating systems. This component serves as a foundational element\nfor creating lists in a user interface.
\n", "rawdescription": "\n\nRenders a container for list items, applying platform-specific styles for consistency\nacross different operating systems. This component serves as a foundational element\nfor creating lists in a user interface.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "ModalCloseComponent", "id": "component-ModalCloseComponent-9725ea5a69304ab8628b82a4593cd8129ab261d8c7a0214a0552b76ca521955fb7d048b8747d471a1ab9a268253774487c75ce92ebc5674ce002d7937d1bc72e", "file": "src/lib/components/overlays/modal/modal-close.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-modal-close", "styleUrls": [], "styles": [ "\n :host {\n display: contents;\n }\n\n .modal-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 44px;\n min-height: 44px;\n border-radius: 50%;\n color: var(--tgui--hint_color);\n cursor: pointer;\n transition: color 150ms ease;\n }\n\n .modal-close:hover {\n color: var(--tgui--text_color);\n }\n\n .modal-close:focus-visible {\n outline: 2px solid var(--tgui--link_color);\n outline-offset: 2px;\n }\n\n /* Icon sizing */\n .modal-close :global(svg) {\n width: 28px;\n height: 28px;\n }\n " ], "template": "Custom aria-label for accessibility
\n", "line": 76, "rawdescription": "\nCustom aria-label for accessibility" }, { "name": "interactiveAnimation", "defaultValue": "input<'opacity' | 'background'>('opacity')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Type of interactive animation
\n", "line": 74, "rawdescription": "\nType of interactive animation" } ], "methodsClass": [ { "name": "handleClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 79, "deprecated": false, "deprecationMessage": "" }, { "name": "handleKeyDown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 87, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 87 } ], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TappableComponent", "type": "component" } ], "description": "Modal close button component providing accessible close functionality.\nMust be used within a Modal component to function properly.\nSupports custom content and interactive animations.
\n", "rawdescription": "\n\nModal close button component providing accessible close functionality.\nMust be used within a Modal component to function properly.\nSupports custom content and interactive animations.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "ModalComponent", "id": "component-ModalComponent-ce17a43d68f88f4b6afb5e858a419775e8e7bc6f272b6e329db8b32a547f998334d91f423eb83cd726ec84962594bd155e51e283a500a55d067a564377082ee9", "file": "src/lib/components/overlays/modal/modal.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-modal", "styleUrls": [], "styles": [ "\n :host {\n display: contents;\n }\n\n .modal-overlay {\n position: fixed;\n inset: 0;\n z-index: 999;\n opacity: 0;\n transition: opacity 300ms ease;\n background: rgba(0, 0, 0, 0.4);\n }\n\n .modal-overlay--open {\n opacity: 1;\n }\n\n .modal-content {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n max-height: 96%;\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n display: flex;\n flex-direction: column;\n outline: none;\n background-color: var(--tgui--bg_color);\n z-index: var(--tgui--z_index--overlay, 1000);\n transform: translateY(100%);\n transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n touch-action: none;\n user-select: none;\n }\n\n .modal-content--open {\n transform: translateY(0);\n }\n\n .modal-content--dragging {\n transition: none;\n }\n\n .modal-content--closing {\n transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n transform: translateY(100%);\n }\n\n .modal-body {\n overflow-y: auto;\n padding-bottom: var(--tgui--safe_area_inset_bottom, env(safe-area-inset-bottom));\n flex: 1;\n }\n\n /* iOS specific styles */\n :host-context(.tgui-platform-ios) .modal-content {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n " ], "template": "\nModal component providing a flexible dialog framework with customizable content.\nSupports swipe gestures, snap points, and portal rendering for mobile-optimized experience.\nBased on React TGUI Modal component but implemented with Angular Signal API.
\n", "rawdescription": "\n\nModal component providing a flexible dialog framework with customizable content.\nSupports swipe gestures, snap points, and portal rendering for mobile-optimized experience.\nBased on React TGUI Modal component but implemented with Angular Signal API.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 251 }, "extends": [], "implements": [ "OnInit", "OnDestroy", "AfterViewInit" ] }, { "name": "ModalDemoComponent", "id": "component-ModalDemoComponent-47c96b209cfa471eb332f788fd2ba2169ae4d60f6d831ae0187ef804524f868e3b4f4fa5fd8725c96ecdabf6b6fefd4ef98d3e0cbfbbb240e21a64aec7ea4de2", "file": "src/lib/components/overlays/modal/story/modal.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-modal-demo", "styleUrls": [], "styles": [ "\n .modal-demo-container {\n position: relative;\n height: 400px;\n padding: 20px;\n border: 1px solid var(--tgui--secondary_bg_color);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 24px;\n }\n \n .instructions {\n opacity: 0.7;\n margin-bottom: 16px;\n text-align: center;\n }\n \n .instructions p {\n margin: 0;\n font-family: var(--tgui--font-family);\n color: var(--tgui--text_color);\n }\n " ], "template": "Click the button to open modal
\nForce hide header regardless of platform
\n", "line": 126, "rawdescription": "\nForce hide header regardless of platform", "required": false }, { "name": "forceShow", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Force show header regardless of platform
\n", "line": 124, "rawdescription": "\nForce show header regardless of platform", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "forceHide", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Force hide header regardless of platform
\n", "line": 126, "rawdescription": "\nForce hide header regardless of platform", "required": false }, { "name": "forceShow", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Force show header regardless of platform
\n", "line": 124, "rawdescription": "\nForce show header regardless of platform", "required": false }, { "name": "headerClasses", "defaultValue": "computed(() => ({\n 'modal-header': true,\n 'modal-header--force-show': this.forceShow(),\n 'modal-header--force-hide': this.forceHide()\n }))", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 136 }, { "name": "showHeader", "defaultValue": "computed(() => {\n if (this.forceHide()) return false;\n if (this.forceShow()) return true;\n // Default behavior: show only on iOS\n return this.platformService.platform() === 'ios';\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 129 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Modal header component providing a title area with drag handle indicator.\nSupports before/after content slots for additional elements like close buttons.\nOnly visible on iOS platform following design guidelines.
\n", "rawdescription": "\n\nModal header component providing a title area with drag handle indicator.\nSupports before/after content slots for additional elements like close buttons.\nOnly visible on iOS platform following design guidelines.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "ModalOverlayComponent", "id": "component-ModalOverlayComponent-22c76c5d3a389db27cb1590915b17406228a22803bbc65fc48aa8ae50159e45836e3ff3e71174b6331be2acd2a30c4ae18f3d309e8ac452cb6fa75403cfb2b48", "file": "src/lib/components/overlays/modal/modal-overlay.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-modal-overlay", "styleUrls": [], "styles": [ "\n :host {\n display: contents;\n }\n\n .modal-overlay {\n position: fixed;\n inset: 0;\n z-index: 999;\n background: rgba(0, 0, 0, 0.4);\n transition: opacity 300ms ease;\n }\n\n /* Theme-aware overlays */\n :host-context(.tgui-theme-light) .modal-overlay {\n background: rgba(0, 0, 0, 0.4);\n }\n\n :host-context(.tgui-theme-dark) .modal-overlay {\n background: rgba(0, 0, 0, 0.6);\n }\n " ], "template": "Custom background color
\n", "line": 60, "rawdescription": "\nCustom background color" }, { "name": "opacity", "defaultValue": "inputCustom opacity for the overlay (0-1)
\n", "line": 58, "rawdescription": "\nCustom opacity for the overlay (0-1)" }, { "name": "overlayStyles", "defaultValue": "computed(() => {\n const styles: RecordModal overlay component providing a backdrop behind the modal content.\nSupports theme-aware background colors and customizable opacity.
\n", "rawdescription": "\n\nModal overlay component providing a backdrop behind the modal content.\nSupports theme-aware background colors and customizable opacity.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "ModalStoryWrapperComponent", "id": "component-ModalStoryWrapperComponent-47c96b209cfa471eb332f788fd2ba2169ae4d60f6d831ae0187ef804524f868e3b4f4fa5fd8725c96ecdabf6b6fefd4ef98d3e0cbfbbb240e21a64aec7ea4de2", "file": "src/lib/components/overlays/modal/story/modal.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-modal-story-wrapper", "styleUrls": [], "styles": [], "template": "This is the content of the first accordion.
\nThis is the content of the second accordion.
\nThis is the content of the third accordion.
\nThis is the content of the parent accordion.
\n\nThis is the content of the nested accordion.
\nThe chevron icon should only respond to its direct parent accordion state.
\nSet checked state
\n", "line": 116, "rawdescription": "\nSet checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set disabled state
\n", "line": 119, "rawdescription": "\nSet disabled state", "required": false } ], "outputsClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event when state changes
\n", "line": 123, "rawdescription": "\nEvent when state changes", "required": false } ], "propertiesClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event when state changes
\n", "line": 123, "rawdescription": "\nEvent when state changes", "required": false }, { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set checked state
\n", "line": 116, "rawdescription": "\nSet checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Set disabled state
\n", "line": 119, "rawdescription": "\nSet disabled state", "required": false }, { "name": "isIOS", "defaultValue": "computed(() => this.platformService.isIOS())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Checks if current platform is iOS
\n", "line": 127, "rawdescription": "\nChecks if current platform is iOS" }, { "name": "name", "defaultValue": "inputName attribute value for input
\n", "line": 110, "rawdescription": "\nName attribute value for input" }, { "name": "value", "defaultValue": "inputValue attribute value for input
\n", "line": 113, "rawdescription": "\nValue attribute value for input" } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 130, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nChange event handler", "description": "Change event handler
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "Renders a custom multiselectable checkbox input, adapting its icons based on the current platform (iOS or others).\nSupports all standard input checkbox properties.
\n", "rawdescription": "\n\nRenders a custom multiselectable checkbox input, adapting its icons based on the current platform (iOS or others).\nSupports all standard input checkbox properties.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "PaginationComponent", "id": "component-PaginationComponent-dfeb99d279f69f9aab8f6fd52f097186b19411337e127331e652861d08ece0b383522648e37d332c2bd07016e5dd6b76892f698b4695f55ce511f1a649b856ee", "file": "src/lib/components/navigation/pagination/pagination.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-pagination", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n \n .pagination-wrapper {\n display: flex;\n gap: 8px;\n padding: 16px;\n }\n \n :host.disabled .pagination-wrapper {\n opacity: .35;\n }\n \n .button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n \n min-width: 44px;\n height: 44px;\n \n color: var(--tgui--hint_color);\n padding: 0 10px;\n border: none;\n border-radius: 12px;\n background: transparent;\n }\n \n .button--selected {\n color: var(--tgui--text_color);\n background: var(--tgui--tertiary_bg_color);\n }\n \n .button--disabled {\n cursor: default;\n opacity: .35;\n }\n \n .button--ellipsis {\n cursor: default;\n opacity: 1;\n }\n \n .icon {\n color: var(--tgui--link_color);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n \n /* Ensure the icon container takes full space of the button */\n :host ::ng-deep tgui-dynamic-icon svg {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n " ], "template": "Number of always visible pages at the beginning and end.
\n", "line": 129, "rawdescription": "\n\nNumber of always visible pages at the beginning and end.\n", "required": false }, { "name": "count", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The total number of pages.
\n", "line": 134, "rawdescription": "\n\nThe total number of pages.\n", "required": false }, { "name": "defaultPage", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The page selected by default when the component is uncontrolled.
\n", "line": 139, "rawdescription": "\n\nThe page selected by default when the component is uncontrolled.\n", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Controls whether the Pagination component is interactive.
\n", "line": 164, "rawdescription": "\n\nControls whether the Pagination component is interactive.\n", "required": false }, { "name": "hideNextButton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, hide the next-page button.
If true, hide the previous-page button.
Number of always visible pages before and after the current page.
\n", "line": 159, "rawdescription": "\n\nNumber of always visible pages before and after the current page.\n", "required": false } ], "outputsClass": [ { "name": "pageChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted when the page changes.
\n", "line": 169, "rawdescription": "\n\nEvent emitted when the page changes.\n", "required": false } ], "propertiesClass": [ { "name": "boundaryCount", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Number of always visible pages at the beginning and end.
\n", "line": 129, "rawdescription": "\n\nNumber of always visible pages at the beginning and end.\n", "required": false }, { "name": "count", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The total number of pages.
\n", "line": 134, "rawdescription": "\n\nThe total number of pages.\n", "required": false }, { "name": "defaultPage", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The page selected by default when the component is uncontrolled.
\n", "line": 139, "rawdescription": "\n\nThe page selected by default when the component is uncontrolled.\n", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Controls whether the Pagination component is interactive.
\n", "line": 164, "rawdescription": "\n\nControls whether the Pagination component is interactive.\n", "required": false }, { "name": "hideNextButton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, hide the next-page button.
If true, hide the previous-page button.
The current page.
\n", "line": 154, "rawdescription": "\n\nThe current page.\n" }, { "name": "pageChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted when the page changes.
\n", "line": 169, "rawdescription": "\n\nEvent emitted when the page changes.\n", "required": false }, { "name": "paginationItems", "defaultValue": "usePagination({\n boundaryCount: this.boundaryCount,\n count: this.count,\n defaultPage: this.defaultPage,\n hideNextButton: this.hideNextButton,\n hidePrevButton: this.hidePrevButton,\n page: this.page,\n siblingCount: this.siblingCount,\n onPageChange: (page: number) => this.pageChange.emit(page)\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Items for pagination calculated by the hook
\n", "line": 174, "rawdescription": "\n\nItems for pagination calculated by the hook\n" }, { "name": "siblingCount", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Number of always visible pages before and after the current page.
\n", "line": 159, "rawdescription": "\n\nNumber of always visible pages before and after the current page.\n", "required": false } ], "methodsClass": [ { "name": "handleItemClick", "args": [ { "name": "item", "type": "PaginationItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 196, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandle item click if the item is not disabled and not an ellipsis\n", "description": "Handle item click if the item is not disabled and not an ellipsis
\n", "jsdoctags": [ { "name": "item", "type": "PaginationItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isEllipsis", "args": [ { "name": "item", "type": "PaginationItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 205, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCheck if an item is an ellipsis\n", "description": "Check if an item is an ellipsis
\n", "jsdoctags": [ { "name": "item", "type": "PaginationItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.disabled", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nApply the disabled class to the host element\n", "description": "Apply the disabled class to the host element
\n", "line": 189, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "HeadlineComponent", "type": "component" }, { "name": "TguiDynamicIconComponent", "type": "component" } ], "description": "The Pagination component displays a set of navigation controls allowing users to navigate through pages of content.\nIt is built on top of a custom hook that manages pagination logic and state.\nThis component can be customized to hide next/previous buttons, specify boundary and sibling count for pagination items,\nand handle page changes through a pageChange output.
\n", "rawdescription": "\n\nThe Pagination component displays a set of navigation controls allowing users to navigate through pages of content.\nIt is built on top of a custom hook that manages pagination logic and state.\nThis component can be customized to hide next/previous buttons, specify boundary and sibling count for pagination items,\nand handle page changes through a pageChange output.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isDisabled": { "name": "isDisabled", "getSignature": { "name": "isDisabled", "type": "boolean", "returnType": "boolean", "line": 189, "rawdescription": "\n\nApply the disabled class to the host element\n", "description": "Apply the disabled class to the host element
\n" } } } }, { "name": "PinInputButtonComponent", "id": "component-PinInputButtonComponent-bbb0ffe6a5e34fe244856a5525774b86c3a3b9d8b4d61f0064bb4dc3b643b2a6aae9992f142151fa946d34705623fc464902d7afc56c3e0ac0a68893b5dfcebf", "file": "src/lib/components/form/pin-input/components/pin-input-button/pin-input-button.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-pin-input-button", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n width: var(--tgui--pin_input--button-width);\n height: 56px;\n }\n\n .wrapper {\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n border-radius: 16px;\n color: var(--tgui--text_color);\n background: var(--tgui--tertiary_bg_color);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :host(.pin-button-ios) {\n width: 76px;\n height: 76px;\n }\n \n :host(.pin-button-ios) .wrapper {\n border-radius: 50%;\n }\n " ], "template": "PinInputButton component for PIN code entry\nProvides a button optimized for number entry in PIN inputs\nSupports both content input property and ng-content projection
\n", "rawdescription": "\n\nPinInputButton component for PIN code entry\nProvides a button optimized for number entry in PIN inputs\nSupports both content input property and ng-content projection\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 89 }, "extends": [], "accessors": { "isIOS": { "name": "isIOS", "getSignature": { "name": "isIOS", "type": "", "returnType": "", "line": 103 } } } }, { "name": "PinInputCellComponent", "id": "component-PinInputCellComponent-21d7b00c3c9e3de0cd6230f880903f2c6eef3198dee98186ac45672a9f623bba3317787c24e7e0226cd2a8a58be41a998f747b989c746708e0ea31c247ab1b62", "file": "src/lib/components/form/pin-input/components/pin-input-cell/pin-input-cell.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-pin-input-cell", "styleUrls": [], "styles": [ "\n .wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n \n width: 40px;\n height: 44px;\n \n border-radius: 12px;\n border: 2.5px solid var(--tgui--divider);\n background: var(--tgui--bg_color);\n \n transition: border-color .15s ease-out;\n padding: 0;\n }\n \n .wrapper--ios {\n width: 13px;\n height: 13px;\n \n opacity: .1;\n border: none;\n border-radius: 50%;\n background: var(--tgui--link_color);\n }\n \n .wrapper--ios.wrapper--typed {\n opacity: 1;\n }\n \n .wrapper:focus-within {\n border-color: var(--tgui--link_color);\n }\n \n .dot {\n width: 8px;\n height: 8px;\n \n border-radius: 50%;\n background: var(--tgui--text_color);\n }\n " ], "template": "Sets the disabled state
\n", "line": 104, "rawdescription": "\nSets the disabled state", "required": false }, { "name": "isTyped", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the cell has a value typed
\n", "line": 98, "rawdescription": "\nWhether the cell has a value typed", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the disabled state
\n", "line": 104, "rawdescription": "\nSets the disabled state", "required": false }, { "name": "isTyped", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the cell has a value typed
\n", "line": 98, "rawdescription": "\nWhether the cell has a value typed", "required": false }, { "name": "name", "defaultValue": "inputName attribute for input
\n", "line": 101, "rawdescription": "\nName attribute for input" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "Individual cell component for PIN input.\nDisplays a field for a single digit of a PIN code.
\n", "rawdescription": "\n\nIndividual cell component for PIN input.\nDisplays a field for a single digit of a PIN code.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 107 }, "extends": [] }, { "name": "PinInputComponent", "id": "component-PinInputComponent-c95407c6ed8e9db0d973e1390d68ac10f19b516ba891edbca6aff27bacea26c2246144eb45a2dc79fd2777a52f78f5d6bbfc318845dee14632597e79610d0b81", "file": "src/lib/components/form/pin-input/pin-input.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-pin-input", "styleUrls": [], "styles": [ "\n .wrapper {\n overflow: hidden;\n\n position: fixed;\n inset: 0;\n padding: 32px 20px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n box-sizing: border-box;\n background: var(--tgui--bg_color);\n }\n \n .header {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n max-inline-size: 100%;\n flex: 1 1 0;\n }\n \n .wrapper--ios .header {\n flex: unset;\n }\n \n .header,\n .title {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n \n .title {\n text-align: center;\n max-inline-size: 100%;\n }\n \n .cellsWrapper {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n\n gap: 16px;\n margin-top: 20px;\n }\n \n .buttonWrapper {\n --tgui--pin_input--buttons-gap: 12px;\n --tgui--pin_input--button-width: 33.3%;\n\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n gap: var(--tgui--pin_input--buttons-gap);\n margin-top: 52px;\n }\n \n .wrapper--ios .buttonWrapper {\n --tgui--pin_input--button-width: 76px;\n }\n \n .row {\n display: flex;\n justify-content: center;\n gap: var(--tgui--pin_input--buttons-gap);\n }\n \n .row:last-child {\n margin-left: calc(var(--tgui--pin_input--buttons-gap) * 2);\n justify-content: flex-end;\n }\n \n .wrapper--ios .row:last-child {\n margin-left: calc(var(--tgui--pin_input--button-width) + var(--tgui--pin_input--buttons-gap));\n justify-content: center;\n }\n \n .backspaceIcon {\n display: block;\n margin: auto;\n color: var(--tgui--link_color);\n }\n \n /* Debug panel styles */\n .debug-panel {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(0, 0, 0, 0.8);\n color: white;\n font-size: 12px;\n padding: 8px;\n z-index: 9999;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n }\n \n .debug-row {\n margin-bottom: 4px;\n }\n \n .debug-row:last-child {\n margin-bottom: 0;\n }\n " ], "template": "Enable debug mode to show platform information
\n", "line": 229, "rawdescription": "\nEnable debug mode to show platform information", "required": false }, { "name": "pinCount", "defaultValue": "4", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The number of pin input fields to display, with a minimum of 2.
\n", "line": 223, "rawdescription": "\nThe number of pin input fields to display, with a minimum of 2.", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "cellRef", "deprecated": false, "deprecationMessage": "", "type": "ElementRef | undefined", "indexKey": "", "optional": false, "description": "", "line": 236, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'cellRef'" } ], "modifierKind": [ 170 ] }, { "name": "debug", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Enable debug mode to show platform information
\n", "line": 229, "rawdescription": "\nEnable debug mode to show platform information", "required": false }, { "name": "initialValue", "defaultValue": "inputThe initial pin values to populate the input fields with.
\n", "line": 226, "rawdescription": "\nThe initial pin values to populate the input fields with." }, { "name": "label", "defaultValue": "inputText label displayed above the pin input cells.
\n", "line": 220, "rawdescription": "\nText label displayed above the pin input cells." }, { "name": "pinCount", "defaultValue": "4", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The number of pin input fields to display, with a minimum of 2.
\n", "line": 223, "rawdescription": "\nThe number of pin input fields to display, with a minimum of 2.", "required": false }, { "name": "valueChange", "defaultValue": "outputCallback function triggered when the pin values change.
\n", "line": 233, "rawdescription": "\nCallback function triggered when the pin values change." } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "HeadlineComponent", "type": "component" }, { "name": "RootRendererComponent", "type": "component" }, { "name": "PinInputCellComponent", "type": "component" }, { "name": "PinInputButtonComponent", "type": "component" }, { "name": "TguiIcon36Backspace" } ], "description": "Renders a set of input fields for entering pin codes with a virtual keypad for value entry and deletion.
\n", "rawdescription": "\n\nRenders a set of input fields for entering pin codes with a virtual keypad for value entry and deletion.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 258 }, "extends": [] }, { "name": "PinInputStoryWrapperComponent", "id": "component-PinInputStoryWrapperComponent-518a6312da3456d3d50c093c1af07bd5c4ee6fb3a2fe9253aadebb40e6dd1e12438748e473c0da23b582b9adeef3141e1663b36920870efda9a5578367c2e7e2", "file": "src/lib/components/form/pin-input/story/pin-input.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-pin-input-story-wrapper", "styleUrls": [], "styles": [], "template": "Additional descriptive text to provide more details or context.
\n", "line": 61, "type": "string", "decorators": [] }, { "name": "header", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nThe primary text, usually a title or a header, for the placeholder.", "description": "The primary text, usually a title or a header, for the placeholder.
\n", "line": 58, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TextComponent", "type": "component" }, { "name": "TitleComponent", "type": "component" } ], "description": "A versatile component designed to display a placeholder with optional text, images, and actions.
\n", "rawdescription": "\n\nA versatile component designed to display a placeholder with optional text, images, and actions.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "PlaygroundStoryComponent", "id": "component-PlaygroundStoryComponent-97eb77a7efb211f050b4dd8f22d4a3703be73e56cd1d33dc5a7d1ce50994787759bf94e6b79cfa4060988d1be6d737c8a50360de16ab33b850d7f3b14424f23f", "file": "src/lib/components/blocks/accordion/stories/accordion.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-playground-story", "styleUrls": [], "styles": [], "template": "This accordion uses a simple string as its summary.
\nRenders a Popper component, leveraging floating UI for dynamic, responsive positioning.\nSupports advanced configurations like virtual elements, custom arrows, and auto-position updates.
\n", "rawdescription": "\n\nRenders a Popper component, leveraging floating UI for dynamic, responsive positioning.\nSupports advanced configurations like virtual elements, custom arrows, and auto-position updates.\n", "type": "component", "assetsDirs": [], "extends": [], "implements": [ "AfterViewInit", "OnDestroy" ] }, { "name": "PopperDemoComponent", "id": "component-PopperDemoComponent-e816fea017fa6a2eb9d01e8af75d3184887ae9558e6d943579771a39d7b7816c25db9048c4940df10c9676d33d1d0ddc96283f46740b162a7515e118dcab4d8f", "file": "src/lib/components/overlays/popper/story/popper.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-popper-demo", "styleUrls": [], "styles": [ "\n .popper-demo-container {\n position: relative;\n height: 300px;\n padding: 20px;\n border: 1px solid var(--tgui--secondary_bg_color);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n \n .popper-content {\n padding: 10px 12px;\n background: var(--tgui--button_color);\n color: var(--tgui--white);\n }\n \n .instructions {\n opacity: 0.7;\n }\n " ], "template": "The current value of the progress bar, expressed as a percentage.\nThe value should be between 0 and 100.
\n", "line": 82, "rawdescription": "\n\nThe current value of the progress bar, expressed as a percentage.\nThe value should be between 0 and 100.\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "progressValue", "defaultValue": "computed(() => {\n return Math.max(PROGRESS_MIN_VALUE, Math.min(this.value(), PROGRESS_MAX_VALUE));\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed value that ensures the progress is clamped between min and max values
\n", "line": 87, "rawdescription": "\n\nComputed value that ensures the progress is clamped between min and max values\n" }, { "name": "value", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The current value of the progress bar, expressed as a percentage.\nThe value should be between 0 and 100.
\n", "line": 82, "rawdescription": "\n\nThe current value of the progress bar, expressed as a percentage.\nThe value should be between 0 and 100.\n", "required": false } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Renders a linear progress bar that visually represents completion percentage towards a goal.\nThe component respects accessibility standards by including appropriate ARIA attributes.
\n", "rawdescription": "\n\nRenders a linear progress bar that visually represents completion percentage towards a goal.\nThe component respects accessibility standards by including appropriate ARIA attributes.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "progressTitle": { "name": "progressTitle", "getSignature": { "name": "progressTitle", "type": "", "returnType": "", "line": 94, "rawdescription": "\n\nComputes the title attribute for accessibility\n", "description": "Computes the title attribute for accessibility
\n" } }, "isPlatformBase": { "name": "isPlatformBase", "getSignature": { "name": "isPlatformBase", "type": "", "returnType": "", "line": 101, "rawdescription": "\n\nIndicates if platform is base\n", "description": "Indicates if platform is base
\n" } } } }, { "name": "RadioComponent", "id": "component-RadioComponent-3d05efe0e28d45794483d9a464c1ca4c0a244dd8b64f545b7060497ff84c3baa56e8cab7b7733e673fb1e6d79ae542f95bbcbf5c265be0af067ee743d61d7b43", "file": "src/lib/components/form/radio/radio.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-radio", "styleUrls": [], "styles": [ "\n :host {\n display: inline-block;\n }\n\n .wrapper {\n cursor: pointer;\n position: relative;\n }\n\n .wrapper--disabled {\n cursor: default;\n opacity: .3;\n }\n\n .icon {\n display: block;\n color: var(--tgui--outline);\n }\n\n .checkedIcon {\n position: absolute;\n top: 0;\n\n opacity: 0;\n color: var(--tgui--link_color);\n }\n\n .icon,\n .checkedIcon {\n transition: opacity .15s ease-out;\n }\n\n .input:checked ~ .icon {\n opacity: 0;\n }\n\n .input:checked ~ .checkedIcon {\n opacity: 1;\n }\n " ], "template": "Sets the checked state
\n", "line": 112, "rawdescription": "\nSets the checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the disabled state
\n", "line": 115, "rawdescription": "\nSets the disabled state", "required": false } ], "outputsClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted on change
\n", "line": 119, "rawdescription": "\nEvent emitted on change", "required": false } ], "propertiesClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted on change
\n", "line": 119, "rawdescription": "\nEvent emitted on change", "required": false }, { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the checked state
\n", "line": 112, "rawdescription": "\nSets the checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the disabled state
\n", "line": 115, "rawdescription": "\nSets the disabled state", "required": false }, { "name": "name", "defaultValue": "inputName attribute for input
\n", "line": 106, "rawdescription": "\nName attribute for input" }, { "name": "value", "defaultValue": "inputValue attribute for input
\n", "line": 109, "rawdescription": "\nValue attribute for input" } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 123, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nChange event handler", "description": "Change event handler
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" }, { "name": "IconRadioComponent", "type": "component" }, { "name": "IconRadioCheckedComponent", "type": "component" } ], "description": "Renders a radio button input with custom styling.\nThe component visually hides the actual input element for accessibility\nwhile providing a custom styled appearance.
\n", "rawdescription": "\n\nRenders a radio button input with custom styling.\nThe component visually hides the actual input element for accessibility\nwhile providing a custom styled appearance.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "RatingComponent", "id": "component-RatingComponent-617bb3e86d6feaf4b05b9cdfacf0975a71a59d21f82643b2f938810cf8bcdbc0993297f78083d353bc08e822230279aebf1325fde4a6dd072180029d8a0b1d46", "file": "src/lib/components/form/rating/rating.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-rating", "styleUrls": [], "styles": [ "\n .wrapper {\n position: relative;\n display: flex;\n gap: 4px;\n padding: 12px;\n }\n\n .element {\n position: relative;\n color: var(--tgui--tertiary_bg_color);\n cursor: pointer;\n }\n\n .element:focus-visible {\n outline: 2px solid var(--tgui--link_color);\n }\n\n .element--picked {\n position: absolute;\n color: var(--tgui--link_color);\n pointer-events: none;\n }\n\n .input {\n position: absolute;\n top: 0;\n bottom: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n z-index: 1;\n }\n " ], "template": "The maximum rating value, representing the number of icons displayed.
\n", "line": 143, "rawdescription": "\nThe maximum rating value, representing the number of icons displayed.", "required": false }, { "name": "ratingValue", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The current value of the rating using Angular's two-way binding with model().
\n", "line": 146, "rawdescription": "\nThe current value of the rating using Angular's two-way binding with model().", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "elementClass", "defaultValue": "'element'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 152 }, { "name": "elementPickedClass", "defaultValue": "'element--picked'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 153 }, { "name": "inputClass", "defaultValue": "'input'", "deprecated": false, "deprecationMessage": "", "type": "string", "indexKey": "", "optional": false, "description": "", "line": 154 }, { "name": "max", "defaultValue": "5", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The maximum rating value, representing the number of icons displayed.
\n", "line": 143, "rawdescription": "\nThe maximum rating value, representing the number of icons displayed.", "required": false }, { "name": "normalizedPrecision", "defaultValue": "computed(() => clamp(this.precision(), MINIMUM_PRECISION, 1))", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 149 }, { "name": "precision", "defaultValue": "input<0.1 | 0.2 | 0.25 | 0.5 | 1>(1)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The precision of the rating, determining the fraction of the star that can be selected.
\n", "line": 140, "rawdescription": "\nThe precision of the rating, determining the fraction of the star that can be selected." }, { "name": "ratingValue", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "The current value of the rating using Angular's two-way binding with model().
\n", "line": 146, "rawdescription": "\nThe current value of the rating using Angular's two-way binding with model().", "required": false } ], "methodsClass": [ { "name": "getElementsWithPrecision", "args": [], "optional": false, "returnType": "number[]", "typeParameters": [], "line": 165, "deprecated": false, "deprecationMessage": "" }, { "name": "getKeys", "args": [], "optional": false, "returnType": "number[]", "typeParameters": [], "line": 161, "deprecated": false, "deprecationMessage": "" }, { "name": "getPickedElementWidth", "args": [ { "name": "elementNumber", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number | undefined", "typeParameters": [], "line": 170, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "elementNumber", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isInputChecked", "args": [ { "name": "key", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 187, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "key", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onRatingChange", "args": [ { "name": "value", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 193, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "Renders a customizable rating component, allowing users to provide a rating by selecting a value using stars.\nSupports fractional ratings through precision control.
\nExample :<tgui-rating\n [(ratingValue)]="userRating"\n [precision]="0.5"\n [max]="5">\n</tgui-rating>The collection of active ripple waves
\n", "line": 81, "rawdescription": "\n\nThe collection of active ripple waves\n" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "", "rawdescription": "\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "RootComponent", "id": "component-RootComponent-16013a0069fdeaff78d2d65ed85e00069b3be10dc88fba931602af0652acf6b7283bc4ba79fd6dac7b35cca70cedaefe9d7251c2ece6c026e9e9b3f22f25489d", "file": "src/lib/components/utils/tgui-root/tgui-root.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-root", "styleUrls": [ "./tgui-root.component.css" ], "styles": [], "template": "Application appearance, determined automatically if nothing passed
\n", "line": 30, "rawdescription": "\nApplication appearance, determined automatically if nothing passed", "required": false }, { "name": "followSystemTheme", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether to follow system theme changes when appearance is set manually
\n", "line": 33, "rawdescription": "\nWhether to follow system theme changes when appearance is set manually", "required": false }, { "name": "platform", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Application platform, determined automatically if nothing passed
\n", "line": 27, "rawdescription": "\nApplication platform, determined automatically if nothing passed", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "appearance", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Application appearance, determined automatically if nothing passed
\n", "line": 30, "rawdescription": "\nApplication appearance, determined automatically if nothing passed", "required": false }, { "name": "followSystemTheme", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether to follow system theme changes when appearance is set manually
\n", "line": 33, "rawdescription": "\nWhether to follow system theme changes when appearance is set manually", "required": false }, { "name": "hostClasses", "defaultValue": "computed(() => {\n const currentTheme = this.themeService.appearance();\n const currentPlatform = this.platformService.platform();\n \n return {\n themeLight: currentTheme === 'light',\n themeDark: currentTheme === 'dark',\n platformIos: currentPlatform === 'ios',\n platformBase: currentPlatform === 'base'\n };\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 51 }, { "name": "platform", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Application platform, determined automatically if nothing passed
\n", "line": 27, "rawdescription": "\nApplication platform, determined automatically if nothing passed", "required": false } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [], "description": "Root component for the TGUI library\nProvides theming, platform detection, and portal container functionality\nShould be used at the root of your application
\n", "rawdescription": "\n\nRoot component for the TGUI library\nProvides theming, platform detection, and portal container functionality\nShould be used at the root of your application\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 61 }, "extends": [], "implements": [ "OnInit", "OnDestroy", "AfterViewInit" ] }, { "name": "RootPortalComponent", "id": "component-RootPortalComponent-07a59bf06d5771ff8bb3e7dca777f882d9a8a918c8c7c1428d4b0ef0455a9f452e8ec0fd9a4847655b61fd24d81fad449f3f34f478e70ef069837a692f90db56", "file": "src/lib/components/utils/portal/root-portal.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-root-portal", "styleUrls": [], "styles": [ "\n :host {\n font-family: var(--tgui--font-family);\n }\n \n :host::ng-deep * {\n font-family: var(--tgui--font-family);\n }\n " ], "template": "Component for rendering content in the portal container\nSimilar to RootRenderer in React version
\n", "rawdescription": "\n\nComponent for rendering content in the portal container\nSimilar to RootRenderer in React version\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 37 }, "extends": [], "implements": [ "AfterViewInit", "OnDestroy" ] }, { "name": "RootRendererComponent", "id": "component-RootRendererComponent-9d6eb132ea23e7324d66a0dc4c9fffe2be5e5c4407ca4da49e9dde68de5d3bfa204ba07f813f60668c95a1b0cc2e479f3e76c09973aac2eee82f6d5feaad86a8", "file": "src/lib/components/utils/root-renderer/root-renderer.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-root-renderer", "styleUrls": [], "styles": [], "template": "Component for rendering content in the portal container\nEquivalent to RootRenderer in React version\nUsed for rendering content outside of normal DOM hierarchy (modals, popups, etc.)
\n", "rawdescription": "\n\nComponent for rendering content in the portal container\nEquivalent to RootRenderer in React version\nUsed for rendering content outside of normal DOM hierarchy (modals, popups, etc.)\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 38 }, "extends": [], "implements": [ "AfterViewInit", "OnDestroy" ] }, { "name": "SectionComponent", "id": "component-SectionComponent-2eb34a28602bb113c6aed4276060c0a369b4800141251c32f2c6502273db25a27521b2d9e657675cbc6287294b7890737b9b9a7b12ea7093850d62bf2962b462", "file": "src/lib/components/blocks/section/section.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-section", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n\n .tgui-section {\n display: block;\n width: 100%;\n }\n\n /* Platform specific styles */\n .tgui-section-body-with-header {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n background: var(--tgui--section_bg_color);\n }\n\n :host-context(.tgui-platform-ios) .tgui-section-body-with-header {\n border-radius: 12px;\n background: var(--tgui--section_bg_color);\n }\n\n :host-context(.tgui-platform-ios) .tgui-section-body {\n border-radius: 12px;\n background: var(--tgui--section_bg_color);\n }\n\n :host-context(.tgui-platform-ios) .tgui-section-body > :first-child {\n border-radius: 12px 12px 0 0;\n }\n\n :host-context(.tgui-platform-ios) .tgui-section-body > :last-child {\n border-radius: 0 0 12px 12px;\n }\n\n :host-context(.tgui-platform-ios) .tgui-section-body > :only-child {\n border-radius: 12px;\n }\n\n .tgui-section-divider {\n display: block;\n width: 100%;\n }\n " ], "template": "Content for the section footer. If a string is passed, SectionFooter is automatically used.\nFor centered footer, use
Content for the section header. If a string is passed, SectionHeader is automatically used.\nFor more control or a large header, use
Checks if the value is a primitive (string or number)
\n", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isPrimitiveContent", "args": [ { "name": "content", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 168, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nChecks if the content is a primitive\n", "description": "Checks if the content is a primitive
\n", "jsdoctags": [ { "name": "content", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgTemplateOutlet" }, { "name": "DividerComponent", "type": "component" }, { "name": "SectionHeaderComponent", "type": "component" }, { "name": "SectionFooterComponent", "type": "component" } ], "description": "The Section component organizes content into separate sections with optional\nheaders and footers. It automatically wraps strings and numbers in appropriate\nSectionHeader and SectionFooter components, and inserts dividers between\nchild elements.
\n", "rawdescription": "\n\nThe Section component organizes content into separate sections with optional\nheaders and footers. It automatically wraps strings and numbers in appropriate\nSectionHeader and SectionFooter components, and inserts dividers between\nchild elements.\n", "type": "component", "assetsDirs": [], "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "headerContent": { "name": "headerContent", "getSignature": { "name": "headerContent", "type": "", "returnType": "string | number | null", "line": 143 } }, "footerContent": { "name": "footerContent", "getSignature": { "name": "footerContent", "type": "", "returnType": "string | number | null", "line": 147 } } } }, { "name": "SectionFooterComponent", "id": "component-SectionFooterComponent-d528ef1ebc021d4ff1ab5f9924c8c9749cd0d322a7b26de31c4333010ce498a04ced4b10284255a0a633a739e4a9df919362f3c8823ac11e34dd4ff0e6fb03d4", "file": "src/lib/components/blocks/section/components/section-footer/section-footer.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-section-footer", "styleUrls": [], "styles": [ "\n .tgui-section-footer {\n padding: 12px 24px;\n }\n\n .tgui-section-footer--centered {\n padding: 16px 24px 20px;\n text-align: center;\n }\n\n :host-context(.tgui-platform-ios) .tgui-section-footer--centered {\n padding: 16px 16px 0;\n }\n :host-context(.tgui-platform-ios) .tgui-section-footer {\n padding: 8px 16px 0;\n }\n :host-context(.tgui-platform-ios) .tgui-section-footer-text {\n color: var(--tgui--section_header_text_color);\n }\n " ], "template": "\nText centering, adding additional padding
\n", "line": 64, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "_isPlatformIOS", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "boolean", "indexKey": "", "optional": false, "description": "", "line": 68, "modifierKind": [ 125 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgClass" }, { "name": "CaptionComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" } ], "description": "The SectionFooter component represents a footer for the Section component.\nSupports centered mode for centered text.
\n", "rawdescription": "\n\nThe SectionFooter component represents a footer for the Section component.\nSupports centered mode for centered text.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 68 }, "extends": [], "accessors": { "footerClasses": { "name": "footerClasses", "getSignature": { "name": "footerClasses", "type": "", "returnType": "RecordEnlarged header, changes font size, padding and color
\n", "line": 65, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "NgClass" }, { "name": "HeadlineComponent", "type": "component" }, { "name": "LargeTitleComponent", "type": "component" } ], "description": "The SectionHeader component represents a header for the Section component.\nSupports large mode for an enlarged header.
\n", "rawdescription": "\n\nThe SectionHeader component represents a header for the Section component.\nSupports large mode for an enlarged header.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "headerClasses": { "name": "headerClasses", "getSignature": { "name": "headerClasses", "type": "", "returnType": "RecordSelected tab index
\n", "line": 105, "rawdescription": "\nSelected tab index", "required": false } ], "outputsClass": [ { "name": "selectedIndexChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Selected index change event
\n", "line": 108, "rawdescription": "\nSelected index change event", "required": false } ], "propertiesClass": [ { "name": "hasSelectedTab", "defaultValue": "signalCheck if there is a selected tab
\n", "line": 114, "rawdescription": "\nCheck if there is a selected tab" }, { "name": "selectedIndex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Selected tab index
\n", "line": 105, "rawdescription": "\nSelected tab index", "required": false }, { "name": "selectedIndexChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Selected index change event
\n", "line": 108, "rawdescription": "\nSelected index change event", "required": false }, { "name": "tabItems", "deprecated": false, "deprecationMessage": "", "type": "QueryListGet all child SegmentedControlItem elements
\n", "line": 120, "rawdescription": "\nGet all child SegmentedControlItem elements", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "SegmentedControlItemComponent" } ], "modifierKind": [ 170 ] }, { "name": "tabsCount", "defaultValue": "signalNumber of tabs
\n", "line": 111, "rawdescription": "\nNumber of tabs" } ], "methodsClass": [ { "name": "getSliderTransform", "args": [], "optional": false, "returnType": "string", "typeParameters": [], "line": 158, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nGet slider transform", "description": "Get slider transform
\n" }, { "name": "selectTab", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 170, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSelect tab by index", "description": "Select tab by index
\n", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "The SegmentedControl component renders a set of options as a segmented control,\ncommonly used for toggling between views or filtering content.\nIt is designed to adapt its appearance based on the platform,\noffering a native look and feel.
\n", "rawdescription": "\n\nThe SegmentedControl component renders a set of options as a segmented control,\ncommonly used for toggling between views or filtering content.\nIt is designed to adapt its appearance based on the platform,\noffering a native look and feel.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 126 }, "extends": [], "implements": [ "AfterContentInit", "OnDestroy" ], "accessors": { "isIOS": { "name": "isIOS", "getSignature": { "name": "isIOS", "type": "boolean", "returnType": "boolean", "line": 136, "rawdescription": "\nCheck if platform is iOS", "description": "Check if platform is iOS
\n" } } } }, { "name": "SegmentedControlDemoComponent", "id": "component-SegmentedControlDemoComponent-17e70d589c24ec9d632c1d7c89bb8b57e3358aa3825a2582592127a53345f5d1d22745d098384541ede0467e05c6e59ab792a1ec0283f55096eb6e2ab972c8b7", "file": "src/lib/components/navigation/segmented-control/story/segmented-control.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-segmented-control-demo", "styleUrls": [], "styles": [], "template": "\n Selected item: {{ options[selectedIndex()].label }} ({{ options[selectedIndex()].value }})\n
\nExternal parameter to mark item as selected
\n", "line": 94, "rawdescription": "\nExternal parameter to mark item as selected", "required": false } ], "outputsClass": [ { "name": "select", "defaultValue": "new EventEmitterEvent triggered when the item is clicked
\n", "line": 103, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "isSelectedValue", "defaultValue": "computed(() => this._isSelected() || this.selected())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed value that considers both sources (internal has priority)
\n", "line": 100, "rawdescription": "\nComputed value that considers both sources (internal has priority)" }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "External parameter to mark item as selected
\n", "line": 94, "rawdescription": "\nExternal parameter to mark item as selected", "required": false } ], "methodsClass": [ { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 127, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHandle click on the item", "description": "Handle click on the item
\n" }, { "name": "setSelected", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 135, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPublic method to set the selection state\nfrom the parent component\n", "description": "Public method to set the selection state\nfrom the parent component
\n", "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.selected", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nBind selected class to host", "description": "Bind selected class to host
\n", "line": 122, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TappableComponent", "type": "component" }, { "name": "CaptionComponent", "type": "component" } ], "description": "SegmentedControlItem component represents an individual item within a SegmentedControl.\nIt can be interactively selected to display associated content.
\n", "rawdescription": "\n\nSegmentedControlItem component represents an individual item within a SegmentedControl.\nIt can be interactively selected to display associated content.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 106 }, "extends": [], "accessors": { "isIOS": { "name": "isIOS", "getSignature": { "name": "isIOS", "type": "boolean", "returnType": "boolean", "line": 116, "rawdescription": "\nCheck if platform is iOS", "description": "Check if platform is iOS
\n" } }, "isSelected": { "name": "isSelected", "getSignature": { "name": "isSelected", "type": "boolean", "returnType": "boolean", "line": 122, "rawdescription": "\nBind selected class to host", "description": "Bind selected class to host
\n" } } } }, { "name": "SelectComponent", "id": "component-SelectComponent-71f28ff61616d24937dc6798d0c5639895cf0fee7535cb6ef39ae40f971a4b7fb32a49177ef66d486be9452bbeacf5dec3490a72a447fe75ea0b635bccbe45d6", "file": "src/lib/components/form/select/select.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-select", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n\n .select-container {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n }\n\n .select {\n appearance: none;\n width: 100%;\n height: 100%;\n border: none;\n color: var(--tgui--text_color);\n outline: none;\n border-radius: inherit;\n background: inherit;\n font-family: var(--tgui--font-family);\n }\n\n /* iOS styles */\n :host-context(.tgui-platform-ios) .select {\n font-size: var(--tgui--text--font_size);\n line-height: var(--tgui--text--line_height);\n font-weight: var(--tgui--font_weight--accent3);\n }\n\n /* Android/Web styles */\n :host-context(.tgui-platform-base) .select {\n font-size: var(--tgui--subheadline1--font_size);\n line-height: var(--tgui--subheadline1--line_height);\n font-weight: var(--tgui--font_weight--accent3);\n }\n\n .chevron {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n color: var(--tgui--secondary_hint_color);\n pointer-events: none;\n }\n " ], "template": "Whether the input is disabled
\n", "line": 117, "rawdescription": "\nWhether the input is disabled", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "before", "defaultValue": "inputContent to be displayed before the form input
\n", "line": 111, "rawdescription": "\nContent to be displayed before the form input" }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Whether the input is disabled
\n", "line": 117, "rawdescription": "\nWhether the input is disabled", "required": false }, { "name": "header", "defaultValue": "inputHeader text displayed above the input
\n", "line": 108, "rawdescription": "\nHeader text displayed above the input" }, { "name": "status", "defaultValue": "input<'default' | 'error' | 'focused'>('default')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Visual status of the input
\n", "line": 114, "rawdescription": "\nVisual status of the input" }, { "name": "wrapperClasses", "defaultValue": "computed(() => {\n return {\n 'wrapper': true,\n 'wrapper--ios': this.platformService.isIOS(),\n }\n })", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Combines wrapper classes based on platform
\n", "line": 121, "rawdescription": "\nCombines wrapper classes based on platform" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "FormInputComponent", "type": "component" }, { "name": "SubheadlineComponent", "type": "component" }, { "name": "TextComponent", "type": "component" }, { "name": "TguiIcon20ChevronDown" } ], "description": "Renders a custom styled select input within a FormInput container. This component is designed to integrate seamlessly\nwith the form input styles, providing a consistent look and enhanced features such as a custom dropdown arrow and support\nfor platform-specific typography. The FormInput wrapper facilitates the inclusion of headers and status messages.
If true, the skeleton overlay is shown above the content.\nWhen false, the skeleton is hidden, showing any underlying content.
\n", "line": 68, "rawdescription": "\n\nIf true, the skeleton overlay is shown above the content.\nWhen false, the skeleton is hidden, showing any underlying content.\n", "required": false }, { "name": "withoutAnimation", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, disables the shimmering animation of the skeleton.
\n", "line": 62, "rawdescription": "\n\nIf true, disables the shimmering animation of the skeleton.\n", "required": false } ], "outputsClass": [], "propertiesClass": [ { "name": "visible", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, the skeleton overlay is shown above the content.\nWhen false, the skeleton is hidden, showing any underlying content.
\n", "line": 68, "rawdescription": "\n\nIf true, the skeleton overlay is shown above the content.\nWhen false, the skeleton is hidden, showing any underlying content.\n", "required": false }, { "name": "withoutAnimation", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "If true, disables the shimmering animation of the skeleton.
\n", "line": 62, "rawdescription": "\n\nIf true, disables the shimmering animation of the skeleton.\n", "required": false } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.visible", "deprecated": false, "deprecationMessage": "", "line": 76, "type": "any", "decorators": [] }, { "name": "class.without-animation", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "any", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Used as a placeholder during the loading state of a component or page.\nIt can visually mimic the layout that will be replaced by the actual content once loaded,\nimproving user experience by reducing perceived loading times.
\n", "rawdescription": "\n\nUsed as a placeholder during the loading state of a component or page.\nIt can visually mimic the layout that will be replaced by the actual content once loaded,\nimproving user experience by reducing perceived loading times.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isWithoutAnimation": { "name": "isWithoutAnimation", "getSignature": { "name": "isWithoutAnimation", "type": "", "returnType": "", "line": 71 } }, "isVisible": { "name": "isVisible", "getSignature": { "name": "isVisible", "type": "", "returnType": "", "line": 76 } } } }, { "name": "SnackbarButtonComponent", "id": "component-SnackbarButtonComponent-709c118d903d84055021833427966a823174e2c3dc5d584103221a92fba9026a0806ff6cc75f7c7a914fd98d9de422551c96e387b1da3d62aee334ba9d40dfa2", "file": "src/lib/components/feedback/snackbar/components/snackbar-button/snackbar-button.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-snackbar-button", "styleUrls": [ "./snackbar-button.component.css" ], "styles": [], "template": "Signal indicating whether the current platform is iOS
\n", "line": 68, "rawdescription": "\n\nSignal indicating whether the current platform is iOS\n" }, { "name": "size", "defaultValue": "input<'s' | 'm' | 'l'>('m')", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Size of the loading indicator ('s' - small, 'm' - medium, 'l' - large)
\n", "line": 61, "rawdescription": "\n\nSize of the loading indicator ('s' - small, 'm' - medium, 'l' - large)\n" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.size-l", "deprecated": false, "deprecationMessage": "", "line": 83, "type": "boolean", "decorators": [] }, { "name": "class.size-m", "deprecated": false, "deprecationMessage": "", "line": 82, "type": "boolean", "decorators": [] }, { "name": "class.size-s", "deprecated": false, "deprecationMessage": "", "line": 81, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "BaseSpinnerComponent", "type": "component" }, { "name": "IOSSpinnerComponent", "type": "component" } ], "description": "Spinner component displays a loading indicator.\nAutomatically selects the appropriate indicator style based on the platform.
\n", "rawdescription": "\n\nSpinner component displays a loading indicator.\nAutomatically selects the appropriate indicator style based on the platform.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 68 }, "extends": [], "accessors": { "isSizeS": { "name": "isSizeS", "getSignature": { "name": "isSizeS", "type": "", "returnType": "", "line": 81 } }, "isSizeM": { "name": "isSizeM", "getSignature": { "name": "isSizeM", "type": "", "returnType": "", "line": 82 } }, "isSizeL": { "name": "isSizeL", "getSignature": { "name": "isSizeL", "type": "", "returnType": "", "line": 83 } } } }, { "name": "SpoilerComponent", "id": "component-SpoilerComponent-c5d503ef513f508aed87ad438bc4f0a2b6cc4aaecb8f4552ff72553740b1d567b7c1087f0e0ae6cb9dfe5e6907bb513df8e779136fd72913ef7b25d2dfe93f6a", "file": "src/lib/components/feedback/spoiler/spoiler.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-spoiler", "styleUrls": [], "styles": [ "\n :host {\n position: relative;\n display: table;\n }\n\n :host::before {\n position: absolute;\n content: '';\n inset: 0;\n background-color: var(--tgui--bg_color);\n background-image: url('./icons/spoiler.svg');\n background-repeat: round;\n background-position: center;\n z-index: var(--tgui--z-index--simple);\n transition: .4s ease;\n }\n\n :host.visible::before {\n opacity: 0;\n }\n " ], "template": "Provides a way to hide or show content, such as details or spoilers, with a simple click.\nThe visibility state can be controlled externally via props or toggled by user interaction.
\n", "rawdescription": "\n\nProvides a way to hide or show content, such as details or spoilers, with a simple click.\nThe visibility state can be controlled externally via props or toggled by user interaction.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isVisibleState": { "name": "isVisibleState", "getSignature": { "name": "isVisibleState", "type": "boolean", "returnType": "boolean", "line": 62 } } } }, { "name": "StepsComponent", "id": "component-StepsComponent-6a34c865e6cf7b29a2664df6b34814b9cca14556cc3bde4d06acd1294203bdf0545bcbac34f294045e6f47c7085c0d4ce0246a8786180ed530ce2276bbd66533", "file": "src/lib/components/blocks/steps/steps.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-steps", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n \n .tgui-steps-wrapper {\n display: flex;\n gap: 9px;\n padding: 12px;\n }\n \n .tgui-steps-step {\n min-width: 3px;\n height: 3px;\n width: 100%;\n border-radius: 2px;\n background: var(--tgui--tertiary_bg_color);\n }\n \n .tgui-steps-step--active {\n background: var(--tgui--link_color);\n }\n " ], "template": "Total number of steps.
\n", "line": 49, "rawdescription": "\nTotal number of steps.", "required": false }, { "name": "progress", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Current progress, indicating how many steps have been completed.\nProgress is 0-indexed and goes up to count.
Total number of steps.
\n", "line": 49, "rawdescription": "\nTotal number of steps.", "required": false }, { "name": "progress", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Current progress, indicating how many steps have been completed.\nProgress is 0-indexed and goes up to count.
Array of indexes for rendering steps
\n", "line": 58, "rawdescription": "\nArray of indexes for rendering steps" } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" } ], "description": "Renders a visual indicator of steps or progress in a process, such as a tutorial or a multi-step form.\nIt visually represents total steps and current progress.
\n", "rawdescription": "\n\nRenders a visual indicator of steps or progress in a process, such as a tutorial or a multi-step form.\nIt visually represents total steps and current progress.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "StoryRootComponent", "id": "component-StoryRootComponent-47c96b209cfa471eb332f788fd2ba2169ae4d60f6d831ae0187ef804524f868e3b4f4fa5fd8725c96ecdabf6b6fefd4ef98d3e0cbfbbb240e21a64aec7ea4de2", "file": "src/lib/components/overlays/modal/story/modal.stories.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-story-root", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n width: 100%;\n height: 100%;\n font-family: var(--tgui--font-family);\n }\n \n :host.tgui-root-wrapper {\n display: block;\n }\n " ], "template": "Determines the size of the subheadline, with 1 being the default and '2' providing a smaller option.
The Subheadline component is designed to render text that serves as a secondary heading\nor subheading within content. It leverages the Typography component for consistent text styling,\noffering additional control over the text's size through the level prop. By default, it renders\nas an <h6> element but can be customized with the tag property.
Sets the checked state
\n", "line": 166, "rawdescription": "\nSets the checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the disabled state
\n", "line": 169, "rawdescription": "\nSets the disabled state", "required": false } ], "outputsClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted when the switch state changes
\n", "line": 173, "rawdescription": "\nEvent emitted when the switch state changes", "required": false } ], "propertiesClass": [ { "name": "change", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted when the switch state changes
\n", "line": 173, "rawdescription": "\nEvent emitted when the switch state changes", "required": false }, { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the checked state
\n", "line": 166, "rawdescription": "\nSets the checked state", "required": false }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Sets the disabled state
\n", "line": 169, "rawdescription": "\nSets the disabled state", "required": false }, { "name": "name", "defaultValue": "inputThe name attribute for the input
\n", "line": 160, "rawdescription": "\nThe name attribute for the input" }, { "name": "platformService", "defaultValue": "inject(PlatformService)", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "", "line": 155, "modifierKind": [ 125 ] }, { "name": "value", "defaultValue": "inputThe value attribute for the input
\n", "line": 163, "rawdescription": "\nThe value attribute for the input" } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 177, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHandler for change event", "description": "Handler for change event
\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "VisuallyHiddenDirective", "type": "directive" } ], "description": "A custom switch component that mimics the behavior of a checkbox input but with enhanced styling.\nIt supports all the standard attributes of an HTML input element of type "checkbox".\nThe appearance of the switch can be customized to match either a base or iOS platform style.
\n", "rawdescription": "\n\nA custom switch component that mimics the behavior of a checkbox input but with enhanced styling.\nIt supports all the standard attributes of an HTML input element of type \"checkbox\".\nThe appearance of the switch can be customized to match either a base or iOS platform style.\n", "type": "component", "assetsDirs": [], "extends": [] }, { "name": "TabbarComponent", "id": "component-TabbarComponent-08645ff8eafffd24f96638100b18f6d0599d1aec761901a59a92086db9683e5db493ba7d2475c0eb11dc00143f619ea61ba04786ce87c6d0f116bd4394848224", "file": "src/lib/components/layout/tabbar/tabbar.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-tabbar", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n }\n\n .tabbar-container {\n display: flex;\n justify-items: stretch;\n box-shadow: 0 -1px 0 var(--tgui--divider);\n background: var(--tgui--surface_primary);\n padding: 0 16px;\n }\n\n :host-context(.tgui-platform-ios) .tabbar-container {\n padding: 0;\n }\n " ], "template": "Index of the selected tab
\n", "line": 61, "rawdescription": "\nIndex of the selected tab", "required": false } ], "outputsClass": [ { "name": "selectedIndexChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted when selected tab changes
\n", "line": 64, "rawdescription": "\nEvent emitted when selected tab changes", "required": false } ], "propertiesClass": [ { "name": "selectedIndex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Index of the selected tab
\n", "line": 61, "rawdescription": "\nIndex of the selected tab", "required": false }, { "name": "selectedIndexChange", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Event emitted when selected tab changes
\n", "line": 64, "rawdescription": "\nEvent emitted when selected tab changes", "required": false }, { "name": "tabbarItems", "deprecated": false, "deprecationMessage": "", "type": "QueryListAll tab items
\n", "line": 70, "rawdescription": "\nAll tab items", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "TabbarItemComponent" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "selectTab", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 94, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles tab selection event\n", "description": "Handles tab selection event
\n", "jsdoctags": [ { "name": { "pos": 2555, "end": 2560, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 2549, "end": 2554, "kind": 80, "id": 0, "flags": 16842752, "transformFlags": 0, "escapedText": "param" }, "comment": "Index of selected tab
\n" } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "FixedLayoutComponent", "type": "component" } ], "description": "Serves as a container for TabbarItem components, rendering a navigational tab bar.\nUtilizes a FixedLayout to ensure the tab bar remains positioned at a specific area within a view,\ntypically at the bottom of the screen, making it ideal for mobile or web application navigation menus.
The component adapts its styling based on the platform, providing a consistent look and feel across different devices.
\n", "rawdescription": "\n\nServes as a container for `TabbarItem` components, rendering a navigational tab bar.\nUtilizes a `FixedLayout` to ensure the tab bar remains positioned at a specific area within a view,\ntypically at the bottom of the screen, making it ideal for mobile or web application navigation menus.\n\nThe component adapts its styling based on the platform, providing a consistent look and feel across different devices.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 70 }, "extends": [], "implements": [ "AfterContentInit" ] }, { "name": "TabbarItemComponent", "id": "component-TabbarItemComponent-7711640bb6daff52bb9aa0f22d3742e58a84e6250526ff37ad328eddbdc08f53cc36bdec73c043877d206de114885d32ffb6193141d987979ddbd112bb3f6dec", "file": "src/lib/components/layout/tabbar/tabbar-item.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-tabbar-item", "styleUrls": [], "styles": [ "\n :host {\n display: flex;\n flex: 1 0 0;\n max-inline-size: 100%;\n min-inline-size: 0;\n }\n\n tgui-tappable {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 6px;\n width: 100%;\n padding: 12px 16px 16px;\n color: var(--tgui--secondary_hint_color);\n }\n\n :host-context(.tgui-platform-ios) tgui-tappable {\n padding: 8px 12px 4px;\n gap: 4px;\n }\n\n :host.selected tgui-tappable {\n color: var(--tgui--link_color);\n }\n\n .icon {\n display: flex;\n justify-content: center;\n min-width: 64px;\n padding: 2px 10px;\n border-radius: 35px;\n }\n\n :host:not(.platform-ios).selected .icon {\n background: var(--tgui--secondary_fill);\n }\n\n :host-context(.tgui-platform-ios) .icon {\n padding: 0;\n }\n\n .text {\n white-space: nowrap;\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n " ], "template": "Represents an individual tab within a Tabbar.\nEach TabbarItem typically contains an icon and optional text.\nWhen selected, the tab exhibits different visual styles to indicate its active state.
The component adapts its styling based on the platform, providing a consistent look and feel across different devices.
\n", "rawdescription": "\n\nRepresents an individual tab within a `Tabbar`.\nEach `TabbarItem` typically contains an icon and optional text.\nWhen selected, the tab exhibits different visual styles to indicate its active state.\n\nThe component adapts its styling based on the platform, providing a consistent look and feel across different devices.\n", "type": "component", "assetsDirs": [], "extends": [], "accessors": { "isIOS": { "name": "isIOS", "getSignature": { "name": "isIOS", "type": "boolean", "returnType": "boolean", "line": 117 } }, "isSelected": { "name": "isSelected", "getSignature": { "name": "isSelected", "type": "boolean", "returnType": "boolean", "line": 123 } }, "hasIcon": { "name": "hasIcon", "getSignature": { "name": "hasIcon", "type": "boolean", "returnType": "boolean", "line": 136 } } } }, { "name": "TabsItemComponent", "id": "component-TabsItemComponent-aa33178a508ba5b3cc72c87aac69e4badba1c5f7587055bb67d348f7991a215667cc4b0f320c0abdf30d713cd2ab5f93d716f07f3fd22e9e3ac7cb9f3fd6f634", "file": "src/lib/components/navigation/tabs-list/tabs-item.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "host": {}, "inputs": [], "outputs": [], "providers": [], "selector": "tgui-tabs-item", "styleUrls": [], "styles": [ "\n :host {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n flex: 1 0 0;\n max-inline-size: 100%;\n height: 44px;\n border: none;\n border-radius: inherit;\n background: transparent;\n transition: color 125ms;\n color: var(--tgui--secondary_hint_color);\n min-width: 0; /* Important for text-overflow to work in flex containers */\n }\n\n :host.selected {\n color: var(--tgui--link_color);\n }\n\n tgui-tappable {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden; /* For content clipping */\n }\n \n .tab-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n text-align: center;\n display: block;\n }\n " ], "template": "External parameter for tab selection
\n", "line": 84, "rawdescription": "\nExternal parameter for tab selection", "required": false } ], "outputsClass": [ { "name": "select", "defaultValue": "new EventEmitterEvent that fires when tab is clicked
\n", "line": 93, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "isSelectedValue", "defaultValue": "computed(() => this._isSelected() || this.selected())", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "Computed value considering both sources (internal has priority)
\n", "line": 90, "rawdescription": "\nComputed value considering both sources (internal has priority)" }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "indexKey": "", "optional": false, "description": "External parameter for tab selection
\n", "line": 84, "rawdescription": "\nExternal parameter for tab selection", "required": false } ], "methodsClass": [ { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 117, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nTab click handler", "description": "Tab click handler
\n" }, { "name": "setSelected", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 125, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPublic method to set tab selection value\nfrom parent component\n", "description": "Public method to set tab selection value\nfrom parent component
\n", "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.selected", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nBind selected class to host", "description": "Bind selected class to host
\n", "line": 112, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": true, "imports": [ { "name": "CommonModule", "type": "module" }, { "name": "TappableComponent", "type": "component" }, { "name": "TextComponent", "type": "component" } ], "description": "TabsItem component represents an individual tab within a TabsList.\nIt can be interactively selected to display associated content.
\n", "rawdescription": "\n\nTabsItem component represents an individual tab within a TabsList.\nIt can be interactively selected to display associated content.\n", "type": "component", "assetsDirs": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 96 }, "extends": [], "accessors": { "isIOS": { "name": "isIOS", "getSignature": { "name": "isIOS", "type": "boolean", "returnType": "boolean", "line": 106, "rawdescription": "\nCheck if platform is iOS", "description": "Check if platform is iOS
\n" } }, "isSelected": { "name": "isSelected", "getSignature": { "name": "isSelected", "type": "boolean", "returnType": "boolean", "line": 112, "rawdescription": "\nBind selected class to host", "description": "Bind selected class to host
\n" } } } }, { "name": "TabsListComponent", "id": "component-TabsListComponent-db89dd5213f080a3810eda805391ba156da63d604c0a4ee29abf20ebf7c4062edf911125b589834dc9bc28b283990936ab31a31746a2a297da5d3874d0ab99b8", "file": "src/lib/components/navigation/tabs-list/tabs-list.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [ "ViewEncapsulation.Emulated" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "tgui-tabs-list", "styleUrls": [], "styles": [ "\n :host {\n display: block;\n width: 100%;\n overflow: hidden; /* Clip content if it overflows */\n }\n\n .tabs-container {\n overflow: hidden;\n position: relative;\n display: flex;\n align-items: center;\n align-content: stretch;\n width: 100%;\n height: 100%;\n /* Remove gap as it can interfere with compression */\n /* Use flex container for even space distribution */\n }\n\n /* Ensure TabsItem child elements are evenly distributed */\n ::ng-deep .tabs-container > tgui-tabs-item {\n flex: 1 1 0;\n min-width: 0; /* Important for flex element compression */\n margin: 0 6px; /* Add horizontal margins instead of gap */\n }\n\n /* Remove margin from first and last elements for alignment */\n ::ng-deep .tabs-container > tgui-tabs-item:first-child {\n margin-left: 0;\n }\n\n ::ng-deep .tabs-container > tgui-tabs-item:last-child {\n margin-right: 0;\n }\n\n .slider {\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 3px;\n transition: transform 125ms;\n border-radius: 4px 4px 1px 1px;\n background: var(--tgui--button_color);\n }\n " ], "template": "