@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 257 kB
JSON
[{"displayName":"DtAvatar","description":"An avatar is a visual representation of a user or object.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/avatar.html","title":"see"}]},"exportName":"default","props":[{"name":"id","description":"Id of the avatar content wrapper element","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() { return getUniqueString(); }"}},{"name":"seed","description":"Pass in a seed to get the random color generation based on that string. For example if you pass in a\nuser ID as the string it will return the same randomly generated colors every time for that user.","type":{"name":"string"},"defaultValue":{"func":false,"value":"undefined"}},{"name":"color","description":"Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\nif the seed prop is set.","type":{"name":"string"},"defaultValue":{"func":false,"value":"undefined"}},{"name":"size","description":"The size of the avatar","tags":{},"values":["xs","sm","md","lg","xl"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'md'"}},{"name":"avatarClass","description":"Used to customize the avatar container","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"canvasClass","description":"Set classes on the avatar canvas. Wrapper around the core avatar image.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"iconClass","description":"Pass through classes. Used to customize the avatar icon","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"presence","description":"Determines whether to show the presence indicator for\nAvatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\nor 'active'. By default, it's null and nothing is shown.","tags":{},"values":["null","busy","away","offline","active"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"AVATAR_PRESENCE_STATES.NONE"}},{"name":"presenceProps","description":"A set of props to be passed into the presence component.","type":{"name":"object"},"defaultValue":{"func":false,"value":"{}"}},{"name":"group","description":"Determines whether to show a group avatar.\nLimit to 2 digits max, more than 99 will be rendered as “99+”.\nif the number is 1 or less it would just show the regular avatar as if group had not been set.","type":{"name":"number"},"defaultValue":{"func":false,"value":"undefined"}},{"name":"overlayText","description":"The text that overlays the avatar","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"overlayClass","description":"Used to customize the avatar overlay","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"imageSrc","description":"Source of the image","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"imageAlt","description":"Alt attribute of the image, required if imageSrc is provided.\nCan be set to '' (empty string) if the image is described\nin text nearby","type":{"name":"string"},"defaultValue":{"func":false,"value":"undefined"}},{"name":"iconSize","description":"Icon size to be displayed on the avatar","tags":{},"values":["100","200","300","400","500","600","700","800"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"fullName","description":"Full name used to extract initials.","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"clickable","description":"Makes the avatar focusable and clickable,\nemits a click event when clicked.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"iconAriaLabel","description":"Descriptive label for the icon.\nTo avoid a11y issues, set this prop if clickable and iconName are set.","type":{"name":"string"},"defaultValue":{"func":false,"value":"undefined"}}],"events":[{"name":"click","description":"Avatar click event","type":{"names":["PointerEvent | KeyboardEvent"]}}],"slots":[{"name":"icon","scoped":true,"description":"Slot for avatar icon. It will display if no imageSrc is provided","bindings":[{"name":"icon-size","title":"binding"}]},{"name":"overlayIcon","description":"Slot for overlay icon."}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/avatar/avatar.vue"]},{"displayName":"DtBadge","description":"A badge is a compact UI element that provides brief, descriptive information about an element.\nIt is terse, ideally one word.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/badge.html","title":"see"}]},"exportName":"default","props":[{"name":"iconSize","description":"The size of the left and right icons.","tags":{},"values":["100","200","300","400","500","600","700","800"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'200'"}},{"name":"text","description":"Text for the badge content","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"kind","description":"The kind of badge which determines the styling","tags":{},"values":["label","count"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'label'"}},{"name":"type","description":"Color for the badge background","tags":{},"values":["default","info","success","warning","critical","bulletin","ai"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'default'"}},{"name":"decoration","description":"Decoration for the badge. This can be only used with kind: label and type: default\nwith no left and right icons","tags":{},"values":["default","black-400","black-500","black-900","red-200","red-300","red-400","purple-200","purple-300","purple-400","purple-500","blue-200","blue-300","blue-400","green-300","green-400","green-500","gold-300","gold-400","gold-500","magenta-200","magenta-300","magenta-400"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"undefined"}},{"name":"labelClass","description":"Used to customize the label container","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"subtle","description":"Shows a subtle appearance for the badge\nCurrently only affects the badge when type is bulletin.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"outlined","description":"Outlines the badge with a border","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"slots":[{"name":"leftIcon","scoped":true,"description":"Slot for left icon, icon-size slot prop defaults to '200'","bindings":[{"name":"icon-size","title":"binding"}]},{"name":"default","description":"Slot for badge content, defaults to text prop"},{"name":"rightIcon","scoped":true,"description":"Slot for right icon, icon-size slot prop defaults to '200'","bindings":[{"name":"icon-size","title":"binding"}]}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/badge/badge.vue"]},{"description":"Banners are a type of notice, delivering system and engagement messaging.\nThese are highly intrusive notices and should be used sparingly and appropriately.","displayName":"DtBanner","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/banner.html","title":"see"}]},"exportName":"default","props":[{"name":"titleId","description":"Sets an ID on the title element of the component. Useful for aria-describedby\nor aria-labelledby or any other reason you may need an id to refer to the title.","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() { return utils.getUniqueString(); }"}},{"name":"contentId","description":"Sets an ID on the content element of the component. Useful for aria-describedby\nor aria-labelledby or any other reason you may need an id to refer to the content.","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() { return utils.getUniqueString(); }"}},{"name":"title","description":"Title header of the notice. This can be left blank to remove the title from the notice entirely.","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"important","description":"Used in scenarios where the message needs to visually dominate the screen.\nThis will also change the aria role from status to alertdialog.\nand will modally trap the keyboard focus in the dialog as soon as it displays.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"pinned","description":"Pins the banner to the top of the window and pushes all app content down.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"kind","description":"Severity level of the notice, sets the icon and background","tags":{},"values":["base","error","info","success","warning"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'base'"}},{"name":"hideClose","description":"Hides the close button from the notice","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"hideIcon","description":"Hides the icon from the notice","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"hideAction","description":"Hides the action from the notice","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"dialogClass","description":"Inner dialog class","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"backgroundImage","description":"Banner background image","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"backgroundSize","description":"Background image size, follows the background-size CSS property values\n<a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n CSS background-sizes\n</a>","type":{"name":"string"},"defaultValue":{"func":false,"value":"'cover'"}}],"events":[{"name":"close","description":"Close button click event"}],"slots":[{"name":"icon","description":"Slot for custom icon"},{"name":"titleOverride","description":"Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop."},{"name":"default","description":"the main textual content of the banner"},{"name":"action","description":"Enter a possible action for the user to take, such as a link to another page"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/common/mixins/modal.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/banner/banner.vue"]},{"displayName":"DtBreadcrumbs","description":"Breadcrumbs are links used to provide context for the currently-viewed page\nand where it is located within the overall site structure.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/breadcrumbs.html","title":"see"}]},"exportName":"default","props":[{"name":"breadcrumbs","description":"A provided list of breadcrumbs. Overridden by default slot","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}},{"name":"inverted","description":"Passed through to link. If true, applies inverted styles to the link.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"ariaLabel","description":"Descriptive label for the navigation content.","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}}],"slots":[{"name":"default","description":"default slot for breadcrumbs content"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue"]},{"displayName":"DtButton","description":"A button is a UI element which allows users to take an action throughout the app.\nIt is important a button is identifiable, consistent, and communicates its actions clearly,\nand is appropriately sized to its action.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/button.html","title":"see"}]},"exportName":"default","props":[{"name":"circle","description":"Whether the button is a circle or not.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"iconPosition","description":"The position of the icon slot within the button.","tags":{},"values":["left","right","top","bottom"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'left'"}},{"name":"importance","description":"The fill and outline of the button associated with its visual importance.","tags":{},"values":["clear","outlined","primary"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'primary'"}},{"name":"link","description":"Whether the button should be styled as a link or not.","tags":{"see":[{"description":"DtLink","title":"see"}]},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"linkKind","description":"The color of the link and button if the button is styled as a link.","tags":{"see":[{"description":"DtLink","title":"see"}]},"values":["default","warning","danger","success","muted"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'default'"}},{"name":"linkInverted","description":"Determines whether the link should have inverted styling if the button is styled as a link.","tags":{"see":[{"description":"DtLink","title":"see"}]},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"disabled","description":"HTML button disabled attribute\n<a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"type","description":"HTML button type attribute\n<a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>","tags":{},"values":["button","submit","reset"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'button'"}},{"name":"width","description":"Button width, accepts\n<a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"size","description":"The size of the button.","tags":{},"values":["xs","sm","md","lg","xl"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'md'"}},{"name":"labelClass","description":"Used to customize the label container","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"loading","description":"Whether the button should display a loading animation or not.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"kind","description":"The color of the button.","tags":{},"values":["default","unstyled","muted","danger","positive","inverted"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'default'"}},{"name":"assertiveOnFocus","description":"Determines whether a screenreader reads live updates of\nthe button content to the user while the button\nis in focus. default is to not.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"active","description":"Determines whether the button should have active styling\ndefault is false.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"to","description":"vue-router `to` prop. When provided, renders a `<router-link>`\nfor client-side SPA navigation.","tags":{"see":[{"description":"https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to","title":"see"}]},"type":{"name":"string|object"},"defaultValue":{"func":false,"value":"null"}},{"name":"href","description":"When provided, renders an `<a>` element for standard browser navigation.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"target","description":"HTML anchor target attribute. Only applied when using the `href` prop.","tags":{},"values":["_self","_blank","_parent","_top"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"rel","description":"HTML anchor rel attribute. Only applied when using the `href` prop.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"replace","description":"vue-router `replace` prop. When true, navigation will not leave a\nhistory entry. Only applied when using the `to` prop.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"events":[{"name":"focusin","description":"Native button focus in event","type":{"names":["FocusEvent"]}},{"name":"focusout","description":"Native button focus out event","type":{"names":["FocusEvent"]}}],"slots":[{"name":"icon","scoped":true,"description":"Button icon","bindings":[{"name":"icon-size","title":"binding"}]},{"name":"default","description":"Content within button"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/button/button.vue"]},{"displayName":"DtButtonGroup","exportName":"default","description":"","tags":{},"props":[{"name":"alignment","description":"Alignment of the buttons inside the container","type":{"name":"string"},"defaultValue":{"func":false,"value":"'start'"}}],"slots":[{"name":"default","description":"Default slot for button items"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/button_group/button_group.vue"]},{"displayName":"DtCard","description":"A card contains summary content and actions about a single subject.\nIt can be used by itself or within a list, and is generally interactive.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/card.html","title":"see"}]},"exportName":"default","props":[{"name":"maxHeight","description":"The maximum height of the card content.\nIf given, makes content area scrollable.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"containerClass","description":"class for card container.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"contentClass","description":"class for card content.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"headerClass","description":"class for card header.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"footerClass","description":"class for card footer.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}}],"slots":[{"name":"header","description":"slot for header content"},{"name":"content","description":"slot for main content"},{"name":"footer","description":"slot for footer content"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/card/card.vue"]},{"description":"Checkboxes are control elements that allow the user to make a selection.They are typically used in a\nCheckbox Group which allows the user to make one or more selections from a list of options.","displayName":"DtCheckbox","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/checkbox.html","title":"see"}]},"exportName":"default","props":[{"name":"label","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"A provided label for the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"name","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"The name of the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"value","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"The value of the input","type":{"name":"string|number|boolean"},"defaultValue":{"func":false,"value":"null"}},{"name":"description","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Describes the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"disabled","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Disables the input","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"validationState","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"The validation state of the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"inputClass","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Used to customize the input element","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"labelClass","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Used to customize the label container","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"descriptionClass","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Used to customize the description container","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"labelChildProps","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"A set of props that are passed into the label container","type":{"name":"object"},"defaultValue":{"func":false,"value":"{}"}},{"name":"descriptionChildProps","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"A set of props that are passed into the description container","type":{"name":"object"},"defaultValue":{"func":false,"value":"{}"}},{"name":"rootClass","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Additional class name for the root element.\nCan accept all of: String, Object, and Array, i.e. has the\nsame api as Vue's built-in handling of the class attribute.","type":{"name":"string|object|array"},"defaultValue":{"func":false,"value":"''"}},{"name":"v-model","mixin":{"name":"Checkable Mixin","path":"../../common/mixins/input.js"},"description":"Used to set the checked state of the checkable input","tags":{"model":[{"description":"modelValue","title":"model"}]},"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"indeterminate","mixin":{"name":"Checkable Mixin","path":"../../common/mixins/input.js"},"description":"Indeterminate State, toggling indeterminate checkbox will uncheck","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"messagesClass","mixin":{"name":"Messages Mixin","path":"../../common/mixins/input.js"},"description":"Used to customize the validation messages component","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"messagesChildProps","mixin":{"name":"Messages Mixin","path":"../../common/mixins/input.js"},"description":"A set of props that are passed into the validation messages component","type":{"name":"object"},"defaultValue":{"func":false,"value":"{}"}},{"name":"showMessages","mixin":{"name":"Messages Mixin","path":"../../common/mixins/input.js"},"description":"Used to hide / show the validation messages","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"messages","mixin":{"name":"Messages Mixin","path":"../../common/mixins/input.js"},"description":"Validation messages","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}}],"events":[{"name":"input","description":"Native input event","type":{"names":["Boolean"]}},{"name":"update:modelValue","description":"Event fired to sync the modelValue prop with the parent component","type":{"names":["Boolean"]}},{"name":"focusin","description":"Native input focusin event","type":{"names":["FocusEvent"]}},{"name":"focusout","description":"Native input focusout event","type":{"names":["FocusEvent"]}}],"slots":[{"name":"default","description":"slot for Checkbox Label"},{"name":"description","description":"slot for Checkbox Description"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/common/mixins/input.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/checkbox/checkbox.vue"]},{"description":"Checkbox Groups are convenience components for a grouping of related Checkboxes.\nWhile each Checkbox within the group is independent, the `v-model` on the group provides\na convenient interface for determining which Checkboxes within the group are checked.","displayName":"DtCheckboxGroup","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/checkbox_group.html","title":"see"}]},"exportName":"default","props":[{"name":"id","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"The id of the input group","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() {\n return getUniqueString();\n}"}},{"name":"value","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"The value of the input group","type":{"name":"string|number|boolean|object"},"defaultValue":{"func":false,"value":"null"}},{"name":"name","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"The name of the input group","type":{"name":"string"},"required":true},{"name":"legend","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"The legend of the input group","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"disabled","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"Disables the input group","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"messages","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"Validation messages","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}},{"name":"showMessages","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"Show validation messages","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"legendClass","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"Used to customize the legend element","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"messagesClass","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"Used to customize the messages container","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"legendChildProps","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"A set of props that are passed into the legend element","type":{"name":"object"},"defaultValue":{"func":false,"value":"{}"}},{"name":"messagesChildProps","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"A set of props that are passed into the messages container","type":{"name":"object"},"defaultValue":{"func":false,"value":"{}"}},{"name":"dataQaGroup","description":"A data qa tag for the radio group","type":{"name":"string"},"defaultValue":{"func":false,"value":"'checkbox-group'"}},{"name":"dataQaGroupLegend","description":"A data qa tag for the radio group legend","type":{"name":"string"},"defaultValue":{"func":false,"value":"'checkbox-group-legend'"}},{"name":"dataQaGroupMessages","description":"A data qa tag for the radio group messages","type":{"name":"string"},"defaultValue":{"func":false,"value":"'checkbox-group-messages'"}},{"name":"modelValue","description":"Not supported by this component, please use selectedValues","type":{"name":""},"defaultValue":{"func":false,"value":"null"}},{"name":"v-model","description":"A provided list of selected values(s) for the checkbox group","tags":{"model":[{"description":"selectedValues","title":"model"}]},"type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}}],"events":[{"name":"input","mixin":{"name":"Input Group Mixin","path":"../../common/mixins/input_group.js"},"description":"Native input event","type":{"names":["Array"]}},{"name":"update:selectedValues","description":"Selected values for the checkbox group","type":{"names":["Array"]}}],"slots":[{"name":"legend","description":"slot for Input Group Legend"},{"name":"default","description":"slot for Input Group Components"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/common/mixins/input_group.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/checkbox_group/checkbox_group.vue","/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/input_group/input_group.vue"]},{"displayName":"DtChip","description":"A chip is a compact UI element that provides brief, descriptive information about an element.\nIt is terse, ideally one word. It is important a button is identifiable, consistent, and\ncommunicates its actions clearly, and is appropriately sized to its action.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/chip.html","title":"see"}]},"exportName":"default","props":[{"name":"disabled","description":"Whether the chip is disabled","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"hideClose","description":"Hides the close button on the chip","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"size","description":"The size of the chip.","tags":{},"values":["xs","sm","md"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'md'"}},{"name":"interactive","description":"The interactivity of the chip.\nMakes chip clickable, apply hover/focus/active style, emit keyboard events etc.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"id","description":"Id to use for the dialog's aria-labelledby.","type":{"name":"string"},"defaultValue":{"func":true,"value":"function () { return getUniqueString(); }"}},{"name":"ariaLabel","description":"Descriptive label for the chip content.\nIf this prop is unset the content in the default slot will be used as an aria-label.","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"contentClass","description":"Additional class name for the chip element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"labelClass","description":"Additional class name for the span element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}}],"events":[{"name":"close","description":"Close button click event"},{"name":"click","description":"Native chip click event","type":{"names":["PointerEvent | KeyboardEvent"]}},{"name":"keyup","description":"Native chip key up event","type":{"names":["KeyboardEvent"]}},{"name":"keydown","description":"Native chip key down event","type":{"names":["KeyboardEvent"]}}],"slots":[{"name":"icon","description":"slot for Chip icon"},{"name":"avatar","description":"slot for Chip avatar"},{"name":"default","description":"slot for Content within chip"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/chip/chip.vue"]},{"displayName":"DtCodeblock","exportName":"default","description":"","tags":{},"props":[{"name":"text","type":{"name":"string"},"required":true}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/codeblock/codeblock.vue"]},{"displayName":"DtCollapsible","description":"A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/collapsible.html","title":"see"}]},"exportName":"default","props":[{"name":"anchorText","description":"Text that is displayed on the anchor if nothing is passed in the slot.\nIgnored if the anchor slot is used.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"open","description":"Controls whether the collapsible is shown. Leaving this null will have the collapsible start\nexpanded and trigger on click by default. If you set this value, the default trigger\nbehavior will be disabled, and you can control it as you need.\nSupports .sync modifier","tags":{},"values":["null","true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"null"}},{"name":"id","description":"The id of the content wrapper.","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() { return getUniqueString(); }"}},{"name":"elementType","description":"HTML element type (tag name) of the root element of the component.","type":{"name":"string"},"defaultValue":{"func":false,"value":"'div'"}},{"name":"contentElementType","description":"HTML element type (tag name) of the content wrapper element.","type":{"name":"string"},"defaultValue":{"func":false,"value":"'div'"}},{"name":"anchorClass","description":"Additional class name for the anchor wrapper element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"null"}},{"name":"contentClass","description":"Additional class name for the content wrapper element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"null"}},{"name":"maxWidth","description":"The maximum width of the anchor and collapsible element.\nPossible units rem|px|%|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"maxHeight","description":"The maximum height of the collapsible element.\nPossible units rem|px|%|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"ariaLabel","description":"Label on the collapsible content. Should provide this or ariaLabelledBy but not both.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"ariaLabelledBy","description":"Id of the element that labels the collapsible content. Defaults to the anchor element.\nShould provide this or ariaLabel but not both.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}}],"events":[{"name":"update:open","description":"Event fired to sync the open prop with the parent component","type":{"names":["undefined"]}},{"name":"opened","description":"Event fired when the content is shown or hidden","type":{"names":["Boolean"]},"properties":[{"type":{"names":["undefined"]},"name":"<anonymous1>"}]}],"slots":[{"name":"anchor","scoped":true,"description":"Slot for the anchor element that toggles the collapsible content","bindings":[{"name":"attrs","title":"binding"}]},{"name":"content","description":"Slot for the collapsible element that is expanded by the anchor"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/collapsible/collapsible.vue"]},{"displayName":"DtCollapsibleLazyShow","exportName":"default","description":"","tags":{},"props":[{"name":"show","description":"Whether the child slot is shown.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"null"}},{"name":"appear","description":"Enable/Disable transition animation","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"elementType","description":"HTML element type (tag name) of the content wrapper element.","type":{"name":"string"},"defaultValue":{"func":false,"value":"'div'"}}],"slots":[{"name":"default","description":"slot for Content within collapsible"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/collapsible/collapsible_lazy_show.vue"]},{"exportName":"default","displayName":"DtCombobox","description":"A combobox is a semantic component that displays an input element combined with a listbox,\nwhich enables the user to select items from the list.","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/combobox.html","title":"see"}]},"props":[{"name":"label","description":"String to use for the input label.","type":{"name":"string"},"required":true},{"name":"labelVisible","description":"Determines visibility of input label.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"size","description":"Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`","tags":{},"values":["null","xs","sm","md","lg","xl"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"description","description":"Description for the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"listId","description":"Sets an ID on the list element of the component. Used by several aria attributes\nas well as when deriving the IDs for each item.","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() { return getUniqueString(); }"}},{"name":"onBeginningOfList","description":"A method that will be called when the selection goes past the beginning of the list.","type":{"name":"func"},"defaultValue":{"func":false,"value":"null"}},{"name":"onEndOfList","description":"A method that will be called when the selection goes past the end of the list.","type":{"name":"func"},"defaultValue":{"func":false,"value":"null"}},{"name":"showList","description":"Determines when to show the list element and also controls the aria-expanded attribute.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"listRenderedOutside","description":"If the list is rendered outside the component, like when using popover as the list wrapper.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"loading","description":"Determines when to show the skeletons and also controls aria-busy attribute.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"emptyList","description":"Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"emptyStateMessage","description":"Message to show when the list is empty","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"emptyStateClass","description":"Additional class name for the empty list element.\nCan accept all of: String, Object, and Array, i.e. has the\nsame api as Vue's built-in handling of the class attribute.","type":{"name":"string|object|array"},"defaultValue":{"func":false,"value":"''"}},{"name":"clickOnSelect","description":"Programmatically click on the active list item element when a selection\ncomes from keyboard navigation, i.e. pressing the \"Enter\" key.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"events":[{"name":"select","description":"Event fired when item selected","type":{"names":["Number"]}},{"name":"escape","description":"Event fired when pressing escape"},{"name":"highlight","description":"Event fired when the highlight changes","type":{"names":["Number"]}},{"name":"opened","description":"Event fired when list is shown or hidden","type":{"names":["Boolean"]}}],"slots":[{"name":"input","scoped":true,"description":"Slot for the combobox input element","bindings":[{"name":"input-props","title":"binding"}]},{"name":"emptyListItem"},{"name":"list","scoped":true,"description":"Slot for the combobox list element","bindings":[{"name":"list-props","title":"binding"},{"name":"opened","title":"binding"},{"name":"clear-highlight-index","title":"binding"}]}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/common/mixins/dom.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue/common/mixins/keyboard_list_navigation.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/combobox/combobox.vue"]},{"displayName":"DtComboboxMultiSelect","exportName":"default","description":"","tags":{},"props":[{"name":"label","description":"String to use for the input label.","type":{"name":"string"},"required":true},{"name":"labelVisible","description":"Determines visibility of input label.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"description","description":"Description for the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"placeholder","description":"Input placeholder","type":{"name":"string"},"defaultValue":{"func":false,"value":"'Select one or start typing'"}},{"name":"inputMessages","description":"Input validation messages","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}},{"name":"showInputMessages","description":"Show input validation message","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"loading","description":"Determines if the list is loading","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"loadingMessage","description":"The message when the list is loading","type":{"name":"string"},"defaultValue":{"func":false,"value":"'loading...'"}},{"name":"showList","description":"Determines when to show the list element and also controls the aria-expanded attribute.\nLeaving this null will have the combobox trigger on input focus by default.\nIf you set this value, the default trigger behavior will be disabled and you can\ncontrol it as you need.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"null"}},{"name":"listMaxHeight","description":"Determines maximum height for the popover before overflow.\nPossible units rem|px|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"'300px'"}},{"name":"selectedItems","description":"The selected items","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}},{"name":"maxSelected","description":"Would be the maximum number of selections you can make. 0 is unlimited","type":{"name":"number"},"defaultValue":{"func":false,"value":"0"}},{"name":"maxSelectedMessage","description":"Max select message when the max selections is exceeded with the structure:\n`[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}},{"name":"hasSuggestionList","description":"Displays the list when the combobox is focused, before the user has typed anything.\nWhen this is enabled the list will not close after selection.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"size","description":"Size of the chip, one of `xs`, `sm`, `md`","type":{"name":"string"},"defaultValue":{"func":false,"value":"'md'"}},{"name":"appendTo","description":"Sets the element to which the popover is going to append to.\n'body' will append to the nearest body (supports shadow DOM).","tags":{},"values":["'body'","'parent'","HTMLElement",""],"type":{"name":"HTMLElement|string"},"defaultValue":{"func":false,"value":"'body'"}},{"name":"transition","description":"Named transition when the content display is toggled.","tags":{"see":[{"description":"DtLazyShow","title":"see"}]},"type":{"name":"string"},"defaultValue":{"func":false,"value":"'fade'"}},{"name":"collapseOnFocusOut","description":"Determines whether the combobox should collapse to a single when losing focus.","tags":{"type":[{"title":"type","type":{"name":"boolean"}}]},"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"listMaxWidth","description":"Determines maximum width for the popover before overflow.\nPossible units rem|px|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"reservedRightSpace","description":"Amount of reserved space (in px) on the right side of the input\nbefore the chips and the input caret jump to the next line.\ndefault is 64","type":{"name":"number"},"defaultValue":{"func":false,"value":"64"}},{"name":"chipMaxWidth","description":"Determines the maximum width of a single chip. If the text within this chip exceeds the value\nit will be truncated with ellipses.\nPossible units rem|px|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"inputClass","description":"Additional class name for the input element.\nCan accept String, Object, and Array, i.e. has the\nsame API as Vue's built-in handling of the class attribute.","type":{"name":"string|object|array"},"defaultValue":{"func":false,"value":"''"}},{"name":"inputWrapperClass","description":"Additional class name for the input wrapper element.\nCan accept all of String, Object, and Array, i.e. has the\nsame api as Vue's built-in handling of the class attribute.","type":{"name":"string|object|array"},"defaultValue":{"func":false,"value":"''"}},{"name":"disabled","description":"When true, disables the underlying input.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"dialogClass","description":"Additional class for the popover dialog element.","type":{"name":"string|object|array"},"defaultValue":{"func":false,"value":"''"}}],"events":[{"name":"input","description":"Native input event","type":{"names":["String "]}},{"name":"select","description":"Event fired when item selected","type":{"names":["Number"]}},{"name":"remove","description":"Event fired when item removed","type":{"names":["String"]}},{"name":"max-selected","description":"Event fired when max selected items limit is reached","type":{"names":["Object"]}},{"name":"keydown","description":"Native keydown event fired when a key is pressed in the text input.\nFor the common Escape and Enter cases, listen to `escape` / `enter` instead.","type":{"names":["KeyboardEvent"]}},{"name":"chip-keydown","description":"Native keydown event fired when a key is pressed while a chip is focused.","type":{"names":["KeyboardEvent"]}},{"name":"escape","description":"Fired when Escape is pressed in the text input.\nNot fired when a chip is focused.","type":{"names":["KeyboardEvent"]}},{"name":"enter","description":"Fired when Enter is pressed in the text input.\nNot fired when a chip is focused.","type":{"names":["KeyboardEvent"]}},{"name":"combobox-highlight","description":"Event fired when combobox item is highlighted","type":{"names":["Object"]}}],"slots":[{"name":"header"},{"name":"list"},{"name":"footer"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue"]},{"displayName":"DtComboboxWithPopover","exportName":"default","description":"","tags":{},"props":[{"name":"label","description":"String to use for the input label.","type":{"name":"string"},"required":true},{"name":"labelVisible","description":"Determines visibility of input label.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"size","description":"Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`","tags":{},"values":["null","xs","sm","md","lg","xl"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"description","description":"Description for the input","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"showList","description":"Determines when to show the list element and also controls the aria-expanded attribute.\nLeaving this null will have the combobox trigger on input focus by default.\nIf you set this value, the default trigger behavior will be disabled and you can\ncontrol it as you need.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"null"}},{"name":"listId","description":"Sets an ID on the list element of the component. Used by several aria attributes\nas well as when deriving the IDs for each item.","type":{"name":"string"},"defaultValue":{"func":true,"value":"function() { return getUniqueString(); }"}},{"name":"listClass","description":"Additional class for the wrapper list element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"dialogClass","description":"Additional class for the popover dialog element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"onBeginningOfList","description":"A method that will be called when the selection goes past the beginning of the list.","type":{"name":"func"},"defaultValue":{"func":false,"value":"null"}},{"name":"onEndOfList","description":"A method that will be called when the selection goes past the end of the list.","type":{"name":"func"},"defaultValue":{"func":false,"value":"null"}},{"name":"maxHeight","description":"Determines maximum height for the popover before overflow.\nPossible units rem|px|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"maxWidth","description":"Determines maximum width for the popover before overflow.\nPossible units rem|px|%|em","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"padding","description":"Vertical padding size around the list element.","type":{"name":"string"},"defaultValue":{"func":false,"value":"'small'"}},{"name":"contentWidth","description":"Width configuration for the popover content. When its value is 'anchor',\nthe popover content will have the same width as the anchor.","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"},"values