@digital-realty/ix-icon-button 1.0.18 → 1.0.20
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/IxIconButton.d.ts +1 -1
- package/dist/IxIconButton.js +20 -0
- package/dist/IxIconButton.js.map +1 -1
- package/package.json +3 -3
package/dist/IxIconButton.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import '@digital-realty/ix-icon/ix-icon.js';
|
|
|
7
7
|
import { IconButton } from '@material/web/iconbutton/internal/icon-button';
|
|
8
8
|
import { FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';
|
|
9
9
|
type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
|
|
10
|
-
export type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';
|
|
10
|
+
export type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'icon-filled' | 'default';
|
|
11
11
|
export declare class IxIconButton extends LitElement {
|
|
12
12
|
readonly component: IconButton;
|
|
13
13
|
appearance: Appearance;
|
package/dist/IxIconButton.js
CHANGED
|
@@ -74,6 +74,26 @@ export class IxIconButton extends LitElement {
|
|
|
74
74
|
? html `<ix-icon filled slot="selected">${this.selectedIcon}</ix-icon>`
|
|
75
75
|
: nothing}
|
|
76
76
|
</md-filled-icon-button>`;
|
|
77
|
+
}
|
|
78
|
+
else if (this.appearance === 'icon-filled') {
|
|
79
|
+
comp = html `<md-icon-button
|
|
80
|
+
class="button"
|
|
81
|
+
?disabled=${this.disabled}
|
|
82
|
+
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
83
|
+
href=${ifDefined(this.href)}
|
|
84
|
+
target=${ifDefined(this.target)}
|
|
85
|
+
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
86
|
+
aria-label=${ariaLabel || nothing}
|
|
87
|
+
?toggle=${this.toggle}
|
|
88
|
+
?selected=${this.selected}
|
|
89
|
+
type=${this.type}
|
|
90
|
+
name=${ifDefined(this.name)}
|
|
91
|
+
value=${ifDefined(this.value)}
|
|
92
|
+
><ix-icon filled>${this.icon}</ix-icon>
|
|
93
|
+
${this.selectedIcon
|
|
94
|
+
? html `<ix-icon filled slot="selected">${this.selectedIcon}</ix-icon>`
|
|
95
|
+
: nothing}
|
|
96
|
+
</md-icon-button>`;
|
|
77
97
|
}
|
|
78
98
|
else if (this.appearance === 'filled-tonal') {
|
|
79
99
|
comp = html `<md-filled-tonal-icon-button
|
package/dist/IxIconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxIconButton.js","sourceRoot":"","sources":["../src/IxIconButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/iconbutton/filled-icon-button.js';\nimport '@material/web/iconbutton/filled-tonal-icon-button.js';\nimport '@material/web/iconbutton/outlined-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { IconButton } from '@material/web/iconbutton/internal/icon-button';\nimport { FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\nexport type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';\n\nexport class IxIconButton extends LitElement {\n @query('.button')\n readonly component!: IconButton;\n\n @property()\n appearance: Appearance = 'default';\n\n @property()\n icon: string = '';\n\n @property()\n selectedIcon: string = '';\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({ type: Boolean, attribute: 'flip-icon-in-rtl' })\n flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href: string | undefined = undefined;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target: LinkTarget | '' | undefined = undefined;\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({ attribute: 'aria-label-selected' }) ariaLabelSelected:\n | string\n | undefined = undefined;\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean }) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the selected icon, or the default icon If no `slot=\"selected\"`\n * icon is provided.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property() type: FormSubmitterType = 'submit';\n\n @property() name: string | undefined = undefined;\n\n @property() value: string | undefined = undefined;\n\n @property() label: string | undefined = undefined;\n\n protected createRenderRoot() {\n return this;\n }\n\n render() {\n let comp;\n\n const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n if (this.appearance === 'filled') {\n comp = html`<md-filled-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon filled>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon filled slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-icon-button>`;\n } else if (this.appearance === 'filled-tonal') {\n comp = html`<md-filled-tonal-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-tonal-icon-button>`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-outlined-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-outlined-icon-button>`;\n } else if (this.appearance === 'default') {\n comp = html`<md-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-icon-button>`;\n }\n\n return html`${comp}`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxIconButton.js","sourceRoot":"","sources":["../src/IxIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,sDAAsD,CAAC;AAC9D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAY5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAKE,eAAU,GAAe,SAAS,CAAC;QAGnC,SAAI,GAAW,EAAE,CAAC;QAGlB,iBAAY,GAAW,EAAE,CAAC;QAE1B;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QAEH,kBAAa,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACS,SAAI,GAAuB,SAAS,CAAC;QAEjD;;WAEG;QACS,WAAM,GAAgC,SAAS,CAAC;QAE5D;;WAEG;QAC6C,sBAAiB,GAEjD,SAAS,CAAC;QAE1B;;;WAGG;QAC0B,WAAM,GAAG,KAAK,CAAC;QAE5C;;;;WAIG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAEjD,SAAI,GAAsB,QAAQ,CAAC;QAEnC,SAAI,GAAuB,SAAS,CAAC;QAErC,UAAK,GAAuB,SAAS,CAAC;QAEtC,UAAK,GAAuB,SAAS,CAAC;IA8GpD,CAAC;IA5GW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAK,IAAwB,CAAC,SAAS,CAAC;QAEpE,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,aAAa;eAC/B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;8BACT,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;qBAC1C,SAAS,IAAI,OAAO;kBACvB,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;eACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;2BACV,IAAI,CAAC,IAAI;UAC1B,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,YAAY,YAAY;gBACtE,CAAC,CAAC,OAAO;+BACY,CAAC;SAC3B;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,aAAa,EAAE;YAC5C,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,aAAa;eAC/B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;8BACT,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;qBAC1C,SAAS,IAAI,OAAO;kBACvB,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;eACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;2BACV,IAAI,CAAC,IAAI;UAC1B,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,YAAY,YAAY;gBACtE,CAAC,CAAC,OAAO;wBACK,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,cAAc,EAAE;YAC7C,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,aAAa;eAC/B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;8BACT,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;qBAC1C,SAAS,IAAI,OAAO;kBACvB,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;eACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;oBACjB,IAAI,CAAC,IAAI;UACnB,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY,YAAY;gBAC/D,CAAC,CAAC,OAAO;qCACkB,CAAC;SACjC;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YACzC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,aAAa;eAC/B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;8BACT,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;qBAC1C,SAAS,IAAI,OAAO;kBACvB,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;eACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;oBACjB,IAAI,CAAC,IAAI;UACnB,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY,YAAY;gBAC/D,CAAC,CAAC,OAAO;iCACc,CAAC;SAC7B;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACxC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,aAAa;eAC/B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;8BACT,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;qBAC1C,SAAS,IAAI,OAAO;kBACvB,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;eAClB,IAAI,CAAC,IAAI;eACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;oBACjB,IAAI,CAAC,IAAI;UACnB,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY,YAAY;gBAC/D,CAAC,CAAC,OAAO;wBACK,CAAC;SACpB;QAED,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AAxKC;IADC,KAAK,CAAC,SAAS,CAAC;+CACe;AAGhC;IADC,QAAQ,EAAE;gDACwB;AAGnC;IADC,QAAQ,EAAE;0CACO;AAGlB;IADC,QAAQ,EAAE;kDACe;AAKkB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAM7D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACrC;AAKV;IAAX,QAAQ,EAAE;0CAAsC;AAKrC;IAAX,QAAQ,EAAE;4CAAiD;AAKZ;IAA/C,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;uDAErB;AAMG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAgB;AAOA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAEjD;IAAX,QAAQ,EAAE;0CAAoC;AAEnC;IAAX,QAAQ,EAAE;0CAAsC;AAErC;IAAX,QAAQ,EAAE;2CAAuC;AAEtC;IAAX,QAAQ,EAAE;2CAAuC","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/iconbutton/filled-icon-button.js';\nimport '@material/web/iconbutton/filled-tonal-icon-button.js';\nimport '@material/web/iconbutton/outlined-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { IconButton } from '@material/web/iconbutton/internal/icon-button';\nimport { FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\nexport type Appearance =\n | 'filled'\n | 'filled-tonal'\n | 'outlined'\n | 'icon-filled'\n | 'default';\n\nexport class IxIconButton extends LitElement {\n @query('.button')\n readonly component!: IconButton;\n\n @property()\n appearance: Appearance = 'default';\n\n @property()\n icon: string = '';\n\n @property()\n selectedIcon: string = '';\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({ type: Boolean, attribute: 'flip-icon-in-rtl' })\n flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href: string | undefined = undefined;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target: LinkTarget | '' | undefined = undefined;\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({ attribute: 'aria-label-selected' }) ariaLabelSelected:\n | string\n | undefined = undefined;\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean }) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the selected icon, or the default icon If no `slot=\"selected\"`\n * icon is provided.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property() type: FormSubmitterType = 'submit';\n\n @property() name: string | undefined = undefined;\n\n @property() value: string | undefined = undefined;\n\n @property() label: string | undefined = undefined;\n\n protected createRenderRoot() {\n return this;\n }\n\n render() {\n let comp;\n\n const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n if (this.appearance === 'filled') {\n comp = html`<md-filled-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon filled>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon filled slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-icon-button>`;\n } else if (this.appearance === 'icon-filled') {\n comp = html`<md-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon filled>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon filled slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-icon-button>`;\n } else if (this.appearance === 'filled-tonal') {\n comp = html`<md-filled-tonal-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-tonal-icon-button>`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-outlined-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-outlined-icon-button>`;\n } else if (this.appearance === 'default') {\n comp = html`<md-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-icon-button>`;\n }\n\n return html`${comp}`;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-icon-button following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.20",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-icon": "
|
|
29
|
+
"@digital-realty/ix-icon": "^1.0.2",
|
|
30
30
|
"@lit/react": "^1.0.2",
|
|
31
31
|
"@material/web": "^1.0.1",
|
|
32
32
|
"lit": "^2.0.2",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"README.md",
|
|
99
99
|
"LICENSE"
|
|
100
100
|
],
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "7dd8615d5f732cb14d465b2d46b2ee743546a4b2"
|
|
102
102
|
}
|