` and create\n * an overlaying button, which will will execute the given actions (like `ng-href`, `ng-click`).\n *\n * We create an overlaying button, instead of wrapping all content inside of the button,\n * because otherwise some elements may not be clickable inside of the button.\n *\n * ---\n * When using a secondary item inside of your list item, the `md-list-item` component will\n * automatically create a secondary container at the end of the `md-list-item`, which contains all\n * secondary items.\n *\n * The secondary item container is not static, because that would cause issues with the overflow\n * of the list item.\n */\nfunction mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {\n var proxiedTypes = ['md-checkbox', 'md-switch', 'md-menu'];\n return {\n restrict: 'E',\n controller: 'MdListController',\n\n compile: function(tElement, tAttrs) {\n\n // Check for proxy controls (no ng-click on parent, and a control inside)\n var secondaryItems = tElement[0].querySelectorAll('.md-secondary');\n var hasProxiedElement;\n var proxyElement;\n var itemContainer = tElement;\n\n tElement[0].setAttribute('role', 'listitem');\n\n if (tAttrs.ngClick || tAttrs.ngDblclick || tAttrs.ngHref || tAttrs.href || tAttrs.uiSref || tAttrs.ngAttrUiSref) {\n wrapIn('button');\n } else if (!tElement.hasClass('md-no-proxy')) {\n\n for (var i = 0, type; i < proxiedTypes.length; ++i) {\n proxyElement = tElement[0].querySelector(proxiedTypes[i]);\n if (proxyElement !== null) {\n hasProxiedElement = true;\n break;\n }\n }\n\n if (hasProxiedElement) {\n wrapIn('div');\n } else {\n tElement.addClass('md-no-proxy');\n }\n }\n\n wrapSecondaryItems();\n setupToggleAria();\n\n if (hasProxiedElement && proxyElement.nodeName === \"MD-MENU\") {\n setupProxiedMenu();\n }\n\n function setupToggleAria() {\n var toggleTypes = ['md-switch', 'md-checkbox'];\n var toggle;\n\n for (var i = 0, toggleType; i < toggleTypes.length; ++i) {\n toggle = tElement.find(toggleTypes[i])[0];\n if (toggle) {\n if (!toggle.hasAttribute('aria-label')) {\n var labelElement = tElement.find('p')[0];\n if (!labelElement) {\n labelElement = tElement.find('span')[0];\n }\n if (!labelElement) return;\n toggle.setAttribute('aria-label', 'Toggle ' + labelElement.textContent);\n }\n }\n }\n }\n\n function setupProxiedMenu() {\n var menuEl = angular.element(proxyElement);\n\n var isEndAligned = menuEl.parent().hasClass('md-secondary-container') ||\n proxyElement.parentNode.firstElementChild !== proxyElement;\n\n var xAxisPosition = 'left';\n\n if (isEndAligned) {\n // When the proxy item is aligned at the end of the list, we have to set the origin to the end.\n xAxisPosition = 'right';\n }\n\n // Set the position mode / origin of the proxied menu.\n if (!menuEl.attr('md-position-mode')) {\n menuEl.attr('md-position-mode', xAxisPosition + ' target');\n }\n\n // Apply menu open binding to menu button\n var menuOpenButton = menuEl.children().eq(0);\n if (!hasClickEvent(menuOpenButton[0])) {\n menuOpenButton.attr('ng-click', '$mdMenu.open($event)');\n }\n\n if (!menuOpenButton.attr('aria-label')) {\n menuOpenButton.attr('aria-label', 'Open List Menu');\n }\n }\n\n /**\n * @param {'div'|'button'} type\n */\n function wrapIn(type) {\n if (type === 'div') {\n itemContainer = angular.element('
');\n itemContainer.append(tElement.contents());\n tElement.addClass('md-proxy-focus');\n } else {\n // Element which holds the default list-item content.\n itemContainer = angular.element(\n '
'\n );\n\n // Button which shows ripple and executes primary action.\n var buttonWrap = angular.element('
');\n\n moveAttributes(tElement[0], buttonWrap[0]);\n\n // If there is no aria-label set on the button (previously copied over if present)\n // we determine the label from the content and copy it to the button.\n if (!buttonWrap.attr('aria-label')) {\n buttonWrap.attr('aria-label', $mdAria.getText(tElement));\n\n // If we set the button's aria-label to the text content, then make the content hidden\n // from screen readers so that it isn't read/traversed twice.\n var listItemInner = itemContainer[0].querySelector('.md-list-item-inner');\n if (listItemInner) {\n listItemInner.setAttribute('aria-hidden', 'true');\n }\n }\n\n // We allow developers to specify the `md-no-focus` class, to disable the focus style\n // on the button executor. Once more classes should be forwarded, we should probably make\n // the class forward more generic.\n if (tElement.hasClass('md-no-focus')) {\n buttonWrap.addClass('md-no-focus');\n }\n\n // Append the button wrap before our list-item content, because it will overlay in\n // relative.\n itemContainer.prepend(buttonWrap);\n itemContainer.children().eq(1).append(tElement.contents());\n\n tElement.addClass('_md-button-wrap');\n }\n\n tElement[0].setAttribute('tabindex', '-1');\n tElement.append(itemContainer);\n }\n\n function wrapSecondaryItems() {\n var secondaryItemsWrapper = angular.element('
');\n\n angular.forEach(secondaryItems, function(secondaryItem) {\n wrapSecondaryItem(secondaryItem, secondaryItemsWrapper);\n });\n\n itemContainer.append(secondaryItemsWrapper);\n }\n\n /**\n * @param {HTMLElement} secondaryItem\n * @param {HTMLDivElement} container\n */\n function wrapSecondaryItem(secondaryItem, container) {\n // If the current secondary item is not a button, but contains a ng-click attribute,\n // the secondary item will be automatically wrapped inside of a button.\n if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {\n\n $mdAria.expect(secondaryItem, 'aria-label');\n var buttonWrapper = angular.element('');\n\n // Move the attributes from the secondary item to the generated button.\n // We also support some additional attributes from the secondary item,\n // because some developers may use a ngIf, ngHide, ngShow on their item.\n moveAttributes(secondaryItem, buttonWrapper[0], ['ng-if', 'ng-hide', 'ng-show']);\n\n secondaryItem.setAttribute('tabindex', '-1');\n buttonWrapper.append(secondaryItem);\n\n secondaryItem = buttonWrapper[0];\n }\n\n if (secondaryItem &&\n (!hasClickEvent(secondaryItem) ||\n (!tAttrs.ngClick && isProxiedElement(secondaryItem)))) {\n // In this case we remove the secondary class, so we can identify it later, when searching\n // for the proxy items.\n angular.element(secondaryItem).removeClass('md-secondary');\n }\n\n tElement.addClass('md-with-secondary');\n container.append(secondaryItem);\n }\n\n /**\n * Moves attributes from a source element to the destination element.\n * By default, the function will copy the most necessary attributes, supported\n * by the button executor for clickable list items.\n * @param {Element} source Element with the specified attributes\n * @param {Element} destination Element which will receive the attributes\n * @param {string|string[]} extraAttrs Additional attributes, which will be moved over\n */\n function moveAttributes(source, destination, extraAttrs) {\n var copiedAttrs = $mdUtil.prefixer([\n 'ng-if', 'ng-click', 'ng-dblclick', 'aria-label', 'ng-disabled', 'ui-sref',\n 'href', 'ng-href', 'rel', 'target', 'ng-attr-ui-sref', 'ui-sref-opts', 'download'\n ]);\n\n if (extraAttrs) {\n copiedAttrs = copiedAttrs.concat($mdUtil.prefixer(extraAttrs));\n }\n\n angular.forEach(copiedAttrs, function(attr) {\n if (source.hasAttribute(attr)) {\n destination.setAttribute(attr, source.getAttribute(attr));\n source.removeAttribute(attr);\n }\n });\n }\n\n /**\n * @param {HTMLElement} element\n * @return {boolean} true if the element has one of the proxied tags, false otherwise\n */\n function isProxiedElement(element) {\n return proxiedTypes.indexOf(element.nodeName.toLowerCase()) !== -1;\n }\n\n /**\n * @param {HTMLElement} element\n * @return {boolean} true if the element is a button or md-button, false otherwise\n */\n function isButton(element) {\n var nodeName = element.nodeName.toUpperCase();\n\n return nodeName === \"MD-BUTTON\" || nodeName === \"BUTTON\";\n }\n\n /**\n * @param {Element} element\n * @return {boolean} true if the element has an ng-click attribute, false otherwise\n */\n function hasClickEvent(element) {\n var attr = element.attributes;\n for (var i = 0; i < attr.length; i++) {\n if (tAttrs.$normalize(attr[i].name) === 'ngClick') {\n return true;\n }\n }\n return false;\n }\n\n return postLink;\n\n function postLink($scope, $element, $attr, ctrl) {\n $element.addClass('_md'); // private md component indicator for styling\n\n var proxies = [],\n firstElement = $element[0].firstElementChild,\n isButtonWrap = $element.hasClass('_md-button-wrap'),\n clickChild = isButtonWrap ? firstElement.firstElementChild : firstElement,\n hasClick = clickChild && hasClickEvent(clickChild),\n noProxies = $element.hasClass('md-no-proxy');\n\n computeProxies();\n computeClickable();\n\n if (proxies.length) {\n angular.forEach(proxies, function(proxy) {\n proxy = angular.element(proxy);\n\n $scope.mouseActive = false;\n proxy.on('mousedown', function() {\n $scope.mouseActive = true;\n $timeout(function() {\n $scope.mouseActive = false;\n }, 100);\n })\n .on('focus', function() {\n if ($scope.mouseActive === false) { $element.addClass('md-focused'); }\n proxy.on('blur', function proxyOnBlur() {\n $element.removeClass('md-focused');\n proxy.off('blur', proxyOnBlur);\n });\n });\n });\n }\n\n function computeProxies() {\n if (firstElement && firstElement.children && !hasClick && !noProxies) {\n\n angular.forEach(proxiedTypes, function(type) {\n // All elements which are not capable of being used as a proxy have the .md-secondary\n // class applied. These items were identified in the secondary wrap function.\n angular.forEach(firstElement.querySelectorAll(type + ':not(.md-secondary)'), function(child) {\n proxies.push(child);\n });\n });\n }\n }\n\n function computeClickable() {\n if (proxies.length === 1 || hasClick) {\n $element.addClass('md-clickable');\n\n if (!hasClick) {\n ctrl.attachRipple($scope, angular.element($element[0].querySelector('.md-no-style')));\n }\n }\n }\n\n /**\n * @param {MouseEvent} event\n * @return {boolean}\n */\n function isEventFromControl(event) {\n var forbiddenControls = ['md-slider'];\n var eventBubblePath = $mdUtil.getEventPath(event);\n\n // If there is no bubble path, then the event was not bubbled.\n if (!eventBubblePath || eventBubblePath.length === 0) {\n return forbiddenControls.indexOf(event.target.tagName.toLowerCase()) !== -1;\n }\n\n // We iterate the event bubble path up and check for a possible component.\n // Our maximum index to search, is the list item root.\n var maxPath = eventBubblePath.indexOf($element.children()[0]);\n\n for (var i = 0; i < maxPath; i++) {\n if (forbiddenControls.indexOf(eventBubblePath[i].tagName.toLowerCase()) !== -1) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * @param {KeyboardEvent} keypressEvent\n */\n var clickChildKeypressListener = function(keypressEvent) {\n if (keypressEvent.target.nodeName !== 'INPUT' &&\n keypressEvent.target.nodeName !== 'TEXTAREA' &&\n !keypressEvent.target.isContentEditable) {\n var keyCode = keypressEvent.which || keypressEvent.keyCode;\n if (keyCode === $mdConstant.KEY_CODE.SPACE) {\n if (clickChild) {\n clickChild.click();\n keypressEvent.preventDefault();\n keypressEvent.stopPropagation();\n }\n }\n }\n };\n\n if (!hasClick && !proxies.length) {\n clickChild && clickChild.addEventListener('keypress', clickChildKeypressListener);\n }\n\n $element.off('click');\n $element.off('keypress');\n // Disable ng-aria's \"helpful\" keydown event that causes our ng-click handlers to be called\n // twice.\n $element.off('keydown');\n\n if (proxies.length === 1 && clickChild) {\n $element.children().eq(0).on('click', function(clickEvent) {\n // When the event is coming from a control and it should not trigger the proxied element\n // then we are skipping.\n if (isEventFromControl(clickEvent)) return;\n\n var parentButton = $mdUtil.getClosest(clickEvent.target, 'BUTTON');\n if (!parentButton && clickChild.contains(clickEvent.target)) {\n angular.forEach(proxies, function(proxy) {\n if (clickEvent.target !== proxy && !proxy.contains(clickEvent.target)) {\n if (proxy.nodeName === 'MD-MENU') {\n proxy = proxy.children[0];\n }\n angular.element(proxy).triggerHandler('click');\n }\n });\n }\n });\n }\n\n $scope.$on('$destroy', function () {\n clickChild && clickChild.removeEventListener('keypress', clickChildKeypressListener);\n });\n }\n }\n };\n}\n\n/*\n * @private\n * @ngdoc controller\n * @name MdListController\n * @module material.components.list\n */\nfunction MdListController($scope, $element, $mdListInkRipple) {\n var ctrl = this;\n ctrl.attachRipple = attachRipple;\n\n function attachRipple (scope, element) {\n var options = {};\n $mdListInkRipple.attach(scope, element, options);\n }\n}\n"
},
{
"path": "src/components/list/list.scss",
"content": "$dense-baseline-grid: $baseline-grid * 0.5 !default;\n\n$list-h3-margin: 0 0 0 0 !default;\n$list-h4-margin: 3px 0 1px 0 !default;\n$list-h4-font-weight: 400 !default;\n$list-header-line-height: 1.2em !default;\n$list-p-margin: 0 0 0 0 !default;\n$list-p-line-height: 1.6em !default;\n\n$list-padding-top: $baseline-grid !default;\n$list-padding-right: 0px !default;\n$list-padding-left: 0px !default;\n$list-padding-bottom: $baseline-grid !default;\n\n$item-padding-top: 0px !default;\n$item-padding-right: 0px !default;\n$item-padding-left: 0px !default;\n$item-padding-bottom: 0px !default;\n$list-item-padding-vertical: 0px !default;\n$list-item-padding-horizontal: $baseline-grid * 2 !default;\n$list-item-primary-width: $baseline-grid * 7 !default;\n$list-item-primary-avatar-width: $baseline-grid * 5 !default;\n$list-item-primary-icon-width: $baseline-grid * 3 !default;\n$list-item-secondary-left-margin: $baseline-grid * 2 !default;\n$list-item-secondary-button-width: $baseline-grid * 6 !default;\n$list-item-inset-divider-offset: 9 * $baseline-grid !default;\n$list-item-height: 6 * $baseline-grid !default;\n$list-item-two-line-height: 9 * $baseline-grid !default;\n$list-item-three-line-height: 11 * $baseline-grid !default;\n\n$list-item-dense-height: 10 * $dense-baseline-grid !default;\n$list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;\n$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;\n$list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;\n$list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;\n$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;\n$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;\n$list-item-dense-line-height: 1.05 !default;\n\nmd-list {\n display: block;\n padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;\n\n .md-subheader {\n font-size: $body-font-size-base;\n font-weight: 500;\n letter-spacing: 0.010em;\n line-height: $list-header-line-height;\n }\n\n &.md-dense:not(.md-dense-disabled) {\n md-list-item {\n &,\n .md-list-item-inner {\n min-height: $list-item-dense-height;\n @include ie11-min-height-flexbug($list-item-dense-height);\n\n\n // Layout for controls in primary or secondary divs, or auto-inferred first child\n\n md-icon:first-child {\n width: $list-item-dense-primary-icon-width;\n height: $list-item-dense-primary-icon-width;\n }\n\n > md-icon:first-child:not(.md-avatar-icon) {\n @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);\n margin-top: $dense-baseline-grid;\n margin-bottom: $dense-baseline-grid;\n }\n .md-avatar, .md-avatar-icon {\n @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);\n margin-top: $dense-baseline-grid + 2px;\n margin-bottom: $dense-baseline-grid + 2px;\n }\n .md-avatar {\n flex: none;\n width: $list-item-dense-primary-avatar-width;\n height: $list-item-dense-primary-avatar-width;\n }\n .md-secondary-container {\n .md-secondary.md-button {\n margin-top: $dense-baseline-grid;\n margin-bottom: $dense-baseline-grid;\n }\n md-checkbox:not(.md-dense-disabled) {\n min-height: $icon-button-height;\n }\n }\n }\n\n &.md-2-line,\n &.md-3-line {\n &, & > .md-no-style {\n .md-list-item-text {\n &.md-offset {\n @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);\n }\n\n h3,\n h4,\n p {\n line-height: $list-item-dense-line-height;\n font-size: $list-item-dense-font-size;\n padding-bottom: 4px;\n }\n\n h3 {\n font-size: $list-item-dense-header-font-size;\n }\n }\n }\n }\n\n &.md-2-line {\n &, & > .md-no-style {\n min-height: $list-item-dense-two-line-height;\n @include ie11-min-height-flexbug($list-item-dense-two-line-height);\n\n > .md-avatar, .md-avatar-icon {\n margin-top: $baseline-grid * 1.5;\n }\n }\n }\n\n &.md-3-line {\n &, & > .md-no-style {\n\n min-height: $list-item-dense-three-line-height;\n @include ie11-min-height-flexbug($list-item-dense-three-line-height);\n\n > md-icon:first-child,\n > .md-avatar {\n margin-top: $baseline-grid * 2;\n }\n }\n }\n }\n .md-subheader-inner {\n padding-top: $dense-baseline-grid * 3;\n padding-bottom: $dense-baseline-grid * 3;\n }\n }\n}\n\nmd-list-item {\n // Ensure nested dividers are properly positioned\n position: relative;\n\n &.md-proxy-focus.md-focused .md-no-style {\n transition: background-color 0.15s linear;\n }\n\n &._md-button-wrap {\n position: relative;\n\n > div.md-button:first-child {\n // Layout - Vertically align the item content.\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n padding: $list-item-padding-vertical $list-item-padding-horizontal;\n margin: 0;\n\n font-weight: 400;\n @include rtl(text-align, left, right);\n border: medium none;\n\n // The button executor should fill the whole list item.\n > .md-button:first-child {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n\n margin: 0;\n padding: 0;\n }\n\n .md-list-item-inner {\n // The list item content should fill the complete width.\n width: 100%;\n @include ie11-min-height-flexbug(inherit);\n }\n\n }\n\n }\n\n &.md-no-proxy,\n .md-no-style {\n position: relative;\n padding: $list-item-padding-vertical $list-item-padding-horizontal;\n\n // Layout [flex='auto']\n flex: 1 1 auto;\n\n &.md-button {\n font-size: inherit;\n height: inherit;\n @include rtl(text-align, left, right);\n text-transform: none;\n width: 100%;\n white-space: normal;\n flex-direction: inherit;\n align-items: inherit;\n border-radius: 0;\n margin: 0;\n\n & > .md-ripple-container {\n border-radius: 0;\n }\n }\n &:focus {\n outline: none\n }\n }\n &.md-clickable:hover {\n cursor: pointer;\n }\n\n md-divider {\n position: absolute;\n bottom: 0;\n @include rtl-prop(left, right, 0, auto);\n width: 100%;\n &[md-inset] {\n @include rtl-prop(left, right, $list-item-inset-divider-offset, auto);\n width: calc(100% - #{$list-item-inset-divider-offset});\n margin: 0 !important;\n }\n }\n\n &,\n .md-list-item-inner {\n\n // Layout [flex layout-align='start center']\n display: flex;\n justify-content: flex-start;\n align-items: center;\n\n min-height: $list-item-height;\n @include ie11-min-height-flexbug($list-item-height);\n\n height: auto;\n\n // Layout for controls in primary or secondary divs, or auto-infered first child\n & > div.md-primary > md-icon:not(.md-avatar-icon),\n & > div.md-secondary > md-icon:not(.md-avatar-icon),\n & > md-icon:first-child:not(.md-avatar-icon),\n > md-icon.md-secondary:not(.md-avatar-icon) {\n width: $list-item-primary-icon-width;\n margin-top: 16px;\n margin-bottom: 12px;\n box-sizing: content-box;\n }\n & > div.md-primary > md-checkbox,\n & > div.md-secondary > md-checkbox,\n & > md-checkbox,\n md-checkbox.md-secondary {\n align-self: center;\n .md-label {\n display: none;\n }\n }\n\n & > md-icon:first-child:not(.md-avatar-icon) {\n @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width, auto);\n }\n\n & .md-avatar, .md-avatar-icon {\n margin-top: $baseline-grid;\n margin-bottom: $baseline-grid;\n @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width, auto);\n border-radius: 50%;\n box-sizing: content-box;\n }\n & .md-avatar {\n flex: none;\n width: $list-item-primary-avatar-width;\n height: $list-item-primary-avatar-width;\n }\n & .md-avatar-icon {\n padding: 8px;\n\n // Set the width/height to the same as the icon to fix issue on iOS Safari where the\n // height: 100% was causing it to be larger than it's parent\n svg {\n width: $icon-size;\n height: $icon-size;\n }\n }\n\n & > md-checkbox {\n width: 3 * $baseline-grid;\n min-height: $icon-button-height;\n @include rtl(margin-left, 0px, 29px);\n @include rtl(margin-right, 29px, 0px);\n }\n\n .md-secondary-container {\n display: flex;\n align-items: center;\n // Ensure the secondary button is not behind the primary button if its template is provided by\n // a directive.\n position: relative;\n\n // Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common\n // By default, flex items won’t shrink below their minimum content size.\n // Safari doesn't follow that specification due to a bug and expects the developer to\n // explicitly disable flex shrinking.\n flex-shrink: 0;\n\n // Using margin auto to move them to the end of the list item is more elegant, because it has\n // a lower priority than a flex filler and isn't introducing any overflow issues.\n // The margin on the top is important to align multiple secondary items vertically.\n margin: auto;\n\n @include rtl(margin-right, 0, auto);\n @include rtl(margin-left, auto, 0);\n\n .md-button, .md-icon-button {\n &:last-of-type {\n // Reset 6px margin for the button.\n @include rtl-prop(margin-right, margin-left, 0, auto);\n }\n }\n\n md-checkbox {\n margin: 0 6px;\n padding: 0 8px;\n min-height: $icon-button-height;\n\n &:last-child {\n width: $icon-button-width;\n @include rtl-prop(margin-right, margin-left, 0, auto);\n }\n }\n\n md-switch {\n margin-top: 0;\n margin-bottom: 0;\n\n @include rtl-prop(margin-right, margin-left, -6px, auto);\n }\n }\n\n & > p, & > .md-list-item-inner > p {\n flex: 1 1 auto;\n margin: 0;\n }\n }\n\n &.md-2-line,\n &.md-3-line {\n &, & > .md-no-style {\n align-items: flex-start;\n justify-content: center;\n\n &.md-long-text {\n margin-top: $baseline-grid;\n margin-bottom: $baseline-grid;\n }\n\n .md-list-item-text {\n flex: 1 1 auto;\n margin: auto;\n text-overflow: ellipsis;\n overflow: hidden;\n\n &.md-offset {\n @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);\n }\n\n h3 {\n font-size: $subhead-font-size-base;\n font-weight: 400;\n letter-spacing: 0.010em;\n margin: $list-h3-margin;\n line-height: $list-header-line-height;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n h4 {\n font-size: $body-font-size-base;\n letter-spacing: 0.010em;\n margin: $list-h4-margin;\n font-weight: $list-h4-font-weight;\n line-height: $list-header-line-height;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n p {\n font-size: $body-font-size-base;\n font-weight: 500;\n letter-spacing: 0.010em;\n margin: $list-p-margin;\n line-height: $list-p-line-height;\n }\n }\n }\n }\n\n &.md-2-line {\n &, & > .md-no-style {\n height: auto;\n\n min-height: $list-item-two-line-height;\n @include ie11-min-height-flexbug($list-item-two-line-height);\n\n > .md-avatar, .md-avatar-icon {\n margin-top: $baseline-grid * 1.5;\n }\n\n > md-icon:first-child {\n align-self: flex-start;\n }\n\n .md-list-item-text {\n flex: 1 1 auto;\n }\n }\n }\n\n &.md-3-line {\n &, & > .md-no-style {\n height: auto;\n\n min-height: $list-item-three-line-height;\n @include ie11-min-height-flexbug($list-item-three-line-height);\n\n > md-icon:first-child,\n > .md-avatar {\n margin-top: $baseline-grid * 2;\n }\n }\n }\n}\n"
},
{
"path": "src/components/list/list.spec.js",
"content": "describe('mdListItem directive', function() {\n var attachedElements = [];\n var $compile, $rootScope;\n\n beforeEach(module(\n 'material.components.list',\n 'material.components.checkbox',\n 'material.components.switch',\n 'material.components.button'\n ));\n\n beforeEach(inject(function(_$compile_, _$rootScope_) {\n $compile = _$compile_;\n $rootScope = _$rootScope_;\n }));\n\n afterEach(function() {\n attachedElements.forEach(function(element) {\n element.remove();\n });\n attachedElements = [];\n });\n\n function setup(html) {\n var el;\n inject(function($compile, $rootScope) {\n el = $compile(html)($rootScope);\n $rootScope.$apply();\n });\n attachedElements.push(el);\n\n return el;\n }\n\n describe('md-list-item', function() {\n it('should have `._md` class indicator', inject(function($compile, $rootScope) {\n var element = $compile('')($rootScope.$new());\n expect(element.find('md-list-item').hasClass('_md')).toBe(true);\n }));\n });\n\n it('forwards click events for md-checkbox', function() {\n var listItem = setup(\n '' +\n '' +\n '');\n\n var cntr = listItem[0].querySelector('div');\n\n cntr.click();\n expect($rootScope.modelVal).toBe(true);\n\n cntr.click();\n expect($rootScope.modelVal).toBe(false);\n\n });\n\n it('forwards click events for md-switch', function() {\n var listItem = setup(\n '' +\n '' +\n '');\n\n var cntr = listItem[0].querySelector('div');\n\n cntr.click();\n expect($rootScope.modelVal).toBe(true);\n\n cntr.click();\n expect($rootScope.modelVal).toBe(false);\n });\n\n it('should not wrap when proxies are disabled', function() {\n var listItem = setup(\n '' +\n '' +\n ''\n );\n\n var switchEl = listItem[0].querySelector('md-switch');\n\n // If proxies are disabled, the list will not wrap anything.\n expect(switchEl.parentNode).toBe(listItem[0]);\n\n listItem.triggerHandler('click');\n expect($rootScope.modelVal).toBeFalsy();\n\n switchEl.click();\n expect($rootScope.modelVal).toBeTruthy();\n\n expect(listItem).not.toHaveClass('md-clickable')\n });\n\n it('should not trigger the proxy element, when clicking on a slider', function() {\n var listItem = setup(\n '' +\n '' +\n '' +\n '');\n\n var slider = listItem.find('md-slider')[0];\n\n slider.click();\n\n expect($rootScope.modelVal).toBeFalsy();\n });\n\n it('should convert spacebar keypress events as clicks', inject(function($mdConstant) {\n var listItem = setup(\n '' +\n '' +\n '');\n\n var checkbox = angular.element(listItem[0].querySelector('md-checkbox'));\n\n expect($rootScope.modelVal).toBeFalsy();\n\n checkbox.triggerHandler({\n type: 'keypress',\n keyCode: $mdConstant.KEY_CODE.SPACE\n });\n\n expect($rootScope.modelVal).toBe(true);\n }));\n\n it('should not convert spacebar keypress for text areas', inject(function($mdConstant) {\n var listItem = setup(\n '' +\n '