Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ebay/ebayui-core
Advanced tools
@ebay/ebayui-core - npm Package Compare versions
Comparing version 0.7.1 to 0.8.0-0
@@ -1,8 +0,2 @@ | ||
| 'use strict'; | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
| var _require = require('../event-utils'), | ||
| resizeUtil = _require.resizeUtil; | ||
| 'use strict';function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}var _require = require('../event-utils'),resizeUtil = _require.resizeUtil; | ||
| var previousPosition = void 0; | ||
@@ -15,26 +9,17 @@ var previousStyles = void 0; | ||
| /** | ||
| * Prevents the `<body>` element from scrolling. | ||
| * | ||
| * This is done by forcing the body to be `fixed` and setting it's height/width inline. | ||
| * The body is then translated the reverse of the scroll position using negative margins. | ||
| * | ||
| * This approach was chosen over the more common just `overflow:hidden` to address some | ||
| * issues with iOS and Android browsers. | ||
| * | ||
| * Finally the scroll position is also stored so that it can be reapplied after restoring | ||
| * scrolling. | ||
| */ | ||
| function prevent() { | ||
| var _document = document, | ||
| body = _document.body; | ||
| var _window = window, | ||
| pageXOffset = _window.pageXOffset, | ||
| pageYOffset = _window.pageYOffset; | ||
| var _getComputedStyle = getComputedStyle(body), | ||
| width = _getComputedStyle.width, | ||
| height = _getComputedStyle.height, | ||
| marginTop = _getComputedStyle.marginTop, | ||
| marginLeft = _getComputedStyle.marginLeft; | ||
| * Prevents the `<body>` element from scrolling. | ||
| * | ||
| * This is done by forcing the body to be `fixed` and setting it's height/width inline. | ||
| * The body is then translated the reverse of the scroll position using negative margins. | ||
| * | ||
| * This approach was chosen over the more common just `overflow:hidden` to address some | ||
| * issues with iOS and Android browsers. | ||
| * | ||
| * Finally the scroll position is also stored so that it can be reapplied after restoring | ||
| * scrolling. | ||
| */ | ||
| function prevent() {var _document = | ||
| document,body = _document.body;var _window = | ||
| window,pageXOffset = _window.pageXOffset,pageYOffset = _window.pageYOffset;var _getComputedStyle = | ||
| getComputedStyle(body),width = _getComputedStyle.width,height = _getComputedStyle.height,marginTop = _getComputedStyle.marginTop,marginLeft = _getComputedStyle.marginLeft; | ||
| var styleText = 'position:fixed;overflow:hidden;'; | ||
@@ -64,15 +49,11 @@ previousPosition = [pageXOffset, pageYOffset]; | ||
| /** | ||
| * Restores scrolling of the `<body>` element. | ||
| * | ||
| * This will also restore the scroll position, and inline body styles from before the body | ||
| * scroll was prevented. You should not call this function without first preventing the | ||
| * body scroll. | ||
| */ | ||
| * Restores scrolling of the `<body>` element. | ||
| * | ||
| * This will also restore the scroll position, and inline body styles from before the body | ||
| * scroll was prevented. You should not call this function without first preventing the | ||
| * body scroll. | ||
| */ | ||
| function restore() { | ||
| if (isPrevented) { | ||
| var _window2; | ||
| var _document2 = document, | ||
| body = _document2.body; | ||
| if (isPrevented) {var _window2;var _document2 = | ||
| document,body = _document2.body; | ||
| if (previousStyles) { | ||
@@ -91,4 +72,4 @@ body.setAttribute('style', previousStyles); | ||
| /** | ||
| * Called during "resize" events to recalculate generated body widths and margins. | ||
| */ | ||
| * Called during "resize" events to recalculate generated body widths and margins. | ||
| */ | ||
| function recalculate() { | ||
@@ -95,0 +76,0 @@ restore(); |
@@ -1,9 +0,7 @@ | ||
| 'use strict'; | ||
| /** | ||
| * Emit marko event and fire custom event on the root element | ||
| * @param {Object} widget | ||
| * @param {String} eventName | ||
| * @param {Object} eventArg | ||
| */ | ||
| 'use strict'; /** | ||
| * Emit marko event and fire custom event on the root element | ||
| * @param {Object} widget | ||
| * @param {String} eventName | ||
| * @param {Object} eventArg | ||
| */ | ||
| function emitAndFire(widget, eventName, eventArg) { | ||
@@ -10,0 +8,0 @@ var originalEmit = widget.emit; |
@@ -1,9 +0,7 @@ | ||
| 'use strict'; | ||
| /** | ||
| * Generic keydown handler used by more specific cases | ||
| * @param {Array} keyCodes: List of acceptable keyCodes | ||
| * @param {KeyboardEvent} e | ||
| * @param {Function} callback | ||
| */ | ||
| 'use strict'; /** | ||
| * Generic keydown handler used by more specific cases | ||
| * @param {Array} keyCodes: List of acceptable keyCodes | ||
| * @param {KeyboardEvent} e | ||
| * @param {Function} callback | ||
| */ | ||
| function handleKeydown(keyCodes, e, callback) { | ||
@@ -52,5 +50,3 @@ var keyCode = e.charCode || e.keyCode; | ||
| if (handlers.length) { | ||
| handlers.forEach(function (handler) { | ||
| return handler(ev); | ||
| }); | ||
| handlers.forEach(function (handler) {return handler(ev);}); | ||
| window.addEventListener('resize', handleResize); | ||
@@ -68,4 +64,2 @@ } | ||
| addEventListener: addEventListener, | ||
| removeEventListener: removeEventListener | ||
| } | ||
| }; | ||
| removeEventListener: removeEventListener } }; |
@@ -1,9 +0,6 @@ | ||
| 'use strict'; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| 'use strict';var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;}; | ||
| /** | ||
| * Convert camelCase to kebab-case | ||
| * @param {String} s | ||
| */ | ||
| * Convert camelCase to kebab-case | ||
| * @param {String} s | ||
| */ | ||
| function camelToKebab(s) { | ||
@@ -14,8 +11,6 @@ return s.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); | ||
| /** | ||
| * Create object of HTML attributes for pass-through to the DOM | ||
| * @param {Object} input | ||
| */ | ||
| function processHtmlAttributes() { | ||
| var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| * Create object of HTML attributes for pass-through to the DOM | ||
| * @param {Object} input | ||
| */ | ||
| function processHtmlAttributes() {var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var attributes = {}; | ||
@@ -22,0 +17,0 @@ var htmlAttributes = input.htmlAttributes; |
@@ -1,11 +0,9 @@ | ||
| 'use strict'; | ||
| var _get = require('lodash.get'); | ||
| 'use strict';var _get = require('lodash.get'); | ||
| var _set = require('lodash.set'); | ||
| /** | ||
| * For each attribute, define getter and setter on root DOM element of the widget | ||
| * @param {Object} widget | ||
| * @param {Array} attributes | ||
| */ | ||
| * For each attribute, define getter and setter on root DOM element of the widget | ||
| * @param {Object} widget | ||
| * @param {Array} attributes | ||
| */ | ||
| function observeRoot(widget, attributes, callback) { | ||
@@ -22,4 +20,4 @@ attributes.forEach(function (attribute) { | ||
| } | ||
| } | ||
| }); | ||
| } }); | ||
| }); | ||
@@ -29,9 +27,9 @@ } | ||
| /** | ||
| * Define getter and setter on a non-root DOM element of the widget | ||
| * @param {Object} widget: Widget instance | ||
| * @param {HTMLElement} el: Element for attaching observer | ||
| * @param {String} attribute: Name of stateful property | ||
| * @param {String} path: Path to part of state that needs to be accessed | ||
| * @param {String} dirtyPath: Path to use with setStateDirty() | ||
| */ | ||
| * Define getter and setter on a non-root DOM element of the widget | ||
| * @param {Object} widget: Widget instance | ||
| * @param {HTMLElement} el: Element for attaching observer | ||
| * @param {String} attribute: Name of stateful property | ||
| * @param {String} path: Path to part of state that needs to be accessed | ||
| * @param {String} dirtyPath: Path to use with setStateDirty() | ||
| */ | ||
| function observeInner(widget, el, attribute, path, dirtyPath, callback) { | ||
@@ -48,6 +46,6 @@ Object.defineProperty(el, attribute, { | ||
| callback(el); | ||
| } | ||
| }); | ||
| } }); | ||
| } | ||
| module.exports = { observeRoot: observeRoot, observeInner: observeInner }; |
@@ -1,11 +0,9 @@ | ||
| 'use strict'; | ||
| 'use strict';var expect = require('chai').expect; | ||
| var expect = require('chai').expect; | ||
| /** | ||
| * Trigger generic DOM event | ||
| * @param {HTMLElement} el | ||
| * @param {String} type | ||
| * @param {Number} keyCode | ||
| */ | ||
| * Trigger generic DOM event | ||
| * @param {HTMLElement} el | ||
| * @param {String} type | ||
| * @param {Number} keyCode | ||
| */ | ||
| function triggerEvent(el, type, keyCode) { | ||
@@ -19,5 +17,5 @@ var event = document.createEvent('Event'); | ||
| /** | ||
| * Check that the spy was called with an originalEvent | ||
| * @param {Object} spy | ||
| */ | ||
| * Check that the spy was called with an originalEvent | ||
| * @param {Object} spy | ||
| */ | ||
| function testOriginalEvent(spy) { | ||
@@ -29,3 +27,2 @@ expect(spy.getCall(0).args[0].originalEvent instanceof Event).to.equal(true); | ||
| triggerEvent: triggerEvent, | ||
| testOriginalEvent: testOriginalEvent | ||
| }; | ||
| testOriginalEvent: testOriginalEvent }; |
@@ -1,4 +0,2 @@ | ||
| "use strict"; | ||
| var lastTime = 0; | ||
| "use strict";var lastTime = 0; | ||
| var times = []; | ||
@@ -9,5 +7,5 @@ var animation = void 0; | ||
| /** | ||
| * Loop that continuously calls itself and measures the time difference between calls | ||
| * @param {DOMHighResTimeStamp} time | ||
| */ | ||
| * Loop that continuously calls itself and measures the time difference between calls | ||
| * @param {DOMHighResTimeStamp} time | ||
| */ | ||
| function loop(time) { | ||
@@ -27,6 +25,6 @@ var ms = time - lastTime; | ||
| /** | ||
| * Start the loop and start running code at specified intervals | ||
| * @param {Function} intervalFn | ||
| * @param {Number} intervalMs | ||
| */ | ||
| * Start the loop and start running code at specified intervals | ||
| * @param {Function} intervalFn | ||
| * @param {Number} intervalMs | ||
| */ | ||
| function start(intervalFn, intervalMs) { | ||
@@ -45,5 +43,3 @@ lastTime = 0; | ||
| function getAverage() { | ||
| var avg = times.reduce(function (a, b) { | ||
| return a + b; | ||
| }) / times.length; | ||
| var avg = times.reduce(function (a, b) {return a + b;}) / times.length; | ||
| return +avg.toFixed(2); | ||
@@ -56,3 +52,2 @@ } | ||
| end: end, | ||
| getAverage: getAverage | ||
| }; | ||
| getAverage: getAverage }; |
@@ -1,8 +0,2 @@ | ||
| 'use strict'; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var cheerio = require('cheerio'); | ||
| 'use strict';var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}var cheerio = require('cheerio'); | ||
| var expect = require('chai').expect; | ||
@@ -26,5 +20,5 @@ var prettyPrint = require('marko-prettyprint').prettyPrintAST; | ||
| /** | ||
| * Get Cheerio instance based on output object from rendering | ||
| * @param {Object} output | ||
| */ | ||
| * Get Cheerio instance based on output object from rendering | ||
| * @param {Object} output | ||
| */ | ||
| function getCheerio(output) { | ||
@@ -35,7 +29,7 @@ return cheerio.load(output.html.toString()); | ||
| /** | ||
| * Create input to be used for rendering through test utils | ||
| * @param {Object} input: additional input to use with test utils | ||
| * @param {String} arrayKey: if provided, assign input as a single-entry array (for marko nested tags) | ||
| * @param {String} baseInput: if provided, use as base for additional input | ||
| */ | ||
| * Create input to be used for rendering through test utils | ||
| * @param {Object} input: additional input to use with test utils | ||
| * @param {String} arrayKey: if provided, assign input as a single-entry array (for marko nested tags) | ||
| * @param {String} baseInput: if provided, use as base for additional input | ||
| */ | ||
| function setupInput(input, arrayKey, baseInput) { | ||
@@ -72,13 +66,17 @@ var newInput = baseInput ? _extends(baseInput, input) : input; | ||
| function getTransformerData(srcString, componentPath) { | ||
| var templateAST = markoCompiler.parseRaw(srcString, componentPath); | ||
| var context = new CompileContext(srcString, componentPath, Builder.DEFAULT_BUILDER); | ||
| var templateAST = markoCompiler.parseRaw( | ||
| srcString, | ||
| componentPath); | ||
| var context = new CompileContext( | ||
| srcString, | ||
| componentPath, | ||
| Builder.DEFAULT_BUILDER); | ||
| return { context: context, templateAST: templateAST }; | ||
| } | ||
| function getTransformedTemplate(transformer, srcString, componentPath) { | ||
| var _getTransformerData = getTransformerData(srcString, componentPath), | ||
| context = _getTransformerData.context, | ||
| templateAST = _getTransformerData.templateAST; | ||
| function getTransformedTemplate(transformer, srcString, componentPath) {var _getTransformerData = | ||
| getTransformerData(srcString, componentPath),context = _getTransformerData.context,templateAST = _getTransformerData.templateAST; | ||
| transformer(templateAST.body.array[0], context); | ||
@@ -88,12 +86,9 @@ return prettyPrint(templateAST).replace(/\n/g, '').replace(/\s{4}/g, ''); | ||
| function runTransformer(transformer, srcString, componentPath) { | ||
| var _getTransformerData2 = getTransformerData(srcString, componentPath), | ||
| context = _getTransformerData2.context, | ||
| templateAST = _getTransformerData2.templateAST; | ||
| function runTransformer(transformer, srcString, componentPath) {var _getTransformerData2 = | ||
| getTransformerData(srcString, componentPath),context = _getTransformerData2.context,templateAST = _getTransformerData2.templateAST; | ||
| transformer(templateAST.body.array[0], context); | ||
| return { | ||
| context: context, | ||
| el: templateAST.body.array[0] | ||
| }; | ||
| el: templateAST.body.array[0] }; | ||
| } | ||
@@ -106,3 +101,2 @@ | ||
| getTransformedTemplate: getTransformedTemplate, | ||
| runTransformer: runTransformer | ||
| }; | ||
| runTransformer: runTransformer }; |
@@ -1,6 +0,4 @@ | ||
| 'use strict'; | ||
| // Adds an style to the document which forces all transitions to run more quickly for the tests. | ||
| 'use strict'; // Adds an style to the document which forces all transitions to run more quickly for the tests. | ||
| var style = document.createElement('style'); | ||
| style.innerHTML = '* { transition-duration: 0.1s !important; }'; | ||
| document.head.appendChild(style); |
@@ -1,11 +0,9 @@ | ||
| 'use strict'; | ||
| /** | ||
| * Transform ebay-* components' child tags for use as nested tags | ||
| * Example: <ebay-combobox-option> to <ebay-combobox:option> | ||
| * Note: Used exclusively by Marko as a transform for the nested tags | ||
| * See: /src/components/ebay-combobox/marko.json | ||
| * @param {Object} el | ||
| * @param {Object} context | ||
| */ | ||
| 'use strict'; /** | ||
| * Transform ebay-* components' child tags for use as nested tags | ||
| * Example: <ebay-combobox-option> to <ebay-combobox:option> | ||
| * Note: Used exclusively by Marko as a transform for the nested tags | ||
| * See: /src/components/ebay-combobox/marko.json | ||
| * @param {Object} el | ||
| * @param {Object} context | ||
| */ | ||
| function transform(el, context) { | ||
@@ -28,5 +26,5 @@ var parentTag = el.tagName; | ||
| } | ||
| } | ||
| }); | ||
| } }); | ||
| walker.walk(el); | ||
@@ -33,0 +31,0 @@ } |
@@ -1,27 +0,21 @@ | ||
| 'use strict'; | ||
| 'use strict';var TRANSITION_END = 'transitionend'; | ||
| var TRANSITION_END = 'transitionend'; | ||
| /** | ||
| * Applies a primer `-init` class before starting a transition | ||
| * to make transitioning properties that are not animatable easier. | ||
| * | ||
| * **Order** | ||
| * 1. Add class: "$className-init" | ||
| * 2. Wait one frame. | ||
| * 3. Remove class "$className-init". | ||
| * 4. Add class "$className". | ||
| * 5. Wait for animation to finish. | ||
| * 6. Remove class "$className". | ||
| * | ||
| * @param {HTMLElement} options.el The root element that contains the animation. | ||
| * @param {string} options.className The base className to use for the transition. | ||
| * @param {Element[]} options.waitFor Elements that will transition and should be waited for. | ||
| * @param {Function} cb A callback called after the transition as ended. | ||
| */ | ||
| module.exports = function (_ref, cb) { | ||
| var el = _ref.el, | ||
| className = _ref.className, | ||
| waitFor = _ref.waitFor; | ||
| * Applies a primer `-init` class before starting a transition | ||
| * to make transitioning properties that are not animatable easier. | ||
| * | ||
| * **Order** | ||
| * 1. Add class: "$className-init" | ||
| * 2. Wait one frame. | ||
| * 3. Remove class "$className-init". | ||
| * 4. Add class "$className". | ||
| * 5. Wait for animation to finish. | ||
| * 6. Remove class "$className". | ||
| * | ||
| * @param {HTMLElement} options.el The root element that contains the animation. | ||
| * @param {string} options.className The base className to use for the transition. | ||
| * @param {Element[]} options.waitFor Elements that will transition and should be waited for. | ||
| * @param {Function} cb A callback called after the transition as ended. | ||
| */ | ||
| module.exports = function (_ref, cb) {var el = _ref.el,className = _ref.className,waitFor = _ref.waitFor; | ||
| var ended = void 0; | ||
@@ -38,5 +32,3 @@ var ran = 0; | ||
| if (pending) { | ||
| waitFor.forEach(function (child) { | ||
| return child.addEventListener(TRANSITION_END, listener); | ||
| }); | ||
| waitFor.forEach(function (child) {return child.addEventListener(TRANSITION_END, listener);}); | ||
| } else { | ||
@@ -56,4 +48,4 @@ cancel(); | ||
| /** | ||
| * Cancels the current transition and resets the className. | ||
| */ | ||
| * Cancels the current transition and resets the className. | ||
| */ | ||
| function cancel() { | ||
@@ -80,8 +72,6 @@ if (ended) { | ||
| /** | ||
| * Handles a single transition end event. | ||
| * Once all child transitions have ended the overall animation is completed. | ||
| */ | ||
| function listener(_ref2) { | ||
| var target = _ref2.target; | ||
| * Handles a single transition end event. | ||
| * Once all child transitions have ended the overall animation is completed. | ||
| */ | ||
| function listener(_ref2) {var target = _ref2.target; | ||
| target.removeEventListener(TRANSITION_END, listener); | ||
@@ -101,7 +91,7 @@ | ||
| /** | ||
| * Runs a function during the next animation frame. | ||
| * | ||
| * @param {function} fn a function to run on the next animation frame. | ||
| * @return {function} a function to cancel the callback. | ||
| */ | ||
| * Runs a function during the next animation frame. | ||
| * | ||
| * @param {function} fn a function to run on the next animation frame. | ||
| * @return {function} a function to cancel the callback. | ||
| */ | ||
| function nextFrame(fn) { | ||
@@ -108,0 +98,0 @@ var frame = void 0; |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var emitAndFire = require('../../common/emit-and-fire'); | ||
@@ -35,4 +33,4 @@ var processHtmlAttributes = require('../../common/html-attributes'); | ||
| ariaCurrent: ariaCurrent, | ||
| shouldHandleClick: shouldHandleClick | ||
| }; | ||
| shouldHandleClick: shouldHandleClick }; | ||
| }); | ||
@@ -46,9 +44,7 @@ items = Object.keys(items).length > 0 ? items : null; | ||
| headingLevel: input.headingLevel || 'h2', | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
| function getInitialState(_ref) { | ||
| var hijax = _ref.hijax; | ||
| function getInitialState(_ref) {var hijax = _ref.hijax; | ||
| return { hijax: hijax }; | ||
@@ -66,3 +62,2 @@ } | ||
| getInitialState: getInitialState, | ||
| handleClick: handleClick | ||
| }); | ||
| handleClick: handleClick }); |
@@ -1,19 +0,19 @@ | ||
| 'use strict'; | ||
| var getItem = function getItem(text, href) { | ||
| 'use strict';var getItem = function getItem(text, href) { | ||
| var item = { | ||
| href: 'https://www.ebay.com/', | ||
| navSrc: '{"actionKind":"NAVSRC","operationId":"2489527"}', | ||
| _sp: 'p2489527.m4340.l9751.c1' | ||
| }; | ||
| _sp: 'p2489527.m4340.l9751.c1' }; | ||
| var clonedItem = JSON.parse(JSON.stringify(item)); | ||
| clonedItem.renderBody = function (stream) { | ||
| return stream.write(text); | ||
| }; | ||
| clonedItem.renderBody = function (stream) {return stream.write(text);}; | ||
| clonedItem.href = href; | ||
| return clonedItem; | ||
| }; | ||
| var basicItems = [getItem('eBay', 'https://www.ebay.com'), getItem('Auto Parts and Vehicles', 'https://www.ebay.com/b/Auto-Parts-and-Vehicles/6000/bn_1865334'), getItem('Motors Parts & Accessories', null)]; | ||
| var basicItems = [getItem('eBay', 'https://www.ebay.com'), | ||
| getItem('Auto Parts and Vehicles', 'https://www.ebay.com/b/Auto-Parts-and-Vehicles/6000/bn_1865334'), | ||
| getItem('Motors Parts & Accessories', null)]; | ||
| var firstItemMissingHref = [getItem('eBay', null), getItem('Auto Parts and Vehicles', 'https://www.ebay.com/b/Auto-Parts-and-Vehicles/6000/bn_1865334'), getItem('Motors Parts & Accessories', null)]; | ||
| var firstItemMissingHref = [getItem('eBay', null), | ||
| getItem('Auto Parts and Vehicles', 'https://www.ebay.com/b/Auto-Parts-and-Vehicles/6000/bn_1865334'), | ||
| getItem('Motors Parts & Accessories', null)]; | ||
@@ -23,17 +23,15 @@ module.exports = { | ||
| headingText: 'Page navigation', | ||
| items: basicItems | ||
| }, | ||
| items: basicItems }, | ||
| hijax: { | ||
| hijax: true, | ||
| items: basicItems | ||
| }, | ||
| items: basicItems }, | ||
| firstItemMissingHref: { | ||
| headingText: 'Page navigation', | ||
| items: firstItemMissingHref | ||
| }, | ||
| items: firstItemMissingHref }, | ||
| itemsWithHeadingLevel: { | ||
| headingText: 'Page navigation', | ||
| headingLevel: 'h3', | ||
| items: basicItems | ||
| } | ||
| }; | ||
| items: basicItems } }; |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var emitAndFire = require('../../common/emit-and-fire'); | ||
@@ -11,4 +9,4 @@ var eventUtils = require('../../common/event-utils'); | ||
| return { | ||
| disabled: Boolean(input.disabled) | ||
| }; | ||
| disabled: Boolean(input.disabled) }; | ||
| } | ||
@@ -68,9 +66,7 @@ | ||
| /** | ||
| * Handle accessibility features | ||
| * https://ebay.gitbooks.io/mindpatterns/content/input/button.html#keyboard | ||
| * @param {MouseEvent} e | ||
| */ | ||
| function handleKeydown(e) { | ||
| var _this = this; | ||
| * Handle accessibility features | ||
| * https://ebay.gitbooks.io/mindpatterns/content/input/button.html#keyboard | ||
| * @param {MouseEvent} e | ||
| */ | ||
| function handleKeydown(e) {var _this = this; | ||
| eventUtils.handleActionKeydown(e, function () { | ||
@@ -86,3 +82,2 @@ _this.handleClick(); | ||
| handleClick: handleClick, | ||
| handleKeydown: handleKeydown | ||
| }); | ||
| handleKeydown: handleKeydown }); |
@@ -1,6 +0,2 @@ | ||
| 'use strict'; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var focusables = require('makeup-focusables'); | ||
| 'use strict';var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};var focusables = require('makeup-focusables'); | ||
| var resizeUtil = require('../../common/event-utils').resizeUtil; | ||
@@ -14,2 +10,6 @@ var emitAndFire = require('../../common/emit-and-fire'); | ||
| // Used for carousel slide direction. | ||
| var LEFT = -1; | ||
| var RIGHT = 1; | ||
| function getInitialState(input) { | ||
@@ -19,2 +19,3 @@ var state = { | ||
| gap: input.gap || 16, | ||
| noDots: input.noDots, | ||
| index: parseInt(input.index, 10) || 0, | ||
@@ -28,18 +29,22 @@ classes: ['carousel', input.class], | ||
| accessibilityOther: input.accessibilityOther || 'Slide {slide} - Carousel', | ||
| accessibilityPause: input.accessibilityPause || 'Pause - Carousel', | ||
| accessibilityPlay: input.accessibilityPlay || 'Play - Carousel', | ||
| htmlAttributes: processHtmlAttributes(input), | ||
| items: (input.items || []).map(function (item) { | ||
| return { | ||
| items: (input.items || []).map(function (item) {return { | ||
| htmlAttributes: processHtmlAttributes(item), | ||
| renderBody: item.renderBody | ||
| }; | ||
| }) | ||
| }; | ||
| renderBody: item.renderBody };}) };var | ||
| // Remove any extra items when using explicit itemsPerSlide. | ||
| var items = state.items, | ||
| itemsPerSlide = state.itemsPerSlide; | ||
| items = state.items,itemsPerSlide = state.itemsPerSlide; | ||
| if (itemsPerSlide) { | ||
| state.classes.push('carousel--slides'); | ||
| // Remove any extra items when using explicit itemsPerSlide. | ||
| items.length -= items.length % itemsPerSlide; | ||
| // Only allow autoplay option for discrete carousels. | ||
| if (input.autoplay) { | ||
| state.autoplayInterval = parseInt(input.autoplay, 10) || 4000; | ||
| state.classes.push('carousel__autoplay'); | ||
| state.paused = input.paused; | ||
| } | ||
| } | ||
@@ -50,27 +55,23 @@ | ||
| function getTemplateData(state) { | ||
| var index = state.index; | ||
| var items = state.items, | ||
| itemsPerSlide = state.itemsPerSlide, | ||
| slideWidth = state.slideWidth, | ||
| gap = state.gap; | ||
| function getTemplateData(state) {var | ||
| index = state.index;var | ||
| offsetOverride = state.offsetOverride,autoplayInterval = state.autoplayInterval,items = state.items,itemsPerSlide = state.itemsPerSlide,slideWidth = state.slideWidth,gap = state.gap; | ||
| var hasOverride = offsetOverride !== undefined; | ||
| var totalItems = items.length; | ||
| index %= totalItems || 1; // Ensure index is within bounds. | ||
| index -= index % (itemsPerSlide || 1); // Round index to the nearest valid slide index. | ||
| index = state.index = Math.abs(index); // Ensure positive and save back to state. | ||
| state.index = Math.abs(index); // Ensure positive and save back to state. | ||
| var offset = getOffset(state); | ||
| var prevControlDisabled = offset === 0; | ||
| var nextControlDisabled = offset === getMaxOffset(state); | ||
| var prevControlDisabled = !autoplayInterval && offset === 0; | ||
| var nextControlDisabled = !autoplayInterval && offset === getMaxOffset(state); | ||
| var bothControlsDisabled = prevControlDisabled && nextControlDisabled; | ||
| var slide = void 0, | ||
| itemWidth = void 0, | ||
| totalSlides = void 0, | ||
| accessibilityStatus = void 0; | ||
| var slide = void 0,itemWidth = void 0,totalSlides = void 0,accessibilityStatus = void 0; | ||
| if (itemsPerSlide) { | ||
| slide = Math.ceil(index / itemsPerSlide); | ||
| slide = getSlide(state); | ||
| itemWidth = 'calc(' + 100 / itemsPerSlide + '% - ' + (itemsPerSlide - 1) * gap / itemsPerSlide + 'px)'; | ||
| totalSlides = Math.ceil(items.length / itemsPerSlide); | ||
| accessibilityStatus = state.accessibilityStatus.replace('{currentSlide}', slide + 1).replace('{totalSlides}', totalSlides); | ||
| totalSlides = getSlide(state, items.length); | ||
| accessibilityStatus = state.accessibilityStatus. | ||
| replace('{currentSlide}', slide + 1). | ||
| replace('{totalSlides}', totalSlides); | ||
| } else { | ||
@@ -80,5 +81,4 @@ itemWidth = 'auto'; | ||
| items.forEach(function (item, i) { | ||
| var style = item.htmlAttributes.style; | ||
| items.forEach(function (item, i) {var | ||
| style = item.htmlAttributes.style,transform = item.transform; | ||
| var marginRight = i !== items.length && gap + 'px'; | ||
@@ -89,10 +89,16 @@ | ||
| item.style = style + ';flex-basis:' + itemWidth + ';margin-right:' + marginRight; | ||
| if (transform) item.style += 'transform:' + transform; | ||
| } else { | ||
| item.style = _extends({}, style, { | ||
| 'flex-basis': itemWidth, | ||
| 'margin-right': marginRight | ||
| }); | ||
| 'margin-right': marginRight, | ||
| transform: transform }); | ||
| } | ||
| item.fullyVisible = item.left === undefined || item.left - offset >= 0 && item.right - offset <= slideWidth; | ||
| item.fullyVisible = | ||
| item.left === undefined || | ||
| item.left - offset >= -0.01 && | ||
| item.right - offset <= slideWidth + 0.01; | ||
| }); | ||
@@ -103,3 +109,4 @@ | ||
| slide: slide, | ||
| offset: offset, | ||
| offset: hasOverride ? state.offsetOverride : offset, | ||
| disableTransition: hasOverride, | ||
| totalSlides: totalSlides, | ||
@@ -109,20 +116,23 @@ accessibilityStatus: accessibilityStatus, | ||
| nextControlDisabled: nextControlDisabled, | ||
| bothControlsDisabled: bothControlsDisabled | ||
| }); | ||
| bothControlsDisabled: bothControlsDisabled }); | ||
| return data; | ||
| } | ||
| function init() { | ||
| var config = this.state.config; | ||
| function init() {var _this = this;var _state = | ||
| this.state,config = _state.config,autoplayInterval = _state.autoplayInterval; | ||
| this.listEl = this.getEl('list'); | ||
| this.nextEl = this.getEl('next'); | ||
| this.containerEl = this.getEl('container'); | ||
| this.emitUpdate = emitUpdate.bind(this); | ||
| this.subscribeTo(resizeUtil).on('resize', onRender.bind(this)); | ||
| this.subscribeTo(resizeUtil).on('resize', function () { | ||
| cleanupAsync.call(_this); | ||
| onRender.call(_this); | ||
| }); | ||
| observer.observeRoot(this, ['index']); | ||
| if (autoplayInterval) observer.observeRoot(this, ['paused']); | ||
| if (getComputedStyle(this.listEl).getPropertyValue('overflow-x') !== 'visible') { | ||
| if (!autoplayInterval && getComputedStyle(this.listEl).getPropertyValue('overflow-x') !== 'visible') { | ||
| config.nativeScrolling = true; | ||
| this.cancelScrollHandler = onScrollEnd(this.listEl, handleScrollEnd.bind(this)); | ||
| } else { | ||
@@ -133,13 +143,20 @@ this.subscribeTo(this.listEl).on('transitionend', this.emitUpdate); | ||
| function onRender() { | ||
| var _this = this; | ||
| function onRender() {var _this2 = this;var | ||
| containerEl = this.containerEl,listEl = this.listEl,state = this.state;var | ||
| config = state.config,items = state.items,autoplayInterval = state.autoplayInterval,paused = state.paused,offsetOverride = state.offsetOverride; | ||
| var hasOverride = offsetOverride !== undefined; | ||
| var containerEl = this.containerEl, | ||
| listEl = this.listEl, | ||
| state = this.state; | ||
| var config = state.config; | ||
| // Do nothing for empty carousels. | ||
| if (!items.length) return; | ||
| // When there is an offset override (used for infinite scroll) we reset it | ||
| // after rendering to restore the expected carousel state. | ||
| if (hasOverride) { | ||
| config.preserveItems = true; | ||
| this.renderFrame = requestAnimationFrame(function () {return _this2.setState('offsetOverride', undefined);}); | ||
| return; | ||
| } | ||
| // Track if we are on a normal render or a render caused by recalculating. | ||
| if (config.preserveItems) { | ||
| // Track if we are on a normal render or a render caused by recalculating. | ||
| config.preserveItems = false; | ||
@@ -150,11 +167,12 @@ | ||
| forEls(listEl, function (itemEl) { | ||
| focusables(itemEl).forEach(itemEl.getAttribute('aria-hidden') !== 'true' ? function (child) { | ||
| return child.removeAttribute('tabindex'); | ||
| } : function (child) { | ||
| return child.setAttribute('tabindex', '-1'); | ||
| }); | ||
| focusables(itemEl).forEach(itemEl.getAttribute('aria-hidden') !== 'true' ? | ||
| function (child) {return child.removeAttribute('tabindex');} : | ||
| function (child) {return child.setAttribute('tabindex', '-1');}); | ||
| }); | ||
| if (config.nativeScrolling) { | ||
| var offset = getOffset(state); | ||
| var offset = hasOverride ? offsetOverride : getOffset(state); | ||
| // Listen for future scroll events and snap to the closest point. | ||
| this.cancelScrollHandler = onScrollEnd(listEl, handleScrollEnd.bind(this)); | ||
| // Animate to the new scrolling position and emit update events afterward. | ||
@@ -164,16 +182,15 @@ this.cancelScrollTransition = scrollTransition(listEl, offset, this.emitUpdate); | ||
| if (autoplayInterval && !paused) { | ||
| this.autoplayTimeout = setTimeout(function () {return _this2.move(RIGHT);}, autoplayInterval); | ||
| } | ||
| return; | ||
| } | ||
| this.renderFrame = requestAnimationFrame(function () { | ||
| var items = state.items, | ||
| slideWidth = state.slideWidth; | ||
| // Otherwise recalculates the items / slide sizes. | ||
| this.renderFrame = requestAnimationFrame(function () {var _containerEl$getBound = | ||
| containerEl.getBoundingClientRect(),containerWidth = _containerEl$getBound.width;var _listEl$firstElementC = | ||
| listEl.firstElementChild.getBoundingClientRect(),currentLeft = _listEl$firstElementC.left; | ||
| var _containerEl$getBound = containerEl.getBoundingClientRect(), | ||
| containerLeft = _containerEl$getBound.left, | ||
| containerWidth = _containerEl$getBound.width; | ||
| if (slideWidth === containerWidth) return; | ||
| _this.setState('slideWidth', containerWidth); | ||
| _this2.setStateDirty('slideWidth', containerWidth); | ||
| config.preserveItems = true; | ||
@@ -183,10 +200,6 @@ | ||
| forEls(listEl, function (itemEl, i) { | ||
| var item = items[i]; | ||
| var _itemEl$getBoundingCl = itemEl.getBoundingClientRect(), | ||
| left = _itemEl$getBoundingCl.left, | ||
| right = _itemEl$getBoundingCl.right; | ||
| item.left = left - containerLeft; | ||
| item.right = right - containerLeft; | ||
| var item = items[i];var _itemEl$getBoundingCl = | ||
| itemEl.getBoundingClientRect(),left = _itemEl$getBoundingCl.left,right = _itemEl$getBoundingCl.right; | ||
| item.left = left - currentLeft; | ||
| item.right = right - currentLeft; | ||
| }); | ||
@@ -197,5 +210,6 @@ }); | ||
| /** | ||
| * Called before updates and before the widget is destroyed to remove any pending async timers / actions. | ||
| */ | ||
| * Called before updates and before the widget is destroyed to remove any pending async timers / actions. | ||
| */ | ||
| function cleanupAsync() { | ||
| clearTimeout(this.autoplayTimeout); | ||
| cancelAnimationFrame(this.renderFrame); | ||
@@ -207,31 +221,23 @@ if (this.cancelScrollHandler) this.cancelScrollHandler(); | ||
| function emitUpdate() { | ||
| var items = this.state.items; | ||
| function emitUpdate() {var | ||
| items = this.state.items; | ||
| emitAndFire(this, 'carousel-update', { | ||
| visibleIndexes: items. | ||
| filter(function (_ref) {var fullyVisible = _ref.fullyVisible;return fullyVisible;}). | ||
| map(function (item) {return items.indexOf(item);}) }); | ||
| emitAndFire(this, 'carousel-update', { | ||
| visibleIndexes: items.filter(function (_ref) { | ||
| var fullyVisible = _ref.fullyVisible; | ||
| return fullyVisible; | ||
| }).map(function (item) { | ||
| return items.indexOf(item); | ||
| }) | ||
| }); | ||
| } | ||
| /** | ||
| * Moves the carousel in the `data-direction` of the clicked element if possible. | ||
| * | ||
| * @param {MouseEvent} originalEvent | ||
| * @param {HTMLElement} target | ||
| */ | ||
| * Moves the carousel in the `data-direction` of the clicked element if possible. | ||
| * | ||
| * @param {MouseEvent} originalEvent | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function handleMove(originalEvent, target) { | ||
| var _state = this.state, | ||
| config = _state.config, | ||
| itemsPerSlide = _state.itemsPerSlide; | ||
| if (this.isMoving) return;var | ||
| state = this.state; | ||
| var direction = parseInt(target.getAttribute('data-direction'), 10); | ||
| var nextIndex = this.getNextIndex(direction); | ||
| var slide = itemsPerSlide && Math.ceil(nextIndex / itemsPerSlide); | ||
| config.preserveItems = true; | ||
| this.setState('index', nextIndex); | ||
| var nextIndex = this.move(direction); | ||
| var slide = getSlide(state, nextIndex); | ||
| emitAndFire(this, 'carousel-slide', { slide: slide + 1, originalEvent: originalEvent }); | ||
@@ -242,12 +248,9 @@ emitAndFire(this, 'carousel-' + (direction === 1 ? 'next' : 'prev'), { originalEvent: originalEvent }); | ||
| /** | ||
| * Moves the carousel to the slide at `data-slide` for the clicked element if possible. | ||
| * | ||
| * @param {MouseEvent} originalEvent | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function handleDotClick(originalEvent, target) { | ||
| var _state2 = this.state, | ||
| config = _state2.config, | ||
| itemsPerSlide = _state2.itemsPerSlide; | ||
| * Moves the carousel to the slide at `data-slide` for the clicked element if possible. | ||
| * | ||
| * @param {MouseEvent} originalEvent | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function handleDotClick(originalEvent, target) {var _state2 = | ||
| this.state,config = _state2.config,itemsPerSlide = _state2.itemsPerSlide; | ||
| var slide = parseInt(target.getAttribute('data-slide'), 10); | ||
@@ -260,13 +263,29 @@ config.preserveItems = true; | ||
| /** | ||
| * Find the closest item index to the scroll offset and triggers an update. | ||
| * | ||
| * @param {number} scrollLeft The current scroll position of the carousel. | ||
| */ | ||
| * Toggles the play state of an autoplay carousel. | ||
| * | ||
| * @param {MouseEvent} originalEvent | ||
| */ | ||
| function togglePlay(originalEvent) {var _state3 = | ||
| this.state,config = _state3.config,paused = _state3.paused; | ||
| config.preserveItems = true; | ||
| this.setState('paused', !paused); | ||
| if (paused) this.move(RIGHT); | ||
| emitAndFire(this, 'carousel-' + (paused ? 'play' : 'pause'), { originalEvent: originalEvent }); | ||
| } | ||
| /** | ||
| * Find the closest item index to the scroll offset and triggers an update. | ||
| * | ||
| * @param {number} scrollLeft The current scroll position of the carousel. | ||
| */ | ||
| function handleScrollEnd(scrollLeft) { | ||
| var state = this.state; | ||
| var config = state.config, | ||
| items = state.items; | ||
| if (this.cancelScrollTransition) { | ||
| this.cancelScrollTransition(); | ||
| this.cancelScrollTransition = undefined; | ||
| }var | ||
| state = this.state;var | ||
| config = state.config,items = state.items; | ||
| // Find the closest item using a binary search. | ||
| var start = 0; | ||
@@ -280,3 +299,4 @@ var end = items.length - 1; | ||
| var middle = start + Math.floor(remaining / 2); | ||
| if (scrollLeft < items[middle].left) end = middle;else start = middle; | ||
| if (scrollLeft < items[middle].left) end = middle;else | ||
| start = middle; | ||
| } | ||
@@ -306,44 +326,103 @@ | ||
| /** | ||
| * Given the current widget state, finds the active offset left of the selected item. | ||
| * Also automatically caps the offset at the max offset. | ||
| * | ||
| * @param {object} state The widget state. | ||
| * @return {number} | ||
| */ | ||
| function getOffset(state) { | ||
| var items = state.items, | ||
| index = state.index; | ||
| * Causes the carousel to move to the provided index. | ||
| * | ||
| * @param {-1|1} delta 1 for right and -1 for left. | ||
| * @return {number} the updated index. | ||
| */ | ||
| function move(delta) {var _this3 = this;var | ||
| state = this.state;var | ||
| index = state.index,items = state.items,itemsPerSlide = state.itemsPerSlide,autoplayInterval = state.autoplayInterval,slideWidth = state.slideWidth,gap = state.gap,config = state.config; | ||
| var nextIndex = getNextIndex(state, delta); | ||
| var offsetOverride = void 0; | ||
| config.preserveItems = true; | ||
| this.isMoving = true; | ||
| // When we are in autoplay mode we overshoot the desired index to land on a clone | ||
| // of one of the ends. Then after the transition is over we update to the proper position. | ||
| if (autoplayInterval) { | ||
| if (delta === RIGHT && nextIndex < index) { | ||
| // Transitions to one slide before the beginning. | ||
| offsetOverride = -slideWidth; | ||
| // Move the items in the last slide to be before the first slide. | ||
| for (var i = itemsPerSlide; i--;) { | ||
| var item = items[items.length - i - 1]; | ||
| item.transform = 'translateX(' + (getMaxOffset(state) + slideWidth + gap) * -1 + 'px)'; | ||
| } | ||
| } else if (delta === LEFT && nextIndex > index) { | ||
| // Transitions one slide past the end. | ||
| offsetOverride = getMaxOffset(state) + slideWidth; | ||
| // Moves the items in the first slide to be after the last slide. | ||
| for (var _i = itemsPerSlide; _i--;) { | ||
| var _item = items[_i]; | ||
| _item.transform = 'translateX(' + (getMaxOffset(state) + slideWidth + gap) + 'px)'; | ||
| } | ||
| } | ||
| this.setState('offsetOverride', offsetOverride); | ||
| } | ||
| this.setState('index', nextIndex); | ||
| this.once('carousel-update', function () { | ||
| _this3.isMoving = false; | ||
| if (offsetOverride !== undefined) { | ||
| // If we are in autoplay mode and went outside of the normal offset | ||
| // We make sure to restore all of the items that got moved around. | ||
| items.forEach(function (item) {item.transform = undefined;}); | ||
| config.preserveItems = true; | ||
| _this3.setStateDirty('items'); | ||
| } | ||
| }); | ||
| return nextIndex; | ||
| } | ||
| /** | ||
| * Given the current widget state, finds the active offset left of the selected item. | ||
| * Also automatically caps the offset at the max offset. | ||
| * | ||
| * @param {object} state The widget state. | ||
| * @return {number} | ||
| */ | ||
| function getOffset(state) {var | ||
| items = state.items,index = state.index; | ||
| if (!items.length) return 0; | ||
| return Math.min(items[index].left, getMaxOffset(state)); | ||
| return Math.min(items[index].left, getMaxOffset(state)) || 0; | ||
| } | ||
| /** | ||
| * Given the current widget state, finds the last valid offset. | ||
| * | ||
| * @param {object} state The widget state. | ||
| * @return {number} | ||
| */ | ||
| function getMaxOffset(state) { | ||
| var items = state.items, | ||
| slideWidth = state.slideWidth; | ||
| * Given the current widget state, finds the last valid offset. | ||
| * | ||
| * @param {object} state The widget state. | ||
| * @return {number} | ||
| */ | ||
| function getMaxOffset(_ref2) {var items = _ref2.items,slideWidth = _ref2.slideWidth; | ||
| if (!items.length) return 0; | ||
| return Math.max(items[items.length - 1].right - slideWidth, 0); | ||
| return Math.max(items[items.length - 1].right - slideWidth, 0) || 0; | ||
| } | ||
| /** | ||
| * Calculates the next valid index in a direction. | ||
| * | ||
| * @param {-1|1} delta 1 for right and -1 for left. | ||
| * @return {number} | ||
| */ | ||
| function getNextIndex(delta) { | ||
| var _state3 = this.state, | ||
| index = _state3.index, | ||
| items = _state3.items, | ||
| slideWidth = _state3.slideWidth; | ||
| * Gets the slide for a given index. | ||
| * Defaults to the current index if none provided. | ||
| * | ||
| * @param {object} state The widget state. | ||
| * @param {number?} i the index to get the slide for. | ||
| * @return {number} | ||
| */ | ||
| function getSlide(_ref3) {var index = _ref3.index,itemsPerSlide = _ref3.itemsPerSlide;var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : index; | ||
| if (!itemsPerSlide) return; | ||
| return Math.ceil(i / itemsPerSlide); | ||
| } | ||
| var RIGHT = 1; | ||
| var LEFT = -1; | ||
| /** | ||
| * Calculates the next valid index in a direction. | ||
| * | ||
| * @param {object} state The widget state. | ||
| * @param {-1|1} delta 1 for right and -1 for left. | ||
| * @return {number} | ||
| */ | ||
| function getNextIndex(_ref4, delta) {var index = _ref4.index,items = _ref4.items,slideWidth = _ref4.slideWidth; | ||
| var i = index; | ||
@@ -356,5 +435,3 @@ var item = void 0; | ||
| // Find the index of the next item that is not fully in view. | ||
| do { | ||
| item = items[i += delta]; | ||
| } while (item && item.fullyVisible); | ||
| do {item = items[i += delta];} while (item && item.fullyVisible); | ||
@@ -366,5 +443,3 @@ // If going right, then we just want the next item not fully in view. | ||
| var targetOffset = item.right - slideWidth; | ||
| do { | ||
| item = items[--i]; | ||
| } while (item && item.left >= targetOffset); | ||
| do {item = items[--i];} while (item && item.left >= targetOffset); | ||
| return i + 1; | ||
@@ -374,7 +449,7 @@ } | ||
| /** | ||
| * Calls a function on each element within a parent element. | ||
| * | ||
| * @param {HTMLElement} parent The parent to walk through. | ||
| * @param {(el: HTMLElement, i: number) => any} fn The function to call. | ||
| */ | ||
| * Calls a function on each element within a parent element. | ||
| * | ||
| * @param {HTMLElement} parent The parent to walk through. | ||
| * @param {(el: HTMLElement, i: number) => any} fn The function to call. | ||
| */ | ||
| function forEls(parent, fn) { | ||
@@ -397,5 +472,5 @@ var i = 0; | ||
| onBeforeDestroy: cleanupAsync, | ||
| move: move, | ||
| handleMove: handleMove, | ||
| handleDotClick: handleDotClick, | ||
| getNextIndex: getNextIndex | ||
| }); | ||
| togglePlay: togglePlay }); |
@@ -1,6 +0,2 @@ | ||
| 'use strict'; | ||
| var renderBody = function renderBody(stream) { | ||
| return stream.write('text'); | ||
| }; | ||
| 'use strict';var renderBody = function renderBody(stream) {return stream.write('text');}; | ||
| var itemWidth = 200; | ||
@@ -7,0 +3,0 @@ var item = { renderBody: renderBody, '*': { style: 'width:' + itemWidth + 'px' } }; |
@@ -23,4 +23,4 @@ # ebay-carousel | ||
| `index` | String | Yes | 0-based index position | ||
| `items-per-slide` | String | No | automatically fit a number of items for each carousel slide and enable slide controls. | ||
| `gap` | String | No | override the margin between carousel items (default: "16px") | ||
| `items-per-slide` | String | No | automatically fit a number of items for each carousel slide and enable slide controls | ||
| `gap` | String | No | override the margin between carousel items in pixels (default: "16") | ||
@@ -33,3 +33,12 @@ ### Additional Attributes for when items-per-slide is set. | ||
| `accessibility-other` | String | No | pagination other slide text (default: "Slide {slide} - Carousel") | ||
| `autoplay` | Boolean or Number | No | automatically slides the carousel on an interval. If a number is supplied that is used as the interval in ms, defaults to 4000ms. | ||
| ### Additional Attributes for when autoplay is set. | ||
| Name | Type | Stateful | Description | ||
| --- | --- | --- | --- | ||
| `accessibility-play` | String | No | autoplay play button text (default: "Play - Carousel") | ||
| `accessibility-pause` | String | No | autoplay pause button text (default: "Pause - Carousel") | ||
| `paused` | Boolean | Yes | pauses the autoplay carousel | ||
| `no-dots` | Boolean | No | hides the slide dot controls | ||
| ## ebay-carousel Events | ||
@@ -47,2 +56,8 @@ Event | Data | Description | ||
| ### Additional Events for when autoplay is set. | ||
| Event | Data | Description | ||
| --- | --- | --- | ||
| `carousel-play` | `{ originalEvent }` | called when the autoplay play button is pressed | ||
| `carousel-pause` | `{ originalEvent }` | called when the autoplay pause button is pressed | ||
| Note: The `carousel` will manipulate the `tabindex` property of nested focusable elements inside `<ebay-carousel-item>`. |
@@ -1,13 +0,11 @@ | ||
| 'use strict'; | ||
| /** | ||
| * Calls a function every time scrolling completes for an element. | ||
| * Returns a function to stop listening for scroll ends events. | ||
| * | ||
| * (Only works in mobile and relies on touch events) | ||
| * | ||
| * @param {HTMLElement} el The element which scrolls. | ||
| * @param {(offset: number)=>{}} fn The function to call after scrolling completes. | ||
| * @return {function} A function to cancel the scroll listener. | ||
| */ | ||
| 'use strict'; /** | ||
| * Calls a function every time scrolling completes for an element. | ||
| * Returns a function to stop listening for scroll ends events. | ||
| * | ||
| * (Only works in mobile and relies on touch events) | ||
| * | ||
| * @param {HTMLElement} el The element which scrolls. | ||
| * @param {(offset: number)=>{}} fn The function to call after scrolling completes. | ||
| * @return {function} A function to cancel the scroll listener. | ||
| */ | ||
| module.exports = function onScrollEnd(el, fn) { | ||
@@ -32,5 +30,3 @@ var frame = void 0; | ||
| el.addEventListener('touchstart', handleTouchStart); | ||
| frame = requestAnimationFrame(function () { | ||
| return checkScrollEnded(el.scrollLeft); | ||
| }); | ||
| frame = requestAnimationFrame(function () {return checkScrollEnded(el.scrollLeft);}); | ||
| } | ||
@@ -41,4 +37,4 @@ | ||
| cancel(); | ||
| stage = 0; | ||
| el.addEventListener('touchmove', handleTouchMove); | ||
| stage--; | ||
| el.addEventListener('touchend', handleTouchEnd); | ||
| } | ||
@@ -78,10 +74,7 @@ | ||
| switch (stage) { | ||
| case 0: | ||
| cancelTouchMove();break; | ||
| case 1: | ||
| cancelTouchEnd();break; | ||
| default: | ||
| cancelTouchStart();break; | ||
| } | ||
| case 0:cancelTouchMove();break; | ||
| case 1:cancelTouchEnd();break; | ||
| default:cancelTouchStart();break;} | ||
| } | ||
| }; |
@@ -1,18 +0,15 @@ | ||
| 'use strict'; | ||
| /** | ||
| * Utility to animate scroll position of an element using an `ease-out` curve over 250ms. | ||
| * Cancels the animation if the user touches back down. | ||
| * | ||
| * @param {HTMLElement} el The element to scroll. | ||
| * @param {number} to The offset to animate to. | ||
| * @param {function} fn A function that will be called after the transition completes. | ||
| * @return {function} A function that cancels the transition. | ||
| */ | ||
| 'use strict'; /** | ||
| * Utility to animate scroll position of an element using an `ease-out` curve over 250ms. | ||
| * Cancels the animation if the user touches back down. | ||
| * | ||
| * @param {HTMLElement} el The element to scroll. | ||
| * @param {number} to The offset to animate to. | ||
| * @param {function} fn A function that will be called after the transition completes. | ||
| * @return {function} A function that cancels the transition. | ||
| */ | ||
| module.exports = function scrollTransition(el, to, fn) { | ||
| var duration = 250; | ||
| el.addEventListener('touchstart', cancel); | ||
| var frame = requestAnimationFrame(function (startTime) { | ||
| var scrollLeft = el.scrollLeft; | ||
| var lastPosition = void 0,cancelInterruptTransition = void 0; | ||
| var frame = requestAnimationFrame(function (startTime) {var | ||
| scrollLeft = el.scrollLeft; | ||
| var distance = to - scrollLeft; | ||
@@ -32,17 +29,48 @@ (function animate(curTime) { | ||
| // The animation can be interrupted by new touch events. | ||
| el.addEventListener('touchstart', handleTouchStart); | ||
| return cancel; | ||
| function cancel() { | ||
| el.removeEventListener('touchstart', cancel); | ||
| cancelAnimationFrame(frame); | ||
| if (lastPosition === undefined) { | ||
| cancelAnimationFrame(frame); | ||
| cancelTouchStart(); | ||
| } else { | ||
| if (cancelInterruptTransition) cancelInterruptTransition(); | ||
| cancelTouchEnd(); | ||
| } | ||
| } | ||
| function handleTouchStart() { | ||
| cancel(); | ||
| lastPosition = el.scrollLeft; | ||
| // If we were interrupted by a touch start we wait for a touch end to see if we moved. | ||
| el.addEventListener('touchend', handleTouchEnd); | ||
| } | ||
| function handleTouchEnd() { | ||
| cancelTouchEnd(); | ||
| // If we haven't moved because of the interrupt we continue to transition. | ||
| if (lastPosition === el.scrollLeft) { | ||
| cancelInterruptTransition = scrollTransition(el, to, fn); | ||
| } | ||
| } | ||
| function cancelTouchStart() { | ||
| el.removeEventListener('touchstart', handleTouchStart); | ||
| } | ||
| function cancelTouchEnd() { | ||
| el.removeEventListener('touchend', handleTouchEnd); | ||
| } | ||
| }; | ||
| /** | ||
| * Ease out timing function. | ||
| * Based on https://gist.github.com/gre/1650294. | ||
| * | ||
| * @param {number} val - A number between 0 and 1. | ||
| * @return {number} | ||
| */ | ||
| * Ease out timing function. | ||
| * Based on https://gist.github.com/gre/1650294. | ||
| * | ||
| * @param {number} val - A number between 0 and 1. | ||
| * @return {number} | ||
| */ | ||
| function easeOut(v) { | ||
@@ -49,0 +77,0 @@ var t = v - 1; |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var emitAndFire = require('../../common/emit-and-fire'); | ||
@@ -12,4 +10,4 @@ var processHtmlAttributes = require('../../common/html-attributes'); | ||
| disabled: Boolean(input.disabled), | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
@@ -34,3 +32,2 @@ | ||
| getTemplateData: getTemplateData, | ||
| handleClick: handleClick | ||
| }); | ||
| handleClick: handleClick }); |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var Expander = require('makeup-expander'); | ||
@@ -28,9 +26,7 @@ var scrollKeyPreventer = require('makeup-prevent-scroll-keys'); | ||
| htmlAttributes: processHtmlAttributes(option), | ||
| renderBody: option.renderBody | ||
| }; | ||
| renderBody: option.renderBody }; | ||
| }); | ||
| var selectedOption = options.filter(function (option) { | ||
| return option.selected; | ||
| })[0] || options[0]; | ||
| var selectedOption = options.filter(function (option) {return option.selected;})[0] || options[0]; | ||
@@ -49,4 +45,4 @@ if (options.length > 0 && selectedOption.value === options[0].value) { | ||
| borderless: Boolean(input.borderless), | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
@@ -72,9 +68,7 @@ | ||
| disabled: state.disabled, | ||
| htmlAttributes: state.htmlAttributes | ||
| }; | ||
| htmlAttributes: state.htmlAttributes }; | ||
| } | ||
| function init() { | ||
| var _this = this; | ||
| function init() {var _this = this; | ||
| var optionEls = this.el.querySelectorAll(comboboxOptionSelector); | ||
@@ -89,5 +83,5 @@ | ||
| hostContainerClass: '' + comboboxBtnClass, | ||
| simulateSpacebarClick: true | ||
| }); | ||
| simulateSpacebarClick: true }); | ||
| observer.observeRoot(this, ['selected'], function (index) { | ||
@@ -123,5 +117,5 @@ _this.processAfterStateChange(optionEls[index]); | ||
| /** | ||
| * Handle mouse click for option | ||
| * @param {MouseEvent} event | ||
| */ | ||
| * Handle mouse click for option | ||
| * @param {MouseEvent} event | ||
| */ | ||
| function handleOptionClick(event) { | ||
@@ -145,13 +139,9 @@ var el = void 0; | ||
| /** | ||
| * Handle selection of options when the combobox is closed | ||
| * https://ebay.gitbooks.io/mindpatterns/content/input/listbox.html#keyboard | ||
| * @param {KeyboardEvent} event | ||
| */ | ||
| function handleComboboxKeyDown(event) { | ||
| var _this2 = this; | ||
| * Handle selection of options when the combobox is closed | ||
| * https://ebay.gitbooks.io/mindpatterns/content/input/listbox.html#keyboard | ||
| * @param {KeyboardEvent} event | ||
| */ | ||
| function handleComboboxKeyDown(event) {var _this2 = this; | ||
| eventUtils.handleUpDownArrowsKeydown(event, function () { | ||
| var currentSelectedIndex = _this2.state.options.findIndex(function (option) { | ||
| return option.selected; | ||
| }); | ||
| var currentSelectedIndex = _this2.state.options.findIndex(function (option) {return option.selected;}); | ||
| var options = clearComboboxSelections(_this2.state.options); | ||
@@ -171,5 +161,5 @@ var optionEls = _this2.el.querySelectorAll(comboboxOptionSelector); | ||
| default: | ||
| break; | ||
| } | ||
| break;} | ||
| options[selectElementIndex].selected = true; | ||
@@ -188,8 +178,8 @@ | ||
| /** | ||
| * Traverse the options forward or backward for the next/prev option | ||
| * @param {Array} options | ||
| * @param {Number} currentIndex | ||
| * @param {Number} distance | ||
| * @returns {Number} | ||
| */ | ||
| * Traverse the options forward or backward for the next/prev option | ||
| * @param {Array} options | ||
| * @param {Number} currentIndex | ||
| * @param {Number} distance | ||
| * @returns {Number} | ||
| */ | ||
| function traverseOptions(options, currentIndex, distance) { | ||
@@ -208,5 +198,5 @@ var goToIndex = currentIndex; | ||
| /** | ||
| * Common processing after data change via both UI and API | ||
| * @param {HTMLElement} el | ||
| */ | ||
| * Common processing after data change via both UI and API | ||
| * @param {HTMLElement} el | ||
| */ | ||
| function processAfterStateChange(el) { | ||
@@ -219,16 +209,12 @@ var optionValue = el.dataset.optionValue; | ||
| selected: [optionValue], | ||
| el: el | ||
| }); | ||
| el: el }); | ||
| } | ||
| /** | ||
| * Will set the appropriate value for the option in state, view, and the hidden form select, and emit an event | ||
| * @param {String} optionValue | ||
| */ | ||
| function setSelectedOption(optionValue) { | ||
| var _this3 = this; | ||
| var newOptionSelected = this.state.options.filter(function (option) { | ||
| return option.value.toString() === optionValue; | ||
| })[0]; | ||
| * Will set the appropriate value for the option in state, view, and the hidden form select, and emit an event | ||
| * @param {String} optionValue | ||
| */ | ||
| function setSelectedOption(optionValue) {var _this3 = this; | ||
| var newOptionSelected = this.state.options.filter(function (option) {return option.value.toString() === optionValue;})[0]; | ||
| var newOptionSelectedValue = newOptionSelected && newOptionSelected.value; | ||
@@ -250,5 +236,5 @@ var options = this.clearComboboxSelections(this.state.options); | ||
| /** | ||
| * Resets all options to un-selected | ||
| * @param {Array} options | ||
| */ | ||
| * Resets all options to un-selected | ||
| * @param {Array} options | ||
| */ | ||
| function clearComboboxSelections(options) { | ||
@@ -272,3 +258,2 @@ return options.map(function (option) { | ||
| setSelectedOption: setSelectedOption, | ||
| clearComboboxSelections: clearComboboxSelections | ||
| }); | ||
| clearComboboxSelections: clearComboboxSelections }); |
@@ -1,20 +0,15 @@ | ||
| 'use strict'; | ||
| var renderBody = function renderBody(stream) { | ||
| return stream.write('text'); | ||
| }; | ||
| 'use strict';var renderBody = function renderBody(stream) {return stream.write('text');}; | ||
| var options = [{ | ||
| value: 1, | ||
| label: 'option 1' | ||
| }, { | ||
| label: 'option 1' }, | ||
| { | ||
| value: 2, | ||
| label: 'option 2' | ||
| }, { | ||
| label: 'option 2' }, | ||
| { | ||
| value: 3, | ||
| label: 'option 3' | ||
| }]; | ||
| label: 'option 3' }]; | ||
| module.exports = { | ||
| renderBody: renderBody, | ||
| options: options | ||
| }; | ||
| options: options }; |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var keyboardTrap = require('makeup-keyboard-trap'); | ||
@@ -14,3 +12,3 @@ var screenReaderTrap = require('makeup-screenreader-trap'); | ||
| function init() { | ||
| this.dialogEl = this.getEl('dialog'); | ||
| this.dialogEl = this.getEl(); | ||
| this.windowEl = this.getEl('window'); | ||
@@ -25,9 +23,4 @@ this.closeEl = this.getEl('close'); | ||
| function getInitialState(input) { | ||
| var _input$open = input.open, | ||
| open = _input$open === undefined ? false : _input$open, | ||
| type = input.type, | ||
| focus = input.focus, | ||
| ariaLabelClose = input.ariaLabelClose; | ||
| function getInitialState(input) {var _input$open = | ||
| input.open,open = _input$open === undefined ? false : _input$open,type = input.type,focus = input.focus,ariaLabelClose = input.ariaLabelClose; | ||
| return { | ||
@@ -39,12 +32,8 @@ open: open, | ||
| class: input.class, | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
| function getTemplateData(state) { | ||
| var open = state.open, | ||
| type = state.type, | ||
| ariaLabelClose = state.ariaLabelClose, | ||
| htmlAttributes = state.htmlAttributes; | ||
| function getTemplateData(state) {var | ||
| open = state.open,type = state.type,ariaLabelClose = state.ariaLabelClose,htmlAttributes = state.htmlAttributes; | ||
| var dialogClass = [state.class, 'dialog']; | ||
@@ -71,5 +60,5 @@ var windowClass = ['dialog__window']; | ||
| dialogClass.push('dialog--mask-fade'); | ||
| break; | ||
| } | ||
| break;} | ||
| return { | ||
@@ -81,16 +70,12 @@ open: open, | ||
| windowClass: windowClass, | ||
| htmlAttributes: htmlAttributes | ||
| }; | ||
| htmlAttributes: htmlAttributes }; | ||
| } | ||
| /** | ||
| * Ensures that if a component is supposed to be trapped that this is | ||
| * trapped after rendering. | ||
| */ | ||
| function trap(opts) { | ||
| var _this = this; | ||
| var wasTrapped = this.isTrapped, | ||
| restoreTrap = this.restoreTrap; | ||
| * Ensures that if a component is supposed to be trapped that this is | ||
| * trapped after rendering. | ||
| */ | ||
| function trap(opts) {var _this = this;var | ||
| wasTrapped = this.isTrapped,restoreTrap = this.restoreTrap; | ||
| var isTrapped = this.isTrapped = this.state.open; | ||
@@ -127,3 +112,3 @@ var isFirstRender = opts && opts.firstRender; | ||
| _this.cancelScrollReset = setTimeout(function () { | ||
| _this.el.replaceChild(_this.dialogEl, _this.dialogEl); | ||
| _this.dialogEl.parentNode.replaceChild(_this.dialogEl, _this.dialogEl); | ||
| _this.cancelScrollReset = undefined; | ||
@@ -140,4 +125,4 @@ }, 20); | ||
| className: 'dialog--show', | ||
| waitFor: this.transitionEls | ||
| }, onFinishTransition); | ||
| waitFor: this.transitionEls }, | ||
| onFinishTransition); | ||
| } | ||
@@ -151,4 +136,4 @@ | ||
| className: 'dialog--hide', | ||
| waitFor: this.transitionEls | ||
| }, onFinishTransition); | ||
| waitFor: this.transitionEls }, | ||
| onFinishTransition); | ||
| } | ||
@@ -162,5 +147,5 @@ | ||
| /** | ||
| * Releases the trap before each render and on destroy so | ||
| * that Marko can update normally without the inserted dom nodes. | ||
| */ | ||
| * Releases the trap before each render and on destroy so | ||
| * that Marko can update normally without the inserted dom nodes. | ||
| */ | ||
| function release() { | ||
@@ -193,17 +178,9 @@ if (this.isTrapped) { | ||
| function handleDialogClick(_ref) { | ||
| var target = _ref.target, | ||
| clientY = _ref.clientY; | ||
| var closeEl = this.closeEl, | ||
| windowEl = this.windowEl; | ||
| function handleDialogClick(_ref) {var target = _ref.target,clientY = _ref.clientY;var | ||
| closeEl = this.closeEl,windowEl = this.windowEl; | ||
| // Checks if we clicked inside the white panel of the dialog. | ||
| if (!closeEl.contains(target) && windowEl.contains(target)) { | ||
| var _windowEl$getBounding = windowEl.getBoundingClientRect(), | ||
| bottom = _windowEl$getBounding.bottom; | ||
| var _getComputedStyle = getComputedStyle(windowEl), | ||
| paddingBottom = _getComputedStyle.paddingBottom; | ||
| if (!closeEl.contains(target) && windowEl.contains(target)) {var _windowEl$getBounding = | ||
| windowEl.getBoundingClientRect(),bottom = _windowEl$getBounding.bottom;var _getComputedStyle = | ||
| getComputedStyle(windowEl),paddingBottom = _getComputedStyle.paddingBottom; | ||
| var windowBottom = bottom - parseInt(paddingBottom, 10); | ||
@@ -241,3 +218,2 @@ if (clientY < windowBottom) { | ||
| show: show, | ||
| close: close | ||
| }); | ||
| close: close }); |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var processHtmlAttributes = require('../../common/html-attributes'); | ||
@@ -66,4 +64,4 @@ var template = require('./template.marko'); | ||
| htmlAttributes: processHtmlAttributes(input), | ||
| classes: input.noSkinClasses ? [input.class] : ['icon', 'icon--' + name, input.class] | ||
| }; | ||
| classes: input.noSkinClasses ? [input.class] : ['icon', 'icon--' + name, input.class] }; | ||
| } | ||
@@ -74,3 +72,2 @@ | ||
| template: template, | ||
| getTemplateData: getTemplateData | ||
| }); | ||
| getTemplateData: getTemplateData }); |
@@ -1,16 +0,14 @@ | ||
| 'use strict'; | ||
| 'use strict';var path = require('path'); | ||
| var path = require('path'); | ||
| /** | ||
| * @description | ||
| * Inlines the symbol component as the body of the `ebay-icon` component (inline components only). | ||
| * | ||
| * @example | ||
| * <ebay-icon type="inline" name="close"/> | ||
| * | ||
| * Becomes | ||
| * | ||
| * <ebay-icon type="inline" name="close"><include('$DIRNAME/symbols/close.marko')/></ebay-icon> | ||
| */ | ||
| * @description | ||
| * Inlines the symbol component as the body of the `ebay-icon` component (inline components only). | ||
| * | ||
| * @example | ||
| * <ebay-icon type="inline" name="close"/> | ||
| * | ||
| * Becomes | ||
| * | ||
| * <ebay-icon type="inline" name="close"><include('$DIRNAME/symbols/close.marko')/></ebay-icon> | ||
| */ | ||
@@ -17,0 +15,0 @@ function transform(el, context) { |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var Expander = require('makeup-expander'); | ||
@@ -69,4 +67,4 @@ var scrollKeyPreventer = require('makeup-prevent-scroll-keys'); | ||
| htmlAttributes: processHtmlAttributes(item), | ||
| renderBody: item.renderBody | ||
| }; | ||
| renderBody: item.renderBody }; | ||
| }); | ||
@@ -89,4 +87,4 @@ | ||
| items: items, | ||
| checked: checkedItems | ||
| }; | ||
| checked: checkedItems }; | ||
| } | ||
@@ -132,9 +130,7 @@ | ||
| items: state.items, | ||
| htmlAttributes: state.htmlAttributes | ||
| }; | ||
| htmlAttributes: state.htmlAttributes }; | ||
| } | ||
| function init() { | ||
| var _this = this; | ||
| function init() {var _this = this; | ||
| this.buttonEl = this.el.querySelector(buttonSelector); | ||
@@ -172,14 +168,14 @@ this.contentEl = this.el.querySelector(contentSelector); | ||
| expandOnClick: true, | ||
| autoCollapse: true | ||
| }); | ||
| autoCollapse: true }); | ||
| } | ||
| /** | ||
| * Internal marko function, can be triggered from both makeup and API | ||
| * http://v3.markojs.com/docs/marko-widgets/javascript-api/#setstatedirtyname-value | ||
| * @param {Boolean} expanded | ||
| */ | ||
| function update_expanded(expanded) { | ||
| // eslint-disable-line camelcase | ||
| if (expanded && this.buttonEl.getAttribute('aria-expanded') === 'false' || !expanded && this.buttonEl.getAttribute('aria-expanded') === 'true') { | ||
| * Internal marko function, can be triggered from both makeup and API | ||
| * http://v3.markojs.com/docs/marko-widgets/javascript-api/#setstatedirtyname-value | ||
| * @param {Boolean} expanded | ||
| */ | ||
| function update_expanded(expanded) {// eslint-disable-line camelcase | ||
| if (expanded && this.buttonEl.getAttribute('aria-expanded') === 'false' || | ||
| !expanded && this.buttonEl.getAttribute('aria-expanded') === 'true') { | ||
| this.buttonEl.click(); | ||
@@ -190,5 +186,5 @@ } | ||
| /** | ||
| * Common processing after data change via both UI and API | ||
| * @param {Array} itemIndexes | ||
| */ | ||
| * Common processing after data change via both UI and API | ||
| * @param {Array} itemIndexes | ||
| */ | ||
| function processAfterStateChange(itemIndexes) { | ||
@@ -224,9 +220,8 @@ var itemIndex = itemIndexes[itemIndexes.length - 1]; | ||
| /** | ||
| * Handle normal mouse click for item | ||
| * @param {MouseEvent} e | ||
| */ | ||
| * Handle normal mouse click for item | ||
| * @param {MouseEvent} e | ||
| */ | ||
| function handleItemClick(e) { | ||
| var itemEl = e.target; | ||
| if (itemEl.tagName === 'SPAN') { | ||
| // <span> inside item | ||
| if (itemEl.tagName === 'SPAN') {// <span> inside item | ||
| itemEl = itemEl.parentNode; | ||
@@ -239,6 +234,6 @@ } | ||
| /** | ||
| * Set the checked item based on the index | ||
| * @param {Integer} itemIndex | ||
| * @param {Boolean} toggle | ||
| */ | ||
| * Set the checked item based on the index | ||
| * @param {Integer} itemIndex | ||
| * @param {Boolean} toggle | ||
| */ | ||
| function setCheckedItem(itemIndex, toggle) { | ||
@@ -267,9 +262,7 @@ var item = this.state.items[itemIndex]; | ||
| /** | ||
| * Handle accessibility for item (is not handled by makeup) | ||
| * https://ebay.gitbooks.io/mindpatterns/content/input/menu.html#keyboard | ||
| * @param {KeyboardEvent} e | ||
| */ | ||
| function handleItemKeydown(e) { | ||
| var _this2 = this; | ||
| * Handle accessibility for item (is not handled by makeup) | ||
| * https://ebay.gitbooks.io/mindpatterns/content/input/menu.html#keyboard | ||
| * @param {KeyboardEvent} e | ||
| */ | ||
| function handleItemKeydown(e) {var _this2 = this; | ||
| eventUtils.handleActionKeydown(e, function () { | ||
@@ -298,5 +291,5 @@ _this2.handleItemClick(e); | ||
| /** | ||
| * Determine currently checked items (for checkbox case) | ||
| * @returns {Array} checked indexes | ||
| */ | ||
| * Determine currently checked items (for checkbox case) | ||
| * @returns {Array} checked indexes | ||
| */ | ||
| function getCheckedList() { | ||
@@ -317,8 +310,6 @@ var checked = []; | ||
| /** | ||
| * Set the list of options by their index | ||
| * @param {Array} indexArray | ||
| */ | ||
| function setCheckedList(indexArray) { | ||
| var _this3 = this; | ||
| * Set the list of options by their index | ||
| * @param {Array} indexArray | ||
| */ | ||
| function setCheckedList(indexArray) {var _this3 = this; | ||
| if (indexArray) { | ||
@@ -351,3 +342,2 @@ this.state.items.forEach(function (item) { | ||
| getItemElementIndex: getItemElementIndex, | ||
| processAfterStateChange: processAfterStateChange | ||
| }); | ||
| processAfterStateChange: processAfterStateChange }); |
@@ -1,6 +0,2 @@ | ||
| 'use strict'; | ||
| var renderBody = function renderBody(stream) { | ||
| return stream.write('text'); | ||
| }; | ||
| 'use strict';var renderBody = function renderBody(stream) {return stream.write('text');}; | ||
| var item = { renderBody: renderBody }; | ||
@@ -7,0 +3,0 @@ var items = [item, item, item]; |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var processHtmlAttributes = require('../../common/html-attributes'); | ||
| 'use strict';var processHtmlAttributes = require('../../common/html-attributes'); | ||
| var observer = require('../../common/property-observer'); | ||
@@ -12,11 +10,11 @@ var emitAndFire = require('../../common/emit-and-fire'); | ||
| contentTag: 'span', | ||
| mainTag: 'div' | ||
| }, | ||
| mainTag: 'div' }, | ||
| 'page': { | ||
| headingTag: 'h2', | ||
| contentTag: 'div', | ||
| mainTag: 'section' | ||
| } | ||
| }; | ||
| mainTag: 'section' } }; | ||
| var defaults = { | ||
@@ -26,5 +24,5 @@ type: 'page', | ||
| hidden: false, | ||
| dismissible: false | ||
| }; | ||
| dismissible: false }; | ||
| function getInitialState(input) { | ||
@@ -50,4 +48,4 @@ var hidden = defaults.hidden; | ||
| headingClass: type + '-notice__status', | ||
| contentClass: type + '-notice__content' | ||
| }; | ||
| contentClass: type + '-notice__content' }; | ||
| } | ||
@@ -58,5 +56,3 @@ function getTemplateData(state) { | ||
| function init() { | ||
| var _this = this; | ||
| function init() {var _this = this; | ||
| observer.observeRoot(this, ['hidden'], function () { | ||
@@ -67,4 +63,4 @@ _this.processAfterStateChange(); | ||
| /** | ||
| * Common processing after data change via both UI and API | ||
| */ | ||
| * Common processing after data change via both UI and API | ||
| */ | ||
| function processAfterStateChange() { | ||
@@ -89,3 +85,2 @@ if (this.state.hidden) { | ||
| processAfterStateChange: processAfterStateChange, | ||
| onDismiss: onDismiss | ||
| }); | ||
| onDismiss: onDismiss }); |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var processHtmlAttributes = require('../../common/html-attributes'); | ||
| 'use strict';var processHtmlAttributes = require('../../common/html-attributes'); | ||
| var eventUtils = require('../../common/event-utils'); | ||
@@ -12,5 +10,5 @@ var emitAndFire = require('../../common/emit-and-fire'); | ||
| maxPagesAllowed: 9, | ||
| margin: 8 | ||
| }; | ||
| margin: 8 }; | ||
| function getInitialState(input) { | ||
@@ -38,4 +36,4 @@ var prevItem = void 0; | ||
| htmlAttributes: processHtmlAttributes(item), | ||
| renderBody: item.renderBody | ||
| }; | ||
| renderBody: item.renderBody }; | ||
| if (item.type === 'previous') { | ||
@@ -66,4 +64,4 @@ prevItem = tempItem; | ||
| classes: ['pagination', input.class], | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
@@ -89,3 +87,4 @@ | ||
| var numPagesAllowed = Math.floor(containerWidth / pageNumWidth) - constants.indexForNavigation; | ||
| var adjustedNumPages = Math.min(constants.maxPagesAllowed, Math.max(numPagesAllowed, constants.minPagesRequired)); | ||
| var adjustedNumPages = Math.min(constants.maxPagesAllowed, | ||
| Math.max(numPagesAllowed, constants.minPagesRequired)); | ||
| var totalPages = this.pageEls.length; | ||
@@ -107,5 +106,5 @@ | ||
| /** | ||
| * Handle normal mouse click for item, next page and previous page respectively. | ||
| * @param {MouseEvent} event | ||
| */ | ||
| * Handle normal mouse click for item, next page and previous page respectively. | ||
| * @param {MouseEvent} event | ||
| */ | ||
| function handlePageClick(originalEvent) { | ||
@@ -132,8 +131,6 @@ var target = originalEvent.target; | ||
| /** | ||
| * Handle accessibility for item, next page and previous page respectively. | ||
| * @param {KeyboardEvent} event | ||
| */ | ||
| function handlePageKeyDown(event) { | ||
| var _this = this; | ||
| * Handle accessibility for item, next page and previous page respectively. | ||
| * @param {KeyboardEvent} event | ||
| */ | ||
| function handlePageKeyDown(event) {var _this = this; | ||
| eventUtils.handleActionKeydown(event, function () { | ||
@@ -144,5 +141,3 @@ _this.handlePageClick(event); | ||
| function handleNextPageKeyDown(event) { | ||
| var _this2 = this; | ||
| function handleNextPageKeyDown(event) {var _this2 = this; | ||
| eventUtils.handleActionKeydown(event, function () { | ||
@@ -153,5 +148,3 @@ _this2.handleNextPage(event); | ||
| function handlePreviousPageKeyDown(event) { | ||
| var _this3 = this; | ||
| function handlePreviousPageKeyDown(event) {var _this3 = this; | ||
| eventUtils.handleActionKeydown(event, function () { | ||
@@ -173,3 +166,2 @@ _this3.handlePreviousPage(event); | ||
| getInitialState: getInitialState, | ||
| getTemplateData: getTemplateData | ||
| }); | ||
| getTemplateData: getTemplateData }); |
@@ -1,6 +0,2 @@ | ||
| 'use strict'; | ||
| var renderBody = function renderBody(stream) { | ||
| return stream.write('1'); | ||
| }; | ||
| 'use strict';var renderBody = function renderBody(stream) {return stream.write('1');}; | ||
| module.exports = { | ||
@@ -11,38 +7,50 @@ basicLinks: { | ||
| 'curr-text': 'Results Pagination - Page 2', | ||
| items: [{ | ||
| items: [ | ||
| { | ||
| type: 'previous', | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| current: true, | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| type: 'next', | ||
| href: 'https://www.ebay.com/' | ||
| }] | ||
| }, | ||
| href: 'https://www.ebay.com/' }] }, | ||
| hijax: { | ||
@@ -53,17 +61,22 @@ 'ariaLabelPrevious': 'Previous page', | ||
| 'hijax': true, | ||
| items: [{ | ||
| items: [ | ||
| { | ||
| type: 'previous', | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| current: true, | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| type: 'next', | ||
| href: 'https://www.ebay.com/' | ||
| }] | ||
| }, | ||
| href: 'https://www.ebay.com/' }] }, | ||
| basicLinksWithoutCurrent: { | ||
@@ -74,16 +87,21 @@ 'ariaLabelPrevious': 'Previous page', | ||
| 'fakeLink': true, | ||
| items: [{ | ||
| items: [ | ||
| { | ||
| type: 'previous', | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| type: 'next', | ||
| href: 'https://www.ebay.com/' | ||
| }] | ||
| }, | ||
| href: 'https://www.ebay.com/' }] }, | ||
| basicLinksWithoutNavigation: { | ||
@@ -94,8 +112,10 @@ 'ariaLabelPrevious': 'Previous page', | ||
| 'fakeLink': true, | ||
| items: [{ | ||
| items: [ | ||
| { | ||
| current: true, | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }] | ||
| }, | ||
| href: 'https://www.ebay.com/' }] }, | ||
| disabledNavigation: { | ||
@@ -105,13 +125,13 @@ 'ariaLabelPrevious': 'Previous page', | ||
| 'currText': 'Results Pagination - Page 2', | ||
| items: [{ | ||
| type: 'previous' | ||
| }, { | ||
| items: [ | ||
| { | ||
| type: 'previous' }, | ||
| { | ||
| current: true, | ||
| renderBody: renderBody, | ||
| href: 'https://www.ebay.com/' | ||
| }, { | ||
| href: 'https://www.ebay.com/' }, | ||
| { | ||
| type: 'next', | ||
| disabled: true | ||
| }] | ||
| } | ||
| }; | ||
| disabled: true }] } }; |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var emitAndFire = require('../../common/emit-and-fire'); | ||
@@ -12,4 +10,4 @@ var processHtmlAttributes = require('../../common/html-attributes'); | ||
| disabled: Boolean(input.disabled), | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
@@ -31,3 +29,2 @@ | ||
| getTemplateData: getTemplateData, | ||
| handleClick: handleClick | ||
| }); | ||
| handleClick: handleClick }); |
@@ -1,4 +0,2 @@ | ||
| 'use strict'; | ||
| var markoWidgets = require('marko-widgets'); | ||
| 'use strict';var markoWidgets = require('marko-widgets'); | ||
| var emitAndFire = require('../../common/emit-and-fire'); | ||
@@ -20,9 +18,7 @@ var processHtmlAttributes = require('../../common/html-attributes'); | ||
| selected: Boolean(selected), | ||
| htmlAttributes: processHtmlAttributes(option) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(option) }; | ||
| }); | ||
| var selectedOption = options.filter(function (option) { | ||
| return option.selected; | ||
| })[0] || options[0]; | ||
| var selectedOption = options.filter(function (option) {return option.selected;})[0] || options[0]; | ||
@@ -39,4 +35,4 @@ if (options.length > 0 && selectedOption.value === options[0].value) { | ||
| disabled: Boolean(input.disabled), | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| htmlAttributes: processHtmlAttributes(input) }; | ||
| } | ||
@@ -56,9 +52,7 @@ | ||
| disabled: state.disabled, | ||
| htmlAttributes: state.htmlAttributes | ||
| }; | ||
| htmlAttributes: state.htmlAttributes }; | ||
| } | ||
| function init() { | ||
| var _this = this; | ||
| function init() {var _this = this; | ||
| var optionEls = this.el.querySelectorAll(selectOptionSelector); | ||
@@ -75,5 +69,3 @@ | ||
| var valueObserverCallback = function valueObserverCallback(optionValue) { | ||
| var optionFind = function optionFind(option) { | ||
| return option.value.toString() === optionValue.toString(); | ||
| }; | ||
| var optionFind = function optionFind(option) {return option.value.toString() === optionValue.toString();}; | ||
| var newOptionSelected = _this.state.options.find(optionFind); | ||
@@ -100,5 +92,5 @@ var optionIndex = void 0; | ||
| /** | ||
| * Common processing after data change via both UI and API | ||
| * @param {HTMLElement} el | ||
| */ | ||
| * Common processing after data change via both UI and API | ||
| * @param {HTMLElement} el | ||
| */ | ||
| function processAfterStateChange(el) { | ||
@@ -111,16 +103,12 @@ var optionValue = el.value; | ||
| selected: [optionValue], | ||
| el: el | ||
| }); | ||
| el: el }); | ||
| } | ||
| /** | ||
| * Will set the appropriate value for the option in state, view, and the hidden form select, and emit an event | ||
| * @param {String} optionValue | ||
| */ | ||
| function setSelectedOption(optionValue) { | ||
| var _this2 = this; | ||
| var optionFind = function optionFind(option) { | ||
| return option.value.toString() === optionValue.toString(); | ||
| }; | ||
| * Will set the appropriate value for the option in state, view, and the hidden form select, and emit an event | ||
| * @param {String} optionValue | ||
| */ | ||
| function setSelectedOption(optionValue) {var _this2 = this; | ||
| var optionFind = function optionFind(option) {return option.value.toString() === optionValue.toString();}; | ||
| var newOptionSelected = this.state.options.find(optionFind); | ||
@@ -152,4 +140,4 @@ var newOptionSelectedValue = newOptionSelected && newOptionSelected.value; | ||
| selected: [e.target.value], | ||
| el: optionEls[optionIndex] | ||
| }); | ||
| el: optionEls[optionIndex] }); | ||
| } | ||
@@ -164,3 +152,2 @@ | ||
| setSelectedOption: setSelectedOption, | ||
| optionChanged: optionChanged | ||
| }); | ||
| optionChanged: optionChanged }); |
@@ -1,20 +0,15 @@ | ||
| 'use strict'; | ||
| var renderBody = function renderBody(stream) { | ||
| return stream.write('text'); | ||
| }; | ||
| 'use strict';var renderBody = function renderBody(stream) {return stream.write('text');}; | ||
| var options = [{ | ||
| value: '1', | ||
| label: 'option 1' | ||
| }, { | ||
| label: 'option 1' }, | ||
| { | ||
| value: '2', | ||
| label: 'option 2' | ||
| }, { | ||
| label: 'option 2' }, | ||
| { | ||
| value: '3', | ||
| label: 'option 3' | ||
| }]; | ||
| label: 'option 3' }]; | ||
| module.exports = { | ||
| renderBody: renderBody, | ||
| options: options | ||
| }; | ||
| options: options }; |
@@ -1,1 +0,1 @@ | ||
| {"<ebay-breadcrumb>":{"renderer":"./dist/components/ebay-breadcrumb/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@heading-text":"string","@heading-level":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@href":"string"}},"<ebay-breadcrumb-item>":{},"<ebay-button>":{"renderer":"./dist/components/ebay-button/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean","@partially-disabled":"boolean","@href":"string","@priority":"string","@size":"size","@fluid":"boolean","@variant":"string"},"<ebay-carousel>":{"renderer":"./dist/components/ebay-carousel/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@index":"string","@type":"string","@slide":"string","@gap":"string","@items-per-slide":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-status":"string","@accessibility-current":"string","@accessibility-other":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression"}},"<ebay-carousel-item>":{},"<ebay-combobox>":{"renderer":"./dist/components/ebay-combobox/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@name":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-combobox-option>":{},"<ebay-dialog>":{"renderer":"./dist/components/ebay-dialog/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@open":"boolean","@type":"string","@focus":"string","@aria-label-close":"string"},"<ebay-menu>":{"renderer":"./dist/components/ebay-menu/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@label":"string","@expanded":"boolean","@reverse":"boolean","@fix-width":"boolean","@borderless":"boolean","@size":"string","@priority":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@href":"string","@type":"string","@checked":"boolean","@current":"boolean"}},"<ebay-menu-item>":{},"<ebay-notice>":{"renderer":"./dist/components/ebay-notice/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@heading-level":"string","@status":"string","@hidden":"boolean","@aria-text":"string","@aria-label-close":"string","@dismissible":"boolean"},"<ebay-pagination>":{"renderer":"./dist/components/ebay-pagination/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-current":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@current":"boolean","@disabled":"boolean","@href":"string","@type":"string","@role":"string"}},"<ebay-pagination-item>":{},"<ebay-icon>":{"renderer":"./dist/components/ebay-icon/index.js","transformer":"./dist/components/ebay-icon/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@name":"string","@accessibility-text":"string","@no-skin-classes":"boolean"},"<ebay-radio>":{"renderer":"./dist/components/ebay-radio/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean"},"<ebay-checkbox>":{"renderer":"./dist/components/ebay-checkbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean"},"<ebay-select>":{"renderer":"./dist/components/ebay-select/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-select-option>":{}} | ||
| {"<ebay-breadcrumb>":{"renderer":"./dist/components/ebay-breadcrumb/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@heading-text":"string","@heading-level":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@href":"string"}},"<ebay-breadcrumb-item>":{},"<ebay-button>":{"renderer":"./dist/components/ebay-button/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean","@partially-disabled":"boolean","@href":"string","@priority":"string","@size":"size","@fluid":"boolean","@variant":"string"},"<ebay-carousel>":{"renderer":"./dist/components/ebay-carousel/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@index":"string","@type":"string","@slide":"string","@gap":"string","@autoplay":"boolean","@paused":"boolean","@no-dots":"boolean","@items-per-slide":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-status":"string","@accessibility-current":"string","@accessibility-other":"string","@accessibility-play":"string","@accessibility-pause":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression"}},"<ebay-carousel-item>":{},"<ebay-combobox>":{"renderer":"./dist/components/ebay-combobox/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@name":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-combobox-option>":{},"<ebay-dialog>":{"renderer":"./dist/components/ebay-dialog/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@open":"boolean","@type":"string","@focus":"string","@aria-label-close":"string"},"<ebay-menu>":{"renderer":"./dist/components/ebay-menu/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@label":"string","@expanded":"boolean","@reverse":"boolean","@fix-width":"boolean","@borderless":"boolean","@size":"string","@priority":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@href":"string","@type":"string","@checked":"boolean","@current":"boolean"}},"<ebay-menu-item>":{},"<ebay-notice>":{"renderer":"./dist/components/ebay-notice/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@heading-level":"string","@status":"string","@hidden":"boolean","@aria-text":"string","@aria-label-close":"string","@dismissible":"boolean"},"<ebay-pagination>":{"renderer":"./dist/components/ebay-pagination/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-current":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@current":"boolean","@disabled":"boolean","@href":"string","@type":"string","@role":"string"}},"<ebay-pagination-item>":{},"<ebay-icon>":{"renderer":"./dist/components/ebay-icon/index.js","transformer":"./dist/components/ebay-icon/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@name":"string","@accessibility-text":"string","@no-skin-classes":"boolean"},"<ebay-radio>":{"renderer":"./dist/components/ebay-radio/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean"},"<ebay-checkbox>":{"renderer":"./dist/components/ebay-checkbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean"},"<ebay-select>":{"renderer":"./dist/components/ebay-select/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-select-option>":{}} |
| { | ||
| "name": "@ebay/ebayui-core", | ||
| "version": "0.7.1", | ||
| "version": "0.8.0-0", | ||
| "description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.", | ||
@@ -5,0 +5,0 @@ "scripts": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.24%
554888
- Number of package files
- increased by1.3%
234
Worsened metrics
- Lines of code
- decreased by-2.9%
2578
No dependency changes