define(function () {

  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //

  var component = {
    data() {
      return {};
    }
  };

  component.originalTemplate = "Compact";
  component.template = `
<wizdomWebpart data-v-61ed2bbc
  v-if="birthdays"
  :environmentInfo="environmentInfo"
  :chromeProperties="webpartProperties.chromeProperties"
  :title="'Birthdays' | translate"
  @titleChanged="webpartProperties.title = $event"
  :dynamicData="birthdays.length" :webpartPadding="true" chromeType="visual"
>
  <div data-v-61ed2bbc class="container">
    <div data-v-61ed2bbc v-if="birthdays.length >0">
      <div data-v-61ed2bbc class="wizdomBirthdaySlider">
        <transition data-v-61ed2bbc :name="transName" v-for="(item, index) in birthdays" :key="index">
          <div data-v-61ed2bbc
            class="birthdayPerson"
            @swipeleft="nextSlide()"
            @swiperight="prevSlide()"
            v-show="isCurrentSlideIndex(index)"
          >
            <div data-v-61ed2bbc class="wizdom-employees">
              <div data-v-61ed2bbc class="wizdom-employees-row">
                <div data-v-61ed2bbc class="wizdom-employees-imgColumn">
                  <presencePicture data-v-61ed2bbc
                    size="AVATAR"
                    :accountname="item.accountName"
                    :siteurl="siteUrl"
                  />
                </div>

                <div data-v-61ed2bbc class="wizdom-employees-textColumn">
                  <h4 data-v-61ed2bbc class="name">
                    <a data-v-61ed2bbc :href="item.publicUrl">{{item.name}}</a>
                  </h4>
                  <section data-v-61ed2bbc>
                    <div data-v-61ed2bbc class="department" v-show="(item.date.length)">
                      <span data-v-61ed2bbc><b data-v-61ed2bbc>{{'Birthday' | translate}}:</b></span>
                      <span data-v-61ed2bbc>{{item.date | moment("MMMM DD")}}</span>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </transition>
        <div data-v-61ed2bbc class="birthday-controls">
          <ul data-v-61ed2bbc>
            <li data-v-61ed2bbc
              class="icon-dot-dark-dims"
              v-for="(item, index) in birthdays"
              :key="index"
              v-bind:class="{'icon-dot-dark': isCurrentSlideIndex(index), 'icon-dot-dark-transparent':!isCurrentSlideIndex(index)}"
              v-on:click="setCurrentSlideIndex(index)"
            ></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</wizdomWebpart>
`;
  component.styles = `
.container[data-v-61ed2bbc] {
  padding-bottom: 20px;
}
.container .icon-dot-dark[data-v-61ed2bbc] {
    background-color: "[theme:neutralPrimary, default: #333333]";
}
.container .icon-dot-dark-transparent[data-v-61ed2bbc] {
    background-color: "[theme:neutralQuaternary, default: #d0d0d0]";
}
.container .icon-birthday-flag-dims[data-v-61ed2bbc] {
    width: 78px;
    height: 83px;
}
.container .icon-dot-dark-dims[data-v-61ed2bbc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.container .birthday-heading[data-v-61ed2bbc] {
    text-align: center;
    color: "[theme:neutralPrimary, default: #333333]";
}
.container .birthday-heading span[data-v-61ed2bbc] {
      font-size: 17px;
      font-weight: 400;
}
.container .birthday-heading .ms-Icon--BirthdayCake[data-v-61ed2bbc] {
      font-size: 42px;
      color: "[theme:neutralPrimary, default: #333333]";
}
.container .wizdomBirthdaySlider[data-v-61ed2bbc] {
    position: relative;
    height: 100px;
    overflow: hidden;
}
.container .wizdomBirthdaySlider .birthdayPerson[data-v-61ed2bbc] {
      text-align: center;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
}
.container .wizdomBirthdaySlider .birthdayPerson a[data-v-61ed2bbc] {
        text-decoration: none;
        color: "[theme:neutralPrimary, default: #333333]";
}
.container .wizdomBirthdaySlider .birthdayPerson a span[data-v-61ed2bbc] {
          display: block;
}
.container .birthday-controls ul[data-v-61ed2bbc] {
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0 0 0 0;
    margin-bottom: 6px;
}
.container .birthday-controls ul li[data-v-61ed2bbc] {
      margin: 2px;
      display: inline-block;
      cursor: pointer;
}
.slideLeft-enter[data-v-61ed2bbc] {
  transform: translateX(100%);
}
.slideLeft-enter-to[data-v-61ed2bbc] {
  transform: translateX(0);
}
.slideLeft-enter-active[data-v-61ed2bbc] {
  position: absolute;
}
.slideLeft-leave[data-v-61ed2bbc] {
  transform: translateX(0);
}
.slideLeft-leave-to[data-v-61ed2bbc] {
  transform: translateX(-100%);
}
.slideLeft-enter-active[data-v-61ed2bbc],
.slideLeft-leave-active[data-v-61ed2bbc] {
  transition: all 500ms ease-in-out;
}
.slideRight-enter[data-v-61ed2bbc] {
  transform: translateX(-100%);
}
.slideRight-enter-to[data-v-61ed2bbc] {
  transform: translateX(0);
}
.slideRight-enter-active[data-v-61ed2bbc] {
  position: absolute;
}
.slideRight-leave[data-v-61ed2bbc] {
  transform: translateX(0);
}
.slideRight-leave-to[data-v-61ed2bbc] {
  transform: translateX(200%);
}
.slideRight-enter-active[data-v-61ed2bbc],
.slideRight-leave-active[data-v-61ed2bbc] {
  transition: all 500ms ease-in-out;
}
.wizdom-employees[data-v-61ed2bbc] {
  text-align: left;
}
.wizdom-employees .wizdom-employees-row[data-v-61ed2bbc] {
    display: flex;
    align-items: center;
    width: 100%;
}
.wizdom-employees .wizdom-employees-row .wizdom-employees-imgColumn[data-v-61ed2bbc] {
      width: 48px;
}
.wizdom-employees .wizdom-employees-row .wizdom-employees-textColumn[data-v-61ed2bbc] {
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      padding-left: 10px;
}
.wizdom-employees .wizdom-employees-row .wizdom-employees-textColumn h4[data-v-61ed2bbc] {
        margin: 0;
        font-weight: 500;
}
.wizdom-employees .wizdom-employees-row .wizdom-employees-textColumn .department[data-v-61ed2bbc] {
        color: "[theme:neutralPrimary, default: #333333]";
}
.name[data-v-61ed2bbc] {
  font-size: 16px;
  line-height: 20px;
}
b[data-v-61ed2bbc] {
  font-weight: bold;
}


`;

  return component;

});
