aurelia-ui-toolkits / aurelia-mdc-web Goto Github PK

Component	Status	Demo
banner	Available	View
button	Available	View
card	Available	View
checkbox	Available	View
chips	Available	View
data-table	Available	View
dialog	Available	View
drawer	Available	View
elevation	Available	View
expandable	Available 💥	View
fab	Available	View
form-field	Available	View
icon	Available	View
icon-button	Available	View
image-list	Available	View
layout-grid	Available	View
linear-progress	Available	View
list	Available	View
lookup	Available 💥	View
menu-surface	Available	View
menu	Available	View
radio	Available	View
ripple	Available	View
segmented-button	Available	View
select	Available	View
slider	Available	View
snackbar	Available	View
switch	Available	View
tabs	Available	View
text-field	Available	View
tooltip	Available	View
top-app-bar	Available	View
tree-view	Available 💥	View
typography	Available	View

WARNING

💥 - Non-native, opinionated controls which will not be implemented in the original MDC but are required in most projects.

Browser Support

IE 11 is not supported

Thank you

To Arjen de Blok for the idea of wrapping MDC and coding hints!
To Dominic Carretto for valuable insights, demo app structure, and markup files from Angular MDC wrappers!

aurelia-mdc-web's People

Contributors

Stargazers

Watchers

Forkers

glyad swalters arjendeblok collinherber green3g felixrandle codingoi mattpottstj ziykon zierk59 vheissu ashleyjbartlett

aurelia-mdc-web's Issues

[tooltip] How to use with a dynamic property (binding)?

I've tried passing a tooltip value on an element from a property in a variety of ways. Each case leaves the tooltip "undefined".

<button mdc-tooltip="${myProp}"></button>

<button mdc-tooltip.bind="myProp"></button>

<button mdc-tooltip="value: ${myProp};"></button>

<button mdc-tooltip="${'value: ' + myProp}"></button>

Anything else I can try, or know where a good place for a fix would be? Happy to look into it but I'm not seeing anything obvious in the tooltip package where value is getting used.

Linear Progress: open attribute set initially to false does not work

I am using the linear progress a lot. When it's open attribute is initially true and then becomes false then the linear progress disappears.
When I set open initially to false then it is visible directly. So I cannot start with an invisible progress and let make visible at a later moment.
My use case is that when a user submits a form that the linear progress is shown while submitting the form. So it is not shown when the user is filling the form.

Circular Progress page fails

Great job, @MaximBalaganskiy!

Circular progress page fails on the examples site with the following error.

Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined
    at MdcSlider.beforeFoundationCreated (mdc-slider.ts:117)
    at MdcSlider.attached (mdc-component.ts:22)

Rendering rows using template tags

Hi,

I am using mdc-data-table and trying to render table rows for all the children of a collection of nested objects.
Using a normal table this would look something like this:

<tbody>
             <template repeat.for="contract of contracts">
                <tr as-element="compose" view="./contract/contract.html"></tr>
                <template repeat.for="beneficiary of contract.beneficiaries">
                    <tr as-element="compose" view="./beneficiary/beneficiary.html"></tr>
                    <template repeat.for="service of beneficiary.services">
                        <tr as-element="compose" view="./service/service.html"></tr>
                        <template repeat.for="transactionLine of service.transactionLines">
                            <tr as-element="compose" view="./transaction-line/transaction-line.html"></tr>
                        </template>
                    </template>
                </template>
             </template>
</tbody>

If I try and emulate the same, but instead of using <tr>'s, I use <mdc-data-table-row>'s, the resulting <mdc-data-table-content> in the rendered Aurelia view is completely empty.

Looking at the code in mdc-data-table.js, is see querySelector is failing to return any elements.

var rows = (_g = element.querySelectorAll('mdc-data-table-content>mdc-data-table-row')) !== null && _g !== void 0 ? _g : [];

Obviously the selector mdc-data-table-content>mdc-data-table-row will not find anything as the selector uses immediate child whereas in my case I have a template element in between the content and row elements.

Any idea how I might achieve what I want?

[question] How to make mdc-lookup data async?

As seen in: https://gist.dumber.app/?gist=81d9964a3ca5f034556281f25fd6ef2a loading the lookup data ansynchronous will results into error messages.

Is there a way to refresh programmatically or should the component handle optionsChanged()?

mdc-select item not initialized from bound value

Version
@aurelia-mdc-web/select: 1.1.6

View

<mdc-select label="Status"
            value.bind="_selectedStatus"
            outlined="true"
>
    <mdc-list>
        <mdc-list-item repeat.for="status of _availableStatuses" value.bind="status">
            <span>${status}</span>
        </mdc-list-item>
    </mdc-list>
</mdc-select>

ViewModel

activate(
    params: any,
    routeConfig: RouteConfig,
    navInstruction: NavigationInstruction
) {
    this._selectedStatus = "passed";
}

Actual Screenshot

Expected

[bug] Crashes app when trying to import only slider

When trying to import only the slider-component, ie @aurelia-mdc-web/slider, it crashes the page where I use it with

HTML:

<mdc-slider min="0" max="120" value.bind="someData" name="test"></mdc-slider>

Console:

ERROR [app-router] Error: No Aurelia APIs are defined for the element: "DIV".

The debug shows that the plugins is configured properly

DEBUG [aurelia] Configured plugin @aurelia-mdc-web/slider.

If i install the @aurelia-mdc-web/all-package however, the error goes away and everything works. Is there an additional package I need that's not documented?

Data table navigation and sorting issues

Hi,

Couple of issues with data-tables sorting event and pagination needing to maintain the activePage property.
Also a couple of issues with focus events on the button and icon-button when disabled.

PR created for these fixes on Monday at: #60

Sorry for creating an issue but didn't know how to alert you to review the PR. Doesn't appear to be any way to notify you even if I tagged you in the PR comment.

Would be good to get a method of contacting you (email or something) when i create PRs, especially for features I’m working on, as I don't want to pollute the Issues section.

Cheers,
Matt

mdc-list keeps interactive with nonInteractive option

Version
2.0.0

View

<mdc-list nonInteractive="true">
    <mdc-list-item>Hallo</mdc-list-item>
    <mdc-list-item>Liebe</mdc-list-item>
    <mdc-list-item>Welt</mdc-list-item>
</mdc-list>

Actual

Hover and Ripple are enabled

Expected

Hover and Ripple are disabled

Gist
https://gist.dumber.app/?gist=d4c7e911d2a42aca9a9f3e35ceba3587

Assumes pre-existing installation of aurelia-typed-observable-plugin

Following the Getting Started guide with Aurelia MDC v1.1.4 on an empty Aurela v1.3.1 project (CLI bundler) with aurelia.use.plugin(PLATFORM.moduleName('@aurelia-mdc-web/all')) causes au build to fail due to missing package.json of aurelia-typed-observable-plugin. Manually installing the dependency with npm i aurelia-typed-observable-plugin before the build resolves the issue.

MDC Select Validation

I have a form with a required

text field
select (with object binding)

I have a problem to get validation implemented so that both controls behave in the same way.
What I would like is that if the control gets focus, the user does not fill in anything and moves to the next control then an error message is shown indicating that the field is required.

For a text field this works as expected. I have two ways of doing that:

with the required attribute and an helper text with a validation attribute;
with Aurelia validation with a validate binding behavior (without a helper text with a validation attribute).

For a select this only works in one way correctly

with the required attribute and an helper text with a validation attribute

With Aurelia validation this does not work as I would like it

With Aurelia validation and a validateOnChange binding behavior the error is only shown the user if you first select a value and then clear the value.
With Aurelia validation and a validate binding behavior then the error is shown too early (when the menu is opened)

Is there a way to use a select with Aurelia validation and the desired behavior?

A question on theme support

I tried to implement a "dark theme" by setting up the primary, secondary and background color like described here: https://material.io/develop/web/theming/color

But the $background variable is ignored in aurelia-mdc and the application keeps still "light".

@use "@material/theme" with (
    $primary: #f00,
    $on-primary: #ff0,
    $secondary: #f0f,
    $on-secondary: #0ff,
    $background: #333,
    $surface: #aaa,
    $on-surface: #0f0,
);

mdc-chip is using dirtychecker timer

I noticed my app was using cpu when sitting still. After some digging, I found that the aurelia was setting up dirty checks on every mdc-chip I had on the screen.

the selected property seems to be the problem.

mdc-text-field prefix and suffix prevents click to focus

I'm using a large prefix text. If I try to click into the input box where the prefix text would be, the input does not get focus.

Can be recreated in docs by trying to click on the left.

[feature-request]: add the Tooltip component

Intention:

The component is must-have for real-world UI development;
The component is implemented in base (original) MDC framework.

[bug] - list item trailing links are not clickable

I'm not 100% sure if this is a bug but we've discovered that if you include a link in the trailing icon of the list-item the link is not clickable and doesn't work:

      <mdc-list-item repeat.for="file of files" two-line disable-ripple.bind="disableRipple">
        <mdc-icon mdc-list-item-leading>${file.icon}</mdc-icon>
        <mdc-list-item-primary-text>${file.name}</mdc-list-item-primary-text>
        <mdc-list-item-secondary-text>${file.addDate}</mdc-list-item-secondary-text>
        <a href="#/list/examples" mdc-list-item-trailing="icon" aria-label="View more" title="More info">
          <mdc-icon>info</mdc-icon>
        </a>
      </mdc-list-item>

In the past it was possible to embed a small link or icon in the list-item-meta markup - (now trailing) but not it seems the list-item takes over the child elements as well.

Let me know if there's a better way to achieve this.

Version:
"@aurelia-mdc-web/all": "^7.1.2",

mdc-switch style missing

I'm migrating form 3.x to 7.1.2 and get the following error message when compiling:

 SassError: Can't find stylesheet to import.
       ╷
    60 │ @use '@material/switch/mdc-switch';
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      src\styles\mdc.scss 60:1  @import
      src\app.scss 22:9         root stylesheet

When I remove this line, the switch component keep unstyled.

//@use '@material/switch/mdc-switch';
@use '@material/switch';

mdc-switch: Label not clickable anymore

Since this HTML structure:

<mdc-form-field>
        <button mdc-switch selected.bind="selected"></button>
        <label>off/on</label>
</mdc-form-field>

Clicking the label doesn't change switch state anymore.
Even when I follow the documentation (https://material.io/components/switches/web#other-variants) and add id/for attributes.

<mdc-form-field>
        <button mdc-switch selected.bind="selected" id="mySwitch"></button>
        <label for="mySwitch">off/on</label>
</mdc-form-field>

I would expect, that labels are always clickable, when present in a mdc-form-field container.

Incorrect text field alignment in Safari

As per material-components/material-components-web#5879

Tabs on firefox includes horizontal scroll bar

When viewing the tabs demo in firefox, I noticed an extra scrollbar appearing just below the tabs. Its disabled but visible.

Chrome on left / Firefox on right:

[Bug] Data table progress is broken with upgrade to 2.x

Say I have a table like:

<mdc-data-table class="admin" busy.bind="busy">
            <mdc-data-table-header>
                    <mdc-data-table-header-cell>
                        <mdc-checkbox></mdc-checkbox>
                    </mdc-data-table-header-cell>
            </mdc-data-table-header>
            <mdc-data-table-content>
                <mdc-data-table-row repeat.for="row of rows">
                        <mdc-data-table-cell>
                            <mdc-checkbox checked.bind="row.__checked"></mdc-checkbox>
                        </mdc-data-table-cell>
                </mdc-data-table-row>
            </mdc-data-table-content>
        </mdc-data-table>

The busy.bind="busy" shows the loading indicator in 1.x aurelia mdc-web. However, in 2.0 it throws an error.

Uncaught (in promise) Error: MDCDataTable: Table container element not found.
    at Object.getTableContainerHeight (mdc-data-table.js?0464:313)
    at MDCDataTableFoundation.showProgress (foundation.js?9ba6:241)
    at MdcDataTable.eval (mdc-data-table.js?0464:154)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at fulfilled (tslib.es6.js?9ab4:71)

Seems there is missing an element:
https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/packages/data-table/src/mdc-data-table.ts#L282

            getTableContainerHeight: function () {
                var tableContainer = _this.root.querySelector('.mdc-data-table__container'); 
                if (!tableContainer) {
                    throw new Error('MDCDataTable: Table container element not found.');
                }
                // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
                return tableContainer.getBoundingClientRect().height;
            },

mdc-text-field label disappears on focus with options: fullwidth, outlined

Version
@aurelia-mdc-web/text-field: 1.1.6

View

<mdc-layout-grid-cell span="12">
    <mdc-text-field
        label="Search"
        outlined
        fullwidth
        value.bind="_searchQuery"
        keydown.delegate="_filter() & debounce"
    >
        <mdc-icon mdc-text-field-icon leading>search</mdc-icon>
    </mdc-text-field>
</mdc-layout-grid-cell>

Screenshot

[feature-request]: add calendar, date-picker, and time-picker components

Intention:

Components mentioned above are must-have components

Deprecation Warning (Non-Urgent)

This is in aurelia-mdc-web v7.0.1.

When building, there is a deprecation warning about using forward slash for division (details below).

This was fixed in Material Components in this issue:

material-components/material-components-web#7158

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($svg-natural-width, icon-variables.$icon-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

194 │ width: $svg-natural-width / icon-variables.$icon-size * 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 194:14 @content
node_modules/@material/feature-targeting/_feature-targeting.scss 218:5 targets()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 193:5 -dropdown-icon-base()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 85:7 without-ripple()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 16:3 core-styles()
node_modules/@aurelia-mdc-web/expandable/mdc-expandable.scss 3:1 @forward
node_modules/@aurelia-mdc-web/expandable/_index.scss 1:1 @use
node_modules/@aurelia-mdc-web/all/mdc-all.scss 33:1 @forward
node_modules/@aurelia-mdc-web/all/_index.scss 1:1 @use
src/my-app.scss 7:1 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($svg-natural-height, icon-variables.$icon-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

195 │ height: $svg-natural-height / icon-variables.$icon-size * 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 195:15 @content
node_modules/@material/feature-targeting/_feature-targeting.scss 218:5 targets()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 193:5 -dropdown-icon-base()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 85:7 without-ripple()
node_modules/@aurelia-mdc-web/expandable/_mixins.scss 16:3 core-styles()
node_modules/@aurelia-mdc-web/expandable/mdc-expandable.scss 3:1 @forward
node_modules/@aurelia-mdc-web/expandable/_index.scss 1:1 @use
node_modules/@aurelia-mdc-web/all/mdc-all.scss 33:1 @forward
node_modules/@aurelia-mdc-web/all/_index.scss 1:1 @use
src/my-app.scss 7:1 root stylesheet

[Bug] [Documentation] Select API Button doesn't work

https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/select

Notice that clicking the "API" tab does not switch to the API view.

Console spits out: TypeError: Cannot read property 'children' of undefined

Lookup as autocomplete

I am trying your components as an alternative to mine.

What I made myself is an autocomplete. For example you want to select a contact.; you type in some letters; a request is going to the backend to search for a name starting with those letter; and a menu is shown where you can select the right contact.

I have tried to use the lookup for that. I have set the options field to a function that returns a list of contact depending on what you have typed in the input. I have a couple of problems with the current implementation.

Whenever you click on the input, the menu is shown, but nothing is there yet. My options function is not called either.
I would like to search only when the user has filled in more then 2 characters.

Are you planning this kind of functionality in the lookup or do you see this as a separate autocomplete control?
I could of course make it myself, but if you already planned this, I am not going to. I can help you of course if you like.

Lookup resets value when hidden/shown with 'if.bind'

This happens because the view model is reused and options is already set when the element is attached back

[BUG] Unable to Toggle Autocomplete on mdc-text-input

Based on the code here: https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/packages/text-field/src/mdc-text-field.ts#L162 it should not autocomplete if you supply nothing however it does appear that autocomplete is still functioning.

There is also no examples of this in the documentation and may be worth adding something to the demo site.

Also instead of just checking undefined, maybe also checking false and off. I highly suggesting checking for off as that is native HTML verbage.

Circular Progress Documentation

I'm only including individual components

The documentation for Circular Progress, says to include:

@use '@material/circular-progress/mdc-circular-progress'; @use '@material/circular-progress'; @use "@aurelia-mdc-web/circular-progress";

However this results in the error.
SassError: There's already a module with namespace "circular-progress".

Do I need to include both packages @use '@material/circular-progress'; @use "@aurelia-mdc-web/circular-progress"; for the component to work correctly?

Version used:
"sass": "^1.26.11", "sass-loader": "^10.0.2", "@aurelia-mdc-web/circular-progress": "^1.1.4",

[question] How to make rich tooltips?

Original mdc-tooltip supports using rich HTML in tooltip containers (https://github.com/material-components/material-components-web/blob/master/packages/mdc-tooltip/README.md) but this bridge doesn't seem to support this or it's not documented.

Slider crashes when max and min are changing

Hello dear,
I found a bug in the slider control when you change the limits and the current value is out of the new range, the control crashes and doesn't allow you to modify the value.
You could reproduce the error following the next steps:

move the value to 100(maximum as default).
change the maximum to 90.

Official example page: https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/slider/examples

[question] How to use Snackbars?

I have found this library super helpful to implement MDC in my Aurelia application, thanks for all the work! 👏

I'm relatively new to working with Aurelia and MDC but I've been able to follow most of the examples and use them on my Aurelia app. One thing I could not figure out from the examples is how to properly use Snackbars.

I can see that in the example section you call a method with click.delegate - for example:
<button mdc-button raised click.delegate="dismissIcon()">Dismiss Icon</button>

How exactly should I implement this method in my view-model to produce a Snackbar?

mdc-chips

I like to see an implementation of mdc-chips. Is there any planning on this.

Documentation has incorrect install scripts

https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/getting-started

Just wanted to point out that you're yarn and npm scripts:
npm i @aurelia-mdc/all

They are incorrect. Should be
@aurelia-mdc-web/all

Lookup as autocomplete with back-end call

I have implemented a lookup as an autocomplete as described in #2

But now I have a problem when I want to use a variable in the page view model for doing a back-end call.
Because the call to the options function is made from the MdcLookup component, the this pointer in my method in the page view model is pointing to the MdcLookup component instead of the page view model.
So I cannot make use of any of the attributes or properties of the page view model.

https://gist.dumber.app/?gist=01ac584061194a3093bb58cec8bbe8a6

Select Labels Not Binding/Displaying Correctly

With the upgrade to 3.0.0 I'm noticing that all the labels on my selects have disappeared.
I'm noticing the CSS culprit is .mdc-notched-outline--no-label .mdc-notched-outline__notch went from padding: 0 to display: none

Following your example on the demo app, I notice that this style is not being applied to your select components with ones with labels. So I guess the next question to ask is why is that being applied to my selects that DO have a label.

Pre 3.0.0 this was not a problem.
Most of my selects are label.bind= , and I did changing to just label="something" to see if it was a binding/timing issue but that didn't seem to resolve the issue.

Below is an example block of code.

                            <div class="col mb-4" repeat.for="filter of filters">
                                <mdc-select change.delegate="filter.changeFunction($event)" label.bind="filter.label"
                                    outlined class="select-default w-100" value.bind="filter.value">
                                    <img src="${filter.iconPath}" mdc-select-icon>
                                    <mdc-list>
                                        <mdc-list-item repeat.for="option of filter.options" value.bind="option" class="text-white">
                                            ${option[filter.displayValue]}
                                        </mdc-list-item>
                                    </mdc-list>
                                </mdc-select>
                            </div>

Here is a screenshot of the aurelia inspector binding:
https://chicksgold.gyazo.com/3be0c301dab2ec5d1186d1b999809ab0

v2.0.7 Example:
https://chicksgold.gyazo.com/c8b0bc525d881f01c8584b3756e9457f

V3.0.0 Example:
https://chicksgold.gyazo.com/ee0c14dcf1aac5a9dd7adfd354121e5c

Date pickers not working in Chrome on Windows

Date pickers don't seem to work in Chrome on Windows but they work in Firefox.

https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/text-field/examples

Google Chrome version:

[BUG] [Documentation/Demo App] The click on tab "API" on MDC-RADIO view doesn't open the 'API' content

Given: I'm on .../aurelia-mdc-web/#/radio/examples view.
When I click on "API" tab,
Then I expect to see an API description, but the Examples related view is still remaining on page.

Checkbox and radio not keeping checked values when surrounded by if.bind

See example at https://github.com/swalters/aurelia-mdc-example

Development guide

Hi,

Is the development guide up to date as i'd like to contribute with a couple of bug fixes and features but i can't build a forked repo?

After cloning locally, my packages.json file doesn't contain any scripts section so when trying to follow step 5 - From the root of the project, run npm run refresh to bootstrap lerna, i just get the general npm error: missing script: refresh.

Cheers,
Matt

Request for auto select single item on lookup

When I type into the lookup associated input and there is only one item to select I still have to select it in the menu.

Is it an option to have an 'auto-select' option in the lookup component that automatically select an item when the lookup options (loadOptions) return only one value?

Range Slider does not respect minimum value.

Reproduction steps:

Go to Range Slider at bottom of https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/slider/examples
Change Min Value in number input
Attempt to move slider below Min value

Expected Outcome:

Slider does not allow a value below minimum to be set.

Actual Outcome:

Slider allows values down to 0 to be set.

Notes

Maximum Limits works as expected.

From minChanged function in Slider

aurelia-mdc-web/packages/slider/src/mdc-slider.ts

Lines 48 to 52 in f0ee278

    
           async minChanged() { 
        
             await this.initialised; 
        
             this.endInput.setAttribute(attributes.INPUT_MIN, this.min); 
        
             this.foundation?.init(); 
        
           }

I assume this is due to the min attribute not being set on this.startInput but not entirely sure

Providing skeleton application

Hi. I've created a minimal skeleton application with the main features:

Aurelia-MDC integration
- Basic Drawer
- One main router with one sub route
SCSS integration
Injection of dev/prod configuration
Support for static assets (images, fonts)
Webpack integration
Bundle size analyzer

I made it to quickly create new applications with basic needs: https://github.com/mreiche/aurelia-material-skeleton
I just want to know if you need that and if it's worth to link it here in the documentation?

mdc-select change.delegate triggered twice

Version
@aurelia-mdc-web/select: 1.1.6
View

<mdc-select label="Status"
            value.bind="_selectedStatus"
            change.delegate="_filter()"
            outlined="true"
>
    <mdc-list>
        <mdc-list-item>(All)</mdc-list-item>
        <mdc-list-item repeat.for="status of _availableStatuses"
                       value.bind="status"
        >
            <span>${status|statusName}</span>
        </mdc-list-item>
    </mdc-list>
</mdc-select>

ViewModel

private _filter() {
    const queryParams:any = {};

    if (this._selectedStatus) {
        queryParams.status = this._selectedStatus;
    }
    queryParams.configurationMethods = this._configurationMethods;

    console.log("filter", queryParams);
    this.updateUrl(queryParams);
}

Screenshot

Browser-Log

Font size of list items of drawer not correct

I upgraded from 5.1 to 7.1 and noticed that the font size of the list items in de drawer was increased from 14px to 16px.

They should be 14px (0.875rem). In the past this was done via de selector .mdc-drawer .mdc-list-item .
But because of the mdc-list changes it does not seem to work anymore.

[Documentation/Demo App] The example is missing for hierarchical menu

The documentation example is missing for hierarchical menu use case like is on image below:

Chips non-removable not working

see https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/chips/examples

You can still remove the chip flagged non-removable

In may app, I bind a flag to it
non-removable.bind="disabled"

disabled = true and chip can still be removed

Error in MDCDataTable in @aurelia-mdc-web/[email protected]

Uncaught TypeError: Cannot read property 'checked' of undefined
at Object.isCheckboxAtRowIndexChecked (mdc-data-table.js?2efa:245)
at MDCDataTableFoundation.handleRowCheckboxChange (foundation.js?9ba6:183)
at MdcDataTable.handleRowCheckboxChange (mdc-data-table.js?2efa:104)
at MdcDataTable.handleEvent (mdc-data-table.js?2efa:160)

mdc-data-table Pagination Demo

Pagination demo shows only 3 items despite apparent 35 items in array. Also does not update items when controls for page size or forward/back.

[Bug v2] Expandable styling incorrect

Video of what is happening: https://chicksgold.gyazo.com/37f338d9d9fef76712c8c28516713ff4
Version of aurelia-mdc: v8.0.1-au2

Code:

        <mdc-expandable accordion>
            <div slot="caption">Lorem ipsum dolor...</div>
            Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
            voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per
            an legere iriure blandit. Veri iisque accusamus an pri.
        </mdc-expandable>
        <mdc-expandable accordion>
            <div slot="caption">Lorem ipsum dolor...</div>
            Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
            voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per
            an legere iriure blandit. Veri iisque accusamus an pri.
        </mdc-expandable>

	async minChanged() {
	await this.initialised;
	this.endInput.setAttribute(attributes.INPUT_MIN, this.min);
	this.foundation?.init();
	}

aurelia-ui-toolkits / aurelia-mdc-web Goto Github PK

aurelia-mdc-web's Introduction

Aurelia MDC

Final release

Quick Links

Sponsors

Material Design Components

WARNING

Browser Support

Thank you

aurelia-mdc-web's People

Contributors

Stargazers

Watchers

Forkers

aurelia-mdc-web's Issues

Reproduction steps:

Expected Outcome:

Actual Outcome:

Notes

Recommend Projects

Recommend Topics

Recommend Org