@digital-realty/ix-chip 1.0.24 → 1.0.26-alpha.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/dist/IxChip.d.ts CHANGED
@@ -1,28 +1,28 @@
1
- import { LitElement } from 'lit';
2
- import '@material/web/chips/assist-chip.js';
3
- import '@material/web/chips/filter-chip.js';
4
- import '@material/web/chips/input-chip.js';
5
- import '@material/web/chips/suggestion-chip.js';
6
- export declare class IxChip extends LitElement {
7
- appearance: 'assist' | 'filter' | 'input' | 'suggestion';
8
- /**
9
- * Whether or not the chip is disabled.
10
- *
11
- * Disabled chips are not focusable, unless `always-focusable` is set.
12
- */
13
- disabled: boolean;
14
- /**
15
- * When true, allow disabled chips to be focused with arrow keys.
16
- *
17
- * Add this when a chip needs increased visibility when disabled. See
18
- * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
19
- * for more guidance on when this is needed.
20
- */
21
- alwaysFocusable: boolean;
22
- /**
23
- * The label of the chip.
24
- */
25
- label: string;
26
- remove: () => void;
27
- render(): import("lit").TemplateResult<1>;
28
- }
1
+ import { LitElement } from 'lit';
2
+ import '@material/web/chips/assist-chip.js';
3
+ import '@material/web/chips/filter-chip.js';
4
+ import '@material/web/chips/input-chip.js';
5
+ import '@material/web/chips/suggestion-chip.js';
6
+ export declare class IxChip extends LitElement {
7
+ appearance: 'assist' | 'filter' | 'input' | 'suggestion';
8
+ /**
9
+ * Whether or not the chip is disabled.
10
+ *
11
+ * Disabled chips are not focusable, unless `always-focusable` is set.
12
+ */
13
+ disabled: boolean;
14
+ /**
15
+ * When true, allow disabled chips to be focused with arrow keys.
16
+ *
17
+ * Add this when a chip needs increased visibility when disabled. See
18
+ * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
19
+ * for more guidance on when this is needed.
20
+ */
21
+ alwaysFocusable: boolean;
22
+ /**
23
+ * The label of the chip.
24
+ */
25
+ label: string;
26
+ remove: () => void;
27
+ render(): import("lit").TemplateResult<1>;
28
+ }
package/dist/IxChip.js CHANGED
@@ -1,57 +1,57 @@
1
- import { __decorate } from "tslib";
2
- import { html, LitElement } from 'lit';
3
- import { property } from 'lit/decorators.js';
4
- import '@material/web/chips/assist-chip.js';
5
- import '@material/web/chips/filter-chip.js';
6
- import '@material/web/chips/input-chip.js';
7
- import '@material/web/chips/suggestion-chip.js';
8
- export class IxChip extends LitElement {
9
- constructor() {
10
- super(...arguments);
11
- this.appearance = 'assist';
12
- /**
13
- * Whether or not the chip is disabled.
14
- *
15
- * Disabled chips are not focusable, unless `always-focusable` is set.
16
- */
17
- this.disabled = false;
18
- /**
19
- * When true, allow disabled chips to be focused with arrow keys.
20
- *
21
- * Add this when a chip needs increased visibility when disabled. See
22
- * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
23
- * for more guidance on when this is needed.
24
- */
25
- this.alwaysFocusable = false;
26
- /**
27
- * The label of the chip.
28
- */
29
- this.label = '';
30
- this.remove = () => {
31
- this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
32
- };
33
- }
34
- render() {
35
- let comp;
36
- if (this.appearance === 'assist') {
1
+ import { __decorate } from "tslib";
2
+ import { html, LitElement } from 'lit';
3
+ import { property } from 'lit/decorators.js';
4
+ import '@material/web/chips/assist-chip.js';
5
+ import '@material/web/chips/filter-chip.js';
6
+ import '@material/web/chips/input-chip.js';
7
+ import '@material/web/chips/suggestion-chip.js';
8
+ export class IxChip extends LitElement {
9
+ constructor() {
10
+ super(...arguments);
11
+ this.appearance = 'assist';
12
+ /**
13
+ * Whether or not the chip is disabled.
14
+ *
15
+ * Disabled chips are not focusable, unless `always-focusable` is set.
16
+ */
17
+ this.disabled = false;
18
+ /**
19
+ * When true, allow disabled chips to be focused with arrow keys.
20
+ *
21
+ * Add this when a chip needs increased visibility when disabled. See
22
+ * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
23
+ * for more guidance on when this is needed.
24
+ */
25
+ this.alwaysFocusable = false;
26
+ /**
27
+ * The label of the chip.
28
+ */
29
+ this.label = '';
30
+ this.remove = () => {
31
+ this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
32
+ };
33
+ }
34
+ render() {
35
+ let comp;
36
+ if (this.appearance === 'assist') {
37
37
  comp = html `<md-assist-chip
38
38
  class="chip"
39
39
  ?disabled=${this.disabled}
40
40
  ?always-focusable=${this.alwaysFocusable}
41
41
  .label=${this.label}
42
42
  >${this.label}</md-assist-chip
43
- >`;
44
- }
45
- else if (this.appearance === 'filter') {
43
+ >`;
44
+ }
45
+ else if (this.appearance === 'filter') {
46
46
  comp = html `<md-filter-chip
47
47
  class="chip"
48
48
  ?disabled=${this.disabled}
49
49
  ?always-focusable=${this.alwaysFocusable}
50
50
  .label=${this.label}
51
51
  >${this.label}</md-filter-chip
52
- >`;
53
- }
54
- else if (this.appearance === 'input') {
52
+ >`;
53
+ }
54
+ else if (this.appearance === 'input') {
55
55
  comp = html `<md-input-chip
56
56
  class="chip"
57
57
  ?disabled=${this.disabled}
@@ -59,30 +59,30 @@ export class IxChip extends LitElement {
59
59
  .label=${this.label}
60
60
  @remove=${this.remove}
61
61
  >${this.label}</md-input-chip
62
- >`;
63
- }
64
- else if (this.appearance === 'suggestion') {
62
+ >`;
63
+ }
64
+ else if (this.appearance === 'suggestion') {
65
65
  comp = html `<md-suggestion-chip
66
66
  class="chip"
67
67
  ?disabled=${this.disabled}
68
68
  ?always-focusable=${this.alwaysFocusable}
69
69
  .label=${this.label}
70
70
  >${this.label}</md-suggestion-chip
71
- >`;
72
- }
73
- return html `${comp}`;
74
- }
75
- }
76
- __decorate([
77
- property({ type: String })
78
- ], IxChip.prototype, "appearance", void 0);
79
- __decorate([
80
- property({ type: Boolean })
81
- ], IxChip.prototype, "disabled", void 0);
82
- __decorate([
83
- property({ type: Boolean, attribute: 'always-focusable' })
84
- ], IxChip.prototype, "alwaysFocusable", void 0);
85
- __decorate([
86
- property()
87
- ], IxChip.prototype, "label", void 0);
71
+ >`;
72
+ }
73
+ return html `${comp}`;
74
+ }
75
+ }
76
+ __decorate([
77
+ property({ type: String })
78
+ ], IxChip.prototype, "appearance", void 0);
79
+ __decorate([
80
+ property({ type: Boolean })
81
+ ], IxChip.prototype, "disabled", void 0);
82
+ __decorate([
83
+ property({ type: Boolean, attribute: 'always-focusable' })
84
+ ], IxChip.prototype, "alwaysFocusable", void 0);
85
+ __decorate([
86
+ property()
87
+ ], IxChip.prototype, "label", void 0);
88
88
  //# sourceMappingURL=IxChip.js.map
@@ -1,5 +1,5 @@
1
- import { LitElement } from 'lit';
2
- import '@material/web/chips/chip-set';
3
- export declare class IxChipSet extends LitElement {
4
- render(): import("lit").TemplateResult<1>;
5
- }
1
+ import { LitElement } from 'lit';
2
+ import '@material/web/chips/chip-set';
3
+ export declare class IxChipSet extends LitElement {
4
+ render(): import("lit").TemplateResult<1>;
5
+ }
package/dist/IxChipSet.js CHANGED
@@ -1,8 +1,8 @@
1
- import { LitElement, html } from 'lit';
2
- import '@material/web/chips/chip-set';
3
- export class IxChipSet extends LitElement {
4
- render() {
5
- return html `<md-chip-set><slot></slot></md-chip-set>`;
6
- }
7
- }
1
+ import { LitElement, html } from 'lit';
2
+ import '@material/web/chips/chip-set';
3
+ export class IxChipSet extends LitElement {
4
+ render() {
5
+ return html `<md-chip-set><slot></slot></md-chip-set>`;
6
+ }
7
+ }
8
8
  //# sourceMappingURL=IxChipSet.js.map
@@ -1,15 +1,15 @@
1
- import { LitElement } from 'lit';
2
- import '@digital-realty/ix-icon/ix-icon.js';
3
- interface AppearanceConfig {
4
- [key: string]: {
5
- icon: string;
6
- text: string;
7
- };
8
- }
9
- declare const appearanceConfig: AppearanceConfig;
10
- export declare class IxCustomChip extends LitElement {
11
- appearance: keyof typeof appearanceConfig;
12
- noIcon: boolean;
13
- render(): import("lit").TemplateResult<1>;
14
- }
15
- export {};
1
+ import { LitElement } from 'lit';
2
+ import '@digital-realty/ix-icon/ix-icon.js';
3
+ interface AppearanceConfig {
4
+ [key: string]: {
5
+ icon: string;
6
+ text: string;
7
+ };
8
+ }
9
+ declare const appearanceConfig: AppearanceConfig;
10
+ export declare class IxCustomChip extends LitElement {
11
+ appearance: keyof typeof appearanceConfig;
12
+ noIcon: boolean;
13
+ render(): import("lit").TemplateResult<1>;
14
+ }
15
+ export {};
@@ -1,52 +1,52 @@
1
- import { __decorate } from "tslib";
2
- import { html, LitElement, nothing } from 'lit';
3
- import { property } from 'lit/decorators.js';
4
- import '@digital-realty/ix-icon/ix-icon.js';
5
- const appearanceConfig = {
6
- default: { icon: '', text: '' },
7
- completed: { icon: 'check_circle', text: 'COMPLETED' },
8
- cancelled: { icon: 'delete_forever', text: 'CANCELLED' },
9
- cancellationRequested: {
10
- icon: 'auto_delete',
11
- text: 'CANCELLATION REQUESTED',
12
- },
13
- inProgress: { icon: 'clock_loader_60', text: 'IN PROGRESS' },
14
- new: { icon: '', text: 'NEW' },
15
- pending: { icon: 'assignment_late', text: 'PENDING APPROVAL' },
16
- pending_pickup: { icon: 'assignment_late', text: 'PENDING PICK-UP' },
17
- rejected: { icon: 'warning', text: 'REJECTED' },
18
- };
19
- export class IxCustomChip extends LitElement {
20
- constructor() {
21
- super(...arguments);
22
- this.appearance = 'default';
23
- this.noIcon = false;
24
- }
25
- render() {
26
- const { icon, text } = appearanceConfig[this.appearance];
1
+ import { __decorate } from "tslib";
2
+ import { html, LitElement, nothing } from 'lit';
3
+ import { property } from 'lit/decorators.js';
4
+ import '@digital-realty/ix-icon/ix-icon.js';
5
+ const appearanceConfig = {
6
+ default: { icon: '', text: '' },
7
+ completed: { icon: 'check_circle', text: 'COMPLETED' },
8
+ cancelled: { icon: 'delete_forever', text: 'CANCELLED' },
9
+ cancellationRequested: {
10
+ icon: 'auto_delete',
11
+ text: 'CANCELLATION REQUESTED',
12
+ },
13
+ inProgress: { icon: 'clock_loader_60', text: 'IN PROGRESS' },
14
+ new: { icon: '', text: 'NEW' },
15
+ pending: { icon: 'assignment_late', text: 'PENDING APPROVAL' },
16
+ pending_pickup: { icon: 'assignment_late', text: 'PENDING PICK-UP' },
17
+ rejected: { icon: 'warning', text: 'REJECTED' },
18
+ };
19
+ export class IxCustomChip extends LitElement {
20
+ constructor() {
21
+ super(...arguments);
22
+ this.appearance = 'default';
23
+ this.noIcon = false;
24
+ }
25
+ render() {
26
+ const { icon, text } = appearanceConfig[this.appearance];
27
27
  return html `
28
28
  <div
29
29
  class="wrapper ${this.noIcon ? 'no-icon' : ''}"
30
30
  appearance=${this.appearance}
31
31
  >
32
- ${!this.noIcon
32
+ ${!this.noIcon
33
33
  ? html `
34
- ${icon !== ''
35
- ? html `<ix-icon filled class="icon">${icon}</ix-icon>`
34
+ ${icon !== ''
35
+ ? html `<ix-icon filled class="icon">${icon}</ix-icon>`
36
36
  : html `<slot name="icon" class="icon"></slot>`}
37
- `
37
+ `
38
38
  : nothing}
39
39
  ${text ? html `${text}` : nothing}
40
40
 
41
41
  <slot class="text-container"></slot>
42
42
  </div>
43
- `;
44
- }
45
- }
46
- __decorate([
47
- property({ type: String })
48
- ], IxCustomChip.prototype, "appearance", void 0);
49
- __decorate([
50
- property({ type: Boolean })
51
- ], IxCustomChip.prototype, "noIcon", void 0);
43
+ `;
44
+ }
45
+ }
46
+ __decorate([
47
+ property({ type: String })
48
+ ], IxCustomChip.prototype, "appearance", void 0);
49
+ __decorate([
50
+ property({ type: Boolean })
51
+ ], IxCustomChip.prototype, "noIcon", void 0);
52
52
  //# sourceMappingURL=IxCustomChip.js.map
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { IxChip } from './IxChip.js';
2
- export { IxChipSet } from './IxChipSet.js';
1
+ export { IxChip } from './IxChip.js';
2
+ export { IxChipSet } from './IxChipSet.js';
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { IxChip } from './IxChip.js';
2
- export { IxChipSet } from './IxChipSet.js';
1
+ export { IxChip } from './IxChip.js';
2
+ export { IxChipSet } from './IxChipSet.js';
3
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- export {};
1
+ export {};
@@ -1,3 +1,3 @@
1
- import { IxChipSet } from './IxChipSet.js';
2
- window.customElements.define('ix-chip-set', IxChipSet);
1
+ import { IxChipSet } from './IxChipSet.js';
2
+ window.customElements.define('ix-chip-set', IxChipSet);
3
3
  //# sourceMappingURL=ix-chip-set.js.map
package/dist/ix-chip.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { IxChip } from './IxChip.js';
2
- export declare class IxChipStyled extends IxChip {
3
- static styles: import("lit").CSSResult;
4
- }
1
+ import { IxChip } from './IxChip.js';
2
+ export declare class IxChipStyled extends IxChip {
3
+ static styles: import("lit").CSSResult;
4
+ }
package/dist/ix-chip.js CHANGED
@@ -1,11 +1,11 @@
1
- import { css } from 'lit';
2
- import { IxChip } from './IxChip.js';
3
- export class IxChipStyled extends IxChip {
4
- }
1
+ import { css } from 'lit';
2
+ import { IxChip } from './IxChip.js';
3
+ export class IxChipStyled extends IxChip {
4
+ }
5
5
  IxChipStyled.styles = css `
6
6
  .chip {
7
7
  background: var(--ix-chip-container-color, transparent);
8
8
  }
9
- `;
10
- window.customElements.define('ix-chip', IxChipStyled);
9
+ `;
10
+ window.customElements.define('ix-chip', IxChipStyled);
11
11
  //# sourceMappingURL=ix-chip.js.map
@@ -1,4 +1,4 @@
1
- import { IxCustomChip } from './IxCustomChip.js';
2
- export declare class IxCustomChipStyled extends IxCustomChip {
3
- static styles: import("lit").CSSResult;
4
- }
1
+ import { IxCustomChip } from './IxCustomChip.js';
2
+ export declare class IxCustomChipStyled extends IxCustomChip {
3
+ static styles: import("lit").CSSResult;
4
+ }
@@ -1,7 +1,7 @@
1
- import { css } from 'lit';
2
- import { IxCustomChip } from './IxCustomChip.js';
3
- export class IxCustomChipStyled extends IxCustomChip {
4
- }
1
+ import { css } from 'lit';
2
+ import { IxCustomChip } from './IxCustomChip.js';
3
+ export class IxCustomChipStyled extends IxCustomChip {
4
+ }
5
5
  IxCustomChipStyled.styles = css `
6
6
  :host {
7
7
  --ix-font-color: #092241;
@@ -67,6 +67,6 @@ IxCustomChipStyled.styles = css `
67
67
  .text-container {
68
68
  margin-right: var(--ix-custom-chip-margin-right, 1rem);
69
69
  }
70
- `;
71
- window.customElements.define('ix-custom-chip', IxCustomChipStyled);
70
+ `;
71
+ window.customElements.define('ix-custom-chip', IxCustomChipStyled);
72
72
  //# sourceMappingURL=ix-custom-chip.js.map
@@ -1,4 +1,4 @@
1
- import { IxChip as LitComp } from '../IxChip.js';
2
- export declare const IxChip: import("@lit/react").ReactWebComponent<LitComp, {
3
- onclick: string;
4
- }>;
1
+ import { IxChip as LitComp } from '../IxChip.js';
2
+ export declare const IxChip: import("@lit/react").ReactWebComponent<LitComp, {
3
+ onclick: string;
4
+ }>;
@@ -1,13 +1,13 @@
1
- import React from 'react';
2
- import { createComponent } from '@lit/react';
3
- import { IxChip as LitComp } from '../IxChip.js';
4
- customElements.define('ix-chip', LitComp);
5
- export const IxChip = createComponent({
6
- tagName: 'ix-chip',
7
- elementClass: LitComp,
8
- react: React,
9
- events: {
10
- onclick: 'onClick',
11
- },
12
- });
1
+ import React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import { IxChip as LitComp } from '../IxChip.js';
4
+ customElements.define('ix-chip', LitComp);
5
+ export const IxChip = createComponent({
6
+ tagName: 'ix-chip',
7
+ elementClass: LitComp,
8
+ react: React,
9
+ events: {
10
+ onclick: 'onClick',
11
+ },
12
+ });
13
13
  //# sourceMappingURL=IxChip.js.map
@@ -1,2 +1,2 @@
1
- import { IxChipSet as LitComp } from '../IxChipSet.js';
2
- export declare const IxChipSet: import("@lit/react").ReactWebComponent<LitComp, {}>;
1
+ import { IxChipSet as LitComp } from '../IxChipSet.js';
2
+ export declare const IxChipSet: import("@lit/react").ReactWebComponent<LitComp, {}>;
@@ -1,10 +1,10 @@
1
- import React from 'react';
2
- import { createComponent } from '@lit/react';
3
- import { IxChipSet as LitComp } from '../IxChipSet.js';
4
- customElements.define('ix-chip-set', LitComp);
5
- export const IxChipSet = createComponent({
6
- tagName: 'ix-chip-set',
7
- elementClass: LitComp,
8
- react: React,
9
- });
1
+ import React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import { IxChipSet as LitComp } from '../IxChipSet.js';
4
+ customElements.define('ix-chip-set', LitComp);
5
+ export const IxChipSet = createComponent({
6
+ tagName: 'ix-chip-set',
7
+ elementClass: LitComp,
8
+ react: React,
9
+ });
10
10
  //# sourceMappingURL=IxChipSet.js.map
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-chip following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.0.24",
6
+ "version": "1.0.26-alpha.0",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -31,7 +31,7 @@
31
31
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
32
32
  },
33
33
  "dependencies": {
34
- "@digital-realty/ix-icon": "^1.0.36",
34
+ "@digital-realty/ix-icon": "^1.0.38-alpha.0",
35
35
  "@lit/react": "^1.0.2",
36
36
  "@material/web": "1.2.0",
37
37
  "lit": "^2.0.2",
@@ -104,5 +104,5 @@
104
104
  "README.md",
105
105
  "LICENSE"
106
106
  ],
107
- "gitHead": "d87b40633ddd0407db9838ad45f323f099d91dd1"
107
+ "gitHead": "020de6dab25bbe6058e9a71b2c56681822403481"
108
108
  }