_createComponents() {
      const time = {
        hours: parseInt(this._hours),
        minutes: parseInt(this._minutes),
        seconds: parseInt(this._seconds)
      };
      this._entities = [];
      this._periods = [];
      this._componentMap = {
        hours: -1,
        minutes: -1,
        seconds: -1
      };
      if (this._hasHoursComponent) {
        // add Hours clock
        this._componentMap.hours = this._entities.length;
        this._entities.push({
          "label": this.hoursLabel,
          "entity": "hours",
          "itemMin": 1,
          "itemMax": 12,
          "value": time.hours,
          "stringValue": this._hours,
          "textValue": `${time.hours} ${this.hoursLabel}`,
          "displayStep": 1,
          "lastItemReplacement": this._hoursConfiguration.isTwelveHoursFormat ? -1 : 0,
          "showInnerCircle": !this._hoursConfiguration.isTwelveHoursFormat,
          "prependZero": this._zeroPaddedHours,
          "hasSeparator": this._entities.length > 0,
          "active": false,
          "attributes": {
            "min": this._hoursConfiguration.minHour,
            "max": this._hoursConfiguration.maxHour,
            "step": 1
          }
        });
      }
      if (this._hasMinutesComponent) {
        // add Minutes clock
        this._componentMap.minutes = this._entities.length;
        this._entities.push({
          "label": this.minutesLabel,
          "entity": "minutes",
          "itemMin": 1,
          "itemMax": 60,
          "value": time.minutes,
          "stringValue": this._minutes,
          "textValue": `${time.minutes} ${this.minutesLabel}`,
          "displayStep": 5,
          "lastItemReplacement": 0,
          "showInnerCircle": false,
          "prependZero": false,
          "hasSeparator": this._entities.length > 0,
          "active": false,
          "attributes": {
            "min": 0,
            "max": 59,
            "step": 1
          }
        });
      }
      if (this._hasSecondsComponent) {
        // add Seconds clock
        this._componentMap.seconds = this._entities.length;
        this._entities.push({
          "label": this.secondsLabel,
          "entity": "seconds",
          "itemMin": 1,
          "itemMax": 60,
          "value": time.seconds,
          "stringValue": this._seconds,
          "textValue": `${time.seconds} ${this.secondsLabel}`,
          "displayStep": 5,
          "lastItemReplacement": 0,
          "showInnerCircle": false,
          "prependZero": false,
          "hasSeparator": this._entities.length > 0,
          "active": false,
          "attributes": {
            "min": 0,
            "max": 59,
            "step": 1
          }
        });
      }
      this._entities[this._activeIndex].active = true;
      this._createPeriodComponent();
    }
Creates clock and button components according to the display format pattern.