├── .gitignore ├── .travis.yml ├── BANNER.txt ├── CHANGELOG.md ├── CNAME ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── RELEASE.md ├── apple-ipad-icon@2x.png ├── apple-iphone-icon@2x.png ├── bower.json ├── dist ├── strand-action │ └── strand-action.html ├── strand-ajax │ └── strand-ajax.html ├── strand-array-munge │ └── strand-array-munge.html ├── strand-autocomplete │ └── strand-autocomplete.html ├── strand-box │ └── strand-box.html ├── strand-button │ └── strand-button.html ├── strand-calendar │ └── strand-calendar.html ├── strand-checkbox │ └── strand-checkbox.html ├── strand-collection │ └── strand-collection.html ├── strand-componentizer │ └── strand-componentizer.html ├── strand-currency │ └── strand-currency.html ├── strand-datepicker-panel │ └── strand-datepicker-panel.html ├── strand-datepicker │ └── strand-datepicker.html ├── strand-dialog │ └── strand-dialog.html ├── strand-docs-nav │ └── strand-docs-nav.html ├── strand-docs-shell │ └── strand-docs-shell.html ├── strand-drawer │ └── strand-drawer.html ├── strand-dropdown │ └── strand-dropdown.html ├── strand-fetch │ └── strand-fetch.html ├── strand-file-upload │ └── strand-file-upload.html ├── strand-footer │ └── strand-footer.html ├── strand-form-message │ └── strand-form-message.html ├── strand-form │ └── strand-form.html ├── strand-grid-column │ └── strand-grid-column.html ├── strand-grid-item │ └── strand-grid-item.html ├── strand-grid │ └── strand-grid.html ├── strand-group │ └── strand-group.html ├── strand-guide-canvas │ └── strand-guide-canvas.html ├── strand-guide-tooltip │ └── strand-guide-tooltip.html ├── strand-guide │ └── strand-guide.html ├── strand-header │ └── strand-header.html ├── strand-highlight │ └── strand-highlight.html ├── strand-icon │ └── strand-icon.html ├── strand-inline-box │ └── strand-inline-box.html ├── strand-input-mask │ └── strand-input-mask.html ├── strand-input │ └── strand-input.html ├── strand-item-recycler │ └── strand-item-recycler.html ├── strand-list-item │ └── strand-list-item.html ├── strand-loader │ └── strand-loader.html ├── strand-localstore │ └── strand-localstore.html ├── strand-menu │ └── strand-menu.html ├── strand-modal │ └── strand-modal.html ├── strand-model │ └── strand-model.html ├── strand-popover │ └── strand-popover.html ├── strand-progress-bar │ └── strand-progress-bar.html ├── strand-pulldown-button │ └── strand-pulldown-button.html ├── strand-radio │ └── strand-radio.html ├── strand-repeater-row │ └── strand-repeater-row.html ├── strand-repeater │ └── strand-repeater.html ├── strand-scroll-panel │ └── strand-scroll-panel.html ├── strand-scrollbar-y │ └── strand-scrollbar-y.html ├── strand-spinner │ └── strand-spinner.html ├── strand-sync │ └── strand-sync.html ├── strand-tab │ └── strand-tab.html ├── strand-tabs │ └── strand-tabs.html ├── strand-template-finder │ └── strand-template-finder.html ├── strand-test-form-view │ └── strand-test-form-view.html ├── strand-textarea │ └── strand-textarea.html ├── strand-timeformat │ └── strand-timeformat.html ├── strand-timepicker │ └── strand-timepicker.html ├── strand-tooltip │ └── strand-tooltip.html ├── strand-view-manager │ └── strand-view-manager.html ├── strand-wizard-ribbon │ └── strand-wizard-ribbon.html ├── strand-wizard │ └── strand-wizard.html └── strand.html ├── docs ├── CNAME ├── article_template.html ├── articles │ ├── data_comps_creating_adapters.md │ ├── data_comps_intro.md │ ├── data_comps_using_ajax.md │ ├── data_comps_using_sync.md │ ├── getting_started.md │ ├── grid_config.md │ ├── grid_custom_grid_item.md │ ├── grid_data_integration.md │ ├── grid_intro.md │ ├── manifest.json │ ├── migration_guide.md │ └── repeater.md ├── component_template.html ├── docs.scss ├── footer.html ├── head.html ├── images │ ├── apple-touch-icons.sketch │ ├── mediamath-logo.svg │ ├── mediamath-technology-logo.svg │ ├── spot-graphic-01.svg │ ├── spot-graphic-02.svg │ ├── spot-graphic-03.svg │ ├── strand-logo-only.svg │ └── strand-logo.svg ├── index.html ├── sidebar.html └── template.html ├── favicon.ico ├── gulp ├── env.js ├── tasks │ ├── build.js │ ├── docs.js │ ├── live.js │ └── release.js └── templates │ ├── font_template.html │ ├── index_template.html │ ├── lib_color.js │ ├── lib_index_template.html │ ├── lib_loader.js │ ├── lib_template.html │ ├── lib_version.html │ └── style_module_template.html ├── gulpfile.js ├── package.json ├── src ├── shared │ ├── behaviors │ │ ├── autoclosable.html │ │ ├── autoclosable.json │ │ ├── autotogglable.html │ │ ├── autotogglable.json │ │ ├── closable.html │ │ ├── closable.json │ │ ├── collection.html │ │ ├── columnable.html │ │ ├── columnable.json │ │ ├── debouncable.html │ │ ├── debouncable.json │ │ ├── domgettable.html │ │ ├── domgettable.json │ │ ├── dommutable.html │ │ ├── dommutable.json │ │ ├── domsyncable.html │ │ ├── domsyncable.json │ │ ├── falsifiable.html │ │ ├── falsifiable.json │ │ ├── followable.html │ │ ├── followable.json │ │ ├── jqueryable.html │ │ ├── jqueryable.json │ │ ├── keyboardable.html │ │ ├── keyboardable.json │ │ ├── keyselectable.html │ │ ├── keyselectable.json │ │ ├── lightdomgettable.html │ │ ├── lightdomgettable.json │ │ ├── mixinfindable.html │ │ ├── model.html │ │ ├── mousewheelable.html │ │ ├── mousewheelable.json │ │ ├── nonscrollable.html │ │ ├── nonscrollable.json │ │ ├── pageable.html │ │ ├── pageable.json │ │ ├── poolusable.html │ │ ├── positionable-dropdown.html │ │ ├── positionable-dropdown.json │ │ ├── positionable-panel.html │ │ ├── positionable-panel.json │ │ ├── positionable.html │ │ ├── positionable.json │ │ ├── refable.html │ │ ├── refable.json │ │ ├── resizable.html │ │ ├── resizable.json │ │ ├── resolvable.html │ │ ├── resolvable.json │ │ ├── selectable.html │ │ ├── selectable.json │ │ ├── sizeresponsible.html │ │ ├── sizeresponsible.json │ │ ├── stackable.html │ │ ├── stackable.json │ │ ├── stampbindable.html │ │ ├── stampbindable.json │ │ ├── stylable.html │ │ ├── stylable.json │ │ ├── templatecomponentizable.html │ │ ├── templatefindable.html │ │ ├── validatable.html │ │ ├── validatable.json │ │ ├── windownotifier.html │ │ └── windownotifier.json │ ├── fonts │ │ ├── a │ │ │ ├── arimo-bold.eot │ │ │ ├── arimo-bold.svg │ │ │ ├── arimo-bold.ttf │ │ │ ├── arimo-bold.woff │ │ │ ├── arimo-bolditalic.eot │ │ │ ├── arimo-bolditalic.svg │ │ │ ├── arimo-bolditalic.ttf │ │ │ ├── arimo-bolditalic.woff │ │ │ ├── arimo-italic.eot │ │ │ ├── arimo-italic.svg │ │ │ ├── arimo-italic.ttf │ │ │ ├── arimo-italic.woff │ │ │ ├── arimo-regular.eot │ │ │ ├── arimo-regular.svg │ │ │ ├── arimo-regular.ttf │ │ │ └── arimo-regular.woff │ │ ├── fonts.scss │ │ └── icon │ │ │ └── icomoon.woff │ ├── js │ │ ├── Colors.js │ │ ├── ajax.html │ │ ├── ajaxapiplugin.html │ │ ├── ajaxbusterplugin.html │ │ ├── ajaxcsrfplugin.html │ │ ├── ajaxpageplugin.html │ │ ├── ajaxplugin.html │ │ ├── behaviorutils.html │ │ ├── bitmask.html │ │ ├── colors.html │ │ ├── continuum.html │ │ ├── datautils.html │ │ ├── datetimeutils.html │ │ ├── es6-promise.html │ │ ├── eventdispatcher.html │ │ ├── fetch.html │ │ ├── fontloader.html │ │ ├── measure.html │ │ ├── moment.html │ │ ├── momentrange.html │ │ ├── pinkyswear.html │ │ ├── point.html │ │ ├── rectangle.html │ │ ├── recycler.html │ │ ├── request.html │ │ ├── requestqueue.html │ │ ├── snake.html │ │ ├── storage.html │ │ ├── sync.html │ │ ├── validator.html │ │ └── zousan.html │ ├── sass │ │ ├── _button.scss │ │ ├── _color.scss │ │ ├── _disable.scss │ │ ├── _docs_theme.scss │ │ ├── _dropdown.scss │ │ ├── _fonts.scss │ │ ├── _grid.scss │ │ ├── _mixins.scss │ │ ├── _sizeresponsible.scss │ │ ├── _text.scss │ │ └── _textinput.scss │ └── svg │ │ ├── action.svg │ │ ├── actions.svg │ │ ├── alerts.svg │ │ ├── all-channels.svg │ │ ├── apps.svg │ │ ├── arrow-up.svg │ │ ├── audience.svg │ │ ├── bar-chart.svg │ │ ├── block-arrow.svg │ │ ├── budget-flight.svg │ │ ├── calendar.svg │ │ ├── campaigns.svg │ │ ├── carat-line.svg │ │ ├── carat.svg │ │ ├── card.svg │ │ ├── certificate.svg │ │ ├── changelog.svg │ │ ├── charity.svg │ │ ├── chart-dashed-2.svg │ │ ├── chart-dashed.svg │ │ ├── chart.svg │ │ ├── check-alt.svg │ │ ├── check.svg │ │ ├── circle-arrow.svg │ │ ├── clock.svg │ │ ├── companion.svg │ │ ├── contextual.svg │ │ ├── creatives.svg │ │ ├── cycle-arrow.svg │ │ ├── day-part.svg │ │ ├── deals.svg │ │ ├── delete.svg │ │ ├── details.svg │ │ ├── display.svg │ │ ├── dmp.svg │ │ ├── document.svg │ │ ├── dots.svg │ │ ├── download.svg │ │ ├── drag-drop.svg │ │ ├── duplicate.svg │ │ ├── edit.svg │ │ ├── event-marker.svg │ │ ├── exclude.svg │ │ ├── expand-all.svg │ │ ├── fail.svg │ │ ├── favorite.svg │ │ ├── filter.svg │ │ ├── geo-map.svg │ │ ├── geo-tag.svg │ │ ├── grid-table.svg │ │ ├── group.svg │ │ ├── health.svg │ │ ├── include-outline.svg │ │ ├── include.svg │ │ ├── info.svg │ │ ├── jump-to.svg │ │ ├── left-right-arrow.svg │ │ ├── lego.svg │ │ ├── line-chart-2nd.svg │ │ ├── line-chart.svg │ │ ├── lock.svg │ │ ├── mail.svg │ │ ├── markets.svg │ │ ├── minus.svg │ │ ├── my-data.svg │ │ ├── partial-include.svg │ │ ├── partial.svg │ │ ├── pause.svg │ │ ├── pie-chart.svg │ │ ├── pixel-user.svg │ │ ├── pixels.svg │ │ ├── play.svg │ │ ├── player.svg │ │ ├── plus.svg │ │ ├── preview.svg │ │ ├── question.svg │ │ ├── quick-edit.svg │ │ ├── refresh.svg │ │ ├── reporting.svg │ │ ├── scatter-plot.svg │ │ ├── search.svg │ │ ├── site-list.svg │ │ ├── sort.svg │ │ ├── success.svg │ │ ├── supply-node.svg │ │ ├── supply.svg │ │ ├── three-pas-adserver.svg │ │ ├── tools.svg │ │ ├── tracker.svg │ │ ├── unlock.svg │ │ ├── up-arrow.svg │ │ ├── upload.svg │ │ ├── user.svg │ │ ├── video.svg │ │ ├── warning.svg │ │ ├── wireless.svg │ │ └── xml.svg ├── strand-action │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-action.html │ ├── strand-action.js │ └── strand-action.scss ├── strand-ajax │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-ajax.html │ ├── strand-ajax.js │ └── strand-ajax.scss ├── strand-array-munge │ ├── index.html │ ├── strand-array-munge.html │ ├── strand-array-munge.js │ └── strand-array-munge.scss ├── strand-autocomplete │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-autocomplete.html │ ├── strand-autocomplete.js │ └── strand-autocomplete.scss ├── strand-box │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-box.html │ ├── strand-box.js │ └── strand-box.scss ├── strand-button │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-button.html │ ├── strand-button.js │ └── strand-button.scss ├── strand-calendar │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── pointer-right.svg │ ├── strand-calendar.html │ ├── strand-calendar.js │ └── strand-calendar.scss ├── strand-checkbox │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-checkbox.html │ ├── strand-checkbox.js │ └── strand-checkbox.scss ├── strand-collection │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-collection.html │ ├── strand-collection.js │ └── strand-collection.scss ├── strand-componentizer │ ├── index.html │ ├── strand-componentizer.html │ └── strand-componentizer.js ├── strand-currency │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-currency.html │ ├── strand-currency.js │ └── strand-currency.scss ├── strand-datepicker-panel │ ├── index.html │ ├── strand-datepicker-panel.html │ ├── strand-datepicker-panel.js │ └── strand-datepicker-panel.scss ├── strand-datepicker │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-datepicker.html │ ├── strand-datepicker.js │ └── strand-datepicker.scss ├── strand-dialog │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-dialog.html │ ├── strand-dialog.js │ └── strand-dialog.scss ├── strand-docs-nav │ ├── index.html │ ├── strand-docs-nav.html │ ├── strand-docs-nav.js │ └── strand-docs-nav.scss ├── strand-docs-shell │ ├── index.html │ ├── strand-docs-shell.html │ ├── strand-docs-shell.js │ └── strand-docs-shell.scss ├── strand-drawer │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-drawer.html │ ├── strand-drawer.js │ └── strand-drawer.scss ├── strand-dropdown │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-dropdown.html │ ├── strand-dropdown.js │ ├── strand-dropdown.scss │ └── wrapped.html ├── strand-fetch │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-fetch.html │ ├── strand-fetch.js │ └── strand-fetch.scss ├── strand-file-upload │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-file-upload.html │ ├── strand-file-upload.js │ └── strand-file-upload.scss ├── strand-footer │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-footer.html │ ├── strand-footer.js │ └── strand-footer.scss ├── strand-form-message │ ├── index.html │ ├── strand-form-message.html │ ├── strand-form-message.js │ └── strand-form-message.scss ├── strand-form │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-form.html │ ├── strand-form.js │ └── strand-form.scss ├── strand-grid-column │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-grid-column.html │ ├── strand-grid-column.js │ └── strand-grid-column.scss ├── strand-grid-item │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-grid-item.html │ ├── strand-grid-item.js │ └── strand-grid-item.scss ├── strand-grid │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── mixin1.html │ ├── mixin2.html │ ├── mixin3.html │ ├── resetter.html │ ├── strand-grid.html │ ├── strand-grid.js │ └── strand-grid.scss ├── strand-group │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-group.html │ ├── strand-group.js │ └── strand-group.scss ├── strand-guide-canvas │ ├── index.html │ ├── strand-guide-canvas.html │ ├── strand-guide-canvas.js │ └── strand-guide-canvas.scss ├── strand-guide-tooltip │ ├── index.html │ ├── strand-guide-tooltip.html │ ├── strand-guide-tooltip.js │ └── strand-guide-tooltip.scss ├── strand-guide │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-guide.html │ ├── strand-guide.js │ └── strand-guide.scss ├── strand-header │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-header.html │ ├── strand-header.js │ └── strand-header.scss ├── strand-highlight │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-highlight.html │ ├── strand-highlight.js │ └── strand-highlight.scss ├── strand-icon │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-icon.html │ ├── strand-icon.js │ └── strand-icon.scss ├── strand-inline-box │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-inline-box.html │ ├── strand-inline-box.js │ └── strand-inline-box.scss ├── strand-input-mask │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-input-mask.html │ ├── strand-input-mask.js │ └── strand-input-mask.scss ├── strand-input │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-input.html │ ├── strand-input.js │ └── strand-input.scss ├── strand-item-recycler │ ├── index.html │ ├── strand-item-recycler.html │ ├── strand-item-recycler.js │ ├── strand-item-recycler.scss │ └── template.html ├── strand-list-item │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-list-item.html │ ├── strand-list-item.js │ └── strand-list-item.scss ├── strand-loader │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-loader.html │ ├── strand-loader.js │ └── strand-loader.scss ├── strand-localstore │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-localstore.html │ ├── strand-localstore.js │ └── strand-localstore.scss ├── strand-menu │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-menu.html │ ├── strand-menu.js │ └── strand-menu.scss ├── strand-modal │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-modal.html │ ├── strand-modal.js │ └── strand-modal.scss ├── strand-model │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-model.html │ ├── strand-model.js │ └── strand-model.scss ├── strand-popover │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-popover.html │ ├── strand-popover.js │ └── strand-popover.scss ├── strand-progress-bar │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-progress-bar.html │ ├── strand-progress-bar.js │ └── strand-progress-bar.scss ├── strand-pulldown-button │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-pulldown-button.html │ ├── strand-pulldown-button.js │ └── strand-pulldown-button.scss ├── strand-radio │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-radio.html │ ├── strand-radio.js │ └── strand-radio.scss ├── strand-repeater-row │ ├── strand-repeater-row.html │ ├── strand-repeater-row.js │ └── strand-repeater-row.scss ├── strand-repeater │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-repeater.html │ ├── strand-repeater.js │ └── strand-repeater.scss ├── strand-scroll-panel │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-scroll-panel.html │ ├── strand-scroll-panel.js │ └── strand-scroll-panel.scss ├── strand-scrollbar-y │ ├── strand-scrollbar-y.html │ ├── strand-scrollbar-y.js │ └── strand-scrollbar-y.scss ├── strand-spinner │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-spinner.html │ ├── strand-spinner.js │ └── strand-spinner.scss ├── strand-sync │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-sync.html │ ├── strand-sync.js │ ├── strand-sync.json │ └── strand-sync.scss ├── strand-tab │ ├── doc.json │ ├── example.html │ ├── strand-tab.html │ ├── strand-tab.js │ └── strand-tab.scss ├── strand-tabs │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-tabs.html │ ├── strand-tabs.js │ ├── strand-tabs.scss │ ├── tab-content-alt.html │ └── tab-content.html ├── strand-template-finder │ ├── index.html │ ├── strand-template-finder.html │ ├── strand-template-finder.js │ ├── strand-template-finder.scss │ └── template.html ├── strand-test-form-view │ ├── index.html │ ├── strand-test-form-view.html │ ├── strand-test-form-view.js │ └── strand-test-form-view.scss ├── strand-textarea │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-textarea.html │ ├── strand-textarea.js │ └── strand-textarea.scss ├── strand-timeformat │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-timeformat.html │ ├── strand-timeformat.js │ └── strand-timeformat.scss ├── strand-timepicker │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-timepicker.html │ ├── strand-timepicker.js │ └── strand-timepicker.scss ├── strand-tooltip │ ├── doc.json │ ├── example.html │ ├── index.html │ ├── strand-tooltip.html │ ├── strand-tooltip.js │ └── strand-tooltip.scss ├── strand-view-manager │ ├── index.html │ ├── strand-view-manager.html │ ├── strand-view-manager.js │ └── strand-view-manager.scss ├── strand-wizard-ribbon │ ├── index.html │ ├── strand-wizard-ribbon.html │ ├── strand-wizard-ribbon.js │ └── strand-wizard-ribbon.scss ├── strand-wizard │ ├── index.html │ ├── strand-wizard.html │ ├── strand-wizard.js │ └── strand-wizard.scss └── strand.html ├── test ├── TestHelper.js ├── behavior_autoclosable.html ├── behavior_autotogglable.html ├── behavior_closable.html ├── behavior_collection.html ├── behavior_debouncable.html ├── behavior_domgettable.html ├── behavior_dommutable.html ├── behavior_domsyncable.html ├── behavior_falsifiable.html ├── behavior_followable.html ├── behavior_jqueryable.html ├── behavior_keyboardable.html ├── behavior_keyselectable.html ├── behavior_model.html ├── behavior_mousewheelable.html ├── behavior_pageable.html ├── behavior_positionable-dropdown.html ├── behavior_positionable-panel.html ├── behavior_positionable.html ├── behavior_resizable.html ├── behavior_selectable.html ├── behavior_sizeresponsible.html ├── behavior_stackable.html ├── behavior_stampbindable.html ├── behavior_stylable.html ├── behavior_templatefindable.html ├── behavior_validatable.html ├── behavior_windownotifier.html ├── imports │ ├── test-strand-tabs-aux.html │ ├── test-strand-template-finder.html │ └── test_sizeresponsible_iframe.html ├── lib_ajax.html ├── lib_ajaxapiplugin.html ├── lib_ajaxbusterplugin.html ├── lib_ajaxcsrfplugin.html ├── lib_ajaxpageplugin.html ├── lib_ajaxplugin.html ├── lib_behaviorutils.html ├── lib_bitmask.html ├── lib_continuum.html ├── lib_datautils.html ├── lib_fontloader.html ├── lib_measure.html ├── lib_point.html ├── lib_rectangle.html ├── lib_recycler.html ├── lib_request.html ├── lib_requestqueue.html ├── lib_snake.html ├── lib_storage.html ├── lib_sync.html ├── strand-action.html ├── strand-ajax.html ├── strand-autocomplete.html ├── strand-button.html ├── strand-calendar.html ├── strand-checkbox.html ├── strand-collection.html ├── strand-currency.html ├── strand-datepicker.html ├── strand-dialog.html ├── strand-drawer.html ├── strand-dropdown.html ├── strand-fetch.html ├── strand-file-upload.html ├── strand-footer.html ├── strand-form.html ├── strand-grid-column.html ├── strand-grid-item.html ├── strand-grid.html ├── strand-group.html ├── strand-guide.html ├── strand-header.html ├── strand-highlight.html ├── strand-icon.html ├── strand-inline-box.html ├── strand-input-mask.html ├── strand-input.html ├── strand-item-recycler.html ├── strand-list-item.html ├── strand-loader.html ├── strand-localstore.html ├── strand-menu.html ├── strand-modal.html ├── strand-model.html ├── strand-popover.html ├── strand-progress-bar.html ├── strand-pulldown-button.html ├── strand-radio.html ├── strand-repeater-row.html ├── strand-repeater.html ├── strand-scroll-panel.html ├── strand-spinner.html ├── strand-sync.html ├── strand-tabs.html ├── strand-template-finder.html ├── strand-textarea.html ├── strand-timeformat.html ├── strand-tooltip.html └── strand-view-manager.html └── wct.conf.json /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | node_modules/ 3 | build/ 4 | build_docs/ 5 | .grunt 6 | .idea 7 | .publish 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | dist: trusty 4 | node_js: stable 5 | addons: 6 | firefox: "46.0" 7 | apt: 8 | sources: 9 | - google-chrome 10 | - ubuntu-toolchain-r-test 11 | packages: 12 | - google-chrome-stable 13 | - g++-4.8 14 | before_install: 15 | - source /opt/jdk_switcher/jdk_switcher.sh 16 | - jdk_switcher use oraclejdk8 17 | before_script: 18 | - npm install -g bower web-component-tester 19 | - npm install 20 | - bower install 21 | - gulp clean 22 | - gulp build 23 | script: xvfb-run wct 24 | env: 25 | global: 26 | - CXX=g++-4.8 27 | -------------------------------------------------------------------------------- /BANNER.txt: -------------------------------------------------------------------------------- 1 | * @license 2 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 3 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 4 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | strand.mediamath.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Strand 2 | 3 | [![Build Status](https://travis-ci.org/MediaMath/strand.svg)](https://travis-ci.org/MediaMath/strand) 4 | 5 | ### Overview 6 | Strand leverages the [Polymer Project](https://www.polymer-project.org) to provide a collection of modular, reusable [Web Components](http://webcomponents.org/). By using Strand, developers can create and customize new and existing user interfaces with consistency and ease. 7 | 8 | ### Installation 9 | 10 | Use [Bower](http://bower.io/) to get the latest version of Strand: 11 | 12 | `$ bower install strand` 13 | 14 | Then include the Web Components polyfill and import the Strand library in your page: 15 | 16 | ```html 17 | 18 | 19 | ``` 20 | 21 | For more information and documentation see [Getting Started](http://mediamath.github.io/strand/article_getting_started.html). 22 | -------------------------------------------------------------------------------- /RELEASE.md: -------------------------------------------------------------------------------- 1 | #Strand - Release 2 | 3 | ## code release 4 | * merge develop into master 5 | * `git checkout master` 6 | * `git fetch origin master` 7 | * `git pull origin master` 8 | * `git merge origin develop` 9 | * then: `gulp release:[major|minor|patch]` 10 | * push tags: `git push --tags` 11 | * merge master back into develop 12 | * `git checkout develop` 13 | * `git fetch origin develop` 14 | * `git pull origin develop` 15 | * `git merge origin master` 16 | 17 | ## docs release 18 | * `gulp docs` 19 | * verify via `gulp live:docs` 20 | * push via `gulp gh-pages` 21 | 22 | ## notify interested parties 23 | 24 | Internal release notes - craft an email in this format: 25 | 26 | ``` 27 | Features: (a condensed, readable version additions derived from changelog.md) 28 | * some feature 29 | * some feature 30 | 31 | Bug Fixes: (a condensed, readable version fixes derived from changelog.md) 32 | * some fix 33 | * some fix 34 | 35 | (always includes a link to current the changelog.md) 36 | https://github.com/MediaMath/strand/blob/master/CHANGELOG.md 37 | ``` 38 | 39 | -------------------------------------------------------------------------------- /apple-ipad-icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/apple-ipad-icon@2x.png -------------------------------------------------------------------------------- /apple-iphone-icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/apple-iphone-icon@2x.png -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | strand.mediamath.com -------------------------------------------------------------------------------- /docs/articles/grid_intro.md: -------------------------------------------------------------------------------- 1 | # Introduction to strand-grid 2 | 3 | ## Overview 4 | `strand-grid` is a multi-purpose component for displaying tabular data. It has a number of customizable attributes and sub-components that allow a developer to change its functionality to fit a variety use-cases. Internally it uses a concept known as "item recycling" - reusing a small pool of DOM elements, which drastically improves the rendering performance of large datasets. 5 | 6 | ## Related Components 7 | 8 | Sub-components that are used with strand-grid: 9 | 10 | * [strand-grid-column](strand-grid-column.html): defines data-fields and constructs column headers 11 | * [strand-grid-item](strand-grid-item.html): default item template that works with grid-columns to perform tasks like column resizing 12 | * [strand-item-recycler](strand-item-recycler.html): reuses DOM elements to boost rendering performance 13 | 14 | 15 | #### Continue Reading → [Configuring strand-grid](article_grid_config.html) -------------------------------------------------------------------------------- /docs/articles/manifest.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "key":"getting_started" 4 | }, 5 | { 6 | "key":"data_comps_intro", 7 | "children":["data_comps_using_ajax","data_comps_using_sync"] 8 | }, 9 | { 10 | "key":"grid_intro", 11 | "children":["grid_config", "grid_data_integration", "grid_custom_grid_item"] 12 | }, 13 | { 14 | "key":"migration_guide" 15 | }, 16 | { 17 | "key":"repeater" 18 | } 19 | ] 20 | -------------------------------------------------------------------------------- /docs/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/apple-touch-icons.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/docs/images/apple-touch-icons.sketch -------------------------------------------------------------------------------- /docs/sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | Articles 3 | {{#articleMap}} 4 | {{name}} 5 | {{#children.length}} 6 | {{#children}} 7 | {{name}} 8 | {{/children}} 9 | {{/children.length}} 10 | {{/articleMap}} 11 | 12 | 13 | Components 14 | {{#modules}} 15 | {{name}} 16 | {{/modules}} 17 | 18 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/favicon.ico -------------------------------------------------------------------------------- /gulp/env.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | var fs = require('fs'); 5 | var gif = require('gulp-if'); 6 | var gutil = require('gulp-util'); 7 | var debug = require('gulp-debug'); 8 | 9 | var IS_DEBUG = !!gutil.env.debug; 10 | 11 | function dbg(t) { 12 | return gif(IS_DEBUG, debug({title:t})); 13 | } 14 | 15 | function getPkgInfo() { 16 | return JSON.parse(fs.readFileSync('package.json', 'utf8')); 17 | } 18 | 19 | module.exports = { 20 | ROOT: '.', 21 | SRC: 'src/', 22 | BUILD: 'build/', 23 | BUILD_DOCS: 'build_docs/', 24 | DOCS: 'docs/', 25 | DIST: 'dist/', 26 | TEMPLATES: 'gulp/templates/', 27 | MODULE_MASK: 'strand-*', 28 | MODULE_HTML: 'strand-*.html', 29 | MODULE_JS: 'strand-*.js', 30 | SHARED: 'shared/', 31 | BOWER: 'bower_components/', 32 | SASS_INCLUDE: ['bower_components/bourbon/app/assets/stylesheets/', 'src/shared/sass/'], 33 | LIVE_PORT: 8000, 34 | DOCS_PORT: 8001, 35 | PATCH_LIST: [ 36 | 'bower_components/moment/min/moment.min.js' 37 | ], 38 | 39 | dbg: dbg, 40 | getPkgInfo: getPkgInfo 41 | }; 42 | })(); 43 | -------------------------------------------------------------------------------- /gulp/templates/font_template.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gulp/templates/lib_color.js: -------------------------------------------------------------------------------- 1 | /* 2 | NOTE: GENERATED FILE DO NOT MANUALLY EDIT -- 3 | EDIT TEMPLATE SOURCE IN `build/lib_color.js` 4 | EDIT COLORS in sass/_colors.scss 5 | */ 6 | 7 | (function () { 8 | 9 | var colors = { 10 | {{{colors}}} 11 | }; 12 | 13 | function getValue(key) { 14 | var h = "#"; 15 | if (key[0] === h) { 16 | return key; 17 | } else { 18 | return h + this[key].toString(16); 19 | } 20 | } 21 | 22 | colors.getValue = getValue; 23 | window.Colors = colors; 24 | })(); 25 | 26 | -------------------------------------------------------------------------------- /gulp/templates/lib_index_template.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gulp/templates/lib_loader.js: -------------------------------------------------------------------------------- 1 | document.write(''); 2 | -------------------------------------------------------------------------------- /gulp/templates/lib_template.html: -------------------------------------------------------------------------------- 1 | {{#shared}} 2 | 3 | {{/shared}} 4 | {{#modules}} 5 | 6 | {{/modules}} 7 | -------------------------------------------------------------------------------- /gulp/templates/lib_version.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /gulp/templates/style_module_template.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /*jslint node: true */ 3 | /*jslint esversion: 6*/ 4 | 5 | var gulp = require('gulp'); 6 | var path = require('path'); 7 | var j = path.join; 8 | 9 | //gulp plugins 10 | var plugins = require('gulp-load-plugins')({ 11 | camelize: true, 12 | lazy: true, 13 | rename: { 14 | 'gulp-util': 'gutil', 15 | 'gulp-if': 'gif', 16 | 'gulp-minify-html': 'htmlmin', 17 | 'gulp-minify-inline': 'inlinemin', 18 | 'gulp-cached': 'cache' 19 | } 20 | }); 21 | 22 | var C = require(j(__dirname, 'gulp/env.js')); 23 | 24 | var build = require(j(__dirname, 'gulp/tasks/build.js'))(gulp, plugins, C); 25 | var docs = require(j(__dirname, 'gulp/tasks/docs.js'))(gulp, plugins, C); 26 | var live = require(j(__dirname, 'gulp/tasks/live.js'))(gulp, plugins, C); 27 | var release = require(j(__dirname, 'gulp/tasks/release.js'))(gulp, plugins, C); 28 | -------------------------------------------------------------------------------- /src/shared/behaviors/autoclosable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Autoclosable", 3 | "description": "Instructs the element to close if the user clicks outside of the component or it's target element.", 4 | "attributes":[ 5 | { 6 | "name":"auto", 7 | "type":"Boolean", 8 | "description":"If set to true, instructs the element to close if the user clicks outside of the component or it's target element.", 9 | "default":"true", 10 | "options":["true", "false"], 11 | "attribute":"N/A" 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /src/shared/behaviors/autotogglable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AutoTogglable", 3 | "description": "Toggles the component's visual state when clicking upon a trigger element.", 4 | "attributes": [ 5 | { 6 | "name":"toggleTrigger", 7 | "type":"Object or String", 8 | "description":"An HTMLElement which, when clicked, toggles the component's visual state. A selector may also be passed as a String.", 9 | "attribute":"toggle-trigger" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /src/shared/behaviors/columnable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Columnable", 3 | "description": "Enables an element to construct a column layout.", 4 | "attributes": [ 5 | { 6 | "name":"columns", 7 | "type":"Number", 8 | "description":"The desired total number of columns. Divs with a class of 'col' will be affected and scaled appropriately.", 9 | "optional":true, 10 | "default":"4" 11 | }, 12 | { 13 | "name":"vSpace", 14 | "type":"Number", 15 | "description":"The desired vertical space between columns. Divs with a class of 'col' will be affected and and given a margin-bottom matching the number provided.", 16 | "optional":true, 17 | "default":"10", 18 | "attribute":"h-space" 19 | }, 20 | { 21 | "name":"hSpace", 22 | "type":"Number", 23 | "description":"The desired vertical space between columns. Divs with a class of 'col' will be affected and and given a margin-bottom matching the number provided.", 24 | "optional":true, 25 | "default":"10", 26 | "attribute":"h-space" 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/shared/behaviors/debouncable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Debouncable", 3 | "description": "Listens for multiple property changed events to occur and only dispatches an event when all observed properties have changed.", 4 | "attributes" : [ 5 | { 6 | "name" : "debouncers", 7 | "type":"String", 8 | "description":"An array of property-changed events in the format { keys: Array, type: String, callback: Function(key, debouncer) }.", 9 | "default":"closed", 10 | "options":["opened", "closed"] 11 | }, 12 | { 13 | "name" : "resetDebouncer", 14 | "type":"Boolean", 15 | "description":"When true the semaphore state is reset on each 'tick' of the debouncer, so it is only ever triggered when calls occur within the same tick.", 16 | "optional":true, 17 | "default":"closed", 18 | "options":["true", "false"], 19 | "attribute":"N/A" 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /src/shared/behaviors/domsyncable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DomSyncable", 3 | "description": "A behavior applied over any sync or syncable containers which will attempt to call get or post when the dom configuration changes.", 4 | "attributes":[ 5 | { 6 | "name":"auto", 7 | "type":"Boolean", 8 | "description":"When true, changes to dom configuration will result in AJAX calls being made on the parent object.", 9 | "default":"true", 10 | "options":["true", "false"] 11 | }, 12 | { 13 | "name":"autoDebounce", 14 | "type":"Number", 15 | "description":"The time in milliseconds to debounce dom changes against. This prevents racing calls from keyboard manipulation or other user input binding scenarios.", 16 | "attribute":"auto-debounce", 17 | "default":"200" 18 | } 19 | ], 20 | "methods":[ 21 | ] 22 | } -------------------------------------------------------------------------------- /src/shared/behaviors/falsifiable.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /src/shared/behaviors/falsifiable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Falsifiable", 3 | "description": "Makes the element set Boolean properties to false if the corresponding attribute is set to 'false'.", 4 | "methods":[ 5 | { 6 | "name":"deserialize", 7 | "description":"Overrides Polymer.Base.deserialize method to convert string values of 'true' or 'false' to Boolean values.", 8 | "arguements":[ 9 | { 10 | "name":"value", 11 | "type":"String", 12 | "description":"The value of the property being changed." 13 | }, 14 | { 15 | "name":"type", 16 | "type":"String", 17 | "description":"The type of the property being changed." 18 | } 19 | ] 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /src/shared/behaviors/followable.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /src/shared/behaviors/jqueryable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Jqueryable", 3 | "description":"Lets Jquery to play nice with Strand elements by overriding Node instance methods to use Polymer.dom api" 4 | } -------------------------------------------------------------------------------- /src/shared/behaviors/keyboardable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Keyboardable", 3 | "description": "Provides stub functions for routing keyboard events" 4 | } -------------------------------------------------------------------------------- /src/shared/behaviors/keyselectable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"KeySelectable", 3 | "description":"Interfaces keyboard events with the Selectable behavior", 4 | "attributes":[ 5 | { 6 | "name":"maxItems", 7 | "type":"Number", 8 | "description":"Limits the number of list items displayed, allowing the list to scroll vertically if necessary.", 9 | "optional":true, 10 | "default":"10", 11 | "attribute":"max-items" 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /src/shared/behaviors/lightdomgettable.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /src/shared/behaviors/lightdomgettable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"LightDomGettable", 3 | "description":"Provides a convenience method to get the element's light DOM children", 4 | "attributes":[ 5 | { 6 | "name":"contentTarget", 7 | "type":"Object", 8 | "description":"The target element to query for light dom children. Usually the component itself.", 9 | "default":"this", 10 | "attribute":"N/A" 11 | } 12 | ], 13 | "methods":[ 14 | { 15 | "name": "getLightDOM", 16 | "description": "Returns the distributed light dom children of the element specified by the contentTarget property." 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /src/shared/behaviors/mousewheelable.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/behaviors/mousewheelable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"MouseWheelable", 3 | "description":"Provides a stub for cross-browser mouse wheel events", 4 | "attributes":[ 5 | { 6 | "name":"support", 7 | "type":"String", 8 | "description":"Returns the type of supported event mousewheel interactions.", 9 | "default":"none", 10 | "attribute":"N/A", 11 | "readOnly":true 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /src/shared/behaviors/nonscrollable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"NonScrollable", 3 | "description":"Blocks scrolling while positionable components are displayed.", 4 | "attributes":[ 5 | { 6 | "name":"disableScroll", 7 | "type":"Boolean", 8 | "description":"Instructs the component to disable scrolling of the host page (or component) when a positionable panel has been opened by the user. Because Strand disables scrolling by capturing pointer events, if there is a desire to allow clicks outside of the positionable panel (such as a target strand-icon, in the case of a strand-tooltip) set this property to 'false'.", 9 | "default":"true", 10 | "attribute":"disable-scroll", 11 | "optional":true, 12 | "options":["true","false"] 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/shared/behaviors/positionable-dropdown.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"PositionableDropdown", 3 | "description":"Positions the dropdown panel for dropdown-like elements (strand-dropdown, strand-autocomplete, strand-pulldown-button)", 4 | "attributes": [ 5 | { 6 | "name":"overflow", 7 | "type":"String", 8 | "description":"The behavior of the dropdown panel when the width of its content exceeds the width of the element. If set to `hidden`, the dropdown panel will truncate its content. If set to `visible`, the dropdown panel will expand to the width of its content.", 9 | "optional":false, 10 | "default":"hidden", 11 | "options":["hidden","visible"] 12 | }, 13 | { 14 | "name":"overflowWidth", 15 | "type":"Number", 16 | "description":"The maximum width of the dropdown panel, after which it will truncate its content. If overflowWidth is set, the element will ignore its overflow property.", 17 | "optional":true, 18 | "attribute":"overflow-width" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/shared/behaviors/positionable-panel.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"PositionablePanel", 3 | "description":"Positions the popover panel for popover-like elements (strand-popover, strand-tooltip, strand-datepicker)", 4 | "attributes": [ 5 | { 6 | "name":"direction", 7 | "type":"String", 8 | "description":"The position of the popover panel relative to its target, expressed as a cardinal direction. If the panel is positioned outside the viewport because of this property, the element will attempt to reverse the direction.", 9 | "optional":false, 10 | "default":"s", 11 | "options":["n","e","s","w"] 12 | }, 13 | { 14 | "name":"target", 15 | "type":"Object or String", 16 | "description": "An HTMLElement that toggles the element's visual state when clicked. A valid selector may be passed to this attribute as a String.", 17 | "optional":false, 18 | "default": "none" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/shared/behaviors/refable.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /src/shared/behaviors/refable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Refable", 3 | "description":"Exposes a reference to the component, and method to find other components within it's scope. Intended for complex nested circumstances where the components scope could be changed (like custom strand-grid items).", 4 | "attributes": [ 5 | { 6 | "name":"ref", 7 | "type":"Object", 8 | "description":"Returns a referece to the component itself." 9 | } 10 | ], 11 | "methods": [ 12 | { 13 | "name":"findById", 14 | "description":"Returns a reference to an element within the scope of this element. Intended for complex nested circumstances where the components scope could be changed (like custom strand-grid items).", 15 | "arguments":[ 16 | { 17 | "name":"id", 18 | "type":"String", 19 | "optional":false, 20 | "default":"none", 21 | "description":"The id of the component to find." 22 | } 23 | ] 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /src/shared/behaviors/resizable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Resizable", 3 | "description":"Provides a callback for when the element resizes. Differs from the StrandTraits.SizeResponsible because measurements are tracked via requestAnimationFrame.", 4 | "attributes":[ 5 | { 6 | "name":"resizeTarget", 7 | "description":"Sets the target element which will respond on resize.", 8 | "optional":true, 9 | "default":"this", 10 | "attribute":"N/A" 11 | } 12 | ], 13 | "methods":[ 14 | { 15 | "name":"elementResize", 16 | "description":"Abstract method, called on element resize.", 17 | "arguements":[ 18 | { 19 | "name":"w", 20 | "type":"Number", 21 | "description":"The new offsetWidth of the target element, if it has changed. Otherwise returns null." 22 | }, 23 | { 24 | "name":"h", 25 | "type":"Number", 26 | "description":"The new offsetHeight of the target element. Otherwise returns null." 27 | }, 28 | { 29 | "name":"target", 30 | "type":"Object", 31 | "description":"The element which was resized." 32 | } 33 | ] 34 | } 35 | ] 36 | } -------------------------------------------------------------------------------- /src/shared/behaviors/resolvable.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /src/shared/behaviors/resolvable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Resolvable", 3 | "description":"Removes the 'unresolved' attribute, if present, when the host component is ready.", 4 | "attributes":[] 5 | } -------------------------------------------------------------------------------- /src/shared/behaviors/selectable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Selectable", 3 | "description":"Tracks a selected and highlighted item by index from a list of items", 4 | "attributes": [ 5 | { 6 | "name":"selectedIndex", 7 | "type":"Number", 8 | "description":"An integer representing the index of the selected list item from the dropdown panel. As the list items will be filtered upon user interaction - the number returned will correspond with the index of the item in original data set (see 'data' for more information).", 9 | "optional":false, 10 | "default":"true", 11 | "attribute":"N/A" 12 | }, 13 | { 14 | "name":"items", 15 | "type":"Array", 16 | "description":"Returns a list of the items that may be selected. In some case these will be data objects, and light dom children in others.", 17 | "optional":false, 18 | "default":"[]", 19 | "readOnly":true, 20 | "attribute":"N/A" 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /src/shared/behaviors/sizeresponsible.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"SizeResponsible", 3 | "description":"A behavior for detecting element resize (adapted from https://github.com/sdecima/javascript-detect-element-resize). To be used in conjunction with the _sizeresponsible.scss mixin.", 4 | "methods": [ 5 | { 6 | "name":"addResizeListener", 7 | "description":"Adds a listener to the target element which will respond on resize.", 8 | "arguements":[ 9 | { 10 | "name":"fn", 11 | "description":"The callback function for elememt resize." 12 | }, 13 | { 14 | "name":"target", 15 | "description":"The elememt which will respond on resize." 16 | } 17 | ] 18 | }, 19 | { 20 | "name":"removeResizeListener", 21 | "description":"Removes the listener from the target element which will responded on resize.", 22 | "arguements":[ 23 | { 24 | "name":"fn", 25 | "description":"The callback function for elememt resize." 26 | }, 27 | { 28 | "name":"target", 29 | "description":"The elememt which will respond on resize." 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/shared/behaviors/stackable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Stackable", 3 | "description":"Controls z-index stacking for components.", 4 | "attributes": [ 5 | { 6 | "name":"depth", 7 | "type":"Number", 8 | "description":"Returns the z-index depth of the element.", 9 | "readOnly":true, 10 | "default":"0", 11 | "attribute":"N/A" 12 | }, 13 | { 14 | "name":"stackType", 15 | "type":"String", 16 | "description":"Sets or returns the stacking type for the element. Stacking types are 'ui' which starts at an index of 10000, 'modal' which starts at index 20000, and 'tooltip' which starts at index 30000.", 17 | "default":"ui", 18 | "attribute":"stack-type", 19 | "options":["ui", "modal", "tooltip"] 20 | } 21 | ], 22 | "methods":[ 23 | { 24 | "name":"moveToTop", 25 | "description":"Instructs the element to move to the top index of it's stacking type." 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/shared/behaviors/stampbindable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"StampBindable", 3 | "description":"", 4 | "attributes": [] 5 | } -------------------------------------------------------------------------------- /src/shared/behaviors/stylable.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/behaviors/stylable.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Stylable", 3 | "description":"Provides convenience methods that serialize objects into inline style or classes for attribute binding.", 4 | "methods":[ 5 | { 6 | "name" : "styleBlock", 7 | "description":"Returns an array of styles to be used in attribute binding.", 8 | "arguements":[ 9 | { 10 | "name":"styles", 11 | "description":"An object containing styles desired to be set." 12 | } 13 | ] 14 | }, 15 | { 16 | "name" : "classBlock", 17 | "description":"Returns an array of classes to be used in attribute binding.", 18 | "arguements":[ 19 | { 20 | "name":"classes", 21 | "description":"An object containing the classes to be used in attribute binding." 22 | } 23 | ] 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /src/shared/behaviors/windownotifier.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"WindowNotifier", 3 | "description":"Listens for scroll and resize events on the window, and notifies registered element instances which may need to respond.", 4 | "methods": [ 5 | { 6 | "name":"resize", 7 | "description":"Abstract method, called when the widow resizes." 8 | }, 9 | { 10 | "name":"scroll", 11 | "description":"Abstract method, called when the widow scrolls." 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-bold.eot -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-bold.ttf -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-bold.woff -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-bolditalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-bolditalic.eot -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-bolditalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-bolditalic.ttf -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-bolditalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-bolditalic.woff -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-italic.eot -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-italic.ttf -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-italic.woff -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-regular.eot -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-regular.ttf -------------------------------------------------------------------------------- /src/shared/fonts/a/arimo-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/a/arimo-regular.woff -------------------------------------------------------------------------------- /src/shared/fonts/fonts.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_fonts"; 9 | 10 | 11 | @include arimoRegularWoff(); 12 | @include arimoBoldWoff(); 13 | @include arimoBoldItalicWoff(); 14 | @include arimoItalicWoff(); 15 | @include iconWoff(); -------------------------------------------------------------------------------- /src/shared/fonts/icon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MediaMath/strand/369956876d6bdd0f63c4f668f3e1700b9f4ead37/src/shared/fonts/icon/icomoon.woff -------------------------------------------------------------------------------- /src/shared/js/ajaxbusterplugin.html: -------------------------------------------------------------------------------- 1 | 2 | 31 | -------------------------------------------------------------------------------- /src/shared/js/bitmask.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/js/colors.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/js/datetimeutils.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/shared/js/es6-promise.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/shared/js/eventdispatcher.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/js/fetch.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/shared/js/moment.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /src/shared/js/momentrange.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /src/shared/js/point.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/js/validator.html: -------------------------------------------------------------------------------- 1 | 2 | 37 | -------------------------------------------------------------------------------- /src/shared/js/zousan.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /src/shared/sass/_disable.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | 8 | @mixin disabled { 9 | &[disabled] { 10 | pointer-events:none; 11 | opacity: 0.5; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/shared/sass/_docs_theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | $linkColor: #4d99bf; 8 | $white: #fff; 9 | $textColor: #333; 10 | $bgGray: #f8f8f8; 11 | $headlineColor: #ff3366; 12 | $borderColor: rgba(51,51,51, 0.2); 13 | $borderColorLight: rgba(51,51,51, 0.07); 14 | $footerColor: #f8f8f8; 15 | $mainNavBg: #e4e1ef; -------------------------------------------------------------------------------- /src/shared/sass/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | :host ._mm_column { 8 | overflow: hidden; 9 | text-overflow: ellipsis; 10 | white-space: nowrap; 11 | padding: 0px 10px; 12 | vertical-align: middle; 13 | box-sizing: border-box; 14 | float: left; 15 | min-height: 1px; 16 | 17 | &.right { 18 | text-align: right; 19 | } 20 | 21 | &.checkbox, 22 | &.toggle { 23 | box-sizing: content-box; 24 | margin: auto 0; 25 | padding: 0px 5px; 26 | 27 | &:first-of-type { 28 | padding-left: 15px; 29 | } 30 | } 31 | 32 | &.checkbox { 33 | width: 18px; 34 | } 35 | 36 | &.toggle { 37 | width: 10px; 38 | 39 | strand-icon { 40 | cursor: pointer; 41 | transform: translateY(-1px) rotate(-90deg); 42 | } 43 | 44 | &.expanded { 45 | strand-icon { 46 | transform: translateY(-1px) rotate(0deg); 47 | } 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /src/shared/sass/_sizeresponsible.scss: -------------------------------------------------------------------------------- 1 | @keyframes resizeanim { 2 | from { opacity: 0; } to { opacity: 0; } 3 | } 4 | 5 | .resize-triggers { 6 | animation: 1ms resizeanim; 7 | visibility: hidden; 8 | opacity: 0; 9 | } 10 | 11 | .resize-triggers, 12 | .resize-triggers > div, 13 | .contract-trigger:before { 14 | content: " "; 15 | display: block; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | height: 100%; 20 | width: 100%; 21 | overflow: hidden; 22 | } 23 | 24 | .resize-triggers > div { 25 | background: #eee; 26 | /* 27 | overflow: auto; 28 | */ 29 | } 30 | 31 | .contract-trigger:before { 32 | width: 200%; 33 | height: 200%; 34 | } -------------------------------------------------------------------------------- /src/shared/sass/_text.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | // text styles 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | h1, .header-large { 12 | @include defaultFont(20px, 25px, 700); 13 | color: $color-A2; 14 | } 15 | 16 | h2, .header-medium { 17 | @include defaultFont(15px, 20px, 700); 18 | color: $color-A2; 19 | } 20 | 21 | h3, .header-small { 22 | @include defaultFont(13px, 18px, 700); 23 | color: $color-A2; 24 | } 25 | 26 | h4, .header-normal { 27 | @include defaultFont(11px, 14px, 700, normal); 28 | color: $color-D2; 29 | text-transform: uppercase; 30 | } 31 | 32 | h5, .header-tiny { 33 | @include defaultFont(9px, 12px, 700, normal); 34 | color: $color-A3; 35 | text-transform: uppercase; 36 | } 37 | 38 | .body-normal { 39 | @include defaultFont(); 40 | color: $color-A2; 41 | } -------------------------------------------------------------------------------- /src/shared/svg/action.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/shared/svg/all-channels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shared/svg/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/shared/svg/bar-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/block-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/campaigns.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/svg/carat-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/carat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /src/shared/svg/changelog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/circle-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/companion.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/contextual.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /src/shared/svg/creatives.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 11 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/svg/cycle-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/details.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/svg/display.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/shared/svg/document.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/drag-drop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/duplicate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/exclude.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shared/svg/expand-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/fail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/favorite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/geo-tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/grid-table.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shared/svg/group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/include-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/include.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shared/svg/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/jump-to.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/svg/left-right-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/line-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/markets.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/partial-include.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/partial.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/pixel-user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/svg/pixels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/player.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/shared/svg/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/quick-edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shared/svg/reporting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shared/svg/sort.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/three-pas-adserver.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/shared/svg/tracker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/unlock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/svg/up-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/shared/svg/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/shared/svg/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/shared/svg/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/svg/xml.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/strand-action/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/strand-ajax/example.html: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/strand-ajax/strand-ajax.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/strand-ajax/strand-ajax.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | :host { 8 | display:none; 9 | 10 | 11 | } -------------------------------------------------------------------------------- /src/strand-array-munge/strand-array-munge.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/strand-array-munge/strand-array-munge.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | // @import "_bourbon"; 8 | // @import "_color"; 9 | // @import "_mixins"; 10 | 11 | :host { 12 | display:none; 13 | } 14 | -------------------------------------------------------------------------------- /src/strand-autocomplete/strand-autocomplete.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-dropdown sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_dropdown"; 11 | @import "_mixins"; 12 | 13 | :host { 14 | position: relative; 15 | display: inline-block; 16 | vertical-align: middle; 17 | font-size: 0em; 18 | line-height: 0em; 19 | } 20 | 21 | :host([disabled]) { 22 | pointer-events:none; 23 | opacity: 0.5; 24 | } 25 | 26 | @include fit(); -------------------------------------------------------------------------------- /src/strand-box/example.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /src/strand-box/strand-box.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /src/strand-box/strand-box.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | position: relative; 14 | display: flex; 15 | } -------------------------------------------------------------------------------- /src/strand-button/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/strand-button/strand-button.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-button sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | @import "_button"; 12 | 13 | :host { 14 | position: relative; 15 | display: inline-block; 16 | vertical-align: middle; 17 | font-size: 0em; 18 | line-height: 0em; 19 | } 20 | 21 | :host([disabled]) { 22 | pointer-events:none; 23 | opacity: 0.5; 24 | } 25 | 26 | :host([selected]) .button.primary { 27 | @include buttonSelected($color-D22, $color-D5, $color-D22); 28 | } 29 | 30 | :host([selected]) .button.secondary { 31 | @include buttonSelected($color-A20, $color-A9, $color-A20); 32 | } 33 | 34 | @include fit(); 35 | 36 | .button.fit { 37 | @include fitContent(); 38 | justify-content: center; 39 | } -------------------------------------------------------------------------------- /src/strand-calendar/example.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/strand-calendar/pointer-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/strand-checkbox/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/strand-collection/example.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/strand-collection/strand-collection.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/strand-collection/strand-collection.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | 9 | var DataUtils = StrandLib.DataUtils; 10 | var Sync = StrandLib.Sync; 11 | var Collection = StrandLib.Collection; 12 | 13 | scope.Collection = Polymer({ 14 | 15 | is:"strand-collection", 16 | 17 | _cidIndex: 0, 18 | 19 | properties: { 20 | 21 | }, 22 | 23 | behaviors: [ 24 | // StrandLib.Sync.getBehavior(), //interhited from pageable 25 | StrandTraits.Collection, 26 | StrandTraits.Pageable, 27 | StrandTraits.Refable 28 | ], 29 | 30 | 31 | }); 32 | })(window.Strand = window.Strand || {}); 33 | -------------------------------------------------------------------------------- /src/strand-collection/strand-collection.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | :host { 8 | display:none; 9 | } -------------------------------------------------------------------------------- /src/strand-componentizer/strand-componentizer.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/strand-currency/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-currency", 3 | "description":"Numeric currency formatting. Defaults to locale for decimal format.", 4 | "attributes": [ 5 | { 6 | "name":"currency", 7 | "type":"String", 8 | "description":"The 3 letter currency code to use for conversion.", 9 | "default":"USD", 10 | "attribute":"currency" 11 | }, 12 | { 13 | "name":"precision", 14 | "type":"Number", 15 | "description":"The number of decimals to use for the fractional part of represented value", 16 | "default":"2", 17 | "attribute":"precision" 18 | }, 19 | { 20 | "name":"value", 21 | "type":"Number", 22 | "description":"The raw number to format for a given currency", 23 | "default":"0", 24 | "attribute":"value" 25 | }, 26 | { 27 | "name":"locale", 28 | "type":"String", 29 | "description":"The locale to use for decimal formatting. Defaults to navigator.language.", 30 | "default":"navigator.language value", 31 | "attribute":"locale" 32 | } 33 | ], 34 | "behaviors" : [ 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /src/strand-currency/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/strand-currency/strand-currency.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/strand-currency/strand-currency.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | } 14 | -------------------------------------------------------------------------------- /src/strand-datepicker-panel/strand-datepicker-panel.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | :host { 12 | box-sizing: border-box; 13 | background: $color-F0; 14 | position: relative; 15 | float: left; 16 | width: 212px; 17 | } 18 | 19 | strand-calendar { 20 | padding: 5px 12px 12px 12px; 21 | } 22 | 23 | .top { 24 | box-sizing: border-box; 25 | width: 100%; 26 | padding: 15px; 27 | 28 | strand-header { 29 | display: block; 30 | } 31 | 32 | :not(:last-child) { 33 | margin-bottom: 10px; 34 | } 35 | } 36 | 37 | strand-timepicker { 38 | padding: 0 15px 15px; 39 | } 40 | -------------------------------------------------------------------------------- /src/strand-datepicker/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/strand-docs-nav/strand-docs-nav.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 22 | 23 | -------------------------------------------------------------------------------- /src/strand-docs-nav/strand-docs-nav.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_mixins"; 9 | 10 | :host { 11 | display: block; 12 | position: relative; 13 | box-sizing: border-box; 14 | border-top: 1px solid #cccccc; 15 | border-bottom: 1px solid #cccccc; 16 | } 17 | 18 | :host(:not(:last-of-type)) { 19 | border-bottom: none; 20 | } 21 | 22 | #labelArea { 23 | display: flex; 24 | align-items: center; 25 | justify-content: space-between; 26 | box-sizing: border-box; 27 | padding: 10px 20px; 28 | 29 | & > ::content strand-header, strand-icon { 30 | pointer-events: none; 31 | user-select: none; 32 | } 33 | 34 | strand-icon.opened { 35 | transform: scaleY(-1); 36 | } 37 | } 38 | 39 | #expandArea { 40 | position: relative; 41 | display: block; 42 | height: 0px; 43 | overflow: hidden; 44 | transition: height 1s; 45 | } -------------------------------------------------------------------------------- /src/strand-dropdown/strand-dropdown.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-dropdown sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_button"; 11 | @import "_dropdown"; 12 | @import "_mixins"; 13 | 14 | :host { 15 | position: relative; 16 | display: inline-block; 17 | vertical-align: middle; 18 | font-size: 0em; 19 | line-height: 0em; 20 | } 21 | 22 | :host([disabled]) { 23 | pointer-events:none; 24 | opacity: 0.5; 25 | } 26 | 27 | @include fit(); 28 | 29 | :host([disabled]) { 30 | pointer-events:none; 31 | opacity: 0.5; 32 | } 33 | 34 | .hidden { 35 | display: none; 36 | } 37 | 38 | #itemRecycler { 39 | height: 0px; 40 | } 41 | 42 | #itemRecycler[hidden] { 43 | display: none; 44 | } 45 | 46 | #container { 47 | width: 100%; 48 | } 49 | 50 | #caratIcon { 51 | color: $color-A2; 52 | } 53 | 54 | #spinner { 55 | position: absolute; 56 | padding-right: 6px; 57 | overflow: visible; 58 | right: 0px; 59 | top: 4px; 60 | display: block; 61 | } 62 | -------------------------------------------------------------------------------- /src/strand-fetch/example.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/strand-fetch/strand-fetch.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/strand-fetch/strand-fetch.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | display:none, 14 | } 15 | -------------------------------------------------------------------------------- /src/strand-file-upload/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/strand-file-upload/strand-file-upload.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-file-upload sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_button"; 11 | @import "_mixins"; 12 | 13 | :host { 14 | position: relative; 15 | display: inline-block; 16 | vertical-align: middle; 17 | } 18 | 19 | #fileInput { 20 | display: none; 21 | } -------------------------------------------------------------------------------- /src/strand-footer/strand-footer.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/strand-footer/strand-footer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function(scope) { 8 | 9 | scope.Footer = Polymer({ 10 | is: 'strand-footer', 11 | 12 | properties: { 13 | message: { 14 | type: String, 15 | value: null 16 | }, 17 | type: { 18 | type: String, 19 | value: "info" 20 | }, 21 | messageVisible: { 22 | type: Boolean, 23 | reflectToAttribute: true 24 | }, 25 | semiTransparent: { 26 | type: Boolean, 27 | reflectToAttribute: true 28 | } 29 | }, 30 | 31 | behaviors:[ 32 | StrandTraits.Resolvable, 33 | StrandTraits.Refable 34 | ], 35 | 36 | showMessage: function() { 37 | this.messageVisible = true; 38 | }, 39 | 40 | hideMessage: function() { 41 | this.messageVisible = false; 42 | } 43 | 44 | }); 45 | 46 | })(window.Strand = window.Strand || {}); 47 | -------------------------------------------------------------------------------- /src/strand-footer/strand-footer.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | :host { 12 | position: relative; 13 | display: block; 14 | font-size: 0em; 15 | line-height: 0em; 16 | } 17 | 18 | @include fit(); 19 | 20 | ._mm_footer { 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | box-sizing: border-box; 25 | border-top: $color-A9 solid 1px; 26 | background-color: $color-A12; 27 | padding: 15px; 28 | } 29 | 30 | .right-box > ::content > * { 31 | margin-left: 10px; 32 | } 33 | 34 | .left-box > ::content > * { 35 | margin-right: 10px; 36 | } 37 | 38 | :host([semi-transparent]) { 39 | ._mm_footer { 40 | @include background-opacity($color-A12, 0.85); 41 | } 42 | } -------------------------------------------------------------------------------- /src/strand-form-message/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 28 | 29 | 30 | 31 | 32 | 33 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/strand-form-message/strand-form-message.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/strand-form-message/strand-form-message.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | 9 | scope.FormMessage = Polymer({ 10 | is: 'strand-form-message', 11 | 12 | behaviors: [ 13 | StrandTraits.Refable, 14 | StrandTraits.Resolvable 15 | ], 16 | 17 | properties: { 18 | type: { 19 | type: String 20 | }, 21 | message: { 22 | type: String 23 | }, 24 | visible: { 25 | type: Boolean, 26 | value: false 27 | }, 28 | layout: { 29 | type: String 30 | } 31 | }, 32 | 33 | }); 34 | 35 | })(window.Strand = window.Strand || {}); 36 | -------------------------------------------------------------------------------- /src/strand-form-message/strand-form-message.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | 9 | :host { 10 | display: block; 11 | position: relative; 12 | } 13 | 14 | strand-inline-box { 15 | display: none; 16 | margin-top: 0px; 17 | } 18 | 19 | strand-inline-box[visible] { 20 | display: block; 21 | margin-top: 10px; 22 | } 23 | 24 | :host-context(strand-repeater) { 25 | strand-inline-box[visible] { 26 | margin-top: 4px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/strand-form/strand-form.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | 9 | :host { 10 | display: flex; 11 | flex-wrap: wrap; 12 | position: relative; 13 | } 14 | 15 | :host ::content .col { 16 | box-sizing: border-box; 17 | } 18 | 19 | :host ::content strand-radio label { 20 | line-height: 29px; 21 | } 22 | 23 | :host ::content [form-header] { 24 | margin-bottom: 10px; 25 | } -------------------------------------------------------------------------------- /src/strand-grid-column/example.html: -------------------------------------------------------------------------------- 1 | 2 | First Name 3 | Last Name 4 | Email 5 | 6 | -------------------------------------------------------------------------------- /src/strand-grid-item/example.html: -------------------------------------------------------------------------------- 1 | 2 | First Name 3 | Last Name 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /src/strand-group/strand-group.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /src/strand-group/strand-group.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_mixins"; 10 | @import "_color"; 11 | 12 | :host { 13 | position: relative; 14 | display: inline-block; 15 | vertical-align: middle; 16 | font-size: 0em; 17 | line-height: 0em; 18 | } 19 | 20 | :host([disabled]) { 21 | pointer-events:none; 22 | opacity: 0.5; 23 | } 24 | 25 | @include fit(); 26 | 27 | :host([align=horizontal]), 28 | :host([align=vertical]) { 29 | display: inline-flex; 30 | } 31 | 32 | :host([align=vertical]) { 33 | flex-direction: column; 34 | } 35 | 36 | :host([align=horizontal][fitparent]) { 37 | justify-content: space-between; 38 | } 39 | -------------------------------------------------------------------------------- /src/strand-guide-canvas/strand-guide-canvas.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /src/strand-guide-canvas/strand-guide-canvas.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | :host { 12 | position: relative; 13 | display: block; 14 | } 15 | 16 | :host([hidden]) { 17 | #blocker { 18 | display:none; 19 | } 20 | } 21 | 22 | #blocker { 23 | position: fixed; 24 | left: 0; 25 | top: 0; 26 | bottom: 0; 27 | right: 0; 28 | } -------------------------------------------------------------------------------- /src/strand-guide/strand-guide.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | :host { 12 | position: relative; 13 | display: block; 14 | } 15 | 16 | :host([hidden]) { 17 | visibility: hidden; 18 | } 19 | 20 | #blocker { 21 | position: fixed; 22 | left: 0; 23 | top: 0; 24 | bottom: 0; 25 | right: 0; 26 | } 27 | 28 | #guideContent { 29 | display: none; 30 | } -------------------------------------------------------------------------------- /src/strand-header/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-header", 3 | "description":"header tag used for section or content headers", 4 | "attributes": [ 5 | { 6 | "name":"size", 7 | "type":"String", 8 | "description":"A string representing the size of the header text to be displayed. Sets or returns the size of the header text.", 9 | "optional":true, 10 | "default":"large", 11 | "options":["large", "medium", "small", "normal", "tiny"], 12 | "reflect":true 13 | } 14 | ], 15 | "behaviors": [ 16 | "refable", 17 | "resolvable" 18 | ] 19 | } -------------------------------------------------------------------------------- /src/strand-header/example.html: -------------------------------------------------------------------------------- 1 | Header "Large", Arimo Bold, 20px, Color-A2 2 | Header "Medium", Arimo Bold, 15px, Color-A2 3 | Header "Small", Arimo Bold, 13px, Color-A2 4 | Header "Normal", Arimo Bold, Uppercase, 11px, Color-D2 5 | Header "tiny", Arimo Bold, uppercase, 9px, Color-A3 -------------------------------------------------------------------------------- /src/strand-header/strand-header.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/strand-header/strand-header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | 9 | scope.Header = Polymer({ 10 | is:"strand-header", 11 | 12 | properties: { 13 | size: { 14 | value:"large", 15 | type:String, 16 | reflectToAttribute:true 17 | } 18 | }, 19 | 20 | behaviors:[ 21 | StrandTraits.Resolvable, 22 | StrandTraits.Refable 23 | ], 24 | 25 | _headerClass: function(size) { 26 | return "header-"+size; 27 | } 28 | }); 29 | 30 | })(window.Strand = window.Strand || {}); -------------------------------------------------------------------------------- /src/strand-header/strand-header.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-header.sass */ 8 | @import "_bourbon"; 9 | @import "_text"; 10 | 11 | :host { 12 | position: relative; 13 | display: inline-block; 14 | vertical-align: middle; 15 | font-size: 0em; 16 | line-height: 0em; 17 | } -------------------------------------------------------------------------------- /src/strand-highlight/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-highlight", 3 | "description":"A simple text component that allows its text content to be highlighted. Hilight matching is not case sensitive.", 4 | "attributes": [ 5 | { 6 | "name":"text", 7 | "type":"String", 8 | "reflect":"false", 9 | "default":"''", 10 | "optional":"true", 11 | "description":"The string to display as the text content for this element", 12 | "attribute":"text" 13 | }, 14 | { 15 | "name":"highlight", 16 | "type":"String", 17 | "reflect":"true", 18 | "default":"false", 19 | "optional":"true", 20 | "description":"The search string used to highlight matched substrings from the 'text' property's value.", 21 | "attribute":"highlight" 22 | } 23 | ], 24 | "behaviors" : [ 25 | "refable" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /src/strand-highlight/example.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/strand-highlight/strand-highlight.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/strand-highlight/strand-highlight.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | 14 | } 15 | 16 | mark { 17 | color: $color-A2; 18 | background: $color-E13; 19 | } -------------------------------------------------------------------------------- /src/strand-icon/strand-icon.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/strand-icon/strand-icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | 9 | scope.Icon = Polymer({ 10 | is:"strand-icon", 11 | 12 | behaviors: [ 13 | StrandTraits.Resolvable, 14 | StrandTraits.Stylable, 15 | StrandTraits.Refable 16 | ], 17 | 18 | properties: { 19 | type: { 20 | type:String, 21 | value:"plus", 22 | reflectAsAttribute:true 23 | }, 24 | width:{ 25 | type:Number, 26 | value: 28 27 | }, 28 | height: { 29 | type:Number, 30 | value: 28 31 | } 32 | }, 33 | 34 | _updateClass: function(type) { 35 | var o = {}; 36 | o["str-icn-"+type] = true; 37 | return this.classBlock(o); 38 | }, 39 | 40 | _updateStyle: function(width, height) { 41 | return this.styleBlock({ 42 | minWidth: width + "px", 43 | minHeight: height + "px", 44 | lineHeight: height + "px", 45 | fontSize: height + "px" 46 | }); 47 | } 48 | 49 | }); 50 | 51 | })(window.Strand=window.Strand || {}); -------------------------------------------------------------------------------- /src/strand-inline-box/example.html: -------------------------------------------------------------------------------- 1 | Error some text is here. 2 | Warning some text is here. 3 | Success some text is here. 4 | Info some text is here. -------------------------------------------------------------------------------- /src/strand-inline-box/strand-inline-box.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | -------------------------------------------------------------------------------- /src/strand-input/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/strand-item-recycler/template.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/strand-list-item/example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Item here 00 4 | I am a moderate amount of text. Just a bit but not too much 5 | 6 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 7 |
-------------------------------------------------------------------------------- /src/strand-list-item/strand-list-item.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 22 | 23 | -------------------------------------------------------------------------------- /src/strand-loader/strand-loader.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/strand-loader/strand-loader.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | :host { 12 | position: absolute; 13 | font-size: 0em; 14 | line-height: 0em; 15 | } 16 | 17 | ._mm_loader { 18 | display: block; 19 | display: flex; 20 | align-items: center; 21 | justify-content: start; 22 | } 23 | 24 | :host ::content label { 25 | @include fontSmoothing(); 26 | font-size: 13px; 27 | line-height: 13px; 28 | font-family: "Arimo", sans-serif; 29 | color: $color-F0; 30 | margin-left: 10px; 31 | font-weight: 700; 32 | } -------------------------------------------------------------------------------- /src/strand-localstore/example.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/strand-localstore/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /src/strand-localstore/strand-localstore.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/strand-localstore/strand-localstore.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | // @import "_color"; 9 | // @import "_fonts"; 10 | // @import "_text"; 11 | 12 | :host { 13 | display:none; 14 | } -------------------------------------------------------------------------------- /src/strand-menu/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | menu item 1 4 | menu item 2 5 | menu item 3 6 | menu item 4 7 | menu item 5 8 | -------------------------------------------------------------------------------- /src/strand-menu/strand-menu.js: -------------------------------------------------------------------------------- 1 | (function(scope) { 2 | 3 | scope.Menu = Polymer({ 4 | is: 'strand-menu', 5 | 6 | behaviors: [ 7 | StrandTraits.Resolvable, 8 | StrandTraits.AutoClosable, 9 | StrandTraits.AutoTogglable, 10 | StrandTraits.PositionablePanel, 11 | StrandTraits.Stackable, 12 | StrandTraits.Refable 13 | ], 14 | 15 | listeners: { 16 | 'click':'_handleSelect' 17 | }, 18 | 19 | attached: function() { 20 | this.async(function() { 21 | if (this._target) this._target.style.cursor = 'pointer'; 22 | }); 23 | }, 24 | 25 | _handleSelect: function(e) { 26 | 27 | if (e.target !== this.$.container) { 28 | this.fire('selected',{ 29 | item: e.target, 30 | value: e.target.getAttribute('value') || Polymer.dom(e.target).textContent.trim() 31 | }); 32 | } 33 | } 34 | }); 35 | 36 | })(window.Strand = window.Strand || {}); -------------------------------------------------------------------------------- /src/strand-modal/strand-modal.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | position: relative; 14 | display: block; 15 | } 16 | 17 | :host([hidden]) { 18 | display:none; 19 | } 20 | 21 | #blocker { 22 | position: fixed; 23 | left: 0; 24 | top: 0; 25 | bottom: 0; 26 | right: 0; 27 | background-image: radial-gradient(rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 100%); 28 | 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | #close { 35 | position: absolute; 36 | top: 10px; 37 | right: 15px; 38 | cursor: pointer; 39 | color: #aaa; 40 | 41 | &:hover { 42 | color: $color-A2; 43 | } 44 | } 45 | 46 | #container { 47 | position: relative; 48 | border-radius: 4px; 49 | box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.18); 50 | background: $color-F0; 51 | border: 1px solid $color-A8; 52 | overflow: hidden; 53 | min-height: 100px; 54 | } -------------------------------------------------------------------------------- /src/strand-model/example.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/strand-model/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/strand-model/strand-model.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/strand-model/strand-model.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | scope.Model = Polymer({ 9 | 10 | is:"strand-model", 11 | 12 | properties: { 13 | collection:{ 14 | type:Strand.Collection, 15 | value:null, 16 | } 17 | }, 18 | 19 | behaviors: [ 20 | StrandLib.Sync.getBehavior(), 21 | StrandTraits.Model, 22 | StrandTraits.DomSyncable, 23 | StrandTraits.Refable 24 | ], 25 | 26 | }); 27 | })(window.Strand = window.Strand || {}); 28 | -------------------------------------------------------------------------------- /src/strand-model/strand-model.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | :host { 8 | display:none; 9 | } -------------------------------------------------------------------------------- /src/strand-popover/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-popover", 3 | "description":"A fully-styled popover", 4 | "articles": ["grid_custom_grid_item"], 5 | "behaviors": [ 6 | "closable", 7 | "autoclosable", 8 | "stackable", 9 | "stylable", 10 | "positionable", 11 | "positionable-panel", 12 | "resolvable", 13 | "refable" 14 | ] 15 | } -------------------------------------------------------------------------------- /src/strand-popover/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/strand-popover/strand-popover.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 25 | 26 | -------------------------------------------------------------------------------- /src/strand-popover/strand-popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function(scope) { 8 | 9 | scope.Popover = Polymer({ 10 | is: 'strand-popover', 11 | 12 | behaviors: [ 13 | StrandTraits.Resolvable, 14 | StrandTraits.AutoTogglable, 15 | StrandTraits.Stackable, 16 | StrandTraits.PositionablePanel, 17 | StrandTraits.Refable 18 | ], 19 | 20 | ready: function() { 21 | var hasFooter = Polymer.dom(this.$.footer).getDistributedNodes().length > 0; 22 | if(hasFooter) { 23 | this.classList.add('hasFooter'); 24 | } 25 | } 26 | 27 | }); 28 | 29 | })(window.Strand = window.Strand || {}); -------------------------------------------------------------------------------- /src/strand-progress-bar/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/strand-progress-bar/strand-progress-bar.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/strand-progress-bar/strand-progress-bar.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | 11 | :host { 12 | display: block; 13 | font-size: inherit; 14 | height: auto; 15 | width: 100%; 16 | } 17 | 18 | .bar { 19 | border-style: solid; 20 | border-width: 1px; 21 | border-radius: 9999px; 22 | box-sizing: border-box; 23 | display: block; 24 | overflow: hidden; 25 | position: relative; 26 | } 27 | 28 | .fill { 29 | border-radius: 9999px; 30 | display: block; 31 | height: 100%; 32 | transition: none; 33 | transition: width 1500ms ease; 34 | } 35 | 36 | :host([indeterminate]) .fill { 37 | animation: candyStripe 2s linear infinite; 38 | background-size: 20px 20px; 39 | background-repeat: repeat; 40 | border-radius: 0; 41 | } 42 | 43 | @keyframes candyStripe { 44 | from { 45 | background-position: 0 0; 46 | } 47 | to { 48 | background-position: 20px 0; 49 | } 50 | } -------------------------------------------------------------------------------- /src/strand-pulldown-button/example.html: -------------------------------------------------------------------------------- 1 | 2 | single 3PAS 3 | bulk 3PAS 4 | Upload Assets 5 | 6 | 7 | 8 | 9 | single 3PAS 10 | bulk 3PAS 11 | Upload Assets 12 | 13 | -------------------------------------------------------------------------------- /src/strand-radio/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/strand-radio/strand-radio.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 | -------------------------------------------------------------------------------- /src/strand-repeater/example.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | -------------------------------------------------------------------------------- /src/strand-repeater/strand-repeater.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-repeater.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | display: block; 14 | } 15 | -------------------------------------------------------------------------------- /src/strand-scroll-panel/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-scroll-panel", 3 | "description":"A scrollable content container with custom scrollbars - for use in instances where native scrollbars interfere with layout", 4 | "methods": [ 5 | { 6 | "name":"resetScroll", 7 | "description":"A method which can be called to reset the scroll position to the top.", 8 | "arguments":[] 9 | } 10 | ], 11 | "behaviors":[ 12 | "dommutable", 13 | "mousewheelable", 14 | "resolvable", 15 | "refable" 16 | ] 17 | } -------------------------------------------------------------------------------- /src/strand-scroll-panel/strand-scroll-panel.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | 9 | :host { 10 | display: block; 11 | overflow: hidden; 12 | position: relative; 13 | } 14 | 15 | #viewport { 16 | box-sizing: border-box; 17 | position: relative; 18 | display: block; 19 | overflow: hidden; 20 | width: 100%; 21 | height: 100%; 22 | min-width: 100%; 23 | min-height: 100%; 24 | } 25 | 26 | #scrollbar { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | } 31 | 32 | :host(:hover) #scrollbar { 33 | opacity: 1.0; 34 | filter: alpha(opacity = 60); 35 | } -------------------------------------------------------------------------------- /src/strand-scrollbar-y/strand-scrollbar-y.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/strand-scrollbar-y/strand-scrollbar-y.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | 9 | :host { 10 | opacity: 0; 11 | filter: alpha(opacity = 0); 12 | transition: opacity .15s linear; 13 | cursor: default; 14 | } 15 | 16 | .container-y { 17 | width: 16px; 18 | } 19 | 20 | .container-y .bar { 21 | height: 100%; 22 | width: 8px; 23 | margin: auto; 24 | background-color: #aaa; 25 | border-radius: 4px; 26 | } 27 | -------------------------------------------------------------------------------- /src/strand-spinner/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/strand-spinner/strand-spinner.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/strand-spinner/strand-spinner.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | 9 | :host { 10 | position: relative; 11 | display: inline-block; 12 | vertical-align: middle; 13 | overflow: hidden; 14 | animation-name: fadeIn; 15 | animation-duration: 1s; 16 | animation-timing-function: ease; 17 | } 18 | 19 | @keyframes spin { 20 | 0% { transform: rotate(0deg); } 21 | 100% { transform: rotate(360deg); } 22 | } 23 | 24 | @keyframes fadeIn { 25 | from { opacity: 0; } 26 | to { opacity: 1; } 27 | } -------------------------------------------------------------------------------- /src/strand-sync/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-sync", 3 | "description":"High level AJAX Component", 4 | "articles":[ 5 | "data_comps_using_sync" 6 | ], 7 | "behaviors":[ 8 | "domsyncable", 9 | "syncable", 10 | "refable" 11 | ] 12 | } -------------------------------------------------------------------------------- /src/strand-sync/example.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/strand-sync/strand-sync.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/strand-sync/strand-sync.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | 9 | scope.Sync = Polymer({ 10 | is:"strand-sync", 11 | behaviors:[ 12 | StrandLib.Sync.getBehavior(), 13 | StrandTraits.DomSyncable, 14 | StrandTraits.Refable 15 | ], 16 | }); 17 | 18 | })(window.Strand = window.Strand || {}); 19 | -------------------------------------------------------------------------------- /src/strand-sync/strand-sync.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"{{name}}", 3 | "description":"", 4 | "attributes": [ 5 | { 6 | "name":"", 7 | "description":"", 8 | "options":[ 9 | 10 | ] 11 | } 12 | ], 13 | "examples":[ 14 | "" 15 | ] 16 | } -------------------------------------------------------------------------------- /src/strand-sync/strand-sync.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | :host { 8 | display:none; 9 | } 10 | -------------------------------------------------------------------------------- /src/strand-tab/strand-tab.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | background-color: #fff; 14 | display: none; 15 | overflow: hidden; 16 | } 17 | 18 | :host([active]) { 19 | display: block; 20 | } 21 | 22 | #view { 23 | width: 100%; 24 | height: 100%; 25 | } 26 | -------------------------------------------------------------------------------- /src/strand-tabs/example.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 |
11 |

This is the first tab content.

12 |
13 | 14 | 15 |
16 |

This is the second tab content.

17 |
18 | 19 | 20 |
21 |

This is the third tab content.

22 |
23 | 24 | -------------------------------------------------------------------------------- /src/strand-template-finder/strand-template-finder.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/strand-template-finder/strand-template-finder.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | :host { 8 | display:none; 9 | } -------------------------------------------------------------------------------- /src/strand-template-finder/template.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/strand-test-form-view/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/strand-test-form-view/strand-test-form-view.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_text"; 9 | 10 | :host { 11 | position: relative; 12 | display: block; 13 | @include defaultFont(); 14 | } 15 | 16 | // custom form items 17 | .custom-item { 18 | position: relative; 19 | display: flex; 20 | align-items: center; 21 | 22 | strand-dropdown { 23 | margin-right: 15px; 24 | } 25 | 26 | &.dimensions { 27 | 28 | } 29 | 30 | &.freq-cap { 31 | strand-header { 32 | margin-bottom: 100px !important; 33 | } 34 | 35 | p { 36 | margin: 0 7px; 37 | } 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/strand-textarea/example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/strand-textarea/strand-textarea.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* strand-textarea sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_textinput"; 11 | 12 | :host { 13 | position: relative; 14 | display: inline-block; 15 | vertical-align: middle; 16 | font-size: 0em; 17 | line-height: 0em; 18 | } 19 | 20 | :host([disabled]) { 21 | pointer-events:none; 22 | opacity: 0.5; 23 | } 24 | 25 | @include fit(); 26 | 27 | textarea.text-input { 28 | overflow: auto; 29 | } -------------------------------------------------------------------------------- /src/strand-timeformat/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-timeformat", 3 | "description":"", 4 | "attributes": [ 5 | { 6 | "name":"value", 7 | "type":"Date", 8 | "description":"A javascript date object to pass for formatting", 9 | "optional":true, 10 | "default":"null" 11 | }, 12 | { 13 | "name":"format", 14 | "type":"String", 15 | "description":"A moment format string to use. Note that locale based strings should be used where possible: L, LL, LLL, LLLL etc", 16 | "optional":false, 17 | "default":"LL" 18 | } 19 | ], 20 | "behaviors" : [ 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/strand-timeformat/example.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/strand-timeformat/strand-timeformat.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/strand-timeformat/strand-timeformat.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | (function (scope) { 8 | 9 | scope.Timeformat = Polymer({ 10 | is: "strand-timeformat", 11 | 12 | behaviors: [ 13 | StrandTraits.Refable 14 | ], 15 | 16 | properties: { 17 | value:{ 18 | type:Date, 19 | value:null 20 | }, 21 | format:{ 22 | type:String, 23 | value:"L" 24 | } 25 | }, 26 | 27 | _formatDateTime: function(value, format) { 28 | moment.locale(); 29 | return moment(value).format(format); 30 | } 31 | 32 | }); 33 | 34 | })(window.Strand = window.Strand || {}); 35 | -------------------------------------------------------------------------------- /src/strand-timeformat/strand-timeformat.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | } 14 | -------------------------------------------------------------------------------- /src/strand-timepicker/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-timepicker", 3 | "description":"A 12/24 hour time input field", 4 | "attributes": [ 5 | { 6 | "name": "value", 7 | "type": "String", 8 | "description": "String representing selected time (and meridiem, if applicable)" 9 | }, 10 | { 11 | "name": "use24HourTime", 12 | "type": "Boolean", 13 | "description": "Setting indication whether this component will display and take user input in 24-hour time (0-23) or 12-hour time (AM/PM)", 14 | "default": "false", 15 | "attribute": "use24-hour-time" 16 | }, 17 | { 18 | "name": "timeString", 19 | "type": "String", 20 | "description": "Hours and minutes represented as a string (i.e. the hh:mm) component of the time. " 21 | }, 22 | { 23 | "name": "timePeriod", 24 | "type": "String", 25 | "description": "AM or PM, if this element instance is using 12-hour time." 26 | } 27 | ], 28 | "methods": [ 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/strand-timepicker/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/strand-timepicker/strand-timepicker.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | @import "_bourbon"; 8 | @import "_color"; 9 | @import "_mixins"; 10 | @import "_disable"; 11 | 12 | :host { 13 | @include disabled; 14 | display: block; 15 | box-sizing: border-box; 16 | width: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /src/strand-tooltip/doc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"strand-tooltip", 3 | "description":"A custom styled tooltip which accepts variable and partially styleable content.", 4 | "attributes": [ 5 | { 6 | "name":"tipWidth", 7 | "type":"Number", 8 | "description":"The desired width of the tooltip.", 9 | "optional":true, 10 | "attribute": "tip-width", 11 | "default":"Defaults to content width", 12 | "reflect":true 13 | }, 14 | { 15 | "name":"auto", 16 | "type":"Boolean", 17 | "description":"Instructs the tooltip to stay visible even after the user has rolled out of the target area.", 18 | "optional":true, 19 | "default":"false", 20 | "reflect":true 21 | } 22 | ], 23 | "articles": ["grid_custom_grid_item"], 24 | "behaviors":[ 25 | "resolvable", 26 | "nonscrollable", 27 | "closable", 28 | "autoclosable", 29 | "stackable", 30 | "stylable", 31 | "positionable", 32 | "positionable-panel", 33 | "refable" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /src/strand-tooltip/example.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/strand-view-manager/strand-view-manager.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/strand-view-manager/strand-view-manager.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2016 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | } 14 | -------------------------------------------------------------------------------- /src/strand-wizard-ribbon/strand-wizard-ribbon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/strand-wizard/strand-wizard.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright (c) 2015 MediaMath Inc. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt 5 | 6 | */ 7 | /* test.sass */ 8 | @import "_bourbon"; 9 | @import "_color"; 10 | @import "_mixins"; 11 | 12 | :host { 13 | align-items: stretch; 14 | flex-direction: column; 15 | display: flex; 16 | font-family: 'Arimo', sans-serif; 17 | font-size: 14px; 18 | position: relative; 19 | } 20 | -------------------------------------------------------------------------------- /test/behavior_collection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 26 | 27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /test/behavior_model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 27 | 28 | 29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /test/behavior_windownotifier.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 30 | 31 | 32 | 33 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /test/imports/test-strand-tabs-aux.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /test/imports/test-strand-template-finder.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /test/lib_bitmask.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /test/lib_fontloader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /test/strand-currency.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /test/strand-highlight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /test/strand-localstore.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/strand-popover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /test/strand-sync.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /test/strand-timeformat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": false, 3 | "suites": ["test/*.html"], 4 | "root": ".", 5 | "plugins": { 6 | "local": { 7 | "browsers": ["chrome", "firefox"] 8 | } 9 | } 10 | } 11 | --------------------------------------------------------------------------------