@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 225 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-vue2/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":"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-vue2/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-vue2/common/mixins/modal.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/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-vue2/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\n class=\"d-link\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n target=\"_blank\"\n>\n (Reference)\n</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\">\n CSS width attribute\n</a>\nvalues","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"}}],"events":[{"name":"click","description":"Native button click event","type":{"names":["PointerEvent | KeyboardEvent"]}},{"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-vue2/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-vue2/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-vue2/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":"v-model","mixin":{"name":"Input Mixin","path":"../../common/mixins/input.js"},"description":"Used to set the state of the checkable input","tags":{"model":[{"description":"checked","title":"model"}]},"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"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":"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":"value","mixin":{"name":"Checkable Mixin","path":"../../common/mixins/input.js"},"description":"The value of the input","type":{"name":"string|number|boolean"},"defaultValue":{"func":false,"value":"null"}},{"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":"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-vue2/common/mixins/input.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/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":"Not supported by this component, please use selectedValues","type":{"name":""},"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":"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"},"type":{"names":["Array"]},"description":"Native input event"}],"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-vue2/common/mixins/input_group.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/checkbox_group/checkbox_group.vue","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/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":"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"]}}],"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-vue2/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-vue2/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-vue2/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-vue2/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-vue2/common/mixins/dom.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/common/mixins/keyboard_list_navigation.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/combobox/combobox.vue"]},{"displayName":"DtDatepicker","exportName":"default","description":"","tags":{},"props":[{"name":"selectedDate","description":"Selected date","tags":{"type":[{"title":"type","type":{"name":"Date"}}]},"type":{"name":"Date"},"defaultValue":{"func":true,"value":"() => (new Date())"}}],"events":[{"name":"close-datepicker","description":"Event fired when user presses the esc key"},{"name":"selected-date","description":"Event fired when a date is selected","type":{"names":["Date"]}}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/datepicker/datepicker.vue"]},{"displayName":"DtDescriptionList","exportName":"default","description":"","tags":{},"props":[{"name":"direction","description":"The direction for the list","tags":{},"values":["row","column"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'row'"}},{"name":"items","description":"A list of items that represent the term and the description","type":{"name":"array"},"required":true,"defaultValue":{"func":false,"value":"[]"}},{"name":"gap","description":"Set the space between the elements","tags":{},"values":["0","100","200","300","400","500","600"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'400'"}},{"name":"termClass","description":"Used to customize the term element","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"name":"descriptionClass","description":"Used to customize the description element","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/description_list/description_list.vue"]},{"exportName":"default","displayName":"DtDropdown","description":"Usage: `mixins: [keyboardNavigationMixin(options)]`\n\nThis mixin provides some common data and methods to navigate a list of items\n(such as a dropdown or select menu) by keyboard.\n\nTo be effective, you must bind the onUpKey and onDownKey events, usually to\nthe root element of the component.","tags":{"params":[{"title":"param","type":{"name":"mixed"},"name":"listItemRole"},{"title":"param","type":{"name":"mixed"},"name":"indexKey"},{"title":"param","type":{"name":"mixed"},"name":"idKey"},{"title":"param","type":{"name":"mixed"},"name":"listElementKey"},{"title":"param","type":{"name":"mixed"},"name":"activeItemKey"},{"title":"param","type":{"name":"mixed"},"name":"openMethod"},{"title":"param","type":{"name":"mixed"},"name":"afterHighlightMethod"},{"title":"param","type":{"name":"mixed"},"name":"beginningOfListMethod"},{"title":"param","type":{"name":"mixed"},"name":"endOfListMethod"},{"title":"param","type":{"name":"mixed"},"name":"scrollToOnHighlight"},{"title":"param","type":{"name":"mixed"},"name":"focusOnKeyboardNavigation"}]},"props":[{"name":"open","description":"Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\nIf you set this value, the default trigger behavior will be disabled and you can control it as you need.\nSupports .sync modifier","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"null"}},{"name":"openOnContext","description":"Opens the dropdown on right click (context menu). If you set this value to `true`,\nthe default trigger behavior will be disabled.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"padding","description":"Vertical padding size around the list element.","tags":{},"values":["none","small","large"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'small'"}},{"name":"modal","description":"Determines modal state, dropdown has a modal overlay preventing interaction with elements\nbelow it, but it is invisible.","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"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.","tags":{},"values":["null","anchor"],"type":{"name":"string"},"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":"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":"navigationType","description":"The type of navigation that this component should support.\n- \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n- \"tab\" for items that are navigated using the TAB key.\n- \"none\" for static items that are not interactive.","tags":{},"values":["arrow-keys","tab","none"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS"}},{"name":"fallbackPlacements","description":"If the dropdown does not fit in the direction described by \"placement\",\nit will attempt to change it's direction to the \"fallbackPlacements\".","tags":{},"values":["top","top-start","top-end","right","right-start","right-end","left","left-start","left-end","bottom","bottom-start","bottom-end","auto","auto-start","auto-end"],"type":{"name":"array"},"defaultValue":{"func":false,"value":"['auto']"}},{"name":"placement","description":"The direction the dropdown displays relative to the anchor.","type":{"name":"string"},"defaultValue":{"func":false,"value":"'bottom'"}},{"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":"listClass","description":"Additional class for the wrapper list element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}},{"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":"tether","description":"If set to false the dialog will display over top of the anchor when there is insufficient space.\nIf set to true it will never move from its position relative to the anchor and will clip instead.\n<a\n class=\"d-link\"\n href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n target=\"_blank\"\n>\n Popper.js docs\n</a>","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"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'"}}],"events":[{"name":"highlight","description":"Event fired when the highlight changes","type":{"names":["Number"]}},{"name":"opened","description":"Event fired when dropdown is shown or hidden","type":{"names":["Boolean | Array"]}},{"name":"update:open","description":"Event fired to sync the open prop with the parent component"},{"name":"keydown","type":{"names":["undefined"]}}],"slots":[{"name":"anchor","scoped":true,"description":"Anchor element that activates the dropdown","bindings":[{"name":"ref","title":"binding"}]},{"name":"list","scoped":true,"description":"Slot for the list component","bindings":[{"name":"close","title":"binding"}]},{"name":"footer","scoped":true,"description":"Slot for the footer content","bindings":[{"name":"close","title":"binding"}]}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/common/mixins/dom.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/common/mixins/keyboard_list_navigation.js","/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/dropdown/dropdown.vue"]},{"displayName":"DtDropdownList","exportName":"default","description":"","tags":{},"props":[{"name":"heading","description":"List's heading.","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"listClass","description":"Additional class for the wrapper list element.","type":{"name":"string|array|object"},"defaultValue":{"func":false,"value":"''"}}],"slots":[{"name":"default","description":"Slot for the list component"}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/dropdown/dropdown_list.vue"]},{"displayName":"DtDropdownSeparator","exportName":"default","description":"","tags":{},"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/dropdown/dropdown_separator.vue"]},{"displayName":"DtEmoji","description":"Renders an emoji from a shortcode such as :smile: or unicode character such as 😄","tags":{"see":[{"description":"https://dialtone.dialpad.com/components/emoji.html","title":"see"}]},"exportName":"default","props":[{"name":"code","description":"Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n<a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\nfor all supported shortcode/unicode or the docs for setting up custom emojis.","type":{"name":"string"},"required":true},{"name":"size","description":"The size of the emoji. Can be any of the icon size utility classes from\n<a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>","tags":{},"values":["100","200","300","400","500","600","700","800"],"type":{"name":"string"},"defaultValue":{"func":false,"value":"'500'"}},{"name":"imgClass","description":"Additional class name for the emoji img 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":"ariaLabel","description":"Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\nCompatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\nbe set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\ngetEmojiData() function","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"showSkeleton","description":"Shows a skeleton loader while the emoji asset is loading.","tags":{},"values":["true","false"],"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}}],"sourceFiles":["/home/runner/work/dialtone/dialtone/packages/dialtone-vue2/components/emoji/emoji.vue"]},{"displayName":"DtEmojiPicker","exportName":"default","description":"","tags":{},"props":[{"name":"recentlyUsedEmojis","description":"The array with recently used emoji object\nThis list is necessary to fill the recently used tab","tags":{"type":[{"title":"type","type":{"name":"Array"}}],"default":[{"description":"[]","title":"default"}],"example":[{"description":"<dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />","title":"example"}]},"type":{"name":"Array"},"defaultValue":{"fun