How to use @ovh-ux/ui-kit - 10 common examples

$onInit() {
    // Support presence of attribute 'disabled'
    addBooleanParameter(this, 'disabled');
    addBooleanParameter(this, 'resetOnSubmit');
  }

$onInit() {
    this.isDropdownOpen = false;
    this.hasFocus = false;
    this.currentFocusedElement = null;

    addBooleanParameter(this, 'arrow');
    addBooleanParameter(this, 'persistent');
    addDefaultParameter(this, 'placement', 'bottom-start');

    // Use internal id to map trigger and content with aria-label and aria-labelledby.
    this.id = `ouiDropdown${this.$scope.$id}`;

    this.documentClickHandler = (evt) => {
      if ((evt && evt.type === 'click')
        && (!evt.target || !evt.target.getAttribute || evt.target.getAttribute('type') !== 'submit')
        && (
          this.triggerElement.contains(evt.target)
          || (this.persistent && this.popperElement.contains(evt.target))
        )
      ) {
        return;
      }
      this.$scope.$apply(() => this.closeDropdown());

$onInit() {
    addDefaultParameter(this, 'id', `ouiTimepicker${this.$id}`);
    addDefaultParameter(this, 'name', `ouiTimepicker${this.$id}`);
    addDefaultParameter(this, 'format', this.options.dateFormat);
    addDefaultParameter(this, 'altFormat', this.format || this.options.dateFormat);

    addBooleanParameter(this, 'appendToBody');
    addBooleanParameter(this, 'disabled');
    addBooleanParameter(this, 'enableSeconds');
    addBooleanParameter(this, 'enableAmPm');
    addBooleanParameter(this, 'inline');
    addBooleanParameter(this, 'required');
    addBooleanParameter(this, 'static');

    this.setOptionsProperty('enableSeconds', this.enableSeconds);
    this.setOptionsProperty('time_24hr', !this.enableAmPm);

    // flatpickr's timepicker need a default value to work in inline mode
    if (this.inline) {
      this.setOptionsProperty('defaultDate', this.model || 'today');
    }
  }

$onInit() {
    addDefaultParameter(this, 'id', `ouiTimepicker${this.$id}`);
    addDefaultParameter(this, 'name', `ouiTimepicker${this.$id}`);
    addDefaultParameter(this, 'format', this.options.dateFormat);
    addDefaultParameter(this, 'altFormat', this.format || this.options.dateFormat);

    addBooleanParameter(this, 'appendToBody');
    addBooleanParameter(this, 'disabled');
    addBooleanParameter(this, 'enableSeconds');
    addBooleanParameter(this, 'enableAmPm');
    addBooleanParameter(this, 'inline');
    addBooleanParameter(this, 'required');
    addBooleanParameter(this, 'static');

    this.setOptionsProperty('enableSeconds', this.enableSeconds);
    this.setOptionsProperty('time_24hr', !this.enableAmPm);

    // flatpickr's timepicker need a default value to work in inline mode
    if (this.inline) {
      this.setOptionsProperty('defaultDate', this.model || 'today');
    }

$onInit() {
    addDefaultParameter(this, 'id', `ouiCriteriaAdder${this.$scope.$id}`);
    addDefaultParameter(this, 'name', `ouiCriteriaAdder${this.$scope.$id}`);
    addDefaultParameter(this, 'placement', 'center');

    this.$timeout(() => {
      const { 0: element } = this.$element;
      this.dropdownContent = element;
    });

    // Auto select first column
    if (this.properties) {
      const [properties] = this.properties;
      this.columnModel = properties;
    }

    this.selectableOperators = this.filterSelectableOperators();
    const [selectableOperators] = this.selectableOperators;

angular.forEach(columnElements, (columnElement) => {
      const column = {};

      if (hasAttribute(columnElement, 'name')) {
        column.name = getAttribute(columnElement, 'name');
      }

      if (hasAttribute(columnElement, 'property')) {
        const propertyValue = getAttribute(columnElement, 'property');

        column.name = column.name || propertyValue;
        column.getValue = this.$parse(propertyValue);

        // A column can be sorted only if it has a "property" attribute.
        if (hasAttribute(columnElement, 'sortable')) {
          const sortableValue = getAttribute(columnElement, 'sortable');
          column.sortable = !!sortableValue;

          const sorting = DatagridColumnBuilder.defineDefaultSorting(column, sortableValue);
          Object.assign(currentSorting, sorting);

const propertyValue = getAttribute(columnElement, 'property');

        column.name = column.name || propertyValue;
        column.getValue = this.$parse(propertyValue);

        // A column can be sorted only if it has a "property" attribute.
        if (hasAttribute(columnElement, 'sortable')) {
          const sortableValue = getAttribute(columnElement, 'sortable');
          column.sortable = !!sortableValue;

          const sorting = DatagridColumnBuilder.defineDefaultSorting(column, sortableValue);
          Object.assign(currentSorting, sorting);
        }
      }

      if (!hasAttribute(columnElement, 'type')) {
        column.type = 'string';
      }

      copyValueProperties.forEach((propertyName) => {
        if (hasAttribute(columnElement, propertyName)) {
          column[propertyName] = getAttribute(columnElement, propertyName);
        }
      });

      column.filterable = DatagridColumnBuilder.isFilterable(column)
                && hasAttribute(columnElement, 'filterable');
      column.searchable = DatagridColumnBuilder.isSearchable(column)
                && hasAttribute(columnElement, 'searchable');

      if (column['type-options']) {
        column.typeOptions = this.$parse(column['type-options'])($scope);

angular.forEach(columnElements, (columnElement) => {
      const column = {};

      if (hasAttribute(columnElement, 'name')) {
        column.name = getAttribute(columnElement, 'name');
      }

      if (hasAttribute(columnElement, 'property')) {
        const propertyValue = getAttribute(columnElement, 'property');

        column.name = column.name || propertyValue;
        column.getValue = this.$parse(propertyValue);

        // A column can be sorted only if it has a "property" attribute.
        if (hasAttribute(columnElement, 'sortable')) {
          const sortableValue = getAttribute(columnElement, 'sortable');
          column.sortable = !!sortableValue;

          const sorting = DatagridColumnBuilder.defineDefaultSorting(column, sortableValue);
          Object.assign(currentSorting, sorting);
        }
      }

      if (!hasAttribute(columnElement, 'type')) {
        column.type = 'string';
      }

      copyValueProperties.forEach((propertyName) => {
        if (hasAttribute(columnElement, propertyName)) {
          column[propertyName] = getAttribute(columnElement, propertyName);
        }

angular.forEach(columnElements, (columnElement) => {
      const column = {};

      if (hasAttribute(columnElement, 'name')) {
        column.name = getAttribute(columnElement, 'name');
      }

      if (hasAttribute(columnElement, 'property')) {
        const propertyValue = getAttribute(columnElement, 'property');

        column.name = column.name || propertyValue;
        column.getValue = this.$parse(propertyValue);

        // A column can be sorted only if it has a "property" attribute.
        if (hasAttribute(columnElement, 'sortable')) {
          const sortableValue = getAttribute(columnElement, 'sortable');
          column.sortable = !!sortableValue;

          const sorting = DatagridColumnBuilder.defineDefaultSorting(column, sortableValue);
          Object.assign(currentSorting, sorting);
        }
      }

      if (!hasAttribute(columnElement, 'type')) {

angular.forEach(columnElements, (columnElement) => {
      const column = {};

      if (hasAttribute(columnElement, 'name')) {
        column.name = getAttribute(columnElement, 'name');
      }

      if (hasAttribute(columnElement, 'property')) {
        const propertyValue = getAttribute(columnElement, 'property');

        column.name = column.name || propertyValue;
        column.getValue = this.$parse(propertyValue);

        // A column can be sorted only if it has a "property" attribute.
        if (hasAttribute(columnElement, 'sortable')) {
          const sortableValue = getAttribute(columnElement, 'sortable');
          column.sortable = !!sortableValue;

          const sorting = DatagridColumnBuilder.defineDefaultSorting(column, sortableValue);
          Object.assign(currentSorting, sorting);
        }