// ---------------------------  c-plascon-web_lib-search-search_business    ---------------------------

var newStyle = '';
var tag = 'c-plascon-web_lib-search-search_business';
var comp = {};


//COMP: c-plascon-web_lib-search-search_business
var comp = 
{
	created()
	{
		this.searchFocused = false;
	},
	mounted()
	{
		this.searchBox = this.$refs.searchBox;
		if(this.searchBox[0]) this.searchBox = this.searchBox[0];

	},
	data()
	{
		return{
			search: PLASCON_INDEX.search,
		}
	},
	methods:
	{
		searchMouseDown(event)
		{
			if(this.searchFocused)
			{
				window.setTimeout
				(
					()=>
					{
						this.searchBox.blur();
						this.searchFocused = true;
						this.$forceUpdate();
					},
					500
				) 
			}
		},
		searchFocus(event)
		{
			this.searchFocused = true;
			this.$forceUpdate();
		},
		searchBlur(event)
		{
			window.setTimeout
			(
				()=>
				{
					this.searchFocused = false;
					this.$forceUpdate();
				},
				500
			) 
		},
		onClick(item)
		{
			if(typeof(item.click)=="string")
			{
				eval(item.click)
			}
			else if(typeof(item.click)=="function")
			{
				item.click();
			}
		}
	}
};
		comp.template = `<div class="c-plascon-web_lib-search-search_business____main">
	<input class="c-plascon-web_lib-search-search_business____search pls_textbox_white" type="text" placeholder="Search for colours, products, articles and more here" @mousedown="searchMouseDown" @focus="searchFocus" @blur="searchBlur" :ref="'searchBox'" v-model="search.searchPhrase"  ontouchstart="event.cancelBubble=true">
	<div class="c-plascon-web_lib-search-search_business____search_results" v-if="searchFocused">
		<div v-for="s in search.searchResult" class="c-plascon-web_lib-search-search_business____search_result_item" @click="onClick(s)" ontouchstart="event.cancelBubble=true">
			<div class="c-plascon-web_lib-search-search_business____search_result_image" :style="{ backgroundImage: (s.image ? 'url(\\''+s.image+'\\')' : 'none'), backgroundColor: (s.bgcolor? s.bgcolor : 'transparent') }"></div>
			<div class="c-plascon-web_lib-search-search_business____search_result_label" v-text="s.label"></div>
		</div>
	</div>
</div>	`;
		var newStyle = `.c-plascon-web_lib-search-search_business____main {
  width: 96rem;
}

@media only screen and (orientation: portrait) {
  .c-plascon-web_lib-search-search_business____main {
    width: 92rem;
  }
}

.c-plascon-web_lib-search-search_business____search {
  width: 100%;
  margin-top: 0.5rem;
}

.c-plascon-web_lib-search-search_business____search_results {
  position: absolute;
  left: 34.5rem;
  top: 8rem;
  background-color: rgba(51, 61, 70, 0.95);
  width: 96rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-shadow: 0.2rem 0.4rem 0.6rem 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0.2rem 0.4rem 0.6rem 0px rgba(0, 0, 0, 0.3);
}

@media only screen and (orientation: portrait) {
  .c-plascon-web_lib-search-search_business____search_results {
    width: 92rem;
    left: 3.8rem;
    top: 27rem;
  }
}

.c-plascon-web_lib-search-search_business____search_result_item {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.c-plascon-web_lib-search-search_business____search_result_image {
  width: 4rem;
  height: 4rem;
  background-size: contain;
}

@media only screen and (orientation: portrait) {
  .c-plascon-web_lib-search-search_business____search_result_image {
    width: 8rem;
    height: 8rem;
  }
}

.c-plascon-web_lib-search-search_business____search_result_label {
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1.5rem;
}

@media only screen and (orientation: portrait) {
  .c-plascon-web_lib-search-search_business____search_result_label {
    font-size: 4rem;
    padding: 2rem;
  }
}

.c-plascon-web_lib-search-search_business____search_textbox {
  border-radius: 0;
  width: 4rem;
  padding: 0.5rem;
  border: 0;
  text-align: left;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0);
  background-repeat: no-repeat;
  background-size: auto 70%, auto 50%, auto 50%;
  background-position: calc(100% - 0.5rem) center, left bottom, right top;
  background-image: url("web_lib.php?file=img/icon/search.png"), none, none;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  cursor: pointer;
}

@media only screen and (orientation: portrait) {
  .c-plascon-web_lib-search-search_business____search_textbox {
    font-size: 4rem;
    padding: 1.5rem;
    width: 12rem;
  }
}
`;
		
			if(!comp.methods) comp.methods = {};
			if(comp.data && typeof(comp.data)=='function')
				comp.methods.__data = comp.data; // create a backup of the original data function
			
			if(comp.created && typeof(comp.created)=='function')
				comp.methods.__created = comp.created; // create a backup of the original data function
			
			comp.data = function()
			{
				var d = this.__data ? this.__data() : {};

				d.static = {
	"data": {},
	"meta": {}
};
				

				return d;
			};

			comp.created = function()
			{
				if(this.__created) this.__created();

				this.__staticWatch(this,'static');
				this.__staticWatch(this,'map');
			}
		

if(window.VueReload) VueReload.createRecord(tag,comp);
Vue.component(tag,comp);

SLITE.vueComps[tag] = comp;

if (newStyle) SLITE.injectStyle(tag, newStyle);