@digital-realty/ix-chip 1.2.1 → 1.3.1-alpha.1

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
@@ -25,6 +25,10 @@ export declare class IxChip extends LitElement {
25
25
  * The label of the chip.
26
26
  */
27
27
  label: string;
28
+ /**
29
+ * The cursor style of the chip button element.
30
+ */
31
+ cursor: string;
28
32
  chip: any;
29
33
  remove: () => void;
30
34
  protected firstUpdated(changedProperties: PropertyValues): void;
package/dist/IxChip.js CHANGED
@@ -29,6 +29,10 @@ export class IxChip extends LitElement {
29
29
  * The label of the chip.
30
30
  */
31
31
  this.label = '';
32
+ /**
33
+ * The cursor style of the chip button element.
34
+ */
35
+ this.cursor = '';
32
36
  this.remove = () => {
33
37
  this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
34
38
  };
@@ -54,6 +58,15 @@ export class IxChip extends LitElement {
54
58
  this.truncateLabel();
55
59
  window.addEventListener('resize', this.truncateLabel);
56
60
  }
61
+ if (this.cursor) {
62
+ this.chip.updateComplete.then(() => {
63
+ var _a;
64
+ const button = (_a = this.chip.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button.primary');
65
+ if (button) {
66
+ button.style.cursor = this.cursor;
67
+ }
68
+ });
69
+ }
57
70
  }
58
71
  disconnectedCallback() {
59
72
  super.disconnectedCallback();
@@ -140,6 +153,9 @@ __decorate([
140
153
  __decorate([
141
154
  property()
142
155
  ], IxChip.prototype, "label", void 0);
156
+ __decorate([
157
+ property({ type: String })
158
+ ], IxChip.prototype, "cursor", void 0);
143
159
  __decorate([
144
160
  query('.chip')
145
161
  ], IxChip.prototype, "chip", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"IxChip.js","sourceRoot":"","sources":["../src/IxChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAC8B,eAAU,GAKnB,QAAQ,CAAC;QAE5B;;;;WAIG;QAC0B,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAE9C;;;;;;WAMG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAExB;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAIvB,WAAM,GAAG,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC;QAkBF,kBAAa,GAAG,KAAK,IAAI,EAAE;;YACzB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,MAAM,MAAM,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACtE,IAAI,MAAM,EAAE;gBACV,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAgB,CAAC;gBACnD,MAAM,cAAc,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CAAC;gBACvE,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,cACrB,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,GAC1C,KAAK,CAAC;gBACN,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG;;;qCAGS,CAAC;aACjC;QACH,CAAC,CAAC;IA8DJ,CAAC;IA7FW,YAAY,CAAC,iBAAiC;QACtD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SACvD;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAC1D;IACH,CAAC;IAmBD,MAAM;QACJ,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YACzC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YACvC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,EAAE;YACtC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;kBACT,IAAI,CAAC,MAAM;WAClB,IAAI,CAAC,KAAK;;;;;;;;;;;;;;uBAcE,CAAC;SACnB;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,YAAY,EAAE;YAC3C,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;QAED,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AAlI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAKC;AAOC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAU9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACnC;AAKZ;IAAX,QAAQ,EAAE;qCAAY;AAEP;IAAf,KAAK,CAAC,OAAO,CAAC;oCAAY","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/chips/assist-chip.js';\nimport '@material/web/chips/filter-chip.js';\nimport '@material/web/chips/input-chip.js';\nimport '@material/web/chips/suggestion-chip.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxChip extends LitElement {\n @property({ type: String }) appearance:\n | 'assist'\n | 'filter'\n | 'input'\n | 'outlined'\n | 'suggestion' = 'assist';\n\n /**\n * Whether or not the chip is disabled.\n *\n * Disabled chips are not focusable, unless `always-focusable` is set.\n */\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Boolean }) truncate = false;\n\n /**\n * When true, allow disabled chips to be focused with arrow keys.\n *\n * Add this when a chip needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({ type: Boolean, attribute: 'always-focusable' })\n alwaysFocusable = false;\n\n /**\n * The label of the chip.\n */\n @property() label = '';\n\n @query('.chip') chip!: any;\n\n remove = () => {\n this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));\n };\n\n protected firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n if (this.truncate) {\n this.truncateLabel();\n window.addEventListener('resize', this.truncateLabel);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.truncate) {\n window.removeEventListener('resize', this.truncateLabel);\n }\n }\n\n truncateLabel = async () => {\n await this.updateComplete;\n const button = this.chip?.shadowRoot?.querySelector('button.primary');\n if (button) {\n const container = this.getRootNode() as ShadowRoot;\n const containerWidth = container?.host?.getBoundingClientRect()?.width;\n button.style.cssText = `max-width: ${\n containerWidth ? containerWidth - 165 : 190\n }px;`;\n const label = button.querySelector('.label');\n label.style.cssText = `\n overflow: hidden;\n display: block;\n align-content: center;`;\n }\n };\n\n render() {\n let comp;\n if (this.appearance === 'assist') {\n comp = html`<md-assist-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-assist-chip\n >`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-assist-chip\n class=\"chip outlined\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-assist-chip\n >`;\n } else if (this.appearance === 'filter') {\n comp = html`<md-filter-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-filter-chip\n >`;\n } else if (this.appearance === 'input') {\n comp = html`<md-input-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n @remove=${this.remove}\n >${this.label}\n <ix-icon slot=\"remove-trailing-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n />\n </svg>\n </ix-icon>\n </md-input-chip>`;\n } else if (this.appearance === 'suggestion') {\n comp = html`<md-suggestion-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-suggestion-chip\n >`;\n }\n\n return html`${comp}`;\n }\n}\n"]}
1
+ {"version":3,"file":"IxChip.js","sourceRoot":"","sources":["../src/IxChip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/chips/assist-chip.js';\nimport '@material/web/chips/filter-chip.js';\nimport '@material/web/chips/input-chip.js';\nimport '@material/web/chips/suggestion-chip.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxChip extends LitElement {\n @property({ type: String }) appearance:\n | 'assist'\n | 'filter'\n | 'input'\n | 'outlined'\n | 'suggestion' = 'assist';\n\n /**\n * Whether or not the chip is disabled.\n *\n * Disabled chips are not focusable, unless `always-focusable` is set.\n */\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Boolean }) truncate = false;\n\n /**\n * When true, allow disabled chips to be focused with arrow keys.\n *\n * Add this when a chip needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({ type: Boolean, attribute: 'always-focusable' })\n alwaysFocusable = false;\n\n /**\n * The label of the chip.\n */\n @property() label = '';\n\n /**\n * The cursor style of the chip button element.\n */\n @property({ type: String }) cursor = '';\n\n @query('.chip') chip!: any;\n\n remove = () => {\n this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));\n };\n\n protected firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n if (this.truncate) {\n this.truncateLabel();\n window.addEventListener('resize', this.truncateLabel);\n }\n\n if (this.cursor) {\n this.chip.updateComplete.then(() => {\n const button = this.chip.shadowRoot?.querySelector('button.primary');\n if (button) {\n button.style.cursor = this.cursor;\n }\n });\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.truncate) {\n window.removeEventListener('resize', this.truncateLabel);\n }\n }\n\n truncateLabel = async () => {\n await this.updateComplete;\n const button = this.chip?.shadowRoot?.querySelector('button.primary');\n if (button) {\n const container = this.getRootNode() as ShadowRoot;\n const containerWidth = container?.host?.getBoundingClientRect()?.width;\n button.style.cssText = `max-width: ${\n containerWidth ? containerWidth - 165 : 190\n }px;`;\n const label = button.querySelector('.label');\n label.style.cssText = `\n overflow: hidden;\n display: block;\n align-content: center;`;\n }\n };\n\n render() {\n let comp;\n if (this.appearance === 'assist') {\n comp = html`<md-assist-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-assist-chip\n >`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-assist-chip\n class=\"chip outlined\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-assist-chip\n >`;\n } else if (this.appearance === 'filter') {\n comp = html`<md-filter-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-filter-chip\n >`;\n } else if (this.appearance === 'input') {\n comp = html`<md-input-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n @remove=${this.remove}\n >${this.label}\n <ix-icon slot=\"remove-trailing-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n />\n </svg>\n </ix-icon>\n </md-input-chip>`;\n } else if (this.appearance === 'suggestion') {\n comp = html`<md-suggestion-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-suggestion-chip\n >`;\n }\n\n return html`${comp}`;\n }\n}\n"]}
@@ -1,7 +1,7 @@
1
- import{LitElement,html,css}from"lit";import{__decorate}from"tslib";import{property,query}from"lit/decorators.js";import"@material/web/chips/assist-chip.js";import"@material/web/chips/filter-chip.js";import"@material/web/chips/input-chip.js";import"@material/web/chips/suggestion-chip.js";import"@digital-realty/ix-icon/ix-icon.js";class IxChip extends LitElement{constructor(){super(...arguments),this.appearance="assist",this.disabled=!1,this.truncate=!1,this.alwaysFocusable=!1,this.label="",this.remove=()=>{this.dispatchEvent(new CustomEvent("remove",{bubbles:!0}))},this.truncateLabel=async()=>{await this.updateComplete;var i,e=null==(e=null==(e=this.chip)?void 0:e.shadowRoot)?void 0:e.querySelector("button.primary");e&&(i=null==(i=null==(i=null==(i=this.getRootNode())?void 0:i.host)?void 0:i.getBoundingClientRect())?void 0:i.width,e.style.cssText=`max-width: ${i?i-165:190}px;`,e.querySelector(".label").style.cssText=`
1
+ import{LitElement,html,css}from"lit";import{__decorate}from"tslib";import{property,query}from"lit/decorators.js";import"@material/web/chips/assist-chip.js";import"@material/web/chips/filter-chip.js";import"@material/web/chips/input-chip.js";import"@material/web/chips/suggestion-chip.js";import"@digital-realty/ix-icon/ix-icon.js";class IxChip extends LitElement{constructor(){super(...arguments),this.appearance="assist",this.disabled=!1,this.truncate=!1,this.alwaysFocusable=!1,this.label="",this.cursor="",this.remove=()=>{this.dispatchEvent(new CustomEvent("remove",{bubbles:!0}))},this.truncateLabel=async()=>{await this.updateComplete;var i,e=null==(e=null==(e=this.chip)?void 0:e.shadowRoot)?void 0:e.querySelector("button.primary");e&&(i=null==(i=null==(i=null==(i=this.getRootNode())?void 0:i.host)?void 0:i.getBoundingClientRect())?void 0:i.width,e.style.cssText=`max-width: ${i?i-165:190}px;`,e.querySelector(".label").style.cssText=`
2
2
  overflow: hidden;
3
3
  display: block;
4
- align-content: center;`)}}firstUpdated(i){super.firstUpdated(i),this.truncate&&(this.truncateLabel(),window.addEventListener("resize",this.truncateLabel))}disconnectedCallback(){super.disconnectedCallback(),this.truncate&&window.removeEventListener("resize",this.truncateLabel)}render(){let i;return"assist"===this.appearance?i=html`<md-assist-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-assist-chip>`:"outlined"===this.appearance?i=html`<md-assist-chip class="chip outlined" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-assist-chip>`:"filter"===this.appearance?i=html`<md-filter-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-filter-chip>`:"input"===this.appearance?i=html`<md-input-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}" @remove="${this.remove}">${this.label}<ix-icon slot="remove-trailing-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg></ix-icon></md-input-chip>`:"suggestion"===this.appearance&&(i=html`<md-suggestion-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-suggestion-chip>`),html`${i}`}}__decorate([property({type:String})],IxChip.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxChip.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxChip.prototype,"truncate",void 0),__decorate([property({type:Boolean,attribute:"always-focusable"})],IxChip.prototype,"alwaysFocusable",void 0),__decorate([property()],IxChip.prototype,"label",void 0),__decorate([query(".chip")],IxChip.prototype,"chip",void 0);class IxChipStyled extends IxChip{}IxChipStyled.styles=css`:host{--md-input-chip-leading-icon-color:var(--ix-chip-icon-color, #fff);--md-input-chip-focus-leading-icon-color:var(
4
+ align-content: center;`)}}firstUpdated(i){super.firstUpdated(i),this.truncate&&(this.truncateLabel(),window.addEventListener("resize",this.truncateLabel)),this.cursor&&this.chip.updateComplete.then(()=>{var i=null==(i=this.chip.shadowRoot)?void 0:i.querySelector("button.primary");i&&(i.style.cursor=this.cursor)})}disconnectedCallback(){super.disconnectedCallback(),this.truncate&&window.removeEventListener("resize",this.truncateLabel)}render(){let i;return"assist"===this.appearance?i=html`<md-assist-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-assist-chip>`:"outlined"===this.appearance?i=html`<md-assist-chip class="chip outlined" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-assist-chip>`:"filter"===this.appearance?i=html`<md-filter-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-filter-chip>`:"input"===this.appearance?i=html`<md-input-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}" @remove="${this.remove}">${this.label}<ix-icon slot="remove-trailing-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg></ix-icon></md-input-chip>`:"suggestion"===this.appearance&&(i=html`<md-suggestion-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-suggestion-chip>`),html`${i}`}}__decorate([property({type:String})],IxChip.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxChip.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxChip.prototype,"truncate",void 0),__decorate([property({type:Boolean,attribute:"always-focusable"})],IxChip.prototype,"alwaysFocusable",void 0),__decorate([property()],IxChip.prototype,"label",void 0),__decorate([property({type:String})],IxChip.prototype,"cursor",void 0),__decorate([query(".chip")],IxChip.prototype,"chip",void 0);class IxChipStyled extends IxChip{}IxChipStyled.styles=css`:host{--md-input-chip-leading-icon-color:var(--ix-chip-icon-color, #fff);--md-input-chip-focus-leading-icon-color:var(
5
5
  --ix-chip-icon-focus-color,
6
6
  #fff
7
7
  );--md-input-chip-hover-leading-icon-color:var(
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.2.1",
6
+ "version": "1.3.1-alpha.1",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -14,8 +14,7 @@
14
14
  "./ix-chip-set.min.js": "./dist/ix-chip-set.min.js",
15
15
  "./IxChipSet": "./dist/react/IxChipSet.js",
16
16
  "./IxChip": "./dist/react/IxChip.js",
17
- "./ix-custom-chip.js": "./dist/ix-custom-chip.js",
18
- "./ix-custom-chip.min.js": "./dist/ix-custom-chip.min.js"
17
+ "./ix-custom-chip.js": "./dist/ix-custom-chip.js"
19
18
  },
20
19
  "publishConfig": {
21
20
  "access": "public"
@@ -104,6 +103,5 @@
104
103
  "package.json",
105
104
  "README.md",
106
105
  "LICENSE"
107
- ],
108
- "gitHead": "0a87dc6e3da94a1375ec43a7ead2bfdec4913821"
106
+ ]
109
107
  }