igniteui-webcomponents 1.0.0-beta.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -2
- package/components/avatar/avatar.d.ts +2 -0
- package/components/avatar/avatar.d.ts.map +1 -1
- package/components/avatar/avatar.js +11 -7
- package/components/avatar/avatar.js.map +1 -1
- package/components/badge/badge.d.ts +1 -1
- package/components/badge/badge.d.ts.map +1 -1
- package/components/badge/badge.js +5 -27
- package/components/badge/badge.js.map +1 -1
- package/components/badge/badge.material.css.d.ts.map +1 -1
- package/components/badge/badge.material.css.js +1 -1
- package/components/badge/badge.material.css.js.map +1 -1
- package/components/button/button-base.d.ts +11 -15
- package/components/button/button-base.d.ts.map +1 -1
- package/components/button/button-base.js +53 -27
- package/components/button/button-base.js.map +1 -1
- package/components/button/button.d.ts +15 -2
- package/components/button/button.d.ts.map +1 -1
- package/components/button/button.js +34 -24
- package/components/button/button.js.map +1 -1
- package/components/button/button.material.css.d.ts.map +1 -1
- package/components/button/button.material.css.js +1 -1
- package/components/button/button.material.css.js.map +1 -1
- package/components/button/icon-button.d.ts +2 -6
- package/components/button/icon-button.d.ts.map +1 -1
- package/components/button/icon-button.js +8 -52
- package/components/button/icon-button.js.map +1 -1
- package/components/calendar/calendar.d.ts +1 -2
- package/components/calendar/calendar.d.ts.map +1 -1
- package/components/calendar/calendar.js +5 -10
- package/components/calendar/calendar.js.map +1 -1
- package/components/calendar/calendar.material.css.d.ts.map +1 -1
- package/components/calendar/calendar.material.css.js +1 -1
- package/components/calendar/calendar.material.css.js.map +1 -1
- package/components/calendar/common/calendar-base.d.ts +2 -0
- package/components/calendar/common/calendar-base.d.ts.map +1 -1
- package/components/calendar/common/calendar-base.js +2 -0
- package/components/calendar/common/calendar-base.js.map +1 -1
- package/components/calendar/days-view/days-view.js +1 -1
- package/components/calendar/days-view/days-view.js.map +1 -1
- package/components/calendar/days-view/days-view.material.css.d.ts.map +1 -1
- package/components/calendar/days-view/days-view.material.css.js +1 -1
- package/components/calendar/days-view/days-view.material.css.js.map +1 -1
- package/components/calendar/months-view/months-view.d.ts.map +1 -1
- package/components/calendar/months-view/months-view.js +1 -1
- package/components/calendar/months-view/months-view.js.map +1 -1
- package/components/calendar/years-view/years-view.d.ts.map +1 -1
- package/components/calendar/years-view/years-view.js +1 -1
- package/components/calendar/years-view/years-view.js.map +1 -1
- package/components/card/card.actions.d.ts +3 -2
- package/components/card/card.actions.d.ts.map +1 -1
- package/components/card/card.actions.js +4 -14
- package/components/card/card.actions.js.map +1 -1
- package/components/card/card.content.d.ts +3 -2
- package/components/card/card.content.d.ts.map +1 -1
- package/components/card/card.content.js +4 -14
- package/components/card/card.content.js.map +1 -1
- package/components/card/card.d.ts +1 -0
- package/components/card/card.d.ts.map +1 -1
- package/components/card/card.header.d.ts +3 -2
- package/components/card/card.header.d.ts.map +1 -1
- package/components/card/card.header.js +4 -14
- package/components/card/card.header.js.map +1 -1
- package/components/card/card.js +5 -8
- package/components/card/card.js.map +1 -1
- package/components/card/card.media.d.ts +3 -2
- package/components/card/card.media.d.ts.map +1 -1
- package/components/card/card.media.js +4 -14
- package/components/card/card.media.js.map +1 -1
- package/components/checkbox/checkbox.d.ts +1 -0
- package/components/checkbox/checkbox.d.ts.map +1 -1
- package/components/checkbox/checkbox.js +4 -7
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/switch.d.ts +1 -0
- package/components/checkbox/switch.d.ts.map +1 -1
- package/components/checkbox/switch.js +3 -7
- package/components/checkbox/switch.js.map +1 -1
- package/components/common/definitions/defineAllComponents.d.ts +2 -0
- package/components/common/definitions/defineAllComponents.d.ts.map +1 -0
- package/components/common/definitions/defineAllComponents.js +57 -0
- package/components/common/definitions/defineAllComponents.js.map +1 -0
- package/components/common/definitions/defineComponents.d.ts +2 -0
- package/components/common/definitions/defineComponents.d.ts.map +1 -0
- package/components/common/definitions/defineComponents.js +9 -0
- package/components/common/definitions/defineComponents.js.map +1 -0
- package/components/common/mixins/sizable.d.ts.map +1 -1
- package/components/common/mixins/sizable.js.map +1 -1
- package/components/form/form.d.ts +1 -0
- package/components/form/form.d.ts.map +1 -1
- package/components/form/form.js +10 -8
- package/components/form/form.js.map +1 -1
- package/components/icon/icon.d.ts +1 -0
- package/components/icon/icon.d.ts.map +1 -1
- package/components/icon/icon.js +1 -0
- package/components/icon/icon.js.map +1 -1
- package/components/input/input.d.ts +2 -0
- package/components/input/input.d.ts.map +1 -1
- package/components/input/input.js +6 -8
- package/components/input/input.js.map +1 -1
- package/components/list/list-header.d.ts +2 -0
- package/components/list/list-header.d.ts.map +1 -1
- package/components/list/list-header.js +6 -13
- package/components/list/list-header.js.map +1 -1
- package/components/list/list-item.d.ts +2 -0
- package/components/list/list-item.d.ts.map +1 -1
- package/components/list/list-item.js +6 -13
- package/components/list/list-item.js.map +1 -1
- package/components/list/list.d.ts +2 -0
- package/components/list/list.d.ts.map +1 -1
- package/components/list/list.js +6 -13
- package/components/list/list.js.map +1 -1
- package/components/nav-drawer/nav-drawer-header-item.d.ts +1 -0
- package/components/nav-drawer/nav-drawer-header-item.d.ts.map +1 -1
- package/components/nav-drawer/nav-drawer-header-item.js +3 -13
- package/components/nav-drawer/nav-drawer-header-item.js.map +1 -1
- package/components/nav-drawer/nav-drawer-item.d.ts +1 -3
- package/components/nav-drawer/nav-drawer-item.d.ts.map +1 -1
- package/components/nav-drawer/nav-drawer-item.js +5 -34
- package/components/nav-drawer/nav-drawer-item.js.map +1 -1
- package/components/nav-drawer/nav-drawer.d.ts +1 -0
- package/components/nav-drawer/nav-drawer.d.ts.map +1 -1
- package/components/nav-drawer/nav-drawer.js +4 -7
- package/components/nav-drawer/nav-drawer.js.map +1 -1
- package/components/navbar/navbar.d.ts +1 -0
- package/components/navbar/navbar.d.ts.map +1 -1
- package/components/navbar/navbar.js +3 -13
- package/components/navbar/navbar.js.map +1 -1
- package/components/navbar/navbar.material.css.d.ts.map +1 -1
- package/components/navbar/navbar.material.css.js +1 -1
- package/components/navbar/navbar.material.css.js.map +1 -1
- package/components/radio/radio.d.ts +1 -0
- package/components/radio/radio.d.ts.map +1 -1
- package/components/radio/radio.js +4 -7
- package/components/radio/radio.js.map +1 -1
- package/components/radio-group/radio-group.d.ts +1 -0
- package/components/radio-group/radio-group.d.ts.map +1 -1
- package/components/radio-group/radio-group.js +4 -7
- package/components/radio-group/radio-group.js.map +1 -1
- package/components/ripple/ripple.d.ts +1 -0
- package/components/ripple/ripple.d.ts.map +1 -1
- package/components/ripple/ripple.js +3 -13
- package/components/ripple/ripple.js.map +1 -1
- package/custom-elements.json +87 -167
- package/index.d.ts +12 -5
- package/index.d.ts.map +1 -1
- package/index.js +11 -5
- package/index.js.map +1 -1
- package/package.json +8 -2
- package/themes/bootstrap.css +1 -1
- package/themes/fluent.css +1 -1
- package/themes/indigo.css +1 -1
- package/vscode-html-custom-data.json +75 -134
- package/components/button/link-button.d.ts +0 -14
- package/components/button/link-button.d.ts.map +0 -1
- package/components/button/link-button.js +0 -48
- package/components/button/link-button.js.map +0 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center
|
|
2
|
+
export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}[part=start],[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[name=start]::slotted(*){-webkit-margin-end:1rem;margin-inline-end:1rem}[name=end]::slotted(*){-webkit-margin-start:1rem;margin-inline-start:1rem}::slotted(igc-icon){cursor:pointer;color:var(--igc-primary-500-contrast)}::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);line-height:normal;margin:0}`;
|
|
3
3
|
//# sourceMappingURL=navbar.material.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.material.css.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"navbar.material.css.js","sourceRoot":"","sources":["../../../src/components/navbar/navbar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,y+DAAy+D,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-height:3.5rem;max-height:8rem;padding:0 1rem;background:hsla(var(--igc-primary-500), var(--igc-primary-a));color:var(--igc-primary-500-contrast);-webkit-box-shadow:var(--igc-elevation-4);box-shadow:var(--igc-elevation-4);font-family:var(--igc-font-family)}[part=base]{display:inherit;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;z-index:4}[part=middle]{display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}[part=start],[part=end]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[name=start]::slotted(*){-webkit-margin-end:1rem;margin-inline-end:1rem}[name=end]::slotted(*){-webkit-margin-start:1rem;margin-inline-start:1rem}::slotted(igc-icon){cursor:pointer;color:var(--igc-primary-500-contrast)}::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);line-height:normal;margin:0}`;\n"]}
|
|
@@ -7,6 +7,7 @@ export interface IgcRadioEventMap {
|
|
|
7
7
|
}
|
|
8
8
|
declare const IgcRadioComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRadioEventMap>> & Constructor<LitElement>;
|
|
9
9
|
export default class IgcRadioComponent extends IgcRadioComponent_base {
|
|
10
|
+
static tagName: string;
|
|
10
11
|
static styles: import("lit").CSSResult;
|
|
11
12
|
private inputId;
|
|
12
13
|
private labelId;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAQ9D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC5B;;
|
|
1
|
+
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAQ9D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC5B;;AAeD,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,sBAGlC;IAEX,OAAc,OAAO,SAAe;IAGpC,OAAc,MAAM,0BAAU;IAE9B,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,OAAO,CAAiC;IAGhD,SAAS,CAAC,KAAK,EAAG,gBAAgB,CAAC;IAGnC,OAAO,CAAC,SAAS,CAAK;IAIf,IAAI,EAAG,MAAM,CAAC;IAId,KAAK,EAAG,MAAM,CAAC;IAKf,OAAO,UAAS;IAIhB,QAAQ,UAAS;IAIjB,OAAO,UAAS;IAIhB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;IAI5C,cAAc,EAAG,MAAM,CAAC;IAGxB,KAAK;IAML,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,IAAI;IAKJ,cAAc;IAQd,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAKxC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU;IAK3C,SAAS,CAAC,WAAW;IAIrB,SAAS,CAAC,UAAU;IAIpB,SAAS,CAAC,WAAW;IAKrB,SAAS,CAAC,YAAY;IAYtB,SAAS,CAAC,WAAW;IASrB,SAAS,CAAC,MAAM;CAoCjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
|
|
@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
9
9
|
import { styles } from './radio.material.css';
|
|
10
10
|
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
|
|
11
11
|
import { alternateName, watch, blazorTwoWayBind } from '../common/decorators';
|
|
@@ -13,7 +13,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
13
13
|
import { live } from 'lit/directives/live.js';
|
|
14
14
|
import { partNameMap } from '../common/util.js';
|
|
15
15
|
let nextId = 0;
|
|
16
|
-
|
|
16
|
+
export default class IgcRadioComponent extends EventEmitterMixin(LitElement) {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
19
|
this.inputId = `radio-${nextId++}`;
|
|
@@ -106,7 +106,8 @@ let IgcRadioComponent = class IgcRadioComponent extends EventEmitterMixin(LitEle
|
|
|
106
106
|
</label>
|
|
107
107
|
`;
|
|
108
108
|
}
|
|
109
|
-
}
|
|
109
|
+
}
|
|
110
|
+
IgcRadioComponent.tagName = 'igc-radio';
|
|
110
111
|
IgcRadioComponent.styles = styles;
|
|
111
112
|
__decorate([
|
|
112
113
|
query('input[type="radio"]', true)
|
|
@@ -145,8 +146,4 @@ __decorate([
|
|
|
145
146
|
__decorate([
|
|
146
147
|
watch('checked', { waitUntilFirstUpdate: true })
|
|
147
148
|
], IgcRadioComponent.prototype, "handleChange", null);
|
|
148
|
-
IgcRadioComponent = __decorate([
|
|
149
|
-
customElement('igc-radio')
|
|
150
|
-
], IgcRadioComponent);
|
|
151
|
-
export default IgcRadioComponent;
|
|
152
149
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './radio.material.css';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { alternateName, watch, blazorTwoWayBind } from '../common/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { partNameMap } from '../common/util.js';\n\nlet nextId = 0;\n\nexport interface IgcRadioEventMap {\n igcChange: CustomEvent<boolean>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n}\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcFocus - Emitted when the control gains focus.\n * @fires igcBlur - Emitted when the control loses focus.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends EventEmitterMixin<\n IgcRadioEventMap,\n Constructor<LitElement>\n>(LitElement) {\n /** @private */\n public static tagName = 'igc-radio';\n\n /** @private */\n public static styles = styles;\n\n private inputId = `radio-${nextId++}`;\n private labelId = `radio-label-${this.inputId}`;\n\n @query('input[type=\"radio\"]', true)\n protected input!: HTMLInputElement;\n\n @state()\n private _tabIndex = 0;\n\n /** The name attribute of the control. */\n @property()\n public name!: string;\n\n /** The value attribute of the control. */\n @property()\n public value!: string;\n\n /** The checked state of the control. */\n @property({ type: Boolean })\n @blazorTwoWayBind('igcChange', 'detail')\n public checked = false;\n\n /** Disables the radio control. */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /** Controls the validity of the control. */\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /** The label position of the radio control. */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: 'before' | 'after' = 'after';\n\n /** Sets the aria-labelledby attribute for the radio control. */\n @property({ reflect: true, attribute: 'aria-labelledby' })\n public ariaLabelledby!: string;\n\n /** Simulates a click on the radio control. */\n public click() {\n this.input.click();\n }\n\n /** Sets focus on the radio control. */\n @alternateName('focusComponent')\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the radio control. */\n @alternateName('blurComponent')\n public blur() {\n this.input.blur();\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity() {\n this.input.reportValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n protected handleMouseDown(event: MouseEvent) {\n event.preventDefault();\n this.input.focus();\n }\n\n protected handleClick() {\n this.checked = true;\n }\n\n protected handleBlur() {\n this.emitEvent('igcBlur');\n }\n\n protected handleFocus() {\n this.emitEvent('igcFocus');\n }\n\n @watch('checked', { waitUntilFirstUpdate: true })\n protected handleChange() {\n if (this.checked) {\n this.getSiblings().forEach((radio) => {\n radio.checked = false;\n radio._tabIndex = -1;\n });\n this.input.focus();\n this._tabIndex = 0;\n this.emitEvent('igcChange', { detail: this.checked });\n }\n }\n\n protected getSiblings() {\n const group = this.closest('igc-radio-group');\n if (!group) return [];\n\n return Array.from<IgcRadioComponent>(\n group.querySelectorAll('igc-radio')\n ).filter((radio) => radio.name === this.name && radio !== this);\n }\n\n protected render() {\n return html`\n <label\n part=\"${partNameMap({ base: true, checked: this.checked })}\"\n for=\"${this.inputId}\"\n @mousedown=\"${this.handleMouseDown}\"\n >\n <input\n id=\"${this.inputId}\"\n type=\"radio\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n .disabled=\"${this.disabled}\"\n .checked=\"${live(this.checked)}\"\n tabindex=${this._tabIndex}\n aria-checked=\"${this.checked ? 'true' : 'false'}\"\n aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n aria-labelledby=\"${this.ariaLabelledby\n ? this.ariaLabelledby\n : this.labelId}\"\n @click=\"${this.handleClick}\"\n @blur=\"${this.handleBlur}\"\n @focus=\"${this.handleFocus}\"\n />\n <span\n part=\"${partNameMap({ control: true, checked: this.checked })}\"\n ></span>\n <span\n part=\"${partNameMap({ label: true, checked: this.checked })}\"\n id=\"${this.labelId}\"\n >\n <slot></slot>\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-radio': IgcRadioComponent;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;IAE5D,OAAc,OAAO,SAAqB;IAG1C,OAAc,MAAM,0BAAU;IAG9B,OAAO,CAAC,cAAc,CAAiC;IAEvD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,KAAK,GAGhB;;IAQM,SAAS,EAAE,UAAU,GAAG,YAAY,CAAc;IAEzD,OAAO,CAAC,aAAa,CA8BnB;IAEF,SAAS,CAAC,MAAM;CAGjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF"}
|
|
@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, queryAssignedNodes } from 'lit/decorators.js';
|
|
9
9
|
import { styles } from './radio-group.material.css';
|
|
10
|
-
|
|
10
|
+
export default class IgcRadioGroupComponent extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super();
|
|
13
13
|
this.alignment = 'vertical';
|
|
@@ -51,7 +51,8 @@ let IgcRadioGroupComponent = class IgcRadioGroupComponent extends LitElement {
|
|
|
51
51
|
render() {
|
|
52
52
|
return html `<slot></slot>`;
|
|
53
53
|
}
|
|
54
|
-
}
|
|
54
|
+
}
|
|
55
|
+
IgcRadioGroupComponent.tagName = 'igc-radio-group';
|
|
55
56
|
IgcRadioGroupComponent.styles = styles;
|
|
56
57
|
__decorate([
|
|
57
58
|
queryAssignedNodes(undefined, true, 'igc-radio')
|
|
@@ -59,8 +60,4 @@ __decorate([
|
|
|
59
60
|
__decorate([
|
|
60
61
|
property({ reflect: true })
|
|
61
62
|
], IgcRadioGroupComponent.prototype, "alignment", void 0);
|
|
62
|
-
IgcRadioGroupComponent = __decorate([
|
|
63
|
-
customElement('igc-radio-group')
|
|
64
|
-
], IgcRadioGroupComponent);
|
|
65
|
-
export default IgcRadioGroupComponent;
|
|
66
63
|
//# sourceMappingURL=radio-group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;IAmB5D;QACE,KAAK,EAAE,CAAC;QAKH,cAAS,GAA8B,UAAU,CAAC;QAEjD,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrE,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAC3D,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC;gBAE1C,QAAQ,GAAG,EAAE;oBACX,KAAK,SAAS;wBACZ,KAAK,IAAI,CAAC,CAAC,CAAC;wBACZ,MAAM;oBACR,KAAK,WAAW;wBACd,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC7B,MAAM;oBACR,KAAK,YAAY;wBACf,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC7B,MAAM;oBACR;wBACE,KAAK,IAAI,CAAC,CAAC;iBACd;gBAED,IAAI,KAAK,GAAG,CAAC;oBAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC9C,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;oBAAE,KAAK,GAAG,CAAC,CAAC;gBAE9C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;gBACxD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;gBAElC,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;QACH,CAAC,CAAC;QApCA,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC;IAZD,IAAY,MAAM;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC;IAED,IAAY,KAAK;QACf,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC;IACxD,CAAC;IA0CS,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA3Da,8BAAO,GAAG,iBAAiB,CAAC;AAG5B,6BAAM,GAAG,MAAM,CAAC;AAG9B;IADC,kBAAkB,CAAC,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC;8DACM;AAiBvD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAC6B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedNodes } from 'lit/decorators.js';\nimport { default as IgcRadioComponent } from '../radio/radio';\nimport { styles } from './radio-group.material.css';\n\nexport default class IgcRadioGroupComponent extends LitElement {\n /** @private */\n public static tagName = 'igc-radio-group';\n\n /** @private */\n public static styles = styles;\n\n @queryAssignedNodes(undefined, true, 'igc-radio')\n private _slottedRadios!: NodeListOf<IgcRadioComponent>;\n\n private get radios() {\n return Array.from(this._slottedRadios).filter((radio) => !radio.disabled);\n }\n\n private get isLTR(): boolean {\n const styles = window.getComputedStyle(this);\n return styles.getPropertyValue('direction') === 'ltr';\n }\n\n constructor() {\n super();\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n @property({ reflect: true })\n public alignment: 'vertical' | 'horizontal' = 'vertical';\n\n private handleKeydown = (event: KeyboardEvent) => {\n const { key } = event;\n\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n const checked = this.radios.find((radio) => radio.checked);\n let index = this.radios.indexOf(checked!);\n\n switch (key) {\n case 'ArrowUp':\n index += -1;\n break;\n case 'ArrowLeft':\n index += this.isLTR ? -1 : 1;\n break;\n case 'ArrowRight':\n index += this.isLTR ? 1 : -1;\n break;\n default:\n index += 1;\n }\n\n if (index < 0) index = this.radios.length - 1;\n if (index > this.radios.length - 1) index = 0;\n\n this.radios.forEach((radio) => (radio.checked = false));\n this.radios[index].focus();\n this.radios[index].checked = true;\n\n event.preventDefault();\n }\n };\n\n protected render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-radio-group': IgcRadioGroupComponent;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IAExD,OAAc,OAAO,SAAgB;IAGrC,OAAc,MAAM,0BAAU;;IAO9B,OAAO,CAAC,OAAO,CAiCb;IAEF,OAAO,CAAC,aAAa;IAQrB,SAAS,CAAC,MAAM;CAGjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
1
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import { customElement } from 'lit/decorators.js';
|
|
9
2
|
import { styles } from './ripple.material.css';
|
|
10
|
-
|
|
3
|
+
export default class IgcRippleComponent extends LitElement {
|
|
11
4
|
constructor() {
|
|
12
5
|
super();
|
|
13
6
|
this.handler = ({ clientX, clientY }) => {
|
|
@@ -55,10 +48,7 @@ let IgcRippleComponent = class IgcRippleComponent extends LitElement {
|
|
|
55
48
|
render() {
|
|
56
49
|
return html `<div></div>`;
|
|
57
50
|
}
|
|
58
|
-
}
|
|
51
|
+
}
|
|
52
|
+
IgcRippleComponent.tagName = 'igc-ripple';
|
|
59
53
|
IgcRippleComponent.styles = styles;
|
|
60
|
-
IgcRippleComponent = __decorate([
|
|
61
|
-
customElement('igc-ripple')
|
|
62
|
-
], IgcRippleComponent);
|
|
63
|
-
export default IgcRippleComponent;
|
|
64
54
|
//# sourceMappingURL=ripple.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAQ/C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;IAOxD;QACE,KAAK,EAAE,CAAC;QAIF,YAAO,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAc,EAAE,EAAE;;YACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAEnE,MAAM,MAAM,GAAiC;gBAC3C,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,OAAO;gBAChB,aAAa,EAAE,MAAM;gBACrB,eAAe,EAAE,QAAQ;gBACzB,SAAS,EAAE,+BAA+B;gBAC1C,UAAU,EAAE,oBAAoB;gBAChC,MAAM,EAAE,cAAc;gBACtB,MAAM,EAAE,iBAAiB;gBACzB,KAAK,EAAE,GAAG,MAAM,IAAI;gBACpB,MAAM,EAAE,GAAG,MAAM,IAAI;gBACrB,YAAY,EAAE,KAAK;gBACnB,GAAG,EAAE,GAAG,GAAG,IAAI;gBACf,IAAI,EAAE,GAAG,IAAI,IAAI;gBACjB,UAAU,EAAE,wCAAwC;aACrD,CAAC;YACF,MAAM,MAAM,GAAe;gBACzB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE;gBACxC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;aACtC,CAAC;YACF,MAAM,IAAI,GAA6B;gBACrC,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,QAAQ;aACjB,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACrC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;QApCA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACnD,CAAC;IAqCO,aAAa,CAAC,CAAS,EAAE,CAAS;QACxC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAClE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IAC5C,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;;AAvDa,0BAAO,GAAG,YAAY,CAAC;AAGvB,yBAAM,GAAG,MAAM,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './ripple.material.css';\n\n/**\n * A ripple can be applied to an element to represent\n * interactive surface.\n *\n * @element igc-ripple\n */\nexport default class IgcRippleComponent extends LitElement {\n /** @private */\n public static tagName = 'igc-ripple';\n\n /** @private */\n public static styles = styles;\n\n constructor() {\n super();\n this.addEventListener('mousedown', this.handler);\n }\n\n private handler = ({ clientX, clientY }: MouseEvent) => {\n const element = document.createElement('span');\n const { radius, top, left } = this.getDimensions(clientX, clientY);\n\n const styles: Partial<CSSStyleDeclaration> = {\n position: 'absolute',\n display: 'block',\n pointerEvents: 'none',\n transformOrigin: 'center',\n transform: `translate3d(0, 0, 0) scale(0)`,\n willChange: 'opacity, transform',\n margin: `0 !important`,\n border: 'none !important',\n width: `${radius}px`,\n height: `${radius}px`,\n borderRadius: '50%',\n top: `${top}px`,\n left: `${left}px`,\n background: 'var(--color, hsl(var(--igc-gray-800)))',\n };\n const frames: Keyframe[] = [\n { opacity: 0.5, transform: 'scale(.3)' },\n { opacity: 0, transform: 'scale(2)' },\n ];\n const opts: KeyframeAnimationOptions = {\n duration: 600, // --igc-ripple-duration,\n fill: 'forwards',\n easing: 'linear', // --igc-ripple-easing\n };\n\n Object.assign(element.style, styles);\n this.shadowRoot?.appendChild(element);\n element.animate(frames, opts).finished.then(() => element.remove());\n };\n\n private getDimensions(x: number, y: number) {\n const { width, height, left, top } = this.getBoundingClientRect();\n const radius = Math.max(width, height);\n const _left = Math.round(x - left - radius / 2);\n const _top = Math.round(y - top - radius / 2);\n return { radius, top: _top, left: _left };\n }\n\n protected render() {\n return html`<div></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-ripple': IgcRippleComponent;\n }\n}\n"]}
|