@nanoporetech-digital/components 5.10.0 → 5.11.0

package/dist/collection/components/select/select.css

@@ -69,10 +69,7 @@ label.visually-hide,
 
 .form-ctrl__float-label {
   padding-block: 0;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline: var(--padding-start) 0;
   color: var(--label-color);
   position: absolute;
   font-size: 1.15em;
@@ -109,8 +106,7 @@ label.visually-hide,
 .form-ctrl__label {
   color: var(--label-color);
   font-size: var(--label-font-size);
-  -webkit-padding-after: var(--padding-bottom);
-          padding-block-end: var(--padding-bottom);
+  padding-block-end: var(--padding-bottom);
   line-height: 1;
   display: flex;
 }
@@ -122,10 +118,7 @@ label.visually-hide,
 }
 .form-ctrl__label .form-ctrl__label-placeholder {
   margin-block: unset;
-  -webkit-margin-end: 5px;
-          margin-inline-end: 5px;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline: 0 5px;
   opacity: 0;
   -webkit-appearance: none;
           appearance: none;
@@ -134,10 +127,7 @@ label.visually-hide,
 }
 .form-ctrl__label .form-ctrl__label-charcount {
   margin-block: unset;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  margin-inline: auto 0;
   font-size: 0.9em;
   opacity: 0.5;
 }
@@ -230,33 +220,27 @@ label.visually-hide,
   border: var(--input-border-style);
   border-width: var(--input-border-width);
   font-size: var(--input-font-size);
-  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
-          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :host(.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--focus);
   border: var(--input-border-style--focus);
   border-width: var(--input-border-width);
-  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
-          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :host(.is-invalid:not([disabled])) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid);
   border-width: var(--input-border-width);
-  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-  -webkit-padding-start: 0 !important;
-          padding-inline-start: 0 !important;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 :host(.is-invalid.has-focus:not([disabled])) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid-focus);
   border-width: var(--input-border-width);
-  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-  -webkit-padding-start: 0 !important;
-          padding-inline-start: 0 !important;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 
 .form-ctrl__input-wrap {
@@ -296,10 +280,7 @@ label.visually-hide,
 .form-ctrl__slot-value-end * {
   --nano-icon-size: 1.4em;
   padding-inline: unset;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
+  padding-inline: var(--padding-start) var(--padding-end);
   font-size: 1em;
   align-items: center;
   display: flex;
@@ -435,7 +416,7 @@ label.visually-hide,
    * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.
    */
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   padding: 0 !important;
   font-family: var(--nano-font-family, inherit);
   display: block;
@@ -486,9 +467,9 @@ select {
   color: var(--input-text-color);
   display: inline-block;
   flex: 1;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
   border: 0;
   outline: none;
   background: transparent;
@@ -505,9 +486,8 @@ select {
 }
 .has-float-label .select__native-input {
   line-height: 2.1em;
-  min-height: 2.1em;
-  -webkit-padding-before: 1.4em;
-          padding-block-start: 1.4em;
+  min-block-size: 2.1em;
+  padding-block-start: 1.4em;
 }
 .select__native-input::selection {
   background: transparent;
@@ -522,7 +502,7 @@ select {
   font-weight: var(--placeholder-font-weight);
   opacity: var(--placeholder-opacity);
   line-height: inherit;
-  min-height: initial;
+  min-block-size: initial;
 }
 .select__native-input::-moz-placeholder {
   line-height: 2.8em;
@@ -554,8 +534,7 @@ select {
   line-height: 1.5em;
 }
 .has-float-label.textarea .select__native-input {
-  -webkit-padding-before: 1.8em;
-          padding-block-start: 1.8em;
+  padding-block-start: 1.8em;
 }
 :host(.masked) .select__native-input {
   opacity: 0;
@@ -582,7 +561,7 @@ select {
   border-radius: var(--input-border-radius);
   pointer-events: none;
   line-height: 2.5em;
-  min-height: 2.5em;
+  min-block-size: 2.5em;
 }
 
 .select__multi-wrap {
@@ -595,8 +574,7 @@ select {
   align-items: flex-start;
 }
 :host(.has-float-label) .select__multi-wrap {
-  -webkit-padding-before: 1em;
-          padding-block-start: 1em;
+  padding-block-start: 1em;
 }
 .select__multi-input {
   font-family: inherit;
@@ -613,9 +591,9 @@ select {
   color: inherit;
   padding-inline: var(--padding-start) var(--padding-end);
   padding-block: var(--padding-bottom) 0;
-  min-width: 50px;
-  width: 100%;
-  max-height: 100%;
+  min-inline-size: 50px;
+  inline-size: 100%;
+  max-block-size: 100%;
   -webkit-appearance: none;
           appearance: none;
   border: 0;
@@ -626,7 +604,7 @@ select {
   position: relative;
   box-sizing: border-box;
   line-height: calc(2.5em - var(--padding-bottom));
-  height: calc(2.5em - var(--padding-bottom));
+  block-size: calc(2.5em - var(--padding-bottom));
 }
 .select__multi-input:last-child {
   flex: 1;
@@ -639,23 +617,22 @@ select {
   border: 1px solid;
   border-color: var(--multi-input-value-border);
   padding: 0.35em 0.5em;
-  max-width: 100%;
+  max-inline-size: 100%;
   display: flex;
   align-items: center;
   font-size: var(--input-font-size);
   letter-spacing: 1px;
-  max-height: calc(2.5em - 8px);
+  max-block-size: calc(2.5em - 8px);
 }
 .select__multi-value span {
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
 }
 .select__multi-value-remove {
   background-position: center;
-  -webkit-padding-start: 0.5em;
-          padding-inline-start: 0.5em;
+  padding-inline-start: 0.5em;
   margin: 0;
   color: inherit;
   border: 0;
@@ -674,7 +651,7 @@ select {
 }
 
 .form-ctrl__float-label {
-  width: calc(100% - (1em + var(--padding-start) * 2));
+  inline-size: calc(100% - (1em + var(--padding-start) * 2));
 }
 :host(.has-focus.has-multiple) .form-ctrl__float-label {
   transform: translateY(-110%);

package/dist/collection/components/slides/lib/js/animate.js

@@ -1,72 +1,63 @@
-import utils from 'fizzy-ui-utils';
-
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { utils } from './utils/utils';
 const proto = {};
-
 proto.startAnimation = function () {
   if (this.isAnimating) {
     return;
   }
-
   this.isAnimating = true;
   this.restingFrames = 0;
   this.animate();
 };
-
 proto.animate = function () {
   this.applyDragForce();
   this.applySelectedAttraction();
-
-  var previousX = this.x;
-
+  const previousX = this.x;
   this.integratePhysics();
   this.positionSlider();
   this.settle(previousX);
   // animate next frame
   if (this.isAnimating) {
-    var _this = this;
+    const _this = this;
     requestAnimationFrame(function animateFrame() {
       _this.animate();
     });
   }
 };
-
 proto.positionSlider = function () {
-  var x = this.x;
+  let x = this.x;
   // wrap position around
   if (this.options.wrapAround && this.cells.length > 1) {
     x = utils.modulo(x, this.slideableWidth);
     x = x - this.slideableWidth;
     this.shiftWrapCells(x);
   }
-
   this.setTranslateX(x, this.isAnimating);
   this.dispatchScrollEvent();
 };
-
-proto.setTranslateX = function (x, is3d) {
+proto.setTranslateX = function (x, _is3d) {
   x += this.cursorPosition;
   // reverse if right-to-left and using transform
   x = this.options.rightToLeft ? -x : x;
-  var translateX = this.getPositionValue(x);
+  const translateX = this.getPositionValue(x);
   // use 3D tranforms for hardware acceleration on iOS
   // but use 2D when settled, for better font-rendering
   // this.slider.style.transform = is3d
   //   ? 'translate3d(' + translateX + ',0,0)'
   //   : 'translateX(' + translateX + ')';
-
   this.slider.style.transform = 'translate3d(' + translateX + ',0,0)';
 };
-
 proto.dispatchScrollEvent = function () {
-  var firstSlide = this.slides[0];
+  const firstSlide = this.slides[0];
   if (!firstSlide) {
     return;
   }
-  var positionX = -this.x - firstSlide.target;
-  var progress = positionX / this.slidesWidth;
+  const positionX = -this.x - firstSlide.target;
+  const progress = positionX / this.slidesWidth;
   this.dispatchEvent('scroll', null, [progress, positionX]);
 };
-
 proto.positionSliderAtSelected = function () {
   if (!this.cells.length) {
     return;
@@ -75,23 +66,20 @@ proto.positionSliderAtSelected = function () {
   this.velocity = 0; // stop wobble
   this.positionSlider();
 };
-
 proto.getPositionValue = function (position) {
   if (this.options.percentPosition) {
     // percent position, round to 2 digits, like 12.34%
     return Math.round((position / this.size.innerWidth) * 10000) * 0.01 + '%';
-  } else {
+  }
+  else {
     // pixel positioning
     return Math.round(position) + 'px';
   }
 };
-
 proto.settle = function (previousX) {
   // keep track of frames where x hasn't moved
-  if (
-    !this.isPointerDown &&
-    Math.round(this.x * 100) == Math.round(previousX * 100)
-  ) {
+  if (!this.isPointerDown &&
+    Math.round(this.x * 100) == Math.round(previousX * 100)) {
     this.restingFrames++;
   }
   // stop animating if resting for 3 or more frames
@@ -103,76 +91,63 @@ proto.settle = function (previousX) {
     this.dispatchEvent('settle', null, [this.selectedIndex]);
   }
 };
-
 proto.shiftWrapCells = function (x) {
   // shift before cells
-  var beforeGap = this.cursorPosition + x;
+  const beforeGap = this.cursorPosition + x;
   this._shiftCells(this.beforeShiftCells, beforeGap, -1);
   // shift after cells
-  var afterGap =
-    this.size.innerWidth - (x + this.slideableWidth + this.cursorPosition);
+  const afterGap = this.size.innerWidth - (x + this.slideableWidth + this.cursorPosition);
   this._shiftCells(this.afterShiftCells, afterGap, 1);
 };
-
 proto._shiftCells = function (cells, gap, shift) {
-  for (var i = 0; i < cells.length; i++) {
-    var cell = cells[i];
-    var cellShift = gap > 0 ? shift : 0;
+  for (let i = 0; i < cells.length; i++) {
+    const cell = cells[i];
+    const cellShift = gap > 0 ? shift : 0;
     cell.wrapShift(cellShift);
     gap -= cell.size.outerWidth;
   }
 };
-
 proto._unshiftCells = function (cells) {
   if (!cells || !cells.length) {
     return;
   }
-  for (var i = 0; i < cells.length; i++) {
+  for (let i = 0; i < cells.length; i++) {
     cells[i].wrapShift(0);
   }
 };
-
 // -------------------------- physics -------------------------- //
-
 proto.integratePhysics = function () {
   this.x += this.velocity;
   this.velocity *= this.getFrictionFactor();
 };
-
 proto.applyForce = function (force) {
   this.velocity += force;
 };
-
 proto.getFrictionFactor = function () {
-  return (
-    1 - this.options[this.isFreeScrolling ? 'freeScrollFriction' : 'friction']
-  );
+  return (1 - this.options[this.isFreeScrolling ? 'freeScrollFriction' : 'friction']);
 };
-
 proto.getRestingPosition = function () {
   // my thanks to Steven Wittens, who simplified this math greatly
   return this.x + this.velocity / (1 - this.getFrictionFactor());
 };
-
 proto.applyDragForce = function () {
   if (!this.isDraggable || !this.isPointerDown) {
     return;
   }
   // change the position to drag position by applying force
-  var dragVelocity = this.dragX - this.x;
-  var dragForce = dragVelocity - this.velocity;
+  const dragVelocity = this.dragX - this.x;
+  const dragForce = dragVelocity - this.velocity;
   this.applyForce(dragForce);
 };
-
 proto.applySelectedAttraction = function () {
   // do not attract if pointer down or no slides
-  var dragDown = this.isDraggable && this.isPointerDown;
+  const dragDown = this.isDraggable && this.isPointerDown;
   if (dragDown || this.isFreeScrolling || !this.slides.length) {
     return;
   }
-  var distance = this.selectedSlide.target * -1 - this.x;
-  var force = distance * this.options.selectedAttraction;
+  const distance = this.selectedSlide.target * -1 - this.x;
+  const force = distance * this.options.selectedAttraction;
   this.applyForce(force);
 };
-
 export default proto;
+//# sourceMappingURL=animate.js.map

package/dist/collection/components/slides/lib/js/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sourceRoot":"","sources":["../../../../../src/components/slides/lib/js/animate.ts"],"names":[],"mappings":"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","sourcesContent":["import { utils } from './utils/utils';\n\nconst proto: any = {};\n\nproto.startAnimation = function () {\n  if (this.isAnimating) {\n    return;\n  }\n\n  this.isAnimating = true;\n  this.restingFrames = 0;\n  this.animate();\n};\n\nproto.animate = function () {\n  this.applyDragForce();\n  this.applySelectedAttraction();\n\n  const previousX = this.x;\n\n  this.integratePhysics();\n  this.positionSlider();\n  this.settle(previousX);\n  // animate next frame\n  if (this.isAnimating) {\n    const _this = this;\n    requestAnimationFrame(function animateFrame() {\n      _this.animate();\n    });\n  }\n};\n\nproto.positionSlider = function () {\n  let x = this.x;\n  // wrap position around\n  if (this.options.wrapAround && this.cells.length > 1) {\n    x = utils.modulo(x, this.slideableWidth);\n    x = x - this.slideableWidth;\n    this.shiftWrapCells(x);\n  }\n\n  this.setTranslateX(x, this.isAnimating);\n  this.dispatchScrollEvent();\n};\n\nproto.setTranslateX = function (x, _is3d) {\n  x += this.cursorPosition;\n  // reverse if right-to-left and using transform\n  x = this.options.rightToLeft ? -x : x;\n  const translateX = this.getPositionValue(x);\n  // use 3D tranforms for hardware acceleration on iOS\n  // but use 2D when settled, for better font-rendering\n  // this.slider.style.transform = is3d\n  //   ? 'translate3d(' + translateX + ',0,0)'\n  //   : 'translateX(' + translateX + ')';\n\n  this.slider.style.transform = 'translate3d(' + translateX + ',0,0)';\n};\n\nproto.dispatchScrollEvent = function () {\n  const firstSlide = this.slides[0];\n  if (!firstSlide) {\n    return;\n  }\n  const positionX = -this.x - firstSlide.target;\n  const progress = positionX / this.slidesWidth;\n  this.dispatchEvent('scroll', null, [progress, positionX]);\n};\n\nproto.positionSliderAtSelected = function () {\n  if (!this.cells.length) {\n    return;\n  }\n  this.x = -this.selectedSlide.target;\n  this.velocity = 0; // stop wobble\n  this.positionSlider();\n};\n\nproto.getPositionValue = function (position) {\n  if (this.options.percentPosition) {\n    // percent position, round to 2 digits, like 12.34%\n    return Math.round((position / this.size.innerWidth) * 10000) * 0.01 + '%';\n  } else {\n    // pixel positioning\n    return Math.round(position) + 'px';\n  }\n};\n\nproto.settle = function (previousX) {\n  // keep track of frames where x hasn't moved\n  if (\n    !this.isPointerDown &&\n    Math.round(this.x * 100) == Math.round(previousX * 100)\n  ) {\n    this.restingFrames++;\n  }\n  // stop animating if resting for 3 or more frames\n  if (this.restingFrames > 2) {\n    this.isAnimating = false;\n    delete this.isFreeScrolling;\n    // render position with translateX when settled\n    this.positionSlider();\n    this.dispatchEvent('settle', null, [this.selectedIndex]);\n  }\n};\n\nproto.shiftWrapCells = function (x) {\n  // shift before cells\n  const beforeGap = this.cursorPosition + x;\n  this._shiftCells(this.beforeShiftCells, beforeGap, -1);\n  // shift after cells\n  const afterGap =\n    this.size.innerWidth - (x + this.slideableWidth + this.cursorPosition);\n  this._shiftCells(this.afterShiftCells, afterGap, 1);\n};\n\nproto._shiftCells = function (cells, gap, shift) {\n  for (let i = 0; i < cells.length; i++) {\n    const cell = cells[i];\n    const cellShift = gap > 0 ? shift : 0;\n    cell.wrapShift(cellShift);\n    gap -= cell.size.outerWidth;\n  }\n};\n\nproto._unshiftCells = function (cells) {\n  if (!cells || !cells.length) {\n    return;\n  }\n  for (let i = 0; i < cells.length; i++) {\n    cells[i].wrapShift(0);\n  }\n};\n\n// -------------------------- physics -------------------------- //\n\nproto.integratePhysics = function () {\n  this.x += this.velocity;\n  this.velocity *= this.getFrictionFactor();\n};\n\nproto.applyForce = function (force) {\n  this.velocity += force;\n};\n\nproto.getFrictionFactor = function () {\n  return (\n    1 - this.options[this.isFreeScrolling ? 'freeScrollFriction' : 'friction']\n  );\n};\n\nproto.getRestingPosition = function () {\n  // my thanks to Steven Wittens, who simplified this math greatly\n  return this.x + this.velocity / (1 - this.getFrictionFactor());\n};\n\nproto.applyDragForce = function () {\n  if (!this.isDraggable || !this.isPointerDown) {\n    return;\n  }\n  // change the position to drag position by applying force\n  const dragVelocity = this.dragX - this.x;\n  const dragForce = dragVelocity - this.velocity;\n  this.applyForce(dragForce);\n};\n\nproto.applySelectedAttraction = function () {\n  // do not attract if pointer down or no slides\n  const dragDown = this.isDraggable && this.isPointerDown;\n  if (dragDown || this.isFreeScrolling || !this.slides.length) {\n    return;\n  }\n  const distance = this.selectedSlide.target * -1 - this.x;\n  const force = distance * this.options.selectedAttraction;\n  this.applyForce(force);\n};\n\nexport default proto;\n"]}

package/dist/collection/components/slides/lib/js/cell.js

@@ -1,16 +1,13 @@
-import getSize from 'get-size';
-
-('use strict');
-
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { getSize } from './utils/get-size';
 export default function Cell(elem, parent) {
   this.element = elem;
   this.parent = parent;
-
   this.create();
 }
-
-var proto = Cell.prototype;
-
+const proto = Cell.prototype;
 proto.create = function () {
   this.element.style.position = 'absolute';
   this.element.setAttribute('aria-hidden', 'true');
@@ -20,41 +17,34 @@ proto.create = function () {
     element.setAttribute('tabindex', '-1');
   });
 };
-
 proto.destroy = function () {
   // reset style
   this.unselect();
   this.element.style.position = '';
-  var side = this.parent.originSide;
+  const side = this.parent.originSide;
   this.element.style[side] = '';
 };
-
 proto.getSize = function () {
   this.size = getSize(this.element);
 };
-
 proto.setPosition = function (x) {
   this.x = x;
   this.updateTarget();
   this.renderPosition(x);
 };
-
 // setDefaultTarget v1 method, backwards compatibility, remove in v3
 proto.updateTarget = proto.setDefaultTarget = function () {
-  var marginProperty =
-    this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';
+  const marginProperty = this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';
   this.target =
     this.x +
-    this.size[marginProperty] +
-    this.size.width * this.parent.cellAlign;
+      this.size[marginProperty] +
+      this.size.width * this.parent.cellAlign;
 };
-
 proto.renderPosition = function (x) {
   // render position of cell with in slider
-  var side = this.parent.originSide;
+  const side = this.parent.originSide;
   this.element.style[side] = this.parent.getPositionValue(x);
 };
-
 proto.select = function () {
   this.element.classList.add('is-selected');
   this.element.removeAttribute('aria-hidden');
@@ -62,7 +52,6 @@ proto.select = function () {
     element.removeAttribute('tabindex');
   });
 };
-
 proto.unselect = function () {
   this.element.classList.remove('is-selected');
   this.element.setAttribute('aria-hidden', 'true');
@@ -70,15 +59,14 @@ proto.unselect = function () {
     element.setAttribute('tabindex', '-1');
   });
 };
-
 /**
- * @param {Integer} factor - 0, 1, or -1
+ * @param {Integer} shift - 0, 1, or -1
  **/
 proto.wrapShift = function (shift) {
   this.shift = shift;
   this.renderPosition(this.x + this.parent.slideableWidth * shift);
 };
-
 proto.remove = function () {
   this.element.parentNode.removeChild(this.element);
 };
+//# sourceMappingURL=cell.js.map

package/dist/collection/components/slides/lib/js/cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","sourceRoot":"","sources":["../../../../../src/components/slides/lib/js/cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getSize } from './utils/get-size';\n\nexport default function Cell(elem, parent) {\n  this.element = elem;\n  this.parent = parent;\n\n  this.create();\n}\n\nconst proto = Cell.prototype;\n\nproto.create = function () {\n  this.element.style.position = 'absolute';\n  this.element.setAttribute('aria-hidden', 'true');\n  this.x = 0;\n  this.shift = 0;\n  Array.from(this.element.querySelectorAll('*')).forEach((element) => {\n    (element as HTMLElement).setAttribute('tabindex', '-1');\n  });\n};\n\nproto.destroy = function () {\n  // reset style\n  this.unselect();\n  this.element.style.position = '';\n  const side = this.parent.originSide;\n  this.element.style[side] = '';\n};\n\nproto.getSize = function () {\n  this.size = getSize(this.element);\n};\n\nproto.setPosition = function (x) {\n  this.x = x;\n  this.updateTarget();\n  this.renderPosition(x);\n};\n\n// setDefaultTarget v1 method, backwards compatibility, remove in v3\nproto.updateTarget = proto.setDefaultTarget = function () {\n  const marginProperty =\n    this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';\n  this.target =\n    this.x +\n    this.size[marginProperty] +\n    this.size.width * this.parent.cellAlign;\n};\n\nproto.renderPosition = function (x) {\n  // render position of cell with in slider\n  const side = this.parent.originSide;\n  this.element.style[side] = this.parent.getPositionValue(x);\n};\n\nproto.select = function () {\n  this.element.classList.add('is-selected');\n  this.element.removeAttribute('aria-hidden');\n  Array.from(this.element.querySelectorAll('*')).forEach((element) => {\n    (element as HTMLElement).removeAttribute('tabindex');\n  });\n};\n\nproto.unselect = function () {\n  this.element.classList.remove('is-selected');\n  this.element.setAttribute('aria-hidden', 'true');\n  Array.from(this.element.querySelectorAll('*')).forEach((element) => {\n    (element as HTMLElement).setAttribute('tabindex', '-1');\n  });\n};\n\n/**\n * @param {Integer} shift - 0, 1, or -1\n **/\nproto.wrapShift = function (shift) {\n  this.shift = shift;\n  this.renderPosition(this.x + this.parent.slideableWidth * shift);\n};\n\nproto.remove = function () {\n  this.element.parentNode.removeChild(this.element);\n};\n"]}