americanpubliclife.axomo.com
Open in
urlscan Pro
34.149.131.181
Public Scan
URL:
https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler
Submission: On August 16 via api from US — Scanned from CA
Submission: On August 16 via api from US — Scanned from CA
Form analysis 4 forms found in the DOM
<form class="navbar-form ng-pristine ng-valid" data-hs-cf-bound="true">
<ax-store-search collapsed="vm.navbarCollapsed" in-search-bar="true" class="ng-isolate-scope">
<style>
hr {
margin: 10px 0;
}
.whiteText:hover {
color: white !important;
text-decoration: none;
}
.mySearchButton {
color: white !important;
margin-left: 5px;
}
.hidden {
font-size: 1000%;
color: transparent;
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
@media only screen and (max-width: 1300px) {
/*.searchBox {
display: none !important;
}*/
.buttonLeftRadius {
border-bottom-left-radius: 100em !important;
border-top-left-radius: 100em !important;
}
}
</style>
<div class="store-search">
<div>
<div ng-class="{'input-group' : vm.inSearchBar, 'max-250' : vm.inSearchBar}" role="none" class="input-group max-250">
<input id="txtSearch" ng-blur="vm.blurSearchBox()" class="form-control left-radius ng-pristine ng-untouched ng-valid searchBox" ng-class="{'right-radius' : !vm.inSearchBar, 'searchBox' : vm.inSearchBar}" autocomplete="off"
ng-keyup="vm.findItem(vm.query, $event)" ng-submit="" ng-model="vm.query" placeholder="Search Store">
<!-- ngIf: vm.inSearchBar --><span ng-if="vm.inSearchBar" class="input-group-btn ng-scope">
<button id="btnSearch" role="button" class="btn btn-default right-radius buttonLeftRadius" ng-class="{'buttonLeftRadius' : vm.inSearchBar}" tabindex="0" aria-labelledby="searchButtonText" ng-click="vm.executeSearch()">
<span role="button" aria-label="search store">
<search-icon aria-hidden="true" aria-label="search store" role="search" class="ng-isolate-scope" style="position: relative; top: 1.5px;"><svg aria-label="search store" alt="" style="max-width: 1em; min-width: 1em" width="1em"
height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"></path>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"></path>
</svg></search-icon>
</span>
<span id="searchButtonText" class="pr-1">Search</span>
</button>
</span><!-- end ngIf: vm.inSearchBar -->
</div>
<!-- ngIf: vm.detailedView -->
</div>
<!-- ngIf: vm.query && !vm.isLoading -->
<!-- ngIf: vm.detailedView -->
</div>
</ax-store-search>
</form>Name: formAddToCart —
<form name="formAddToCart" id="axoItemPage" ng-if="!vm.isLoading" class="ng-pristine ng-valid ng-scope ng-valid-required" data-hs-cf-bound="true">
<!-- ITEM TITLE BAR -->
<!-- /ITEM TITLE BAR -->
<!-- ITEM IMAGE-->
<notification-bar bar="vm.notificationBar" class="ng-isolate-scope">
<style>
.notificationBar {
color: white;
font-weight: bold;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000;
}
.success {
background: #69ef7d;
}
.info {
background: #7cbdff;
}
.system {
margin-top: 30px;
}
</style>
<!-- ngIf: vm.showNotificationBar() && !vm.close -->
</notification-bar>
<div class="row">
<!-- ngIf: !vm.gift.ID --><ax-breadcrumb ng-if="!vm.gift.ID" has-category-label="false"
crumbs="[{name: 'Home' , state: 'store' }, {name: vm.crumbCategory.CategoryName, state: 'category({categoryID: \'' + vm.crumbCategory.CategoryLinkID +'\'})', isHidden: (!vm.crumbCategory || vm.crumbCategory.BrandCategoryID <= 0 || vm.crumbCategory.CategoryName === 'Undefined Category')},{name: vm.item.Name}]"
class="ng-scope ng-isolate-scope">
<style>
.breadcrumb-title {
font-size: 14px;
display: inline;
}
.breadcrumb a:focus-visible {
outline: -webkit-focus-ring-color auto 1px !important;
padding: 5px !important;
}
</style>
<ol class="breadcrumb">
<!-- ngRepeat: crumb in vm.crumbs | filter: {'isHidden' : '!true'} -->
<li ng-repeat="crumb in vm.crumbs | filter: {'isHidden' : '!true'} " tabindex="-1" class="ng-scope">
<!-- ngIf: !$last && crumb.state && (vm.store.Config.CustomHomePage && crumb.state =='store') -->
<!-- ngIf: !$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store') --><a id="link-store" ui-sref="store" ng-if="!$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store')" ng-click="vm.click(crumb);" tabindex="0" class="ng-binding ng-scope" href="/">
<!--<i class="namicon namicon-800" ng-class="crumb.namicon" ng-if="$first && crumb.namicon"></i>
<i class="glyphicon" ng-class="crumb.glyphicon" ng-if="$first && crumb.glyphicon"></i>-->
Home
</a><!-- end ngIf: !$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store') -->
<!-- ngIf: !$last && !crumb.state -->
<!-- ngIf: $last && !vm.hasCategoryLabel -->
<!-- ngIf: $last && vm.hasCategoryLabel -->
</li><!-- end ngRepeat: crumb in vm.crumbs | filter: {'isHidden' : '!true'} -->
<li ng-repeat="crumb in vm.crumbs | filter: {'isHidden' : '!true'} " tabindex="-1" class="ng-scope">
<!-- ngIf: !$last && crumb.state && (vm.store.Config.CustomHomePage && crumb.state =='store') -->
<!-- ngIf: !$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store') --><a id="link-category({categoryID: 'sustainable-items'})" ui-sref="category({categoryID: 'sustainable-items'})" ng-if="!$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store')" ng-click="vm.click(crumb);" tabindex="0" class="ng-binding ng-scope" href="/category/sustainable-items">
<!--<i class="namicon namicon-800" ng-class="crumb.namicon" ng-if="$first && crumb.namicon"></i>
<i class="glyphicon" ng-class="crumb.glyphicon" ng-if="$first && crumb.glyphicon"></i>-->
Sustainable Items
</a><!-- end ngIf: !$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store') -->
<!-- ngIf: !$last && !crumb.state -->
<!-- ngIf: $last && !vm.hasCategoryLabel -->
<!-- ngIf: $last && vm.hasCategoryLabel -->
</li><!-- end ngRepeat: crumb in vm.crumbs | filter: {'isHidden' : '!true'} -->
<li ng-repeat="crumb in vm.crumbs | filter: {'isHidden' : '!true'} " tabindex="-1" class="ng-scope">
<!-- ngIf: !$last && crumb.state && (vm.store.Config.CustomHomePage && crumb.state =='store') -->
<!-- ngIf: !$last && crumb.state && !(vm.store.Config.CustomHomePage && crumb.state =='store') -->
<!-- ngIf: !$last && !crumb.state -->
<!-- ngIf: $last && !vm.hasCategoryLabel --><a id="homePageBreadcrumbText" class="breadcrumb-title ng-binding ng-scope" ng-if="$last && !vm.hasCategoryLabel" ng-click="vm.click(crumb);" tabindex="0">
<!--<i class="namicon namicon-800" ng-class="crumb.namicon" ng-if="$first"></i>-->30 oz Straw Tumbler
</a><!-- end ngIf: $last && !vm.hasCategoryLabel -->
<!-- ngIf: $last && vm.hasCategoryLabel -->
</li><!-- end ngRepeat: crumb in vm.crumbs | filter: {'isHidden' : '!true'} -->
</ol>
<!-- This will fix the AngularJS ng-keypress glitch that causes the zoom not to work when activated by the keyboard. - MF 12/27/23 -->
<!-- https://store.axomo.com/item/auto-license-plate-frame-gold -->
<input type="text" value=" " style="border: 0; width: 0px; padding: 0; position: absolute; left: -1000px" aria-hidden="true" role="none">
</ax-breadcrumb><!-- end ngIf: !vm.gift.ID -->
</div>
<!-- ngIf: $state.params.fromSetupManager != null -->
<div id="axoItemHero" class="row">
<!-- ngIf: vm.item.ShowSpecialInstructions -->
<!-- ngIf: vm.item.IsNew && !vm.item.IsSale -->
<!-- ngIf: vm.item.IsSale -->
<!-- V2 New/Sale icons -->
<!-- ngIf: vm.item.IsNew && !vm.item.IsOnSale -->
<!-- ngIf: vm.item.IsOnSale -->
<!-- ngIf: vm.isReorder -->
<!-- ngIf: !vm.isReorder -->
<div class="col-sm-5 col-md-4 col-md-offset-1 ptl ng-scope" ng-if="!vm.isReorder">
<spinner is-loading="vm.isGettingPreview" class="ng-isolate-scope">
<style>
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.4s infinite ease-in-out;
animation: sk-rotateplane 1.4s infinite ease-in-out;
}
.white-spinner {
background-color: #FFF;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px);
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
<!-- ngIf: vm.isLoading && !vm.isButton && vm.showSpinner -->
<!-- ngIf: vm.isLoading && vm.isButton -->
</spinner>
<!--NAME TAG IMAGE-->
<!-- ngIf: vm.item.NametagBuilderID -->
<!-- REAL ITEM IMAGES -->
<!--<axo-carousel item-pics="vm.currentPics" extra-item-pics="vm.extraPics" is-product="true" ng-if="vm.currentPics.length > 0" changed-view="vm.changedView" put-at-beginning="vm.putAtBeginning"></axo-carousel>-->
<!--ax-svg is only v1 items if I remember correctly so should never be here - 11/18/2019 CR-->
<!-- ngIf: !vm.useNewView -->
<!-- ngIf: vm.useNewView && !vm.isGettingPreview -->
<div ng-if="vm.useNewView && !vm.isGettingPreview" class="ng-scope">
<!-- ngIf: !vm.loadingViews --><view-carousel catalog-view-groups="vm.catalogViewGroups" startinggroup="vm.startingGroup" color-filter="vm.selectedColor.VariationID" changed-view="vm.changedView" default-view="vm.view" views="vm.views"
colors="vm.item.Colors" is-generic="vm.isGeneric" decorations="vm.item.Decorations" ng-if="!vm.loadingViews" class="ng-scope ng-isolate-scope" style="">
<style>
.myThumbnail {
border: 1px solid #DDD;
border-radius: 5px;
display: flex;
align-items: center;
margin: 0 2px;
padding: 0 5px;
box-sizing: border-box;
max-height: 70px;
}
.myArrows {
display: flex;
align-items: center;
padding: 0 5px;
}
.thumbPic {
width: 50px;
}
@media only screen and (max-width: 767px) {
.thumbPic {
width: 40px;
}
}
</style>
<!-- ngIf: !vm.defaultView && !vm.defaultColor -->
<!-- ngIf: !vm.isGeneric && !vm.isPromoWithoutViews -->
<div ng-if="!vm.isGeneric && !vm.isPromoWithoutViews" class="ng-scope">
<!-- ngIf: vm.defaultView -->
<div class="col-md-12 text-center ng-scope" style="overflow:hidden" ng-if="vm.defaultView">
<h3 class="ng-binding">Black</h3>
<!-- ngIf: !vm.defaultView.IsCustomView --><catalog-svg tabindex="0" group="vm.group" ng-if="!vm.defaultView.IsCustomView" view="vm.defaultView" svg-id="vm.svgID + 'main'" edit-mode="vm.viewOnly" on-item-display="true"
class="ng-scope ng-isolate-scope"><!-- ngIf: !vm.isLoading -->
<div ng-if="!vm.isLoading" style="margin:1px;" class="ng-scope">
<svg svg-id="main" ng-init="vm.initDiv()" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" dynamic-view-box="0 0 600 600" id="main"
ng-style="{'transform': 'scale(' + vm.scaleUp + ')', 'transform-origin': '' + vm.originX + ' ' + vm.originY + ' 0'}" ng-mouseenter="vm.zoom($event)" ng-mouseleave="vm.zoomOut()" ng-mousemove="vm.pan($event)"
ng-mouse-wheel-up="vm.scrollZoomIn()" ng-mouse-wheel-down="vm.scrollZoomOut()" ng-keypress="vm.keypressZoom($event)" ng-keydown="vm.keydownPan($event)" tabindex="-1" alt="" aria-label="" width="100%"
ng-attr-height="{{vm.DisplayHeight || vm.getDisplayHeight()}}" viewBox="0 0 600 600" height="1271.33" style="transform-origin: 0px center;">
<!-- Base Image -->
<!-- ngRepeat: view in vm.group.Views | orderBy : '-ColorName' --><!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID --><!-- end ngRepeat: view in vm.group.Views | orderBy : '-ColorName' -->
<!-- ngIf: vm.view && !vm.view.SVGString -->
<g ng-if="vm.view && !vm.view.SVGString">
<!-- ngIf: layer.Type == vm.PRODUCT_VIEW_LAYER_TYPE.IMAGE.ID -->
<image ng-attr-id="{{ vm.getShirtColorID() }}" style="pointer-events: none; z-index: 20" ng-attr-y="{{vm.getBackgroundPoint(vm.view).Y}}" ng-attr-x="{{vm.getBackgroundPoint(vm.view).X}}"
xlink:href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/black tumbler.png" ng-href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/black tumbler.png"
ng-attr-width="{{vm.artboard.Width * vm.view.Zoom}}" ng-attr-height="{{vm.artboard.Height * vm.view.Zoom }}" id="shirtColor-main" y="-13" x="0" width="600" height="600"></image>
</g><!-- end ngIf: vm.view && !vm.view.SVGString -->
<!-- ngIf: vm.view && vm.view.SVGString -->
<!-- ngRepeat: template in vm.templates -->
<g>
<!--<image ng-click="vm.selectLogo(logo)" ng-class="{'clickable': vm.selected != logo, 'standard-cursor': vm.selected == vm.group.Ruler }" drag-no-bounds="true" ax-draggable="logo" disable-drag="vm.selected != logo" svg-id="(vm.svgId)" xlink:href="" ng-href="{{logo.DefaultLogo.Link}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-transform="{{vm.getTransform(logo)}}">
</image>-->
<!--<rect ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" style="fill:transparent;stroke-width:3;stroke:rgb(0,0,0)" ng-attr-transform="{{vm.getTransform(logo)}}" ></rect>-->
</g>
<!--Clip Path-->
<g>
<!--draw paths-->
<!-- ngRepeat: (areaIdx, area) in vm.group.PrintAreas --><!-- ngIf: !area.IsDeleted -->
<g ng-repeat="(areaIdx, area) in vm.group.PrintAreas" ng-if="!area.IsDeleted">
<defs>
<clipPath ng-attr-id="{{vm.getClipID(areaIdx)}}" id="svg-clip-path-0-main">
<path ng-attr-d="{{area.ClipPath}}" d="M236.94501733398437,189.22 L361.77124462890623,190.21138427734374 L361.77124462890623,309.0936921386719 L239.91640161132813,309.095 Z"></path>
</clipPath>
</defs>
<!--There was an IsDefault on this ng-if, but I don't know what it's for and it hid some text CR 12/16/2019-->
<!-- ngRepeat: (layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'} --><!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (vm.editMode != vm.EDIT_MODE.CATALOG.ID && (layer.IsDefault || layer.Type == vm.LAYER_TYPE.TEXT.ID)) -->
<g ng-class="{'clickable' : vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID }" ng-mousedown="vm.selectItem(layer, area)" ng-mousemove="vm.updateLocation(layer)"
ng-repeat="(layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'}"
ng-if="vm.editMode == vm.EDIT_MODE.CATALOG.ID || (vm.editMode != vm.EDIT_MODE.CATALOG.ID && (layer.IsDefault || layer.Type == vm.LAYER_TYPE.TEXT.ID))">
<!-- Logos -->
<!-- ngIf: layer.Type == vm.LAYER_TYPE.LOGO.ID -->
<g ng-if="layer.Type == vm.LAYER_TYPE.LOGO.ID">
<!--actual logo for SVG-->
<g ng-attr-clip-path="{{vm.getClipPathUrl(areaIdx)}}" clip-path="url(https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler#svg-clip-path-0-main)">
<!--Masked Image-->
<!-- ngIf: vm.getLogoByColorID(layer, area).SolidColor -->
<g ng-if="vm.getLogoByColorID(layer, area).SolidColor">
<defs>
<filter ng-attr-id="{{vm.getMaskID('setup-invert-' + layerIdx, areaIdx)}}" id="mask-setup-invert-0-main-0">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix>
</filter>
<!-- ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
<mask ng-attr-id="{{vm.getMaskID('imagemask-' + layerIdx, areaIdx)}}" maskUnits="objectBoundingBox" ng-if="vm.editMode != vm.EDIT_MODE.CATALOG.ID" id="mask-imagemask-0-main-0">
<image ng-attr-id="{{'maskimg-' + vm.getMaskID('imagemask-' + layerIdx, areaIdx)}}" ng-attr-href="{{vm.getLogoByColorID(layer).Link}}" ng-attr-x="{{layer.X}}" ng-attr-y="{{layer.Y}}"
ng-attr-height="{{layer.Height}}" ng-attr-width="{{layer.Width}}" ng-attr-transform="{{vm.getTransform(layer)}}" ng-attr-filter="{{vm.getMaskPathUrl(layer, areaIdx, 'setup-invert-' + layerIdx)}}"
id="maskimg-mask-imagemask-0-main-0" href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/13967/users/f3bd06c0-dd03-4272-a3e6-4796b1fc60f3/apl logo only - bw_rm-3-contrast-000000-0.png" x="255.419997"
y="227.292039" height="34.706922" width="91.334005" transform="rotate(0,301.0869995,244.6455)" filter="url(https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler#mask-setup-invert-0-main-0)"></image>
</mask><!-- end ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
</defs>
<!-- ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
<g ng-if="vm.editMode != vm.EDIT_MODE.CATALOG.ID">
<!-- ngIf: layerIdx != null && areaIdx != null -->
<rect x="0" y="0" ng-attr-width="{{vm.artboard.Width}}" ng-attr-height="{{vm.artboard.Height}}" ng-attr-fill="{{vm.getLogoByColorID(layer, area).SolidColor}}" ng-if="layerIdx != null && areaIdx != null"
ng-attr-mask="{{vm.getMaskPathUrl(layer, areaIdx, 'imagemask-' + layerIdx)}}" style="pointer-events: none;" width="600" height="600" fill="#D2D2D2"
mask="url(https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler#mask-imagemask-0-main-0)"></rect><!-- end ngIf: layerIdx != null && areaIdx != null -->
</g><!-- end ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
</g><!-- end ngIf: vm.getLogoByColorID(layer, area).SolidColor -->
<!--Regular Image-->
<!-- ngIf: !vm.getLogoByColorID(layer, area).SolidColor -->
</g>
<!--logo edit controls-->
<!-- ngIf: vm.selected && vm.selected == layer && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID && area.ShowPath -->
</g><!-- end ngIf: layer.Type == vm.LAYER_TYPE.LOGO.ID -->
<!-- Text -->
<!-- ngIf: layer.Type == vm.LAYER_TYPE.TEXT.ID -->
</g>
<!-- end ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (vm.editMode != vm.EDIT_MODE.CATALOG.ID && (layer.IsDefault || layer.Type == vm.LAYER_TYPE.TEXT.ID)) --><!-- end ngRepeat: (layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'} -->
<!--if in catalog edit mode, show the print areas; if in store product edit mode, show only the selected one-->
<!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (!vm.selectedPrintArea || (vm.editMode == vm.EDIT_MODE.STORE_PRODUCT.ID && area==vm.selectedPrintArea)) && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</g><!-- end ngIf: !area.IsDeleted --><!-- end ngRepeat: (areaIdx, area) in vm.group.PrintAreas -->
</g>
<!-- ngIf: vm.view.TopLayer && vm.view.ShowOnMain -->
<!--End clip path-->
<!-- Ruler -->
<!--<g ng-if="vm.selected == vm.group.Ruler" ax-draw-polygon polygon="vm.group.Ruler" svg-id="vm.svgId" dpi="vm.group.Ruler.DPI"></g>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(0,0,0);stroke-width:5" stroke-dasharray="10,10" ></line>
<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--dark dashed path-->
<!-- ngIf: vm.group.Ruler && vm.selected == vm.group.Ruler -->
<!-- ngIf: vm.artboard.Width && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</svg>
</div><!-- end ngIf: !vm.isLoading -->
</catalog-svg><!-- end ngIf: !vm.defaultView.IsCustomView -->
<!-- ngIf: vm.defaultView.IsCustomView -->
</div><!-- end ngIf: vm.defaultView -->
<!-- ngIf: (vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter).length > 1 -->
<div style="width: 100%; margin: 0 auto; display:flex; align-items: center; justify-content:center;" ng-if="(vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter).length > 1" class="ng-scope">
<!-- ngIf: (vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter).length > vm.thumbsLimit -->
<!-- ngRepeat: view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index -->
<div ng-repeat="view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index" class="ng-scope">
<div class="myThumbnail" ng-click="vm.changeView(view)" ng-keypress="vm.changeView(view)">
<!-- ngIf: !view.IsCustomView --><catalog-svg tabindex="0" ng-if="!view.IsCustomView" group="vm.CATALOG_VIEWS[view.CatalogViewGroupID]" view="view" svg-id="vm.svgID + $index" edit-mode="vm.viewOnly" size="200"
class="thumbPic ng-scope ng-isolate-scope"><!-- ngIf: !vm.isLoading -->
<div ng-if="!vm.isLoading" style="margin:1px;" class="ng-scope">
<svg svg-id="0" ng-init="vm.initDiv()" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" dynamic-view-box="0 0 600 600" id="0"
ng-style="{'transform': 'scale(' + vm.scaleUp + ')', 'transform-origin': '' + vm.originX + ' ' + vm.originY + ' 0'}" ng-mouseenter="vm.zoom($event)" ng-mouseleave="vm.zoomOut()" ng-mousemove="vm.pan($event)"
ng-mouse-wheel-up="vm.scrollZoomIn()" ng-mouse-wheel-down="vm.scrollZoomOut()" ng-keypress="vm.keypressZoom($event)" ng-keydown="vm.keydownPan($event)" tabindex="-1" alt="" aria-label="" width="100%"
ng-attr-height="{{vm.DisplayHeight || vm.getDisplayHeight()}}" viewBox="0 0 600 600" height="48" style="transform-origin: 0px center;">
<!-- Base Image -->
<!-- ngRepeat: view in vm.group.Views | orderBy : '-ColorName' --><!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID --><!-- end ngRepeat: view in vm.group.Views | orderBy : '-ColorName' -->
<!-- ngIf: vm.view && !vm.view.SVGString -->
<g ng-if="vm.view && !vm.view.SVGString">
<!-- ngIf: layer.Type == vm.PRODUCT_VIEW_LAYER_TYPE.IMAGE.ID -->
<image ng-attr-id="{{ vm.getShirtColorID() }}" style="pointer-events: none; z-index: 20" ng-attr-y="{{vm.getBackgroundPoint(vm.view).Y}}" ng-attr-x="{{vm.getBackgroundPoint(vm.view).X}}"
xlink:href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/black tumbler.png" ng-href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/black tumbler.png"
ng-attr-width="{{vm.artboard.Width * vm.view.Zoom}}" ng-attr-height="{{vm.artboard.Height * vm.view.Zoom }}" id="shirtColor-0" y="-13" x="0" width="600" height="600"></image>
</g><!-- end ngIf: vm.view && !vm.view.SVGString -->
<!-- ngIf: vm.view && vm.view.SVGString -->
<!-- ngRepeat: template in vm.templates -->
<g>
<!--<image ng-click="vm.selectLogo(logo)" ng-class="{'clickable': vm.selected != logo, 'standard-cursor': vm.selected == vm.group.Ruler }" drag-no-bounds="true" ax-draggable="logo" disable-drag="vm.selected != logo" svg-id="(vm.svgId)" xlink:href="" ng-href="{{logo.DefaultLogo.Link}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-transform="{{vm.getTransform(logo)}}">
</image>-->
<!--<rect ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" style="fill:transparent;stroke-width:3;stroke:rgb(0,0,0)" ng-attr-transform="{{vm.getTransform(logo)}}" ></rect>-->
</g>
<!--Clip Path-->
<g>
<!--draw paths-->
<!-- ngRepeat: (areaIdx, area) in vm.group.PrintAreas --><!-- ngIf: !area.IsDeleted -->
<g ng-repeat="(areaIdx, area) in vm.group.PrintAreas" ng-if="!area.IsDeleted">
<defs>
<clipPath ng-attr-id="{{vm.getClipID(areaIdx)}}" id="svg-clip-path-0-0">
<path ng-attr-d="{{area.ClipPath}}" d="M236.94501733398437,189.22 L361.77124462890623,190.21138427734374 L361.77124462890623,309.0936921386719 L239.91640161132813,309.095 Z"></path>
</clipPath>
</defs>
<!--There was an IsDefault on this ng-if, but I don't know what it's for and it hid some text CR 12/16/2019-->
<!-- ngRepeat: (layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'} --><!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (vm.editMode != vm.EDIT_MODE.CATALOG.ID && (layer.IsDefault || layer.Type == vm.LAYER_TYPE.TEXT.ID)) -->
<g ng-class="{'clickable' : vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID }" ng-mousedown="vm.selectItem(layer, area)" ng-mousemove="vm.updateLocation(layer)"
ng-repeat="(layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'}"
ng-if="vm.editMode == vm.EDIT_MODE.CATALOG.ID || (vm.editMode != vm.EDIT_MODE.CATALOG.ID && (layer.IsDefault || layer.Type == vm.LAYER_TYPE.TEXT.ID))">
<!-- Logos -->
<!-- ngIf: layer.Type == vm.LAYER_TYPE.LOGO.ID -->
<g ng-if="layer.Type == vm.LAYER_TYPE.LOGO.ID">
<!--actual logo for SVG-->
<g ng-attr-clip-path="{{vm.getClipPathUrl(areaIdx)}}" clip-path="url(https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler#svg-clip-path-0-0)">
<!--Masked Image-->
<!-- ngIf: vm.getLogoByColorID(layer, area).SolidColor -->
<g ng-if="vm.getLogoByColorID(layer, area).SolidColor">
<defs>
<filter ng-attr-id="{{vm.getMaskID('setup-invert-' + layerIdx, areaIdx)}}" id="mask-setup-invert-0-0-0">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix>
</filter>
<!-- ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
<mask ng-attr-id="{{vm.getMaskID('imagemask-' + layerIdx, areaIdx)}}" maskUnits="objectBoundingBox" ng-if="vm.editMode != vm.EDIT_MODE.CATALOG.ID" id="mask-imagemask-0-0-0">
<image ng-attr-id="{{'maskimg-' + vm.getMaskID('imagemask-' + layerIdx, areaIdx)}}" ng-attr-href="{{vm.getLogoByColorID(layer).Link}}" ng-attr-x="{{layer.X}}" ng-attr-y="{{layer.Y}}"
ng-attr-height="{{layer.Height}}" ng-attr-width="{{layer.Width}}" ng-attr-transform="{{vm.getTransform(layer)}}" ng-attr-filter="{{vm.getMaskPathUrl(layer, areaIdx, 'setup-invert-' + layerIdx)}}"
id="maskimg-mask-imagemask-0-0-0" href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/13967/users/f3bd06c0-dd03-4272-a3e6-4796b1fc60f3/apl logo only - bw_rm-3-contrast-000000-0.png" x="255.419997"
y="227.292039" height="34.706922" width="91.334005" transform="rotate(0,301.0869995,244.6455)" filter="url(https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler#mask-setup-invert-0-0-0)"></image>
</mask><!-- end ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
</defs>
<!-- ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
<g ng-if="vm.editMode != vm.EDIT_MODE.CATALOG.ID">
<!-- ngIf: layerIdx != null && areaIdx != null -->
<rect x="0" y="0" ng-attr-width="{{vm.artboard.Width}}" ng-attr-height="{{vm.artboard.Height}}" ng-attr-fill="{{vm.getLogoByColorID(layer, area).SolidColor}}" ng-if="layerIdx != null && areaIdx != null"
ng-attr-mask="{{vm.getMaskPathUrl(layer, areaIdx, 'imagemask-' + layerIdx)}}" style="pointer-events: none;" width="600" height="600" fill="#D2D2D2"
mask="url(https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler#mask-imagemask-0-0-0)"></rect><!-- end ngIf: layerIdx != null && areaIdx != null -->
</g><!-- end ngIf: vm.editMode != vm.EDIT_MODE.CATALOG.ID -->
</g><!-- end ngIf: vm.getLogoByColorID(layer, area).SolidColor -->
<!--Regular Image-->
<!-- ngIf: !vm.getLogoByColorID(layer, area).SolidColor -->
</g>
<!--logo edit controls-->
<!-- ngIf: vm.selected && vm.selected == layer && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID && area.ShowPath -->
</g><!-- end ngIf: layer.Type == vm.LAYER_TYPE.LOGO.ID -->
<!-- Text -->
<!-- ngIf: layer.Type == vm.LAYER_TYPE.TEXT.ID -->
</g>
<!-- end ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (vm.editMode != vm.EDIT_MODE.CATALOG.ID && (layer.IsDefault || layer.Type == vm.LAYER_TYPE.TEXT.ID)) --><!-- end ngRepeat: (layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'} -->
<!--if in catalog edit mode, show the print areas; if in store product edit mode, show only the selected one-->
<!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (!vm.selectedPrintArea || (vm.editMode == vm.EDIT_MODE.STORE_PRODUCT.ID && area==vm.selectedPrintArea)) && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</g><!-- end ngIf: !area.IsDeleted --><!-- end ngRepeat: (areaIdx, area) in vm.group.PrintAreas -->
</g>
<!-- ngIf: vm.view.TopLayer && vm.view.ShowOnMain -->
<!--End clip path-->
<!-- Ruler -->
<!--<g ng-if="vm.selected == vm.group.Ruler" ax-draw-polygon polygon="vm.group.Ruler" svg-id="vm.svgId" dpi="vm.group.Ruler.DPI"></g>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(0,0,0);stroke-width:5" stroke-dasharray="10,10" ></line>
<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--dark dashed path-->
<!-- ngIf: vm.group.Ruler && vm.selected == vm.group.Ruler -->
<!-- ngIf: vm.artboard.Width && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</svg>
</div><!-- end ngIf: !vm.isLoading -->
</catalog-svg><!-- end ngIf: !view.IsCustomView -->
<!-- ngIf: view.IsCustomView -->
</div>
</div><!-- end ngRepeat: view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index -->
<div ng-repeat="view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index" class="ng-scope">
<div class="myThumbnail" ng-click="vm.changeView(view)" ng-keypress="vm.changeView(view)">
<!-- ngIf: !view.IsCustomView --><catalog-svg tabindex="0" ng-if="!view.IsCustomView" group="vm.CATALOG_VIEWS[view.CatalogViewGroupID]" view="view" svg-id="vm.svgID + $index" edit-mode="vm.viewOnly" size="200"
class="thumbPic ng-scope ng-isolate-scope"><!-- ngIf: !vm.isLoading -->
<div ng-if="!vm.isLoading" style="margin:1px;" class="ng-scope">
<svg svg-id="1" ng-init="vm.initDiv()" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" dynamic-view-box="0 0 600 600" id="1"
ng-style="{'transform': 'scale(' + vm.scaleUp + ')', 'transform-origin': '' + vm.originX + ' ' + vm.originY + ' 0'}" ng-mouseenter="vm.zoom($event)" ng-mouseleave="vm.zoomOut()" ng-mousemove="vm.pan($event)"
ng-mouse-wheel-up="vm.scrollZoomIn()" ng-mouse-wheel-down="vm.scrollZoomOut()" ng-keypress="vm.keypressZoom($event)" ng-keydown="vm.keydownPan($event)" tabindex="-1" alt="" aria-label="" width="100%"
ng-attr-height="{{vm.DisplayHeight || vm.getDisplayHeight()}}" viewBox="0 0 600 600" height="48" style="transform-origin: 0px center;">
<!-- Base Image -->
<!-- ngRepeat: view in vm.group.Views | orderBy : '-ColorName' --><!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID --><!-- end ngRepeat: view in vm.group.Views | orderBy : '-ColorName' -->
<!-- ngIf: vm.view && !vm.view.SVGString -->
<g ng-if="vm.view && !vm.view.SVGString">
<!-- ngIf: layer.Type == vm.PRODUCT_VIEW_LAYER_TYPE.IMAGE.ID -->
<image ng-attr-id="{{ vm.getShirtColorID() }}" style="pointer-events: none; z-index: 20" ng-attr-y="{{vm.getBackgroundPoint(vm.view).Y}}" ng-attr-x="{{vm.getBackgroundPoint(vm.view).X}}"
xlink:href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/black tumbler back.png" ng-href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/black tumbler back.png"
ng-attr-width="{{vm.artboard.Width * vm.view.Zoom}}" ng-attr-height="{{vm.artboard.Height * vm.view.Zoom }}" id="shirtColor-1" y="-13" x="0" width="600" height="600"></image>
</g><!-- end ngIf: vm.view && !vm.view.SVGString -->
<!-- ngIf: vm.view && vm.view.SVGString -->
<!-- ngRepeat: template in vm.templates -->
<g>
<!--<image ng-click="vm.selectLogo(logo)" ng-class="{'clickable': vm.selected != logo, 'standard-cursor': vm.selected == vm.group.Ruler }" drag-no-bounds="true" ax-draggable="logo" disable-drag="vm.selected != logo" svg-id="(vm.svgId)" xlink:href="" ng-href="{{logo.DefaultLogo.Link}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-transform="{{vm.getTransform(logo)}}">
</image>-->
<!--<rect ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" style="fill:transparent;stroke-width:3;stroke:rgb(0,0,0)" ng-attr-transform="{{vm.getTransform(logo)}}" ></rect>-->
</g>
<!--Clip Path-->
<g>
<!--draw paths-->
<!-- ngRepeat: (areaIdx, area) in vm.group.PrintAreas --><!-- ngIf: !area.IsDeleted -->
<g ng-repeat="(areaIdx, area) in vm.group.PrintAreas" ng-if="!area.IsDeleted">
<defs>
<clipPath ng-attr-id="{{vm.getClipID(areaIdx)}}" id="svg-clip-path-0-1">
<path ng-attr-d="{{area.ClipPath}}" d="M252.79518554687502,183.277 L255.76756982421875,306.1223078613281 L352.8544606933594,307.1133078613281 L349.8827380371094,184.2676768798828 Z"></path>
</clipPath>
</defs>
<!--There was an IsDefault on this ng-if, but I don't know what it's for and it hid some text CR 12/16/2019-->
<!-- ngRepeat: (layerIdx, layer) in area.Layers | filter:{IsDeleted: '!true'} -->
<!--if in catalog edit mode, show the print areas; if in store product edit mode, show only the selected one-->
<!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID || (!vm.selectedPrintArea || (vm.editMode == vm.EDIT_MODE.STORE_PRODUCT.ID && area==vm.selectedPrintArea)) && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</g><!-- end ngIf: !area.IsDeleted --><!-- end ngRepeat: (areaIdx, area) in vm.group.PrintAreas -->
</g>
<!-- ngIf: vm.view.TopLayer && vm.view.ShowOnMain -->
<!--End clip path-->
<!-- Ruler -->
<!--<g ng-if="vm.selected == vm.group.Ruler" ax-draw-polygon polygon="vm.group.Ruler" svg-id="vm.svgId" dpi="vm.group.Ruler.DPI"></g>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(0,0,0);stroke-width:5" stroke-dasharray="10,10" ></line>
<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--dark dashed path-->
<!-- ngIf: vm.group.Ruler && vm.selected == vm.group.Ruler -->
<!-- ngIf: vm.artboard.Width && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</svg>
</div><!-- end ngIf: !vm.isLoading -->
</catalog-svg><!-- end ngIf: !view.IsCustomView -->
<!-- ngIf: view.IsCustomView -->
</div>
</div><!-- end ngRepeat: view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index -->
<div ng-repeat="view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index" class="ng-scope">
<div class="myThumbnail" ng-click="vm.changeView(view)" ng-keypress="vm.changeView(view)">
<!-- ngIf: !view.IsCustomView --><catalog-svg tabindex="0" ng-if="!view.IsCustomView" group="vm.CATALOG_VIEWS[view.CatalogViewGroupID]" view="view" svg-id="vm.svgID + $index" edit-mode="vm.viewOnly" size="200"
class="thumbPic ng-scope ng-isolate-scope"><!-- ngIf: !vm.isLoading -->
<div ng-if="!vm.isLoading" style="margin:1px;" class="ng-scope">
<svg svg-id="2" ng-init="vm.initDiv()" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" dynamic-view-box="0 0 600 600" id="2"
ng-style="{'transform': 'scale(' + vm.scaleUp + ')', 'transform-origin': '' + vm.originX + ' ' + vm.originY + ' 0'}" ng-mouseenter="vm.zoom($event)" ng-mouseleave="vm.zoomOut()" ng-mousemove="vm.pan($event)"
ng-mouse-wheel-up="vm.scrollZoomIn()" ng-mouse-wheel-down="vm.scrollZoomOut()" ng-keypress="vm.keypressZoom($event)" ng-keydown="vm.keydownPan($event)" tabindex="-1" alt="" aria-label="" width="100%"
ng-attr-height="{{vm.DisplayHeight || vm.getDisplayHeight()}}" viewBox="0 0 600 600" height="48" style="transform-origin: 0px center;">
<!-- Base Image -->
<!-- ngRepeat: view in vm.group.Views | orderBy : '-ColorName' --><!-- ngIf: vm.editMode == vm.EDIT_MODE.CATALOG.ID --><!-- end ngRepeat: view in vm.group.Views | orderBy : '-ColorName' -->
<!-- ngIf: vm.view && !vm.view.SVGString -->
<g ng-if="vm.view && !vm.view.SVGString">
<!-- ngIf: layer.Type == vm.PRODUCT_VIEW_LAYER_TYPE.IMAGE.ID -->
<image ng-attr-id="{{ vm.getShirtColorID() }}" style="pointer-events: none; z-index: 20" ng-attr-y="{{vm.getBackgroundPoint(vm.view).Y}}" ng-attr-x="{{vm.getBackgroundPoint(vm.view).X}}"
xlink:href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/1627-39-1.png" ng-href="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/3903/item/1627-39-1.png"
ng-attr-width="{{vm.artboard.Width * vm.view.Zoom}}" ng-attr-height="{{vm.artboard.Height * vm.view.Zoom }}" id="shirtColor-2" y="0" x="0" width="600" height="600"></image>
</g><!-- end ngIf: vm.view && !vm.view.SVGString -->
<!-- ngIf: vm.view && vm.view.SVGString -->
<!-- ngRepeat: template in vm.templates -->
<g>
<!--<image ng-click="vm.selectLogo(logo)" ng-class="{'clickable': vm.selected != logo, 'standard-cursor': vm.selected == vm.group.Ruler }" drag-no-bounds="true" ax-draggable="logo" disable-drag="vm.selected != logo" svg-id="(vm.svgId)" xlink:href="" ng-href="{{logo.DefaultLogo.Link}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-transform="{{vm.getTransform(logo)}}">
</image>-->
<!--<rect ng-attr-height="{{logo.Height}}" ng-attr-width="{{logo.Width}}" ng-attr-x="{{logo.X}}" ng-attr-y="{{logo.Y}}" style="fill:transparent;stroke-width:3;stroke:rgb(0,0,0)" ng-attr-transform="{{vm.getTransform(logo)}}" ></rect>-->
</g>
<!--Clip Path-->
<g>
<!--draw paths-->
<!-- ngRepeat: (areaIdx, area) in vm.group.PrintAreas -->
</g>
<!-- ngIf: vm.view.TopLayer && vm.view.ShowOnMain -->
<!--End clip path-->
<!-- Ruler -->
<!--<g ng-if="vm.selected == vm.group.Ruler" ax-draw-polygon polygon="vm.group.Ruler" svg-id="vm.svgId" dpi="vm.group.Ruler.DPI"></g>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(0,0,0);stroke-width:5" stroke-dasharray="10,10" ></line>
<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--<line ng-attr-x1="{{vm.group.Ruler.X1}}" ng-attr-y1="{{vm.group.Ruler.Y1}}" ng-attr-x2="{{vm.group.Ruler.X2}}" ng-attr-y2="{{vm.group.Ruler.Y2}}" style="stroke:rgb(255,255,255);stroke-width:5" stroke-dasharray="10,10" stroke-dashoffset="10" ></line>-->
<!--dark dashed path-->
<!-- ngIf: vm.group.Ruler && vm.selected == vm.group.Ruler -->
<!-- ngIf: vm.artboard.Width && vm.editMode != vm.EDIT_MODE.VIEW_ONLY.ID -->
</svg>
</div><!-- end ngIf: !vm.isLoading -->
</catalog-svg><!-- end ngIf: !view.IsCustomView -->
<!-- ngIf: view.IsCustomView -->
</div>
</div><!-- end ngRepeat: view in vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter | start: vm.picStart | limitTo: vm.thumbsLimit track by $index -->
<!-- ngIf: (vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter).length > vm.thumbsLimit -->
</div><!-- end ngIf: (vm.views | isNullOrMatch: 'ColorVariationID' : vm.colorFilter).length > 1 -->
</div><!-- end ngIf: !vm.isGeneric && !vm.isPromoWithoutViews -->
<!-- ngIf: vm.isGeneric -->
<!-- ngIf: vm.isPromoWithoutViews -->
<div class="clearfix"></div>
</view-carousel><!-- end ngIf: !vm.loadingViews -->
</div><!-- end ngIf: vm.useNewView && !vm.isGettingPreview -->
<div>
<!-- ngIf: vm.item.PreviewImage -->
</div>
<!--<a ng-click="vm.changedView = true">dfasdf</a>
<pre>{{vm.changedView}}</pre>-->
<!--DETAILS-->
<div id="axoItemDetails" style="margin-top: 40px;" class="hidden-xs">
<store-product-details store-product="vm.item" use-new-view="vm.useNewView" class="ng-isolate-scope"><!-- ngIf: vm.storeProduct.DetailedDescription --><uib-accordion ng-if="vm.storeProduct.DetailedDescription" class="ng-scope">
<div role="tablist" class="panel-group" ng-transclude="">
<div uib-accordion-group="" is-open="vm.openDetails1" ng-click="vm.toggle(vm.openDetails1)" class="ng-scope ng-isolate-scope panel panel-open">
<div role="tab" id="accordiongroup-153-6969-tab" aria-selected="true" class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="" aria-expanded="true" aria-controls="accordiongroup-153-6969-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding"><span class="ng-scope">
Product Details </span><!--<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': vm.openDetails1, 'glyphicon-chevron-right': !vm.openDetails1}"></i>-->
<!-- ngIf: vm.openDetails1 --><chevron-down-icon class="pull-right ng-scope ng-isolate-scope" ng-if="vm.openDetails1" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg></chevron-down-icon><!-- end ngIf: vm.openDetails1 -->
<!-- ngIf: !vm.openDetails1 -->
</span></a>
</h4>
</div>
<div id="accordiongroup-153-6969-panel" aria-labelledby="accordiongroup-153-6969-tab" aria-hidden="false" role="tabpanel" class="panel-collapse collapse in" uib-collapse="!isOpen" aria-expanded="true">
<div class="panel-body" ng-transclude="">
<uib-accordion-heading class="ng-scope"></uib-accordion-heading>
<div ng-bind-html="vm.storeProduct.DetailedDescription" class="ng-binding ng-scope">
<ul>
<li>Non-slip silicone base</li>
<li>Spill resistant lid</li>
<li>Shatter, taste, & odor resistant straw</li>
<li>Double-wall 18/8 stainless steel</li>
<li>Durable powder coat</li>
<li>BPA free</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</uib-accordion><!-- end ngIf: vm.storeProduct.DetailedDescription -->
<!-- ngIf: !vm.store.Config.HideDecorationMethods --><uib-accordion ng-if="!vm.store.Config.HideDecorationMethods" class="ng-scope">
<div role="tablist" class="panel-group" ng-transclude="">
<!-- ngIf: vm.storeProduct.Decorations.length || vm.storeProduct.Setup.Locations.length -->
<div uib-accordion-group="" is-open="vm.openDecoration" ng-click="vm.toggle(vm.openDecoration)" ng-if="vm.storeProduct.Decorations.length || vm.storeProduct.Setup.Locations.length" class="ng-scope ng-isolate-scope panel">
<div role="tab" id="accordiongroup-160-5196-tab" aria-selected="" class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="" aria-expanded="" aria-controls="accordiongroup-160-5196-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding"><span class="ng-scope">
Decoration Method </span><!--<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': vm.openDecoration, 'glyphicon-chevron-right': !vm.openDecoration}"></i>-->
<!-- ngIf: vm.openDecoration -->
<!-- ngIf: !vm.openDecoration --><chevron-right-icon class="pull-right ng-scope ng-isolate-scope" ng-if="!vm.openDecoration" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></svg></chevron-right-icon><!-- end ngIf: !vm.openDecoration -->
</span></a>
</h4>
</div>
<div id="accordiongroup-160-5196-panel" aria-labelledby="accordiongroup-160-5196-tab" aria-hidden="true" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen" aria-expanded="false" style="height: 0px;">
<div class="panel-body" ng-transclude="">
<uib-accordion-heading class="ng-scope"></uib-accordion-heading>
<!-- ngRepeat: location in vm.storeProduct.Setup.Locations -->
<!-- ngRepeat: location in vm.storeProduct.Decorations --><!-- ngIf: vm.storeProduct.Decorations.length > 0 && vm.useNewView --><span ng-if="vm.storeProduct.Decorations.length > 0 && vm.useNewView"
ng-repeat="location in vm.storeProduct.Decorations" class="ng-binding ng-scope"> Front - Laser Engraved
<!--<i uib-tooltip-html="'<img src={{location.Logo.Link}} width=100 ></i>'" class="tooltip-icon fa fa-question-circle mlm"></i>-->
<br>
</span><!-- end ngIf: vm.storeProduct.Decorations.length > 0 && vm.useNewView --><!-- end ngRepeat: location in vm.storeProduct.Decorations -->
</div>
</div>
</div><!-- end ngIf: vm.storeProduct.Decorations.length || vm.storeProduct.Setup.Locations.length -->
</div>
</uib-accordion><!-- end ngIf: !vm.store.Config.HideDecorationMethods -->
<!-- ngIf: vm.singleOptionSpecs.length -->
<!-- ngIf: vm.storeProduct.SpecialInstructions -->
<div class="clear-fix"></div>
</store-product-details>
</div>
<!-- ngIf: vm.item.SpecSheetSrc -->
</div><!-- end ngIf: !vm.isReorder -->
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-6">
<!--<div class="hidden-xs" style="margin-top: 100px;"></div>-->
<div class="max-450">
<!-- ITEM TITLE BAR -->
<div id="axoItemTitleBarDesktop">
<!-- ngIf: !vm.hidePrice --><span id="axoItemPrice" ng-class="{'old-price' : vm.discount.ApplyPromo}" ng-if="!vm.hidePrice" class="ng-scope">
<spinner is-loading="vm.priceUpdating" is-button="true" class="ng-isolate-scope">
<style>
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.4s infinite ease-in-out;
animation: sk-rotateplane 1.4s infinite ease-in-out;
}
.white-spinner {
background-color: #FFF;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px);
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
<!-- ngIf: vm.isLoading && !vm.isButton && vm.showSpinner -->
<!-- ngIf: vm.isLoading && vm.isButton -->
</spinner>
<!-- ngIf: !vm.priceUpdating --><span ng-if="!vm.priceUpdating" class="ng-scope">
<!--IF THERE IS NO CAMPAIGN OR NO CUSTOM CAMPAIGN PRICE OR THEY OPT OUT OF THE CAMPAIGN-->
<!-- ngIf: vm.itemPrice < 1000000 && (vm.fullRetailPrice > vm.itemPrice) -->
<!-- ngIf: vm.itemPrice < 1000000 --><span id="lblItemPrice" ng-if="vm.itemPrice < 1000000" class="ng-binding ng-scope" style="">$52.36</span><!-- end ngIf: vm.itemPrice < 1000000 -->
</span><!-- end ngIf: !vm.priceUpdating -->
</span><!-- end ngIf: !vm.hidePrice -->
<h1 id="axoItemTitle" ng-attr-title="{{vm.item.Name}}" class="ng-binding" title="30 oz Straw Tumbler"> 30 oz Straw Tumbler <!-- ngIf: vm.isReorder -->
</h1>
<!--Display discounted price if item is on sale-->
<!-- ngIf: vm.discount.ApplyPromo && !vm.hidePrice -->
</div>
<!-- /ITEM TITLE BAR -->
<h2 class="ng-binding">CamelBak</h2>
<p style="margin-top: 20px;" class="ng-binding"></p>
<!-- ITEM OPTIONS -->
<div id="axoItemOptions">
<div id="axoItemOptionsInner">
<style>
.ng-invalid.ng-touched.form-control {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
</style>
<div class="row mbm phl">
<!-- ngIf: !vm.store.Config.HideCategoryLinks -->
<div class="mvm ng-scope" id="axoItemCategoriesCode" ng-if="!vm.store.Config.HideCategoryLinks">
<div class="clearfix"></div>
<div style="display: flex; justify-content: space-between">
<div>
<!-- ngRepeat: c in vm.item.Categories | filter: {'BrandCategoryID' : '!0' } : true --><span class="badge mrs ng-scope" ng-repeat="c in vm.item.Categories | filter: {'BrandCategoryID' : '!0' } : true ">
<a ui-sref="category({'categoryID': c.CategoryLinkID})" class="ng-binding" href="/category/sustainable-items">Sustainable Items</a>
</span><!-- end ngRepeat: c in vm.item.Categories | filter: {'BrandCategoryID' : '!0' } : true -->
</div>
<!-- ngIf: !vm.item.HideItemCode -->
<div ng-if="!vm.item.HideItemCode" class="ng-binding ng-scope">1627-39ST</div><!-- end ngIf: !vm.item.HideItemCode -->
</div>
</div><!-- end ngIf: !vm.store.Config.HideCategoryLinks -->
<!-- ngIf: vm.item.Denominations && vm.item.Denominations.length -->
<!-- ngIf: vm.item.Campaign && vm.item.Campaign.length > 1 -->
<!--Product Price Table IF "priceTableOnTop = true-->
<!-- Added ng-class instead of ng-if due to the directive not even getting the pricetable...-->
<!-- ngIf: vm.store.Config.PriceTableOnTop && !vm.store.Config.HideItemPriceTables && !vm.hidePrice -->
<!-- ngIf: !vm.item.HideBulkToggle && !vm.gift -->
<div ng-if="!vm.item.HideBulkToggle && !vm.gift" class="ng-scope">
<!-- ngIf: vm.item.Sizes.length > 1 -->
</div><!-- end ngIf: !vm.item.HideBulkToggle && !vm.gift -->
<div class="clearfix"></div>
<!--Multiple Option Spec Groups-->
<product-select-specs store-product="vm.item" on-change="vm.changeSpec" on-select="vm.changeSelectedProduct" hide-pricing="vm.hidePrice" class="ng-isolate-scope"><directive-errors errors="vm.errors"
class="ng-isolate-scope"><!--Show error messages-->
<!-- ngIf: vm.errors != null && !vm.errors.isEmpty() --></directive-errors>
<script type="text/ng-template" id="spec-select.html"> <label class="control-label">{{specGroup.Name}}</label>
<select id="{{'dropSpec' + specGroup.ID}}" class="form-control" ng-options="spec.KeyID as spec.Name + vm.getRetailPriceLabel(specGroup, spec) for spec in specGroup.Specs" ng-model="specGroup.SelectedID" ng-change="vm.onSpecChange(specGroup);">
<option value="">Select an option</option>
</select>
</script>
<!-- ngRepeat: specGroup in vm.multipleOptionSpecs -->
<!-- ngIf: vm.nametagConfigSpecs.length -->
</product-select-specs>
<!-- Bulk Selection -->
<!-- ngIf: vm.IsBulk -->
<!-- ngIf: !vm.item.DownloadOnly -->
<div ng-if="!vm.item.DownloadOnly" class="ng-scope">
<!-- Colors -->
<!-- ngIf: vm.item.Colors.length -->
<div class="col-sm-12 phs ng-scope" ng-if="vm.item.Colors.length ">
<div class="mbs">
<store-product-variation-selector store-product="vm.item" variations="vm.item.Colors" selected-variation="vm.selectedColor" has-bulk-pricing="vm.hasBulkPricing" on-change="vm.changeSelectedProduct" user="vm.user"
is-replenishment="vm.isReplenishment" class="ng-isolate-scope"><!--DO NOT REMOVE: start using this for error checking-->
<directive-errors errors="vm.errors" class="ng-isolate-scope"><!--Show error messages-->
<!-- ngIf: vm.errors != null && !vm.errors.isEmpty() --></directive-errors>
<!-- ngIf: vm.showSingleVariation() --><span ng-if="vm.showSingleVariation()" class="ng-binding ng-scope">Color: <span ng-init="vm.initSelection()"
class="ng-binding">Black</span></span><!-- end ngIf: vm.showSingleVariation() -->
<!-- ngIf: vm.variations.length > 1 --></store-product-variation-selector>
</div>
</div><!-- end ngIf: vm.item.Colors.length -->
<!--Sizes -->
<!-- ngIf: vm.item.Sizes.length && !vm.IsBulk && !vm.isReplenishment -->
<div class="col-sm-12 phs ng-scope" ng-if="vm.item.Sizes.length && !vm.IsBulk && !vm.isReplenishment">
<div class="mbs">
<store-product-variation-selector store-product="vm.item" variations="vm.item.Sizes" selected-variation="vm.selectedSize" has-bulk-pricing="vm.hasBulkPricing" selected-color="vm.selectedColor" chosen-campaign="vm.chosenCampaign"
price-table="vm.priceTable" on-change="vm.changeSelectedProduct" user="vm.user" is-replenishment="vm.isReplenishment" class="ng-isolate-scope"><!--DO NOT REMOVE: start using this for error checking-->
<directive-errors errors="vm.errors" class="ng-isolate-scope"><!--Show error messages-->
<!-- ngIf: vm.errors != null && !vm.errors.isEmpty() --></directive-errors>
<!-- ngIf: vm.showSingleVariation() --><span ng-if="vm.showSingleVariation()" class="ng-binding ng-scope">Size: <span ng-init="vm.initSelection()" class="ng-binding">NA</span></span><!-- end ngIf: vm.showSingleVariation() -->
<!-- ngIf: vm.variations.length > 1 --></store-product-variation-selector>
</div>
<!-- ngIf: vm.item.SpecSheetSrc -->
</div><!-- end ngIf: vm.item.Sizes.length && !vm.IsBulk && !vm.isReplenishment -->
<!-- ngIf: !vm.item.IsWarehoused && vm.item.IsReplenishment && vm.item.VendorStock != undefined -->
<!-- ngIf: vm.item.RequireBudget -->
<!-- ngIf: !vm.item.Campaign.length && vm.noCampaign && (!vm.store.StorePaysSetupFee && !vm.item.StorePaysSetupFee) -->
<div ng-if="!vm.item.Campaign.length && vm.noCampaign && (!vm.store.StorePaysSetupFee && !vm.item.StorePaysSetupFee)" class="ng-scope">
<!-- ngIf: vm.setupFee && !vm.hidePrice -->
</div><!-- end ngIf: !vm.item.Campaign.length && vm.noCampaign && (!vm.store.StorePaysSetupFee && !vm.item.StorePaysSetupFee) -->
<!-- ngIf: vm.additionalFees.length -->
</div><!-- end ngIf: !vm.item.DownloadOnly -->
</div>
<div class="clear-fix"></div>
<!--Nametag Config-->
<!-- ngIf: vm.item.HasNametagConfig -->
<!--Reorder-->
<!-- ngIf: vm.isReorder -->
<!--Shipping Time-->
<!-- ngIf: !vm.item.Campaign.length && !vm.item.HideShippingTime -->
<div id="timeToShip" ng-if="!vm.item.Campaign.length && !vm.item.HideShippingTime" class="ng-scope">
<!-- ngIf: !vm.item.adjustedRushFees.length -->
<h4 ng-if="!vm.item.adjustedRushFees.length" class="ng-scope">
<!--<i class="namicon namicon-800 namicon-shipping mtm mrm"></i>--><box-icon class="mtm mrm ng-isolate-scope" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z">
</path>
</svg></box-icon>Ships <!-- ngIf: vm.productionTime === 0 -->
<!-- ngIf: vm.productionTime === 1 -->
<!-- ngIf: vm.productionTime > 1 --><span ng-if="vm.productionTime > 1" class="ng-binding ng-scope" style="">in 5 business days</span><!-- end ngIf: vm.productionTime > 1 -->
</h4><!-- end ngIf: !vm.item.adjustedRushFees.length -->
<!-- ngIf: vm.item.adjustedRushFees.length -->
</div><!-- end ngIf: !vm.item.Campaign.length && !vm.item.HideShippingTime -->
<!-- ngIf: vm.item.RequiresApproval && !vm.gift.ID && !vm.item.Campaign.length -->
<!--Stock-->
<h4 class="ng-binding"></h4>
<!--This is redundant...The stock label says this... - CR 4/25/2023-->
<!--<h4 ng-if="vm.item.IsWarehoused && vm.item.Stock <= 0 && vm.stockLabel.toLowerCase() != 'out of stock'">Out of stock</h4>
<h4 ng-if="vm.item.IsWarehoused && vm.user.IsEmployee">{{vm.item.Stock | number}} remaining</h4>-->
<!--Min Qty-->
<!-- ngIf: !vm.item.DownloadOnly -->
<h4 ng-if="!vm.item.DownloadOnly" class="ng-scope"><span class="ng-binding">Minimum Qty: 1</span><!-- ngIf: vm.user.IsAdmin && vm.item.IsCatalogWarehoused --></h4><!-- end ngIf: !vm.item.DownloadOnly -->
<!-- ngIf: vm.item.GroupsQty > 1 -->
<!-- ngIf: !vm.store.Config.HideCountries -->
<div ng-if="!vm.store.Config.HideCountries" class="ng-scope">
<!-- ngIf: !vm.hasUS -->
</div><!-- end ngIf: !vm.store.Config.HideCountries -->
</div>
</div>
<!--Purchase Limit Sec Group Selector-->
<select-purchase-limit-group sec-groups="vm.item.SecurityGroups" on-change="vm.setPurchaseLimit" enforce="vm.enforcePurchaseLimit" class="ng-isolate-scope"><!--DO NOT REMOVE: start using this for error checking-->
<directive-errors errors="vm.errors" class="ng-isolate-scope"><!--Show error messages-->
<!-- ngIf: vm.errors != null && !vm.errors.isEmpty() --></directive-errors>
<!-- ngIf: vm.enforce && vm.secGroups.length > 1 -->
<!-- ngIf: vm.enforce && vm.secGroups.length == 1 --></select-purchase-limit-group>
<downloadable-item-list is-downloadable="vm.item.IsDownloadable" file-list="vm.item.FileDownloadList" store-product-id="vm.item.ID" class="ng-isolate-scope"><!--DO NOT REMOVE: start using this for error checking-->
<directive-errors errors="vm.errors" class="ng-isolate-scope"><!--Show error messages-->
<!-- ngIf: vm.errors != null && !vm.errors.isEmpty() --></directive-errors>
<!-- ngIf: vm.isDownloadable && vm.fileList && vm.fileList.length --></downloadable-item-list>
<!-- ngIf: vm.item.EnableUserInstructions -->
<!-- QTY BUTTON -->
<!-- ngIf: !vm.item.IsWarehoused && (vm.item.EverestID.toLowerCase() == 'stockpromo' || vm.vm.item.EverestID.toLowerCase() == 'stockapparel') && vm.store.StoreVendorID == null -->
<!-- ngIf: vm.item.IsWarehoused || (vm.item.EverestID.toLowerCase() != 'stockpromo' && vm.vm.item.EverestID.toLowerCase() != 'stockapparel') || vm.store.StoreVendorID != null -->
<div ng-if="vm.item.IsWarehoused || (vm.item.EverestID.toLowerCase() != 'stockpromo' && vm.vm.item.EverestID.toLowerCase() != 'stockapparel') || vm.store.StoreVendorID != null" class="ng-scope">
<!-- ngIf: (vm.item.Status == vm.Items.STATUS.ACTIVE.ID || (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && vm.canAddProofItems) || (vm.item.Status == vm.Items.STATUS.PENDING_APPROVAL.ID && vm.canPurchasePending) || (vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && vm.canAddBackorderItems)) && !vm.IsBulk -->
<div id="axoItemQtyAdd"
ng-if="(vm.item.Status == vm.Items.STATUS.ACTIVE.ID || (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && vm.canAddProofItems) || (vm.item.Status == vm.Items.STATUS.PENDING_APPROVAL.ID && vm.canPurchasePending) || (vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && vm.canAddBackorderItems)) && !vm.IsBulk"
ng-class="{'not-allowed': vm.hasBulkPricing}" class="ng-scope">
<style>
input.form-control.input-w-label.input-primary::selection {
background: rgb(100, 100, 100);
}
</style>
<!-- ngIf: (!vm.missingVector || (vm.missingVector && vm.item.IsWarehoused)) && !vm.item.DownloadOnly && !vm.item.IsDownloadable && (vm.item.Status == vm.Items.STATUS.ACTIVE.ID || (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && vm.canAddProofItems) || (vm.item.Status == vm.Items.STATUS.PENDING_APPROVAL.ID && vm.canPurchasePending) || (vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && vm.canAddBackorderItems)) -->
<div class="row ng-scope"
ng-if="(!vm.missingVector || (vm.missingVector && vm.item.IsWarehoused)) && !vm.item.DownloadOnly && !vm.item.IsDownloadable && (vm.item.Status == vm.Items.STATUS.ACTIVE.ID || (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && vm.canAddProofItems) || (vm.item.Status == vm.Items.STATUS.PENDING_APPROVAL.ID && vm.canPurchasePending) || (vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && vm.canAddBackorderItems))">
<!-- ngIf: !vm.isReplenishment && !vm.campaignItem -->
<div ng-if="!vm.isReplenishment && !vm.campaignItem" class="ng-scope">
<!-- ngIf: (!vm.missingVector || (vm.missingVector && vm.item.IsWarehoused)) && !vm.IsBulk && (!vm.item.ForceQtyBreak || vm.item.IsWarehoused) -->
<div class="col-xs-4 pan ng-scope" ng-if="(!vm.missingVector || (vm.missingVector && vm.item.IsWarehoused)) && !vm.IsBulk && (!vm.item.ForceQtyBreak || vm.item.IsWarehoused)">
<input id="boxQty" type="text" positive-integers-and-zero="" select-on-click="" class="form-control input-w-label input-primary ng-pristine ng-untouched ng-valid ng-valid-required" ng-class="{'not-allowed': vm.hasBulkPricing}"
ng-model="vm.item.Qty" ng-blur="vm.updateQty()" required="" ng-disabled="vm.gift != null">
<label alt="Qty" placeholder="Qty"></label>
</div><!-- end ngIf: (!vm.missingVector || (vm.missingVector && vm.item.IsWarehoused)) && !vm.IsBulk && (!vm.item.ForceQtyBreak || vm.item.IsWarehoused) -->
<!-- ngIf: !vm.missingVector && !vm.IsBulk && vm.item.ForceQtyBreak && !vm.item.IsWarehoused -->
<!-- ngIf: (!vm.cartItem || vm.replacingItem) && !vm.IsBulk && !vm.hasNoStock() -->
<div class="col-xs-8 pan ng-scope" ng-if="(!vm.cartItem || vm.replacingItem) && !vm.IsBulk && !vm.hasNoStock()">
<button role="button" tabindex="0" id="addToCart" type="button" ng-click="vm.addToCart(formAddToCart)" class="btn btn-block ng-binding btn-primary" ng-class="{'btn-primary': vm.orderID == null, 'btn-info': vm.orderID != null}"
ng-disabled="vm.hasBulkPricing || (vm.selectedSubitem == null && vm.item.ItemType == vm.ITEM_TYPE.MASTER.ID) || vm.missingGroup() || vm.itemPrice > 999999 || vm.addingToCart"> Add to Cart <spinner is-button="true"
is-loading="vm.addingToCart" class="ng-isolate-scope">
<style>
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.4s infinite ease-in-out;
animation: sk-rotateplane 1.4s infinite ease-in-out;
}
.white-spinner {
background-color: #FFF;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px);
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
<!-- ngIf: vm.isLoading && !vm.isButton && vm.showSpinner -->
<!-- ngIf: vm.isLoading && vm.isButton -->
</spinner>
</button>
</div><!-- end ngIf: (!vm.cartItem || vm.replacingItem) && !vm.IsBulk && !vm.hasNoStock() -->
<!-- ngIf: (!vm.cartItem || vm.replacingItem) && !vm.IsBulk && vm.hasNoStock() -->
<!-- ngIf: (!vm.cartItem || vm.replacingItem) && !vm.IsBulk && !vm.hasNoStock() && vm.backorderItems -->
<!-- ngIf: vm.cartItem && !vm.replacingItem -->
<!-- ngIf: vm.item.RequestAQuote && !vm.isReorder -->
<!-- ngIf: vm.item.RequestAQuote && vm.isReorder -->
</div><!-- end ngIf: !vm.isReplenishment && !vm.campaignItem -->
<!--Samples-->
<!-- ngIf: !vm.item.IsWarehoused -->
<div ng-if="!vm.item.IsWarehoused" class="col-xs-12 ng-scope" style="margin-top: 40px">
</div><!-- end ngIf: !vm.item.IsWarehoused -->
</div>
<!-- end ngIf: (!vm.missingVector || (vm.missingVector && vm.item.IsWarehoused)) && !vm.item.DownloadOnly && !vm.item.IsDownloadable && (vm.item.Status == vm.Items.STATUS.ACTIVE.ID || (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && vm.canAddProofItems) || (vm.item.Status == vm.Items.STATUS.PENDING_APPROVAL.ID && vm.canPurchasePending) || (vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && vm.canAddBackorderItems)) -->
<!-- ngIf: vm.isReplenishment && !vm.IsBulk -->
<!-- ngIf: vm.item.CatalogProductStatus != vm.Items.STATUS.DISCONTINUED.ID -->
<div ng-if="vm.item.CatalogProductStatus != vm.Items.STATUS.DISCONTINUED.ID" class="ng-scope">
<!-- ngIf: (vm.user.IsEmployee || vm.user.IsAdmin) && !vm.hideAddToInventory && vm.canReplenish -->
</div><!-- end ngIf: vm.item.CatalogProductStatus != vm.Items.STATUS.DISCONTINUED.ID -->
</div>
<!-- end ngIf: (vm.item.Status == vm.Items.STATUS.ACTIVE.ID || (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && vm.canAddProofItems) || (vm.item.Status == vm.Items.STATUS.PENDING_APPROVAL.ID && vm.canPurchasePending) || (vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && vm.canAddBackorderItems)) && !vm.IsBulk -->
<!-- ngIf: !vm.IsBulk && vm.missingVector -->
<!-- CART BUTTON -->
<!-- ngIf: (vm.PROOF_STATUSES.indexOf(vm.item.Status) != -1 && !vm.canAddProofItems) && vm.item.Status != vm.Items.STATUS.ACTIVE.ID && !vm.campaignItem && !vm.missingVector -->
<!--<div id="axoItemQtyAdd" ng-if="vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && !vm.missingVector">
<div class="row">
<h4 ng-if="vm.item.BackOrderDate && vm.validBackOrderDate()">Available On: {{vm.item.BackOrderDate | date}}</h4>
<div class="pan">
<button id="addToCart" type="button" class="btn btn-block btn-info" confirm="Are you sure you would like to pre-order this item and wait until {{vm.item.BackOrderDate | date}}?" ng-click="vm.addToCart(formAddToCart)">
Pre-Order Now
</button>
</div>
</div>
</div>-->
<!-- ngIf: vm.campaignItem && !vm.missingVector -->
</div><!-- end ngIf: vm.item.IsWarehoused || (vm.item.EverestID.toLowerCase() != 'stockpromo' && vm.vm.item.EverestID.toLowerCase() != 'stockapparel') || vm.store.StoreVendorID != null -->
<!-- BULK ORDERS CONTENT -->
<!-- ngIf: vm.item.Sizes && vm.item.Sizes.length && vm.IsBulk -->
<!-- ngIf: (vm.item.Status != vm.Items.STATUS.ACTIVE.ID && !vm.campaignItem && vm.item.Status == vm.Items.STATUS.BACK_ORDER.ID && !vm.canAddBackorderItems) || vm.item.Status == vm.Items.STATUS.DISCONTINUED.ID || vm.item.Status == vm.Items.STATUS.COMING_SOON.ID && !vm.missingVector -->
<!-- ADMIN EDIT -->
<div id="axoItemBulkEdit">
<div class="row mhn">
<div class="clearfix"></div>
<div class="col-sm-12 phs mbs">
</div>
<!-- ngIf: vm.user.ID && vm.item.ProductID && vm.item.OwnerUserID && vm.item.OwnerUserID == vm.user.ID && vm.item.ID -->
</div>
</div>
</div>
<!--ADD TO WISHLIST-->
<!-- ngIf: false -->
<!-- SOCIAL MEDIA SHARING -->
<item-social-buttons item="vm.item" class="ng-isolate-scope">
<style>
.enlarge {
transform: scale(1.5, 1.5);
/* Equal to scaleX(2) scaleY(0.5) */
transform-origin: center;
}
#axoItemSocialShare a:focus-visible {
transform: scale(1.5)
}
</style>
<!--DO NOT REMOVE: start using this for error checking-->
<directive-errors errors="vm.errors" class="ng-isolate-scope"><!--Show error messages-->
<!-- ngIf: vm.errors != null && !vm.errors.isEmpty() --></directive-errors>
<!-- ngIf: !vm.store.Config.DisableSocialButtons && vm.store.Config.Type !== 1 -->
<div class="max-450 mbm ng-scope" id="axoItemSocialShare" ng-if="!vm.store.Config.DisableSocialButtons && vm.store.Config.Type !== 1">
<div class="row mhn ">
<div class="col-sm-12 phs mbs">
<a id="facebook" data-href="https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler" tabindex="-1" socialshare="" socialshare-provider="facebook" socialshare-type="sharer" socialshare-url="https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler" socialshare-text="30 oz Straw Tumbler" socialshare-media="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/13967/item/42965~d3581645-c7f7-4f72-8be2-b71fc3d07f16~1719242871039.38-web.png" socialshare-popup-height="400" socialshare-popup-width="600" socialshare-trigger="keypress click">
<facebook-icon class="fa social-icon ng-isolate-scope" tabindex="0" aria-label="Share on Facebook" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" class="enlarge" viewBox="0 0 600 600" fill="currentColor"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M400.6,110.66v61.09c-1.76,0-3.43,0-5.08,0-13.64.21-27.32-.16-40.9.8-14.62,1-23.23,8.23-24.15,22.16-1.25,18.89-.31,37.9-.31,57.27h64.47c-3,22.94-5.95,45.44-8.93,68.23H329.83c-.12,1.36-.3,2.43-.3,3.5q0,82.48,0,165c0,1.11.22,2.21.33,3.32H257.4c.07-1.11.2-2.23.21-3.35q0-82.27,0-164.55v-3.68H199.4v-68.3h58.21c0-1.79,0-3.23,0-4.66.18-20.11-.4-40.26.74-60.33,1.33-23.6,9.85-44.63,29.36-60.46,13.1-10.62,28.62-15.85,45.48-17.91,1.26-.16,2.5-.5,3.75-.76h29.93c6.92.51,13.84,1,20.75,1.52C391.92,109.85,396.2,110.27,400.6,110.66Z"></path></g></g></svg></facebook-icon>
</a>
<a id="pinterest" socialshare="" tabindex="-1" socialshare-provider="pinterest" socialshare-url="https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler" socialshare-text="30 oz Straw Tumbler" socialshare-media="https://s3-us-west-2.amazonaws.com/axomo/mm/axomo/13967/item/42965~d3581645-c7f7-4f72-8be2-b71fc3d07f16~1719242871039.38-web.png" socialshare-trigger="keypress click">
<pinterest-icon class="fa social-icon ng-isolate-scope" tabindex="0" aria-label="Share on Pinterest" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" class="enlarge" viewBox="0 0 600 600" fill="currentColor"><g id="Layer_2" data-name="Layer 2"><path d="M308.64,115.92C208.17,115.92,157.5,188,157.5,248c0,36.37,13.77,68.72,43.3,80.77,4.84,2,9.18.07,10.59-5.29,1-3.69,3.29-13.06,4.32-17,1.41-5.3.86-7.15-3.05-11.79-8.51-10-14-23-14-41.46,0-53.44,40-101.28,104.12-101.28,56.79,0,88,34.7,88,81,0,61-27,112.44-67,112.44-22.13,0-38.68-18.28-33.38-40.73,6.35-26.79,18.66-55.69,18.66-75.05,0-17.3-9.29-31.74-28.51-31.74-22.62,0-40.79,23.4-40.79,54.74,0,20,6.75,33.46,6.75,33.46s-23.14,98.06-27.2,115.23c-8.08,34.21-1.22,76.12-.63,80.35a2.82,2.82,0,0,0,5,1.23c2.07-2.73,29-36,38.17-69.21,2.6-9.4,14.87-58.12,14.87-58.12,7.35,14,28.83,26.34,51.67,26.34,68,0,114.09-62,114.09-144.91C442.51,174.34,389.38,115.92,308.64,115.92Z"></path></g></svg></pinterest-icon>
</a>
<a id="twitter" socialshare="" tabindex="-1" aria-label="Share on Twitter" socialshare-provider="twitter" socialshare-url="https://americanpubliclife.axomo.com/product/2-30-oz-straw-tumbler" socialshare-text="30 oz Straw Tumbler" socialshare-trigger="keypress click">
<twitter-icon class="fa social-icon ng-isolate-scope" tabindex="0" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" class="enlarge" viewBox="0 0 600 600" fill="currentColor"><g id="Layer_2" data-name="Layer 2"><path d="M503,198.55a153,153,0,0,1-43.44,11.95,75.85,75.85,0,0,0,33.28-41.87,150.12,150.12,0,0,1-48,18.35A75.62,75.62,0,0,0,313.92,238.7,74,74,0,0,0,315.87,256a214.38,214.38,0,0,1-155.94-79.14,75.86,75.86,0,0,0,23.44,101.09,73.86,73.86,0,0,1-34.3-9.45v.94a75.72,75.72,0,0,0,60.71,74.22,76.55,76.55,0,0,1-19.93,2.65,72,72,0,0,1-14.22-1.4,75.76,75.76,0,0,0,70.71,52.57,151.63,151.63,0,0,1-94,32.43,153.82,153.82,0,0,1-18-1.1A211.84,211.84,0,0,0,250.17,463c139.21,0,215.31-115.39,215.31-215.47,0-3.28-.08-6.56-.24-9.76A155.49,155.49,0,0,0,503,198.55Z"></path></g></svg></twitter-icon>
</a>
<a id="copyLink" ng-click="vm.copyLink()" ng-keypress="vm.copyLink()" tabindex="-1" uib-tooltip="Click me to copy link to clipboard" aria-label="Copy">
<copy-link-icon class="fa social-icon ng-isolate-scope" tabindex="0" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" class="enlarge" viewBox="0 0 600 600" fill="currentColor"><defs><style>.cls-1{fill:none;stroke:#0096ff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:35px;}</style></defs><path class="cls-1" d="M278.11,302.08A75.42,75.42,0,0,0,383.69,317.3a73.21,73.21,0,0,0,8.16-7.07L437.11,265A75.43,75.43,0,0,0,330.46,158.32l-25.95,25.8"></path><path class="cls-1" d="M338.45,271.91a75.41,75.41,0,0,0-113.74-8.14L179.46,309A75.43,75.43,0,0,0,286.11,415.68l25.79-25.8"></path></svg></copy-link-icon>
</a>
</div>
</div>
</div><!-- end ngIf: !vm.store.Config.DisableSocialButtons && vm.store.Config.Type !== 1 -->
</item-social-buttons>
<!--Campaign Stuff-->
<!-- ngIf: vm.item.Campaign && vm.item.Campaign.length == 1 && !vm.gift -->
<!-- ngIf: !vm.cartInfo.CampaignID -->
<div ng-if="!vm.cartInfo.CampaignID" class="ng-scope">
<!-- ngIf: vm.chosenCampaign && vm.item.AvailableOutsideCampaign && vm.chosenCampaign.CanOptOut -->
</div><!-- end ngIf: !vm.cartInfo.CampaignID -->
<!--Item Details-->
<div id="axoItemDetails" class="row">
<div class="col-sm-8">
<div class="visible-xs">
<store-product-details store-product="vm.item" use-new-view="vm.useNewView" class="ng-isolate-scope"><!-- ngIf: vm.storeProduct.DetailedDescription --><uib-accordion ng-if="vm.storeProduct.DetailedDescription" class="ng-scope">
<div role="tablist" class="panel-group" ng-transclude="">
<div uib-accordion-group="" is-open="vm.openDetails1" ng-click="vm.toggle(vm.openDetails1)" class="ng-scope ng-isolate-scope panel panel-open">
<div role="tab" id="accordiongroup-127-4951-tab" aria-selected="true" class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="" aria-expanded="true" aria-controls="accordiongroup-127-4951-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding"><span class="ng-scope">
Product Details </span><!--<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': vm.openDetails1, 'glyphicon-chevron-right': !vm.openDetails1}"></i>-->
<!-- ngIf: vm.openDetails1 --><chevron-down-icon class="pull-right ng-scope ng-isolate-scope" ng-if="vm.openDetails1" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg></chevron-down-icon><!-- end ngIf: vm.openDetails1 -->
<!-- ngIf: !vm.openDetails1 -->
</span></a>
</h4>
</div>
<div id="accordiongroup-127-4951-panel" aria-labelledby="accordiongroup-127-4951-tab" aria-hidden="false" role="tabpanel" class="panel-collapse collapse in" uib-collapse="!isOpen" aria-expanded="true">
<div class="panel-body" ng-transclude="">
<uib-accordion-heading class="ng-scope"></uib-accordion-heading>
<div ng-bind-html="vm.storeProduct.DetailedDescription" class="ng-binding ng-scope">
<ul>
<li>Non-slip silicone base</li>
<li>Spill resistant lid</li>
<li>Shatter, taste, & odor resistant straw</li>
<li>Double-wall 18/8 stainless steel</li>
<li>Durable powder coat</li>
<li>BPA free</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</uib-accordion><!-- end ngIf: vm.storeProduct.DetailedDescription -->
<!-- ngIf: !vm.store.Config.HideDecorationMethods --><uib-accordion ng-if="!vm.store.Config.HideDecorationMethods" class="ng-scope">
<div role="tablist" class="panel-group" ng-transclude="">
<!-- ngIf: vm.storeProduct.Decorations.length || vm.storeProduct.Setup.Locations.length -->
<div uib-accordion-group="" is-open="vm.openDecoration" ng-click="vm.toggle(vm.openDecoration)" ng-if="vm.storeProduct.Decorations.length || vm.storeProduct.Setup.Locations.length" class="ng-scope ng-isolate-scope panel">
<div role="tab" id="accordiongroup-134-8109-tab" aria-selected="" class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="" aria-expanded="" aria-controls="accordiongroup-134-8109-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding"><span class="ng-scope">
Decoration Method </span><!--<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': vm.openDecoration, 'glyphicon-chevron-right': !vm.openDecoration}"></i>-->
<!-- ngIf: vm.openDecoration -->
<!-- ngIf: !vm.openDecoration --><chevron-right-icon class="pull-right ng-scope ng-isolate-scope" ng-if="!vm.openDecoration" style="position: relative; top: 1.5px;"><svg style="max-width: 1em; min-width: 1em" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></svg></chevron-right-icon><!-- end ngIf: !vm.openDecoration -->
</span></a>
</h4>
</div>
<div id="accordiongroup-134-8109-panel" aria-labelledby="accordiongroup-134-8109-tab" aria-hidden="true" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen" aria-expanded="false" style="height: 0px;">
<div class="panel-body" ng-transclude="">
<uib-accordion-heading class="ng-scope"></uib-accordion-heading>
<!-- ngRepeat: location in vm.storeProduct.Setup.Locations -->
<!-- ngRepeat: location in vm.storeProduct.Decorations --><!-- ngIf: vm.storeProduct.Decorations.length > 0 && vm.useNewView --><span ng-if="vm.storeProduct.Decorations.length > 0 && vm.useNewView"
ng-repeat="location in vm.storeProduct.Decorations" class="ng-binding ng-scope"> Front - Laser Engraved
<!--<i uib-tooltip-html="'<img src={{location.Logo.Link}} width=100 ></i>'" class="tooltip-icon fa fa-question-circle mlm"></i>-->
<br>
</span><!-- end ngIf: vm.storeProduct.Decorations.length > 0 && vm.useNewView --><!-- end ngRepeat: location in vm.storeProduct.Decorations -->
</div>
</div>
</div><!-- end ngIf: vm.storeProduct.Decorations.length || vm.storeProduct.Setup.Locations.length -->
</div>
</uib-accordion><!-- end ngIf: !vm.store.Config.HideDecorationMethods -->
<!-- ngIf: vm.singleOptionSpecs.length -->
<!-- ngIf: vm.storeProduct.SpecialInstructions -->
<div class="clear-fix"></div>
</store-product-details>
</div>
<!-- ngIf: vm.item.DetailedDescription2 -->
<div ng-bind-html="vm.item.DetailedDescription2" ng-if="vm.item.DetailedDescription2" style="word-break:break-word" class="ng-binding ng-scope">
<h4>Product Description:</h4>
<p>The CamelBak® Straw Tumbler 30oz is the perfect cup to house your favorite summer beverages, whether out on a cross-country road trip or a full day on the water. You can always count on the Horizon Straw Tumbler to keep your beverages
frosty cold, plus the straw lid adds splash-free convenience and helps prevent the use of wasteful single-use straws.<br></p>
</div><!-- end ngIf: vm.item.DetailedDescription2 -->
</div>
</div>
<!--Product Price Table-->
<!-- Added ng-class instead of ng-if due to the directive not even getting the pricetable...-->
<!-- ngIf: !vm.store.Config.PriceTableOnTop && !vm.store.Config.HideItemPriceTables && !vm.hidePrice && !vm.item.IsDownloadable && !vm.isReplenishment -->
<!-- ngIf: vm.isReplenishment || ((vm.useNewView && !vm.loadingViews) && (!vm.store.Config.PriceTableOnTop && !vm.store.Config.HideItemPriceTables && !vm.hidePrice) && !vm.item.DownloadOnly) -->
</div>
</div>
</form><form class="dropdown-menu pal pts submit-dropdownn ng-pristine ng-valid" data-hs-cf-bound="true">
<div aria-describedby="secContactInfo">
<div id="lblContactFull" aria-hidden="true" class="ng-binding"> AXOMO Support </div>
<div id="lblContactPhone" aria-hidden="true" class="ng-binding"> 8015156129 </div>
<div id="lblContactEmail" aria-hidden="true" class="ng-binding"> support@axomo.com </div>
<hr>
<div id="lblIntlContact"> International Support: support.international@axomo.com </div>
</div>
<div id="secContactInfo" style="display:none" class="ng-binding"> information Name: AXOMO Support Phone Number: 8015156129 Email: support@axomo.com International Support: support.international@axomo.com </div>
</form>POST //translate.googleapis.com/translate_voting?client=te
<form id="goog-gt-votingForm" action="//translate.googleapis.com/translate_voting?client=te" method="post" target="votingFrame" class="VIpgJd-yAWNEb-hvhgNd-aXYTce" data-hs-cf-bound="true"><input type="text" name="sl"
id="goog-gt-votingInputSrcLang"><input type="text" name="tl" id="goog-gt-votingInputTrgLang"><input type="text" name="query" id="goog-gt-votingInputSrcText"><input type="text" name="gtrans" id="goog-gt-votingInputTrgText"><input type="text"
name="vote" id="goog-gt-votingInputVote"></form>Text Content
We use cookies to improve your experience on this website. For more information,
please see our Privacy Policy
Accept Cookies View Privacy Policy
Skip to main content
Toggle navigation
* Products
* Apparel
* Home and Office
* Tech
* Kids
* Sustainable Items
* Hats and Accessories
* Outerwear
* Bags and Coolers
* Suggest an Item
* New Products
* Search
* Login
* Redeem Gift
*
* * User Profile ()
* Insights
* Order History
* Item Order History
* My Quotes
* Track Orders
* My Budgets
* My Proofs
* Redeem Gift
* My Stores
*
* Refer a Friend
* My Referrals
*
*
*
*
* Logout
* Cart
*
1. Home
2. Sustainable Items
3. 30 oz Straw Tumbler
BLACK
PRODUCT DETAILS
* Non-slip silicone base
* Spill resistant lid
* Shatter, taste, & odor resistant straw
* Double-wall 18/8 stainless steel
* Durable powder coat
* BPA free
DECORATION METHOD
Front - Laser Engraved
$52.36
30 OZ STRAW TUMBLER
CAMELBAK
Sustainable Items
1627-39ST
Color: Black
Size: NA
SHIPS IN 5 BUSINESS DAYS
MINIMUM QTY: 1
Add to Cart
PRODUCT DETAILS
* Non-slip silicone base
* Spill resistant lid
* Shatter, taste, & odor resistant straw
* Double-wall 18/8 stainless steel
* Durable powder coat
* BPA free
DECORATION METHOD
Front - Laser Engraved
PRODUCT DESCRIPTION:
The CamelBak® Straw Tumbler 30oz is the perfect cup to house your favorite
summer beverages, whether out on a cross-country road trip or a full day on the
water. You can always count on the Horizon Straw Tumbler to keep your beverages
frosty cold, plus the straw lid adds splash-free convenience and helps prevent
the use of wasteful single-use straws.
CUSTOMER REVIEWS
Share your thoughts with other customers
Write the First Review
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
©AXOMO 2024 | Privacy | Terms | Accessibility | Help |
Contact
AXOMO Support
8015156129
support@axomo.com
--------------------------------------------------------------------------------
International Support: support.international@axomo.com
information Name: AXOMO Support Phone Number: 8015156129 Email:
support@axomo.com International Support: support.international@axomo.com
Powered by
Powered by Translate
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word word
word word word word word word word word
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
Original text
Rate this translation
Your feedback will be used to help improve Google Translate