Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@dev.mohe/mwc-dialog

material-components1Apache-2.00.19.3TypeScript support: included

Material Design dialog web component

material design, web components, dialog

readme

<mwc-dialog> Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Material Design Guidelines: dialogs

Demo

Installation

npm install @dev.mohe/mwc-dialog

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Alert

<mwc-dialog open>
  <div>Discard draft?</div>
  <mwc-button
      slot="primaryAction"
      dialogAction="discard">
    Discard
  </mwc-button>
  <mwc-button
      slot="secondaryAction"
      dialogAction="cancel">
    Cancel
  </mwc-button>
</mwc-dialog>

Confirmation

<style>
  mwc-dialog div {
    flex-direction: column;
  }
  mwc-dialog div, mwc-radio {
    display: flex;
  }
</style>

<mwc-dialog heading="Phone Ringtone" open>
  <div>
    <mwc-formfield label="Never Gonna Give You Up">
      <mwc-radio id="a1" name="a" checked></mwc-radio>
    </mwc-formfield>
    <mwc-formfield label="Hot Cross Buns">
      <mwc-radio name="a"></mwc-radio>
    </mwc-formfield>
    <mwc-formfield label="None">
      <mwc-radio name="a"></mwc-radio>
    </mwc-formfield>
  </div>
  <mwc-button
      dialogAction="ok"
      slot="primaryAction">
    ok
  </mwc-button>
  <mwc-button
      dialogAction="cancel"
      slot="secondaryAction">
    cancel
  </mwc-button>
</mwc-dialog>

<script type="module">
  import '@dev.mohe/mwc-dialog';
  import '@dev.mohe/mwc-button/mwc-button';
  import '@dev.mohe/mwc-radio/mwc-radio';
  import '@dev.mohe/mwc-formfield/mwc-formfield';
</script>

Scrollable

<mwc-dialog heading="Privacy Policy" open>
<div>
  really large amount of text...
</div>
<mwc-button
    slot="primaryAction"
    dialogAction="accept">
  Accept
</mwc-button>
<mwc-button
    slot="secondaryAction"
    dialogAction="decline"
    disabled>
  Decline
</mwc-button>
</mwc-dialog>

Styled

<style>
  .styled {
    --mdc-shape-medium: 0px;

    /* color buttons */
    --mdc-theme-primary: #344955;
  }
</style>

<mwc-dialog heading="Styled" class="styled" open>
    <div>
      In this dialog we have changed the button color and removed the border
      radius.
    </div>
  <mwc-button slot="primaryAction" dialogAction="close">
    This button is bluish!
  </mwc-button>
</mwc-dialog>

Stacked

<mwc-dialog heading="Stacked" stacked>
  <div>
    This is what happens when you set the stacked property on mwc-dialog.
    Notice that the primary action is now on top.
  </div>
  <mwc-button slot="primaryAction" dialogAction="close">
    Primary
  </mwc-button>
  <mwc-button slot="secondaryAction" dialogAction="close">
    Secondary
  </mwc-button>
</mwc-dialog>

Form Validation

<mwc-dialog id="dialog" heading="Form Validation">
  <p>This dialog can validate user input before closing.</p>
  <mwc-textfield
    id="text-field"
    minlength="3"
    maxlength="64"
    placeholder="First name"
    required>
  </mwc-textfield>
  <mwc-button
    id="primary-action-button"
    slot="primaryAction">
    Confirm
  </mwc-button>
  <mwc-button
    slot="secondaryAction"
    dialogAction="close">
    Cancel
  </mwc-button>
</mwc-dialog>
<script>
  const dialog = document.querySelector('#dialog');
  const textField = document.querySelector('#text-field');
  const primaryButton = document.querySelector('#primary-action-button');

  primaryButton.addEventListener('click', () => {
    // validate, possible asynchronous such as a server response
    const isValid = textField.checkValidity();
    if (isValid) {
      dialog.close();
      return;
    }

    textField.reportValidity();
  });
</script>

API

Slots

Name Description
primaryAction A focusable and clickable target. Typically a button such as <mwc-button>. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when Enter key is pressed in the dialog.
secondaryAction A focusable and clickable target. Typically a button such as <mwc-button>. Placed immediately to the left of the primaryAction (LTR) or below when stacked.
default Content to display in the dialog's content area.

Properties/Attributes

Name Type Description
open boolean Whether the dialog should open.
hideActions boolean Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
stacked boolean Whether to stack the action buttons.
heading string Heading text of the dialog.
scrimClickAction string Default: 'close' – Action to be emitted with the closing and closed events when the dialog closes because the scrim was clicked (see actions section).
escapeKeyAction string Default: 'close' – Action to be emitted with the closing and closed events when the dialog closes because the excape key was pressed (see actions section).
defaultAction string Default: 'close' – Action to be emitted with the closing and closed events when <mwc-dialog>.open is toggled (see actions section).
actionAttribute string Default: 'dialogAction' – Attribute to read in light dom of dialog for closing action value (see actions section).
initialFocusAttribute string Default: 'dialogInitialFocus' – Attribute to search for in light dom for initial focus on dialog open.

Methods

Name Description
forceLayout() => void Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.
focus() => void Focuses on the initial focus element if defined (see focus section).
blur() => void Blurs the active element.
show() => void Opens the dialog.
close() => void Closes the dialog.

Listeners

Event Name Target Description
click root element Detects if clicked target is a dialog action.
resize window Performs dialog layout (passive).
orientationchange window Performs dialog layout (passive).
keydown mwc-dialog Listens for the enter key to click the default button (passive).
keydown document Listens for the escape key to close the dialog (see escapeKeyAction).

Events

Event Name Target Detail Description
opening mwc-dialog {} Fired when the dialog is beginning to open.
opened mwc-dialog {} Fired once the dialog is finished opening (after animation).
closing mwc-dialog {action: string} Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see actions section).
closed mwc-dialog {action: string} Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see actions section).

CSS Custom Properties

Name Default Description
--mdc-dialog-scrim-color rgba(0, 0, 0, 0.32) Color of the scrim. (Note: setting alpha to 0 will still make scrim clickable but transparent).
--mdc-dialog-heading-ink-color rgba(0, 0, 0, 0.87) Color of the heading text.
--mdc-dialog-content-ink-color rgba(0, 0, 0, 0.6) Color applied to the projected content. (Note: it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).
--mdc-dialog-scroll-divider-color rgba(0, 0, 0, 0.12) Color of the dividers present when dialog is scrollable.
--mdc-dialog-min-width 280px min-width ofthe dialog surface.
--mdc-dialog-max-width 560px max-width of the dialog surface. (Note: if max-width is < 560px, there is a visual jank bug that will occur causing the max width to be 560px when the window is sized to <= than 560px).
--mdc-dialog-max-height calc(100% - 32px) Max height of the dialog surface.
--mdc-dialog-box-shadow mdc elevation 24 Sets the box shadow of the dialog.

Elevation values

Elevation Level CSS Value
24 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)

Global Custom Properties

This component exposes the following global theming custom properties.

Name Description
--mdc-theme-surface Color of the dialog surface's background.
--mdc-shape-medium Corner radius of the dialog surface.
--mdc-typography-body1-<PROPERTY> Styles the typography of the dialog's text.
--mdc-typography-headline6-<PROPERTY> Styles the typography of the action buttons.

Actions

Actions close the dialog on click. You can define an action by slotting an element with the dialogAction="..." string attribute. The name of the attribute can be customized by the actionAttribute property. When a clickable element with the dialogAction attribute is clicked, mwc-dialog will get the value of the attribute and fire the closing and subsequent closed events with a detail of {action: <clickedElement.getAttribute('dialogAction')>}.

For example:

<mwc-dialog open>
  <div>
    <div>
      This is my content. Here is an actionable button:
      <button dialogAction="contentButton">button 1</button>
    </div>
    <div>
      This is my content. Here is a diabled actionable button:
      <button disabled dialogAction="disabledContentButton">button 2</button>
    </div>
  </div>
  <mwc-button slot="primaryAction" dialogAction="ok">ok</mwc-button>
  <mwc-button slot="secondaryAction">cancel</mwc-button>
</mwc-dialog>

In this example we have 3 actionable elements:

<button dialogAction="contentButton">button 1</button>
<button disabled dialogAction="disabledContentButton">button 2</button>
<mwc-button slot="primaryAction" dialogAction="ok">ok</mwc-button>
  • Clicking button 1 will close the dialog and fire a closing and subsequently a closed event with a detail of {action: 'contentButton'}.
  • Clicking button 2 will not close the dialog since it is disabled
  • Clicking the cancel mwc-button will not close the dialog as it does not have a dialogAction attribute set on it.
  • Clicking the ok mwc-button will close the dialog and fire a closing and subsequently a closed event with a detail of {action: 'ok'}.
  • Setting document.querySelector('mwc-dialog').open = false; will close the dialog and fire a closing and subsequently a closed event with a detail of {action: 'close'} (action is configurable via defaultAction property).

Focus

Initial focus can be set on an element with the dialogInitialFocus boolean attribute (configurable via the initialFocusAttribute property).

For example:

<mwc-dialog heading="Initial Focus" open>
  <div>
    In this example we set "dialogInitialFocus" on the mwc-textfield.
    When this dialog opens, it is auto-focused.
  </div>
  <mwc-textfield
      label="i am auto-focused"
      dialogInitialFocus>
  </mwc-textfield>
  <mwc-button slot="primaryAction" dialogAction="close">
    Primary
  </mwc-button>
  <mwc-button slot="secondaryAction" dialogAction="close">
    Secondary
  </mwc-button>
</mwc-dialog>

In this example we set dialogInitialFocus on the mwc-textfield, so mwc-textfield.focus() will be called on the button. This attribute can also be set on anything in the light DOM of mwc-dialog or the light dom of the flattened, distributed nodes including the primary and secondary actions. Only one element designated with this attribute will be focused.

Calling focus() on the mwc-dialog itself will call focus() on any dialogInitialFocus element in the light DOM of mwc-dialog.

Calling blur() on the mwc-dialog will attempt to blur the activeElement of the shadow root of mwc-dialog or the root node of the dialog.

Additional references

changelog

Change Log

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[v0.19.1] - 2020-10-08

Fixed

  • linear-progress
    • Fix distributed build by including ResizeObserver types

[v0.19.0] - 2020-10-07

Added

  • button
    • Sass theming mixins added
  • base-element
    • BaseElement.click() forwards focus to BaseElement.mdcRoot
  • elevation-overlay
    • implemented elevation overlay styles
  • fab
    • reducedTouchTarget reduces the touch target on mini fab
  • form-element
    • FormElement.click() forwards focus to FormElement.formElement
  • list
    • export for ActionDetail
    • export for SelectedDetail
  • menu
    • --mdc-menu-max-height to set max height on menu
  • tab
    • export for TabInteractionEventDetail
    • fix race condition on safari

Changed

  • fab
    • BREAKING:VISUAL default touch target increased on mini fab by 8px.
  • button
    • Separate classMap into its own method

Fixed

  • Unpkg integration should properly dedupe after removing file extensions from imports
  • button
    • outline color should default to on-surface with 12% opacity
    • disabled outline color should default to on-surface with 12% opacity
  • fab
    • BREAKING:VISUAL vertical alignment is now all inline and up to spec.
  • icon-button-toggle
    • removed aria-hidden="true" from button
  • linear-progress
    • Fixed performance issues with indeterminate set on modern browsers
    • Animations no longer run when indicator has been closed.
  • menu
    • Fixed a wrong export of DefaultFocusState from mwc-menu.ts

[v0.18.0] - 2020-08-03

Changed

  • fab
    • BREAKING removed --mdc-fab-box-shadow-hover; use --mdc-fab-box-shadow
    • BREAKING removed --mdc-fab-box-shadow-active; use --mdc-fab-box-shadow
    • Ripple now uses and exposes mwc-ripple's CSS custom properties API
  • icon-button
    • BREAKING now uses lazy mwc-ripple in its implementation
  • icon-button-toggle
    • BREAKING now uses lazy mwc-ripple in its implementation
  • select
    • render methods have been renamed and reorganized (breaking if extending and overriding)
  • slider
    • An upcoming change will migrate the slider to use the MDC M2 slider. In preparation for this, the MWC slider => MDC slider dependency will not be updated until the migration is complete.
  • textfield
    • render methods have been renamed and reorganized (breaking if extending and overriding)
    • remove extra space between label and required asterisk (*)
  • top-app-bar(-fixed)
    • --mdc-top-app-bar-width is now configurable

Fixed

  • button
    • ripple will unripple when mouse/touchend happens outside of button
  • checkbox
    • Remove animation class after the animation ends to prevent replaying animations when hidden and shown, or removed and readded to the DOM
  • select
    • label will be highlighted before selected text during horizontal navigation for screen readers
    • filled variant now has a ripple
  • textarea
    • label will be highlighted before input during horizontal navigation for screen readers
    • minlength attribute is now supported
    • inputmode attribute is now supported
    • autocapitalize attribute is now supported
    • remove extra space between label and required asterisk (*)
  • textfield
    • label will be highlighted before input during horizontal navigation for screen readers
    • remove extra space between label and required asterisk (*)

Added

  • mwc-circular-progress implemented.
  • mwc-circular-progress-four-color implemented.

[v0.17.2] - 2020-06-29

Fixed

  • prod dependency breakage based on @material/dom

[v0.17.1] - 2020-06-29

  • unused GH tag

[v0.17.0] - 2020-06-29

Added

  • linear-progress
    • theming sass helpers.

Changed

  • notched-outline
    • BREAKING removed border-radius and leading-width custom properties in favor of --mdc-shape-small
  • textarea
    • BREAKING shape is now customized with --mdc-shape-small
  • textfield
    • BREAKING shape is now customized with --mdc-shape-small

[v0.16.0] - 2020-06-29

Fixed

  • mwc-list-item
    • get rid of mobile os glow on tap
    • do not set aria-selected on incompatible roles
    • ripple will unrip if unclick or touchend is outside of list-item
  • mwc-list
    • fixed regression in list that broke mwc-select in IE or shady dom.
  • Tabs no longer focus on initialization
  • mwc-list-item ripple color will now change based off of --mdc-ripple-color on initialization
  • Fix issue where textfield would throw an error when fed a non-string value
  • list selected item will update if selected item is disconnected
  • floating-label: in both select and textfield the user no longer has to call layout when changing label or outlined

Added

  • textarea
    • added separate internal and external character counters
  • textfield
    • added support for autocapitalize attribute
  • --mdc-drawer-width Drawer width is now configurable.
  • Added name property mwc-textfield & mwc-textarea for browser autofill.
  • ListItem.multipleGraphics list-item graphic width now configuratble for multiple graphics
  • Menu.menuCorner can now configure from which horizontal corner should the menu anchor from.
  • Add reducedTouchTarget param to mwc-checkbox to control touchscreen accessibility.
  • Typeahead on mwc-select
  • Added focusItemAtIndex(index) and getFocusedItemIndex to both list and menu
  • Add --m-ripple-z-index to control ripple z-index.

Changed

  • radio
    • BREAKING renamed SelectionController to SingleSelectionController
    • BREAKING moved SingleSelectionController to `@dev.mohe/mwc-radio/single-selection-controller.ts`
    • SingleSelectionController now accepts CheckableElements rather than just MWC Radio elements
  • textarea
    • BREAKING character counters are now external by default
    • BREAKING removed fullwidth variant
  • textfield
    • BREAKING removed fullwidth variant
  • BREAKING --mdc-tab-border-radius has been removed to align with spec
  • BREAKING replaced --mdc-dialog-shape-radius with --mdc-shape-medium
  • BREAKING mwc-checkbox sizing changed to 48x48 by default for touch accessibility. Disable with reducedTouchTarget attribute or property.
  • BREAKING mwc-select's fullwidth property removed since it was behaving as initially expected. Use width: 100% on the root element to accomplish fullwidth.

[v0.15.0] - 2020-05-05

Added

  • Added --mdc-menu-z-index to menu-surface
  • Added surface/on-surface theme properties for mwc-switch
  • Added overrides for ripple focus and hover opacities
    • --mdc-ripple-focus-opacity and --mdc-ripple-hover-opacity respectively
  • Added spaceBetween to mwc-formfield
  • Added activated and selected states for ripple
  • Added documentation for ripple
  • Prefix and suffix to mwc-textfield
  • mwc-formfield now has a nowrap property
  • mdc-button now has --mdc-shape-small for border radii
  • Added size property to mwc-textfield
  • mwc-fab now has a slot of icons
  • Added fullwidth property to mwc-select.
  • Added minLength to mwc-textfield

Changed

  • Refactor mwc-checkbox
    • Remove usage of MDCCheckboxFoundation
    • Replace ripple-directive with lazy mwc-ripple
  • Refactor mwc-button
    • Replace ripple-directive with lazy mwc-ripple
  • Refactor mwc-ripple
    • Normalized API to start${state} end${state} naming
  • BREAKING:VISUAL: mwc-list-item now internally uses mwc-ripple instead of styling ripple on host
  • mwc-menu's quick variant now opens synchronously
  • Convert to Sass modules
  • BREAKING removed textfield's character counter foundation directive
  • Refactor mwc-select
    • BREAKING:VISUAL internal structure of select anchor updated.
    • BREAKING naturalWidth property renamed to naturalMenuWidth for clarity.
    • BREAKING: --mdc-select-dropdown-icon-opacity and --mdc-select-disabled-dropdown-icon-opacity removed; opacity is now expressed in alpha channel of color.
    • BREAKING:VISUAL: Dropdown arrow icon motion updated.
    • BREAKING remove helperPersistent property; helper text now persistent by default if included.
  • Refactor snackbar to conform to other elements' .open .show() .close() APIs
    • BREAKING mwc-snackbar isOpen property is now called open
    • BREAKING mwc-snackbar open() method is now called show()
    • BREAKING mwc-snackbar's isOpen -> open property is now editable
  • Removed default slot from switch
  • mwc-select's button role changed to combobox

Fixed

  • Fix property renaming issues with Closure Compiler
    • Use RippleAPI interface between RippleHandlers and mwc-ripple
    • Use RippleInterface interface for ripple-directive
  • Fix regression in textfield line color custom properties
  • Fix infinite loop bug in mwc-tab-bar when activeIndex is set in first render
  • Fixed bug in mwc-slider where initializing min and max over 100 would not set correct bounds on UI.
  • Fixed " showing up in mwc-button when the ripple activates
  • Changing an invalid textfield's validation properties to valid values will update styles automatically

[v0.14.1] - 2020-03-23

Added

  • innerAriaLabel to mwc-list to set aria-label.
  • --mdc-text-field-disabled-line-color added

Changed

  • Update lit-element dependency to 2.3.0 for all components.

Fixed

[v0.14.0] - 2020-03-19

Added

  • inputMode to mwc-textfield and mwc-textarea
  • readOnly to mwc-textfield and mwc-textarea
  • CSS custom properties for typography
  • Added autoValidate property on textfield
  • mwc-button now has a slot for icon and trailingIcon
  • BREAKING setting mwc-list-item.selected will update selection in the parent list
  • mwc-ripple now has CSS properties --mdc-ripple-color, --mdc-ripple-fg-opacity, and --mdc-ripple-hover-opacity
  • Added RippleHandlers to mwc-ripple to provide an easy integration point for calling ripple API.
  • Added light property to mwc-ripple to help style ripples on dark surfaces.
  • mwc-select can now select items by setting mwc-select.value.
  • Exposed --mdc-shape-medium on mwc-menu-surface
  • Added focusOnActivate property to mwc-tab
    • true by default, set to false to disable focusing on tab activation
  • mwc-select now has --mdc-select-disabled-dropdown-icon-color

Changed

  • BREAKING --mdc-button-text-transform has been renamed to --mdc-typography-button-text-transform
  • BREAKING --mdc-button-letter-spacing has been renamed to --mdc-typography-button-letter-spacing
  • BREAKING --mdc-tab-text-transform has been renamed to --mdc-typography-button-text-transform
  • BREAKING:VISUAL textfield will now only validate on blur instead of input without autoValidate prop
  • BREAKING:VISUAL mwc-tab's default slot now has name icon
  • mdcFoundation and mdcFoundationClass are now optional in BaseElement.
  • Remove export * from BaseElement and FormElement.
  • BREAKING:A11Y mwc-list will no longer update items on slotchange but on first render and on list item connect meaning list dividers will only add role="separator" in those cases
  • Make FormElement and mwc-formfield support asynchronous ripple properties
  • BREAKING Remove active property from mwc-ripple.
    • Use activate() and deactivate() methods instead
  • BREAKING mwc-ripple now requires implementing event handlers manually in the parent component.
  • BREAKING Components must now import @observer manually from `@dev.mohe/mwc-base/observer`;

Fixed

  • Setting scrollTarget on mwc-top-app-bar will update listeners
  • Fixed sass imports of _index.scss files
  • Fixed issue with caret jumping to end of input on textfield
  • mwc-list-item now works on IE
  • mwc-select's updateComplete will now properly await child custom elements' updateCompletes
  • BREAKING Disabled icon buttons no longer have pointer events
  • mwc-textfield will not set value on the internal input tag on input event causing caret jumping in Safari
  • mwc-select's --mdc-select-ink-color actually does something now
  • Setting disabled on mwc-ripple will hide the ripple
  • mwc-menu's x and y anchor margins now work for all corners
  • mwc-select's --mdc-select-disabled-ink-color now colors the selected text
  • inconsistencies on how <contol>-list-items' state of controls and element
  • list sets initial tabindex when initialized with noninteractive and then set to false

[0.13.0] - 2020-02-03

Added

  • End-alignment to mwc-textfield and mwc-textarea
  • Implemented:
    • mwc-select
    • mwc-menu
    • mwc-menu-surface
    • mwc-list
    • mwc-list-item
  • Base / utils.ts
    • isNodeElement - performant node -> element checking
    • deepActiveElementPath - finds the deepest activeElement node
    • doesElementContainFocus - determines is ancestor of activeElement
  • mwc-radio.global - groups radios across document rather than shadow root
  • Style underline of filled textfield
    • --mdc-text-field-idle-line-color
    • --mdc-text-field-hover-line-color

Fixed

  • Fixed mwc-dialog not removing keydown event listener on close.

[0.12.0] - 2019-12-16

Changed

  • BREAKING:VISUAL Wrap mwc-button label in a slot
  • Remove mwc-button border-radius from ripple
  • Make mwc-button internal button overflow none

Added

  • Added custom properties to style mwc-radio's colors
  • CSS styling options to mwc-tab
  • active attribute to mwc-tab when (de)activated
  • Added custom properties to style mwc-checkbox's colors
  • Added show and close methods to mwc-dialog

Fixed

  • BREAKING:VISUAL mwc-tab will now automatically size slotted images. Also slotted image will override icon font.

Changed

  • BREAKING mwc-tab can now only have slotted content via the hasImageIcon flag.
  • BREAKING:VISUAL mwc-checkbox default display is changed from inline to inline-block.

[0.11.1] - 2019-11-26

Fixed

  • Restore removed code in linear progress adapter

[0.11.0] - 2019-11-26

Added

  • CSS styling options to mwc-button
  • CSS styling options to mwc-textfield
  • README for mwc-drawer
  • README for mwc-checkbox
  • README for mwc-formfield
  • Demo for mwc-drawer without a header in the drawer
  • --mdc-icon-button-size and --mdc-icon-size to mwc-icon-button

Changed

  • BREAKING Dialog.title renamed to Dialog.heading and --mdc-dialog-title-ink-color renamed to --mdc-dialog-heading-ink-color as it caused clashes with HTMLElement.prototype.title.
  • Updated material dependencies to 4.0.0-canary.735147131.0.
  • BREAKING Slider.discrete removed and Slider.pin added.
  • mwc-dialog will now search its flattened distributed nodes and their trees for a focusable element.
  • BREAKING mwc-slider now emits bubbling and composed input and change events instead of MDCSlider:input and MDCSlider:change.
  • BREAKING:VISUAL the digits inside the Slider's pin will be rounded to at most 3 decimal digits.
  • BREAKING LinearProgress.determinate = false removed in favor of LinearProgres.indeterminate = false.
  • BREAKING LinearProgress.buffer = 0 default value changed to 1.
  • BREAKING:VISUAL mwc-linear-progress had --mdc-theme-secondary applied to its buffer bar's background color. This custom property's name was changed to --mdc-linear-progress-buffer-color.
  • BREAKING:VISUAL the digits inside the Slider's pin will be rounded to at most 3 decimal digits.
  • BREAKING LinearProgress.determinate = false removed in favor of LinearProgres.indeterminate = false.
  • BREAKING LinearProgress.buffer = 0 default value changed to 1.
  • BREAKING:VISUAL mwc-linear-progress had --mdc-theme-secondary applied to its buffer bar's background color. This custom property's name was changed to --mdc-linear-progress-buffer-color.
  • BREAKING mwc-icon-button will now use its default slot for <img> or <svg> icons instead of a named "icon" slot.

Fixed

  • Fixed checkbox ripple visibility when focused while being unchecked.
  • Fixed app content not being expanded inside drawer.
  • Fixed issue where slider when resized or scrolled will not respond to touch as expected.
  • Fixed issue where mwc-ripple would not ripple when parent was a shadow root
  • BREAKING:VISUAL Fixed sizing of the mwc-icon-button in mwc-snackbar
  • Fixed mwc-icon-button icon at end layout.
  • mwc-slider can now have its pin and markers added and changed dynamically.
  • Fixed mwc-icon-button icon at end layout.
  • mwc-slider can now have its pin and markers added and changed dynamically.
  • Fixed mwc-dialog race-condition bug with the blocking elements polyfill that could occur if the dialog was disconnected before it had finished opening.
  • Fixed mwc-button alignment issues when some buttons have icons and others do not.

[0.10.0] - 2019-10-11

Added

  • mwc-textfield ink and fill css variables

Changed

  • BREAKING Removed mwc-icon-font.js import. Most users should load the Material Icons and Roboto fonts by adding the following to their HTML file:

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

    See the Fonts section of the README for more details.

  • BREAKING Moved `@dev.mohe/mwc-textfield/character-counter/mwc-character-counter-directive.jsto@dev.mohe/mwc-textfield/mwc-character-counter-directive.js`.

Fixed

  • Fixed mwc-dialog's issues with working on older browsers.
  • <mwc-radio> groups are now correctly synchronized when stamped using a lit-html map or repeat, and any other time the radio is not created and connected at the same time (#282).

[0.9.1] - 2019-09-30

Fixed

  • Fixed missing `@dev.mohe/mwc-basedep on@dev.mohe/mwc-dialog`.

[0.9.0] - 2019-09-26

Added

  • Implemented mwc-dialog
  • mwc-textfield.layout method.

Changed

  • BREAKING: Added custom .focus() and .blur() functions to mwc-button that cause the button to ripple as when tab focusing.
  • BREAKING: mwc-textfield's custom .focus() function will now call .focus() on the native internal input causing the caret to appear instead of just forcing focus styles to appear.
  • BREAKING: mwc-textfield's custom .blur() function will now call .blur() on the native internal input instead of just forcing focus styles to disapprear.
  • BREAKING mwc-base/base-element no longer exports any of the lit-element or lit-html APIs (e.g. LitElement, customElement, classMap). Users should import directly from the lit-element and lit-html modules instead.
  • BREAKING mwc-textfield and mwc-textarea will now update their .value on the native input's input event instead of change.

Fixed

  • <mwc-drawer> can now be used with Rollup (via version bump to pick up WICG/inert#135).
  • <mwc-textfield> and <mwc-textarea> will now have the same height between their filled and outlined variants with helper text on older browsers.
  • mwc-textfield[required] and mwc-textarea[required] will now have their required asterisk colored correctly when customized.
  • <mwc-textfield> and <mwc-textarea> can now have basic usability in IE.
  • mwc-textarea[disabled][outlined] will no longer have a filled-in background as is per material spec.
  • mwc-textarea[disabled]label="string!"][value="string!"] will now float the label to the correct spot.

[0.8.0] - 2019-09-03

Changed

  • Published JavaScript files no longer include inlined TypeScript helpers such as __decorate. Instead, helpers are now imported from the tslib module dependency. This reduces code size by allowing multiple components to share the same helpers, and eliminates "this has been rewritten to undefined" errors from Rollup. (#439)

  • BREAKING Renamed component base modules: (#440):

    • icon-button-toggle-base.tsmwc-icon-button-toggle-base.ts
    • icon-button-base.tsmwc-icon-button-base.ts
    • top-app-bar-fixed-base.tsmwc-top-app-bar-fixed-base.ts

[0.7.1] - 2019-08-27

Added

  • Added "module" field in all packages' package.json manifests (#434)

[0.7.0] - 2019-08-27

Added

Changed

  • BREAKING The Material Icons font is no longer loaded automatically (#314). This allows more control over how fonts are loaded (e.g. serving fonts from a different server, or loading multiple fonts with a single request). Most users should now add tags like this to their HTML page:

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  • BREAKING The toggling behavior of <mwc-icon-button> has been removed (i.e. offIcon), and is now instead supported by the dedicated <mwc-icon-button-toggle> component (#370).

  • BREAKING The short layout for <mwc-top-app-bar> has been removed, and is no longer supported because it is not part of the Material Design specification (#422).
  • BREAKING The fixed layout for <mwc-top-app-bar> has been removed, and is now instead implemented by the dedicated <mwc-top-app-bar-fixed> component (#379).

Fixed

  • Fixed bug where <mwc-snackbar> open method threw if called immediately after construction (before firstUpdated) (#356).
  • Fixed bug where setting the <mwc-snackbar> labelText property could throw an exception and fail to render (#412).
  • Buttons slotted into <mwc-snackbar> now render with the correct default styles (#354).
  • Fixed layout issue affecting scrolling <mwc-tab-bar> in Firefox (#349).
  • Fixed bug where <mwc-icon> icons did not render in IE11 (#353).
  • Fixed bug where setting the checked property on an <mwc-radio> did not result in the other radios in the group becoming unchecked (#373).
  • Fixed bug where <mwc-drawer> did not work in IE (WICG/inert#129).
  • Fixed dense and prominent styling bugs in <mwc-top-app-bar> (#379).

[0.6.0] - 2019-06-05

  • Upgrade lerna to 3.x
  • Upgrade typescript to 3.4, add config for tsbuildinfo files needed for incremental compilation mode
  • Add README notes that component set is in experimental status.
  • Remove draft components, simplify package listing.
  • Prepare drawer, icon-button, linear-progress, slider, snackbar, tab components, and top-app-bar for release.
  • Fix typing for event listeners in adapters due to typescript update.
  • Add wicg-inert and blocking-elements dependencies to mwc-drawer

[0.5.0] - 2019-03-26

  • Update to mdc 1.0
  • Rewrite Adapters and Foundations with Typescript types
  • Disable pointer-events on disabled buttons

[0.4.0] - 2019-03-11

  • Update to mdc 0.44
  • fix button label issues

[0.3.6] - 2019-02-05

  • Use static get styles() on all components
  • Clean up dependencies
  • Implement drawer focus trapping
  • Add tests
  • Setup travis CI
  • Update to lit-html 1.0

[0.3.5] - 2019-01-11

  • Update lit and lit-element dependencies
  • Publish mwc-drawer

[0.3.4] - 2018-12-13

  • Update to lit-element 0.6.5 and lit-html 1.0.0-rc.1

[0.3.3] - 2018-12-03

  • Fix ripple directive for lit-html 0.13

[0.3.2] - 2018-11-16

  • Move event listeners to the class with lit-element 0.6.2
  • Add @eventOptions({passive: true}) to event handlers in tab-bar-scroller
    • More efficient scrolling behavior, as preventDefault is never called
  • Implement icon-button in typescript

[0.3.1] - 2018-10-08

  • Fix demo publishing
  • Update to lit-element 0.6.2
  • Add dependencies to lit-html where necessary
  • Add explicit .js endings to imports, where necessary
  • Fill in CHANGELOG

[0.3.0] - 2018-10-04

  • Rewrite elements in typescript
  • Add ripple lit directive to add a material ripple to any component
  • Add @observe decorator to tie data changes into base MDC Foundation handlers
  • Add a watcher for styling and typescript changes

[0.2.1] - 2018-09-21

  • Update to lit-element 0.6.1

[0.2.0] - 2018-09-13

  • Use lit-element 0.6

[0.1.2] - 2018-06-14

  • Use lit-element 0.5

[0.1.1] - 2018-05-09

  • Add READMEs and examples

[0.1.0] - 2018-05-08

  • Initial WIP of components