@vonage/vivid-react/v3/VwcTabs/index.js

Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings

/*
* DO NOT EDIT THIS FILE. IT IS GENERATED
*/
/*
Code in this file were generated using following JSON:
{
 "kind": "class",
 "description": "",
 "name": "Tabs",
 "cssProperties": [
  {
   "name": "--vvd-tabs-cta-firm",
   "default": "var(--vvd-color-cta-600)"
  },
  {
   "name": "--vvd-tabs-accent-firm",
   "default": "var(--vvd-color-canvas-text)"
  }
 ],
 "slots": [
  {
   "description": "Default slot.",
   "name": ""
  }
 ],
 "members": [
  {
   "kind": "field",
   "name": "orientation",
   "type": {
    "text": "TabsOrientation"
   },
   "description": "The orientation",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "_pairedTabs",
   "privacy": "private",
   "description": "Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.",
   "readonly": true
  },
  {
   "kind": "field",
   "name": "_validTabs",
   "privacy": "private",
   "description": "Tabs that are eligible to become active.",
   "readonly": true
  },
  {
   "kind": "field",
   "name": "activeid",
   "type": {
    "text": "string"
   },
   "description": "The id of the active tab",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "activetab",
   "type": {
    "text": "HTMLElement"
   },
   "description": "A reference to the active tab",
   "privacy": "public",
   "readonly": true
  },
  {
   "kind": "method",
   "name": "#setActiveTabDueToUserInteraction",
   "parameters": [
    {
     "name": "tab",
     "type": {
      "text": "HTMLElement"
     }
    }
   ]
  },
  {
   "kind": "field",
   "name": "#isTabsChangeQueued",
   "privacy": "private",
   "type": {
    "text": "boolean"
   },
   "default": "false"
  },
  {
   "kind": "method",
   "name": "_registerTabsChange",
   "privacy": "private",
   "description": "Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and\nactive id are updated at the same time."
  },
  {
   "kind": "field",
   "name": "#lastActiveId",
   "privacy": "private",
   "type": {
    "text": "string | undefined"
   },
   "default": "undefined"
  },
  {
   "kind": "method",
   "name": "#handleTabsChange"
  },
  {
   "kind": "method",
   "name": "#updateSlottedChildren",
   "description": "Updates the tabs and their panels according to the current state of the component."
  },
  {
   "kind": "field",
   "name": "#onTabClick",
   "privacy": "private"
  },
  {
   "kind": "field",
   "name": "#onTabKeyDown",
   "privacy": "private"
  },
  {
   "kind": "method",
   "name": "adjust",
   "return": {
    "type": {
     "text": "void"
    }
   },
   "parameters": [
    {
     "name": "adjustment",
     "type": {
      "text": "number"
     }
    }
   ],
   "description": "Adjusts the active index by numerical increments.\nOnly enabled tabs are considered.",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "#isTransitioningTransform",
   "privacy": "private",
   "type": {
    "text": "boolean"
   },
   "default": "false"
  },
  {
   "kind": "method",
   "name": "#cancelAnimationIfNeeded"
  },
  {
   "kind": "method",
   "name": "#moveActiveIndicator",
   "parameters": [
    {
     "name": "shouldAnimate",
     "type": {
      "text": "boolean"
     }
    }
   ]
  },
  {
   "kind": "field",
   "name": "tablist",
   "type": {
    "text": "HTMLElement | undefined"
   }
  },
  {
   "kind": "field",
   "name": "connotation",
   "type": {
    "text": "TabsConnotation | undefined"
   },
   "description": "The connotation the tabs should have.",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "gutters",
   "type": {
    "text": "TabsGutters | undefined"
   },
   "description": "sets the initial preferred margin from predefined available options",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "scrollablePanel",
   "type": {
    "text": "boolean"
   },
   "default": "false",
   "description": "sets overflow to the tab-panel",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "tabsLayout",
   "type": {
    "text": "'align-start' | 'stretch' | undefined"
   },
   "description": "Controls the layout of the tabs.",
   "privacy": "public"
  },
  {
   "kind": "method",
   "name": "#updateScrollStatus"
  },
  {
   "kind": "field",
   "name": "#resizeObserver",
   "privacy": "private",
   "type": {
    "text": "ResizeObserver | undefined"
   }
  },
  {
   "kind": "field",
   "name": "#tabListWrapper",
   "privacy": "private",
   "type": {
    "text": "HTMLElement"
   },
   "readonly": true
  },
  {
   "kind": "field",
   "name": "#tabListScrollWrapper",
   "privacy": "private",
   "type": {
    "text": "HTMLElement"
   },
   "readonly": true
  },
  {
   "kind": "method",
   "name": "#scrollToTab",
   "parameters": [
    {
     "name": "tab",
     "type": {
      "text": "HTMLElement"
     }
    },
    {
     "name": "shouldAnimate",
     "default": "true"
    }
   ]
  },
  {
   "kind": "field",
   "name": "activeindicator",
   "type": {
    "text": "boolean"
   },
   "default": "true",
   "description": "Deprecated attribute. It has no effect.",
   "privacy": "public"
  },
  {
   "kind": "field",
   "name": "VIVID_VERSION",
   "static": true,
   "default": "__PACKAGE_VERSION__",
   "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
   "type": {
    "text": "string"
   },
   "inheritedFrom": {
    "name": "VividElement",
    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
   }
  },
  {
   "kind": "field",
   "name": "componentName",
   "type": {
    "text": "string"
   },
   "static": true,
   "description": "Core component name, without prefix",
   "inheritedFrom": {
    "name": "VividElement",
    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
   }
  }
 ],
 "events": [
  {
   "type": {
    "text": "CustomEvent<HTMLElement>"
   },
   "description": "Fires a custom 'change' event when a tab is clicked or during keyboard navigation",
   "name": "change"
  }
 ],
 "attributes": [
  {
   "name": "orientation",
   "type": {
    "text": "TabsOrientation"
   },
   "description": "The orientation",
   "fieldName": "orientation"
  },
  {
   "name": "activeid",
   "type": {
    "text": "string"
   },
   "description": "The id of the active tab",
   "fieldName": "activeid"
  },
  {
   "name": "connotation",
   "type": {
    "text": "TabsConnotation | undefined"
   },
   "description": "The connotation the tabs should have.",
   "fieldName": "connotation"
  },
  {
   "name": "gutters",
   "type": {
    "text": "TabsGutters | undefined"
   },
   "description": "sets the initial preferred margin from predefined available options",
   "fieldName": "gutters"
  },
  {
   "name": "scrollable-panel",
   "type": {
    "text": "boolean"
   },
   "default": "false",
   "description": "sets overflow to the tab-panel",
   "fieldName": "scrollablePanel"
  },
  {
   "name": "tabs-layout",
   "type": {
    "text": "'align-start' | 'stretch' | undefined"
   },
   "description": "Controls the layout of the tabs.",
   "fieldName": "tabsLayout"
  },
  {
   "name": "activeindicator",
   "type": {
    "text": "boolean"
   },
   "default": "true",
   "description": "Deprecated attribute. It has no effect.",
   "fieldName": "activeindicator"
  }
 ],
 "superclass": {
  "name": "VividElement",
  "module": "/src/shared/foundation/vivid-element/vivid-element"
 },
 "vividComponent": {
  "public": true,
  "name": "tabs"
 }
}
*/
import wrapper from '@vonage/vivid-react-wrapper'
import { registerTabs } from '@vonage/vivid'

registerTabs('vvd3')

const VwcTabs = wrapper(`vvd3-tabs`,  {
    events: [{"name":"change","propName":"onChange"}],
    attributes: [],
    properties: ['orientation', 'activeid', 'tablist', 'connotation', 'gutters', 'scrollablePanel', 'tabsLayout', 'activeindicator', 'VIVID_VERSION', 'componentName']
})

VwcTabs.displayName = 'VwcTabs'

export default VwcTabs