How to use carbon-components - 10 common examples

init() {
		// Grab the tooltip element
		const holder = select(this.services.domUtils.getHolder());
		const chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
		this.tooltip = DOMUtils.appendOrSelect(holder, `div.${settings.prefix}--${chartprefix}--tooltip`);

		// Apply html content to the tooltip
		const tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, "div.content-box");

		// listen to show-tooltip Custom Events to render the tooltip
		this.services.events.addEventListener("show-tooltip", e => {
			// check the type of tooltip and that it is enabled
			if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), "tooltip", "datapoint", "enabled"))
				|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), "tooltip", "gridline", "enabled")) ) {

				let data = select(event.target).datum() as any;

				// if there is a provided tooltip HTML function
				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data));
				} else if (e.detail.multidata) {

mounted() {
    this.numberInput = NumberInput.create(this.$el);
    this.numberInput.element.addEventListener('change', (e) => {
      // this.$emit('input', e.target.value)
    });
  },
  methods: {

connectedCallback() {
    super.connectedCallback();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hChangePage = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePage,
      this._handleChangePage as EventListener
    );
    this._hChangePageSize = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePageSize,
      this._handleChangePageSize as EventListener
    );
  }

// Modifies event listener options with `capture` option to use for delegated `focus`/`blur` event
          let massagedOptions: boolean | AddEventListenerOptions = typeof options === 'undefined' ? false : options;
          if (delegatedType) {
            if (Object(options) === options) {
              massagedOptions = {
                ...Object(options),
                capture: !hasFocusin,
              };
            } else {
              massagedOptions = !hasFocusin;
            }
          }

          this._handles.add(
            on(target, (delegatedType || unprefixedType) as keyof HTMLElementEventMap, this[listenerName], massagedOptions)
          );
        });
      });

connectedCallback() {
    super.connectedCallback();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hAfterChangeRadioButton = on(
      this,
      (this.constructor as typeof BXRadioButtonGroup).eventAfterChangeRadioButton,
      this._handleAfterChangeRadioButton as EventListener
    );
  }

connectedCallback() {
    super.connectedCallback();
    this._instantiateDatePicker();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hAfterChange = on(
      this,
      (this.constructor as typeof BXDatePicker).eventAfterChange,
      this._handleChange as EventListener
    );
  }

connectedCallback() {
    super.connectedCallback();
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hChangePage = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePage,
      this._handleChangePage as EventListener
    );
    this._hChangePageSize = on(
      this,
      (this.constructor as typeof BXPagination).eventAfterChangePageSize,
      this._handleChangePageSize as EventListener
    );
  }

connectedCallback() {
    super.connectedCallback();
    if (!this._throttledHandleMousemoveImpl) {
      this._throttledHandleMousemoveImpl = throttle(this._handleMousemoveImpl, 10);
    }
    // Manually hooks the event listeners on the host element to make the event names configurable
    this._hChangeInput = on(
      this,
      (this.constructor as typeof BXSlider).eventAfterChangeInput,
      this._handleChangeInput as EventListener
    );
  }

const renderCb = () => {
				const title = select(`g.${settings.prefix}--${options.chart.style.prefix}--title`);

				// Remove event listener for when chart render is finished
				chartEventsService.removeEventListener("render-finished", renderCb);

				expect(title.select("text").html()).toEqual(sampleTitle);

				done();
			};

styleHolderElement() {
		const holderElement = this.getHolder() as HTMLElement;
		const { width, height } = this.model.getOptions();

		// Add class to chart holder
		select(this.getHolder()).classed(`${settings.prefix}--chart-holder`, true);

		// If width exists in options
		if (width) {
			// Apply formatted width attribute to chart
			holderElement.style.width = Tools.formatWidthHeightValues(width);
		}

		// If height exists in options
		if (height) {
			// Apply formatted height attribute to chart
			holderElement.style.height = Tools.formatWidthHeightValues(height);
		}
	}