@nyaruka/temba-components 0.117.0 → 0.117.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QA2LE,MAAC,GAAG,CAAC,CAAC;IA+GR,CAAC;IAzSC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4KT,CAAC;IACJ,CAAC;IA+CO,WAAW,CAAC,GAAe;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC7C,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,KAAoB;QACtC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACvC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAEM,MAAM;QACX,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU;YAChC,CAAC,CAAC,IAAI,CAAA;;eAEG;YACT,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAEd,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,CAAC;YACR,UAAU,CAAC;YACb,gBAAgB,EACd,IAAI,CAAC,OAAO;gBACZ,CAAC,CAAC,IAAI,CAAC,OAAO;oBACZ,CAAC,IAAI,CAAC,SAAS;oBACf,CAAC,IAAI,CAAC,SAAS;oBACf,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;YAChB,kBAAkB,EAAE,IAAI,CAAC,SAAS;YAClC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;YAChC,eAAe,EAAE,IAAI,CAAC,MAAM;YAC5B,kBAAkB,EAAE,IAAI,CAAC,SAAS;YAClC,oBAAoB,EAAE,IAAI,CAAC,WAAW;YACtC,cAAc,EAAE,IAAI,CAAC,KAAK;YAC1B,cAAc,EAAE,IAAI,CAAC,KAAK;YAC1B,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;;qBAEW,IAAI,CAAC,eAAe;mBACtB,IAAI,CAAC,aAAa;sBACf,IAAI,CAAC,aAAa;iBACvB,IAAI,CAAC,WAAW;iBAChB,IAAI,CAAC,WAAW;;;YAGrB,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,IAAI,iBAAiB;YACrD,CAAC,CAAC,IAAI;uDACqC,UAAU;;;KAG5D,CAAC;IACJ,CAAC;CACF;AAxHC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACrB;AAGN;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACb;AAGf;IADC,QAAQ,EAAE;oCACE;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACb","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n align-self: stretch;\n font-family: var(--font-family);\n font-weight: 400;\n }\n\n .small {\n font-size: 0.8em;\n --button-y: 0px;\n --button-x: 0.5em;\n }\n\n .v-2.button-container {\n background: var(--button-bg);\n background-image: var(--button-bg-img);\n color: var(--button-text);\n box-shadow: var(--button-shadow);\n transition: all calc(var(--transition-speed) / 2) ease-in;\n }\n\n .button-container {\n color: #fff;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n border-radius: var(--curvature);\n outline: none;\n transition: background ease-in var(--transition-speed);\n user-select: none;\n -webkit-user-select: none;\n text-align: center;\n border: var(--button-border, none);\n }\n\n .button-name {\n white-space: nowrap;\n }\n\n .secondary-button:hover .button-mask {\n border: 1px solid var(--color-button-secondary);\n }\n\n .button-mask:hover {\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container:focus {\n outline: none;\n margin: 0;\n }\n\n .button-container:focus {\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .button-container.secondary-button:focus .button-mask {\n background: transparent;\n }\n\n .button-mask {\n padding: var(--button-y) var(--button-x);\n border-radius: var(--curvature);\n border: 1px solid transparent;\n transition: var(--transition-speed);\n background: var(--button-mask);\n display: flex;\n align-items: center;\n }\n\n .button-container.disabled-button {\n background: rgba(0, 0, 0, 0.05);\n color: rgba(255, 255, 255, 0.45);\n cursor: default;\n }\n\n .button-container.disabled-button .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n }\n\n .button-container.disabled-button:hover .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container.active-button .button-mask {\n }\n\n .secondary-button.active-button {\n background: transparent;\n color: var(--color-text);\n }\n\n .secondary-button.active-button .button-mask {\n border: none;\n }\n\n .button-container.secondary-button.active-button:focus .button-mask {\n background: transparent;\n box-shadow: none;\n }\n\n .primary-button {\n background: var(--color-button-primary);\n color: var(--color-button-primary-text);\n }\n\n .affirmative {\n background: var(--color-button-attention);\n }\n\n .light-button {\n background: var(--color-button-light);\n color: var(--color-button-light-text);\n }\n\n .lined-button {\n border: 1px solid rgba(0, 0, 0, 0.1);\n color: rgba(0, 0, 0, 0.7);\n background: transparent;\n }\n\n .lined-button .button-mask {\n display: block;\n flex-grow: 1;\n }\n\n .lined-button .button-mask:hover {\n background: rgba(0, 0, 0, 0.03);\n }\n\n .icon-button {\n --button-y: 0.2em;\n --button-x: 0em;\n }\n\n .icon-button temba-icon {\n padding: 0 0.5em;\n }\n\n .attention-button {\n background: var(--color-button-attention);\n color: var(--color-button-primary-text);\n }\n\n .secondary-button {\n background: transparent;\n color: var(--color-text);\n }\n\n .destructive-button {\n background: var(--color-button-destructive);\n color: var(--color-button-destructive-text);\n }\n\n .button-mask.disabled-button {\n background: rgba(0, 0, 0, 0.1);\n }\n\n .secondary-button .button-mask:hover {\n background: transparent;\n }\n\n .submit-animation {\n padding: 1px 4px;\n }\n\n .submit-animation temba-loading {\n margin-bottom: -3px;\n line-height: normal;\n }\n `;\n }\n\n @property({ type: Boolean })\n primary: boolean;\n\n @property({ type: Boolean })\n secondary: boolean;\n\n @property({ type: Boolean })\n attention: boolean;\n\n @property({ type: Number })\n v = 1;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n light: boolean;\n\n @property()\n name: string;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n active: boolean;\n\n @property({ type: Boolean })\n small: boolean;\n\n @property({ type: Boolean })\n lined: boolean;\n\n @property({ type: String })\n href: string;\n\n @property({ type: Number })\n index?: number;\n\n @property({ type: String })\n icon?: string;\n\n private handleClick(evt: MouseEvent) {\n if (this.disabled) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n if (this.href && !this.disabled) {\n this.ownerDocument.location.href = this.href;\n evt.preventDefault();\n evt.stopPropagation();\n }\n }\n\n private handleKeyUp(event: KeyboardEvent): void {\n this.active = false;\n if (event.key === 'Enter') {\n this.click();\n }\n }\n\n private handleMouseDown(): void {\n if (!this.disabled && !this.submitting) {\n this.active = true;\n this.classList.add('active');\n }\n }\n\n private handleMouseUp(): void {\n this.active = false;\n this.classList.remove('active');\n }\n\n public render(): TemplateResult {\n const buttonName = this.submitting\n ? html`<div class=\"submit-animation\">\n <temba-loading units=\"3\" size=\"8\" color=\"#eee\"></temba-loading>\n </div>`\n : this.name;\n\n return html`\n <div\n class=\"button-container \n v-${this.v}\n ${getClasses({\n 'primary-button':\n this.primary ||\n (!this.primary &&\n !this.secondary &&\n !this.attention &&\n this.v == 1),\n 'secondary-button': this.secondary,\n 'disabled-button': this.disabled,\n 'active-button': this.active,\n 'attention-button': this.attention,\n 'destructive-button': this.destructive,\n 'light-button': this.light,\n 'lined-button': this.lined,\n 'icon-button': !!this.icon,\n small: this.small\n })}\"\n tabindex=\"0\"\n @mousedown=${this.handleMouseDown}\n @mouseup=${this.handleMouseUp}\n @mouseleave=${this.handleMouseUp}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n >\n <div class=\"button-mask\">\n ${this.icon\n ? html`<temba-icon name=\"${this.icon}\"></temba-icon>`\n : null}\n <div class=\"button-name\"><slot name=\"name\">${buttonName}</slot></div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n align-self: stretch;\n font-family: var(--font-family);\n font-weight: 400;\n }\n\n .small {\n font-size: 0.8em;\n --button-y: 0px;\n --button-x: 0.5em;\n }\n\n .v-2.button-container {\n background: var(--button-bg);\n background-image: var(--button-bg-img);\n color: var(--button-text);\n box-shadow: var(--button-shadow);\n transition: all calc(var(--transition-speed) / 2) ease-in;\n }\n\n .button-container {\n color: #fff;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n border-radius: var(--curvature);\n outline: none;\n transition: background ease-in var(--transition-speed);\n user-select: none;\n -webkit-user-select: none;\n text-align: center;\n border: var(--button-border, none);\n }\n\n .button-name {\n white-space: nowrap;\n }\n\n .secondary-button:hover .button-mask {\n border: 1px solid var(--color-button-secondary);\n }\n\n .button-mask:hover {\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container:focus {\n outline: none;\n margin: 0;\n }\n\n .button-container:focus {\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .button-container.secondary-button:focus .button-mask {\n background: transparent;\n }\n\n .button-mask {\n padding: var(--button-y) var(--button-x);\n border-radius: var(--curvature);\n border: 1px solid transparent;\n transition: var(--transition-speed);\n background: var(--button-mask);\n display: flex;\n align-items: center;\n }\n\n .button-container.disabled-button {\n background: rgba(0, 0, 0, 0.05);\n color: rgba(255, 255, 255, 0.45);\n cursor: default;\n }\n\n .button-container.disabled-button .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n }\n\n .button-container.disabled-button:hover .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container.active-button .button-mask {\n }\n\n .secondary-button.active-button {\n background: transparent;\n color: var(--color-text);\n }\n\n .secondary-button.active-button .button-mask {\n border: none;\n }\n\n .button-container.secondary-button.active-button:focus .button-mask {\n background: transparent;\n box-shadow: none;\n }\n\n .primary-button {\n background: var(--color-button-primary);\n color: var(--color-button-primary-text);\n }\n\n .affirmative {\n background: var(--color-button-attention);\n }\n\n .light-button {\n background: var(--color-button-light);\n color: var(--color-button-light-text);\n }\n\n .lined-button {\n border: 1px solid rgba(0, 0, 0, 0.1);\n color: rgba(0, 0, 0, 0.7);\n background: transparent;\n }\n\n .lined-button .button-mask {\n flex-grow: 1;\n }\n\n .lined-button .button-mask:hover {\n background: rgba(0, 0, 0, 0.03);\n }\n\n .icon-button {\n --button-y: 0.2em;\n --button-x: 0em;\n }\n\n .icon-button temba-icon {\n padding: 0 0.5em;\n }\n\n .attention-button {\n background: var(--color-button-attention);\n color: var(--color-button-primary-text);\n }\n\n .secondary-button {\n background: transparent;\n color: var(--color-text);\n }\n\n .destructive-button {\n background: var(--color-button-destructive);\n color: var(--color-button-destructive-text);\n }\n\n .button-mask.disabled-button {\n background: rgba(0, 0, 0, 0.1);\n }\n\n .secondary-button .button-mask:hover {\n background: transparent;\n }\n\n .submit-animation {\n padding: 1px 4px;\n }\n\n .submit-animation temba-loading {\n margin-bottom: -3px;\n line-height: normal;\n }\n `;\n }\n\n @property({ type: Boolean })\n primary: boolean;\n\n @property({ type: Boolean })\n secondary: boolean;\n\n @property({ type: Boolean })\n attention: boolean;\n\n @property({ type: Number })\n v = 1;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n light: boolean;\n\n @property()\n name: string;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n active: boolean;\n\n @property({ type: Boolean })\n small: boolean;\n\n @property({ type: Boolean })\n lined: boolean;\n\n @property({ type: String })\n href: string;\n\n @property({ type: Number })\n index?: number;\n\n @property({ type: String })\n icon?: string;\n\n private handleClick(evt: MouseEvent) {\n if (this.disabled) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n if (this.href && !this.disabled) {\n this.ownerDocument.location.href = this.href;\n evt.preventDefault();\n evt.stopPropagation();\n }\n }\n\n private handleKeyUp(event: KeyboardEvent): void {\n this.active = false;\n if (event.key === 'Enter') {\n this.click();\n }\n }\n\n private handleMouseDown(): void {\n if (!this.disabled && !this.submitting) {\n this.active = true;\n this.classList.add('active');\n }\n }\n\n private handleMouseUp(): void {\n this.active = false;\n this.classList.remove('active');\n }\n\n public render(): TemplateResult {\n const buttonName = this.submitting\n ? html`<div class=\"submit-animation\">\n <temba-loading units=\"3\" size=\"8\" color=\"#eee\"></temba-loading>\n </div>`\n : this.name;\n\n return html`\n <div\n class=\"button-container \n v-${this.v}\n ${getClasses({\n 'primary-button':\n this.primary ||\n (!this.primary &&\n !this.secondary &&\n !this.attention &&\n this.v == 1),\n 'secondary-button': this.secondary,\n 'disabled-button': this.disabled,\n 'active-button': this.active,\n 'attention-button': this.attention,\n 'destructive-button': this.destructive,\n 'light-button': this.light,\n 'lined-button': this.lined,\n 'icon-button': !!this.icon,\n small: this.small\n })}\"\n tabindex=\"0\"\n @mousedown=${this.handleMouseDown}\n @mouseup=${this.handleMouseUp}\n @mouseleave=${this.handleMouseUp}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n >\n <div class=\"button-mask\">\n ${this.icon\n ? html`<temba-icon name=\"${this.icon}\"></temba-icon>`\n : null}\n <div class=\"button-name\"><slot name=\"name\">${buttonName}</slot></div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED